sudoxreboot/habitica-self-host
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica-self-host.git synced 2026-07-22 13:48:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 5 deletions
Show stats 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 {
display: flex;
align-items: center;
width: 100%;
div.svg-icon {
::v-deep svg {

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;