claritas-web-framework 8.2.0 → 8.3.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.
- package/dist/index.css +6 -67
- package/dist/index.html +1 -1
- package/index.html +3 -1
- package/package.json +8 -14
- package/sass/_functions.scss +3 -11
- package/sass/_helpers.scss +0 -6
- package/sass/_mixins.scss +0 -11
- package/sass/_modules.scss +0 -30
- package/sass/_reboot.scss +7 -8
- package/sass/_root.scss +2 -0
- package/sass/_utilities.scss +0 -16
- package/sass/_variables.scss +9 -3
- package/sass/helpers/_container.scss +0 -2
- package/sass/helpers/_embed.scss +0 -1
- package/sass/helpers/_grid.scss +0 -6
- package/sass/helpers/_link.scss +0 -1
- package/sass/helpers/_screenReader.scss +0 -2
- package/sass/helpers/_wrap.scss +0 -1
- package/sass/index.scss +2 -7
- package/sass/mixins/_breakpoints.scss +6 -28
- package/sass/mixins/_caret.scss +1 -5
- package/sass/mixins/_clearfix.scss +0 -1
- package/sass/mixins/_colors.scss +3 -3
- package/sass/mixins/_container.scss +0 -2
- package/sass/mixins/_grid.scss +3 -18
- package/sass/mixins/_group.scss +1 -7
- package/sass/mixins/_list.scss +1 -4
- package/sass/mixins/_screenReader.scss +0 -1
- package/sass/modules/_alert.scss +1 -4
- package/sass/modules/_breadcrumbs.scss +0 -1
- package/sass/modules/_button.scss +0 -8
- package/sass/modules/_card.scss +1 -8
- package/sass/modules/_details.scss +3 -4
- package/sass/modules/_dropdown.scss +0 -1
- package/sass/modules/_form.scss +0 -2
- package/sass/modules/_loader.scss +0 -10
- package/sass/modules/_pill.scss +0 -3
- package/sass/modules/_tabs.scss +1 -5
- package/sass/modules/_tag.scss +0 -3
- package/sass/modules/_tile.scss +1 -6
- package/sass/modules/_tooltip.scss +0 -5
- package/sass/modules/form/_checkbox.scss +0 -4
- package/sass/modules/form/_file.scss +0 -9
- package/sass/modules/form/_formFieldGroup.scss +0 -2
- package/sass/modules/form/_progress.scss +0 -1
- package/sass/modules/form/_radio.scss +0 -3
- package/sass/modules/form/_switch.scss +0 -3
- package/sass/modules/form/_toggle.scss +0 -2
- package/sass/utilities/_align.scss +0 -2
- package/sass/utilities/_colors.scss +0 -8
- package/sass/utilities/_display.scss +0 -2
- package/sass/utilities/_flex.scss +0 -1
- package/sass/utilities/_float.scss +0 -1
- package/sass/utilities/_order.scss +0 -1
- package/sass/utilities/_overflow.scss +0 -1
- package/sass/utilities/_pointerEvents.scss +0 -1
- package/sass/utilities/_spacing.scss +0 -1
- package/sass/utilities/_visibility.scss +0 -1
- package/sass/utilities/_zIndex.scss +0 -1
- package/.stylelintrc.json +0 -40
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">
|
|
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--light">Click me</button></div></div></div></div></div></body></html>
|
package/index.html
CHANGED
package/package.json
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "claritas-web-framework",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.3.0",
|
|
4
4
|
"description": "The CSS framework built for Claritas front end.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"build": "webpack --config webpack.config.js --mode production",
|
|
8
8
|
"start": "webpack serve --config webpack.config.js --mode development",
|
|
9
|
-
"stylelint": "npx stylelint **/*.scss",
|
|
10
|
-
"stylelint-fix": "npx stylelint **/*.scss --fix",
|
|
11
9
|
"find-unused-sass-variables": "npx find-unused-sass-variables ./sass/"
|
|
12
10
|
},
|
|
13
11
|
"repository": {
|
|
@@ -20,20 +18,16 @@
|
|
|
20
18
|
"css-loader": "^7.1.2",
|
|
21
19
|
"find-unused-sass-variables": "^6.0.0",
|
|
22
20
|
"html-webpack-plugin": "^5.6.0",
|
|
23
|
-
"mini-css-extract-plugin": "^2.9.
|
|
24
|
-
"prettier": "^3.3.
|
|
25
|
-
"sass-loader": "^
|
|
26
|
-
"
|
|
27
|
-
"stylelint-config-standard": "^36.0.1",
|
|
28
|
-
"stylelint-config-standard-scss": "^13.1.0",
|
|
29
|
-
"stylelint-scss": "^6.4.0",
|
|
30
|
-
"webpack": "^5.92.1",
|
|
21
|
+
"mini-css-extract-plugin": "^2.9.1",
|
|
22
|
+
"prettier": "^3.3.3",
|
|
23
|
+
"sass-loader": "^16.0.2",
|
|
24
|
+
"webpack": "^5.95.0",
|
|
31
25
|
"webpack-cli": "^5.1.4",
|
|
32
|
-
"webpack-dev-server": "^5.0
|
|
26
|
+
"webpack-dev-server": "^5.1.0"
|
|
33
27
|
},
|
|
34
28
|
"dependencies": {
|
|
35
|
-
"modern-normalize": "^
|
|
29
|
+
"modern-normalize": "^3.0.1",
|
|
36
30
|
"rfs": "^10.0.0",
|
|
37
|
-
"sass": "^1.
|
|
31
|
+
"sass": "^1.79.3"
|
|
38
32
|
}
|
|
39
33
|
}
|
package/sass/_functions.scss
CHANGED
|
@@ -32,17 +32,13 @@
|
|
|
32
32
|
// Requires the use of quotes around data URIs.
|
|
33
33
|
|
|
34
34
|
@function escape-svg($string) {
|
|
35
|
-
|
|
36
35
|
@if string.index($string, "data:image/svg+xml") {
|
|
37
|
-
|
|
38
36
|
@each $char, $encoded in $escaped-characters {
|
|
39
37
|
// Do not escape the url brackets
|
|
40
38
|
|
|
41
39
|
@if string.index($string, "url(") == 1 {
|
|
42
40
|
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@else {
|
|
41
|
+
} @else {
|
|
46
42
|
$string: str-replace($string, $char, $encoded);
|
|
47
43
|
}
|
|
48
44
|
}
|
|
@@ -52,15 +48,11 @@
|
|
|
52
48
|
}
|
|
53
49
|
|
|
54
50
|
@function color-flip($key, $value, $threshold: $color-flip-threshold, $lightness: $color-flip-l, $opacity: 100%) {
|
|
55
|
-
$color-sum: math.max(color.
|
|
51
|
+
$color-sum: math.max(color.channel($value, "lightness", $space: hsl), 0%);
|
|
56
52
|
|
|
57
53
|
@if $color-sum > $threshold {
|
|
58
|
-
|
|
59
54
|
@return hsl(var(--dark-h) var(--dark-s) var(--dark-l) / $opacity);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
@else {
|
|
63
|
-
|
|
55
|
+
} @else {
|
|
64
56
|
@return hsl(var(--white-h) var(--white-s) var(--white-l) / $opacity);
|
|
65
57
|
}
|
|
66
58
|
}
|
package/sass/_helpers.scss
CHANGED
package/sass/_mixins.scss
CHANGED
|
@@ -1,23 +1,12 @@
|
|
|
1
1
|
@forward "./mixins/breakpoints";
|
|
2
|
-
|
|
3
2
|
@forward "./mixins/button";
|
|
4
|
-
|
|
5
3
|
@forward "./mixins/caret";
|
|
6
|
-
|
|
7
4
|
@forward "./mixins/clearfix";
|
|
8
|
-
|
|
9
5
|
@forward "./mixins/colors";
|
|
10
|
-
|
|
11
6
|
@forward "./mixins/container";
|
|
12
|
-
|
|
13
7
|
@forward "./mixins/gradient";
|
|
14
|
-
|
|
15
8
|
@forward "./mixins/grid";
|
|
16
|
-
|
|
17
9
|
@forward "./mixins/group";
|
|
18
|
-
|
|
19
10
|
@forward "./mixins/list";
|
|
20
|
-
|
|
21
11
|
@forward "./mixins/screenReader";
|
|
22
|
-
|
|
23
12
|
@forward "./mixins/wrap";
|
package/sass/_modules.scss
CHANGED
|
@@ -1,61 +1,31 @@
|
|
|
1
1
|
@forward "./modules/alert";
|
|
2
|
-
|
|
3
2
|
@forward "./modules/breadcrumbs";
|
|
4
|
-
|
|
5
3
|
@forward "./modules/button";
|
|
6
|
-
|
|
7
4
|
@forward "./modules/card";
|
|
8
|
-
|
|
9
5
|
@forward "./modules/close";
|
|
10
|
-
|
|
11
6
|
@forward "./modules/details";
|
|
12
|
-
|
|
13
7
|
@forward "./modules/dialog";
|
|
14
|
-
|
|
15
8
|
@forward "./modules/dropdown";
|
|
16
|
-
|
|
17
9
|
@forward "./modules/form";
|
|
18
|
-
|
|
19
10
|
@forward "./modules/form/formFieldGroup";
|
|
20
|
-
|
|
21
11
|
@forward "./modules/form/checkbox";
|
|
22
|
-
|
|
23
12
|
@forward "./modules/form/file";
|
|
24
|
-
|
|
25
13
|
@forward "./modules/form/output";
|
|
26
|
-
|
|
27
14
|
@forward "./modules/form/progress";
|
|
28
|
-
|
|
29
15
|
@forward "./modules/form/radio";
|
|
30
|
-
|
|
31
16
|
@forward "./modules/form/range";
|
|
32
|
-
|
|
33
17
|
@forward "./modules/form/select";
|
|
34
|
-
|
|
35
18
|
@forward "./modules/form/switch";
|
|
36
|
-
|
|
37
19
|
@forward "./modules/form/text";
|
|
38
|
-
|
|
39
20
|
@forward "./modules/form/textarea";
|
|
40
|
-
|
|
41
21
|
@forward "./modules/form/toggle";
|
|
42
|
-
|
|
43
22
|
@forward "./modules/list";
|
|
44
|
-
|
|
45
23
|
@forward "./modules/loader";
|
|
46
|
-
|
|
47
24
|
@forward "./modules/modal";
|
|
48
|
-
|
|
49
25
|
@forward "./modules/nav";
|
|
50
|
-
|
|
51
26
|
@forward "./modules/pill";
|
|
52
|
-
|
|
53
27
|
@forward "./modules/table";
|
|
54
|
-
|
|
55
28
|
@forward "./modules/tabs";
|
|
56
|
-
|
|
57
29
|
@forward "./modules/tag";
|
|
58
|
-
|
|
59
30
|
@forward "./modules/tile";
|
|
60
|
-
|
|
61
31
|
@forward "./modules/tooltip";
|
package/sass/_reboot.scss
CHANGED
|
@@ -37,7 +37,6 @@ hr {
|
|
|
37
37
|
|
|
38
38
|
h1,
|
|
39
39
|
.h1 {
|
|
40
|
-
|
|
41
40
|
@extend %heading;
|
|
42
41
|
|
|
43
42
|
font-size: var(--font-size-1);
|
|
@@ -45,7 +44,6 @@ h1,
|
|
|
45
44
|
|
|
46
45
|
h2,
|
|
47
46
|
.h2 {
|
|
48
|
-
|
|
49
47
|
@extend %heading;
|
|
50
48
|
|
|
51
49
|
font-size: var(--font-size-2);
|
|
@@ -53,7 +51,6 @@ h2,
|
|
|
53
51
|
|
|
54
52
|
h3,
|
|
55
53
|
.h3 {
|
|
56
|
-
|
|
57
54
|
@extend %heading;
|
|
58
55
|
|
|
59
56
|
font-size: var(--font-size-3);
|
|
@@ -61,7 +58,6 @@ h3,
|
|
|
61
58
|
|
|
62
59
|
h4,
|
|
63
60
|
.h4 {
|
|
64
|
-
|
|
65
61
|
@extend %heading;
|
|
66
62
|
|
|
67
63
|
font-size: var(--font-size-4);
|
|
@@ -69,7 +65,6 @@ h4,
|
|
|
69
65
|
|
|
70
66
|
h5,
|
|
71
67
|
.h5 {
|
|
72
|
-
|
|
73
68
|
@extend %heading;
|
|
74
69
|
|
|
75
70
|
font-size: var(--font-size-5);
|
|
@@ -77,7 +72,6 @@ h5,
|
|
|
77
72
|
|
|
78
73
|
h6,
|
|
79
74
|
.h6 {
|
|
80
|
-
|
|
81
75
|
@extend %heading;
|
|
82
76
|
|
|
83
77
|
font-size: var(--font-size-6);
|
|
@@ -136,7 +130,6 @@ a {
|
|
|
136
130
|
}
|
|
137
131
|
|
|
138
132
|
a:not([href], [class]) {
|
|
139
|
-
|
|
140
133
|
&,
|
|
141
134
|
&:hover {
|
|
142
135
|
color: inherit;
|
|
@@ -202,7 +195,13 @@ select {
|
|
|
202
195
|
}
|
|
203
196
|
}
|
|
204
197
|
|
|
205
|
-
[list]:not(
|
|
198
|
+
[list]:not(
|
|
199
|
+
[type="date"],
|
|
200
|
+
[type="datetime-local"],
|
|
201
|
+
[type="month"],
|
|
202
|
+
[type="week"],
|
|
203
|
+
[type="time"]
|
|
204
|
+
)::-webkit-calendar-picker-indicator {
|
|
206
205
|
display: none !important;
|
|
207
206
|
}
|
|
208
207
|
|
package/sass/_root.scss
CHANGED
package/sass/_utilities.scss
CHANGED
|
@@ -1,33 +1,17 @@
|
|
|
1
1
|
@forward "./utilities/align";
|
|
2
|
-
|
|
3
2
|
@forward "./utilities/border";
|
|
4
|
-
|
|
5
3
|
@forward "./utilities/colors";
|
|
6
|
-
|
|
7
4
|
@forward "./utilities/display";
|
|
8
|
-
|
|
9
5
|
@forward "./utilities/flex";
|
|
10
|
-
|
|
11
6
|
@forward "./utilities/float";
|
|
12
|
-
|
|
13
7
|
@forward "./utilities/order";
|
|
14
|
-
|
|
15
8
|
@forward "./utilities/overflow";
|
|
16
|
-
|
|
17
9
|
@forward "./utilities/pointerEvents";
|
|
18
|
-
|
|
19
10
|
@forward "./utilities/position";
|
|
20
|
-
|
|
21
11
|
@forward "./utilities/shadow";
|
|
22
|
-
|
|
23
12
|
@forward "./utilities/size";
|
|
24
|
-
|
|
25
13
|
@forward "./utilities/spacing";
|
|
26
|
-
|
|
27
14
|
@forward "./utilities/translate";
|
|
28
|
-
|
|
29
15
|
@forward "./utilities/typography";
|
|
30
|
-
|
|
31
16
|
@forward "./utilities/visibility";
|
|
32
|
-
|
|
33
17
|
@forward "./utilities/zIndex";
|
package/sass/_variables.scss
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
|
-
|
|
3
2
|
@use "sass:color";
|
|
4
|
-
|
|
5
3
|
@use "sass:math";
|
|
6
4
|
|
|
7
5
|
/* --------------------------------- options -------------------------------- */
|
|
@@ -420,7 +418,12 @@ $breadcrumb-color: $medium !default;
|
|
|
420
418
|
$breadcrumb-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path fill='#{$breadcrumb-color}' d='M89.45 87.5l143.1 152c4.375 4.625 6.562 10.56 6.562 16.5c0 5.937-2.188 11.87-6.562 16.5l-143.1 152C80.33 434.1 65.14 434.5 55.52 425.4c-9.688-9.125-10.03-24.38-.9375-33.94l128.4-135.5l-128.4-135.5C45.49 110.9 45.83 95.75 55.52 86.56C65.14 77.47 80.33 77.87 89.45 87.5z'/></svg>") !default;
|
|
421
419
|
|
|
422
420
|
/* ---------------------------------- modal --------------------------------- */
|
|
423
|
-
$modal-open-background: rgba(
|
|
421
|
+
$modal-open-background: rgba(
|
|
422
|
+
color.channel($dark, "red", $space: rgb),
|
|
423
|
+
color.channel($dark, "green", $space: rgb),
|
|
424
|
+
color.channel($dark, "blue", $space: rgb),
|
|
425
|
+
0.5
|
|
426
|
+
) !default;
|
|
424
427
|
$modal-background-blur: 4px !default;
|
|
425
428
|
|
|
426
429
|
/* ---------------------------------- alert --------------------------------- */
|
|
@@ -443,3 +446,6 @@ $tag-padding-x: calc($spacer * 0.5) !default;
|
|
|
443
446
|
$tag-padding-y: calc($spacer * 0.25) !default;
|
|
444
447
|
$tag-font-weight: 400 !default;
|
|
445
448
|
$tag-font-size: $font-size-small !default;
|
|
449
|
+
|
|
450
|
+
/* --------------------------------- details -------------------------------- */
|
|
451
|
+
$details-transition: height 500ms ease;
|
package/sass/helpers/_embed.scss
CHANGED
package/sass/helpers/_grid.scss
CHANGED
|
@@ -12,33 +12,27 @@
|
|
|
12
12
|
// Rows contain your columns.
|
|
13
13
|
|
|
14
14
|
:root {
|
|
15
|
-
|
|
16
15
|
@each $name, $value in $breakpoints {
|
|
17
16
|
--breakpoint-#{$name}: #{$value};
|
|
18
17
|
}
|
|
19
18
|
}
|
|
20
19
|
|
|
21
20
|
.grid {
|
|
22
|
-
|
|
23
21
|
@include make-row;
|
|
24
22
|
}
|
|
25
23
|
|
|
26
24
|
.grid--tight {
|
|
27
|
-
|
|
28
25
|
@include make-row($grid-gutter-tight);
|
|
29
26
|
}
|
|
30
27
|
|
|
31
28
|
.grid,
|
|
32
29
|
.grid--tight {
|
|
33
|
-
|
|
34
30
|
> * {
|
|
35
|
-
|
|
36
31
|
@include make-col-ready;
|
|
37
32
|
}
|
|
38
33
|
}
|
|
39
34
|
|
|
40
35
|
@if $enable-cssgrid {
|
|
41
|
-
|
|
42
36
|
.g-grid {
|
|
43
37
|
gap: var(--gap, #{$grid-gutter});
|
|
44
38
|
}
|
package/sass/helpers/_link.scss
CHANGED
package/sass/helpers/_wrap.scss
CHANGED
package/sass/index.scss
CHANGED
|
@@ -1,17 +1,12 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "sass:color";
|
|
2
2
|
|
|
3
|
+
@forward "./variables";
|
|
3
4
|
@forward "./functions";
|
|
4
|
-
|
|
5
5
|
@forward "./mixins";
|
|
6
|
-
|
|
7
6
|
@forward "./helpers";
|
|
8
|
-
|
|
9
7
|
@forward "./utilities";
|
|
10
|
-
|
|
11
8
|
@forward "./modules";
|
|
12
|
-
|
|
13
9
|
@forward "./reboot";
|
|
14
|
-
|
|
15
10
|
@forward "./root";
|
|
16
11
|
|
|
17
12
|
@import "modern-normalize/modern-normalize.css";
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
|
-
|
|
3
2
|
@use "sass:list";
|
|
4
3
|
|
|
5
4
|
@use "./../variables" as *;
|
|
@@ -56,7 +55,6 @@
|
|
|
56
55
|
// "-sm"
|
|
57
56
|
|
|
58
57
|
@function breakpoint-infix($name, $breakpoints: $breakpoints) {
|
|
59
|
-
|
|
60
58
|
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
|
61
59
|
}
|
|
62
60
|
|
|
@@ -67,13 +65,10 @@
|
|
|
67
65
|
$min: breakpoint-min($name, $breakpoints);
|
|
68
66
|
|
|
69
67
|
@if $min {
|
|
70
|
-
|
|
71
68
|
@media (min-width: $min) {
|
|
72
69
|
@content;
|
|
73
70
|
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
@else {
|
|
71
|
+
} @else {
|
|
77
72
|
@content;
|
|
78
73
|
}
|
|
79
74
|
}
|
|
@@ -85,13 +80,10 @@
|
|
|
85
80
|
$max: breakpoint-max($name, $breakpoints);
|
|
86
81
|
|
|
87
82
|
@if $max {
|
|
88
|
-
|
|
89
83
|
@media (max-width: $max) {
|
|
90
84
|
@content;
|
|
91
85
|
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
@else {
|
|
86
|
+
} @else {
|
|
95
87
|
@content;
|
|
96
88
|
}
|
|
97
89
|
}
|
|
@@ -104,21 +96,14 @@
|
|
|
104
96
|
$max: breakpoint-max($upper, $breakpoints);
|
|
105
97
|
|
|
106
98
|
@if $min != null and $max != null {
|
|
107
|
-
|
|
108
99
|
@media (min-width: $min) and (max-width: $max) {
|
|
109
100
|
@content;
|
|
110
101
|
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
@else if $max == null {
|
|
114
|
-
|
|
102
|
+
} @else if $max == null {
|
|
115
103
|
@include breakpoints.media-breakpoint-up($lower, $breakpoints) {
|
|
116
104
|
@content;
|
|
117
105
|
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
@else if $min == null {
|
|
121
|
-
|
|
106
|
+
} @else if $min == null {
|
|
122
107
|
@include media-breakpoint-down($upper, $breakpoints) {
|
|
123
108
|
@content;
|
|
124
109
|
}
|
|
@@ -134,21 +119,14 @@
|
|
|
134
119
|
$max: breakpoint-max($name, $breakpoints);
|
|
135
120
|
|
|
136
121
|
@if $min != null and $max != null {
|
|
137
|
-
|
|
138
122
|
@media (min-width: $min) and (max-width: $max) {
|
|
139
123
|
@content;
|
|
140
124
|
}
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
@else if $max == null {
|
|
144
|
-
|
|
125
|
+
} @else if $max == null {
|
|
145
126
|
@include breakpoints.media-breakpoint-up($name, $breakpoints) {
|
|
146
127
|
@content;
|
|
147
128
|
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
@else if $min == null {
|
|
151
|
-
|
|
129
|
+
} @else if $min == null {
|
|
152
130
|
@include media-breakpoint-down($name, $breakpoints) {
|
|
153
131
|
@content;
|
|
154
132
|
}
|
package/sass/mixins/_caret.scss
CHANGED
|
@@ -16,16 +16,13 @@
|
|
|
16
16
|
|
|
17
17
|
@if $left {
|
|
18
18
|
left: $position;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@else {
|
|
19
|
+
} @else {
|
|
22
20
|
right: $position;
|
|
23
21
|
}
|
|
24
22
|
}
|
|
25
23
|
}
|
|
26
24
|
|
|
27
25
|
@mixin make-caret-down($left: false, $color: "body-color", $position: calc(var(--spacer) * 0.5)) {
|
|
28
|
-
|
|
29
26
|
@include make-caret($left);
|
|
30
27
|
|
|
31
28
|
&::after {
|
|
@@ -35,7 +32,6 @@
|
|
|
35
32
|
}
|
|
36
33
|
|
|
37
34
|
@mixin make-caret-up($left: false, $color: "body-color", $position: calc(var(--spacer) * 0.5)) {
|
|
38
|
-
|
|
39
35
|
@include make-caret($left);
|
|
40
36
|
|
|
41
37
|
&::after {
|
package/sass/mixins/_colors.scss
CHANGED
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
@use "./../functions" as *;
|
|
6
6
|
|
|
7
7
|
@mixin define-color-variables($title, $color) {
|
|
8
|
-
--#{$title}-h: #{color.
|
|
9
|
-
--#{$title}-s: #{color.
|
|
10
|
-
--#{$title}-l: #{color.
|
|
8
|
+
--#{$title}-h: #{color.channel($color, "hue", $space: hsl)};
|
|
9
|
+
--#{$title}-s: #{color.channel($color, "saturation", $space: hsl)};
|
|
10
|
+
--#{$title}-l: #{color.channel($color, "lightness", $space: hsl)};
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
@mixin make-color($title) {
|
|
@@ -14,9 +14,7 @@
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $breakpoints) {
|
|
17
|
-
|
|
18
17
|
@each $breakpoint, $container-max-width in $max-widths {
|
|
19
|
-
|
|
20
18
|
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
21
19
|
max-width: $container-max-width;
|
|
22
20
|
}
|
package/sass/mixins/_grid.scss
CHANGED
|
@@ -36,19 +36,16 @@
|
|
|
36
36
|
flex-shrink: 0;
|
|
37
37
|
width: 100%;
|
|
38
38
|
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
|
|
39
|
-
padding-right: calc(var(--gutter-x) * 0.5);
|
|
40
|
-
padding-left: calc(var(--gutter-x) * 0.5);
|
|
39
|
+
padding-right: calc(var(--gutter-x) * 0.5);
|
|
40
|
+
padding-left: calc(var(--gutter-x) * 0.5);
|
|
41
41
|
margin-top: var(--gutter-y);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
@mixin make-col($size: false, $columns: $grid-columns) {
|
|
45
|
-
|
|
46
45
|
@if $size {
|
|
47
46
|
flex: 0 0 auto;
|
|
48
47
|
width: math.percentage(math.div($size, $columns));
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
@else {
|
|
48
|
+
} @else {
|
|
52
49
|
flex: 1 1 0;
|
|
53
50
|
max-width: 100%;
|
|
54
51
|
}
|
|
@@ -75,7 +72,6 @@
|
|
|
75
72
|
// style grid.
|
|
76
73
|
|
|
77
74
|
@mixin row-cols($count) {
|
|
78
|
-
|
|
79
75
|
> * {
|
|
80
76
|
flex: 0 0 auto;
|
|
81
77
|
width: math.div(100%, $count);
|
|
@@ -87,41 +83,33 @@
|
|
|
87
83
|
// any value of `$grid-columns`.
|
|
88
84
|
|
|
89
85
|
@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $breakpoints) {
|
|
90
|
-
|
|
91
86
|
@each $breakpoint in map.keys($breakpoints) {
|
|
92
87
|
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
93
88
|
|
|
94
89
|
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
95
90
|
.col-#{$infix},
|
|
96
91
|
.col {
|
|
97
|
-
|
|
98
92
|
@include make-col-fit;
|
|
99
93
|
}
|
|
100
94
|
|
|
101
95
|
.col-#{$infix}-auto {
|
|
102
|
-
|
|
103
96
|
@include make-col-auto;
|
|
104
97
|
}
|
|
105
98
|
|
|
106
99
|
.col-#{$infix}-fit {
|
|
107
|
-
|
|
108
100
|
@include make-col-fit;
|
|
109
101
|
}
|
|
110
102
|
|
|
111
103
|
@if $columns > 0 {
|
|
112
|
-
|
|
113
104
|
@for $i from 1 through $columns {
|
|
114
105
|
.col-#{$infix}-#{$i} {
|
|
115
|
-
|
|
116
106
|
@include make-col($i, $columns);
|
|
117
107
|
}
|
|
118
108
|
}
|
|
119
109
|
|
|
120
110
|
@for $i from 0 through ($columns - 1) {
|
|
121
|
-
|
|
122
111
|
@if not($infix == "" and $i == 0) {
|
|
123
112
|
.offset-#{$infix}-#{$i} {
|
|
124
|
-
|
|
125
113
|
@include make-col-offset($i, $columns);
|
|
126
114
|
}
|
|
127
115
|
}
|
|
@@ -147,14 +135,11 @@
|
|
|
147
135
|
}
|
|
148
136
|
|
|
149
137
|
@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $breakpoints) {
|
|
150
|
-
|
|
151
138
|
@each $breakpoint in map.keys($breakpoints) {
|
|
152
139
|
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
153
140
|
|
|
154
141
|
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
155
|
-
|
|
156
142
|
@if $columns > 0 {
|
|
157
|
-
|
|
158
143
|
@for $i from 1 through $columns {
|
|
159
144
|
.g-col-#{$infix}-#{$i} {
|
|
160
145
|
grid-column: auto / span $i;
|