UNPKG

2.27 kBSCSSView Raw
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 // outline: 0;
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; // required to override the cursor above
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}