49 lines
1.1 KiB
SCSS
49 lines
1.1 KiB
SCSS
|
@use 'sass:map';
|
||
|
|
@use '@beeline/design-tokens/scss/tokens/themes/dark';
|
||
|
|
@use '@beeline/design-tokens/scss/tokens/themes/light';
|
||
|
|
|
||
|
|
.select {
|
||
|
|
select {
|
||
|
|
border: 1px solid transparent;
|
||
|
|
|
||
|
|
&:focus,
|
||
|
|
&:active {
|
||
|
|
border: 1px solid map.get(light.$theme, 'color-border-focus');
|
||
|
|
background-color: map.get(light.$theme, 'color-background-base');
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:not(.is-multiple):not(.is-loading)::after {
|
||
|
|
content: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus,
|
||
|
|
&.is-focused,
|
||
|
|
&:active,
|
||
|
|
&.is-active {
|
||
|
|
select {
|
||
|
|
border: 1px solid map.get(light.$theme, 'color-border-focus');
|
||
|
|
background-color: map.get(light.$theme, 'color-background-base');
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark-theme & {
|
||
|
|
select {
|
||
|
|
border: 1px solid map.get(dark.$theme, 'color-border-focus');
|
||
|
|
background-color: map.get(dark.$theme, 'color-background-base');
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark-theme & {
|
||
|
|
color: map.get(dark.$theme, 'color-text-active');
|
||
|
|
|
||
|
|
& select {
|
||
|
|
color: map.get(dark.$theme, 'color-text-active');
|
||
|
|
background-color: map.get(dark.$theme, 'color-control-background');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|