minolith 1.0.1 → 1.0.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.
- package/dist/css/minolith-skelton.css +1134 -837
- package/dist/css/minolith-skelton.css.map +1 -1
- package/dist/css/minolith-skelton.min.css +1134 -837
- package/dist/css/minolith-skelton.min.css.map +1 -1
- package/dist/css/minolith.css +5689 -3055
- package/dist/css/minolith.css.map +1 -1
- package/dist/css/minolith.min.css +2564 -68
- package/dist/css/minolith.min.css.map +1 -1
- package/package.json +1 -1
- package/src/backgrounds/dot.scss +12 -12
- package/src/backgrounds/gingham.scss +18 -19
- package/src/backgrounds/rhombus.scss +9 -9
- package/src/backgrounds/stripe.scss +8 -8
- package/src/backgrounds/zigzag.scss +14 -14
- package/src/base/normalize.scss +2 -1
- package/src/components/accordion.scss +154 -87
- package/src/components/badge.scss +151 -62
- package/src/components/blockquote.scss +27 -23
- package/src/components/breadcrumbs.scss +19 -12
- package/src/components/button.scss +132 -69
- package/src/components/card.scss +96 -30
- package/src/components/dialogue.scss +103 -102
- package/src/components/footer.scss +16 -4
- package/src/components/header.scss +1 -1
- package/src/components/link.scss +1 -0
- package/src/components/message.scss +74 -22
- package/src/components/modal.scss +10 -10
- package/src/components/nav.scss +595 -278
- package/src/components/progress.scss +32 -9
- package/src/css-variables/color.scss +31 -1
- package/src/functions/string.scss +12 -0
- package/src/mixins/element.scss +2 -2
- package/src/variables/color.scss +1082 -798
|
@@ -3,13 +3,27 @@
|
|
|
3
3
|
@use "../mixins/index.scss" as mixins;
|
|
4
4
|
|
|
5
5
|
.progress {
|
|
6
|
+
--#{variables.$prefix}color-progress-fore: var(
|
|
7
|
+
--#{variables.$prefix}color-default-progress-fore,
|
|
8
|
+
--#{variables.$prefix}color-default-fore
|
|
9
|
+
);
|
|
10
|
+
--#{variables.$prefix}color-progress-back: var(
|
|
11
|
+
--#{variables.$prefix}color-default-progress-back,
|
|
12
|
+
--#{variables.$prefix}color-default-back
|
|
13
|
+
);
|
|
14
|
+
--#{variables.$prefix}color-progress-border: var(
|
|
15
|
+
--#{variables.$prefix}color-default-progress-border,
|
|
16
|
+
--#{variables.$prefix}color-default-border
|
|
17
|
+
);
|
|
18
|
+
--#{variables.$prefix}progress-percent: 0;
|
|
19
|
+
|
|
6
20
|
@include mixins.element();
|
|
7
21
|
@include mixins.animation() {
|
|
8
22
|
border-radius: var(--#{variables.$prefix}border-radius-pill);
|
|
9
23
|
border-style: solid;
|
|
10
24
|
border-width: var(--#{variables.$prefix}border-width-thick);
|
|
11
|
-
background-color: var(--#{variables.$prefix}color-
|
|
12
|
-
color: var(--#{variables.$prefix}color-
|
|
25
|
+
background-color: var(--#{variables.$prefix}color-progress-back);
|
|
26
|
+
color: var(--#{variables.$prefix}color-progress-fore);
|
|
13
27
|
height: 1rem;
|
|
14
28
|
position: relative;
|
|
15
29
|
&::before {
|
|
@@ -19,23 +33,32 @@
|
|
|
19
33
|
inset: 0 100% 0 0;
|
|
20
34
|
border-radius: inherit;
|
|
21
35
|
background: currentColor;
|
|
36
|
+
inset: 0 calc((100 - var(--#{variables.$prefix}progress-percent)) * 1%) 0
|
|
37
|
+
0;
|
|
22
38
|
}
|
|
23
39
|
|
|
24
40
|
@for $p from 0 through 100 {
|
|
25
41
|
&.is-#{$p}percent {
|
|
26
|
-
|
|
27
|
-
&::before {
|
|
28
|
-
inset: 0 $val 0 0;
|
|
29
|
-
}
|
|
42
|
+
--#{variables.$prefix}progress-percent: #{$p};
|
|
30
43
|
}
|
|
31
44
|
}
|
|
32
45
|
|
|
33
46
|
@if (not variables.$is-skelton) {
|
|
34
47
|
@each $color in variables.$colors {
|
|
35
|
-
|
|
48
|
+
$colorName: map.get($color, "name");
|
|
36
49
|
&.is-#{$colorName} {
|
|
37
|
-
|
|
38
|
-
|
|
50
|
+
--#{variables.$prefix}color-progress-fore: var(
|
|
51
|
+
--#{variables.$prefix}color-#{$colorName}-progress-fore,
|
|
52
|
+
--#{variables.$prefix}color-#{$colorName}-fore
|
|
53
|
+
);
|
|
54
|
+
--#{variables.$prefix}color-progress-back: var(
|
|
55
|
+
--#{variables.$prefix}color-#{$colorName}-progress-back,
|
|
56
|
+
--#{variables.$prefix}color-#{$colorName}-back
|
|
57
|
+
);
|
|
58
|
+
--#{variables.$prefix}color-progress-border: var(
|
|
59
|
+
--#{variables.$prefix}color-#{$colorName}-progress-border,
|
|
60
|
+
--#{variables.$prefix}color-#{$colorName}-border
|
|
61
|
+
);
|
|
39
62
|
}
|
|
40
63
|
}
|
|
41
64
|
}
|
|
@@ -294,6 +294,21 @@
|
|
|
294
294
|
}
|
|
295
295
|
//#endregion message
|
|
296
296
|
|
|
297
|
+
//#region nav
|
|
298
|
+
$nav: map.get($colorShade, "nav");
|
|
299
|
+
@if ($nav != null) {
|
|
300
|
+
@include setColor($nav, "default", $name, "nav");
|
|
301
|
+
$navMenu: map.get($nav, "navMenu");
|
|
302
|
+
@if ($navMenu != null) {
|
|
303
|
+
@include setColor($navMenu, "default", $name, "nav-menu");
|
|
304
|
+
$navMenuItem: map.get($navMenu, "navMenuItem");
|
|
305
|
+
@if ($navMenuItem != null) {
|
|
306
|
+
@include setColor($navMenuItem, "default", $name, "nav-menu-item");
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
//#endregion nav
|
|
311
|
+
|
|
297
312
|
//#region progress
|
|
298
313
|
$progress: map.get($colorShade, "progress");
|
|
299
314
|
@if ($progress != null) {
|
|
@@ -528,10 +543,25 @@
|
|
|
528
543
|
}
|
|
529
544
|
//#endregion message
|
|
530
545
|
|
|
546
|
+
//#region nav
|
|
547
|
+
$nav: map.get($colorShade, "nav");
|
|
548
|
+
@if ($nav != null) {
|
|
549
|
+
@include setColor($nav, $colorName, $name, "nav");
|
|
550
|
+
$navMenu: map.get($nav, "navMenu");
|
|
551
|
+
@if ($navMenu != null) {
|
|
552
|
+
@include setColor($navMenu, $colorName, $name, "nav-menu");
|
|
553
|
+
$navMenuItem: map.get($navMenu, "navMenuItem");
|
|
554
|
+
@if ($navMenuItem != null) {
|
|
555
|
+
@include setColor($navMenuItem, $colorName, $name, "nav-menu-item");
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
}
|
|
559
|
+
//#endregion nav
|
|
560
|
+
|
|
531
561
|
//#region progress
|
|
532
562
|
$progress: map.get($colorShade, "progress");
|
|
533
563
|
@if ($progress != null) {
|
|
534
|
-
@include setColor($
|
|
564
|
+
@include setColor($progress, $colorName, $name, "progress");
|
|
535
565
|
}
|
|
536
566
|
//#endregion progress
|
|
537
567
|
|
package/src/mixins/element.scss
CHANGED