krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 07:37:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

selList overflow (#13179)

Browse Source 
* Limit `membersModal` list selector to 12-unit grid (to prevent wrap around on long text for `sortOptions`)
* Add ellipse based overflow for `membersModal` list selector
* Add padding so that the checkmark for `membersModal` list doesn't overlap with text
* Use scss with v-deep properly (also pretty checkmark to "full-width" of checkmark)
This commit is contained in:
Helcostr
2021-04-28 14:07:07 -07:00
committed by GitHub
parent 0bd737469a
commit 056f4926f5
2 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
website/client/src/components/ui/selectList.vue
View File

@@ -53,23 +53,32 @@
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
.select-list ::v-deep .selectListItem {
position: relative;
&:not(.showIcon) {
.svg-icon.check-icon {
display: none;
}
.select-list ::v-deep {
.dropdown-toggle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svg-icon.check-icon.color {
position: absolute;
right: 0.855rem;
top: 0.688rem;
bottom: 0.688rem;
width: 0.77rem;
height: 0.615rem;
color: $purple-300;
.selectListItem {
position: relative;
padding-right: 1.625rem;
&:not(.showIcon) {
.svg-icon.check-icon {
display: none;
}
}
.svg-icon.check-icon.color {
position: absolute;
right: 0.855rem;
top: 0.688rem;
bottom: 0.688rem;
width: 0.77rem;
height: 0.615rem;
color: $purple-300;
}
}
}
</style>