claritas-web-framework 8.3.0 → 8.3.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.
- package/dist/index.html +1 -1
- package/index.html +1 -1
- package/package.json +6 -6
- package/sass/_functions.scss +1 -4
- package/sass/_helpers.scss +1 -0
- package/sass/_reboot.scss +1 -4
- package/sass/_root.scss +0 -1
- package/sass/helpers/_container.scss +0 -1
- package/sass/helpers/_grid.scss +0 -4
- package/sass/helpers/_rfs.scss +303 -0
- package/sass/mixins/_breakpoints.scss +0 -1
- package/sass/mixins/_button.scss +0 -2
- package/sass/mixins/_colors.scss +0 -2
- package/sass/mixins/_container.scss +0 -1
- package/sass/mixins/_gradient.scss +0 -1
- package/sass/mixins/_grid.scss +0 -4
- package/sass/mixins/_list.scss +0 -1
- package/sass/modules/_alert.scss +0 -1
- package/sass/modules/_breadcrumbs.scss +0 -2
- package/sass/modules/_button.scss +1 -3
- package/sass/modules/_card.scss +0 -2
- package/sass/modules/_close.scss +0 -1
- package/sass/modules/_details.scss +0 -1
- package/sass/modules/_dialog.scss +0 -2
- package/sass/modules/_dropdown.scss +0 -1
- package/sass/modules/_form.scss +1 -5
- package/sass/modules/_list.scss +2 -14
- package/sass/modules/_modal.scss +0 -2
- package/sass/modules/_nav.scss +0 -4
- package/sass/modules/_pill.scss +1 -5
- package/sass/modules/_tabs.scss +0 -1
- package/sass/modules/_tag.scss +1 -6
- package/sass/modules/_tile.scss +0 -2
- package/sass/modules/_tooltip.scss +0 -1
- package/sass/modules/form/_checkbox.scss +0 -2
- package/sass/modules/form/_file.scss +0 -2
- package/sass/modules/form/_output.scss +0 -1
- package/sass/modules/form/_progress.scss +0 -1
- package/sass/modules/form/_radio.scss +0 -3
- package/sass/modules/form/_range.scss +0 -21
- package/sass/modules/form/_select.scss +0 -1
- package/sass/modules/form/_switch.scss +0 -2
- package/sass/modules/form/_text.scss +0 -1
- package/sass/modules/form/_toggle.scss +0 -2
- package/sass/utilities/_align.scss +0 -2
- package/sass/utilities/_border.scss +0 -2
- package/sass/utilities/_colors.scss +0 -1
- package/sass/utilities/_display.scss +0 -2
- package/sass/utilities/_flex.scss +0 -2
- package/sass/utilities/_float.scss +0 -2
- package/sass/utilities/_order.scss +0 -2
- package/sass/utilities/_overflow.scss +0 -2
- package/sass/utilities/_pointerEvents.scss +0 -2
- package/sass/utilities/_position.scss +0 -3
- package/sass/utilities/_size.scss +0 -3
- package/sass/utilities/_spacing.scss +0 -2
- package/sass/utilities/_typography.scss +0 -3
- package/sass/utilities/_visibility.scss +0 -2
- package/sass/utilities/_zIndex.scss +0 -2
package/dist/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body><div class="container"><div class="grid"><div class="col--tablet-4"><div class="card"><div class="card--body">Card</div></div></div><div class="col--8"><div class="card"><div class="card--body"><button type="button" class="button button--
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body><div class="container"><div class="grid"><div class="col--tablet-4"><div class="card"><div class="card--body">Card</div></div></div><div class="col--8"><div class="card"><div class="card--body"><button type="button" class="button button--danger">Click me</button></div></div></div></div></div></body></html>
|
package/index.html
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "claritas-web-framework",
|
|
3
|
-
"version": "8.3.
|
|
3
|
+
"version": "8.3.1",
|
|
4
4
|
"description": "The CSS framework built for Claritas front end.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -17,17 +17,17 @@
|
|
|
17
17
|
"devDependencies": {
|
|
18
18
|
"css-loader": "^7.1.2",
|
|
19
19
|
"find-unused-sass-variables": "^6.0.0",
|
|
20
|
-
"html-webpack-plugin": "^5.6.
|
|
21
|
-
"mini-css-extract-plugin": "^2.9.
|
|
20
|
+
"html-webpack-plugin": "^5.6.3",
|
|
21
|
+
"mini-css-extract-plugin": "^2.9.2",
|
|
22
22
|
"prettier": "^3.3.3",
|
|
23
|
-
"sass-loader": "^16.0.
|
|
24
|
-
"webpack": "^5.
|
|
23
|
+
"sass-loader": "^16.0.3",
|
|
24
|
+
"webpack": "^5.96.1",
|
|
25
25
|
"webpack-cli": "^5.1.4",
|
|
26
26
|
"webpack-dev-server": "^5.1.0"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"modern-normalize": "^3.0.1",
|
|
30
30
|
"rfs": "^10.0.0",
|
|
31
|
-
"sass": "^1.
|
|
31
|
+
"sass": "^1.81.0"
|
|
32
32
|
}
|
|
33
33
|
}
|
package/sass/_functions.scss
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
@use "sass:color";
|
|
2
|
-
|
|
3
2
|
@use "sass:math";
|
|
4
|
-
|
|
5
3
|
@use "sass:string";
|
|
6
|
-
|
|
7
4
|
@use "./variables" as *;
|
|
8
5
|
|
|
9
6
|
// Functions
|
|
@@ -37,7 +34,7 @@
|
|
|
37
34
|
// Do not escape the url brackets
|
|
38
35
|
|
|
39
36
|
@if string.index($string, "url(") == 1 {
|
|
40
|
-
$string: url("#{str-replace(
|
|
37
|
+
$string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
|
|
41
38
|
} @else {
|
|
42
39
|
$string: str-replace($string, $char, $encoded);
|
|
43
40
|
}
|
package/sass/_helpers.scss
CHANGED
package/sass/_reboot.scss
CHANGED
package/sass/_root.scss
CHANGED
package/sass/helpers/_grid.scss
CHANGED
|
@@ -0,0 +1,303 @@
|
|
|
1
|
+
@use "sass:math";
|
|
2
|
+
@use "sass:meta";
|
|
3
|
+
@use "sass:string";
|
|
4
|
+
|
|
5
|
+
// stylelint-disable property-blacklist, scss/dollar-variable-default
|
|
6
|
+
|
|
7
|
+
// SCSS RFS mixin
|
|
8
|
+
//
|
|
9
|
+
// Automated responsive values for font sizes, paddings, margins and much more
|
|
10
|
+
//
|
|
11
|
+
// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
|
|
12
|
+
|
|
13
|
+
// Configuration
|
|
14
|
+
|
|
15
|
+
// Base value
|
|
16
|
+
$rfs-base-value: 1.25rem !default;
|
|
17
|
+
$rfs-unit: rem !default;
|
|
18
|
+
|
|
19
|
+
@if $rfs-unit != rem and $rfs-unit != px {
|
|
20
|
+
@error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.";
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Breakpoint at where values start decreasing if screen width is smaller
|
|
24
|
+
$rfs-breakpoint: 1200px !default;
|
|
25
|
+
$rfs-breakpoint-unit: px !default;
|
|
26
|
+
|
|
27
|
+
@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
|
|
28
|
+
@error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// Resize values based on screen height and width
|
|
32
|
+
$rfs-two-dimensional: false !default;
|
|
33
|
+
|
|
34
|
+
// Factor of decrease
|
|
35
|
+
$rfs-factor: 10 !default;
|
|
36
|
+
|
|
37
|
+
@if meta.type-of($rfs-factor) != number or $rfs-factor <= 1 {
|
|
38
|
+
@error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Mode. Possibilities: "min-media-query", "max-media-query"
|
|
42
|
+
$rfs-mode: min-media-query !default;
|
|
43
|
+
|
|
44
|
+
// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
|
|
45
|
+
$rfs-class: false !default;
|
|
46
|
+
|
|
47
|
+
// 1 rem = $rfs-rem-value px
|
|
48
|
+
$rfs-rem-value: 16 !default;
|
|
49
|
+
|
|
50
|
+
// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
|
|
51
|
+
$rfs-safari-iframe-resize-bug-fix: false !default;
|
|
52
|
+
|
|
53
|
+
// Disable RFS by setting $enable-rfs to false
|
|
54
|
+
$enable-rfs: true !default;
|
|
55
|
+
|
|
56
|
+
// Cache $rfs-base-value unit
|
|
57
|
+
$rfs-base-value-unit: math.unit($rfs-base-value);
|
|
58
|
+
|
|
59
|
+
// Remove px-unit from $rfs-base-value for calculations
|
|
60
|
+
@if $rfs-base-value-unit == px {
|
|
61
|
+
$rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + 1);
|
|
62
|
+
} @else if $rfs-base-value-unit == rem {
|
|
63
|
+
$rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + math.div(1, $rfs-rem-value));
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// Cache $rfs-breakpoint unit to prevent multiple calls
|
|
67
|
+
$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
|
|
68
|
+
|
|
69
|
+
// Remove unit from $rfs-breakpoint for calculations
|
|
70
|
+
@if $rfs-breakpoint-unit-cache == px {
|
|
71
|
+
$rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
|
|
72
|
+
} @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
|
|
73
|
+
$rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + math.div(1, $rfs-rem-value));
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// Calculate the media query value
|
|
77
|
+
$rfs-mq-value: if(
|
|
78
|
+
$rfs-breakpoint-unit == px,
|
|
79
|
+
#{$rfs-breakpoint}px,
|
|
80
|
+
#{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}
|
|
81
|
+
);
|
|
82
|
+
$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
|
|
83
|
+
$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
|
|
84
|
+
|
|
85
|
+
// Internal mixin used to determine which media query needs to be used
|
|
86
|
+
@mixin _rfs-media-query {
|
|
87
|
+
@if $rfs-two-dimensional {
|
|
88
|
+
@if $rfs-mode == max-media-query {
|
|
89
|
+
@media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
|
|
90
|
+
@content;
|
|
91
|
+
}
|
|
92
|
+
} @else {
|
|
93
|
+
@media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
|
|
94
|
+
@content;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
} @else {
|
|
98
|
+
@media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
|
|
99
|
+
@content;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Internal mixin that adds disable classes to the selector if needed.
|
|
105
|
+
@mixin _rfs-rule {
|
|
106
|
+
@if $rfs-class == disable and $rfs-mode == max-media-query {
|
|
107
|
+
// Adding an extra class increases specificity, which prevents the media query to override the property
|
|
108
|
+
&,
|
|
109
|
+
.disable-rfs &,
|
|
110
|
+
&.disable-rfs {
|
|
111
|
+
@content;
|
|
112
|
+
}
|
|
113
|
+
} @else if $rfs-class == enable and $rfs-mode == min-media-query {
|
|
114
|
+
.enable-rfs &,
|
|
115
|
+
&.enable-rfs {
|
|
116
|
+
@content;
|
|
117
|
+
}
|
|
118
|
+
} @else {
|
|
119
|
+
@content;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Internal mixin that adds enable classes to the selector if needed.
|
|
124
|
+
@mixin _rfs-media-query-rule {
|
|
125
|
+
@if $rfs-class == enable {
|
|
126
|
+
@if $rfs-mode == min-media-query {
|
|
127
|
+
@content;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
@include _rfs-media-query {
|
|
131
|
+
.enable-rfs &,
|
|
132
|
+
&.enable-rfs {
|
|
133
|
+
@content;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
} @else {
|
|
137
|
+
@if $rfs-class == disable and $rfs-mode == min-media-query {
|
|
138
|
+
.disable-rfs &,
|
|
139
|
+
&.disable-rfs {
|
|
140
|
+
@content;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
@include _rfs-media-query {
|
|
144
|
+
@content;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
// Helper function to get the formatted non-responsive value
|
|
150
|
+
@function rfs-value($values) {
|
|
151
|
+
// Convert to list
|
|
152
|
+
$values: if(meta.type-of($values) != list, ($values), $values);
|
|
153
|
+
|
|
154
|
+
$val: "";
|
|
155
|
+
|
|
156
|
+
// Loop over each value and calculate value
|
|
157
|
+
@each $value in $values {
|
|
158
|
+
@if $value == 0 {
|
|
159
|
+
$val: $val + " 0";
|
|
160
|
+
} @else {
|
|
161
|
+
// Cache $value unit
|
|
162
|
+
$unit: if(meta.type-of($value) == "number", math.unit($value), false);
|
|
163
|
+
|
|
164
|
+
@if $unit == px {
|
|
165
|
+
// Convert to rem if needed
|
|
166
|
+
$val: $val + " " + if($rfs-unit == rem, #{math.div($value, $value * 0 + $rfs-rem-value)}rem, $value);
|
|
167
|
+
} @else if $unit == rem {
|
|
168
|
+
// Convert to px if needed
|
|
169
|
+
$val: $val + " " + if($rfs-unit == px, #{math.div($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
|
|
170
|
+
} @else {
|
|
171
|
+
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
|
|
172
|
+
$val: $val + " " + $value;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
// Remove first space
|
|
178
|
+
@return string.unquote(string.slice($val, 2));
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
// Helper function to get the responsive value calculated by RFS
|
|
182
|
+
@function rfs-fluid-value($values) {
|
|
183
|
+
// Convert to list
|
|
184
|
+
$values: if(meta.type-of($values) != list, ($values), $values);
|
|
185
|
+
|
|
186
|
+
$val: "";
|
|
187
|
+
|
|
188
|
+
// Loop over each value and calculate value
|
|
189
|
+
@each $value in $values {
|
|
190
|
+
@if $value == 0 {
|
|
191
|
+
$val: $val + " 0";
|
|
192
|
+
} @else {
|
|
193
|
+
// Cache $value unit
|
|
194
|
+
$unit: if(meta.type-of($value) == "number", math.unit($value), false);
|
|
195
|
+
|
|
196
|
+
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
|
|
197
|
+
@if not $unit or $unit != px and $unit != rem {
|
|
198
|
+
$val: $val + " " + $value;
|
|
199
|
+
} @else {
|
|
200
|
+
// Remove unit from $value for calculations
|
|
201
|
+
$value: math.div($value, $value * 0 + if($unit == px, 1, math.div(1, $rfs-rem-value)));
|
|
202
|
+
|
|
203
|
+
// Only add the media query if the value is greater than the minimum value
|
|
204
|
+
@if math.abs($value) <= $rfs-base-value or not $enable-rfs {
|
|
205
|
+
$val: $val + " " + if($rfs-unit == rem, #{math.div($value, $rfs-rem-value)}rem, #{$value}px);
|
|
206
|
+
} @else {
|
|
207
|
+
// Calculate the minimum value
|
|
208
|
+
$value-min: $rfs-base-value + math.div(math.abs($value) - $rfs-base-value, $rfs-factor);
|
|
209
|
+
|
|
210
|
+
// Calculate difference between $value and the minimum value
|
|
211
|
+
$value-diff: math.abs($value) - $value-min;
|
|
212
|
+
|
|
213
|
+
// Base value formatting
|
|
214
|
+
$min-width: if($rfs-unit == rem, #{math.div($value-min, $rfs-rem-value)}rem, #{$value-min}px);
|
|
215
|
+
|
|
216
|
+
// Use negative value if needed
|
|
217
|
+
$min-width: if($value < 0, -$min-width, $min-width);
|
|
218
|
+
|
|
219
|
+
// Use `vmin` if two-dimensional is enabled
|
|
220
|
+
$variable-unit: if($rfs-two-dimensional, vmin, vw);
|
|
221
|
+
|
|
222
|
+
// Calculate the variable width between 0 and $rfs-breakpoint
|
|
223
|
+
$variable-width: #{math.div($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
|
|
224
|
+
|
|
225
|
+
// Return the calculated value
|
|
226
|
+
$val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
// Remove first space
|
|
233
|
+
@return string.unquote(string.slice($val, 2));
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
// RFS mixin
|
|
237
|
+
@mixin rfs($values, $property: font-size) {
|
|
238
|
+
@if $values != null {
|
|
239
|
+
$val: rfs-value($values);
|
|
240
|
+
$fluidVal: rfs-fluid-value($values);
|
|
241
|
+
|
|
242
|
+
// Do not print the media query if responsive & non-responsive values are the same
|
|
243
|
+
@if $val == $fluidVal {
|
|
244
|
+
#{$property}: $val;
|
|
245
|
+
} @else {
|
|
246
|
+
@include _rfs-rule {
|
|
247
|
+
#{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);
|
|
248
|
+
|
|
249
|
+
// Include safari iframe resize fix if needed
|
|
250
|
+
min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
@include _rfs-media-query-rule {
|
|
254
|
+
#{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
// Shorthand helper mixins
|
|
261
|
+
@mixin font-size($value) {
|
|
262
|
+
@include rfs($value);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
@mixin padding($value) {
|
|
266
|
+
@include rfs($value, padding);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
@mixin padding-top($value) {
|
|
270
|
+
@include rfs($value, padding-top);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
@mixin padding-right($value) {
|
|
274
|
+
@include rfs($value, padding-right);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
@mixin padding-bottom($value) {
|
|
278
|
+
@include rfs($value, padding-bottom);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
@mixin padding-left($value) {
|
|
282
|
+
@include rfs($value, padding-left);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
@mixin margin($value) {
|
|
286
|
+
@include rfs($value, margin);
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
@mixin margin-top($value) {
|
|
290
|
+
@include rfs($value, margin-top);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
@mixin margin-right($value) {
|
|
294
|
+
@include rfs($value, margin-right);
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
@mixin margin-bottom($value) {
|
|
298
|
+
@include rfs($value, margin-bottom);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
@mixin margin-left($value) {
|
|
302
|
+
@include rfs($value, margin-left);
|
|
303
|
+
}
|
package/sass/mixins/_button.scss
CHANGED
package/sass/mixins/_colors.scss
CHANGED
package/sass/mixins/_grid.scss
CHANGED
package/sass/mixins/_list.scss
CHANGED
package/sass/modules/_alert.scss
CHANGED
package/sass/modules/_card.scss
CHANGED
package/sass/modules/_close.scss
CHANGED
package/sass/modules/_form.scss
CHANGED
package/sass/modules/_list.scss
CHANGED
|
@@ -1,28 +1,20 @@
|
|
|
1
1
|
@use "sass:color";
|
|
2
|
-
|
|
3
2
|
@use "./../variables" as *;
|
|
4
|
-
|
|
5
3
|
@use "./../functions" as *;
|
|
6
|
-
|
|
7
4
|
@use "./../mixins/list" as *;
|
|
8
5
|
|
|
9
6
|
.list--unstyled {
|
|
10
|
-
|
|
11
7
|
@include make-list-unstyled;
|
|
12
8
|
}
|
|
13
9
|
|
|
14
10
|
.list--inline {
|
|
15
|
-
|
|
16
11
|
@include make-list-inline;
|
|
17
12
|
}
|
|
18
13
|
|
|
19
14
|
dl {
|
|
20
|
-
|
|
21
15
|
@if $enable-margins {
|
|
22
16
|
margin-bottom: var(--spacer);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
@else {
|
|
17
|
+
} @else {
|
|
26
18
|
margin-bottom: 0;
|
|
27
19
|
}
|
|
28
20
|
|
|
@@ -32,7 +24,6 @@ dl {
|
|
|
32
24
|
}
|
|
33
25
|
|
|
34
26
|
.list--group {
|
|
35
|
-
|
|
36
27
|
@include make-list-unstyled;
|
|
37
28
|
|
|
38
29
|
& > li {
|
|
@@ -55,7 +46,6 @@ dl {
|
|
|
55
46
|
}
|
|
56
47
|
|
|
57
48
|
.list--nested {
|
|
58
|
-
|
|
59
49
|
@include make-list-unstyled;
|
|
60
50
|
|
|
61
51
|
& > li {
|
|
@@ -65,9 +55,7 @@ dl {
|
|
|
65
55
|
|
|
66
56
|
@if $enable-margins {
|
|
67
57
|
margin-bottom: var(--spacer);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
@else {
|
|
58
|
+
} @else {
|
|
71
59
|
margin-bottom: 0;
|
|
72
60
|
}
|
|
73
61
|
|
package/sass/modules/_modal.scss
CHANGED
package/sass/modules/_nav.scss
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
@use "sass:color";
|
|
2
|
-
|
|
3
2
|
@use "./../variables" as *;
|
|
4
|
-
|
|
5
3
|
@use "./../mixins/list" as *;
|
|
6
|
-
|
|
7
4
|
@use "./../mixins/colors" as *;
|
|
8
5
|
|
|
9
6
|
.nav,
|
|
@@ -17,7 +14,6 @@
|
|
|
17
14
|
@include make-list-unstyled;
|
|
18
15
|
|
|
19
16
|
& ul {
|
|
20
|
-
|
|
21
17
|
@include make-list-unstyled;
|
|
22
18
|
|
|
23
19
|
margin: 0;
|
package/sass/modules/_pill.scss
CHANGED
package/sass/modules/_tabs.scss
CHANGED
package/sass/modules/_tag.scss
CHANGED
package/sass/modules/_tile.scss
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
@use "sass:color";
|
|
2
|
-
|
|
3
2
|
@use "./../../variables" as *;
|
|
4
3
|
|
|
5
4
|
@mixin make-track() {
|
|
@@ -56,39 +55,31 @@ input[type="range"] {
|
|
|
56
55
|
margin: calc(var(--spacer) * 0.5) 0;
|
|
57
56
|
|
|
58
57
|
&::-moz-range-track {
|
|
59
|
-
|
|
60
58
|
@include make-track;
|
|
61
59
|
}
|
|
62
60
|
|
|
63
61
|
&::-webkit-slider-runnable-track {
|
|
64
|
-
|
|
65
62
|
@include make-track;
|
|
66
63
|
}
|
|
67
64
|
|
|
68
65
|
&::-moz-range-thumb {
|
|
69
|
-
|
|
70
66
|
@include make-thumb(false, false);
|
|
71
67
|
}
|
|
72
68
|
|
|
73
69
|
&::-webkit-slider-thumb {
|
|
74
|
-
|
|
75
70
|
@include make-thumb(false, false);
|
|
76
71
|
}
|
|
77
72
|
|
|
78
73
|
&:focus {
|
|
79
|
-
|
|
80
74
|
&::-webkit-slider-runnable-track {
|
|
81
|
-
|
|
82
75
|
@include make-track;
|
|
83
76
|
}
|
|
84
77
|
|
|
85
78
|
&::-moz-range-track {
|
|
86
|
-
|
|
87
79
|
@include make-track;
|
|
88
80
|
}
|
|
89
81
|
|
|
90
82
|
&::-webkit-slider-thumb {
|
|
91
|
-
|
|
92
83
|
@include make-thumb(true, false);
|
|
93
84
|
}
|
|
94
85
|
}
|
|
@@ -99,22 +90,18 @@ input[type="range"] {
|
|
|
99
90
|
--input-disabled-detail-background: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) + 20%));
|
|
100
91
|
|
|
101
92
|
&::-webkit-slider-runnable-track {
|
|
102
|
-
|
|
103
93
|
@include make-track;
|
|
104
94
|
}
|
|
105
95
|
|
|
106
96
|
&::-moz-range-track {
|
|
107
|
-
|
|
108
97
|
@include make-track;
|
|
109
98
|
}
|
|
110
99
|
|
|
111
100
|
&::-moz-range-thumb {
|
|
112
|
-
|
|
113
101
|
@include make-thumb(false, true);
|
|
114
102
|
}
|
|
115
103
|
|
|
116
104
|
&::-webkit-slider-thumb {
|
|
117
|
-
|
|
118
105
|
@include make-thumb(false, true);
|
|
119
106
|
}
|
|
120
107
|
}
|
|
@@ -124,24 +111,19 @@ input[type="range"] {
|
|
|
124
111
|
--input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) + 20%));
|
|
125
112
|
|
|
126
113
|
&::-moz-range-thumb {
|
|
127
|
-
|
|
128
114
|
@include make-thumb(false, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
|
|
129
115
|
}
|
|
130
116
|
|
|
131
117
|
&::-webkit-slider-thumb {
|
|
132
|
-
|
|
133
118
|
@include make-thumb(false, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
|
|
134
119
|
}
|
|
135
120
|
|
|
136
121
|
&:focus {
|
|
137
|
-
|
|
138
122
|
&::-moz-range-thumb {
|
|
139
|
-
|
|
140
123
|
@include make-thumb(true, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
|
|
141
124
|
}
|
|
142
125
|
|
|
143
126
|
&::-webkit-slider-thumb {
|
|
144
|
-
|
|
145
127
|
@include make-thumb(true, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
|
|
146
128
|
}
|
|
147
129
|
}
|
|
@@ -149,14 +131,11 @@ input[type="range"] {
|
|
|
149
131
|
&:disabled,
|
|
150
132
|
&.disabled,
|
|
151
133
|
&[aria-disabled="true"] {
|
|
152
|
-
|
|
153
134
|
&::-moz-range-thumb {
|
|
154
|
-
|
|
155
135
|
@include make-thumb(false, true, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
|
|
156
136
|
}
|
|
157
137
|
|
|
158
138
|
&::-webkit-slider-thumb {
|
|
159
|
-
|
|
160
139
|
@include make-thumb(false, true, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
|
|
161
140
|
}
|
|
162
141
|
}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
|
-
|
|
3
2
|
@use "./../variables" as *;
|
|
4
|
-
|
|
5
3
|
@use "./../mixins/breakpoints" as *;
|
|
6
4
|
|
|
7
5
|
$positions: (static, relative, absolute, fixed, sticky) !default;
|
|
8
6
|
$position-ints: (0, 25, 50, 75, 100) !default;
|
|
9
7
|
|
|
10
8
|
@each $breakpoint in map.keys($breakpoints) {
|
|
11
|
-
|
|
12
9
|
@include media-breakpoint-up($breakpoint) {
|
|
13
10
|
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
14
11
|
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
|
-
|
|
3
2
|
@use "./../variables" as *;
|
|
4
|
-
|
|
5
3
|
@use "./../mixins/breakpoints" as *;
|
|
6
4
|
|
|
7
5
|
@each $key, $value in $font-sizes {
|
|
@@ -17,7 +15,6 @@
|
|
|
17
15
|
}
|
|
18
16
|
|
|
19
17
|
@each $breakpoint in map.keys($breakpoints) {
|
|
20
|
-
|
|
21
18
|
@include media-breakpoint-up($breakpoint) {
|
|
22
19
|
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
23
20
|
|