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

selectList spacing (#13329) (#13590)

Browse Source 
* Use Flexbox for selectList to get the full width of the selectItems within dropdown
* Add a width to selectDifficulty to avoid visual regression when switching selectList to Flexbox
This commit is contained in:
John Bryson
2021-11-12 11:41:54 -05:00
committed by GitHub
parent 480a0529a2
commit 33e35d76a4
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,11 +58,17 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 25px; /* To allow enough room for the down arrow to be displayed */
}
.selectListItem {
position: relative;
padding-right: 1.625rem;
.dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
}
&:not(.showIcon) {
.svg-icon.check-icon {
@@ -71,10 +77,7 @@
}
.svg-icon.check-icon.color {
position: absolute;
right: 0.855rem;
top: 0.688rem;
bottom: 0.688rem;
margin-left: 10px; /* So the flex item (checkmark) will have some spacing from the text */
width: 0.77rem;
height: 0.615rem;
color: $purple-300;