@itwin/itwinui-css 0.50.0 → 0.52.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 (67) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7324 -5608
  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 -344
  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 +114 -44
  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 +223 -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 +4 -1
  47. package/scss/carousel/carousel.scss +4 -1
  48. package/scss/code/codeblock.scss +1 -1
  49. package/scss/inputs/checkbox.scss +1 -0
  50. package/scss/inputs/labeled-inputs.scss +8 -8
  51. package/scss/inputs/radio.scss +0 -4
  52. package/scss/location-marker/data-rich.scss +1 -1
  53. package/scss/location-marker/me.scss +4 -4
  54. package/scss/modal/classes.scss +4 -0
  55. package/scss/modal/modal.scss +81 -7
  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/style/ripple.scss +1 -1
  61. package/scss/style/speed.scss +1 -0
  62. package/scss/table/table.scss +23 -14
  63. package/scss/toast-notification/categories.scss +1 -5
  64. package/scss/toggle-switch/classes.scss +4 -0
  65. package/scss/toggle-switch/toggle-switch.scss +141 -162
  66. package/scss/tooltip/tooltip.scss +1 -1
  67. package/scss/user-icon/user-icon.scss +38 -19
package/css/tabs.css CHANGED
@@ -4,29 +4,39 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-tabs-wrapper{
6
6
  display:flex;
7
- position:relative; }
8
- .iui-tabs-wrapper.iui-horizontal{
9
- flex-direction:column; }
10
- .iui-tabs-wrapper.iui-horizontal .iui-tabs{
11
- display:flex; }
12
- .iui-tabs-wrapper.iui-horizontal .iui-tab::after{
13
- width:100%;
14
- height:0; }
15
- .iui-tabs-wrapper.iui-horizontal .iui-tab.iui-active::after{
16
- height:2px; }
17
- .iui-tabs-wrapper.iui-vertical .iui-tabs{
18
- flex-direction:column; }
19
- .iui-tabs-wrapper.iui-vertical .iui-tabs li,
20
- .iui-tabs-wrapper.iui-vertical .iui-tabs .iui-tab{
21
- width:100%;
22
- white-space:nowrap; }
23
- .iui-tabs-wrapper.iui-vertical .iui-tabs ~ .iui-tabs-content{
24
- flex-grow:1; }
25
- .iui-tabs-wrapper.iui-vertical .iui-tab::after{
26
- width:0;
27
- height:100%; }
28
- .iui-tabs-wrapper.iui-vertical .iui-tab.iui-active::after{
29
- width:2px; }
7
+ position:relative;
8
+ }
9
+ .iui-tabs-wrapper.iui-horizontal{
10
+ flex-direction:column;
11
+ }
12
+ .iui-tabs-wrapper.iui-horizontal .iui-tabs{
13
+ display:flex;
14
+ }
15
+ .iui-tabs-wrapper.iui-horizontal .iui-tab::after{
16
+ width:100%;
17
+ height:0;
18
+ }
19
+ .iui-tabs-wrapper.iui-horizontal .iui-tab.iui-active::after{
20
+ height:2px;
21
+ }
22
+ .iui-tabs-wrapper.iui-vertical .iui-tabs{
23
+ flex-direction:column;
24
+ }
25
+ .iui-tabs-wrapper.iui-vertical .iui-tabs li,
26
+ .iui-tabs-wrapper.iui-vertical .iui-tabs .iui-tab{
27
+ width:100%;
28
+ white-space:nowrap;
29
+ }
30
+ .iui-tabs-wrapper.iui-vertical .iui-tabs ~ .iui-tabs-content{
31
+ flex-grow:1;
32
+ }
33
+ .iui-tabs-wrapper.iui-vertical .iui-tab::after{
34
+ width:0;
35
+ height:100%;
36
+ }
37
+ .iui-tabs-wrapper.iui-vertical .iui-tab.iui-active::after{
38
+ width:2px;
39
+ }
30
40
 
31
41
  .iui-tabs{
32
42
  margin:0;
@@ -39,222 +49,298 @@
39
49
  -webkit-user-select:none;
40
50
  -moz-user-select:none;
41
51
  -ms-user-select:none;
42
- user-select:none; }
52
+ user-select:none;
53
+ }
54
+ .iui-tabs .iui-tab{
55
+ margin:0;
56
+ padding:0;
57
+ border:none;
58
+ vertical-align:baseline;
59
+ font-family:inherit;
60
+ position:relative;
61
+ display:flex;
62
+ align-items:center;
63
+ font-size:14px;
64
+ cursor:pointer;
65
+ color:rgba(0, 0, 0, 0.8);
66
+ color:var(--iui-text-color);
67
+ }
68
+ @media (prefers-reduced-motion: no-preference){
43
69
  .iui-tabs .iui-tab{
44
- margin:0;
45
- padding:0;
46
- border:none;
47
- vertical-align:baseline;
48
- font-family:inherit;
49
- position:relative;
50
- display:flex;
51
- align-items:center;
52
- font-size:14px;
53
- cursor:pointer;
54
- color:rgba(0, 0, 0, 0.8);
55
- color:var(--iui-text-color); }
56
- @media (prefers-reduced-motion: no-preference){
57
- .iui-tabs .iui-tab{
58
- transition:background-color 0.2s ease-out; } }
59
- .iui-tabs .iui-tab.iui-active{
60
- color:#008BE1;
61
- color:var(--iui-color-foreground-primary); }
62
- .iui-tabs .iui-tab.iui-active .iui-tab-icon{
63
- fill:#008BE1;
64
- fill:var(--iui-icons-color-primary); }
65
- .iui-tabs .iui-tab[disabled]{
66
- cursor:not-allowed;
67
- color:rgba(0, 0, 0, 0.4);
68
- color:var(--iui-text-color-muted); }
69
- .iui-tabs .iui-tab[disabled] .iui-tab-icon{
70
- fill:rgba(0, 0, 0, 0.2);
71
- fill:var(--iui-icons-color-actionable-disabled); }
72
- .iui-tabs .iui-tab:focus-visible{
73
- outline:1px solid var(--iui-color-foreground-primary);
74
- outline-offset:-1px; }
75
- @supports not selector(*:focus-visible){
76
- .iui-tabs .iui-tab:focus{
77
- outline:1px solid var(--iui-color-foreground-primary);
78
- outline-offset:-1px; } }
70
+ transition:background-color 0.2s ease-out;
71
+ }
72
+ }
73
+ .iui-tabs .iui-tab.iui-active{
74
+ color:#008BE1;
75
+ color:var(--iui-color-foreground-primary);
76
+ }
77
+ .iui-tabs .iui-tab.iui-active .iui-tab-icon{
78
+ fill:#008BE1;
79
+ fill:var(--iui-icons-color-primary);
80
+ }
81
+ .iui-tabs .iui-tab[disabled]{
82
+ cursor:not-allowed;
83
+ color:rgba(0, 0, 0, 0.4);
84
+ color:var(--iui-text-color-muted);
85
+ }
86
+ .iui-tabs .iui-tab[disabled] .iui-tab-icon{
87
+ fill:rgba(0, 0, 0, 0.2);
88
+ fill:var(--iui-icons-color-actionable-disabled);
89
+ }
90
+ .iui-tabs .iui-tab:focus-visible{
91
+ outline:1px solid var(--iui-color-foreground-primary);
92
+ outline-offset:-1px;
93
+ }
94
+ @supports not selector(*:focus-visible){
95
+ .iui-tabs .iui-tab:focus{
96
+ outline:1px solid var(--iui-color-foreground-primary);
97
+ outline-offset:-1px;
98
+ }
99
+ }
100
+ .iui-tabs .iui-tab-icon{
101
+ width:16px;
102
+ height:16px;
103
+ fill:rgba(0, 0, 0, 0.8);
104
+ fill:var(--iui-icons-color-actionable);
105
+ }
106
+ @media (prefers-reduced-motion: no-preference){
79
107
  .iui-tabs .iui-tab-icon{
80
- width:16px;
81
- height:16px;
82
- fill:rgba(0, 0, 0, 0.8);
83
- fill:var(--iui-icons-color-actionable); }
84
- @media (prefers-reduced-motion: no-preference){
85
- .iui-tabs .iui-tab-icon{
86
- transition:fill 0.2s ease-out; } }
87
- .iui-tabs .iui-tab-icon + .iui-tab-label{
88
- margin-left:8px; }
89
- .iui-tabs .iui-tab-label{
90
- text-align:left; }
91
- .iui-tabs .iui-tab-description{
92
- display:none;
93
- font-size:12px;
94
- opacity:0.6;
95
- opacity:var(--iui-opacity-3); }
96
- .iui-tabs.iui-green .iui-tab:focus{
97
- outline-color:var(--iui-color-foreground-positive); }
98
- .iui-tabs.iui-green .iui-tab.iui-active{
99
- color:#53A21A;
100
- color:var(--iui-color-foreground-positive); }
101
- .iui-tabs.iui-green .iui-tab.iui-active .iui-tab-icon{
102
- fill:#53A21A;
103
- fill:var(--iui-icons-color-positive); }
104
- .iui-tabs ~ .iui-tabs-content{
105
- padding-top:11px;
106
- padding-bottom:11px;
107
- box-sizing:border-box; }
108
- .iui-tabs.iui-default .iui-tab::after{
109
- content:'';
110
- position:absolute;
111
- background-color:#008BE1;
112
- background-color:var(--iui-color-foreground-primary); }
113
- @media (prefers-reduced-motion: no-preference){
114
- .iui-tabs.iui-default .iui-active::after{
115
- transition:width 0.2s ease, height 0.2s ease; } }
116
- .iui-tabs.iui-default.iui-green .iui-tab::after{
117
- background-color:#53A21A;
118
- background-color:var(--iui-color-foreground-positive); }
119
- .iui-tabs.iui-default .iui-tab{
120
- height:38px;
121
- padding:0 16px;
122
- box-sizing:border-box;
123
- background-color:#F8F9FB;
124
- border:1px solid #C7CCD1;
125
- background-color:var(--iui-color-background-2);
126
- border:1px solid var(--iui-color-background-5); }
127
- .iui-tabs.iui-default .iui-tab::after{
128
- top:0;
129
- left:0; }
130
- .iui-tabs.iui-default .iui-tab:hover{
131
- background-color:#FFF;
132
- background-color:var(--iui-color-background-1); }
133
- .iui-tabs.iui-default .iui-tab.iui-active{
134
- background-color:#FFF;
135
- background-color:var(--iui-color-background-1); }
136
- .iui-tabs.iui-default .iui-tab[disabled]{
137
- background-color:#EEF0F3;
138
- background-color:var(--iui-color-background-3); }
139
- .iui-tabs.iui-default .iui-tab:focus{
140
- outline-width:2px;
141
- outline-offset:-2px; }
142
- .iui-horizontal .iui-tabs.iui-default .iui-tab.iui-active{
143
- border-bottom-color:transparent; }
144
- .iui-horizontal .iui-tabs.iui-default :not(:first-child) .iui-tab{
145
- border-left:none; }
146
- .iui-horizontal .iui-tabs.iui-default ~ .iui-tabs-content{
147
- margin-top:-1px; }
148
- .iui-vertical .iui-tabs.iui-default .iui-tab.iui-active{
149
- border-right-color:transparent; }
150
- .iui-vertical .iui-tabs.iui-default :not(:first-child) .iui-tab{
151
- border-top:none; }
152
- .iui-vertical .iui-tabs.iui-default ~ .iui-tabs-content{
153
- margin-left:-1px; }
154
- .iui-tabs.iui-default.iui-large .iui-tab{
155
- height:49px; }
156
- .iui-tabs.iui-default.iui-large .iui-tab-description{
157
- display:block; }
158
- .iui-tabs.iui-default.iui-green .iui-tab::after{
159
- background-color:#53A21A;
160
- background-color:var(--iui-color-foreground-positive); }
161
- .iui-tabs.iui-default ~ .iui-tabs-content{
162
- padding-left:16px;
163
- padding-right:16px;
164
- background-color:#FFF;
165
- border:1px solid #C7CCD1;
166
- background-color:var(--iui-color-background-1);
167
- border:1px solid var(--iui-color-background-5); }
168
- .iui-tabs.iui-borderless .iui-tab{
169
- height:38px;
170
- padding:0 24px;
171
- background-color:transparent; }
172
- .iui-tabs.iui-borderless .iui-tab::after{
173
- bottom:0;
174
- right:0; }
175
- .iui-tabs.iui-borderless .iui-tab:hover{
176
- background-color:rgba(0, 139, 225, 0.1);
177
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
178
- .iui-tabs.iui-borderless .iui-tab.iui-active{
179
- background-color:rgba(0, 139, 225, 0.1);
180
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
181
- .iui-horizontal .iui-tabs.iui-borderless ~ .iui-tabs-content{
182
- margin-top:-2px;
183
- border-top:2px solid #DCE0E3;
184
- border-top:2px solid var(--iui-color-background-4); }
185
- .iui-vertical .iui-tabs.iui-borderless ~ .iui-tabs-content{
186
- margin-left:-2px;
187
- padding-left:12px;
188
- padding-right:12px;
189
- border-left:2px solid #DCE0E3;
190
- border-left:2px solid var(--iui-color-background-4); }
191
- .iui-tabs.iui-borderless.iui-green .iui-active,
192
- .iui-tabs.iui-borderless.iui-green .iui-tab:hover{
193
- background-color:rgba(83, 162, 26, 0.1);
194
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)); }
195
- .iui-tabs.iui-borderless.iui-large .iui-tab{
196
- height:49px; }
197
- .iui-tabs.iui-borderless.iui-large .iui-tab-description{
198
- display:block; }
199
- .iui-tabs.iui-borderless .iui-tab[disabled]:hover{
200
- background-color:transparent;
201
- background-color:transparent; }
202
- .iui-tabs.iui-pill{
203
- justify-content:space-evenly; }
204
- .iui-tabs.iui-pill > li{
205
- flex:1 1 0; }
206
- .iui-tabs.iui-pill > li:not(:last-child){
207
- margin-right:2px; }
208
- .iui-tabs.iui-pill.iui-green .iui-tab:hover{
209
- background-color:rgba(83, 162, 26, 0.1);
210
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)); }
211
- .iui-tabs.iui-pill .iui-tab{
212
- height:38px;
213
- background-color:transparent;
214
- width:100%;
215
- justify-content:center;
216
- border-radius:3px; }
217
- .iui-tabs.iui-pill .iui-tab::after{
218
- bottom:0;
219
- left:0; }
220
- .iui-tabs.iui-pill .iui-tab:hover{
221
- background-color:rgba(0, 139, 225, 0.1);
222
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
223
- .iui-tabs.iui-pill .iui-tab[disabled]:hover{
224
- background-color:transparent;
225
- background-color:transparent; }
226
- .iui-tabs.iui-animated::after{
227
- position:absolute;
228
- content:' ';
229
- background-color:#008BE1;
230
- background-color:var(--iui-color-foreground-primary); }
231
- .iui-tabs.iui-animated.iui-green::after{
232
- background-color:#53A21A;
233
- background-color:var(--iui-color-foreground-positive); }
108
+ transition:fill 0.2s ease-out;
109
+ }
110
+ }
111
+ .iui-tabs .iui-tab-icon + .iui-tab-label{
112
+ margin-left:8px;
113
+ }
114
+ .iui-tabs .iui-tab-label{
115
+ text-align:left;
116
+ }
117
+ .iui-tabs .iui-tab-description{
118
+ display:none;
119
+ font-size:12px;
120
+ opacity:0.6;
121
+ opacity:var(--iui-opacity-3);
122
+ }
123
+ .iui-tabs.iui-green .iui-tab:focus{
124
+ outline-color:var(--iui-color-foreground-positive);
125
+ }
126
+ .iui-tabs.iui-green .iui-tab.iui-active{
127
+ color:#53A21A;
128
+ color:var(--iui-color-foreground-positive);
129
+ }
130
+ .iui-tabs.iui-green .iui-tab.iui-active .iui-tab-icon{
131
+ fill:#53A21A;
132
+ fill:var(--iui-icons-color-positive);
133
+ }
134
+ .iui-tabs ~ .iui-tabs-content{
135
+ padding-top:11px;
136
+ padding-bottom:11px;
137
+ box-sizing:border-box;
138
+ }
139
+ .iui-tabs.iui-default .iui-tab::after{
140
+ content:"";
141
+ position:absolute;
142
+ background-color:#008BE1;
143
+ background-color:var(--iui-color-foreground-primary);
144
+ }
145
+ @media (prefers-reduced-motion: no-preference){
146
+ .iui-tabs.iui-default .iui-active::after{
147
+ transition:width 0.2s ease, height 0.2s ease;
148
+ }
149
+ }
150
+ .iui-tabs.iui-default.iui-green .iui-tab::after{
151
+ background-color:#53A21A;
152
+ background-color:var(--iui-color-foreground-positive);
153
+ }
154
+ .iui-tabs.iui-default .iui-tab{
155
+ height:38px;
156
+ padding:0 16px;
157
+ box-sizing:border-box;
158
+ background-color:#F8F9FB;
159
+ border:1px solid #C7CCD1;
160
+ background-color:var(--iui-color-background-2);
161
+ border:1px solid var(--iui-color-background-5);
162
+ }
163
+ .iui-tabs.iui-default .iui-tab::after{
164
+ top:0;
165
+ left:0;
166
+ }
167
+ .iui-tabs.iui-default .iui-tab:hover{
168
+ background-color:#FFF;
169
+ background-color:var(--iui-color-background-1);
170
+ }
171
+ .iui-tabs.iui-default .iui-tab.iui-active{
172
+ background-color:#FFF;
173
+ background-color:var(--iui-color-background-1);
174
+ }
175
+ .iui-tabs.iui-default .iui-tab[disabled]{
176
+ background-color:#EEF0F3;
177
+ background-color:var(--iui-color-background-3);
178
+ }
179
+ .iui-tabs.iui-default .iui-tab:focus{
180
+ outline-width:2px;
181
+ outline-offset:-2px;
182
+ }
183
+ .iui-horizontal .iui-tabs.iui-default .iui-tab.iui-active{
184
+ border-bottom-color:transparent;
185
+ }
186
+ .iui-horizontal .iui-tabs.iui-default :not(:first-child) .iui-tab{
187
+ border-left:none;
188
+ }
189
+ .iui-horizontal .iui-tabs.iui-default ~ .iui-tabs-content{
190
+ margin-top:-1px;
191
+ }
192
+
193
+ .iui-vertical .iui-tabs.iui-default .iui-tab.iui-active{
194
+ border-right-color:transparent;
195
+ }
196
+ .iui-vertical .iui-tabs.iui-default :not(:first-child) .iui-tab{
197
+ border-top:none;
198
+ }
199
+ .iui-vertical .iui-tabs.iui-default ~ .iui-tabs-content{
200
+ margin-left:-1px;
201
+ }
202
+
203
+ .iui-tabs.iui-default.iui-large .iui-tab{
204
+ height:49px;
205
+ }
206
+ .iui-tabs.iui-default.iui-large .iui-tab-description{
207
+ display:block;
208
+ }
209
+ .iui-tabs.iui-default.iui-green .iui-tab::after{
210
+ background-color:#53A21A;
211
+ background-color:var(--iui-color-foreground-positive);
212
+ }
213
+ .iui-tabs.iui-default ~ .iui-tabs-content{
214
+ padding-left:16px;
215
+ padding-right:16px;
216
+ background-color:#FFF;
217
+ border:1px solid #C7CCD1;
218
+ background-color:var(--iui-color-background-1);
219
+ border:1px solid var(--iui-color-background-5);
220
+ }
221
+ .iui-tabs.iui-borderless .iui-tab{
222
+ height:38px;
223
+ padding:0 24px;
224
+ background-color:transparent;
225
+ }
226
+ .iui-tabs.iui-borderless .iui-tab::after{
227
+ bottom:0;
228
+ right:0;
229
+ }
230
+ .iui-tabs.iui-borderless .iui-tab:hover{
231
+ background-color:rgba(0, 139, 225, 0.1);
232
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
233
+ }
234
+ .iui-tabs.iui-borderless .iui-tab.iui-active{
235
+ background-color:rgba(0, 139, 225, 0.1);
236
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
237
+ }
238
+ .iui-horizontal .iui-tabs.iui-borderless ~ .iui-tabs-content{
239
+ margin-top:-2px;
240
+ border-top:2px solid #DCE0E3;
241
+ border-top:2px solid var(--iui-color-background-4);
242
+ }
243
+
244
+ .iui-vertical .iui-tabs.iui-borderless ~ .iui-tabs-content{
245
+ margin-left:-2px;
246
+ padding-left:12px;
247
+ padding-right:12px;
248
+ border-left:2px solid #DCE0E3;
249
+ border-left:2px solid var(--iui-color-background-4);
250
+ }
251
+
252
+ .iui-tabs.iui-borderless.iui-green .iui-active, .iui-tabs.iui-borderless.iui-green .iui-tab:hover{
253
+ background-color:rgba(83, 162, 26, 0.1);
254
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
255
+ }
256
+ .iui-tabs.iui-borderless.iui-large .iui-tab{
257
+ height:49px;
258
+ }
259
+ .iui-tabs.iui-borderless.iui-large .iui-tab-description{
260
+ display:block;
261
+ }
262
+ .iui-tabs.iui-borderless .iui-tab[disabled]:hover{
263
+ background-color:transparent;
264
+ background-color:transparent;
265
+ }
266
+ .iui-tabs.iui-pill{
267
+ justify-content:space-evenly;
268
+ }
269
+ .iui-tabs.iui-pill > li{
270
+ flex:1 1 0;
271
+ }
272
+ .iui-tabs.iui-pill > li:not(:last-child){
273
+ margin-right:2px;
274
+ }
275
+ .iui-tabs.iui-pill.iui-green .iui-tab:hover{
276
+ background-color:rgba(83, 162, 26, 0.1);
277
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
278
+ }
279
+ .iui-tabs.iui-pill .iui-tab{
280
+ height:38px;
281
+ background-color:transparent;
282
+ width:100%;
283
+ justify-content:center;
284
+ border-radius:3px;
285
+ }
286
+ .iui-tabs.iui-pill .iui-tab::after{
287
+ bottom:0;
288
+ left:0;
289
+ }
290
+ .iui-tabs.iui-pill .iui-tab:hover{
291
+ background-color:rgba(0, 139, 225, 0.1);
292
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
293
+ }
294
+ .iui-tabs.iui-pill .iui-tab[disabled]:hover{
295
+ background-color:transparent;
296
+ background-color:transparent;
297
+ }
298
+ .iui-tabs.iui-animated::after{
299
+ position:absolute;
300
+ content:" ";
301
+ background-color:#008BE1;
302
+ background-color:var(--iui-color-foreground-primary);
303
+ }
304
+ .iui-tabs.iui-animated.iui-green::after{
305
+ background-color:#53A21A;
306
+ background-color:var(--iui-color-foreground-positive);
307
+ }
308
+ .iui-horizontal .iui-tabs.iui-animated::after{
309
+ top:calc(100% - 2px);
310
+ height:2px;
311
+ left:var(--stripe-left);
312
+ width:var(--stripe-width);
313
+ }
314
+ @media (prefers-reduced-motion: no-preference){
234
315
  .iui-horizontal .iui-tabs.iui-animated::after{
235
- top:calc(100% - 2px);
236
- height:2px;
237
- left:var(--stripe-left);
238
- width:var(--stripe-width); }
239
- @media (prefers-reduced-motion: no-preference){
240
- .iui-horizontal .iui-tabs.iui-animated::after{
241
- transition:width 0.2s ease-out, left 0.2s ease-out; } }
316
+ transition:width 0.2s ease-out, left 0.2s ease-out;
317
+ }
318
+ }
319
+
320
+ .iui-vertical .iui-tabs.iui-animated::after{
321
+ left:calc(100% - 2px);
322
+ width:2px;
323
+ top:var(--stripe-top);
324
+ height:var(--stripe-height);
325
+ }
326
+ @media (prefers-reduced-motion: no-preference){
242
327
  .iui-vertical .iui-tabs.iui-animated::after{
243
- left:calc(100% - 2px);
244
- width:2px;
245
- top:var(--stripe-top);
246
- height:var(--stripe-height); }
247
- @media (prefers-reduced-motion: no-preference){
248
- .iui-vertical .iui-tabs.iui-animated::after{
249
- transition:top 0.2s ease-out; } }
250
- .iui-tabs.iui-not-animated .iui-tab::after{
251
- content:'';
252
- position:absolute;
253
- background-color:#008BE1;
254
- background-color:var(--iui-color-foreground-primary); }
255
- @media (prefers-reduced-motion: no-preference){
256
- .iui-tabs.iui-not-animated .iui-active::after{
257
- transition:width 0.2s ease, height 0.2s ease; } }
258
- .iui-tabs.iui-not-animated.iui-green .iui-tab::after{
259
- background-color:#53A21A;
260
- background-color:var(--iui-color-foreground-positive); }
328
+ transition:top 0.2s ease-out;
329
+ }
330
+ }
331
+
332
+ .iui-tabs.iui-not-animated .iui-tab::after{
333
+ content:"";
334
+ position:absolute;
335
+ background-color:#008BE1;
336
+ background-color:var(--iui-color-foreground-primary);
337
+ }
338
+ @media (prefers-reduced-motion: no-preference){
339
+ .iui-tabs.iui-not-animated .iui-active::after{
340
+ transition:width 0.2s ease, height 0.2s ease;
341
+ }
342
+ }
343
+ .iui-tabs.iui-not-animated.iui-green .iui-tab::after{
344
+ background-color:#53A21A;
345
+ background-color:var(--iui-color-foreground-positive);
346
+ }