krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 15:48:04 +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

1
website/client/src/components/tasks/modal-controls/selectDifficulty.vue
View File

@@ -39,6 +39,7 @@
.difficulty-item { .difficulty-item {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%;
div.svg-icon { div.svg-icon {
::v-deep svg { ::v-deep svg {

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

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