@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.
Files changed (18) hide show
  1. package/dist/oruga.css +77 -68
  2. package/dist/oruga.min.css +1 -1
  3. package/dist/scss/components/_button.scss +11 -10
  4. package/dist/scss/components/_checkbox.scss +5 -0
  5. package/dist/scss/components/_datepicker.scss +4 -6
  6. package/dist/scss/components/_dropdown.scss +1 -1
  7. package/dist/scss/components/_skeleton.scss +8 -8
  8. package/dist/scss/components/_slider.scss +1 -1
  9. package/dist/scss/components/_tabs.scss +54 -39
  10. package/dist/theme.js +2 -1
  11. package/package.json +21 -21
  12. package/src/assets/scss/components/_button.scss +11 -10
  13. package/src/assets/scss/components/_checkbox.scss +5 -0
  14. package/src/assets/scss/components/_datepicker.scss +4 -6
  15. package/src/assets/scss/components/_dropdown.scss +1 -1
  16. package/src/assets/scss/components/_skeleton.scss +8 -8
  17. package/src/assets/scss/components/_slider.scss +1 -1
  18. package/src/assets/scss/components/_tabs.scss +54 -39
package/dist/scss/components/_button.scss CHANGED
@@ -60,12 +60,13 @@ $button-outlined-background-color: transparent !default;
60
60
  height: var(--#{$prefix}button-height, $button-height);
61
61
 
62
62
  &__wrapper {
63
- @include side-flex-gap($button-margin-icon-to-text);
64
63
  display: inline-flex;
65
64
  align-items: center;
66
65
  justify-content: center;
67
66
  position: relative;
68
67
  width: 100%;
68
+
69
+ @include side-flex-gap($button-margin-icon-to-text);
69
70
  }
70
71
 
71
72
  &__label {
@@ -89,14 +90,14 @@ $button-outlined-background-color: transparent !default;
89
90
  pointer-events: none;
90
91
  }
91
92
 
92
- // size variants
93
+ /* size variants*/
93
94
  @each $name, $value in $sizes {
94
95
  &--#{$name} {
95
96
  font-size: var(--#{$prefix}button-font-size-#{$name}, $value);
96
97
  }
97
98
  }
98
99
 
99
- // color variants
100
+ /* color variants*/
100
101
  @each $name, $pair in $colors {
101
102
  $color: list.nth($pair, 1);
102
103
  $color-invert: list.nth($pair, 2);
@@ -109,8 +110,8 @@ $button-outlined-background-color: transparent !default;
109
110
  color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
110
111
 
111
112
  &:hover {
112
- // background-color: darken($color, 2.5%)
113
- // IE 11 needs polyfill
113
+ /* background-color: darken($color, 2.5%)*/
114
+ /* IE 11 needs polyfill*/
114
115
  filter: brightness(97.5%);
115
116
  }
116
117
  }
@@ -187,8 +188,8 @@ $button-outlined-background-color: transparent !default;
187
188
  color: var(--#{$prefix}button-background-color, $button-background-color);
188
189
 
189
190
  &:hover {
190
- // background-color: darken($color-invert, 5%)
191
- // IE 11 needs polyfill
191
+ /* background-color: darken($color-invert, 5%)*/
192
+ /* IE 11 needs polyfill*/
192
193
  filter: brightness(95%);
193
194
  }
194
195
 
@@ -208,15 +209,15 @@ $button-outlined-background-color: transparent !default;
208
209
 
209
210
  &:focus,
210
211
  &:hover {
211
- // background-color: darken($color-invert, 5%)
212
- // IE 11 needs polyfill
212
+ /* background-color: darken($color-invert, 5%)*/
213
+ /* IE 11 needs polyfill*/
213
214
  filter: brightness(95%);
214
215
  }
215
216
  }
216
217
  }
217
218
  }
218
219
 
219
- // focus effect
220
+ /* focus effect*/
220
221
  &:focus,
221
222
  &:focus-within {
222
223
  box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
package/dist/scss/components/_checkbox.scss CHANGED
@@ -132,6 +132,11 @@ $checkbox-line-height: 1.5 !default;
132
132
  @each $name, $value in $sizes {
133
133
  &--#{$name} {
134
134
  font-size: var(--#{$prefix}checkbox-font-size-#{$name}, $value);
135
+
136
+ .o-chk__input {
137
+ width: var(--#{$prefix}checkbox-font-size-#{$name}, $value);
138
+ height: var(--#{$prefix}checkbox-font-size-#{$name}, $value);
139
+ }
135
140
  }
136
141
  }
137
142
 
package/dist/scss/components/_datepicker.scss CHANGED
@@ -23,16 +23,14 @@ $datepicker-item-padding: 0.5rem 0.75rem !default;
23
23
  $datepicker-item-selected-color: var(--#{$prefix}primary-invert) !default;
24
24
  $datepicker-item-selected-background-color: var(--#{$prefix}primary) !default;
25
25
  $datepicker-item-selected-border-radius: 0 !default;
26
- $datepicker-item-selected-within-background-color: rgba(
27
- $datepicker-item-selected-background-color,
28
- 0.5
26
+ $datepicker-item-selected-within-background-color: rgb(
27
+ from $datepicker-item-selected-background-color r g b / 50%
29
28
  ) !default;
30
29
  $datepicker-item-hovered-background-color: var(--#{$prefix}grey) !default;
31
30
  $datepicker-item-hovered-color: var(--#{$prefix}grey-lighter) !default;
32
31
  $datepicker-item-hovered-background-color: #f5f5f5 !default;
33
- $datepicker-item-hovered-within-background-color: rgba(
34
- $datepicker-item-hovered-background-color,
35
- 0.5
32
+ $datepicker-item-hovered-within-background-color: rgb(
33
+ from $datepicker-item-hovered-background-color r g b / 50%
36
34
  ) !default;
37
35
  $datepicker-item-nearby-color: var(--#{$prefix}grey-light) !default;
38
36
  $datepicker-events-item-padding: 0.3rem 0.75rem 0.75rem !default;
package/dist/scss/components/_dropdown.scss CHANGED
@@ -141,7 +141,7 @@ $dropdown-mobile-zindex: 60 !default;
141
141
  right: 0;
142
142
  left: auto;
143
143
  top: calc(
144
- 100% + var(--#{$prefix}"dropdown-menu-spacer", $dropdown-menu-spacer)
144
+ 100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
145
145
  );
146
146
  bottom: auto;
147
147
  }
package/dist/scss/components/_skeleton.scss CHANGED
@@ -39,6 +39,14 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
39
39
  background: var(--#{$prefix}skeleton-background, $skeleton-background);
40
40
  margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
41
41
 
42
+ @include steps-size($base-font-size);
43
+
44
+ @each $name, $value in $sizes {
45
+ &--#{$name} {
46
+ @include steps-size($value, $name);
47
+ }
48
+ }
49
+
42
50
  &--rounded {
43
51
  border-radius: var(
44
52
  --#{$prefix}skeleton-border-radius,
@@ -59,14 +67,6 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
59
67
  &::after {
60
68
  content: "\00a0";
61
69
  }
62
-
63
- @include steps-size($base-font-size);
64
-
65
- @each $name, $value in $sizes {
66
- &--#{$name} {
67
- @include steps-size($value, $name);
68
- }
69
- }
70
70
  }
71
71
 
72
72
  &--centered {
package/dist/scss/components/_slider.scss CHANGED
@@ -131,7 +131,7 @@ $slider-track-shadow: 0px 0px 0px var(--#{$prefix}grey) !default;
131
131
  --#{$prefix}slider-fill-background,
132
132
  $slider-fill-background
133
133
  );
134
- border-radius: var(--#{$prefix}slider-track-radius $slider-track-radius);
134
+ border-radius: var(--#{$prefix}slider-track-radius, $slider-track-radius);
135
135
  border: var(--#{$prefix}slider-track-border, $slider-track-border);
136
136
  // Fix alignment in IE 11. Cancel out for others
137
137
  top: 50%;
package/dist/scss/components/_tabs.scss CHANGED
@@ -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
 
package/dist/theme.js CHANGED
@@ -1,4 +1,5 @@
1
- (function (factory) {
1
+
2
+ function (factory) {
2
3
  typeof define === 'function' && define.amd ? define(factory) :
3
4
  factory();
4
5
  })((function () { 'use strict';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oruga-ui/theme-oruga",
3
- "version": "0.4.0",
3
+ "version": "0.4.2",
4
4
  "description": "Default theme for Oruga",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -34,36 +34,36 @@
34
34
  "update": "ncu -u"
35
35
  },
36
36
  "devDependencies": {
37
- "@oruga-ui/examples": "^0.9.0-pre.1",
38
- "@oruga-ui/oruga-next": "^0.9.0-pre.1",
37
+ "@oruga-ui/examples": "^0.9.0-pre.2",
38
+ "@oruga-ui/oruga-next": "^0.9.0-pre.2",
39
39
  "@rollup/plugin-typescript": "11.1.6",
40
- "@vitejs/plugin-vue": "5.0.5",
40
+ "@vitejs/plugin-vue": "5.1.3",
41
41
  "@vue/eslint-config-prettier": "^9.0.0",
42
42
  "@vue/eslint-config-typescript": "^13.0.0",
43
43
  "@vue/tsconfig": "^0.5.1",
44
- "autoprefixer": "10.4.19",
44
+ "autoprefixer": "10.4.20",
45
45
  "clean-css-cli": "^5.6.3",
46
- "core-js": "3.37.1",
46
+ "core-js": "3.38.1",
47
47
  "eslint": "^8.57.0",
48
- "eslint-plugin-prettier": "^5.1.3",
49
- "eslint-plugin-vue": "^9.27.0",
50
- "npm-check-updates": "^16.14.20",
51
- "postcss": "8.4.39",
48
+ "eslint-plugin-prettier": "^5.2.1",
49
+ "eslint-plugin-vue": "^9.28.0",
50
+ "npm-check-updates": "^17.1.1",
51
+ "postcss": "8.4.45",
52
52
  "prettier": "^3.3.3",
53
53
  "rimraf": "6.0.1",
54
- "rollup": "^4.18.1",
54
+ "rollup": "^4.21.3",
55
55
  "rollup-plugin-copy": "3.5.0",
56
- "rollup-plugin-sass": "1.13.1",
57
- "sass": "1.77.8",
58
- "stylelint": "^16.7.0",
56
+ "rollup-plugin-sass": "1.13.2",
57
+ "sass": "1.78.0",
58
+ "stylelint": "^16.9.0",
59
59
  "stylelint-config-recommended": "^14.0.1",
60
60
  "stylelint-config-recommended-scss": "^14.1.0",
61
- "stylelint-prettier": "^5.0.1",
62
- "stylelint-scss": "^6.4.1",
63
- "typescript": "5.5.3",
64
- "vite": "^5.3.3",
65
- "vue": "^3.4.31",
66
- "vue-router": "4.4.0",
67
- "vue-tsc": "^2.0.26"
61
+ "stylelint-prettier": "^5.0.2",
62
+ "stylelint-scss": "^6.5.1",
63
+ "typescript": "5.6.2",
64
+ "vite": "^5.4.4",
65
+ "vue": "^3.4.34",
66
+ "vue-router": "4.4.4",
67
+ "vue-tsc": "^2.1.6"
68
68
  }
69
69
  }
package/src/assets/scss/components/_button.scss CHANGED
@@ -60,12 +60,13 @@ $button-outlined-background-color: transparent !default;
60
60
  height: var(--#{$prefix}button-height, $button-height);
61
61
 
62
62
  &__wrapper {
63
- @include side-flex-gap($button-margin-icon-to-text);
64
63
  display: inline-flex;
65
64
  align-items: center;
66
65
  justify-content: center;
67
66
  position: relative;
68
67
  width: 100%;
68
+
69
+ @include side-flex-gap($button-margin-icon-to-text);
69
70
  }
70
71
 
71
72
  &__label {
@@ -89,14 +90,14 @@ $button-outlined-background-color: transparent !default;
89
90
  pointer-events: none;
90
91
  }
91
92
 
92
- // size variants
93
+ /* size variants*/
93
94
  @each $name, $value in $sizes {
94
95
  &--#{$name} {
95
96
  font-size: var(--#{$prefix}button-font-size-#{$name}, $value);
96
97
  }
97
98
  }
98
99
 
99
- // color variants
100
+ /* color variants*/
100
101
  @each $name, $pair in $colors {
101
102
  $color: list.nth($pair, 1);
102
103
  $color-invert: list.nth($pair, 2);
@@ -109,8 +110,8 @@ $button-outlined-background-color: transparent !default;
109
110
  color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
110
111
 
111
112
  &:hover {
112
- // background-color: darken($color, 2.5%)
113
- // IE 11 needs polyfill
113
+ /* background-color: darken($color, 2.5%)*/
114
+ /* IE 11 needs polyfill*/
114
115
  filter: brightness(97.5%);
115
116
  }
116
117
  }
@@ -187,8 +188,8 @@ $button-outlined-background-color: transparent !default;
187
188
  color: var(--#{$prefix}button-background-color, $button-background-color);
188
189
 
189
190
  &:hover {
190
- // background-color: darken($color-invert, 5%)
191
- // IE 11 needs polyfill
191
+ /* background-color: darken($color-invert, 5%)*/
192
+ /* IE 11 needs polyfill*/
192
193
  filter: brightness(95%);
193
194
  }
194
195
 
@@ -208,15 +209,15 @@ $button-outlined-background-color: transparent !default;
208
209
 
209
210
  &:focus,
210
211
  &:hover {
211
- // background-color: darken($color-invert, 5%)
212
- // IE 11 needs polyfill
212
+ /* background-color: darken($color-invert, 5%)*/
213
+ /* IE 11 needs polyfill*/
213
214
  filter: brightness(95%);
214
215
  }
215
216
  }
216
217
  }
217
218
  }
218
219
 
219
- // focus effect
220
+ /* focus effect*/
220
221
  &:focus,
221
222
  &:focus-within {
222
223
  box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
package/src/assets/scss/components/_checkbox.scss CHANGED
@@ -132,6 +132,11 @@ $checkbox-line-height: 1.5 !default;
132
132
  @each $name, $value in $sizes {
133
133
  &--#{$name} {
134
134
  font-size: var(--#{$prefix}checkbox-font-size-#{$name}, $value);
135
+
136
+ .o-chk__input {
137
+ width: var(--#{$prefix}checkbox-font-size-#{$name}, $value);
138
+ height: var(--#{$prefix}checkbox-font-size-#{$name}, $value);
139
+ }
135
140
  }
136
141
  }
137
142
 
package/src/assets/scss/components/_datepicker.scss CHANGED
@@ -23,16 +23,14 @@ $datepicker-item-padding: 0.5rem 0.75rem !default;
23
23
  $datepicker-item-selected-color: var(--#{$prefix}primary-invert) !default;
24
24
  $datepicker-item-selected-background-color: var(--#{$prefix}primary) !default;
25
25
  $datepicker-item-selected-border-radius: 0 !default;
26
- $datepicker-item-selected-within-background-color: rgba(
27
- $datepicker-item-selected-background-color,
28
- 0.5
26
+ $datepicker-item-selected-within-background-color: rgb(
27
+ from $datepicker-item-selected-background-color r g b / 50%
29
28
  ) !default;
30
29
  $datepicker-item-hovered-background-color: var(--#{$prefix}grey) !default;
31
30
  $datepicker-item-hovered-color: var(--#{$prefix}grey-lighter) !default;
32
31
  $datepicker-item-hovered-background-color: #f5f5f5 !default;
33
- $datepicker-item-hovered-within-background-color: rgba(
34
- $datepicker-item-hovered-background-color,
35
- 0.5
32
+ $datepicker-item-hovered-within-background-color: rgb(
33
+ from $datepicker-item-hovered-background-color r g b / 50%
36
34
  ) !default;
37
35
  $datepicker-item-nearby-color: var(--#{$prefix}grey-light) !default;
38
36
  $datepicker-events-item-padding: 0.3rem 0.75rem 0.75rem !default;
package/src/assets/scss/components/_dropdown.scss CHANGED
@@ -141,7 +141,7 @@ $dropdown-mobile-zindex: 60 !default;
141
141
  right: 0;
142
142
  left: auto;
143
143
  top: calc(
144
- 100% + var(--#{$prefix}"dropdown-menu-spacer", $dropdown-menu-spacer)
144
+ 100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
145
145
  );
146
146
  bottom: auto;
147
147
  }
package/src/assets/scss/components/_skeleton.scss CHANGED
@@ -39,6 +39,14 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
39
39
  background: var(--#{$prefix}skeleton-background, $skeleton-background);
40
40
  margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
41
41
 
42
+ @include steps-size($base-font-size);
43
+
44
+ @each $name, $value in $sizes {
45
+ &--#{$name} {
46
+ @include steps-size($value, $name);
47
+ }
48
+ }
49
+
42
50
  &--rounded {
43
51
  border-radius: var(
44
52
  --#{$prefix}skeleton-border-radius,
@@ -59,14 +67,6 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
59
67
  &::after {
60
68
  content: "\00a0";
61
69
  }
62
-
63
- @include steps-size($base-font-size);
64
-
65
- @each $name, $value in $sizes {
66
- &--#{$name} {
67
- @include steps-size($value, $name);
68
- }
69
- }
70
70
  }
71
71
 
72
72
  &--centered {
package/src/assets/scss/components/_slider.scss CHANGED
@@ -131,7 +131,7 @@ $slider-track-shadow: 0px 0px 0px var(--#{$prefix}grey) !default;
131
131
  --#{$prefix}slider-fill-background,
132
132
  $slider-fill-background
133
133
  );
134
- border-radius: var(--#{$prefix}slider-track-radius $slider-track-radius);
134
+ border-radius: var(--#{$prefix}slider-track-radius, $slider-track-radius);
135
135
  border: var(--#{$prefix}slider-track-border, $slider-track-border);
136
136
  // Fix alignment in IE 11. Cancel out for others
137
137
  top: 50%;