UNPKG

1.91 kBSCSSView Raw
1@import '../form-field/form-field.component.theme';
2
3@mixin select-filled {
4 nb-select.appearance-filled .select-button {
5 border-style: nb-theme(select-filled-border-style);
6 border-width: nb-theme(select-filled-border-width);
7 }
8
9 @each $size in nb-get-sizes() {
10 nb-select.appearance-filled.size-#{$size} .select-button {
11 padding: nb-theme(select-filled-#{$size}-padding);
12 @include nb-ltr(padding-right, nb-theme(select-icon-offset));
13 @include nb-rtl(padding-left, nb-theme(select-icon-offset));
14 }
15
16 @include nb-form-field-with-prefix('nb-select.appearance-filled.size-#{$size} .select-button', $size);
17 }
18
19 @each $status in nb-get-statuses() {
20 nb-select.appearance-filled.status-#{$status} .select-button {
21 background-color: nb-theme(select-filled-#{$status}-background-color);
22 border-color: nb-theme(select-filled-#{$status}-border-color);
23 color: nb-theme(select-filled-#{$status}-text-color);
24
25 &.placeholder {
26 color: nb-theme(select-filled-#{$status}-placeholder-text-color);
27 }
28
29 &:focus {
30 background-color: nb-theme(select-filled-#{$status}-focus-background-color);
31 border-color: nb-theme(select-filled-#{$status}-focus-border-color);
32 }
33 &:hover {
34 background-color: nb-theme(select-filled-#{$status}-hover-background-color);
35 border-color: nb-theme(select-filled-#{$status}-hover-border-color);
36 }
37
38 &[disabled] {
39 background-color: nb-theme(select-filled-#{$status}-disabled-background-color);
40 border-color: nb-theme(select-filled-#{$status}-disabled-border-color);
41 color: nb-theme(select-filled-#{$status}-disabled-text-color);
42
43 nb-icon {
44 color: nb-theme(select-filled-#{$status}-disabled-icon-color);
45 }
46 }
47
48 nb-icon {
49 color: nb-theme(select-filled-#{$status}-icon-color);
50 }
51 }
52 }
53}