claritas-web-framework 8.1.2 → 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 +9 -15
- 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 +24 -33
- package/sass/_utilities.scss +0 -16
- package/sass/_variables.scss +9 -4
- 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": {
|
|
@@ -17,23 +15,19 @@
|
|
|
17
15
|
"author": "David Brooks",
|
|
18
16
|
"license": "UNLICENSED",
|
|
19
17
|
"devDependencies": {
|
|
20
|
-
"css-loader": "^7.1.
|
|
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.
|
|
25
|
-
"sass-loader": "^
|
|
26
|
-
"
|
|
27
|
-
"stylelint-config-standard": "^36.0.0",
|
|
28
|
-
"stylelint-config-standard-scss": "^13.1.0",
|
|
29
|
-
"stylelint-scss": "^6.3.0",
|
|
30
|
-
"webpack": "^5.91.0",
|
|
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
|
@@ -3,22 +3,32 @@
|
|
|
3
3
|
@use "./mixins/colors" as *;
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
+
interpolate-size: allow-keywords;
|
|
6
7
|
|
|
7
|
-
@
|
|
8
|
+
@include define-color-variables($title: "body-color", $color: $body-color);
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
}
|
|
10
|
+
@include define-color-variables($title: "border-color-main", $color: $border-color-main);
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
--spacer: #{$spacer};
|
|
13
|
+
--body-color: #{$body-color};
|
|
14
|
+
--body-background: #{$body-background};
|
|
15
|
+
--font-family-body: #{$font-family-base};
|
|
16
|
+
--font-size-body: #{$font-size-base};
|
|
17
|
+
--font-size-base: #{$font-size-base};
|
|
18
|
+
--font-weight-body: #{$font-weight-base};
|
|
19
|
+
--line-height-body: #{$line-height-base};
|
|
20
|
+
--body-text-align: #{$body-text-align};
|
|
21
|
+
--headings-color: #{$headings-color};
|
|
22
|
+
--box-shadow-small: #{$box-shadow-small};
|
|
23
|
+
--box-shadow-medium: #{$box-shadow-medium};
|
|
24
|
+
--box-shadow-large: #{$box-shadow-large};
|
|
25
|
+
--border-color-main: #{$border-color-main};
|
|
26
|
+
--border-color-hover-main: #{$border-color-hover-main};
|
|
13
27
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
28
|
+
@if $font-size-root {
|
|
29
|
+
@include font-size(var(--root-font-size));
|
|
17
30
|
}
|
|
18
31
|
|
|
19
|
-
// Colors
|
|
20
|
-
// Generate palettes for full colors, grays, and theme colors.
|
|
21
|
-
|
|
22
32
|
@each $key, $value in $grays {
|
|
23
33
|
--#{$key}: #{$value};
|
|
24
34
|
}
|
|
@@ -27,23 +37,14 @@
|
|
|
27
37
|
--#{$key}: #{$value};
|
|
28
38
|
}
|
|
29
39
|
|
|
30
|
-
--border-color-main: #{$border-color-main};
|
|
31
|
-
--border-color-hover-main: #{$border-color-hover-main};
|
|
32
|
-
|
|
33
40
|
@each $key, $value in $grays {
|
|
34
|
-
|
|
35
41
|
@include define-color-variables($key, $value);
|
|
36
42
|
}
|
|
37
43
|
|
|
38
44
|
@each $key, $value in $all-colors {
|
|
39
|
-
|
|
40
45
|
@include define-color-variables($key, $value);
|
|
41
46
|
}
|
|
42
47
|
|
|
43
|
-
@include define-color-variables($title: "body-color", $color: $body-color);
|
|
44
|
-
|
|
45
|
-
@include define-color-variables($title: "border-color-main", $color: $border-color-main);
|
|
46
|
-
|
|
47
48
|
@each $key, $value in $zindexes {
|
|
48
49
|
--zindex-#{$key}: #{$value};
|
|
49
50
|
}
|
|
@@ -52,20 +53,6 @@
|
|
|
52
53
|
--font-size-#{$key}: #{$value};
|
|
53
54
|
}
|
|
54
55
|
|
|
55
|
-
--spacer: #{$spacer};
|
|
56
|
-
--body-color: #{$body-color};
|
|
57
|
-
--body-background: #{$body-background};
|
|
58
|
-
--font-family-body: #{$font-family-base};
|
|
59
|
-
--font-size-body: #{$font-size-base};
|
|
60
|
-
--font-size-base: #{$font-size-base};
|
|
61
|
-
--font-weight-body: #{$font-weight-base};
|
|
62
|
-
--line-height-body: #{$line-height-base};
|
|
63
|
-
--body-text-align: #{$body-text-align};
|
|
64
|
-
--headings-color: #{$headings-color};
|
|
65
|
-
--box-shadow-small: #{$box-shadow-small};
|
|
66
|
-
--box-shadow-medium: #{$box-shadow-medium};
|
|
67
|
-
--box-shadow-large: #{$box-shadow-large};
|
|
68
|
-
|
|
69
56
|
@each $key, $value in $border-radii {
|
|
70
57
|
--border-radius-#{$key}: #{$value};
|
|
71
58
|
}
|
|
@@ -73,4 +60,8 @@
|
|
|
73
60
|
@each $name, $value in $breakpoints {
|
|
74
61
|
--breakpoint-#{$name}: #{$value};
|
|
75
62
|
}
|
|
63
|
+
|
|
64
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
65
|
+
scroll-behavior: smooth;
|
|
66
|
+
}
|
|
76
67
|
}
|
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,11 +1,8 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
|
-
|
|
3
2
|
@use "sass:color";
|
|
4
|
-
|
|
5
3
|
@use "sass:math";
|
|
6
4
|
|
|
7
5
|
/* --------------------------------- options -------------------------------- */
|
|
8
|
-
$enable-smooth-scroll: true !default;
|
|
9
6
|
$enable-margins: true !default;
|
|
10
7
|
$enable-cssgrid: true !default;
|
|
11
8
|
|
|
@@ -421,7 +418,12 @@ $breadcrumb-color: $medium !default;
|
|
|
421
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;
|
|
422
419
|
|
|
423
420
|
/* ---------------------------------- modal --------------------------------- */
|
|
424
|
-
$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;
|
|
425
427
|
$modal-background-blur: 4px !default;
|
|
426
428
|
|
|
427
429
|
/* ---------------------------------- alert --------------------------------- */
|
|
@@ -444,3 +446,6 @@ $tag-padding-x: calc($spacer * 0.5) !default;
|
|
|
444
446
|
$tag-padding-y: calc($spacer * 0.25) !default;
|
|
445
447
|
$tag-font-weight: 400 !default;
|
|
446
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) {
|