@oruga-ui/theme-oruga 0.5.1 → 0.7.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 (41) hide show
  1. package/README.md +5 -4
  2. package/dist/oruga.css +2 -2
  3. package/dist/scss/components/_autocomplete.scss +16 -16
  4. package/dist/scss/components/_breadcrumb.scss +189 -0
  5. package/dist/scss/components/_button.scss +180 -166
  6. package/dist/scss/components/_carousel.scss +199 -177
  7. package/dist/scss/components/_checkbox.scss +130 -122
  8. package/dist/scss/components/_collapse.scss +11 -9
  9. package/dist/scss/components/_datepicker.scss +409 -417
  10. package/dist/scss/components/_datetimepicker.scss +8 -8
  11. package/dist/scss/components/_dropdown.scss +225 -207
  12. package/dist/scss/components/_field.scss +107 -106
  13. package/dist/scss/components/_icon.scss +44 -40
  14. package/dist/scss/components/_input.scss +127 -112
  15. package/dist/scss/components/_loading.scss +27 -24
  16. package/dist/scss/components/_menu.scss +102 -65
  17. package/dist/scss/components/_modal.scss +67 -67
  18. package/dist/scss/components/_notification.scss +146 -134
  19. package/dist/scss/components/_pagination.scss +227 -198
  20. package/dist/scss/components/_radio.scss +95 -74
  21. package/dist/scss/components/_select.scss +143 -120
  22. package/dist/scss/components/_sidebar.scss +120 -104
  23. package/dist/scss/components/_skeleton.scss +55 -55
  24. package/dist/scss/components/_slider.scss +166 -151
  25. package/dist/scss/components/_steps.scss +300 -287
  26. package/dist/scss/components/_switch.scss +115 -128
  27. package/dist/scss/components/_table.scss +364 -331
  28. package/dist/scss/components/_tabs.scss +295 -280
  29. package/dist/scss/components/_tag.scss +84 -0
  30. package/dist/scss/components/_taginput.scss +55 -97
  31. package/dist/scss/components/_timepicker.scss +74 -68
  32. package/dist/scss/components/_tooltip.scss +522 -424
  33. package/dist/scss/components/_upload.scss +51 -48
  34. package/dist/scss/oruga.scss +2 -1
  35. package/dist/scss/utils/_animations.scss +97 -97
  36. package/dist/scss/utils/_base.scss +33 -16
  37. package/dist/scss/utils/_helpers.scss +65 -65
  38. package/dist/scss/utils/_root.scss +37 -44
  39. package/dist/scss/utils/_variables.scss +45 -44
  40. package/dist/theme.js +1 -1
  41. package/package.json +29 -26
package/dist/scss/components/_tabs.scss CHANGED
@@ -1,336 +1,351 @@
1
1
  /* @docs */
2
2
  $tabs-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
3
3
  $tabs-font-size: var(--#{$prefix}base-font-size) !default;
4
- $tabs-icon-margin: 0.5em !default;
4
+ $tabs-icon-margin: 0 0.5em 0 0 !default;
5
5
  $tabs-content-padding: 1rem !default;
6
6
  $tabs-margin-bottom: 1.5rem !default;
7
7
  $tabs-border-bottom-color: var(--#{$prefix}grey-lighter) !default;
8
8
  $tabs-border-bottom-style: solid !default;
9
9
  $tabs-border-bottom-width: 1px !default;
10
- $tabs-link-color: hsl(0, 0%, 29%) !default;
11
- $tabs-link-active-border-bottom-color: var(--#{$prefix}primary) !default;
12
- $tabs-link-active-color: var(--#{$prefix}primary) !default;
13
- $tabs-link-line-height: var(--#{$prefix}base-line-height) !default;
14
- $tabs-link-padding: 0.5em 1em !default;
15
- $tabs-boxed-link-radius: var(--#{$prefix}base-border-radius) !default;
16
- $tabs-boxed-link-hover-background-color: hsl(0, 0%, 96%) !default;
17
- $tabs-boxed-link-hover-border-bottom-color: hsl(0, 0%, 86%) !default;
18
- $tabs-boxed-link-active-background-color: hsl(0, 0%, 100%) !default;
19
- $tabs-boxed-link-active-border-color: hsl(0, 0%, 86%) !default;
20
- $tabs-boxed-link-active-border-bottom-color: transparent !default;
21
- $tabs-toggle-link-border-color: hsl(0, 0%, 86%) !default;
22
- $tabs-toggle-link-border-style: solid !default;
23
- $tabs-toggle-link-border-width: 1px !default;
24
- $tabs-toggle-link-hover-background-color: hsl(0, 0%, 96%) !default;
25
- $tabs-toggle-link-hover-border-color: hsl(0, 0%, 71%) !default;
26
- $tabs-toggle-link-active-background-color: var(--#{$prefix}primary) !default;
27
- $tabs-toggle-link-active-border-color: var(--#{$prefix}primary) !default;
28
- $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !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;
29
28
  /* @docs */
30
29
 
31
30
  .o-tabs {
32
- &--expanded {
33
- width: 100%;
34
-
35
- .o-tabs__tab--default,
36
- .o-tabs__tab--boxed,
37
- .o-tabs__tab--toggle {
38
- height: 100%;
31
+ // size variants
32
+ @each $name, $value in $sizes {
33
+ &--#{$name} .o-tabs__tab {
34
+ font-size: var(--#{$prefix}tabs-font-size-#{$name}, $value);
35
+ }
39
36
  }
40
37
 
41
- .o-tabs__nav-item {
42
- flex-grow: 1;
43
- flex-shrink: 0;
38
+ &__list {
39
+ @include unselectable;
40
+
41
+ margin: 0;
42
+ padding: 0;
43
+ display: flex;
44
+ align-items: center;
45
+ flex-grow: 1;
46
+ 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
+ );
44
52
  }
45
- }
46
-
47
- &__nav {
48
- @include unselectable;
49
-
50
- margin: 0;
51
- padding: 0;
52
- align-items: center;
53
- display: flex;
54
- flex-grow: 1;
55
- flex-shrink: 0;
56
- justify-content: flex-start;
57
- // padding bottom to keep showing the border-bottom
58
- padding-bottom: var(
59
- --#{$prefix}tabs-border-bottom-width,
60
- $tabs-border-bottom-width
61
- );
62
- font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
63
53
 
64
- @each $name, $value in $sizes {
65
- &--#{$name} {
66
- font-size: var(--#{$prefix}tabs-font-size-#{$name}, $value);
67
- }
54
+ &--multiline &__list {
55
+ flex-wrap: wrap;
68
56
  }
69
57
 
70
- &--centered {
71
- justify-content: center;
58
+ &--left .o-tabs__list {
59
+ justify-content: flex-start;
72
60
  }
73
61
 
74
- &--right {
75
- justify-content: flex-end;
62
+ &--centered .o-tabs__list {
63
+ justify-content: center;
76
64
  }
77
- }
78
-
79
- &__tab {
80
- -moz-appearance: none;
81
- -webkit-appearance: none;
82
- width: 100%;
83
- margin: 0;
84
- border: 1px solid transparent;
85
- background-color: transparent;
86
- align-items: center;
87
- line-height: $tabs-link-line-height;
88
- display: flex;
89
- justify-content: center;
90
- margin-bottom: -1px;
91
- vertical-align: top;
92
- cursor: pointer;
93
- text-decoration: none;
94
- font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
95
- border-bottom-color: var(
96
- --#{$prefix}tabs-border-bottom-color,
97
- $tabs-border-bottom-color
98
- );
99
- border-bottom-style: var(
100
- --#{$prefix}tabs-border-bottom-style,
101
- $tabs-border-bottom-style
102
- );
103
- border-bottom-width: var(
104
- --#{$prefix}tabs-border-bottom-width,
105
- $tabs-border-bottom-width
106
- );
107
- color: var(--#{$prefix}tabs-link-color, $tabs-link-color);
108
- padding: var(--#{$prefix}tabs-link-padding, $tabs-link-padding);
109
-
110
- &-icon {
111
- margin-right: var(--#{$prefix}tabs-icon-margin, $tabs-icon-margin);
65
+
66
+ &--right .o-tabs__list {
67
+ justify-content: flex-end;
112
68
  }
113
69
 
114
- // focus effect
115
- &:focus,
116
- &:focus-within {
117
- box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
118
- outline: 0;
119
- border-radius: #{$tabs-boxed-link-radius};
70
+ &__tab {
71
+ -moz-appearance: none;
72
+ -webkit-appearance: none;
73
+ background-color: transparent;
74
+ margin-bottom: -1px;
75
+ cursor: pointer;
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ 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
+
85
+ &-icon {
86
+ margin: var(--#{$prefix}tabs-icon-margin, $tabs-icon-margin);
87
+ }
88
+
89
+ // focus effect
90
+ &:focus,
91
+ &:focus-visible,
92
+ &:focus-within {
93
+ box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
94
+ outline: 0;
95
+ border-radius: #{$tabs-boxed-tab-radius};
96
+ }
97
+
98
+ &--disabled {
99
+ pointer-events: none;
100
+ cursor: not-allowed;
101
+ opacity: var(
102
+ --#{$prefix}tabs-disabled-opacity,
103
+ $tabs-disabled-opacity
104
+ );
105
+ }
120
106
  }
121
107
 
122
- &--default {
123
- &.o-tabs__tab--active {
108
+ &--default .o-tabs__tab {
124
109
  border-bottom-color: var(
125
- --#{$prefix}tabs-link-active-border-bottom-color,
126
- $tabs-link-active-border-bottom-color
110
+ --#{$prefix}tabs-border-bottom-color,
111
+ $tabs-border-bottom-color
127
112
  );
128
- color: var(--#{$prefix}tabs-link-active-color, $tabs-link-active-color);
129
- }
130
-
131
- &.o-tabs__tab--disabled {
132
- pointer-events: none;
133
- cursor: not-allowed;
134
- opacity: var(--#{$prefix}tabs-disabled-opacity, $tabs-disabled-opacity);
135
- }
136
-
137
- &:hover:not(.o-tabs__tab--active) {
138
- background-color: var(
139
- --#{$prefix}tabs-link-hover-background-color,
140
- $tabs-boxed-link-hover-background-color
113
+ border-bottom-style: var(
114
+ --#{$prefix}tabs-border-bottom-style,
115
+ $tabs-border-bottom-style
141
116
  );
142
- border-bottom-color: var(
143
- --#{$prefix}tabs-link-hover-border-bottom-color,
144
- $tabs-boxed-link-hover-border-bottom-color
117
+ border-bottom-width: var(
118
+ --#{$prefix}tabs-border-bottom-width,
119
+ $tabs-border-bottom-width
145
120
  );
146
- }
121
+
122
+ &--active {
123
+ border-bottom-color: var(
124
+ --#{$prefix}tabs-tab-active-border-bottom-color,
125
+ $tabs-tab-active-border-bottom-color
126
+ );
127
+ color: var(
128
+ --#{$prefix}tabs-tab-active-color,
129
+ $tabs-tab-active-color
130
+ );
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
137
+ );
138
+ border-bottom-color: var(
139
+ --#{$prefix}tabs-tab-hover-border-bottom-color,
140
+ $tabs-boxed-tab-hover-border-bottom-color
141
+ );
142
+ }
147
143
  }
148
144
 
149
- &--boxed {
150
- border-radius: var(
151
- --#{$prefix}tabs-border-bottom-color,
152
- #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0 0
153
- );
154
-
155
- &.o-tabs__tab--active {
156
- color: var(--#{$prefix}tabs-link-active-color, $tabs-link-active-color);
157
- background-color: var(
158
- --#{$prefix}tabs-boxed-link-active-background-color,
159
- $tabs-boxed-link-active-background-color
160
- );
161
- border-color: var(
162
- --#{$prefix}tabs-boxed-link-active-border-color,
163
- $tabs-boxed-link-active-border-color
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
164
149
  );
165
150
  border-bottom-color: var(
166
- --#{$prefix}tabs-boxed-link-active-border-bottom-color,
167
- $tabs-boxed-link-active-border-bottom-color
151
+ --#{$prefix}tabs-border-bottom-color,
152
+ $tabs-border-bottom-color
168
153
  );
169
- }
170
-
171
- &.o-tabs__tab--disabled {
172
- pointer-events: none;
173
- cursor: not-allowed;
174
- opacity: var(--#{$prefix}tabs-disabled-opacity, $tabs-disabled-opacity);
175
- }
176
-
177
- &:hover:not(.o-tabs__tab--active) {
178
- background-color: var(
179
- --#{$prefix}tabs-boxed-link-hover-background-color,
180
- $tabs-boxed-link-hover-background-color
154
+ border-bottom-style: var(
155
+ --#{$prefix}tabs-border-bottom-style,
156
+ $tabs-border-bottom-style
181
157
  );
182
- }
158
+ border-bottom-width: var(
159
+ --#{$prefix}tabs-border-bottom-width,
160
+ $tabs-border-bottom-width
161
+ );
162
+
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
+ );
180
+ }
181
+
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
+ );
187
+ }
183
188
  }
184
189
 
185
- &--toggle {
186
- border-color: var(
187
- --#{$prefix}tabs-toggle-link-border-color,
188
- $tabs-toggle-link-border-color
189
- );
190
- border-style: var(
191
- --#{$prefix}tabs-toggle-link-border-style,
192
- $tabs-toggle-link-border-style
193
- );
194
- border-width: var(
195
- --#{$prefix}tabs-toggle-link-border-width,
196
- $tabs-toggle-link-border-width
197
- );
198
-
199
- &.o-tabs__tab--active {
200
- background-color: var(
201
- --#{$prefix}tabs-toggle-link-active-background-color,
202
- $tabs-toggle-link-active-background-color
203
- );
190
+ &--toggle .o-tabs__tab {
204
191
  border-color: var(
205
- --#{$prefix}tabs-toggle-link-active-border-color,
206
- $tabs-toggle-link-active-border-color
192
+ --#{$prefix}tabs-toggle-tab-border-color,
193
+ $tabs-toggle-tab-border-color
207
194
  );
208
- color: var(
209
- --#{$prefix}tabs-toggle-link-active-color,
210
- $tabs-toggle-link-active-color
195
+ border-style: var(
196
+ --#{$prefix}tabs-toggle-tab-border-style,
197
+ $tabs-toggle-tab-border-style
211
198
  );
212
- }
213
-
214
- &.o-tabs__tab--disabled {
215
- pointer-events: none;
216
- cursor: not-allowed;
217
- opacity: var(--#{$prefix}tabs-disabled-opacity, $tabs-disabled-opacity);
218
- }
219
-
220
- &:hover:not(.o-tabs_tab--active) {
221
- background-color: var(
222
- --#{$prefix}tabs-toggle-link-hover-background-color,
223
- $tabs-toggle-link-hover-background-color
199
+ border-width: var(
200
+ --#{$prefix}tabs-toggle-tab-border-width,
201
+ $tabs-toggle-tab-border-width
224
202
  );
225
- border-color: var(
226
- --#{$prefix}tabs-toggle-link-hover-border-color,
227
- $tabs-toggle-link-hover-border-color
228
- );
229
- }
203
+
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
+ }
218
+
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
+ );
229
+ }
230
230
  }
231
231
 
232
- &--pills {
233
- border-radius: var(
234
- --#{$prefix}tabs-boxed-link-radius,
235
- $tabs-boxed-link-radius
236
- );
237
- border-color: transparent;
238
-
239
- &.o-tabs__tab--active {
240
- background-color: var(
241
- --#{$prefix}tabs-toggle-link-active-background-color,
242
- $tabs-toggle-link-active-background-color
243
- );
244
- color: var(
245
- --#{$prefix}tabs-toggle-link-active-color,
246
- $tabs-toggle-link-active-color
232
+ &--pills .o-tabs__tab {
233
+ border-radius: var(
234
+ --#{$prefix}tabs-boxed-tab-radius,
235
+ $tabs-boxed-tab-radius
247
236
  );
248
- }
237
+ border-color: transparent;
238
+
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
+ );
248
+ }
249
+
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
+ );
256
+ }
249
257
  }
250
- }
251
258
 
252
- &--vertical {
253
- display: flex;
254
- flex-direction: row;
259
+ &--expanded {
260
+ width: 100%;
255
261
 
256
- .o-tabs__nav {
257
- flex-direction: column;
258
- align-items: stretch;
259
- flex-grow: 0;
260
- border-bottom: none;
262
+ .o-tabs__tab {
263
+ flex-grow: 1;
264
+ flex-shrink: 0;
265
+ }
261
266
  }
262
267
 
263
- .o-tabs__tab---default {
264
- border-radius: 0;
268
+ &--vertical {
269
+ display: flex;
270
+ flex-direction: row;
271
+
272
+ .o-tabs__list {
273
+ flex-direction: column;
274
+ align-items: stretch;
275
+ flex-grow: 0;
276
+ border-bottom: none;
277
+ }
278
+
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
+ );
289
+
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
295
+ );
296
+ }
297
+ }
265
298
  }
266
299
 
267
- .o-tabs__tab--boxed {
268
- border-bottom-color: transparent;
269
- border-right-color: var(
270
- --#{$prefix}tabs-border-bottom-color,
271
- $tabs-border-bottom-color
272
- );
273
- border-radius: var(
274
- --#{$prefix}tabs-border-bottom-color,
275
- #{$tabs-boxed-link-radius} 0 0 #{$tabs-boxed-link-radius}
276
- );
277
-
278
- &.o-tabs__tab--active {
279
- border-right-color: transparent;
280
- border-bottom-color: var(
281
- --#{$prefix}tabs-border-bottom-color,
282
- $tabs-border-bottom-color
283
- );
284
- }
285
- }
286
- }
287
-
288
- &--right {
289
- flex-direction: row-reverse;
290
-
291
- .o-tabs__tab--boxed {
292
- border-bottom-color: transparent;
293
- border-right-color: transparent;
294
- border-left-color: var(
295
- --#{$prefix}tabs-border-bottom-color,
296
- $tabs-border-bottom-color
297
- );
298
- border-radius: var(
299
- --#{$prefix}tabs-border-bottom-color,
300
- 0 #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0
301
- );
302
-
303
- &.o-tabs__tab--active {
304
- border-left-color: transparent;
305
- border-right-color: var(
306
- --#{$prefix}tabs-border-bottom-color,
307
- $tabs-border-bottom-color
308
- );
309
- border-bottom-color: var(
310
- --#{$prefix}tabs-border-bottom-color,
311
- $tabs-border-bottom-color
312
- );
313
- }
300
+ &--right {
301
+ flex-direction: row-reverse;
302
+
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
+ );
314
+
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
320
+ );
321
+ border-bottom-color: var(
322
+ --#{$prefix}tabs-border-bottom-color,
323
+ $tabs-border-bottom-color
324
+ );
325
+ }
326
+ }
314
327
  }
315
- }
316
-
317
- &__content {
318
- position: relative;
319
- overflow: visible;
320
- display: flex;
321
- flex-direction: column;
322
- flex-grow: 1;
323
328
 
324
- &--transitioning {
325
- overflow: hidden;
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
+
340
+ &:not(:has(.o-tabs__panel:empty)) {
341
+ padding: var(
342
+ --#{$prefix}tabs-content-padding,
343
+ $tabs-content-padding
344
+ );
345
+ }
326
346
  }
327
347
 
328
- &:not(:has(.o-tabs__panel:empty)) {
329
- padding: var(--#{$prefix}tabs-content-padding, $tabs-content-padding);
348
+ &:not(:last-child) {
349
+ margin-bottom: var(--#{$prefix}tabs-margin-bottom, $tabs-margin-bottom);
330
350
  }
331
- }
332
-
333
- &:not(:last-child) {
334
- margin-bottom: var(--#{$prefix}tabs-margin-bottom, $tabs-margin-bottom);
335
- }
336
351
  }