diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js index 25b9c95fb..3434f4c51 100644 --- a/src/common/Multiselect/Multiselect.js +++ b/src/common/Multiselect/Multiselect.js @@ -115,7 +115,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren options.map(({ label, value }) => ( )) : diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less index 54138b0d3..87a23d7d5 100644 --- a/src/common/Multiselect/styles.less +++ b/src/common/Multiselect/styles.less @@ -11,10 +11,20 @@ padding: 0 1rem; background-color: @color-background; + &:global(.active) { + .label { + color: @color-surface-light5; + } + + .icon { + fill: @color-surface-light5; + } + } + .label { flex: 1; max-height: 2.4em; - color: @color-surface-light5; + color: @color-secondaryvariant1; } .icon { @@ -22,7 +32,7 @@ width: 1rem; height: 1rem; margin-left: 1rem; - fill: @color-surface-light5; + fill: @color-secondaryvariant1; } .popup-menu-container { @@ -49,6 +59,10 @@ background-color: @color-background-light2; } + &:not(:last-child) { + border-bottom: thin solid @color-primary-light4; + } + .label { flex: 1; max-height: 4.8em; @@ -58,10 +72,11 @@ .icon { flex: none; display: none; - width: 1rem; - height: 1rem; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; margin-left: 1rem; - fill: @color-surface-light5; + background-color: @color-accent3; } }