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