@itwin/itwinui-css 0.63.1 → 0.63.2-dev.1

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