deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2026-03-14 14:45:47 +01:00
Code Issues Projects Releases Wiki Activity

Add decoupled styles for dropdowns

Browse source
This commit is contained in:
Sebastian Zoglowek 2026-02-24 10:40:28 +01:00
commit b38f8c5ee3
1 changed files with 20 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/styles/choices.scss
View file

@ -65,6 +65,14 @@ $choices-placeholder-opacity: 0.5 !default;
overflow: visible;
}
// Only apply the normal positioning for dropdowns that are not detached from the choices-selector
&.is-flipped {
.#{$choices-selector}__list {
top: auto;
bottom: 100%;
}
}
&.is-disabled {
:is(.#{$choices-selector}__inner, .#{$choices-selector}__input) {
background-color: var(--choices-bg-color-disabled, #{$choices-bg-color-disabled});
@ -90,14 +98,6 @@ $choices-placeholder-opacity: 0.5 !default;
.#{$choices-selector}__inner {
padding-bottom: var(--choices-inner-one-padding, #{$choices-inner-one-padding});
}
.#{$choices-selector}__input {
display: block;
width: var(--choices-width, #{$choices-width});
padding: var(--choices-dropdown-item-padding, #{$choices-dropdown-item-padding});
border-bottom: var(--choices-base-border, #{$choices-base-border}) var(--choices-keyline-color, #{$choices-keyline-color});
background-color: var(--choices-bg-color-dropdown, #{$choices-bg-color-dropdown});
margin: 0;
}
.#{$choices-selector}__button {
background-image: var(--choices-icon-cross-inverse, #{$choices-icon-cross-inverse});
padding: 0;
@ -157,6 +157,17 @@ $choices-placeholder-opacity: 0.5 !default;
}
}
.#{$choices-selector}__dropdown--single {
.#{$choices-selector}__input {
display: block;
width: var(--choices-width, #{$choices-width});
padding: var(--choices-dropdown-item-padding, #{$choices-dropdown-item-padding});
border-bottom: var(--choices-base-border, #{$choices-base-border}) var(--choices-keyline-color, #{$choices-keyline-color});
background-color: var(--choices-bg-color-dropdown, #{$choices-bg-color-dropdown});
margin: 0;
}
}
.#{$choices-selector}:is([data-type*='select-multiple'], [data-type*='text']) {
.#{$choices-selector}__inner {
cursor: text;
@ -205,7 +216,6 @@ $choices-placeholder-opacity: 0.5 !default;
border-color: var(--choices-invalid-color, #{$choices-invalid-color});
}
/** ToDo: rewrite to be applied to the dropdown */
.is-flipped.is-open & {
border-radius: 0 0 var(--choices-border-radius, #{$choices-border-radius}) var(--choices-border-radius, #{$choices-border-radius});
}
@ -296,11 +306,9 @@ $choices-placeholder-opacity: 0.5 !default;
}
&.is-flipped {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: -1px;
border-radius: 0.25rem 0.25rem 0 0;
border-radius: var(--choices-border-radius, #{$choices-border-radius}) var(--choices-border-radius, #{$choices-border-radius}) 0 0;
}
.#{$choices-selector}__list {
position: relative;