@oruga-ui/theme-oruga 0.4.0 → 0.4.2

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.
@@ -28,38 +28,6 @@ $tabs-toggle-link-active-border-color: var(--#{$prefix}primary) !default;
28
28
  $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
29
29
  /* @docs */
30
30
 
31
- @mixin item {
32
- -moz-appearance: none;
33
- -webkit-appearance: none;
34
- width: 100%;
35
- margin: 0;
36
- border: 1px solid transparent;
37
- background-color: transparent;
38
- align-items: center;
39
- line-height: $tabs-link-line-height;
40
- display: flex;
41
- justify-content: center;
42
- margin-bottom: -1px;
43
- vertical-align: top;
44
- cursor: pointer;
45
- text-decoration: none;
46
- font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
47
- border-bottom-color: var(
48
- --#{$prefix}tabs-border-bottom-color,
49
- $tabs-border-bottom-color
50
- );
51
- border-bottom-style: var(
52
- --#{$prefix}tabs-border-bottom-style,
53
- $tabs-border-bottom-style
54
- );
55
- border-bottom-width: var(
56
- --#{$prefix}tabs-border-bottom-width,
57
- $tabs-border-bottom-width
58
- );
59
- color: var(--#{$prefix}tabs-link-color, $tabs-link-color);
60
- padding: var(--#{$prefix}tabs-link-padding, $tabs-link-padding);
61
- }
62
-
63
31
  .o-tabs {
64
32
  &--fullwidth {
65
33
  width: 100%;
@@ -87,6 +55,10 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
87
55
  border-bottom: none;
88
56
  }
89
57
 
58
+ .o-tabs__nav-item-default {
59
+ border-radius: 0;
60
+ }
61
+
90
62
  .o-tabs__nav-item-boxed {
91
63
  border-bottom-color: transparent;
92
64
  border-right-color: var(
@@ -139,6 +111,7 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
139
111
 
140
112
  &__nav {
141
113
  @include unselectable;
114
+
142
115
  margin: 0;
143
116
  padding: 0;
144
117
  align-items: center;
@@ -168,6 +141,36 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
168
141
  }
169
142
 
170
143
  &-item {
144
+ -moz-appearance: none;
145
+ -webkit-appearance: none;
146
+ width: 100%;
147
+ margin: 0;
148
+ border: 1px solid transparent;
149
+ background-color: transparent;
150
+ align-items: center;
151
+ line-height: $tabs-link-line-height;
152
+ display: flex;
153
+ justify-content: center;
154
+ margin-bottom: -1px;
155
+ vertical-align: top;
156
+ cursor: pointer;
157
+ text-decoration: none;
158
+ font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
159
+ border-bottom-color: var(
160
+ --#{$prefix}tabs-border-bottom-color,
161
+ $tabs-border-bottom-color
162
+ );
163
+ border-bottom-style: var(
164
+ --#{$prefix}tabs-border-bottom-style,
165
+ $tabs-border-bottom-style
166
+ );
167
+ border-bottom-width: var(
168
+ --#{$prefix}tabs-border-bottom-width,
169
+ $tabs-border-bottom-width
170
+ );
171
+ color: var(--#{$prefix}tabs-link-color, $tabs-link-color);
172
+ padding: var(--#{$prefix}tabs-link-padding, $tabs-link-padding);
173
+
171
174
  &-icon {
172
175
  margin-right: var(--#{$prefix}tabs-icon-margin, $tabs-icon-margin);
173
176
  }
@@ -181,8 +184,6 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
181
184
  }
182
185
 
183
186
  &-default {
184
- @include item;
185
-
186
187
  &--active {
187
188
  border-bottom-color: var(
188
189
  --#{$prefix}tabs-link-active-border-bottom-color,
@@ -216,8 +217,6 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
216
217
  }
217
218
 
218
219
  &-boxed {
219
- @include item;
220
- border-bottom-color: transparent;
221
220
  border-radius: var(
222
221
  --#{$prefix}tabs-border-bottom-color,
223
222
  #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0 0
@@ -260,8 +259,6 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
260
259
  }
261
260
 
262
261
  &-toggle {
263
- @include item;
264
- position: relative;
265
262
  border-color: var(
266
263
  --#{$prefix}tabs-toggle-link-border-color,
267
264
  $tabs-toggle-link-border-color
@@ -274,7 +271,6 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
274
271
  --#{$prefix}tabs-toggle-link-border-width,
275
272
  $tabs-toggle-link-border-width
276
273
  );
277
- margin-bottom: 0;
278
274
 
279
275
  &--active {
280
276
  background-color: var(
@@ -311,6 +307,25 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
311
307
  );
312
308
  }
313
309
  }
310
+
311
+ &-pills {
312
+ border-radius: var(
313
+ --#{$prefix}tabs-boxed-link-radius,
314
+ $tabs-boxed-link-radius
315
+ );
316
+ border-color: transparent;
317
+
318
+ &--active {
319
+ background-color: var(
320
+ --#{$prefix}tabs-toggle-link-active-background-color,
321
+ $tabs-toggle-link-active-background-color
322
+ );
323
+ color: var(
324
+ --#{$prefix}tabs-toggle-link-active-color,
325
+ $tabs-toggle-link-active-color
326
+ );
327
+ }
328
+ }
314
329
  }
315
330
  }
316
331