@oruga-ui/theme-oruga 0.7.1 → 0.8.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 (48) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +5 -5
  3. package/dist/scss/components/_autocomplete.scss +3 -12
  4. package/dist/scss/components/_breadcrumb.scss +122 -103
  5. package/dist/scss/components/_button.scss +228 -173
  6. package/dist/scss/components/_carousel.scss +164 -142
  7. package/dist/scss/components/_checkbox.scss +118 -118
  8. package/dist/scss/components/_collapse.scss +1 -1
  9. package/dist/scss/components/_datepicker.scss +228 -290
  10. package/dist/scss/components/_datetimepicker.scss +8 -2
  11. package/dist/scss/components/_dialog.scss +243 -0
  12. package/dist/scss/components/_dropdown.scss +190 -164
  13. package/dist/scss/components/_field.scss +68 -39
  14. package/dist/scss/components/_icon.scss +24 -29
  15. package/dist/scss/components/_input.scss +112 -97
  16. package/dist/scss/components/_listbox.scss +176 -0
  17. package/dist/scss/components/_loading.scss +35 -15
  18. package/dist/scss/components/_menu.scss +113 -109
  19. package/dist/scss/components/_modal.scss +112 -50
  20. package/dist/scss/components/_notification.scss +113 -97
  21. package/dist/scss/components/_pagination.scss +173 -106
  22. package/dist/scss/components/_radio.scss +91 -84
  23. package/dist/scss/components/_select.scss +108 -115
  24. package/dist/scss/components/_sidebar.scss +102 -101
  25. package/dist/scss/components/_skeleton.scss +50 -39
  26. package/dist/scss/components/_slider.scss +221 -159
  27. package/dist/scss/components/_steps.scss +223 -261
  28. package/dist/scss/components/_switch.scss +126 -90
  29. package/dist/scss/components/_table.scss +307 -251
  30. package/dist/scss/components/_tabs.scss +360 -247
  31. package/dist/scss/components/_tag.scss +95 -39
  32. package/dist/scss/components/_taginput.scss +48 -36
  33. package/dist/scss/components/_timepicker.scss +61 -62
  34. package/dist/scss/components/_tooltip.scss +129 -254
  35. package/dist/scss/components/_upload.scss +83 -35
  36. package/dist/scss/theme-build.scss +9 -0
  37. package/dist/scss/theme.scss +44 -0
  38. package/dist/scss/utils/_animations.scss +30 -9
  39. package/dist/scss/utils/_base.scss +6 -4
  40. package/dist/scss/utils/_helpers.scss +84 -22
  41. package/dist/scss/utils/_root.scss +82 -29
  42. package/dist/scss/utils/_variables.scss +64 -42
  43. package/dist/theme.css +2 -0
  44. package/dist/theme.js +1 -1
  45. package/package.json +27 -20
  46. package/dist/oruga.css +0 -2
  47. package/dist/scss/oruga-build.scss +0 -9
  48. package/dist/scss/oruga.scss +0 -42
package/dist/scss/components/_tabs.scss CHANGED
@@ -1,261 +1,385 @@
1
+ @use "../utils/helpers" as h;
2
+ @use "../utils/variables" as vars;
3
+
1
4
  /* @docs */
2
- $tabs-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
3
- $tabs-font-size: var(--#{$prefix}base-font-size) !default;
4
- $tabs-icon-margin: 0 0.5em 0 0 !default;
5
- $tabs-content-padding: 1rem !default;
6
- $tabs-margin-bottom: 1.5rem !default;
7
- $tabs-border-bottom-color: var(--#{$prefix}grey-lighter) !default;
8
- $tabs-border-bottom-style: solid !default;
9
- $tabs-border-bottom-width: 1px !default;
10
- $tabs-tab-color: hsl(0, 0%, 29%) !default;
11
- $tabs-tab-active-border-bottom-color: var(--#{$prefix}primary) !default;
12
- $tabs-tab-active-color: var(--#{$prefix}primary) !default;
13
- $tabs-tab-padding: 0.5em 1em !default;
14
- $tabs-boxed-tab-radius: var(--#{$prefix}base-border-radius) !default;
15
- $tabs-boxed-tab-hover-background-color: hsl(0, 0%, 96%) !default;
16
- $tabs-boxed-tab-hover-border-bottom-color: hsl(0, 0%, 86%) !default;
17
- $tabs-boxed-tab-active-background-color: hsl(0, 0%, 100%) !default;
18
- $tabs-boxed-tab-active-border-color: hsl(0, 0%, 86%) !default;
19
- $tabs-boxed-tab-active-border-bottom-color: transparent !default;
20
- $tabs-toggle-tab-border-color: hsl(0, 0%, 86%) !default;
21
- $tabs-toggle-tab-border-style: solid !default;
22
- $tabs-toggle-tab-border-width: 1px !default;
23
- $tabs-toggle-tab-hover-background-color: hsl(0, 0%, 96%) !default;
24
- $tabs-toggle-tab-hover-border-color: hsl(0, 0%, 71%) !default;
25
- $tabs-toggle-tab-active-background-color: var(--#{$prefix}primary) !default;
26
- $tabs-toggle-tab-active-border-color: var(--#{$prefix}primary) !default;
27
- $tabs-toggle-tab-active-color: var(--#{$prefix}primary-invert) !default;
5
+ $tabs-sapcer: h.useVar("control-spacer");
6
+ $tabs-disabled-opacity: h.useVar("control-disabled-opacity") !default;
7
+
8
+ $tabs-tab-padding: h.useVar("control-spacer")
9
+ calc(2 * h.useVar("control-spacer")) !default;
10
+ $tabs-tab-icon-margin: 0 h.useVar("control-spacer") 0 0 !default;
11
+
12
+ $tabs-tab-color: h.useVar("font-color") !default;
13
+ $tabs-tab-font-size: h.useVar("font-size") !default;
14
+ $tabs-tab-font-weight: h.useVar("font-weight") !default;
15
+ $tabs-tab-line-height: h.useVar("line-height") !default;
16
+
17
+ $tabs-tab-border-width: h.useVar("control-border-width") !default;
18
+ $tabs-tab-border-style: solid !default;
19
+ $tabs-tab-border-color: h.useVar("control-border-color") !default;
20
+ $tabs-tab-border-radius: h.useVar("border-radius") !default;
21
+ $tabs-tab-background-color: transparent !default;
22
+
23
+ $tabs-tab-hover-color: $tabs-tab-color !default;
24
+ $tabs-tab-hover-background-color: hsl(0, 0%, 96%) !default;
25
+ $tabs-tab-hover-border-color: hsl(0, 0%, 86%) !default;
26
+ $tabs-tab-hover-border-radius: $tabs-tab-border-radius !default;
27
+
28
+ $tabs-tab-active-color: h.useVar("primary") !default;
29
+ $tabs-tab-active-background-color: h.useVar("primary-invert") !default;
30
+ $tabs-tab-active-border-color: h.useVar("primary") !default;
31
+ $tabs-tab-active-border-radius: $tabs-tab-border-radius !default;
32
+
33
+ $tabs-content-padding: calc(2 * h.useVar("control-spacer")) !default;
28
34
  /* @docs */
29
35
 
30
36
  .o-tabs {
37
+ @include h.defineVar("tabs-sapcer", $tabs-sapcer);
38
+ @include h.defineVar("tabs-disabled-opacity", $tabs-disabled-opacity);
39
+ @include h.defineVar("tabs-tab-padding", $tabs-tab-padding);
40
+ @include h.defineVar("tabs-tab-icon-margin", $tabs-tab-icon-margin);
41
+
42
+ @include h.defineVar("tabs-tab-color", $tabs-tab-color);
43
+ @include h.defineVar("tabs-tab-font-size", $tabs-tab-font-size);
44
+ @include h.defineVar("tabs-tab-font-weight", $tabs-tab-font-weight);
45
+ @include h.defineVar("tabs-tab-line-height", $tabs-tab-line-height);
46
+
47
+ @include h.defineVar(
48
+ "tabs-tab-background-color",
49
+ $tabs-tab-background-color
50
+ );
51
+ @include h.defineVar("tabs-tab-border-width", $tabs-tab-border-width);
52
+ @include h.defineVar("tabs-tab-border-style", $tabs-tab-border-style);
53
+ @include h.defineVar("tabs-tab-border-color", $tabs-tab-border-color);
54
+ @include h.defineVar("tabs-tab-border-radius", $tabs-tab-border-radius);
55
+
56
+ @include h.defineVar("tabs-tab-active-color", $tabs-tab-active-color);
57
+ @include h.defineVar(
58
+ "tabs-tab-active-background-color",
59
+ $tabs-tab-active-background-color
60
+ );
61
+ @include h.defineVar(
62
+ "tabs-tab-active-border-color",
63
+ $tabs-tab-active-border-color
64
+ );
65
+ @include h.defineVar(
66
+ "tabs-tab-active-border-radius",
67
+ $tabs-tab-active-border-radius
68
+ );
69
+
70
+ @include h.defineVar("tabs-tab-hover-color", $tabs-tab-hover-color);
71
+ @include h.defineVar(
72
+ "tabs-tab-hover-background-color",
73
+ $tabs-tab-hover-background-color
74
+ );
75
+ @include h.defineVar(
76
+ "tabs-tab-hover-border-color",
77
+ $tabs-tab-hover-border-color
78
+ );
79
+ @include h.defineVar(
80
+ "tabs-tab-hover-border-radius",
81
+ $tabs-tab-hover-border-radius
82
+ );
83
+
84
+ @include h.defineVar("tabs-content-padding", $tabs-content-padding);
85
+
31
86
  // size variants
32
- @each $name, $value in $sizes {
33
- &--#{$name} .o-tabs__tab {
34
- font-size: var(--#{$prefix}tabs-font-size-#{$name}, $value);
87
+ @each $name, $value in vars.$sizes {
88
+ &--#{$name} {
89
+ @include h.defineVar(
90
+ "tabs-tab-font-size",
91
+ h.useVar("size-#{$name}")
92
+ );
35
93
  }
36
94
  }
37
95
 
38
96
  &__list {
39
- @include unselectable;
40
-
41
- margin: 0;
42
- padding: 0;
43
97
  display: flex;
44
98
  align-items: center;
45
99
  flex-grow: 1;
46
100
  flex-shrink: 0;
47
- // padding bottom to keep showing the border-bottom
48
- padding-bottom: var(
49
- --#{$prefix}tabs-border-bottom-width,
50
- $tabs-border-bottom-width
51
- );
101
+
102
+ margin: 0;
103
+ padding: 0;
104
+
105
+ transition: background h.useVar("transition-duration")
106
+ h.useVar("transition-timing");
52
107
  }
53
108
 
54
109
  &--multiline &__list {
55
110
  flex-wrap: wrap;
56
111
  }
57
112
 
58
- &--left .o-tabs__list {
113
+ &--left &__list {
59
114
  justify-content: flex-start;
60
115
  }
61
116
 
62
- &--centered .o-tabs__list {
117
+ &--centered &__list {
63
118
  justify-content: center;
64
119
  }
65
120
 
66
- &--right .o-tabs__list {
121
+ &--right &__list {
67
122
  justify-content: flex-end;
68
123
  }
69
124
 
70
125
  &__tab {
71
- -moz-appearance: none;
72
- -webkit-appearance: none;
73
- background-color: transparent;
74
- margin-bottom: -1px;
75
- cursor: pointer;
126
+ // add clickable cursor
127
+ @include h.clickable;
128
+
129
+ // define focus shadow effect
130
+ @include h.focusable;
131
+
132
+ // remove default appearance
133
+ @include h.removeAppearance;
134
+
76
135
  display: flex;
77
136
  align-items: center;
78
137
  justify-content: center;
79
138
  vertical-align: top;
80
- font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
81
- color: var(--#{$prefix}tabs-tab-color, $tabs-tab-color);
82
- padding: var(--#{$prefix}tabs-tab-padding, $tabs-tab-padding);
83
- border: 1px solid transparent;
84
139
 
85
- &-icon {
86
- margin: var(--#{$prefix}tabs-icon-margin, $tabs-icon-margin);
87
- }
140
+ padding: h.useVar("tabs-tab-padding");
141
+
142
+ color: h.useVar("tabs-tab-color");
143
+ font-size: h.useVar("tabs-tab-font-size");
144
+ font-weight: h.useVar("tabs-tab-font-weight");
145
+ line-height: h.useVar("tabs-tab-line-height");
146
+
147
+ background-color: h.useVar("tabs-tab-background-color");
148
+ border-color: h.useVar("tabs-tab-border-color");
149
+ border-style: h.useVar("tabs-tab-border-style");
150
+ border-width: h.useVar("tabs-tab-border-width");
151
+ border-radius: h.useVar("tabs-tab-border-radius");
88
152
 
89
153
  // focus effect
154
+ &:hover,
90
155
  &:focus,
91
156
  &:focus-visible,
92
157
  &:focus-within {
93
- box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
94
- outline: 0;
95
- border-radius: #{$tabs-boxed-tab-radius};
158
+ @include h.defineVar(
159
+ "tabs-tab-border-radius",
160
+ h.useVar("tabs-tab-hover-border-radius")
161
+ ); // check this
162
+
163
+ &:not(.o-tabs__tab--active) {
164
+ @include h.defineVar(
165
+ "tabs-tab-color",
166
+ h.useVar("tabs-tab-hover-color")
167
+ );
168
+ @include h.defineVar(
169
+ "tabs-tab-background-color",
170
+ h.useVar("tabs-tab-hover-background-color")
171
+ );
172
+ @include h.defineVar(
173
+ "tabs-tab-bottom-color",
174
+ h.useVar("tabs-tab-hover-border-color")
175
+ );
176
+ }
96
177
  }
97
178
 
98
179
  &--disabled {
99
- pointer-events: none;
100
- cursor: not-allowed;
101
- opacity: var(
102
- --#{$prefix}tabs-disabled-opacity,
103
- $tabs-disabled-opacity
104
- );
180
+ @include h.disabled(h.useVar("tabs-disabled-opacity"));
105
181
  }
106
- }
107
-
108
- &--default .o-tabs__tab {
109
- border-bottom-color: var(
110
- --#{$prefix}tabs-border-bottom-color,
111
- $tabs-border-bottom-color
112
- );
113
- border-bottom-style: var(
114
- --#{$prefix}tabs-border-bottom-style,
115
- $tabs-border-bottom-style
116
- );
117
- border-bottom-width: var(
118
- --#{$prefix}tabs-border-bottom-width,
119
- $tabs-border-bottom-width
120
- );
121
182
 
122
183
  &--active {
123
- border-bottom-color: var(
124
- --#{$prefix}tabs-tab-active-border-bottom-color,
125
- $tabs-tab-active-border-bottom-color
184
+ @include h.defineVar(
185
+ "tabs-tab-color",
186
+ h.useVar("tabs-tab-active-color")
126
187
  );
127
- color: var(
128
- --#{$prefix}tabs-tab-active-color,
129
- $tabs-tab-active-color
188
+ @include h.defineVar(
189
+ "tabs-tab-background-color",
190
+ h.useVar("tabs-tab-active-background-color")
130
191
  );
131
- }
132
-
133
- &:hover:not(.o-tabs__tab--active) {
134
- background-color: var(
135
- --#{$prefix}tabs-tab-hover-background-color,
136
- $tabs-boxed-tab-hover-background-color
192
+ @include h.defineVar(
193
+ "tabs-tab-border-color",
194
+ h.useVar("tabs-tab-active-border-color")
137
195
  );
138
- border-bottom-color: var(
139
- --#{$prefix}tabs-tab-hover-border-bottom-color,
140
- $tabs-boxed-tab-hover-border-bottom-color
196
+ @include h.defineVar(
197
+ "tabs-tab-border-radius",
198
+ h.useVar("tabs-tab-active-border-radius")
141
199
  );
142
200
  }
201
+
202
+ &-icon {
203
+ margin: h.useVar("tabs-tab-icon-margin");
204
+ }
205
+
206
+ // color variants
207
+ @each $name, $pair in vars.$colors {
208
+ &--#{$name} {
209
+ @include h.defineVar(
210
+ "tabs-tab-color",
211
+ h.useVar("#{$name}-invert")
212
+ );
213
+ @include h.defineVar(
214
+ "tabs-tab-background-color",
215
+ h.useVar($name)
216
+ );
217
+ @include h.defineVar(
218
+ "tabs-tab-active-color",
219
+ h.useVar("#{$name}-invert")
220
+ );
221
+ @include h.defineVar(
222
+ "tabs-tab-active-background-color",
223
+ h.useVar($name)
224
+ );
225
+ @include h.defineVar(
226
+ "tabs-tab-active-border-color",
227
+ h.useVar($name)
228
+ );
229
+ @include h.defineVar("tabs-tab-hover-color", h.useVar($name));
230
+ @include h.defineVar(
231
+ "tabs-tab-hover-background-color",
232
+ h.useVar("#{$name}-invert")
233
+ );
234
+ @include h.defineVar(
235
+ "tabs-tab-hover-border-color",
236
+ h.useVar("#{$name}-invert")
237
+ );
238
+
239
+ &:hover,
240
+ &:focus,
241
+ &:focus-visible,
242
+ &:focus-within {
243
+ color: h.useVar("tabs-tab-hover-color");
244
+ }
245
+ }
246
+ }
143
247
  }
144
248
 
145
- &--boxed .o-tabs__tab {
146
- border-radius: var(
147
- --#{$prefix}tabs-border-bottom-color,
148
- #{$tabs-boxed-tab-radius} #{$tabs-boxed-tab-radius} 0 0
149
- );
150
- border-bottom-color: var(
151
- --#{$prefix}tabs-border-bottom-color,
152
- $tabs-border-bottom-color
153
- );
154
- border-bottom-style: var(
155
- --#{$prefix}tabs-border-bottom-style,
156
- $tabs-border-bottom-style
157
- );
158
- border-bottom-width: var(
159
- --#{$prefix}tabs-border-bottom-width,
160
- $tabs-border-bottom-width
161
- );
249
+ // specific default style styling
250
+ &--default {
251
+ // override border radius
252
+ @include h.defineVar("tabs-tab-border-radius", unset);
253
+ @include h.defineVar("tabs-tab-active-border-radius", unset);
162
254
 
163
- &--active {
164
- color: var(
165
- --#{$prefix}tabs-tab-active-color,
166
- $tabs-tab-active-color
167
- );
168
- background-color: var(
169
- --#{$prefix}tabs-boxed-tab-active-background-color,
170
- $tabs-boxed-tab-active-background-color
171
- );
172
- border-color: var(
173
- --#{$prefix}tabs-boxed-tab-active-border-color,
174
- $tabs-boxed-tab-active-border-color
175
- );
176
- border-bottom-color: var(
177
- --#{$prefix}tabs-boxed-tab-active-border-bottom-color,
178
- $tabs-boxed-tab-active-border-bottom-color
179
- );
255
+ .o-tabs__tab {
256
+ border-color: transparent;
257
+ border-bottom-color: h.useVar("tabs-tab-border-color");
258
+
259
+ // focus effect
260
+ &:hover,
261
+ &:focus,
262
+ &:focus-visible,
263
+ &:focus-within {
264
+ @include h.defineVar(
265
+ "tabs-tab-background-color",
266
+ h.useVar("tabs-tab-hover-background-color")
267
+ );
268
+ }
180
269
  }
270
+ }
181
271
 
182
- &:hover:not(.o-tabs__tab--active) {
183
- background-color: var(
184
- --#{$prefix}tabs-boxed-tab-hover-background-color,
185
- $tabs-boxed-tab-hover-background-color
186
- );
272
+ // specific boxed style styling
273
+ &--tabs,
274
+ &--boxed {
275
+ // override border radius
276
+ $border-radius: h.useVar("border-radius") h.useVar("border-radius") 0 0;
277
+
278
+ @include h.defineVar("tabs-tab-border-radius", $border-radius);
279
+ @include h.defineVar("tabs-tab-hover-border-radius", $border-radius);
280
+ @include h.defineVar("tabs-tab-active-border-radius", $border-radius);
281
+
282
+ // override border color
283
+ @include h.defineVar(
284
+ "tabs-tab-active-border-color",
285
+ $tabs-tab-border-color
286
+ );
287
+
288
+ .o-tabs__tab {
289
+ border-color: transparent;
290
+ border-bottom-color: h.useVar("tabs-tab-border-color");
291
+
292
+ &--active {
293
+ border-color: h.useVar("tabs-tab-border-color");
294
+ border-bottom-color: transparent;
295
+ }
296
+
297
+ // focus effect
298
+ &:hover,
299
+ &:focus,
300
+ &:focus-visible,
301
+ &:focus-within {
302
+ @include h.defineVar(
303
+ "tabs-tab-background-color",
304
+ h.useVar("tabs-tab-hover-background-color")
305
+ );
306
+ }
187
307
  }
188
308
  }
189
309
 
190
- &--toggle .o-tabs__tab {
191
- border-color: var(
192
- --#{$prefix}tabs-toggle-tab-border-color,
193
- $tabs-toggle-tab-border-color
310
+ // specific toggle style styling
311
+ &--toggle {
312
+ // override border radius
313
+ @include h.defineVar("tabs-tab-border-radius", unset);
314
+ @include h.defineVar(
315
+ "tabs-tab-hover-border-radius",
316
+ h.useVar("border-radius")
317
+ );
318
+ @include h.defineVar("tabs-tab-active-border-radius", unset);
319
+
320
+ // redefine active colors
321
+ @include h.defineVar(
322
+ "tabs-tab-active-color",
323
+ $tabs-tab-active-background-color
194
324
  );
195
- border-style: var(
196
- --#{$prefix}tabs-toggle-tab-border-style,
197
- $tabs-toggle-tab-border-style
325
+ @include h.defineVar(
326
+ "tabs-tab-active-background-color",
327
+ $tabs-tab-active-color
198
328
  );
199
- border-width: var(
200
- --#{$prefix}tabs-toggle-tab-border-width,
201
- $tabs-toggle-tab-border-width
329
+ @include h.defineVar(
330
+ "tabs-tab-active-border-color",
331
+ $tabs-tab-active-color
202
332
  );
333
+ }
203
334
 
204
- &--active {
205
- background-color: var(
206
- --#{$prefix}tabs-toggle-tab-active-background-color,
207
- $tabs-toggle-tab-active-background-color
208
- );
209
- border-color: var(
210
- --#{$prefix}tabs-toggle-tab-active-border-color,
211
- $tabs-toggle-tab-active-border-color
212
- );
213
- color: var(
214
- --#{$prefix}tabs-toggle-tab-active-color,
215
- $tabs-toggle-tab-active-color
216
- );
217
- }
335
+ // specific pills style styling
336
+ &--pills {
337
+ // override border radius
338
+ $border-radius: h.useVar("border-radius");
218
339
 
219
- &:hover:not(.o-tabs_tab--active) {
220
- color: var(--#{$prefix}tabs-tab-color, $tabs-tab-color);
221
- background-color: var(
222
- --#{$prefix}tabs-toggle-tab-hover-background-color,
223
- $tabs-toggle-tab-hover-background-color
224
- );
225
- border-color: var(
226
- --#{$prefix}tabs-toggle-tab-hover-border-color,
227
- $tabs-toggle-tab-hover-border-color
228
- );
340
+ @include h.defineVar("tabs-tab-border-radius", $border-radius);
341
+ @include h.defineVar("tabs-tab-hover-border-radius", $border-radius);
342
+ @include h.defineVar("tabs-tab-active-border-radius", $border-radius);
343
+
344
+ // redefine active colors
345
+ @include h.defineVar(
346
+ "tabs-tab-active-color",
347
+ $tabs-tab-active-background-color
348
+ );
349
+ @include h.defineVar(
350
+ "tabs-tab-active-background-color",
351
+ $tabs-tab-active-color
352
+ );
353
+ @include h.defineVar(
354
+ "tabs-tab-active-border-color",
355
+ $tabs-tab-active-color
356
+ );
357
+
358
+ .o-tabs__tab {
359
+ border-color: transparent;
229
360
  }
230
361
  }
231
362
 
232
- &--pills .o-tabs__tab {
233
- border-radius: var(
234
- --#{$prefix}tabs-boxed-tab-radius,
235
- $tabs-boxed-tab-radius
236
- );
237
- border-color: transparent;
363
+ &__content {
364
+ position: relative;
365
+ overflow: visible;
366
+ display: flex;
367
+ flex-direction: column;
368
+ flex-grow: 1;
238
369
 
239
- &--active {
240
- background-color: var(
241
- --#{$prefix}tabs-toggle-tab-active-background-color,
242
- $tabs-toggle-tab-active-background-color
243
- );
244
- color: var(
245
- --#{$prefix}tabs-toggle-tab-active-color,
246
- $tabs-toggle-tab-active-color
247
- );
370
+ &--transitioning {
371
+ overflow: hidden;
248
372
  }
249
373
 
250
- &:hover:not(.o-tabs_tab--active) {
251
- color: var(--#{$prefix}tabs-tab-color, $tabs-tab-color);
252
- background-color: var(
253
- --#{$prefix}tabs-toggle-tab-hover-background-color,
254
- $tabs-toggle-tab-hover-background-color
255
- );
374
+ &:not(:has(.o-tabs__panel:empty)) {
375
+ padding: h.useVar("tabs-content-padding");
256
376
  }
257
377
  }
258
378
 
379
+ &:not(:last-child) {
380
+ margin-bottom: h.useVar("tabs-content-padding");
381
+ }
382
+
259
383
  &--expanded {
260
384
  width: 100%;
261
385
 
@@ -267,7 +391,6 @@ $tabs-toggle-tab-active-color: var(--#{$prefix}primary-invert) !default;
267
391
 
268
392
  &--vertical {
269
393
  display: flex;
270
- flex-direction: row;
271
394
 
272
395
  .o-tabs__list {
273
396
  flex-direction: column;
@@ -276,76 +399,66 @@ $tabs-toggle-tab-active-color: var(--#{$prefix}primary-invert) !default;
276
399
  border-bottom: none;
277
400
  }
278
401
 
279
- &.o-tabs--boxed .o-tabs__tab {
280
- border-bottom-color: transparent;
281
- border-right-color: var(
282
- --#{$prefix}tabs-border-bottom-color,
283
- $tabs-border-bottom-color
284
- );
285
- border-radius: var(
286
- --#{$prefix}tabs-border-bottom-color,
287
- #{$tabs-boxed-tab-radius} 0 0 #{$tabs-boxed-tab-radius}
288
- );
402
+ &.o-tabs--left {
403
+ flex-direction: row;
404
+
405
+ &.o-tabs--boxed {
406
+ // override border radius
407
+ $border-radius: h.useVar("border-radius") 0 0
408
+ h.useVar("border-radius");
289
409
 
290
- &.o-tabs__tab--active {
291
- border-right-color: transparent;
292
- border-bottom-color: var(
293
- --#{$prefix}tabs-border-bottom-color,
294
- $tabs-border-bottom-color
410
+ @include h.defineVar("tabs-tab-border-radius", $border-radius);
411
+ @include h.defineVar(
412
+ "tabs-tab-hover-border-radius",
413
+ $border-radius
295
414
  );
415
+ @include h.defineVar(
416
+ "tabs-tab-active-border-radius",
417
+ $border-radius
418
+ );
419
+
420
+ .o-tabs__tab {
421
+ border-bottom-color: transparent;
422
+ border-right-color: h.useVar("tabs-tab-border-color");
423
+
424
+ &.o-tabs__tab--active {
425
+ border-right-color: transparent;
426
+ border-bottom-color: h.useVar("tabs-tab-border-color");
427
+ }
428
+ }
296
429
  }
297
430
  }
298
- }
299
431
 
300
- &--right {
301
- flex-direction: row-reverse;
432
+ &.o-tabs--right {
433
+ flex-direction: row-reverse;
302
434
 
303
- &.o-tabs--boxed .o-tabs__tab {
304
- border-bottom-color: transparent;
305
- border-right-color: transparent;
306
- border-left-color: var(
307
- --#{$prefix}tabs-border-bottom-color,
308
- $tabs-border-bottom-color
309
- );
310
- border-radius: var(
311
- --#{$prefix}tabs-border-bottom-color,
312
- 0 #{$tabs-boxed-tab-radius} #{$tabs-boxed-tab-radius} 0
313
- );
435
+ &.o-tabs--boxed {
436
+ // override border radius
437
+ $border-radius: 0 h.useVar("border-radius")
438
+ h.useVar("border-radius") 0;
314
439
 
315
- &.o-tabs__tab--active {
316
- border-left-color: transparent;
317
- border-right-color: var(
318
- --#{$prefix}tabs-border-bottom-color,
319
- $tabs-border-bottom-color
440
+ @include h.defineVar("tabs-tab-border-radius", $border-radius);
441
+ @include h.defineVar(
442
+ "tabs-tab-hover-border-radius",
443
+ $border-radius
320
444
  );
321
- border-bottom-color: var(
322
- --#{$prefix}tabs-border-bottom-color,
323
- $tabs-border-bottom-color
445
+ @include h.defineVar(
446
+ "tabs-tab-active-border-radius",
447
+ $border-radius
324
448
  );
325
- }
326
- }
327
- }
328
-
329
- &__content {
330
- position: relative;
331
- overflow: visible;
332
- display: flex;
333
- flex-direction: column;
334
- flex-grow: 1;
335
-
336
- &--transitioning {
337
- overflow: hidden;
338
- }
339
449
 
340
- &:not(:has(.o-tabs__panel:empty)) {
341
- padding: var(
342
- --#{$prefix}tabs-content-padding,
343
- $tabs-content-padding
344
- );
450
+ .o-tabs__tab {
451
+ border-bottom-color: transparent;
452
+ border-right-color: transparent;
453
+ border-left-color: h.useVar("tabs-tab-border-color");
454
+
455
+ &.o-tabs__tab--active {
456
+ border-left-color: transparent;
457
+ border-right-color: h.useVar("tabs-tab-border-color");
458
+ border-bottom-color: h.useVar("tabs-tab-border-color");
459
+ }
460
+ }
461
+ }
345
462
  }
346
463
  }
347
-
348
- &:not(:last-child) {
349
- margin-bottom: var(--#{$prefix}tabs-margin-bottom, $tabs-margin-bottom);
350
- }
351
464
  }