claritas-web-framework 8.5.8 → 8.5.91
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/.prettierrc +10 -10
- package/README.md +1 -1
- package/dist/index.css +1 -1
- package/index.html +20 -20
- package/index.js +2 -2
- package/package.json +33 -33
- package/sass/_functions.scss +55 -55
- package/sass/_helpers.scss +8 -8
- package/sass/_mixins.scss +12 -12
- package/sass/_modules.scss +30 -30
- package/sass/_reboot.scss +264 -264
- package/sass/_root.scss +56 -56
- package/sass/_utilities.scss +17 -17
- package/sass/_variables.scss +445 -445
- package/sass/helpers/_container.scss +11 -11
- package/sass/helpers/_embed.scss +36 -36
- package/sass/helpers/_grid.scss +53 -53
- package/sass/helpers/_image.scss +5 -5
- package/sass/helpers/_link.scss +15 -15
- package/sass/helpers/_rfs.scss +303 -303
- package/sass/helpers/_screenReader.scss +13 -13
- package/sass/helpers/_wrap.scss +5 -5
- package/sass/index.scss +12 -12
- package/sass/mixins/_breakpoints.scss +133 -133
- package/sass/mixins/_button.scss +116 -116
- package/sass/mixins/_caret.scss +41 -41
- package/sass/mixins/_clearfix.scss +7 -7
- package/sass/mixins/_colors.scss +23 -23
- package/sass/mixins/_container.scss +21 -21
- package/sass/mixins/_gradient.scss +55 -55
- package/sass/mixins/_grid.scss +156 -156
- package/sass/mixins/_group.scss +70 -70
- package/sass/mixins/_list.scss +18 -18
- package/sass/mixins/_screenReader.scss +22 -22
- package/sass/mixins/_wrap.scss +7 -7
- package/sass/modules/_alert.scss +60 -60
- package/sass/modules/_breadcrumbs.scss +43 -43
- package/sass/modules/_button.scss +170 -170
- package/sass/modules/_card.scss +107 -107
- package/sass/modules/_close.scss +59 -59
- package/sass/modules/_details.scss +48 -48
- package/sass/modules/_dialog.scss +47 -47
- package/sass/modules/_dropdown.scss +44 -43
- package/sass/modules/_form.scss +261 -261
- package/sass/modules/_list.scss +78 -78
- package/sass/modules/_loader.scss +183 -183
- package/sass/modules/_modal.scss +45 -45
- package/sass/modules/_nav.scss +136 -135
- package/sass/modules/_pill.scss +61 -61
- package/sass/modules/_table.scss +96 -96
- package/sass/modules/_tabs.scss +88 -93
- package/sass/modules/_tag.scss +72 -72
- package/sass/modules/_tile.scss +101 -101
- package/sass/modules/_tooltip.scss +108 -108
- package/sass/modules/form/_checkbox.scss +78 -78
- package/sass/modules/form/_file.scss +149 -149
- package/sass/modules/form/_formFieldGroup.scss +60 -60
- package/sass/modules/form/_output.scss +6 -6
- package/sass/modules/form/_progress.scss +55 -55
- package/sass/modules/form/_radio.scss +57 -57
- package/sass/modules/form/_range.scss +144 -144
- package/sass/modules/form/_select.scss +22 -22
- package/sass/modules/form/_text.scss +28 -28
- package/sass/modules/form/_textarea.scss +3 -3
- package/sass/modules/form/_toggle.scss +68 -68
- package/sass/utilities/_align.scss +25 -25
- package/sass/utilities/_border.scss +59 -59
- package/sass/utilities/_colors.scss +76 -76
- package/sass/utilities/_display.scss +25 -25
- package/sass/utilities/_flex.scss +65 -65
- package/sass/utilities/_float.scss +17 -17
- package/sass/utilities/_order.scss +23 -23
- package/sass/utilities/_overflow.scss +25 -25
- package/sass/utilities/_pointerEvents.scss +17 -17
- package/sass/utilities/_position.scss +59 -59
- package/sass/utilities/_shadow.scss +7 -7
- package/sass/utilities/_size.scss +118 -118
- package/sass/utilities/_spacing.scss +107 -107
- package/sass/utilities/_translate.scss +15 -15
- package/sass/utilities/_typography.scss +62 -62
- package/sass/utilities/_visibility.scss +17 -17
- package/sass/utilities/_zIndex.scss +15 -15
- package/tests.js +5 -5
- package/webpack.config.js +27 -27
- package/webpack.plugins.js +15 -15
- package/webpack.rules.js +8 -8
|
@@ -1,107 +1,107 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
@use "./../variables" as *;
|
|
3
|
-
@use "./../mixins/breakpoints" as *;
|
|
4
|
-
|
|
5
|
-
@each $breakpoint in map.keys($breakpoints) {
|
|
6
|
-
@include media-breakpoint-up($breakpoint) {
|
|
7
|
-
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
8
|
-
|
|
9
|
-
.margin-#{$infix}-auto {
|
|
10
|
-
margin: auto !important;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.margin-top-#{$infix}-auto,
|
|
14
|
-
.margin-y-#{$infix}-auto {
|
|
15
|
-
margin-top: auto !important;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.margin-bottom-#{$infix}-auto,
|
|
19
|
-
.margin-y-#{$infix}-auto {
|
|
20
|
-
margin-bottom: auto !important;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.margin-left-#{$infix}-auto,
|
|
24
|
-
.margin-x-#{$infix}-auto {
|
|
25
|
-
margin-left: auto !important;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.margin-right-#{$infix}-auto,
|
|
29
|
-
.margin-x-#{$infix}-auto {
|
|
30
|
-
margin-right: auto !important;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
@each $key, $value in $spacers {
|
|
34
|
-
.margin-#{$infix}-#{$key} {
|
|
35
|
-
margin: #{$value} !important;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.margin-top-#{$infix}-#{$key},
|
|
39
|
-
.margin-y-#{$infix}-#{$key} {
|
|
40
|
-
margin-top: #{$value} !important;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.margin-bottom-#{$infix}-#{$key},
|
|
44
|
-
.margin-y-#{$infix}-#{$key} {
|
|
45
|
-
margin-bottom: #{$value} !important;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.margin-left-#{$infix}-#{$key},
|
|
49
|
-
.margin-x-#{$infix}-#{$key} {
|
|
50
|
-
margin-left: #{$value} !important;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.margin-right-#{$infix}-#{$key},
|
|
54
|
-
.margin-x-#{$infix}-#{$key} {
|
|
55
|
-
margin-right: #{$value} !important;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.padding-#{$infix}-#{$key} {
|
|
59
|
-
padding: #{$value} !important;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.padding-top-#{$infix}-#{$key},
|
|
63
|
-
.padding-y-#{$infix}-#{$key} {
|
|
64
|
-
padding-top: #{$value} !important;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.padding-bottom-#{$infix}-#{$key},
|
|
68
|
-
.padding-y-#{$infix}-#{$key} {
|
|
69
|
-
padding-bottom: #{$value} !important;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.padding-left-#{$infix}-#{$key},
|
|
73
|
-
.padding-x-#{$infix}-#{$key} {
|
|
74
|
-
padding-left: #{$value} !important;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.padding-right-#{$infix}-#{$key},
|
|
78
|
-
.padding-x-#{$infix}-#{$key} {
|
|
79
|
-
padding-right: #{$value} !important;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.margin-#{$infix}-neg-#{$key} {
|
|
83
|
-
margin: calc(#{$value} * -1) !important;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.margin-top-#{$infix}-neg-#{$key},
|
|
87
|
-
.margin-y-#{$infix}-neg-#{$key} {
|
|
88
|
-
margin-top: calc(#{$value} * -1) !important;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.margin-bottom-#{$infix}-neg-#{$key},
|
|
92
|
-
.margin-y-#{$infix}-neg-#{$key} {
|
|
93
|
-
margin-bottom: calc(#{$value} * -1) !important;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.margin-left-#{$infix}-neg-#{$key},
|
|
97
|
-
.margin-x-#{$infix}-neg-#{$key} {
|
|
98
|
-
margin-left: calc(#{$value} * -1) !important;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.margin-right-#{$infix}-neg-#{$key},
|
|
102
|
-
.margin-x-#{$infix}-neg-#{$key} {
|
|
103
|
-
margin-right: calc(#{$value} * -1) !important;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "./../variables" as *;
|
|
3
|
+
@use "./../mixins/breakpoints" as *;
|
|
4
|
+
|
|
5
|
+
@each $breakpoint in map.keys($breakpoints) {
|
|
6
|
+
@include media-breakpoint-up($breakpoint) {
|
|
7
|
+
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
8
|
+
|
|
9
|
+
.margin-#{$infix}-auto {
|
|
10
|
+
margin: auto !important;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.margin-top-#{$infix}-auto,
|
|
14
|
+
.margin-y-#{$infix}-auto {
|
|
15
|
+
margin-top: auto !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.margin-bottom-#{$infix}-auto,
|
|
19
|
+
.margin-y-#{$infix}-auto {
|
|
20
|
+
margin-bottom: auto !important;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.margin-left-#{$infix}-auto,
|
|
24
|
+
.margin-x-#{$infix}-auto {
|
|
25
|
+
margin-left: auto !important;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.margin-right-#{$infix}-auto,
|
|
29
|
+
.margin-x-#{$infix}-auto {
|
|
30
|
+
margin-right: auto !important;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@each $key, $value in $spacers {
|
|
34
|
+
.margin-#{$infix}-#{$key} {
|
|
35
|
+
margin: #{$value} !important;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.margin-top-#{$infix}-#{$key},
|
|
39
|
+
.margin-y-#{$infix}-#{$key} {
|
|
40
|
+
margin-top: #{$value} !important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.margin-bottom-#{$infix}-#{$key},
|
|
44
|
+
.margin-y-#{$infix}-#{$key} {
|
|
45
|
+
margin-bottom: #{$value} !important;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.margin-left-#{$infix}-#{$key},
|
|
49
|
+
.margin-x-#{$infix}-#{$key} {
|
|
50
|
+
margin-left: #{$value} !important;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.margin-right-#{$infix}-#{$key},
|
|
54
|
+
.margin-x-#{$infix}-#{$key} {
|
|
55
|
+
margin-right: #{$value} !important;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.padding-#{$infix}-#{$key} {
|
|
59
|
+
padding: #{$value} !important;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.padding-top-#{$infix}-#{$key},
|
|
63
|
+
.padding-y-#{$infix}-#{$key} {
|
|
64
|
+
padding-top: #{$value} !important;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.padding-bottom-#{$infix}-#{$key},
|
|
68
|
+
.padding-y-#{$infix}-#{$key} {
|
|
69
|
+
padding-bottom: #{$value} !important;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.padding-left-#{$infix}-#{$key},
|
|
73
|
+
.padding-x-#{$infix}-#{$key} {
|
|
74
|
+
padding-left: #{$value} !important;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.padding-right-#{$infix}-#{$key},
|
|
78
|
+
.padding-x-#{$infix}-#{$key} {
|
|
79
|
+
padding-right: #{$value} !important;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.margin-#{$infix}-neg-#{$key} {
|
|
83
|
+
margin: calc(#{$value} * -1) !important;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.margin-top-#{$infix}-neg-#{$key},
|
|
87
|
+
.margin-y-#{$infix}-neg-#{$key} {
|
|
88
|
+
margin-top: calc(#{$value} * -1) !important;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.margin-bottom-#{$infix}-neg-#{$key},
|
|
92
|
+
.margin-y-#{$infix}-neg-#{$key} {
|
|
93
|
+
margin-bottom: calc(#{$value} * -1) !important;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.margin-left-#{$infix}-neg-#{$key},
|
|
97
|
+
.margin-x-#{$infix}-neg-#{$key} {
|
|
98
|
+
margin-left: calc(#{$value} * -1) !important;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.margin-right-#{$infix}-neg-#{$key},
|
|
102
|
+
.margin-x-#{$infix}-neg-#{$key} {
|
|
103
|
+
margin-right: calc(#{$value} * -1) !important;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
.translate--middle {
|
|
2
|
-
transform: translate(-50%, -50%) !important;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.translate-x--middle {
|
|
6
|
-
transform: translateX(-50%) !important;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.translate-y--middle {
|
|
10
|
-
transform: translateY(-50%) !important;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.translate--bottom {
|
|
14
|
-
transform: translateY(-100%) !important;
|
|
15
|
-
}
|
|
1
|
+
.translate--middle {
|
|
2
|
+
transform: translate(-50%, -50%) !important;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.translate-x--middle {
|
|
6
|
+
transform: translateX(-50%) !important;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.translate-y--middle {
|
|
10
|
+
transform: translateY(-50%) !important;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.translate--bottom {
|
|
14
|
+
transform: translateY(-100%) !important;
|
|
15
|
+
}
|
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
@use "./../variables" as *;
|
|
3
|
-
@use "./../mixins/breakpoints" as *;
|
|
4
|
-
|
|
5
|
-
@each $key, $value in $font-sizes {
|
|
6
|
-
.font-size--#{$key} {
|
|
7
|
-
font-size: #{$value} !important;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
@each $key, $value in $font-families {
|
|
12
|
-
.font-family--#{$key} {
|
|
13
|
-
font-family: #{$value} !important;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
@each $breakpoint in map.keys($breakpoints) {
|
|
18
|
-
@include media-breakpoint-up($breakpoint) {
|
|
19
|
-
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
20
|
-
|
|
21
|
-
@each $value in $text-aligns {
|
|
22
|
-
.text-align-#{$infix}-#{$value} {
|
|
23
|
-
text-align: #{$value} !important;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@each $value in $text-transforms {
|
|
28
|
-
.text-transform-#{$infix}-#{$value} {
|
|
29
|
-
text-transform: #{$value} !important;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
@each $value in $text-wraps {
|
|
34
|
-
.text-wrap-#{$infix}-#{$value} {
|
|
35
|
-
white-space: #{$value} !important;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
@each $key, $value in $font-weights {
|
|
40
|
-
.font-weight-#{$infix}-#{$key} {
|
|
41
|
-
font-weight: #{$value} !important;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@each $value in $font-styles {
|
|
46
|
-
.font-style-#{$infix}-#{$value} {
|
|
47
|
-
font-style: #{$value} !important;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.text-wrap--truncate {
|
|
54
|
-
white-space: nowrap !important;
|
|
55
|
-
overflow: hidden !important;
|
|
56
|
-
text-overflow: ellipsis !important;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
code {
|
|
60
|
-
color: $pink !important;
|
|
61
|
-
font-family: $font-family-monospace !important;
|
|
62
|
-
}
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "./../variables" as *;
|
|
3
|
+
@use "./../mixins/breakpoints" as *;
|
|
4
|
+
|
|
5
|
+
@each $key, $value in $font-sizes {
|
|
6
|
+
.font-size--#{$key} {
|
|
7
|
+
font-size: #{$value} !important;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@each $key, $value in $font-families {
|
|
12
|
+
.font-family--#{$key} {
|
|
13
|
+
font-family: #{$value} !important;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@each $breakpoint in map.keys($breakpoints) {
|
|
18
|
+
@include media-breakpoint-up($breakpoint) {
|
|
19
|
+
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
20
|
+
|
|
21
|
+
@each $value in $text-aligns {
|
|
22
|
+
.text-align-#{$infix}-#{$value} {
|
|
23
|
+
text-align: #{$value} !important;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@each $value in $text-transforms {
|
|
28
|
+
.text-transform-#{$infix}-#{$value} {
|
|
29
|
+
text-transform: #{$value} !important;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@each $value in $text-wraps {
|
|
34
|
+
.text-wrap-#{$infix}-#{$value} {
|
|
35
|
+
white-space: #{$value} !important;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@each $key, $value in $font-weights {
|
|
40
|
+
.font-weight-#{$infix}-#{$key} {
|
|
41
|
+
font-weight: #{$value} !important;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@each $value in $font-styles {
|
|
46
|
+
.font-style-#{$infix}-#{$value} {
|
|
47
|
+
font-style: #{$value} !important;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.text-wrap--truncate {
|
|
54
|
+
white-space: nowrap !important;
|
|
55
|
+
overflow: hidden !important;
|
|
56
|
+
text-overflow: ellipsis !important;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
code {
|
|
60
|
+
color: $pink !important;
|
|
61
|
+
font-family: $font-family-monospace !important;
|
|
62
|
+
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
@use "./../variables" as *;
|
|
3
|
-
@use "./../mixins/breakpoints" as *;
|
|
4
|
-
|
|
5
|
-
$visibilities: (visible, hidden) !default;
|
|
6
|
-
|
|
7
|
-
@each $breakpoint in map.keys($breakpoints) {
|
|
8
|
-
@include media-breakpoint-up($breakpoint) {
|
|
9
|
-
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
10
|
-
|
|
11
|
-
@each $value in $visibilities {
|
|
12
|
-
.visibility-#{$infix}-#{$value} {
|
|
13
|
-
visibility: #{$value} !important;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "./../variables" as *;
|
|
3
|
+
@use "./../mixins/breakpoints" as *;
|
|
4
|
+
|
|
5
|
+
$visibilities: (visible, hidden) !default;
|
|
6
|
+
|
|
7
|
+
@each $breakpoint in map.keys($breakpoints) {
|
|
8
|
+
@include media-breakpoint-up($breakpoint) {
|
|
9
|
+
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
10
|
+
|
|
11
|
+
@each $value in $visibilities {
|
|
12
|
+
.visibility-#{$infix}-#{$value} {
|
|
13
|
+
visibility: #{$value} !important;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
@use "./../variables" as *;
|
|
3
|
-
@use "./../mixins/breakpoints" as *;
|
|
4
|
-
|
|
5
|
-
@each $breakpoint in map.keys($breakpoints) {
|
|
6
|
-
@include media-breakpoint-up($breakpoint) {
|
|
7
|
-
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
8
|
-
|
|
9
|
-
@each $key, $value in $zindexes {
|
|
10
|
-
.zindex-#{$infix}-#{$key} {
|
|
11
|
-
z-index: #{$value} !important;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
}
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "./../variables" as *;
|
|
3
|
+
@use "./../mixins/breakpoints" as *;
|
|
4
|
+
|
|
5
|
+
@each $breakpoint in map.keys($breakpoints) {
|
|
6
|
+
@include media-breakpoint-up($breakpoint) {
|
|
7
|
+
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
8
|
+
|
|
9
|
+
@each $key, $value in $zindexes {
|
|
10
|
+
.zindex-#{$infix}-#{$key} {
|
|
11
|
+
z-index: #{$value} !important;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
package/tests.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import fusv from "find-unused-sass-variables";
|
|
2
|
-
|
|
3
|
-
fusv.findAsync("scss").then((result) => {
|
|
4
|
-
console.log(result.unused);
|
|
5
|
-
});
|
|
1
|
+
import fusv from "find-unused-sass-variables";
|
|
2
|
+
|
|
3
|
+
fusv.findAsync("scss").then((result) => {
|
|
4
|
+
console.log(result.unused);
|
|
5
|
+
});
|
package/webpack.config.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
const path = require("path");
|
|
2
|
-
const rules = require("./webpack.rules");
|
|
3
|
-
const plugins = require("./webpack.plugins");
|
|
4
|
-
|
|
5
|
-
module.exports = {
|
|
6
|
-
entry: "./index.js",
|
|
7
|
-
output: {
|
|
8
|
-
filename: "index.js",
|
|
9
|
-
path: path.resolve(__dirname, "dist"),
|
|
10
|
-
},
|
|
11
|
-
devServer: {
|
|
12
|
-
static: {
|
|
13
|
-
directory: path.resolve(path.join(__dirname, "dist")),
|
|
14
|
-
watch: true,
|
|
15
|
-
},
|
|
16
|
-
open: true,
|
|
17
|
-
liveReload: true,
|
|
18
|
-
watchFiles: ["sass/**/*", "index.html", "index.js"],
|
|
19
|
-
hot: true,
|
|
20
|
-
},
|
|
21
|
-
target: "web",
|
|
22
|
-
stats: {
|
|
23
|
-
loggingDebug: ["sass-loader"],
|
|
24
|
-
},
|
|
25
|
-
plugins,
|
|
26
|
-
module: { rules },
|
|
27
|
-
};
|
|
1
|
+
const path = require("path");
|
|
2
|
+
const rules = require("./webpack.rules");
|
|
3
|
+
const plugins = require("./webpack.plugins");
|
|
4
|
+
|
|
5
|
+
module.exports = {
|
|
6
|
+
entry: "./index.js",
|
|
7
|
+
output: {
|
|
8
|
+
filename: "index.js",
|
|
9
|
+
path: path.resolve(__dirname, "dist"),
|
|
10
|
+
},
|
|
11
|
+
devServer: {
|
|
12
|
+
static: {
|
|
13
|
+
directory: path.resolve(path.join(__dirname, "dist")),
|
|
14
|
+
watch: true,
|
|
15
|
+
},
|
|
16
|
+
open: true,
|
|
17
|
+
liveReload: true,
|
|
18
|
+
watchFiles: ["sass/**/*", "index.html", "index.js"],
|
|
19
|
+
hot: true,
|
|
20
|
+
},
|
|
21
|
+
target: "web",
|
|
22
|
+
stats: {
|
|
23
|
+
loggingDebug: ["sass-loader"],
|
|
24
|
+
},
|
|
25
|
+
plugins,
|
|
26
|
+
module: { rules },
|
|
27
|
+
};
|
package/webpack.plugins.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
const path = require("path");
|
|
2
|
-
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
3
|
-
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
|
4
|
-
|
|
5
|
-
module.exports = [
|
|
6
|
-
new HtmlWebpackPlugin({
|
|
7
|
-
title: "Claritas Web Framework",
|
|
8
|
-
template: path.resolve(path.join(__dirname, "index.html")),
|
|
9
|
-
filename: "index.html", // output file
|
|
10
|
-
}),
|
|
11
|
-
new MiniCssExtractPlugin({
|
|
12
|
-
filename: "./index.css",
|
|
13
|
-
chunkFilename: "[id].css",
|
|
14
|
-
}),
|
|
15
|
-
];
|
|
1
|
+
const path = require("path");
|
|
2
|
+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
3
|
+
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
|
4
|
+
|
|
5
|
+
module.exports = [
|
|
6
|
+
new HtmlWebpackPlugin({
|
|
7
|
+
title: "Claritas Web Framework",
|
|
8
|
+
template: path.resolve(path.join(__dirname, "index.html")),
|
|
9
|
+
filename: "index.html", // output file
|
|
10
|
+
}),
|
|
11
|
+
new MiniCssExtractPlugin({
|
|
12
|
+
filename: "./index.css",
|
|
13
|
+
chunkFilename: "[id].css",
|
|
14
|
+
}),
|
|
15
|
+
];
|
package/webpack.rules.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
2
|
-
|
|
3
|
-
module.exports = [
|
|
4
|
-
{
|
|
5
|
-
test: /\.(?:css|scss)$/i,
|
|
6
|
-
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
|
|
7
|
-
},
|
|
8
|
-
];
|
|
1
|
+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
2
|
+
|
|
3
|
+
module.exports = [
|
|
4
|
+
{
|
|
5
|
+
test: /\.(?:css|scss)$/i,
|
|
6
|
+
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
|
|
7
|
+
},
|
|
8
|
+
];
|