-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathszn-select.css
134 lines (107 loc) · 4.24 KB
/
szn-select.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
:root {
--szn-select--border-width: 1px;
--szn-select--border-color: #cccccc;
--szn-select--active-border-color: #7dbfff;
--szn-select--border-radius: 4px;
--szn-select--min-width: 109px;
--szn-select--height: 2em;
--szn-select--height-px: 32px;
--szn-select--option-indent: 12px;
--szn-select--option-padding: 5px 5px 5px var(--szn-select--option-indent);
--szn-select--selected-option-background: #eeeeee;
--szn-select--button-padding: 0 5px 0 var(--szn-select--option-indent);
--szn-select--state-arrow-width: var(--szn-select--height);
--szn-select--state-arrow-closed: "▼";
--szn-select--state-arrow-opened: "▲";
--szn-select--text-color: #000000;
--szn-select--disabled-text-color: #cccccc;
--szn-select--background: #ffffff;
--szn-select--active-box-shadow: 0 0 3px rgba(0, 132, 255, .4);
}
szn-select {
display: inline-block;
position: relative;
}
szn-select,
szn-tethered [data-szn-select--ui--dropdown] {
--szn-select--button--border-width: var(--szn-select--border-width);
--szn-select--button--border-color: var(--szn-select--border-color);
--szn-select--button--border-radius: var(--szn-select--border-radius);
--szn-select--button--padding: var(--szn-select--button-padding);
--szn-select--button--height: var(--szn-select--height);
--szn-select--button--height-px: var(--szn-select--height-px);
--szn-select--button--text-color: var(--szn-select--text-color);
--szn-select--button--disabled-text-color: var(--szn-select--disabled-text-color);
--szn-select--button--mark-width: var(--szn-select--state-arrow-width);
--szn-select--button--background-color: var(--szn-select--background);
--szn-select--button--icon-closed: var(--szn-select--state-arrow-closed);
--szn-select--button--icon-opened: var(--szn-select--state-arrow-opened);
--szn-select--options--border-width: var(--szn-select--border-width);
--szn-select--options--border-color: var(--szn-select--border-color);
--szn-select--options--border-radius-dropdown: 0 0 var(--szn-select--border-radius) var(--szn-select--border-radius);
--szn-select--options--border-radius-dropup: var(--szn-select--border-radius) var(--szn-select--border-radius) 0 0;
--szn-select--options--border-radius-mutli-select: var(--szn-select--border-radius);
--szn-select--options--item-padding: var(--szn-select--option-padding);
--szn-select--options--item-indent: var(--szn-select--option-indent);
--szn-select--options--text-color: var(--szn-select--text-color);
--szn-select--options--disabled-text: var(--szn-select--disabled-text-color);
--szn-select--options--background-color: var(--szn-select--background);
--szn-select--options--selected-background: var(--szn-select--selected-option-background);
--szn-select--ui--active-border-color: var(--szn-select--active-border-color);
--szn-select--ui--active-box-shadow: var(--szn-select--active-box-shadow);
--szn-select--ui--dropdown-offset: calc(-1 * var(--szn-select--border-width));
--szn-select--ui--dropdown-min-width: var(--szn-select--min-width);
}
/* styles used when JS is available */
szn-select[data-szn-select--ready] select {
position: fixed;
right: 999999px;
right: 1000vw;
}
szn-select[data-szn-select--single] {
min-width: var(--szn-select--min-width);
height: var(--szn-select--height);
}
szn-select [data-szn-select--ui] {
display: none;
position: relative;
width: 100%;
height: 100%;
}
szn-select[data-szn-select--ready] [data-szn-select--ui] {
display: block;
}
/* RichNativeSelect, MultiSelect */
szn-select[data-szn-select--touch-only] select {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
min-width: 0;
width: 100%;
height: 100%;
opacity: 0;
}
/* VanillaAriaLabelledBySelect */
szn-select[data-szn-select--vanilla-aria] select {
display: none;
}
szn-select[data-szn-select--vanilla-aria] szn-select--ui {
position: relative;
}
szn-select[data-szn-select--vanilla-aria] ul[aria-hidden='true'] {
display: none;
}
szn-select[data-szn-select--vanilla-aria] [data-szn-select--vanilla-aria-button],
szn-select[data-szn-select--vanilla-aria] [data-szn-select--vanilla-aria-dropdown] {
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
}