@itwin/itwinui-css 0.50.1 → 0.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7242 -5607
  3. package/css/badge.css +2 -1
  4. package/css/blockquote.css +10 -7
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +119 -88
  8. package/css/code.css +69 -56
  9. package/css/color-picker.css +150 -103
  10. package/css/date-picker.css +73 -55
  11. package/css/expandable-block.css +212 -160
  12. package/css/fieldset.css +22 -18
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +100 -78
  16. package/css/header.css +471 -364
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +174 -137
  19. package/css/inputs.css +1134 -942
  20. package/css/keyboard.css +11 -7
  21. package/css/location-marker.css +68 -58
  22. package/css/menu.css +105 -80
  23. package/css/modal.css +54 -43
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +315 -237
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +189 -140
  30. package/css/skip-to-content.css +41 -27
  31. package/css/slider.css +112 -87
  32. package/css/table.css +563 -419
  33. package/css/tabs.css +324 -238
  34. package/css/tag.css +111 -84
  35. package/css/text.css +46 -27
  36. package/css/tile.css +387 -311
  37. package/css/time-picker.css +113 -86
  38. package/css/toast-notification.css +232 -173
  39. package/css/toggle-switch.css +176 -111
  40. package/css/tooltip.css +21 -16
  41. package/css/tree.css +123 -93
  42. package/css/user-icon.css +204 -162
  43. package/css/wizard.css +156 -131
  44. package/package.json +5 -6
  45. package/scss/alert/alert.scss +1 -5
  46. package/scss/carousel/carousel.scss +4 -1
  47. package/scss/code/codeblock.scss +1 -1
  48. package/scss/inputs/checkbox.scss +1 -0
  49. package/scss/inputs/labeled-inputs.scss +8 -8
  50. package/scss/inputs/radio.scss +0 -4
  51. package/scss/location-marker/data-rich.scss +1 -1
  52. package/scss/location-marker/me.scss +4 -4
  53. package/scss/popover/popover.scss +1 -2
  54. package/scss/progress-indicator/linear.scss +2 -10
  55. package/scss/style/global.scss +1 -5
  56. package/scss/style/mixins.scss +9 -0
  57. package/scss/table/table.scss +23 -14
  58. package/scss/toast-notification/categories.scss +1 -5
  59. package/scss/toggle-switch/classes.scss +4 -0
  60. package/scss/toggle-switch/toggle-switch.scss +141 -162
package/css/side-navigation.css CHANGED
@@ -10,102 +10,134 @@
10
10
  background-color:#EEF0F3;
11
11
  border-right:1px solid #C7CCD1;
12
12
  background-color:var(--iui-color-background-3);
13
- border-right:1px solid var(--iui-color-background-5); }
14
- @media (prefers-reduced-motion: no-preference){
15
- .iui-side-navigation{
16
- transition:max-width 0.2s ease-out; } }
17
- .iui-side-navigation > .iui-sidenav-content{
18
- display:flex;
19
- flex-direction:column;
20
- flex-grow:1;
21
- width:100%; }
22
- .iui-side-navigation > .iui-sidenav-content > .iui-top,
23
- .iui-side-navigation > .iui-sidenav-content > .iui-bottom{
24
- flex-grow:1;
25
- display:flex;
26
- flex-direction:column; }
27
- .iui-side-navigation > .iui-sidenav-content > .iui-top .iui-sidenav-button:first-of-type{
28
- border-top:none; }
29
- .iui-side-navigation > .iui-sidenav-content > .iui-top .iui-sidenav-button:not(:last-of-type){
30
- border-bottom:none; }
31
- .iui-side-navigation > .iui-sidenav-content > .iui-bottom{
32
- justify-content:flex-end; }
33
- .iui-side-navigation > .iui-sidenav-content > .iui-bottom .iui-sidenav-button{
34
- border-bottom:none; }
35
- .iui-side-navigation > .iui-sidenav-content + .iui-sidenav-button.iui-expand{
36
- border:none;
37
- border-top:1px solid #C7CCD1;
38
- border-top:1px solid var(--iui-color-background-5); }
13
+ border-right:1px solid var(--iui-color-background-5);
14
+ }
15
+ @media (prefers-reduced-motion: no-preference){
16
+ .iui-side-navigation{
17
+ transition:max-width 0.2s ease-out;
18
+ }
19
+ }
20
+ .iui-side-navigation > .iui-sidenav-content{
21
+ display:flex;
22
+ flex-direction:column;
23
+ flex-grow:1;
24
+ width:100%;
25
+ }
26
+ .iui-side-navigation > .iui-sidenav-content > .iui-top,
27
+ .iui-side-navigation > .iui-sidenav-content > .iui-bottom{
28
+ flex-grow:1;
29
+ display:flex;
30
+ flex-direction:column;
31
+ }
32
+ .iui-side-navigation > .iui-sidenav-content > .iui-top .iui-sidenav-button:first-of-type{
33
+ border-top:none;
34
+ }
35
+ .iui-side-navigation > .iui-sidenav-content > .iui-top .iui-sidenav-button:not(:last-of-type){
36
+ border-bottom:none;
37
+ }
38
+ .iui-side-navigation > .iui-sidenav-content > .iui-bottom{
39
+ justify-content:flex-end;
40
+ }
41
+ .iui-side-navigation > .iui-sidenav-content > .iui-bottom .iui-sidenav-button{
42
+ border-bottom:none;
43
+ }
44
+ .iui-side-navigation > .iui-sidenav-content + .iui-sidenav-button.iui-expand{
45
+ border:none;
46
+ border-top:1px solid #C7CCD1;
47
+ border-top:1px solid var(--iui-color-background-5);
48
+ }
49
+ .iui-side-navigation.iui-collapsed{
50
+ min-width:72px;
51
+ max-width:72px;
52
+ }
53
+ @supports (min-width: max(0px)){
39
54
  .iui-side-navigation.iui-collapsed{
40
- min-width:72px;
41
- max-width:72px; }
42
- @supports (min-width: max(0px)){
43
- .iui-side-navigation.iui-collapsed{
44
- min-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left));
45
- max-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left)); } }
46
- .iui-side-navigation.iui-expanded,
47
- .iui-side-navigation > .iui-sidenav-content{
48
- max-width:288px; }
49
- .iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-button-icon,
50
- .iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-button-icon{
51
- transform:scaleX(-1); }
52
- .iui-side-navigation .iui-sidenav-button{
53
- gap:24px;
54
- border-radius:0;
55
- border-left:none;
56
- border-right:none;
57
- overflow:hidden;
58
- justify-content:flex-start;
59
- --_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0; }
60
- .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
61
- height:55px; }
62
- @supports (padding: max(0px)){
63
- .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
64
- padding-left:max(24px, 24px + env(safe-area-inset-left)); } }
65
- .iui-side-navigation .iui-sidenav-button > .iui-button-label{
66
- white-space:nowrap;
67
- overflow:hidden;
68
- text-overflow:ellipsis; }
69
- .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
70
- border-color:#C7CCD1;
71
- border-color:var(--iui-color-background-5); }
72
- .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
73
- width:24px;
74
- height:24px;
75
- flex-shrink:0; }
76
- .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
77
- fill:#008BE1;
78
- fill:var(--iui-color-foreground-primary); }
79
- .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
80
- background-color:#F8F9FB;
81
- background-color:var(--iui-color-background-2); }
82
- .iui-side-navigation .iui-sidenav-button.iui-expand{
83
- height:22px;
84
- justify-content:center;
85
- border:none;
86
- border-bottom:1px solid #C7CCD1;
87
- border-bottom:1px solid var(--iui-color-background-5); }
88
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
89
- fill:rgba(0, 0, 0, 0.4);
90
- fill:var(--iui-icons-color);
91
- display:inline-flex;
92
- width:12px;
93
- height:12px; }
94
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
95
- fill:#008BE1;
96
- fill:var(--iui-icons-color-primary); }
97
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
98
- fill:#53A21A;
99
- fill:var(--iui-icons-color-positive); }
100
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
101
- fill:#F18B12;
102
- fill:var(--iui-icons-color-warning); }
103
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
104
- fill:#D30A0A;
105
- fill:var(--iui-icons-color-negative); }
106
- @media (prefers-reduced-motion: no-preference){
107
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
108
- transition:transform 0.4s ease-out; } }
55
+ min-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left));
56
+ max-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left));
57
+ }
58
+ }
59
+ .iui-side-navigation.iui-expanded,
60
+ .iui-side-navigation > .iui-sidenav-content{
61
+ max-width:288px;
62
+ }
63
+ .iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-button-icon,
64
+ .iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-button-icon{
65
+ transform:scaleX(-1);
66
+ }
67
+ .iui-side-navigation .iui-sidenav-button{
68
+ gap:24px;
69
+ border-radius:0;
70
+ border-left:none;
71
+ border-right:none;
72
+ overflow:hidden;
73
+ justify-content:flex-start;
74
+ --_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0;
75
+ }
76
+ .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
77
+ height:55px;
78
+ }
79
+ @supports (padding: max(0px)){
80
+ .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
81
+ padding-left:max(24px, 24px + env(safe-area-inset-left));
82
+ }
83
+ }
84
+ .iui-side-navigation .iui-sidenav-button > .iui-button-label{
85
+ white-space:nowrap;
86
+ overflow:hidden;
87
+ text-overflow:ellipsis;
88
+ }
89
+ .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
90
+ border-color:#C7CCD1;
91
+ border-color:var(--iui-color-background-5);
92
+ }
93
+ .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
94
+ width:24px;
95
+ height:24px;
96
+ flex-shrink:0;
97
+ }
98
+ .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
99
+ fill:#008BE1;
100
+ fill:var(--iui-color-foreground-primary);
101
+ }
102
+ .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
103
+ background-color:#F8F9FB;
104
+ background-color:var(--iui-color-background-2);
105
+ }
106
+ .iui-side-navigation .iui-sidenav-button.iui-expand{
107
+ height:22px;
108
+ justify-content:center;
109
+ border:none;
110
+ border-bottom:1px solid #C7CCD1;
111
+ border-bottom:1px solid var(--iui-color-background-5);
112
+ }
113
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
114
+ fill:rgba(0, 0, 0, 0.4);
115
+ fill:var(--iui-icons-color);
116
+ display:inline-flex;
117
+ width:12px;
118
+ height:12px;
119
+ }
120
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
121
+ fill:#008BE1;
122
+ fill:var(--iui-icons-color-primary);
123
+ }
124
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
125
+ fill:#53A21A;
126
+ fill:var(--iui-icons-color-positive);
127
+ }
128
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
129
+ fill:#F18B12;
130
+ fill:var(--iui-icons-color-warning);
131
+ }
132
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
133
+ fill:#D30A0A;
134
+ fill:var(--iui-icons-color-negative);
135
+ }
136
+ @media (prefers-reduced-motion: no-preference){
137
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
138
+ transition:transform 0.4s ease-out;
139
+ }
140
+ }
109
141
 
110
142
  .iui-side-navigation-submenu{
111
143
  min-width:192px;
@@ -119,54 +151,71 @@
119
151
  background-color:#FFF;
120
152
  border-right:1px solid #C7CCD1;
121
153
  background-color:var(--iui-color-background-1);
122
- border-right:1px solid var(--iui-color-background-5); }
123
- .iui-side-navigation-submenu.iui-enter{
124
- opacity:0; }
154
+ border-right:1px solid var(--iui-color-background-5);
155
+ }
156
+ .iui-side-navigation-submenu.iui-enter{
157
+ opacity:0;
158
+ }
159
+ .iui-side-navigation-submenu.iui-enter-active{
160
+ opacity:1;
161
+ }
162
+ @media (prefers-reduced-motion: no-preference){
125
163
  .iui-side-navigation-submenu.iui-enter-active{
126
- opacity:1; }
127
- @media (prefers-reduced-motion: no-preference){
128
- .iui-side-navigation-submenu.iui-enter-active{
129
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
130
- .iui-side-navigation-submenu.iui-exit{
131
- opacity:1; }
164
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
165
+ }
166
+ }
167
+ .iui-side-navigation-submenu.iui-exit{
168
+ opacity:1;
169
+ }
170
+ .iui-side-navigation-submenu.iui-exit-active{
171
+ opacity:0;
172
+ }
173
+ @media (prefers-reduced-motion: no-preference){
132
174
  .iui-side-navigation-submenu.iui-exit-active{
133
- opacity:0; }
134
- @media (prefers-reduced-motion: no-preference){
135
- .iui-side-navigation-submenu.iui-exit-active{
136
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
137
- .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
138
- display:flex; }
139
- .iui-side-navigation-submenu-content{
140
- padding:0 12px 11px;
141
- flex-shrink:0;
142
- box-sizing:border-box; }
143
- .iui-side-navigation-submenu-header{
144
- height:55px;
145
- display:flex;
146
- align-items:center;
147
- justify-content:space-between; }
148
- .iui-side-navigation-submenu-header-label{
149
- margin:0;
150
- padding:0;
151
- border:none;
152
- vertical-align:baseline;
153
- font-size:24px;
154
- font-weight:300;
155
- line-height:33px;
156
- display:flex;
157
- align-items:center;
158
- overflow:hidden; }
159
- .iui-side-navigation-submenu-header-label .iui-button{
160
- flex-shrink:0; }
161
- .iui-side-navigation-submenu-header-label > *{
162
- white-space:nowrap;
163
- overflow:hidden;
164
- text-overflow:ellipsis; }
165
- .iui-side-navigation-submenu-header-actions{
166
- flex-shrink:0;
167
- margin-left:8px; }
175
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
176
+ }
177
+ }
178
+ .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
179
+ display:flex;
180
+ }
181
+ .iui-side-navigation-submenu-content{
182
+ padding:0 12px 11px;
183
+ flex-shrink:0;
184
+ box-sizing:border-box;
185
+ }
186
+ .iui-side-navigation-submenu-header{
187
+ height:55px;
188
+ display:flex;
189
+ align-items:center;
190
+ justify-content:space-between;
191
+ }
192
+ .iui-side-navigation-submenu-header-label{
193
+ margin:0;
194
+ padding:0;
195
+ border:none;
196
+ vertical-align:baseline;
197
+ font-size:24px;
198
+ font-weight:300;
199
+ line-height:33px;
200
+ display:flex;
201
+ align-items:center;
202
+ overflow:hidden;
203
+ }
204
+ .iui-side-navigation-submenu-header-label .iui-button{
205
+ flex-shrink:0;
206
+ }
207
+ .iui-side-navigation-submenu-header-label > *{
208
+ white-space:nowrap;
209
+ overflow:hidden;
210
+ text-overflow:ellipsis;
211
+ }
212
+ .iui-side-navigation-submenu-header-actions{
213
+ flex-shrink:0;
214
+ margin-left:8px;
215
+ }
168
216
 
169
217
  .iui-side-navigation-wrapper{
170
218
  display:flex;
171
219
  position:relative;
172
- height:100%; }
220
+ height:100%;
221
+ }
package/css/skip-to-content.css CHANGED
@@ -19,33 +19,47 @@
19
19
  left:50%;
20
20
  top:22px;
21
21
  transform:translateX(-50%) translateY(-170%);
22
- transition:background-color 0.2s ease-in-out; }
23
- @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
24
- .iui-skip-to-content-link{
25
- background-color:rgba(0, 0, 0, var(--iui-opacity-3));
26
- -webkit-backdrop-filter:blur(5px);
27
- backdrop-filter:blur(5px); } }
28
- .iui-skip-to-content-link:focus-visible{
22
+ transition:background-color 0.2s ease-in-out;
23
+ }
24
+ @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
25
+ .iui-skip-to-content-link{
26
+ background-color:rgba(0, 0, 0, var(--iui-opacity-3));
27
+ -webkit-backdrop-filter:blur(5px);
28
+ backdrop-filter:blur(5px);
29
+ }
30
+ }
31
+ .iui-skip-to-content-link:focus-visible{
32
+ outline:2px solid var(--iui-color-foreground-primary);
33
+ outline-offset:2px;
34
+ }
35
+ @supports not selector(*:focus-visible){
36
+ .iui-skip-to-content-link:focus{
29
37
  outline:2px solid var(--iui-color-foreground-primary);
30
- outline-offset:2px; }
31
- @supports not selector(*:focus-visible){
32
- .iui-skip-to-content-link:focus{
33
- outline:2px solid var(--iui-color-foreground-primary);
34
- outline-offset:2px; } }
35
- @media (prefers-reduced-motion: no-preference){
36
- .iui-skip-to-content-link{
37
- transition:background-color 0.2s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out; } }
38
+ outline-offset:2px;
39
+ }
40
+ }
41
+ @media (prefers-reduced-motion: no-preference){
42
+ .iui-skip-to-content-link{
43
+ transition:background-color 0.2s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out;
44
+ }
45
+ }
46
+ .iui-skip-to-content-link:hover{
47
+ background-color:black;
48
+ background-color:rgba(0, 0, 0, var(--iui-opacity-1));
49
+ }
50
+ @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
38
51
  .iui-skip-to-content-link:hover{
39
- background-color:black;
40
- background-color:rgba(0, 0, 0, var(--iui-opacity-1)); }
41
- @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
42
- .iui-skip-to-content-link:hover{
43
- background-color:rgba(0, 0, 0, var(--iui-opacity-2));
44
- -webkit-backdrop-filter:blur(5px);
45
- backdrop-filter:blur(5px); } }
52
+ background-color:rgba(0, 0, 0, var(--iui-opacity-2));
53
+ -webkit-backdrop-filter:blur(5px);
54
+ backdrop-filter:blur(5px);
55
+ }
56
+ }
57
+ .iui-skip-to-content-link:focus{
58
+ transform:translateX(-50%) translateY(0);
59
+ box-shadow:0 6px 30px rgba(0, 0, 0, 0.25);
60
+ }
61
+ @media (prefers-reduced-motion: no-preference){
46
62
  .iui-skip-to-content-link:focus{
47
- transform:translateX(-50%) translateY(0);
48
- box-shadow:0 6px 30px rgba(0, 0, 0, 0.25); }
49
- @media (prefers-reduced-motion: no-preference){
50
- .iui-skip-to-content-link:focus{
51
- transition:transform 0.2s ease-in-out; } }
63
+ transition:transform 0.2s ease-in-out;
64
+ }
65
+ }
package/css/slider.css CHANGED
@@ -4,74 +4,90 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-slider-component-container{
6
6
  display:flex;
7
- min-height:22px; }
8
- .iui-slider-component-container .iui-slider-min,
9
- .iui-slider-component-container .iui-slider-max{
10
- -webkit-user-select:all;
11
- -moz-user-select:all;
12
- user-select:all;
13
- margin-top:2px; }
14
- .iui-slider-component-container .iui-slider-min svg,
15
- .iui-slider-component-container .iui-slider-max svg{
16
- fill:rgba(0, 0, 0, 0.4);
17
- fill:var(--iui-icons-color);
18
- display:inline-flex;
19
- width:16px;
20
- height:16px;
21
- margin-top:4px; }
22
- .iui-slider-component-container .iui-slider-min svg.iui-informational,
23
- .iui-slider-component-container .iui-slider-max svg.iui-informational{
24
- fill:#008BE1;
25
- fill:var(--iui-icons-color-primary); }
26
- .iui-slider-component-container .iui-slider-min svg.iui-positive,
27
- .iui-slider-component-container .iui-slider-max svg.iui-positive{
28
- fill:#53A21A;
29
- fill:var(--iui-icons-color-positive); }
30
- .iui-slider-component-container .iui-slider-min svg.iui-warning,
31
- .iui-slider-component-container .iui-slider-max svg.iui-warning{
32
- fill:#F18B12;
33
- fill:var(--iui-icons-color-warning); }
34
- .iui-slider-component-container .iui-slider-min svg.iui-negative,
35
- .iui-slider-component-container .iui-slider-max svg.iui-negative{
36
- fill:#D30A0A;
37
- fill:var(--iui-icons-color-negative); }
38
- .iui-slider-component-container .iui-slider-min{
39
- margin-right:12px;
40
- text-align:right; }
41
- .iui-slider-component-container .iui-slider-max{
42
- margin-left:12px; }
43
- .iui-slider-component-container.iui-disabled{
44
- cursor:not-allowed; }
45
- .iui-slider-component-container.iui-disabled .iui-slider-container{
46
- cursor:not-allowed;
47
- pointer-events:none; }
48
- .iui-slider-component-container.iui-disabled .iui-slider-thumb{
49
- cursor:not-allowed;
50
- background-color:#DCE0E3;
51
- border-color:#DCE0E3;
52
- background-color:var(--iui-color-background-4);
53
- border-color:var(--iui-color-background-4); }
54
- .iui-slider-component-container.iui-disabled .iui-slider-track{
55
- background-color:rgba(0, 0, 0, 0.4);
56
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
57
- .iui-slider-component-container.iui-disabled .iui-slider-min,
58
- .iui-slider-component-container.iui-disabled .iui-slider-max,
59
- .iui-slider-component-container.iui-disabled .iui-slider-tick{
60
- -webkit-user-select:none;
61
- -moz-user-select:none;
62
- -ms-user-select:none;
63
- user-select:none;
64
- color:rgba(0, 0, 0, 0.4);
65
- color:var(--iui-text-color-muted); }
7
+ min-height:22px;
8
+ }
9
+ .iui-slider-component-container .iui-slider-min,
10
+ .iui-slider-component-container .iui-slider-max{
11
+ -webkit-user-select:all;
12
+ -moz-user-select:all;
13
+ user-select:all;
14
+ margin-top:2px;
15
+ }
16
+ .iui-slider-component-container .iui-slider-min svg,
17
+ .iui-slider-component-container .iui-slider-max svg{
18
+ fill:rgba(0, 0, 0, 0.4);
19
+ fill:var(--iui-icons-color);
20
+ display:inline-flex;
21
+ width:16px;
22
+ height:16px;
23
+ margin-top:4px;
24
+ }
25
+ .iui-slider-component-container .iui-slider-min svg.iui-informational,
26
+ .iui-slider-component-container .iui-slider-max svg.iui-informational{
27
+ fill:#008BE1;
28
+ fill:var(--iui-icons-color-primary);
29
+ }
30
+ .iui-slider-component-container .iui-slider-min svg.iui-positive,
31
+ .iui-slider-component-container .iui-slider-max svg.iui-positive{
32
+ fill:#53A21A;
33
+ fill:var(--iui-icons-color-positive);
34
+ }
35
+ .iui-slider-component-container .iui-slider-min svg.iui-warning,
36
+ .iui-slider-component-container .iui-slider-max svg.iui-warning{
37
+ fill:#F18B12;
38
+ fill:var(--iui-icons-color-warning);
39
+ }
40
+ .iui-slider-component-container .iui-slider-min svg.iui-negative,
41
+ .iui-slider-component-container .iui-slider-max svg.iui-negative{
42
+ fill:#D30A0A;
43
+ fill:var(--iui-icons-color-negative);
44
+ }
45
+ .iui-slider-component-container .iui-slider-min{
46
+ margin-right:12px;
47
+ text-align:right;
48
+ }
49
+ .iui-slider-component-container .iui-slider-max{
50
+ margin-left:12px;
51
+ }
52
+ .iui-slider-component-container.iui-disabled{
53
+ cursor:not-allowed;
54
+ }
55
+ .iui-slider-component-container.iui-disabled .iui-slider-container{
56
+ cursor:not-allowed;
57
+ pointer-events:none;
58
+ }
59
+ .iui-slider-component-container.iui-disabled .iui-slider-thumb{
60
+ cursor:not-allowed;
61
+ background-color:#DCE0E3;
62
+ border-color:#DCE0E3;
63
+ background-color:var(--iui-color-background-4);
64
+ border-color:var(--iui-color-background-4);
65
+ }
66
+ .iui-slider-component-container.iui-disabled .iui-slider-track{
67
+ background-color:rgba(0, 0, 0, 0.4);
68
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
69
+ }
70
+ .iui-slider-component-container.iui-disabled .iui-slider-min,
71
+ .iui-slider-component-container.iui-disabled .iui-slider-max,
72
+ .iui-slider-component-container.iui-disabled .iui-slider-tick{
73
+ -webkit-user-select:none;
74
+ -moz-user-select:none;
75
+ -ms-user-select:none;
76
+ user-select:none;
77
+ color:rgba(0, 0, 0, 0.4);
78
+ color:var(--iui-text-color-muted);
79
+ }
66
80
 
67
81
  .iui-slider-container{
68
82
  position:relative;
69
83
  flex-grow:1;
70
84
  cursor:pointer;
71
- touch-action:pan-y; }
72
- .iui-slider-container.iui-grabbing{
73
- cursor:-webkit-grabbing;
74
- cursor:grabbing; }
85
+ touch-action:pan-y;
86
+ }
87
+ .iui-slider-container.iui-grabbing{
88
+ cursor:-webkit-grabbing;
89
+ cursor:grabbing;
90
+ }
75
91
 
76
92
  .iui-slider-ticks{
77
93
  position:relative;
@@ -82,18 +98,20 @@
82
98
  -webkit-user-select:none;
83
99
  -moz-user-select:none;
84
100
  -ms-user-select:none;
85
- user-select:none; }
86
- .iui-slider-ticks .iui-slider-tick{
87
- position:relative;
88
- display:flex;
89
- pointer-events:none;
90
- justify-content:center;
91
- width:1px;
92
- height:11px;
93
- line-height:44px;
94
- margin-bottom:22px;
95
- background-color:#DCE0E3;
96
- background-color:var(--iui-color-background-4); }
101
+ user-select:none;
102
+ }
103
+ .iui-slider-ticks .iui-slider-tick{
104
+ position:relative;
105
+ display:flex;
106
+ pointer-events:none;
107
+ justify-content:center;
108
+ width:1px;
109
+ height:11px;
110
+ line-height:44px;
111
+ margin-bottom:22px;
112
+ background-color:#DCE0E3;
113
+ background-color:var(--iui-color-background-4);
114
+ }
97
115
 
98
116
  .iui-slider-rail{
99
117
  position:absolute;
@@ -101,7 +119,8 @@
101
119
  height:4px;
102
120
  top:12px;
103
121
  background-color:#DCE0E3;
104
- background-color:var(--iui-color-background-4); }
122
+ background-color:var(--iui-color-background-4);
123
+ }
105
124
 
106
125
  .iui-slider-thumb{
107
126
  position:absolute;
@@ -116,17 +135,22 @@
116
135
  background:#FFF;
117
136
  border:1px solid #C7CCD1;
118
137
  background:var(--iui-color-background-1);
119
- border:1px solid var(--iui-color-background-5); }
120
- .iui-slider-thumb:focus-visible{
138
+ border:1px solid var(--iui-color-background-5);
139
+ }
140
+ .iui-slider-thumb:focus-visible{
141
+ outline:2px solid var(--iui-color-foreground-primary);
142
+ outline-offset:-1px;
143
+ }
144
+ @supports not selector(*:focus-visible){
145
+ .iui-slider-thumb:focus{
121
146
  outline:2px solid var(--iui-color-foreground-primary);
122
- outline-offset:-1px; }
123
- @supports not selector(*:focus-visible){
124
- .iui-slider-thumb:focus{
125
- outline:2px solid var(--iui-color-foreground-primary);
126
- outline-offset:-1px; } }
127
- .iui-slider-thumb:active{
128
- cursor:-webkit-grabbing;
129
- cursor:grabbing; }
147
+ outline-offset:-1px;
148
+ }
149
+ }
150
+ .iui-slider-thumb:active{
151
+ cursor:-webkit-grabbing;
152
+ cursor:grabbing;
153
+ }
130
154
 
131
155
  .iui-slider-track{
132
156
  pointer-events:none;
@@ -135,4 +159,5 @@
135
159
  left:0;
136
160
  top:12px;
137
161
  background-color:#008BE1;
138
- background-color:var(--iui-color-foreground-primary); }
162
+ background-color:var(--iui-color-foreground-primary);
163
+ }