@itwin/itwinui-css 0.50.1 → 0.53.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 (89) hide show
  1. package/css/alert.css +234 -176
  2. package/css/all.css +8324 -5880
  3. package/css/badge.css +3 -2
  4. package/css/blockquote.css +12 -9
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +110 -91
  8. package/css/code.css +70 -57
  9. package/css/color-picker.css +164 -113
  10. package/css/date-picker.css +454 -80
  11. package/css/expandable-block.css +213 -161
  12. package/css/fieldset.css +25 -21
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +550 -197
  16. package/css/header.css +485 -367
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +181 -137
  19. package/css/inputs.css +1137 -945
  20. package/css/keyboard.css +14 -10
  21. package/css/location-marker.css +69 -59
  22. package/css/menu.css +124 -86
  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 +316 -238
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +193 -144
  30. package/css/skip-to-content.css +42 -28
  31. package/css/slider.css +116 -91
  32. package/css/surface.css +19 -0
  33. package/css/table.css +578 -430
  34. package/css/tabs.css +324 -238
  35. package/css/tag.css +112 -85
  36. package/css/text.css +47 -28
  37. package/css/tile.css +389 -313
  38. package/css/time-picker.css +114 -87
  39. package/css/toast-notification.css +234 -175
  40. package/css/toggle-switch.css +176 -111
  41. package/css/tooltip.css +24 -17
  42. package/css/tree.css +123 -93
  43. package/css/user-icon.css +222 -162
  44. package/css/wizard.css +158 -133
  45. package/package.json +5 -6
  46. package/scss/alert/alert.scss +1 -5
  47. package/scss/carousel/carousel.scss +24 -27
  48. package/scss/classes.scss +1 -0
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/color-picker/color-picker.scss +2 -2
  51. package/scss/date-picker/classes.scss +20 -0
  52. package/scss/date-picker/date-picker.scss +194 -33
  53. package/scss/fieldset/fieldset.scss +1 -1
  54. package/scss/header/header.scss +15 -10
  55. package/scss/index.scss +1 -0
  56. package/scss/information-panel/information-panel.scss +10 -3
  57. package/scss/inputs/checkbox.scss +1 -0
  58. package/scss/inputs/labeled-inputs.scss +8 -8
  59. package/scss/inputs/radio.scss +0 -4
  60. package/scss/location-marker/data-rich.scss +1 -1
  61. package/scss/location-marker/me.scss +4 -4
  62. package/scss/menu/classes.scss +2 -1
  63. package/scss/menu/menu.scss +8 -11
  64. package/scss/modal/classes.scss +4 -0
  65. package/scss/modal/modal.scss +82 -7
  66. package/scss/popover/popover.scss +1 -2
  67. package/scss/progress-indicator/linear.scss +3 -11
  68. package/scss/progress-indicator/radial.scss +1 -1
  69. package/scss/side-navigation/side-navigation.scss +5 -5
  70. package/scss/slider/slider.scss +2 -2
  71. package/scss/style/elevation.scss +5 -5
  72. package/scss/style/global.scss +33 -26
  73. package/scss/style/mixins.scss +9 -0
  74. package/scss/style/ripple.scss +1 -1
  75. package/scss/style/speed.scss +1 -0
  76. package/scss/style/theme.scss +248 -65
  77. package/scss/surface/classes.scss +7 -0
  78. package/scss/surface/index.scss +3 -0
  79. package/scss/surface/surface.scss +18 -0
  80. package/scss/table/column-filter.scss +2 -2
  81. package/scss/table/table.scss +26 -17
  82. package/scss/tile/tile.scss +5 -5
  83. package/scss/time-picker/time-picker.scss +2 -2
  84. package/scss/toast-notification/categories.scss +1 -5
  85. package/scss/toggle-switch/classes.scss +4 -0
  86. package/scss/toggle-switch/toggle-switch.scss +141 -162
  87. package/scss/tooltip/tooltip.scss +2 -1
  88. package/scss/user-icon/user-icon.scss +38 -19
  89. package/scss/wizard/wizard.scss +1 -1
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:#008ae0;
75
+ color:var(--iui-color-foreground-primary);
76
+ }
77
+ .iui-tabs .iui-tab.iui-active .iui-tab-icon{
78
+ fill:#008ae0;
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:#008ae0;
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:#f9f9fb;
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:white;
169
+ background-color:var(--iui-color-background-1);
170
+ }
171
+ .iui-tabs.iui-default .iui-tab.iui-active{
172
+ background-color:white;
173
+ background-color:var(--iui-color-background-1);
174
+ }
175
+ .iui-tabs.iui-default .iui-tab[disabled]{
176
+ background-color:#edeff2;
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:white;
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, 138, 224, 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, 138, 224, 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 #dde1e4;
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 #dde1e4;
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, 138, 224, 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:#008ae0;
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:#008ae0;
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
+ }