@itwin/itwinui-css 0.49.0 → 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 (63) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7251 -5567
  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 +443 -315
  7. package/css/carousel.css +125 -78
  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 -42
  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/button/button-group.scss +38 -8
  47. package/scss/button/classes.scss +4 -0
  48. package/scss/carousel/carousel.scss +17 -6
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/inputs/checkbox.scss +1 -0
  51. package/scss/inputs/labeled-inputs.scss +8 -8
  52. package/scss/inputs/radio.scss +0 -4
  53. package/scss/location-marker/data-rich.scss +1 -1
  54. package/scss/location-marker/me.scss +4 -4
  55. package/scss/modal/modal.scss +1 -0
  56. package/scss/popover/popover.scss +1 -2
  57. package/scss/progress-indicator/linear.scss +2 -10
  58. package/scss/style/global.scss +1 -5
  59. package/scss/style/mixins.scss +9 -0
  60. package/scss/table/table.scss +23 -14
  61. package/scss/toast-notification/categories.scss +1 -5
  62. package/scss/toggle-switch/classes.scss +4 -0
  63. package/scss/toggle-switch/toggle-switch.scss +141 -162
package/css/progress-indicator.css CHANGED
@@ -8,92 +8,119 @@
8
8
  border:none;
9
9
  vertical-align:baseline;
10
10
  text-align:left;
11
- display:block; }
12
- .iui-progress-indicator-linear > .iui-track{
13
- width:100%;
14
- height:4px;
15
- overflow:hidden;
16
- background-color:#C7CCD1;
17
- background-color:var(--iui-color-background-5); }
18
- .iui-progress-indicator-linear > .iui-track > .iui-fill{
19
- display:inline-block;
20
- height:100%;
21
- vertical-align:top;
22
- background-color:#008BE1;
23
- background-color:var(--iui-color-foreground-primary); }
24
- .iui-progress-indicator-linear > .iui-label{
25
- align-items:center;
26
- width:100%;
27
- overflow:hidden;
28
- margin-top:4px;
29
- display:flex;
30
- font-size:12px;
31
- justify-content:space-between; }
32
- .iui-progress-indicator-linear > .iui-label > :only-child{
33
- margin:0 auto; }
34
- .iui-progress-indicator-linear > .iui-label > :last-child:not(:first-child){
35
- -webkit-user-select:none;
36
- -moz-user-select:none;
37
- -ms-user-select:none;
38
- user-select:none; }
39
- .iui-progress-indicator-linear > .iui-label svg{
40
- display:flex;
41
- width:16px;
42
- height:16px; }
43
- .iui-progress-indicator-linear.iui-positive > .iui-track,
44
- .iui-progress-indicator-linear.iui-positive > .iui-track > *{
45
- background-color:#53A21A;
46
- background-color:var(--iui-color-foreground-positive); }
47
- .iui-progress-indicator-linear.iui-positive > .iui-label{
48
- color:#53A21A;
49
- color:var(--iui-color-foreground-positive); }
50
- .iui-progress-indicator-linear.iui-positive > .iui-label svg{
51
- fill:#53A21A;
52
- fill:var(--iui-icons-color-positive); }
53
- .iui-progress-indicator-linear.iui-positive > .iui-label > span::-moz-selection{
54
- background-color:rgba(83, 162, 26, 0.4);
55
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
56
- .iui-progress-indicator-linear.iui-positive > .iui-label > span::selection{
57
- background-color:rgba(83, 162, 26, 0.4);
58
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
59
- .iui-progress-indicator-linear.iui-negative > .iui-track > *{
60
- width:100%;
61
- background-color:#D30A0A;
62
- background-color:var(--iui-color-foreground-negative); }
63
- .iui-progress-indicator-linear.iui-negative > .iui-label{
64
- color:#D30A0A;
65
- color:var(--iui-color-foreground-negative); }
66
- .iui-progress-indicator-linear.iui-negative > .iui-label svg{
67
- fill:#D30A0A;
68
- fill:var(--iui-icons-color-negative); }
69
- .iui-progress-indicator-linear.iui-negative > .iui-label > span::-moz-selection{
70
- background-color:rgba(211, 10, 10, 0.4);
71
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
72
- .iui-progress-indicator-linear.iui-negative > .iui-label > span::selection{
73
- background-color:rgba(211, 10, 10, 0.4);
74
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
75
- .iui-progress-indicator-linear > .iui-track > .iui-determinate{
76
- transition:width 2s ease-in-out; }
77
- .iui-progress-indicator-linear:not(.iui-negative):not(.iui-positive) > .iui-track > .iui-indeterminate{
78
- width:100%;
79
- -webkit-animation:iui-progress-indicator-linear-animate-indeterminate 1.5s infinite linear;
80
- animation:iui-progress-indicator-linear-animate-indeterminate 1.5s infinite linear; }
81
-
11
+ display:block;
12
+ }
13
+ .iui-progress-indicator-linear > .iui-track{
14
+ width:100%;
15
+ height:4px;
16
+ overflow:hidden;
17
+ background-color:#C7CCD1;
18
+ background-color:var(--iui-color-background-5);
19
+ }
20
+ .iui-progress-indicator-linear > .iui-track > .iui-fill{
21
+ display:inline-block;
22
+ height:100%;
23
+ vertical-align:top;
24
+ background-color:#008BE1;
25
+ background-color:var(--iui-color-foreground-primary);
26
+ }
27
+ .iui-progress-indicator-linear > .iui-label{
28
+ align-items:center;
29
+ width:100%;
30
+ overflow:hidden;
31
+ margin-top:4px;
32
+ display:flex;
33
+ font-size:12px;
34
+ justify-content:space-between;
35
+ }
36
+ .iui-progress-indicator-linear > .iui-label > :only-child{
37
+ margin:0 auto;
38
+ }
39
+ .iui-progress-indicator-linear > .iui-label > :last-child:not(:first-child){
40
+ -webkit-user-select:none;
41
+ -moz-user-select:none;
42
+ -ms-user-select:none;
43
+ user-select:none;
44
+ }
45
+ .iui-progress-indicator-linear > .iui-label svg{
46
+ display:flex;
47
+ width:16px;
48
+ height:16px;
49
+ }
50
+ .iui-progress-indicator-linear.iui-positive > .iui-track,
51
+ .iui-progress-indicator-linear.iui-positive > .iui-track > *{
52
+ background-color:#53A21A;
53
+ background-color:var(--iui-color-foreground-positive);
54
+ }
55
+ .iui-progress-indicator-linear.iui-positive > .iui-label{
56
+ color:#53A21A;
57
+ color:var(--iui-color-foreground-positive);
58
+ }
59
+ .iui-progress-indicator-linear.iui-positive > .iui-label svg{
60
+ fill:#53A21A;
61
+ fill:var(--iui-icons-color-positive);
62
+ }
63
+ .iui-progress-indicator-linear.iui-positive > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-positive > .iui-label > span *::-moz-selection{
64
+ background-color:rgba(83, 162, 26, 0.4);
65
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4));
66
+ }
67
+ .iui-progress-indicator-linear.iui-positive > .iui-label > span::selection,
68
+ .iui-progress-indicator-linear.iui-positive > .iui-label > span *::selection{
69
+ background-color:rgba(83, 162, 26, 0.4);
70
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4));
71
+ }
72
+ .iui-progress-indicator-linear.iui-negative > .iui-track > *{
73
+ width:100%;
74
+ background-color:#D30A0A;
75
+ background-color:var(--iui-color-foreground-negative);
76
+ }
77
+ .iui-progress-indicator-linear.iui-negative > .iui-label{
78
+ color:#D30A0A;
79
+ color:var(--iui-color-foreground-negative);
80
+ }
81
+ .iui-progress-indicator-linear.iui-negative > .iui-label svg{
82
+ fill:#D30A0A;
83
+ fill:var(--iui-icons-color-negative);
84
+ }
85
+ .iui-progress-indicator-linear.iui-negative > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-negative > .iui-label > span *::-moz-selection{
86
+ background-color:rgba(211, 10, 10, 0.4);
87
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4));
88
+ }
89
+ .iui-progress-indicator-linear.iui-negative > .iui-label > span::selection,
90
+ .iui-progress-indicator-linear.iui-negative > .iui-label > span *::selection{
91
+ background-color:rgba(211, 10, 10, 0.4);
92
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4));
93
+ }
94
+ .iui-progress-indicator-linear > .iui-track > .iui-determinate{
95
+ transition:width 2s ease-in-out;
96
+ }
97
+ .iui-progress-indicator-linear:not(.iui-negative):not(.iui-positive) > .iui-track > .iui-indeterminate{
98
+ width:100%;
99
+ -webkit-animation:iui-progress-indicator-linear-animate-indeterminate 1.5s infinite linear;
100
+ animation:iui-progress-indicator-linear-animate-indeterminate 1.5s infinite linear;
101
+ }
82
102
  @-webkit-keyframes iui-progress-indicator-linear-animate-indeterminate{
83
103
  0%{
84
- transform:translateX(-60%) scaleX(0); }
104
+ transform:translateX(-60%) scaleX(0);
105
+ }
85
106
  40%{
86
- transform:translateX(-40%) scaleX(0.4); }
107
+ transform:translateX(-40%) scaleX(0.4);
108
+ }
87
109
  100%{
88
- transform:translateX(100%) scaleX(0.5); } }
89
-
110
+ transform:translateX(100%) scaleX(0.5);
111
+ }
112
+ }
90
113
  @keyframes iui-progress-indicator-linear-animate-indeterminate{
91
114
  0%{
92
- transform:translateX(-60%) scaleX(0); }
115
+ transform:translateX(-60%) scaleX(0);
116
+ }
93
117
  40%{
94
- transform:translateX(-40%) scaleX(0.4); }
118
+ transform:translateX(-40%) scaleX(0.4);
119
+ }
95
120
  100%{
96
- transform:translateX(100%) scaleX(0.5); } }
121
+ transform:translateX(100%) scaleX(0.5);
122
+ }
123
+ }
97
124
 
98
125
  .iui-progress-indicator-radial-ie{
99
126
  margin:0;
@@ -106,170 +133,211 @@
106
133
  height:100%;
107
134
  width:100%;
108
135
  color:#008BE1;
109
- color:var(--iui-color-foreground-primary); }
110
- .iui-progress-indicator-radial-ie::after{
111
- position:relative;
112
- box-sizing:border-box;
113
- content:'';
114
- width:100%;
115
- height:100%;
116
- display:inline-block;
117
- border:3px solid currentColor;
118
- border-radius:100%;
119
- background-color:transparent;
120
- -webkit-animation:dash 0.8s linear infinite;
121
- animation:dash 0.8s linear infinite;
122
- border-bottom-color:#C7CCD1;
123
- border-bottom-color:var(--iui-color-background-5); }
124
-
136
+ color:var(--iui-color-foreground-primary);
137
+ }
138
+ .iui-progress-indicator-radial-ie::after{
139
+ position:relative;
140
+ box-sizing:border-box;
141
+ content:"";
142
+ width:100%;
143
+ height:100%;
144
+ display:inline-block;
145
+ border:3px solid currentColor;
146
+ border-radius:100%;
147
+ background-color:transparent;
148
+ -webkit-animation:dash 0.8s linear infinite;
149
+ animation:dash 0.8s linear infinite;
150
+ border-bottom-color:#C7CCD1;
151
+ border-bottom-color:var(--iui-color-background-5);
152
+ }
125
153
  @-webkit-keyframes dash{
126
154
  0%{
127
- transform:rotate(0deg); }
155
+ transform:rotate(0deg);
156
+ }
128
157
  100%{
129
- transform:rotate(360deg); } }
130
-
158
+ transform:rotate(360deg);
159
+ }
160
+ }
131
161
  @keyframes dash{
132
162
  0%{
133
- transform:rotate(0deg); }
163
+ transform:rotate(0deg);
164
+ }
134
165
  100%{
135
- transform:rotate(360deg); } }
166
+ transform:rotate(360deg);
167
+ }
168
+ }
136
169
 
137
170
  .iui-progress-indicator-radial{
138
171
  position:relative;
139
172
  display:inline-block;
140
173
  width:32px;
141
- height:32px; }
142
- .iui-progress-indicator-radial > .iui-radial{
143
- height:100%;
144
- width:100%; }
145
- .iui-progress-indicator-radial > .iui-radial > circle.iui-fill{
146
- stroke:#008BE1;
147
- stroke:var(--iui-color-foreground-primary);
148
- fill:none;
149
- stroke-width:3.2; }
150
- .iui-progress-indicator-radial > .iui-radial > circle.iui-track{
151
- stroke:#C7CCD1;
152
- stroke:var(--iui-color-background-5);
153
- fill:none;
154
- stroke-width:3.2; }
155
- .iui-progress-indicator-radial .iui-inner-content{
156
- position:absolute;
157
- display:flex;
158
- width:calc(100% - 8px);
159
- height:calc(100% - 8px);
160
- left:50%;
161
- top:50%;
162
- transform:translate(-50%, -50%);
163
- align-items:center;
164
- justify-content:center;
165
- font-size:12px;
166
- -webkit-user-select:none;
167
- -moz-user-select:none;
168
- -ms-user-select:none;
169
- user-select:none;
170
- overflow:hidden; }
171
- .iui-progress-indicator-radial .iui-inner-content svg,
172
- .iui-progress-indicator-radial .iui-inner-content img{
173
- display:flex;
174
- width:16px;
175
- height:16px;
176
- fill:rgba(0, 0, 0, 0.8);
177
- fill:var(--iui-icons-color-actionable); }
178
- .iui-progress-indicator-radial .iui-inner-content svg:hover,
179
- .iui-progress-indicator-radial .iui-inner-content img:hover{
180
- fill:black;
181
- fill:var(--iui-icons-color-actionable-hover); }
182
- .iui-progress-indicator-radial.iui-positive{
183
- color:#53A21A;
184
- color:var(--iui-color-foreground-positive); }
185
- .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-fill,
186
- .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-track{
187
- stroke:#53A21A;
188
- stroke:var(--iui-color-foreground-positive); }
189
- .iui-progress-indicator-radial.iui-positive .iui-inner-content svg{
190
- fill:#53A21A;
191
- fill:var(--iui-icons-color-positive); }
192
- .iui-progress-indicator-radial.iui-positive .iui-progress-indicator-radial-ie{
193
- color:#53A21A;
194
- color:var(--iui-color-foreground-positive); }
195
- .iui-progress-indicator-radial.iui-positive .iui-progress-indicator-radial-ie::after{
196
- -webkit-animation:none;
197
- animation:none;
198
- border-bottom-color:#53A21A;
199
- border-bottom-color:var(--iui-color-foreground-positive); }
200
- .iui-progress-indicator-radial.iui-negative{
201
- color:#D30A0A;
202
- color:var(--iui-color-foreground-negative); }
203
- .iui-progress-indicator-radial.iui-negative svg.iui-radial circle.iui-fill{
204
- stroke:#D30A0A;
205
- stroke:var(--iui-color-foreground-negative); }
206
- .iui-progress-indicator-radial.iui-negative .iui-inner-content svg{
207
- fill:#D30A0A;
208
- fill:var(--iui-icons-color-negative); }
209
- .iui-progress-indicator-radial.iui-negative .iui-progress-indicator-radial-ie{
210
- color:#D30A0A;
211
- color:var(--iui-color-foreground-negative); }
212
- .iui-progress-indicator-radial.iui-negative .iui-progress-indicator-radial-ie::after{
213
- -webkit-animation:none;
214
- animation:none;
215
- border-bottom-color:#D30A0A;
216
- border-bottom-color:var(--iui-color-foreground-negative); }
217
- .iui-progress-indicator-radial.iui-x-small{
218
- width:16px;
219
- height:16px; }
220
- .iui-progress-indicator-radial.iui-x-small .iui-inner-content{
221
- display:none; }
222
- .iui-progress-indicator-radial.iui-small{
223
- width:24px;
224
- height:24px; }
225
- .iui-progress-indicator-radial.iui-large{
226
- width:48px;
227
- height:48px; }
228
- .iui-progress-indicator-radial.iui-large .iui-inner-content{
229
- font-size:16px; }
230
- .iui-progress-indicator-radial.iui-large .iui-inner-content svg,
231
- .iui-progress-indicator-radial.iui-large .iui-inner-content img{
232
- width:24px;
233
- height:24px; }
234
- .iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial{
235
- transform:rotate(-90deg); }
236
- .iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial circle.iui-fill{
237
- stroke-dasharray:88;
238
- transition:stroke-dashoffset 0.5s ease-in-out; }
239
- .iui-progress-indicator-radial.iui-indeterminate:not(.iui-negative):not(.iui-positive) svg.iui-radial{
240
- -webkit-animation:rotate-indeterminate 2s linear infinite;
241
- animation:rotate-indeterminate 2s linear infinite; }
242
- .iui-progress-indicator-radial.iui-indeterminate:not(.iui-negative):not(.iui-positive) svg.iui-radial circle.iui-fill{
243
- -webkit-animation:dash-indeterminate 1.5s ease-in-out infinite;
244
- animation:dash-indeterminate 1.5s ease-in-out infinite; }
245
-
174
+ height:32px;
175
+ }
176
+ .iui-progress-indicator-radial > .iui-radial{
177
+ height:100%;
178
+ width:100%;
179
+ }
180
+ .iui-progress-indicator-radial > .iui-radial > circle.iui-fill{
181
+ stroke:#008BE1;
182
+ stroke:var(--iui-color-foreground-primary);
183
+ fill:none;
184
+ stroke-width:3.2;
185
+ }
186
+ .iui-progress-indicator-radial > .iui-radial > circle.iui-track{
187
+ stroke:#C7CCD1;
188
+ stroke:var(--iui-color-background-5);
189
+ fill:none;
190
+ stroke-width:3.2;
191
+ }
192
+ .iui-progress-indicator-radial .iui-inner-content{
193
+ position:absolute;
194
+ display:flex;
195
+ width:calc(100% - 8px);
196
+ height:calc(100% - 8px);
197
+ left:50%;
198
+ top:50%;
199
+ transform:translate(-50%, -50%);
200
+ align-items:center;
201
+ justify-content:center;
202
+ font-size:12px;
203
+ -webkit-user-select:none;
204
+ -moz-user-select:none;
205
+ -ms-user-select:none;
206
+ user-select:none;
207
+ overflow:hidden;
208
+ }
209
+ .iui-progress-indicator-radial .iui-inner-content svg,
210
+ .iui-progress-indicator-radial .iui-inner-content img{
211
+ display:flex;
212
+ width:16px;
213
+ height:16px;
214
+ fill:rgba(0, 0, 0, 0.8);
215
+ fill:var(--iui-icons-color-actionable);
216
+ }
217
+ .iui-progress-indicator-radial .iui-inner-content svg:hover,
218
+ .iui-progress-indicator-radial .iui-inner-content img:hover{
219
+ fill:black;
220
+ fill:var(--iui-icons-color-actionable-hover);
221
+ }
222
+ .iui-progress-indicator-radial.iui-positive{
223
+ color:#53A21A;
224
+ color:var(--iui-color-foreground-positive);
225
+ }
226
+ .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-fill,
227
+ .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-track{
228
+ stroke:#53A21A;
229
+ stroke:var(--iui-color-foreground-positive);
230
+ }
231
+ .iui-progress-indicator-radial.iui-positive .iui-inner-content svg{
232
+ fill:#53A21A;
233
+ fill:var(--iui-icons-color-positive);
234
+ }
235
+ .iui-progress-indicator-radial.iui-positive .iui-progress-indicator-radial-ie{
236
+ color:#53A21A;
237
+ color:var(--iui-color-foreground-positive);
238
+ }
239
+ .iui-progress-indicator-radial.iui-positive .iui-progress-indicator-radial-ie::after{
240
+ -webkit-animation:none;
241
+ animation:none;
242
+ border-bottom-color:#53A21A;
243
+ border-bottom-color:var(--iui-color-foreground-positive);
244
+ }
245
+ .iui-progress-indicator-radial.iui-negative{
246
+ color:#D30A0A;
247
+ color:var(--iui-color-foreground-negative);
248
+ }
249
+ .iui-progress-indicator-radial.iui-negative svg.iui-radial circle.iui-fill{
250
+ stroke:#D30A0A;
251
+ stroke:var(--iui-color-foreground-negative);
252
+ }
253
+ .iui-progress-indicator-radial.iui-negative .iui-inner-content svg{
254
+ fill:#D30A0A;
255
+ fill:var(--iui-icons-color-negative);
256
+ }
257
+ .iui-progress-indicator-radial.iui-negative .iui-progress-indicator-radial-ie{
258
+ color:#D30A0A;
259
+ color:var(--iui-color-foreground-negative);
260
+ }
261
+ .iui-progress-indicator-radial.iui-negative .iui-progress-indicator-radial-ie::after{
262
+ -webkit-animation:none;
263
+ animation:none;
264
+ border-bottom-color:#D30A0A;
265
+ border-bottom-color:var(--iui-color-foreground-negative);
266
+ }
267
+ .iui-progress-indicator-radial.iui-x-small{
268
+ width:16px;
269
+ height:16px;
270
+ }
271
+ .iui-progress-indicator-radial.iui-x-small .iui-inner-content{
272
+ display:none;
273
+ }
274
+ .iui-progress-indicator-radial.iui-small{
275
+ width:24px;
276
+ height:24px;
277
+ }
278
+ .iui-progress-indicator-radial.iui-large{
279
+ width:48px;
280
+ height:48px;
281
+ }
282
+ .iui-progress-indicator-radial.iui-large .iui-inner-content{
283
+ font-size:16px;
284
+ }
285
+ .iui-progress-indicator-radial.iui-large .iui-inner-content svg,
286
+ .iui-progress-indicator-radial.iui-large .iui-inner-content img{
287
+ width:24px;
288
+ height:24px;
289
+ }
290
+ .iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial{
291
+ transform:rotate(-90deg);
292
+ }
293
+ .iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial circle.iui-fill{
294
+ stroke-dasharray:88;
295
+ transition:stroke-dashoffset 0.5s ease-in-out;
296
+ }
297
+ .iui-progress-indicator-radial.iui-indeterminate:not(.iui-negative):not(.iui-positive) svg.iui-radial{
298
+ -webkit-animation:rotate-indeterminate 2s linear infinite;
299
+ animation:rotate-indeterminate 2s linear infinite;
300
+ }
301
+ .iui-progress-indicator-radial.iui-indeterminate:not(.iui-negative):not(.iui-positive) svg.iui-radial circle.iui-fill{
302
+ -webkit-animation:dash-indeterminate 1.5s ease-in-out infinite;
303
+ animation:dash-indeterminate 1.5s ease-in-out infinite;
304
+ }
246
305
  @-webkit-keyframes rotate-indeterminate{
247
306
  100%{
248
- transform:rotate(360deg); } }
249
-
307
+ transform:rotate(360deg);
308
+ }
309
+ }
250
310
  @keyframes rotate-indeterminate{
251
311
  100%{
252
- transform:rotate(360deg); } }
253
-
312
+ transform:rotate(360deg);
313
+ }
314
+ }
254
315
  @-webkit-keyframes dash-indeterminate{
255
316
  0%{
256
- stroke-dasharray:1, 88; }
317
+ stroke-dasharray:1, 88;
318
+ }
257
319
  50%{
258
320
  stroke-dasharray:88, 88;
259
- stroke-dashoffset:-22; }
321
+ stroke-dashoffset:-22;
322
+ }
260
323
  100%{
261
324
  stroke-dasharray:88, 88;
262
- stroke-dashoffset:-88; } }
263
-
325
+ stroke-dashoffset:-88;
326
+ }
327
+ }
264
328
  @keyframes dash-indeterminate{
265
329
  0%{
266
- stroke-dasharray:1, 88; }
330
+ stroke-dasharray:1, 88;
331
+ }
267
332
  50%{
268
333
  stroke-dasharray:88, 88;
269
- stroke-dashoffset:-22; }
334
+ stroke-dashoffset:-22;
335
+ }
270
336
  100%{
271
337
  stroke-dasharray:88, 88;
272
- stroke-dashoffset:-88; } }
338
+ stroke-dashoffset:-88;
339
+ }
340
+ }
273
341
 
274
342
  .iui-progress-indicator-overlay{
275
343
  width:100%;
@@ -283,33 +351,43 @@
283
351
  z-index:10000;
284
352
  pointer-events:none;
285
353
  background-color:rgba(255, 255, 255, 0.8);
286
- background-color:rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-2)); }
287
- @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
288
- .iui-progress-indicator-overlay{
289
- background-color:rgba(255, 255, 255, 0.6);
290
- -webkit-backdrop-filter:blur(5px);
291
- backdrop-filter:blur(5px);
292
- background-color:rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-3));
293
- backdrop-filter:blur(5px); } }
294
- .iui-progress-indicator-overlay:focus, .iui-progress-indicator-overlay:focus-visible{
295
- outline:0; }
296
- .iui-progress-indicator-overlay .iui-progress-indicator-linear{
297
- width:50%;
298
- max-width:33vw; }
299
-
354
+ background-color:rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-2));
355
+ }
356
+ @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
357
+ .iui-progress-indicator-overlay{
358
+ background-color:rgba(255, 255, 255, 0.6);
359
+ -webkit-backdrop-filter:blur(5px);
360
+ backdrop-filter:blur(5px);
361
+ background-color:rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-3));
362
+ backdrop-filter:blur(5px);
363
+ }
364
+ }
365
+ .iui-progress-indicator-overlay:focus, .iui-progress-indicator-overlay:focus-visible{
366
+ outline:0;
367
+ }
368
+ .iui-progress-indicator-overlay .iui-progress-indicator-linear{
369
+ width:50%;
370
+ max-width:33vw;
371
+ }
300
372
  @-webkit-keyframes closeAnimation{
301
373
  from{
302
374
  opacity:1;
303
- opacity:var(--iui-opacity-1); }
375
+ opacity:var(--iui-opacity-1);
376
+ }
304
377
  to{
305
- opacity:0; } }
306
-
378
+ opacity:0;
379
+ }
380
+ }
307
381
  @keyframes closeAnimation{
308
382
  from{
309
383
  opacity:1;
310
- opacity:var(--iui-opacity-1); }
384
+ opacity:var(--iui-opacity-1);
385
+ }
311
386
  to{
312
- opacity:0; } }
313
- .iui-progress-indicator-overlay .iui-overlay-exiting{
314
- -webkit-animation:closeAnimation 0.2s linear;
315
- animation:closeAnimation 0.2s linear; }
387
+ opacity:0;
388
+ }
389
+ }
390
+ .iui-progress-indicator-overlay .iui-overlay-exiting{
391
+ -webkit-animation:closeAnimation 0.2s linear;
392
+ animation:closeAnimation 0.2s linear;
393
+ }
package/css/reset-global-styles.css CHANGED
@@ -11,11 +11,13 @@ body{
11
11
  vertical-align:baseline;
12
12
  font-size:14px;
13
13
  font-weight:400;
14
- line-height:22px; }
14
+ line-height:22px;
15
+ }
15
16
 
16
17
  b,
17
18
  strong{
18
- font-weight:700; }
19
+ font-weight:700;
20
+ }
19
21
 
20
22
  caption,
21
23
  small{
@@ -25,10 +27,12 @@ small{
25
27
  vertical-align:baseline;
26
28
  font-size:12px;
27
29
  font-weight:400;
28
- line-height:22px; }
30
+ line-height:22px;
31
+ }
29
32
 
30
33
  p{
31
- margin-bottom:22px; }
34
+ margin-bottom:22px;
35
+ }
32
36
 
33
37
  h1,
34
38
  h2,
@@ -42,4 +46,5 @@ h6{
42
46
  vertical-align:baseline;
43
47
  font-size:14px;
44
48
  font-weight:400;
45
- line-height:22px; }
49
+ line-height:22px;
50
+ }