1 | @use './variables.scss' as *;
|
2 |
|
3 | $color: $widget-color !default;
|
4 | $font-size: $widget-font-size !default;
|
5 | $padding-y: 0.5em !default;
|
6 |
|
7 | $_hover-bg: $widget-hover-bg;
|
8 | $_hover-border-color: $widget-hover-border-color;
|
9 | $_hover-color: $widget-hover-color;
|
10 |
|
11 | $focus-bg: $_hover-bg !default;
|
12 | $focus-border-color: $_hover-border-color !default;
|
13 | $focus-color: $_hover-color !default;
|
14 |
|
15 | $selected-bg: #007bff !default;
|
16 | $selected-border-color: $selected-bg !default;
|
17 | $selected-color: #fff !default;
|
18 |
|
19 | $disabled-bg: transparent !default;
|
20 | $disabled-border-color: transparent !default;
|
21 | $disabled-color: $gray-300 !default;
|
22 |
|
23 | $option-padding-y: 0.25em !default;
|
24 | $option-padding-x: 1.5em !default;
|
25 | $option-muted-color: $gray-400 !default;
|
26 |
|
27 | $option-create-bg: $widget-bg !default;
|
28 |
|
29 | $optgroup-color: null !default;
|
30 | $optgroup-font-weight: bold !default;
|
31 |
|
32 | @mixin List() {
|
33 | .rw-list {
|
34 |
|
35 | font-size: $font-size;
|
36 | overflow-x: visible;
|
37 | overflow-y: auto;
|
38 | padding-top: $padding-y;
|
39 | padding-bottom: $padding-y;
|
40 |
|
41 | &:focus {
|
42 | outline: none;
|
43 | }
|
44 | }
|
45 |
|
46 | .rw-list-option {
|
47 | user-select: none;
|
48 | color: $color;
|
49 | cursor: pointer;
|
50 | border: 1px solid transparent;
|
51 | background-clip: $widget-background-clip;
|
52 |
|
53 | &:hover,
|
54 | [data-intent='keyboard'] &.rw-state-focus:not(.rw-state-selected) {
|
55 | background-color: $focus-bg;
|
56 | border-color: $focus-border-color;
|
57 | color: $focus-color;
|
58 | }
|
59 |
|
60 | &.rw-state-selected {
|
61 | background-color: $selected-bg;
|
62 | border-color: $selected-border-color;
|
63 | color: $selected-color;
|
64 | }
|
65 |
|
66 | &.rw-state-disabled {
|
67 | cursor: not-allowed;
|
68 | background-color: $disabled-bg;
|
69 | border-color: $disabled-border-color;
|
70 | color: $disabled-color;
|
71 | }
|
72 | }
|
73 |
|
74 | .rw-list-empty,
|
75 | .rw-list-option,
|
76 | .rw-list-optgroup {
|
77 | padding: $option-padding-y $option-padding-x;
|
78 | outline: none;
|
79 | }
|
80 |
|
81 | .rw-list-empty {
|
82 | text-align: center;
|
83 | color: $option-muted-color;
|
84 | }
|
85 |
|
86 | .rw-list-optgroup {
|
87 | color: $optgroup-color;
|
88 | font-weight: $optgroup-font-weight;
|
89 | padding-top: 7px;
|
90 | }
|
91 |
|
92 | .rw-list-option-create {
|
93 | @extend .rw-list-option;
|
94 |
|
95 | display: block;
|
96 | font-size: $font-size;
|
97 | padding: $option-padding-y $option-padding-x;
|
98 | }
|
99 | }
|