minolith 1.0.0 → 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.
Files changed (43) hide show
  1. package/dist/css/minolith-skelton.css +1139 -842
  2. package/dist/css/minolith-skelton.css.map +1 -1
  3. package/dist/css/minolith-skelton.min.css +1139 -842
  4. package/dist/css/minolith-skelton.min.css.map +1 -1
  5. package/dist/css/minolith-utilities.css +55973 -77487
  6. package/dist/css/minolith-utilities.css.map +1 -1
  7. package/dist/css/minolith-utilities.min.css +55973 -77487
  8. package/dist/css/minolith-utilities.min.css.map +1 -1
  9. package/dist/css/minolith.css +5689 -3055
  10. package/dist/css/minolith.css.map +1 -1
  11. package/dist/css/minolith.min.css +2564 -68
  12. package/dist/css/minolith.min.css.map +1 -1
  13. package/package.json +1 -1
  14. package/src/backgrounds/dot.scss +12 -12
  15. package/src/backgrounds/gingham.scss +18 -19
  16. package/src/backgrounds/rhombus.scss +9 -9
  17. package/src/backgrounds/stripe.scss +8 -8
  18. package/src/backgrounds/zigzag.scss +14 -14
  19. package/src/base/normalize.scss +2 -1
  20. package/src/components/accordion.scss +154 -87
  21. package/src/components/badge.scss +151 -62
  22. package/src/components/blockquote.scss +27 -23
  23. package/src/components/breadcrumbs.scss +19 -12
  24. package/src/components/button.scss +132 -69
  25. package/src/components/card.scss +96 -30
  26. package/src/components/dialogue.scss +103 -102
  27. package/src/components/footer.scss +16 -4
  28. package/src/components/header.scss +1 -1
  29. package/src/components/link.scss +1 -0
  30. package/src/components/message.scss +74 -22
  31. package/src/components/modal.scss +10 -10
  32. package/src/components/nav.scss +595 -278
  33. package/src/components/progress.scss +32 -9
  34. package/src/css-variables/animation.scss +1 -1
  35. package/src/css-variables/border.scss +1 -1
  36. package/src/css-variables/color.scss +32 -2
  37. package/src/css-variables/miscellaneous.scss +1 -1
  38. package/src/css-variables/typography.scss +1 -1
  39. package/src/functions/string.scss +12 -0
  40. package/src/mixins/color.scss +0 -32
  41. package/src/mixins/element.scss +2 -2
  42. package/src/utilities/color.scss +112 -6
  43. package/src/variables/color.scss +1082 -798
package/src/components/blockquote.scss CHANGED
@@ -4,17 +4,30 @@
4
4
  @use "../mixins/index.scss" as mixins;
5
5
 
6
6
  .blockquote {
7
+ //#region local css variables
8
+ --#{variables.$prefix}color-blockquote-fore: var(
9
+ --#{variables.$prefix}color-default-blockquote-fore
10
+ );
11
+ --#{variables.$prefix}color-blockquote-back: var(
12
+ --#{variables.$prefix}color-default-blockquote-back
13
+ );
14
+ --#{variables.$prefix}color-blockquote-border: var(
15
+ --#{variables.$prefix}color-default-blockquote-border
16
+ );
17
+
7
18
  --#{variables.$prefix}blockquote-icon-font-size: var(
8
19
  --#{variables.$prefix}font-size-xxxlarge
9
20
  );
10
21
  --#{variables.$prefix}blockquote-border-left-width: var(
11
22
  --#{variables.$prefix}border-width-thick
12
23
  );
24
+ //#endregion local css variables
25
+
13
26
  @include mixins.element();
14
27
  position: relative;
15
- color: var(--#{variables.$prefix}color-default-blockquote-fore);
16
- background-color: var(--#{variables.$prefix}color-default-blockquote-back);
17
- border-left-color: var(--#{variables.$prefix}color-default-blockquote-border);
28
+ color: var(--#{variables.$prefix}color-blockquote-fore);
29
+ background-color: var(--#{variables.$prefix}color-blockquote-back);
30
+ border-left-color: var(--#{variables.$prefix}color-blockquote-border);
18
31
  border-left-style: solid;
19
32
  border-left-width: var(--#{variables.$prefix}blockquote-border-left-width);
20
33
  margin: 0;
@@ -38,7 +51,7 @@
38
51
  content: open-quote;
39
52
  display: block;
40
53
  max-width: 100%;
41
- color: var(--#{variables.$prefix}color-default-blockquote-fore);
54
+ color: var(--#{variables.$prefix}color-blockquote-fore);
42
55
  font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
43
56
  }
44
57
  }
@@ -65,27 +78,18 @@
65
78
  @each $color in variables.$colors {
66
79
  $colorName: map.get($color, "name");
67
80
  &.is-#{$colorName} {
68
- background-color: var(--#{variables.$prefix}color-#{$colorName}-blockquote-back);
69
- border-left-color: var(
81
+
82
+ //#region local css variables
83
+ --#{variables.$prefix}color-blockquote-fore: var(
84
+ --#{variables.$prefix}color-#{$colorName}-blockquote-fore
85
+ );
86
+ --#{variables.$prefix}color-blockquote-back: var(
87
+ --#{variables.$prefix}color-#{$colorName}-blockquote-back
88
+ );
89
+ --#{variables.$prefix}color-blockquote-border: var(
70
90
  --#{variables.$prefix}color-#{$colorName}-blockquote-border
71
91
  );
72
- color: var(--#{variables.$prefix}color-#{$colorName}-blockquote-fore);
73
- &.has-quote,
74
- &.has-quote-before {
75
- &::before {
76
- color: var(
77
- --#{variables.$prefix}color-#{$colorName}-blockquote-fore
78
- );
79
- }
80
- }
81
- &.has-quote,
82
- &.has-quote-after {
83
- &::after {
84
- color: var(
85
- --#{variables.$prefix}color-#{$colorName}-blockquote-fore
86
- );
87
- }
88
- }
92
+ //#endregion local css variables
89
93
  }
90
94
  }
91
95
  }
package/src/components/breadcrumbs.scss CHANGED
@@ -4,6 +4,15 @@
4
4
  @use "../mixins/index.scss" as mixins;
5
5
 
6
6
  .breadcrumbs {
7
+ //#region local css variables
8
+ --#{variables.$prefix}color-breadcrumb-fore: var(
9
+ --#{variables.$prefix}color-default-breadcrumb-fore
10
+ );
11
+ --#{variables.$prefix}color-breadcrumb-divider-fore: var(
12
+ --#{variables.$prefix}color-default-breadcrumb-divider-fore
13
+ );
14
+ //#endregion local css variables
15
+
7
16
  @include mixins.element();
8
17
  display: flex;
9
18
  flex-wrap: wrap;
@@ -11,13 +20,13 @@
11
20
  > .breadcrumb {
12
21
  @include mixins.element();
13
22
  text-wrap: wrap;
14
- color: var(--#{variables.$prefix}color-default-breadcrumb-fore);
23
+ color: var(--#{variables.$prefix}color-breadcrumb-fore);
15
24
  &:has(~ .breadcrumb) {
16
25
  &::after {
17
26
  @include mixins.element();
18
27
  content: var(--#{variables.$prefix}breadcrumb-divider);
19
28
  margin: 0 0.5rem;
20
- color: var(--#{variables.$prefix}color-default-breadcrumb-divider-fore);
29
+ color: var(--#{variables.$prefix}color-breadcrumb-divider-fore);
21
30
  user-select: none;
22
31
  }
23
32
  }
@@ -27,16 +36,14 @@
27
36
  @each $color in variables.$colors {
28
37
  $colorName: map.get($color, "name");
29
38
  &.is-#{$colorName} {
30
- > .breadcrumb {
31
- color: var(--#{variables.$prefix}color-#{$colorName}-breadcrumb-fore);
32
- &:has(~ .breadcrumb) {
33
- &::after {
34
- color: var(
35
- --#{variables.$prefix}color-#{$colorName}-breadcrumb-divider-fore
36
- );
37
- }
38
- }
39
- }
39
+ //#region local css variables
40
+ --#{variables.$prefix}color-breadcrumb-fore: var(
41
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-fore
42
+ );
43
+ --#{variables.$prefix}color-breadcrumb-divider-fore: var(
44
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-divider-fore
45
+ );
46
+ //#endregion local css variables
40
47
  }
41
48
  }
42
49
  }
package/src/components/button.scss CHANGED
@@ -3,12 +3,73 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  .button {
6
+ //#region local css variables
7
+ --#{variables.$prefix}color-button-fore: var(
8
+ --#{variables.$prefix}color-default-button-fore
9
+ );
10
+ --#{variables.$prefix}color-button-back: var(
11
+ --#{variables.$prefix}color-default-button-back
12
+ );
13
+ --#{variables.$prefix}color-button-border: var(
14
+ --#{variables.$prefix}color-default-button-border
15
+ );
16
+
17
+ //#region focus
18
+ --#{variables.$prefix}color-button-focus-fore: var(
19
+ --#{variables.$prefix}color-default-button-focus-fore
20
+ );
21
+ --#{variables.$prefix}color-button-focus-back: var(
22
+ --#{variables.$prefix}color-default-button-focus-back
23
+ );
24
+ --#{variables.$prefix}color-button-focus-border: var(
25
+ --#{variables.$prefix}color-default-button-focus-border
26
+ );
27
+ //#endregion focus
28
+
29
+ //#region hover
30
+ --#{variables.$prefix}color-button-hover-fore: var(
31
+ --#{variables.$prefix}color-default-button-hover-fore
32
+ );
33
+ --#{variables.$prefix}color-button-hover-back: var(
34
+ --#{variables.$prefix}color-default-button-hover-back
35
+ );
36
+ --#{variables.$prefix}color-button-hover-border: var(
37
+ --#{variables.$prefix}color-default-button-hover-border
38
+ );
39
+ //#endregion hover
40
+
41
+ //#region active
42
+ --#{variables.$prefix}color-button-active-fore: var(
43
+ --#{variables.$prefix}color-default-button-active-fore
44
+ );
45
+ --#{variables.$prefix}color-button-active-back: var(
46
+ --#{variables.$prefix}color-default-button-active-back
47
+ );
48
+ --#{variables.$prefix}color-button-active-border: var(
49
+ --#{variables.$prefix}color-default-button-active-border
50
+ );
51
+ //#endregion active
52
+
53
+ //#region disabled
54
+ --#{variables.$prefix}color-button-disabled-fore: var(
55
+ --#{variables.$prefix}color-default-button-disabled-fore
56
+ );
57
+ --#{variables.$prefix}color-button-disabled-back: var(
58
+ --#{variables.$prefix}color-default-button-disabled-back
59
+ );
60
+ --#{variables.$prefix}color-button-disabled-border: var(
61
+ --#{variables.$prefix}color-default-button-disabled-border
62
+ );
63
+ //#endregion disabled
64
+
65
+ //#endregion local css variables
66
+
6
67
  @include mixins.element();
7
- background-color: var(--#{variables.$prefix}color-default-button-back);
8
- border-color: var(--#{variables.$prefix}color-default-button-border);
68
+ background-color: var(--#{variables.$prefix}color-button-back);
69
+ border-color: var(--#{variables.$prefix}color-button-border);
9
70
  border-radius: var(--#{variables.$prefix}border-radius-medium);
10
71
  border-style: solid;
11
- color: var(--#{variables.$prefix}color-default-button-fore);
72
+ color: var(--#{variables.$prefix}color-button-fore);
12
73
  cursor: pointer;
13
74
  display: inline-block;
14
75
  height: auto;
@@ -54,103 +115,105 @@
54
115
  &.is-focused {
55
116
  outline: none;
56
117
  background-color: var(
57
- --#{variables.$prefix}color-default-button-focus-back
118
+ --#{variables.$prefix}color-button-focus-back
58
119
  );
59
- border-color: var(--#{variables.$prefix}color-default-button-focus-border);
60
- color: var(--#{variables.$prefix}color-default-button-focus-fore);
120
+ border-color: var(--#{variables.$prefix}color-button-focus-border);
121
+ color: var(--#{variables.$prefix}color-button-focus-fore);
61
122
  }
62
123
  &:hover,
63
124
  &.is-hovered,
64
125
  &.is-hovered {
65
126
  outline: none;
66
127
  background-color: var(
67
- --#{variables.$prefix}color-default-button-hover-back
128
+ --#{variables.$prefix}color-button-hover-back
68
129
  );
69
- border-color: var(--#{variables.$prefix}color-default-button-hover-border);
70
- color: var(--#{variables.$prefix}color-default-button-hover-fore);
130
+ border-color: var(--#{variables.$prefix}color-button-hover-border);
131
+ color: var(--#{variables.$prefix}color-button-hover-fore);
71
132
  }
72
133
  &:active,
73
134
  &.is-active {
74
135
  background-color: var(
75
- --#{variables.$prefix}color-default-button-active-back
136
+ --#{variables.$prefix}color-button-active-back
76
137
  );
77
- border-color: var(--#{variables.$prefix}color-default-button-active-border);
78
- color: var(--#{variables.$prefix}color-default-button-active-fore);
138
+ border-color: var(--#{variables.$prefix}color-button-active-border);
139
+ color: var(--#{variables.$prefix}color-button-active-fore);
79
140
  }
80
141
  &[disabled],
81
142
  fieldset[disabled],
82
143
  &.is-disabled {
83
144
  background-color: var(
84
- --#{variables.$prefix}color-default-button-disabled-back
145
+ --#{variables.$prefix}color-button-disabled-back
85
146
  );
86
147
  border-color: var(
87
- --#{variables.$prefix}color-default-button-disabled-border
148
+ --#{variables.$prefix}color-button-disabled-border
88
149
  );
89
- color: var(--#{variables.$prefix}color-default-button-disabled-fore);
150
+ color: var(--#{variables.$prefix}color-button-disabled-fore);
90
151
  }
91
152
 
92
153
  @if (not variables.$is-skelton) {
93
154
  @each $color in variables.$colors {
94
155
  $colorName: map.get($color, "name");
95
156
  &.is-#{$colorName} {
96
- background-color: var(
157
+ //#region local css variables
158
+ --#{variables.$prefix}color-button-fore: var(
159
+ --#{variables.$prefix}color-#{$colorName}-button-fore
160
+ );
161
+ --#{variables.$prefix}color-button-back: var(
97
162
  --#{variables.$prefix}color-#{$colorName}-button-back
98
163
  );
99
- border-color: var(
164
+ --#{variables.$prefix}color-button-border: var(
100
165
  --#{variables.$prefix}color-#{$colorName}-button-border
101
166
  );
102
- color: var(--#{variables.$prefix}color-#{$colorName}-button-fore);
103
- &:focus,
104
- &.is-focus,
105
- &.is-focused {
106
- background-color: var(
107
- --#{variables.$prefix}color-#{$colorName}-button-focus-back
108
- );
109
- border-color: var(
110
- --#{variables.$prefix}color-#{$colorName}-button-focus-border
111
- );
112
- color: var(
113
- --#{variables.$prefix}color-#{$colorName}-button-focus-fore
114
- );
115
- }
116
- &:hover,
117
- &.is-hover,
118
- &.is-hovered {
119
- background-color: var(
120
- --#{variables.$prefix}color-#{$colorName}-button-hover-back
121
- );
122
- border-color: var(
123
- --#{variables.$prefix}color-#{$colorName}-button-hover-border
124
- );
125
- color: var(
126
- --#{variables.$prefix}color-#{$colorName}-button-hover-fore
127
- );
128
- }
129
- &:active,
130
- &.is-active {
131
- background-color: var(
132
- --#{variables.$prefix}color-#{$colorName}-button-active-back
133
- );
134
- border-color: var(
135
- --#{variables.$prefix}color-#{$colorName}-button-active-border
136
- );
137
- color: var(
138
- --#{variables.$prefix}color-#{$colorName}-button-active-fore
139
- );
140
- }
141
- &[disabled],
142
- fieldset[disabled],
143
- &.is-disabled {
144
- background-color: var(
145
- --#{variables.$prefix}color-#{$colorName}-button-disabled-back
146
- );
147
- border-color: var(
148
- --#{variables.$prefix}color-#{$colorName}-button-disabled-border
149
- );
150
- color: var(
151
- --#{variables.$prefix}color-#{$colorName}-button-disabled-fore
152
- );
153
- }
167
+
168
+ //#region focus
169
+ --#{variables.$prefix}color-button-focus-fore: var(
170
+ --#{variables.$prefix}color-#{$colorName}-button-focus-fore
171
+ );
172
+ --#{variables.$prefix}color-button-focus-back: var(
173
+ --#{variables.$prefix}color-#{$colorName}-button-focus-back
174
+ );
175
+ --#{variables.$prefix}color-button-focus-border: var(
176
+ --#{variables.$prefix}color-#{$colorName}-button-focus-border
177
+ );
178
+ //#endregion focus
179
+
180
+ //#region hover
181
+ --#{variables.$prefix}color-button-hover-fore: var(
182
+ --#{variables.$prefix}color-#{$colorName}-button-hover-fore
183
+ );
184
+ --#{variables.$prefix}color-button-hover-back: var(
185
+ --#{variables.$prefix}color-#{$colorName}-button-hover-back
186
+ );
187
+ --#{variables.$prefix}color-button-hover-border: var(
188
+ --#{variables.$prefix}color-#{$colorName}-button-hover-border
189
+ );
190
+ //#endregion hover
191
+
192
+ //#region active
193
+ --#{variables.$prefix}color-button-active-fore: var(
194
+ --#{variables.$prefix}color-#{$colorName}-button-active-fore
195
+ );
196
+ --#{variables.$prefix}color-button-active-back: var(
197
+ --#{variables.$prefix}color-#{$colorName}-button-active-back
198
+ );
199
+ --#{variables.$prefix}color-button-active-border: var(
200
+ --#{variables.$prefix}color-#{$colorName}-button-active-border
201
+ );
202
+ //#endregion active
203
+
204
+ //#region disabled
205
+ --#{variables.$prefix}color-button-disabled-fore: var(
206
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-fore
207
+ );
208
+ --#{variables.$prefix}color-button-disabled-back: var(
209
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-back
210
+ );
211
+ --#{variables.$prefix}color-button-disabled-border: var(
212
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-border
213
+ );
214
+ //#endregion disabled
215
+
216
+ //#endregion local css variables
154
217
  }
155
218
  }
156
219
  }
package/src/components/card.scss CHANGED
@@ -3,26 +3,71 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  .card {
6
+ //#region local css variables
7
+ --#{variables.$prefix}color-card-fore: var(
8
+ --#{variables.$prefix}color-default-card-fore
9
+ );
10
+ --#{variables.$prefix}color-card-back: var(
11
+ --#{variables.$prefix}color-default-card-back
12
+ );
13
+ --#{variables.$prefix}color-card-border: var(
14
+ --#{variables.$prefix}color-default-card-border
15
+ );
16
+ --#{variables.$prefix}color-card-shadow: var(
17
+ --#{variables.$prefix}color-default-card-shadow
18
+ );
19
+
20
+ --#{variables.$prefix}color-card-header-fore: var(
21
+ --#{variables.$prefix}color-default-card-header-fore
22
+ );
23
+ --#{variables.$prefix}color-card-header-back: var(
24
+ --#{variables.$prefix}color-default-card-header-back
25
+ );
26
+ --#{variables.$prefix}color-card-header-border: var(
27
+ --#{variables.$prefix}color-default-card-header-border
28
+ );
29
+
30
+ --#{variables.$prefix}color-card-body-fore: var(
31
+ --#{variables.$prefix}color-default-card-body-fore
32
+ );
33
+ --#{variables.$prefix}color-card-body-back: var(
34
+ --#{variables.$prefix}color-default-card-body-back
35
+ );
36
+ --#{variables.$prefix}color-card-body-border: var(
37
+ --#{variables.$prefix}color-default-card-body-border
38
+ );
39
+
40
+ --#{variables.$prefix}color-card-footer-fore: var(
41
+ --#{variables.$prefix}color-default-card-body-fore
42
+ );
43
+ --#{variables.$prefix}color-card-footer-back: var(
44
+ --#{variables.$prefix}color-default-card-body-back
45
+ );
46
+ --#{variables.$prefix}color-card-footer-border: var(
47
+ --#{variables.$prefix}color-default-card-body-border
48
+ );
49
+ //#endregion local css variables
50
+
6
51
  @include mixins.element();
7
52
  display: block;
8
- background-color: var(--#{variables.$prefix}color-default-card-back);
53
+ background-color: var(--#{variables.$prefix}color-card-back);
9
54
  border-radius: calc(
10
55
  var(--#{variables.$prefix}border-radius-medium) +
11
56
  var(--#{variables.$prefix}border-width-thin)
12
57
  );
13
- border-color: var(--#{variables.$prefix}color-default-card-border);
58
+ border-color: var(--#{variables.$prefix}color-card-border);
14
59
  border-style: solid;
15
60
  border-width: var(--#{variables.$prefix}border-width-thin);
16
- color: var(--#{variables.$prefix}color-default-card-fore);
61
+ color: var(--#{variables.$prefix}color-card-fore);
17
62
  &.has-shadow {
18
63
  box-shadow: 0 0.5rem 0.5rem var(--#{variables.$prefix}color-card-shadow);
19
64
  }
20
65
  >.card-header {
21
66
  @include mixins.element();
22
- background-color: var(--#{variables.$prefix}color-default-card-header-back);
67
+ background-color: var(--#{variables.$prefix}color-card-header-back);
23
68
  border-radius: var(--#{variables.$prefix}border-radius-medium)
24
69
  var(--#{variables.$prefix}border-radius-medium) 0 0;
25
- color: var(--#{variables.$prefix}color-default-card-header-fore);
70
+ color: var(--#{variables.$prefix}color-card-header-fore);
26
71
  padding: 0.5rem;
27
72
  display: block;
28
73
  font-size: var(--#{variables.$prefix}font-size-medium);
@@ -30,8 +75,8 @@
30
75
  }
31
76
  >.card-body {
32
77
  @include mixins.element();
33
- background-color: var(--#{variables.$prefix}color-default-card-body-back);
34
- color: var(--#{variables.$prefix}color-default-card-body-fore);
78
+ background-color: var(--#{variables.$prefix}color-card-body-back);
79
+ color: var(--#{variables.$prefix}color-card-body-fore);
35
80
  padding: 0.5rem;
36
81
  display: block;
37
82
  &:first-child {
@@ -48,10 +93,10 @@
48
93
  }
49
94
  >.card-footer {
50
95
  @include mixins.element();
51
- background-color: var(--#{variables.$prefix}color-default-card-footer-back);
96
+ background-color: var(--#{variables.$prefix}color-card-footer-back);
52
97
  border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
53
98
  var(--#{variables.$prefix}border-radius-medium);
54
- color: var(--#{variables.$prefix}color-default-card-footer-fore);
99
+ color: var(--#{variables.$prefix}color-card-footer-fore);
55
100
  padding: 0.5rem;
56
101
  display: block;
57
102
  }
@@ -60,29 +105,50 @@
60
105
  @each $color in variables.$colors {
61
106
  $colorName: map.get($color, "name");
62
107
  &.is-#{$colorName} {
63
- background-color: var(
108
+ //#region local css variables
109
+ --#{variables.$prefix}color-card-fore: var(
110
+ --#{variables.$prefix}color-#{$colorName}-card-fore
111
+ );
112
+ --#{variables.$prefix}color-card-back: var(
64
113
  --#{variables.$prefix}color-#{$colorName}-card-back
65
114
  );
66
- border-color: var(--#{variables.$prefix}color-#{$colorName}-card-border);
67
- color: var(--#{variables.$prefix}color-#{$colorName}-card-fore);
68
- >.card-header {
69
- background-color: var(
70
- --#{variables.$prefix}color-#{$colorName}-card-header-back
71
- );
72
- color: var(--#{variables.$prefix}color-#{$colorName}-card-header-fore);
73
- }
74
- >.card-body {
75
- background-color: var(
76
- --#{variables.$prefix}color-#{$colorName}-card-body-back
77
- );
78
- color: var(--#{variables.$prefix}color-#{$colorName}-card-body-fore);
79
- }
80
- >.card-footer {
81
- background-color: var(
82
- --#{variables.$prefix}color-#{$colorName}-card-footer-back
83
- );
84
- color: var(--#{variables.$prefix}color-#{$colorName}-card-footer-fore);
85
- }
115
+ --#{variables.$prefix}color-card-border: var(
116
+ --#{variables.$prefix}color-#{$colorName}-card-border
117
+ );
118
+ --#{variables.$prefix}color-card-shadow: var(
119
+ --#{variables.$prefix}color-#{$colorName}-card-shadow
120
+ );
121
+
122
+ --#{variables.$prefix}color-card-header-fore: var(
123
+ --#{variables.$prefix}color-#{$colorName}-card-header-fore
124
+ );
125
+ --#{variables.$prefix}color-card-header-back: var(
126
+ --#{variables.$prefix}color-#{$colorName}-card-header-back
127
+ );
128
+ --#{variables.$prefix}color-card-header-border: var(
129
+ --#{variables.$prefix}color-#{$colorName}-card-header-border
130
+ );
131
+
132
+ --#{variables.$prefix}color-card-body-fore: var(
133
+ --#{variables.$prefix}color-#{$colorName}-card-body-fore
134
+ );
135
+ --#{variables.$prefix}color-card-body-back: var(
136
+ --#{variables.$prefix}color-#{$colorName}-card-body-back
137
+ );
138
+ --#{variables.$prefix}color-card-body-border: var(
139
+ --#{variables.$prefix}color-#{$colorName}-card-body-border
140
+ );
141
+
142
+ --#{variables.$prefix}color-card-footer-fore: var(
143
+ --#{variables.$prefix}color-#{$colorName}-card-body-fore
144
+ );
145
+ --#{variables.$prefix}color-card-footer-back: var(
146
+ --#{variables.$prefix}color-#{$colorName}-card-body-back
147
+ );
148
+ --#{variables.$prefix}color-card-footer-border: var(
149
+ --#{variables.$prefix}color-#{$colorName}-card-body-border
150
+ );
151
+ //#endregion local css variables
86
152
  }
87
153
  }
88
154
  }