@qrsln/lootstrap 22.2.7-beta.0 → 22.2.10-beta.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/css/lootstrap.css +3511 -3237
- package/dist/css/lootstrap.css.map +1 -1
- package/dist/css/lootstrap.min.css +3 -3
- package/dist/css/test.css +70 -47
- package/dist/css/test.css.map +1 -1
- package/package.json +1 -1
- package/scss/Abstracts/Functions/_color.scss +11 -10
- package/scss/Abstracts/Functions/_shadow.scss +2 -2
- package/scss/Abstracts/Mixins/_color.scss +1 -18
- package/scss/Abstracts/_variables.scss +57 -23
- package/scss/Architecture/Components/_alert.scss +30 -32
- package/scss/Architecture/Components/_button-close.scss +11 -2
- package/scss/Architecture/Utils/_color.scss +64 -89
- package/scss/Architecture/Utils/_filters.scss +1 -0
- package/scss/Architecture/Utils/_spacing.scss +7 -21
- package/scss/Architecture/Utils/_text.scss +42 -109
- package/scss/Architecture/Utils/_utilities.scss +55 -15
- package/scss/Architecture/__dir-components.scss +3 -3
- package/scss/Architecture/_reboot.scss +6 -6
- package/scss/Architecture/_root.scss +4 -6
- package/scss/_header.scss +2 -2
package/dist/css/test.css
CHANGED
|
@@ -16,6 +16,9 @@
|
|
|
16
16
|
* "Opacity": (Prefix: Opacity, Properties: opacity, Important: true, Responsive: false, Values: $opacity-map,),
|
|
17
17
|
*/
|
|
18
18
|
/*@formatter:off*/
|
|
19
|
+
/*
|
|
20
|
+
// Theming
|
|
21
|
+
*/
|
|
19
22
|
/*@formatter:on*/
|
|
20
23
|
/*
|
|
21
24
|
// Colors
|
|
@@ -112,6 +115,10 @@
|
|
|
112
115
|
--value: hsla(270deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));
|
|
113
116
|
}
|
|
114
117
|
|
|
118
|
+
.Text-black {
|
|
119
|
+
--value: hsla(0deg, 0%, var(--ls-text-lightness, 0%), var(--ls-text-alpha, 1));
|
|
120
|
+
}
|
|
121
|
+
|
|
115
122
|
.Text-white {
|
|
116
123
|
--value: hsla(0deg, 0%, var(--ls-text-lightness, 100%), var(--ls-text-alpha, 1));
|
|
117
124
|
}
|
|
@@ -124,8 +131,20 @@
|
|
|
124
131
|
--value: hsla(213deg, 8%, var(--ls-text-lightness, 45%), var(--ls-text-alpha, 1));
|
|
125
132
|
}
|
|
126
133
|
|
|
134
|
+
.Text-light {
|
|
135
|
+
--value: hsla(0deg, 0%, var(--ls-text-lightness, 98%), var(--ls-text-alpha, 1));
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.Text-dark {
|
|
139
|
+
--value: hsla(240deg, 7%, var(--ls-text-lightness, 18%), var(--ls-text-alpha, 1));
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.Text-night {
|
|
143
|
+
--value: hsla(0deg, 0%, var(--ls-text-lightness, 7%), var(--ls-text-alpha, 1));
|
|
144
|
+
}
|
|
145
|
+
|
|
127
146
|
.Text-primary {
|
|
128
|
-
--value: hsla(
|
|
147
|
+
--value: hsla(217deg, 96%, var(--ls-text-lightness, 52%), var(--ls-text-alpha, 1));
|
|
129
148
|
}
|
|
130
149
|
|
|
131
150
|
.Text-secondary {
|
|
@@ -133,143 +152,147 @@
|
|
|
133
152
|
}
|
|
134
153
|
|
|
135
154
|
.Text-success {
|
|
136
|
-
--value: hsla(
|
|
155
|
+
--value: hsla(150deg, 67%, var(--ls-text-lightness, 35%), var(--ls-text-alpha, 1));
|
|
137
156
|
}
|
|
138
157
|
|
|
139
158
|
.Text-info {
|
|
140
|
-
--value: hsla(
|
|
159
|
+
--value: hsla(195deg, 90%, var(--ls-text-lightness, 55%), var(--ls-text-alpha, 1));
|
|
141
160
|
}
|
|
142
161
|
|
|
143
162
|
.Text-warning {
|
|
144
|
-
--value: hsla(45deg, 100%, var(--ls-text-lightness,
|
|
163
|
+
--value: hsla(45deg, 100%, var(--ls-text-lightness, 45%), var(--ls-text-alpha, 1));
|
|
145
164
|
}
|
|
146
165
|
|
|
147
166
|
.Text-danger {
|
|
148
167
|
--value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));
|
|
149
168
|
}
|
|
150
169
|
|
|
151
|
-
.Text-
|
|
152
|
-
--value: hsla(
|
|
170
|
+
.Text-muted {
|
|
171
|
+
--value: hsla(213, 11%, var(--ls-text-lightness, 69%), var(--ls-text-alpha, 1));
|
|
153
172
|
}
|
|
154
173
|
|
|
155
|
-
.Text-
|
|
156
|
-
--value:
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.Text-night {
|
|
160
|
-
--value: hsla(0deg, 0%, var(--ls-text-lightness, 0%), var(--ls-text-alpha, 1));
|
|
174
|
+
.Text-reset {
|
|
175
|
+
--value: inherit;
|
|
161
176
|
}
|
|
162
177
|
|
|
163
178
|
.Border-red {
|
|
164
|
-
--value: hsla(354deg, 66%,
|
|
179
|
+
--value: hsla(354deg, 66%, 54%, var(--ls-border-alpha, 1));
|
|
165
180
|
}
|
|
166
181
|
|
|
167
182
|
.Border-lime {
|
|
168
|
-
--value: hsla(120deg, 100%,
|
|
183
|
+
--value: hsla(120deg, 100%, 50%, var(--ls-border-alpha, 1));
|
|
169
184
|
}
|
|
170
185
|
|
|
171
186
|
.Border-blue {
|
|
172
|
-
--value: hsla(212deg, 97%,
|
|
187
|
+
--value: hsla(212deg, 97%, 43%, var(--ls-border-alpha, 1));
|
|
173
188
|
}
|
|
174
189
|
|
|
175
190
|
.Border-yellow {
|
|
176
|
-
--value: hsla(45deg, 100%,
|
|
191
|
+
--value: hsla(45deg, 100%, 51%, var(--ls-border-alpha, 1));
|
|
177
192
|
}
|
|
178
193
|
|
|
179
194
|
.Border-cyan {
|
|
180
|
-
--value: hsla(180deg, 100%,
|
|
195
|
+
--value: hsla(180deg, 100%, 50%, var(--ls-border-alpha, 1));
|
|
181
196
|
}
|
|
182
197
|
|
|
183
198
|
.Border-magenta {
|
|
184
|
-
--value: hsla(300deg, 100%,
|
|
199
|
+
--value: hsla(300deg, 100%, 50%, var(--ls-border-alpha, 1));
|
|
185
200
|
}
|
|
186
201
|
|
|
187
202
|
.Border-purple {
|
|
188
|
-
--value: hsla(261deg, 51%,
|
|
203
|
+
--value: hsla(261deg, 51%, 51%, var(--ls-border-alpha, 1));
|
|
189
204
|
}
|
|
190
205
|
|
|
191
206
|
.Border-green {
|
|
192
|
-
--value: hsla(134deg, 61%,
|
|
207
|
+
--value: hsla(134deg, 61%, 41%, var(--ls-border-alpha, 1));
|
|
193
208
|
}
|
|
194
209
|
|
|
195
210
|
.Border-maroon {
|
|
196
|
-
--value: hsla(331deg, 74%,
|
|
211
|
+
--value: hsla(331deg, 74%, 30%, var(--ls-border-alpha, 1));
|
|
197
212
|
}
|
|
198
213
|
|
|
199
214
|
.Border-navy {
|
|
200
|
-
--value: hsla(210deg, 100%,
|
|
215
|
+
--value: hsla(210deg, 100%, 12%, var(--ls-border-alpha, 1));
|
|
201
216
|
}
|
|
202
217
|
|
|
203
218
|
.Border-teal {
|
|
204
|
-
--value: hsla(162deg, 73%,
|
|
219
|
+
--value: hsla(162deg, 73%, 46%, var(--ls-border-alpha, 1));
|
|
205
220
|
}
|
|
206
221
|
|
|
207
222
|
.Border-olive {
|
|
208
|
-
--value: hsla(60deg, 100%,
|
|
223
|
+
--value: hsla(60deg, 100%, 25%, var(--ls-border-alpha, 1));
|
|
209
224
|
}
|
|
210
225
|
|
|
211
226
|
.Border-orange {
|
|
212
|
-
--value: hsla(24deg, 93%,
|
|
227
|
+
--value: hsla(24deg, 93%, 50%, var(--ls-border-alpha, 1));
|
|
213
228
|
}
|
|
214
229
|
|
|
215
230
|
.Border-pink {
|
|
216
|
-
--value: hsla(324deg, 79%,
|
|
231
|
+
--value: hsla(324deg, 79%, 60%, var(--ls-border-alpha, 1));
|
|
217
232
|
}
|
|
218
233
|
|
|
219
234
|
.Border-brown {
|
|
220
|
-
--value: hsla(0deg, 33%,
|
|
235
|
+
--value: hsla(0deg, 33%, 38%, var(--ls-border-alpha, 1));
|
|
221
236
|
}
|
|
222
237
|
|
|
223
238
|
.Border-indigo {
|
|
224
|
-
--value: hsla(270deg, 100%,
|
|
239
|
+
--value: hsla(270deg, 100%, 25%, var(--ls-border-alpha, 1));
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.Border-black {
|
|
243
|
+
--value: hsla(0deg, 0%, 0%, var(--ls-border-alpha, 1));
|
|
225
244
|
}
|
|
226
245
|
|
|
227
246
|
.Border-white {
|
|
228
|
-
--value: hsla(0deg, 0%,
|
|
247
|
+
--value: hsla(0deg, 0%, 100%, var(--ls-border-alpha, 1));
|
|
229
248
|
}
|
|
230
249
|
|
|
231
250
|
.Border-silver {
|
|
232
|
-
--value: hsla(0deg, 0%,
|
|
251
|
+
--value: hsla(0deg, 0%, 75%, var(--ls-border-alpha, 1));
|
|
233
252
|
}
|
|
234
253
|
|
|
235
254
|
.Border-gray {
|
|
236
|
-
--value: hsla(213deg, 8%,
|
|
255
|
+
--value: hsla(213deg, 8%, 45%, var(--ls-border-alpha, 1));
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.Border-light {
|
|
259
|
+
--value: hsla(0deg, 0%, 98%, var(--ls-border-alpha, 1));
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.Border-dark {
|
|
263
|
+
--value: hsla(240deg, 7%, 18%, var(--ls-border-alpha, 1));
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.Border-night {
|
|
267
|
+
--value: hsla(0deg, 0%, 7%, var(--ls-border-alpha, 1));
|
|
237
268
|
}
|
|
238
269
|
|
|
239
270
|
.Border-primary {
|
|
240
|
-
--value: hsla(
|
|
271
|
+
--value: hsla(217deg, 96%, 52%, var(--ls-border-alpha, 1));
|
|
241
272
|
}
|
|
242
273
|
|
|
243
274
|
.Border-secondary {
|
|
244
|
-
--value: hsla(208deg, 7%,
|
|
275
|
+
--value: hsla(208deg, 7%, 46%, var(--ls-border-alpha, 1));
|
|
245
276
|
}
|
|
246
277
|
|
|
247
278
|
.Border-success {
|
|
248
|
-
--value: hsla(
|
|
279
|
+
--value: hsla(150deg, 67%, 35%, var(--ls-border-alpha, 1));
|
|
249
280
|
}
|
|
250
281
|
|
|
251
282
|
.Border-info {
|
|
252
|
-
--value: hsla(
|
|
283
|
+
--value: hsla(195deg, 90%, 55%, var(--ls-border-alpha, 1));
|
|
253
284
|
}
|
|
254
285
|
|
|
255
286
|
.Border-warning {
|
|
256
|
-
--value: hsla(45deg, 100%,
|
|
287
|
+
--value: hsla(45deg, 100%, 45%, var(--ls-border-alpha, 1));
|
|
257
288
|
}
|
|
258
289
|
|
|
259
290
|
.Border-danger {
|
|
260
|
-
--value: hsla(354deg, 66%,
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
.Border-light {
|
|
264
|
-
--value: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
|
|
291
|
+
--value: hsla(354deg, 66%, 54%, var(--ls-border-alpha, 1));
|
|
265
292
|
}
|
|
266
293
|
|
|
267
|
-
.Border-
|
|
268
|
-
--value:
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
.Border-night {
|
|
272
|
-
--value: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));
|
|
294
|
+
.Border-transparent {
|
|
295
|
+
--value: transparent;
|
|
273
296
|
}
|
|
274
297
|
|
|
275
298
|
/*# sourceMappingURL=test.css.map */
|
package/dist/css/test.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../scss/test.scss","../../scss/Abstracts/Functions/_shadow.scss","../../scss/Abstracts/Mixins/_utilities.scss","../../scss/Abstracts/_variables.scss","test.css"],"names":[],"mappings":"AAAA;;CAAA;ACIA;;;;CAAA;ACJA;;;;CAAA;AAgEA;;;EAAA;AC7DA,iBAAA;AAiCA,gBAAA;AAmDA;;CAAA;AAgBA;;;;CAAA;AAcA;;CAAA;AASA;;CAAA;AAOA;;CAAA;AAsBA;;;CAAA;AAeA;;;;;CAAA;AAuBA;;;CAAA;AHtKE;EACE,kFAAA;AIwBJ;;AJzBE;EACE,mFAAA;AI4BJ;;AJ7BE;EACE,kFAAA;AIgCJ;;AJjCE;EACE,kFAAA;AIoCJ;;AJrCE;EACE,mFAAA;AIwCJ;;AJzCE;EACE,mFAAA;AI4CJ;;AJ7CE;EACE,kFAAA;AIgDJ;;AJjDE;EACE,kFAAA;AIoDJ;;AJrDE;EACE,kFAAA;AIwDJ;;AJzDE;EACE,mFAAA;AI4DJ;;AJ7DE;EACE,kFAAA;AIgEJ;;AJjEE;EACE,kFAAA;AIoEJ;;AJrEE;EACE,iFAAA;AIwEJ;;AJzEE;EACE,kFAAA;AI4EJ;;AJ7EE;EACE,gFAAA;AIgFJ;;AJjFE;EACE,mFAAA;AIoFJ;;AJrFE;EACE,gFAAA;AIwFJ;;AJzFE;EACE,+EAAA;AI4FJ;;AJ7FE;EACE,iFAAA;AIgGJ;;AJjGE;EACE,kFAAA;AIoGJ;;AJrGE;EACE,iFAAA;AIwGJ;;AJzGE;EACE,kFAAA;AI4GJ;;AJ7GE;EACE,kFAAA;AIgHJ;;AJjHE;EACE,kFAAA;AIoHJ;;AJrHE;EACE,kFAAA;AIwHJ;;AJzHE;EACE,kFAAA;AI4HJ;;AJ7HE;EACE,kFAAA;AIgIJ;;AJjIE;EACE,8EAAA;AIoIJ;;AJ/HE;EACE,0DAAA;AIkIJ;;AJnIE;EACE,2DAAA;AIsIJ;;AJvIE;EACE,0DAAA;AI0IJ;;AJ3IE;EACE,0DAAA;AI8IJ;;AJ/IE;EACE,2DAAA;AIkJJ;;AJnJE;EACE,2DAAA;AIsJJ;;AJvJE;EACE,0DAAA;AI0JJ;;AJ3JE;EACE,0DAAA;AI8JJ;;AJ/JE;EACE,0DAAA;AIkKJ;;AJnKE;EACE,2DAAA;AIsKJ;;AJvKE;EACE,0DAAA;AI0KJ;;AJ3KE;EACE,0DAAA;AI8KJ;;AJ/KE;EACE,yDAAA;AIkLJ;;AJnLE;EACE,0DAAA;AIsLJ;;AJvLE;EACE,wDAAA;AI0LJ;;AJ3LE;EACE,2DAAA;AI8LJ;;AJ/LE;EACE,uDAAA;AIkMJ;;AJnME;EACE,uDAAA;AIsMJ;;AJvME;EACE,yDAAA;AI0MJ;;AJ3ME;EACE,0DAAA;AI8MJ;;AJ/ME;EACE,yDAAA;AIkNJ;;AJnNE;EACE,0DAAA;AIsNJ;;AJvNE;EACE,0DAAA;AI0NJ;;AJ3NE;EACE,0DAAA;AI8NJ;;AJ/NE;EACE,0DAAA;AIkOJ;;AJnOE;EACE,0DAAA;AIsOJ;;AJvOE;EACE,0DAAA;AI0OJ;;AJ3OE;EACE,uDAAA;AI8OJ","file":"test.css","sourcesContent":["/*\r\n// Configuration\r\n*/\r\n\r\n@import \"Abstracts/_dir-functions\";\r\n@import \"Abstracts/_dir-mixins\";\r\n@import \"Abstracts/variables\";\r\n\r\n//.strip-unit {\r\n// $length: 42px;\r\n// width: #{$length};\r\n// --length: #{strip-unit($length)};\r\n//}\r\n\r\n//@each $breakpointKey, $breakpointValue in $responsive-Breakpoints {\r\n// .Col-#{$breakpointKey} {\r\n// --value: #{$breakpointValue};\r\n// }\r\n//}\r\n\r\n//@each $colorKey, $colorValue in $colors-Background-hsla {\r\n// .Bg-#{$colorKey} {\r\n// --value: #{$colorValue};\r\n// }\r\n//}\r\n\r\n@each $colorKey, $colorValue in $colors-Text-hsla {\r\n .Text-#{$colorKey} {\r\n --value: #{$colorValue};\r\n }\r\n}\r\n\r\n@each $colorKey, $colorValue in $colors-Border-hsla {\r\n .Border-#{$colorKey} {\r\n --value: #{$colorValue};\r\n }\r\n}\r\n","// ===========================================================================\r\n// Functions - Shadow\r\n// ===========================================================================\r\n\r\n/*\r\n https://brumm.af/shadows\r\n https://tobiasahlin.com/blog/layered-smooth-box-shadows/\r\n https://css-tricks.com/getting-deep-into-shadows/\r\n*/\r\n\r\n@function Shadow-Builder($suffix, $layers, $horizontal-map, $vertical-map, $blur-map, $spread-map, $color-map) {\r\n $result: (); // left + right + main bottom\r\n $result-inner: (); // inset\r\n $result-both: (); // inner + outer\r\n $result-br: (); // bottom + right\r\n\r\n $result-t: (); // top\r\n $result-r: (); // right\r\n $result-l: (); // left\r\n $result-b: (); // bottom\r\n\r\n $result-x: (); // left + right\r\n $result-y: (); // top + bottom\r\n\r\n @for $index from 1 through $layers {\r\n $left: if(length($horizontal-map)==0, 0, nth($horizontal-map, $index));\r\n $spread: if(length($spread-map)==0, 0, nth($spread-map, $index));\r\n\r\n $top: nth($vertical-map, $index);\r\n $blur: nth($blur-map, $index);\r\n $color: nth($color-map, $index);\r\n\r\n $result: append($result, #{$left} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n $result-both: append($result-both, #{$left} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n\r\n $result-inner: append($result-inner, #{0} #{0} #{$blur} #{0} #{$color} inset, \"comma\");\r\n $result-both: append($result-both, #{0} #{0} #{$blur} #{0} #{$color} inset, \"comma\");\r\n $result-br: append($result-br, #{$top} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n\r\n $result-t: append($result-t, #{0} #{-$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-r: append($result-r, #{$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-l: append($result-l, #{-$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-b: append($result-b, #{0} #{$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n\r\n $result-x: append($result-x, #{$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-x: append($result-x, #{-$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n\r\n $result-y: append($result-y, #{0} #{-$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-y: append($result-y, #{0} #{$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n }\r\n $suffix: if($suffix==null, \"\", \"-#{$suffix}\");\r\n\r\n $return-map: ();\r\n @if (length($result) > 0) {\r\n $return-map: (\r\n inset#{$suffix} : $result-inner,\r\n both#{$suffix} : $result-both,\r\n br#{$suffix} : $result-br,\r\n t#{$suffix} : $result-t,\r\n r#{$suffix} : $result-r,\r\n l#{$suffix} : $result-l,\r\n b#{$suffix} : $result-b,\r\n x#{$suffix} : $result-x,\r\n y#{$suffix} : $result-y,\r\n );\r\n }\r\n @return $return-map;\r\n}\r\n\r\n// box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];\r\n// $Shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.18),\r\n// 0px 2px 2px 0px rgba(0, 0, 0, 0.12),\r\n// 0px 4px 6px 0px rgba(0, 0, 0, 0.06);\r\n@function Shadow-Separator($suffix, $Shadow) {\r\n // lists\r\n $horizontal-map: ();\r\n $vertical-map: ();\r\n $blur-map: ();\r\n $spread-map: ();\r\n $color-map: ();\r\n\r\n @each $value in $Shadow {\r\n @for $index from 1 through length($value) {\r\n $layer: nth($value, $index);\r\n @if ($index==1) {\r\n $horizontal-map: append($horizontal-map, $layer, \"comma\");\r\n } @else if ($index==2) {\r\n $vertical-map: append($vertical-map, $layer, \"comma\");\r\n } @else if ($index==3) {\r\n $blur-map: append($blur-map, $layer, \"comma\");\r\n } @else if ($index==4) {\r\n $spread-map: append($spread-map, $layer, \"comma\");\r\n } @else if ($index==5) {\r\n $color-map: append($color-map, $layer, \"comma\");\r\n }\r\n }\r\n }\r\n\r\n @return Shadow-Builder($suffix, length($Shadow), $horizontal-map, $vertical-map, $blur-map, $spread-map, $color-map);\r\n}\r\n\r\n/// Based on $Shadow: 0px 1px 1px -1px rgba($Black, 0.18), 0px 2px 2px 0px rgba($Black, 0.12), 0px 4px 6px 0px rgba($Black, 0.06);\r\n@function Colored-shadow($color: black) {\r\n // using best result of shadow set\r\n @return 0 1px 1px -1px rgba($color, 0.18), 0px 2px 2px 0px rgba($color, 0.12), 0px 4px 6px 0px rgba($color, 0.06);\r\n}\r\n\r\n@function Colored-shadow-inner($color: black) {\r\n // using best result of shadow set\r\n @return 0 0 1px 0 rgba($color, 0.18) inset, 0 0 2px 0 rgba($color, 0.12) inset, 0 0 6px 0 rgba($color, 0.06) inset;\r\n}\r\n\r\n// box-shadow: Shadow-mixer($Shadow, $Shadow-inner);\r\n@function Shadow-mixer($shadow...) {\r\n $result: ();\r\n\r\n @each $value in $shadow {\r\n @if $value != null {\r\n $result: append($result, $value, \"comma\");\r\n }\r\n @if $value == none and length($shadow) > 1 {\r\n @warn \"The keyword 'none' must be used as a single argument.\";\r\n }\r\n }\r\n\r\n @if (length($result) > 0) {\r\n @return $result;\r\n }\r\n\r\n @return none;\r\n}","/*\r\n// ===========================================================================\r\n// Mixins - Utilities\r\n// ===========================================================================\r\n*/\r\n@mixin Utility-applier($important, $class-prefix, $properties, $values, $pseudo:null ) {\r\n @each $key, $value in $values {\r\n // Don't prefix if value key is null (eg. with shadow class)\r\n $class-suffix: if($key, if($class-prefix == \"\" , \"\", \"-\") + $key, \"\");\r\n\r\n @if $value != null {\r\n .#{$class-prefix + $class-suffix} {\r\n\r\n @if $pseudo != null {\r\n &:#{$pseudo} {\r\n @each $property in $properties {\r\n #{$property}: $value if($important, !important, null);\r\n }\r\n }\r\n } @else {\r\n @each $property in $properties {\r\n #{$property}: $value if($important, !important, null);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@mixin Utility-value-separator($utility, $breakpoints: $responsive-Breakpoints) {\r\n $values: map-get($utility, Values);\r\n\r\n // If the values are a list or string, convert it into a map\r\n @if type-of($values) == \"string\" or type-of(nth($values, 1)) != \"list\" {\r\n $values: zip($values, $values);\r\n }\r\n\r\n $properties: map-get($utility, Properties);\r\n // Multiple properties are possible, for example with vertical or horizontal margins or paddings\r\n @if type-of($properties) == \"string\" {\r\n $properties: append((), $properties);\r\n }\r\n\r\n $important: map-get($utility, Important);\r\n $responsive: map-get($utility, Responsive);\r\n $pseudo: map-get($utility, Pseudo); // null before after\r\n $print: map-get($utility, Print); // TODO: media print..\r\n\r\n // Use custom class if present\r\n $class-prefix: if(map-has-key($utility, Prefix), map-get($utility, Prefix), nth($properties, 1));\r\n $class-prefix: if($class-prefix == null, \"\", $class-prefix);\r\n\r\n @if $responsive {\r\n @each $breakpointKey, $breakpointValue in $breakpoints {\r\n $responsive-Infix: if($breakpointValue == 0, \"\", \"-#{$breakpointKey}\");\r\n @include media-min-W($breakpointValue) {\r\n @include Utility-applier($important, $class-prefix + $responsive-Infix, $properties, $values, $pseudo);\r\n }\r\n }\r\n } @else {\r\n @include Utility-applier($important, $class-prefix, $properties, $values, $pseudo);\r\n }\r\n}\r\n\r\n/*\r\n * KEY : VALUES\r\n * \"Opacity\": (Prefix: Opacity, Properties: opacity, Important: true, Responsive: false, Values: $opacity-map,),\r\n */\r\n@mixin Utilities($utilities) {\r\n @each $keyUtil, $valueUtil in $utilities {\r\n @include Utility-value-separator($valueUtil);\r\n }\r\n}","// ===========================================================================\r\n// Color System\r\n// ===========================================================================\r\n/*@formatter:off*/\r\n$White : hsl(0, 0%, 100%) !default;\r\n$Black : hsl(0,0%,0%) !default;\r\n$Silver : hsl(0, 0%, 75%) !default;\r\n$Gray\t :\thsl(213,8%,45%) !default;\r\n\r\n$Red : hsl(354,66%,54%) !default;\r\n$Lime : hsl(120, 100%, 50%) !default;\r\n$Blue : hsl(212,97%,43%) !default;\r\n$Yellow : hsl(45,100%,51%) !default;\r\n$Cyan : hsl(180,100%,50%) !default;\r\n$Magenta : hsl(300,100%, 50%) !default;\r\n\r\n$Purple : hsl(261,51%,51%) !default;\r\n$Green : hsl(134,61%,41%) !default;\r\n$Maroon : hsl(331, 74%, 30%) !default;\r\n$Navy : hsl(210, 100%, 12%) !default;\r\n$Teal : hsl(162,73%,46%) !default;\r\n$Olive : hsl(60,100%, 25%) !default;\r\n$Orange : hsl(24,93%,50%) !default;\r\n$Pink : hsl(324,79%,60%) !default;\r\n$Brown : hsl(0, 33%, 38%) !default;\r\n$Indigo : hsl(270, 100%, 25%) !default;\r\n\r\n$Success : $Green !default;\r\n$Info : $Blue !default;\r\n$Warning : $Yellow !default;\r\n$Danger : $Red !default;\r\n\r\n$Primary : hsl(260,81%,38%) !default;\r\n$Secondary : hsl(208,7%,46%) !default;\r\n$Light : hsl(210,20%,98%) !default;\r\n$Dark : hsl(210,10%,23%) !default;\r\n/*@formatter:on*/\r\n\r\n// 'red', 'lime', 'blue', 'yellow', 'cyan', 'magenta', 'purple', 'green', 'maroon', 'navy', 'teal', 'olive', 'orange', 'pink', 'brown', 'indigo', 'white', 'silver', 'gray'\r\n$colors: (\r\n \"red\" : $Red,\r\n \"lime\" : $Lime,\r\n \"blue\" : $Blue,\r\n \"yellow\" : $Yellow,\r\n \"cyan\" : $Cyan,\r\n \"magenta\" : $Magenta,\r\n \"purple\" : $Purple,\r\n \"green\" : $Green,\r\n \"maroon\" : $Maroon,\r\n \"navy\" : $Navy,\r\n \"teal\" : $Teal,\r\n \"olive\" : $Olive,\r\n \"orange\" : $Orange,\r\n \"pink\" : $Pink,\r\n \"brown\" : $Brown,\r\n \"indigo\" : $Indigo,\r\n \"white\" : $White,\r\n \"silver\" : $Silver,\r\n \"gray\" : $Gray,\r\n) !default;\r\n\r\n$colors-Theme: (\r\n \"primary\" : $Primary,\r\n \"secondary\" : $Secondary,\r\n \"success\" : $Success,\r\n \"info\" : $Info,\r\n \"warning\" : $Warning,\r\n \"danger\" : $Danger, //\"error\" : $Danger,\r\n \"light\" : $Light,\r\n \"dark\" : $Dark,\r\n \"night\" : $Black\r\n) !default;\r\n\r\n$theme-Components: (\r\n 'Theme': null,\r\n 'Alert':'alert',\r\n 'Calendar':'calendar',\r\n 'Card':'card',\r\n 'Caret':'caret',\r\n 'Toast':'toast',\r\n 'Btn':'btn',\r\n 'Btn-outline':'btn',\r\n 'List-item':'lst',\r\n) !default;\r\n\r\n$var-Prefix: ls-;\r\n\r\n/*\r\n// Colors\r\n*/\r\n\r\n$colors-all: map-merge($colors, $colors-Theme);\r\n\r\n$colors-Background-hsla: ();\r\n$colors-Background-hsla: Color-hsla($colors-all, --ls-bg-alpha, --ls-bg-lightness);\r\n\r\n$colors-Text-hsla: ();\r\n$colors-Text-hsla: Color-hsla($colors-all, --ls-text-alpha, --ls-text-lightness);\r\n\r\n$colors-Border-hsla: ();\r\n$colors-Border-hsla: Color-hsla($colors-all, --ls-border-alpha, --ls-border-lightness);\r\n\r\n\r\n/*\r\n// ===========================================================================\r\n// Utils\r\n// ===========================================================================\r\n*/\r\n\r\n$color-Alpha-map: (0: 0, 5: .05, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;\r\n$color-Lightness-map: (0:0%, 5: 5%, 10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%) !default;\r\n$opacity-map: (0: 0, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;\r\n$sizes-percents: (\r\n 10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%,\r\n 25:25%, 75:75%, 33:33.333%, 66:66.666%, auto:auto\r\n) !default;\r\n\r\n/*\r\n// Border radius\r\n*/\r\n\r\n$Rounded: .25rem !default;\r\n$Rounded-2x: .5rem !default;\r\n$Rounded-3x: .75rem !default;\r\n$Rounded-pill: 50rem !default;\r\n\r\n/*\r\n// Border\r\n*/\r\n\r\n$Border-width: 1px !default;\r\n$Border-widths: (0: 0, 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px) !default;\r\n\r\n/*\r\n// Spacing\r\n*/\r\n\r\n$spacer: 1rem !default; // 16px\r\n$spacers-map: (\r\n 0: 0,\r\n 1: ($spacer * 0.25),\r\n 2: ($spacer * 0.5),\r\n 3: ($spacer * 1.00),\r\n 4: ($spacer * 1.50),\r\n 5: ($spacer * 3.00),\r\n);\r\n$negative-spacers: (\r\n N1: ($spacer * -0.25),\r\n N2: ($spacer * -0.5),\r\n N3: ($spacer * -1.00),\r\n N4: ($spacer * -1.50),\r\n N5: ($spacer * -3.00),\r\n);\r\n\r\n\r\n/*\r\n// Grid System\r\n// Set the number of columns and specify the width of the gutters.\r\n*/\r\n\r\n$breakpoints-Grid: (none: 0, sm : 480px, md : 768px, lg : 1024px, xl : 1280px, xxl : 1440px);\r\n$breakpoints-Container: (sm : 480px, md : 768px, lg : 976px, xl : 1232px, xxl : 1376px);\r\n$responsive-Breakpoints: $breakpoints-Grid;\r\n\r\n$grid-Columns: 12 !default;\r\n$grid-Gutter-width: 1.5rem; // 1rem\r\n$grid-Row-Columns: 6 !default;\r\n\r\n$gutters-map: $spacers-map !default;\r\n\r\n/*\r\n// Shadow\r\n// Box-shadow with rgba variable\r\n// --component-shadow-color: 0, 0, 0; // Has to be like this :p\r\n// https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable\r\n*/\r\n$Shadow-color: var(--#{$var-Prefix}shadow-color-rgb);\r\n\r\n$Shadow: 0px 1px 1px -1px rgba($Shadow-color, 0.18), 0px 2px 2px 0px rgba($Shadow-color, 0.12), 0px 4px 6px 0px rgba($Shadow-color, 0.06);\r\n$Shadow-2x: 0px 1px 1px 0px rgba($Shadow-color, 0.18), 0px 2px 3px 0px rgba($Shadow-color, 0.12), 0px 6px 9px 0px rgba($Shadow-color, 0.06);\r\n$Shadow-3x: 0px 2px 2px 0px rgba($Shadow-color, 0.18), 0px 3px 4px 0px rgba($Shadow-color, 0.12), 0px 9px 12px 0px rgba($Shadow-color, 0.06);\r\n\r\n$Shadow-map: (null: $Shadow, 2x: $Shadow-2x, 3x: $Shadow-3x,);\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(null, $Shadow));\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(2x, $Shadow-2x));\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(3x, $Shadow-3x));\r\n\r\n$Drop-shadow: drop-shadow(0px 1px 1px rgba($Shadow-color, 0.72)) drop-shadow(0px 2px 2px rgba($Shadow-color, 0.48)) drop-shadow(0px 4px 6px rgba($Shadow-color, 0.24));\r\n$Drop-shadow-2x: drop-shadow(0px 1px 1px rgba($Shadow-color, 0.72)) drop-shadow(0px 2px 3px rgba($Shadow-color, 0.48)) drop-shadow(0px 6px 9px rgba($Shadow-color, 0.24));\r\n$Drop-shadow-3x: drop-shadow(0px 2px 2px rgba($Shadow-color, 0.72)) drop-shadow(0px 3px 4px rgba($Shadow-color, 0.48)) drop-shadow(0px 9px 12px rgba($Shadow-color, 0.24));\r\n\r\n$Drop-shadow-map: (0: drop-shadow(0 0 #0000), null: $Drop-shadow, 2x: $Drop-shadow-2x, 3x: $Drop-shadow-3x,);\r\n\r\n/*\r\n// Typography\r\n// Font, line-height, and color for body text, headings, and more.\r\n*/\r\n// TODO: font\r\n$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`\r\n$font-family-sans-serif: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\r\n$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\r\n\r\n$font-weight-lighter: lighter !default;\r\n$font-weight-light: 300 !default;\r\n$font-weight-normal: 400 !default;\r\n$font-weight-bold: 700 !default;\r\n$font-weight-bolder: bolder !default;\r\n","/*\n// Configuration\n*/\n/*\n https://brumm.af/shadows\n https://tobiasahlin.com/blog/layered-smooth-box-shadows/\n https://css-tricks.com/getting-deep-into-shadows/\n*/\n/*\n// ===========================================================================\n// Mixins - Utilities\n// ===========================================================================\n*/\n/*\n * KEY : VALUES\n * \"Opacity\": (Prefix: Opacity, Properties: opacity, Important: true, Responsive: false, Values: $opacity-map,),\n */\n/*@formatter:off*/\n/*@formatter:on*/\n/*\n// Colors\n*/\n/*\n// ===========================================================================\n// Utils\n// ===========================================================================\n*/\n/*\n// Border radius\n*/\n/*\n// Border\n*/\n/*\n// Spacing\n*/\n/*\n// Grid System\n// Set the number of columns and specify the width of the gutters.\n*/\n/*\n// Shadow\n// Box-shadow with rgba variable\n// --component-shadow-color: 0, 0, 0; // Has to be like this :p\n// https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable\n*/\n/*\n// Typography\n// Font, line-height, and color for body text, headings, and more.\n*/\n.Text-red {\n --value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));\n}\n\n.Text-lime {\n --value: hsla(120deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-blue {\n --value: hsla(212deg, 97%, var(--ls-text-lightness, 43%), var(--ls-text-alpha, 1));\n}\n\n.Text-yellow {\n --value: hsla(45deg, 100%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-cyan {\n --value: hsla(180deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-magenta {\n --value: hsla(300deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-purple {\n --value: hsla(261deg, 51%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-green {\n --value: hsla(134deg, 61%, var(--ls-text-lightness, 41%), var(--ls-text-alpha, 1));\n}\n\n.Text-maroon {\n --value: hsla(331deg, 74%, var(--ls-text-lightness, 30%), var(--ls-text-alpha, 1));\n}\n\n.Text-navy {\n --value: hsla(210deg, 100%, var(--ls-text-lightness, 12%), var(--ls-text-alpha, 1));\n}\n\n.Text-teal {\n --value: hsla(162deg, 73%, var(--ls-text-lightness, 46%), var(--ls-text-alpha, 1));\n}\n\n.Text-olive {\n --value: hsla(60deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));\n}\n\n.Text-orange {\n --value: hsla(24deg, 93%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-pink {\n --value: hsla(324deg, 79%, var(--ls-text-lightness, 60%), var(--ls-text-alpha, 1));\n}\n\n.Text-brown {\n --value: hsla(0deg, 33%, var(--ls-text-lightness, 38%), var(--ls-text-alpha, 1));\n}\n\n.Text-indigo {\n --value: hsla(270deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));\n}\n\n.Text-white {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 100%), var(--ls-text-alpha, 1));\n}\n\n.Text-silver {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 75%), var(--ls-text-alpha, 1));\n}\n\n.Text-gray {\n --value: hsla(213deg, 8%, var(--ls-text-lightness, 45%), var(--ls-text-alpha, 1));\n}\n\n.Text-primary {\n --value: hsla(260deg, 81%, var(--ls-text-lightness, 38%), var(--ls-text-alpha, 1));\n}\n\n.Text-secondary {\n --value: hsla(208deg, 7%, var(--ls-text-lightness, 46%), var(--ls-text-alpha, 1));\n}\n\n.Text-success {\n --value: hsla(134deg, 61%, var(--ls-text-lightness, 41%), var(--ls-text-alpha, 1));\n}\n\n.Text-info {\n --value: hsla(212deg, 97%, var(--ls-text-lightness, 43%), var(--ls-text-alpha, 1));\n}\n\n.Text-warning {\n --value: hsla(45deg, 100%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-danger {\n --value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));\n}\n\n.Text-light {\n --value: hsla(210deg, 20%, var(--ls-text-lightness, 98%), var(--ls-text-alpha, 1));\n}\n\n.Text-dark {\n --value: hsla(210deg, 10%, var(--ls-text-lightness, 23%), var(--ls-text-alpha, 1));\n}\n\n.Text-night {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 0%), var(--ls-text-alpha, 1));\n}\n\n.Border-red {\n --value: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-lime {\n --value: hsla(120deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-blue {\n --value: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-yellow {\n --value: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-cyan {\n --value: hsla(180deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-magenta {\n --value: hsla(300deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-purple {\n --value: hsla(261deg, 51%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-green {\n --value: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-maroon {\n --value: hsla(331deg, 74%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-navy {\n --value: hsla(210deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-teal {\n --value: hsla(162deg, 73%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-olive {\n --value: hsla(60deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-orange {\n --value: hsla(24deg, 93%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-pink {\n --value: hsla(324deg, 79%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-brown {\n --value: hsla(0deg, 33%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-indigo {\n --value: hsla(270deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-white {\n --value: hsla(0deg, 0%, 90%, var(--ls-border-alpha, 1));\n}\n\n.Border-silver {\n --value: hsla(0deg, 0%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-gray {\n --value: hsla(213deg, 8%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-primary {\n --value: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-secondary {\n --value: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-success {\n --value: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-info {\n --value: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-warning {\n --value: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-danger {\n --value: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-light {\n --value: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));\n}\n\n.Border-dark {\n --value: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));\n}\n\n.Border-night {\n --value: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));\n}\n\n/*# sourceMappingURL=test.css.map */\n"]}
|
|
1
|
+
{"version":3,"sources":["../../scss/test.scss","../../scss/Abstracts/Functions/_shadow.scss","../../scss/Abstracts/Mixins/_utilities.scss","../../scss/Abstracts/_variables.scss","test.css"],"names":[],"mappings":"AAAA;;CAAA;ACIA;;;;CAAA;ACJA;;;;CAAA;AAgEA;;;EAAA;AC7DA,iBAAA;AAwBA;;CAAA;AAaA,gBAAA;AAqDA;;CAAA;AAmBA;;;;CAAA;AAaA;;CAAA;AASA;;CAAA;AAOA;;CAAA;AAsBA;;;CAAA;AAeA;;;;;CAAA;AAuBA;;;CAAA;AH9KE;EACE,kFAAA;AI2BJ;;AJ5BE;EACE,mFAAA;AI+BJ;;AJhCE;EACE,kFAAA;AImCJ;;AJpCE;EACE,kFAAA;AIuCJ;;AJxCE;EACE,mFAAA;AI2CJ;;AJ5CE;EACE,mFAAA;AI+CJ;;AJhDE;EACE,kFAAA;AImDJ;;AJpDE;EACE,kFAAA;AIuDJ;;AJxDE;EACE,kFAAA;AI2DJ;;AJ5DE;EACE,mFAAA;AI+DJ;;AJhEE;EACE,kFAAA;AImEJ;;AJpEE;EACE,kFAAA;AIuEJ;;AJxEE;EACE,iFAAA;AI2EJ;;AJ5EE;EACE,kFAAA;AI+EJ;;AJhFE;EACE,gFAAA;AImFJ;;AJpFE;EACE,mFAAA;AIuFJ;;AJxFE;EACE,8EAAA;AI2FJ;;AJ5FE;EACE,gFAAA;AI+FJ;;AJhGE;EACE,+EAAA;AImGJ;;AJpGE;EACE,iFAAA;AIuGJ;;AJxGE;EACE,+EAAA;AI2GJ;;AJ5GE;EACE,iFAAA;AI+GJ;;AJhHE;EACE,8EAAA;AImHJ;;AJpHE;EACE,kFAAA;AIuHJ;;AJxHE;EACE,iFAAA;AI2HJ;;AJ5HE;EACE,kFAAA;AI+HJ;;AJhIE;EACE,kFAAA;AImIJ;;AJpIE;EACE,kFAAA;AIuIJ;;AJxIE;EACE,kFAAA;AI2IJ;;AJ5IE;EACE,+EAAA;AI+IJ;;AJhJE;EACE,gBAAA;AImJJ;;AJ9IE;EACE,0DAAA;AIiJJ;;AJlJE;EACE,2DAAA;AIqJJ;;AJtJE;EACE,0DAAA;AIyJJ;;AJ1JE;EACE,0DAAA;AI6JJ;;AJ9JE;EACE,2DAAA;AIiKJ;;AJlKE;EACE,2DAAA;AIqKJ;;AJtKE;EACE,0DAAA;AIyKJ;;AJ1KE;EACE,0DAAA;AI6KJ;;AJ9KE;EACE,0DAAA;AIiLJ;;AJlLE;EACE,2DAAA;AIqLJ;;AJtLE;EACE,0DAAA;AIyLJ;;AJ1LE;EACE,0DAAA;AI6LJ;;AJ9LE;EACE,yDAAA;AIiMJ;;AJlME;EACE,0DAAA;AIqMJ;;AJtME;EACE,wDAAA;AIyMJ;;AJ1ME;EACE,2DAAA;AI6MJ;;AJ9ME;EACE,sDAAA;AIiNJ;;AJlNE;EACE,wDAAA;AIqNJ;;AJtNE;EACE,uDAAA;AIyNJ;;AJ1NE;EACE,yDAAA;AI6NJ;;AJ9NE;EACE,uDAAA;AIiOJ;;AJlOE;EACE,yDAAA;AIqOJ;;AJtOE;EACE,sDAAA;AIyOJ;;AJ1OE;EACE,0DAAA;AI6OJ;;AJ9OE;EACE,yDAAA;AIiPJ;;AJlPE;EACE,0DAAA;AIqPJ;;AJtPE;EACE,0DAAA;AIyPJ;;AJ1PE;EACE,0DAAA;AI6PJ;;AJ9PE;EACE,0DAAA;AIiQJ;;AJlQE;EACE,oBAAA;AIqQJ","file":"test.css","sourcesContent":["/*\r\n// Configuration\r\n*/\r\n\r\n@import \"Abstracts/_dir-functions\";\r\n@import \"Abstracts/_dir-mixins\";\r\n@import \"Abstracts/variables\";\r\n\r\n//.strip-unit {\r\n// $length: 42px;\r\n// width: #{$length};\r\n// --length: #{strip-unit($length)};\r\n//}\r\n\r\n//@each $breakpointKey, $breakpointValue in $responsive-Breakpoints {\r\n// .Col-#{$breakpointKey} {\r\n// --value: #{$breakpointValue};\r\n// }\r\n//}\r\n\r\n//@each $colorKey, $colorValue in $colors-Background-hsla {\r\n// .Bg-#{$colorKey} {\r\n// --value: #{$colorValue};\r\n// }\r\n//}\r\n\r\n@each $colorKey, $colorValue in $colors-Text-hsla {\r\n .Text-#{$colorKey} {\r\n --value: #{$colorValue};\r\n }\r\n}\r\n\r\n@each $colorKey, $colorValue in $colors-Border-hsla {\r\n .Border-#{$colorKey} {\r\n --value: #{$colorValue};\r\n }\r\n}\r\n","// ===========================================================================\r\n// Functions - Shadow\r\n// ===========================================================================\r\n\r\n/*\r\n https://brumm.af/shadows\r\n https://tobiasahlin.com/blog/layered-smooth-box-shadows/\r\n https://css-tricks.com/getting-deep-into-shadows/\r\n*/\r\n\r\n@function Shadow-Builder($suffix, $layers, $horizontal-map, $vertical-map, $blur-map, $spread-map, $color-map) {\r\n $result: (); // left + right + main bottom\r\n $result-inner: (); // inset\r\n $result-both: (); // inner + outer\r\n $result-br: (); // bottom + right\r\n\r\n $result-t: (); // top\r\n $result-r: (); // right\r\n $result-l: (); // left\r\n $result-b: (); // bottom\r\n\r\n $result-x: (); // left + right\r\n $result-y: (); // top + bottom\r\n\r\n @for $index from 1 through $layers {\r\n $left: if(length($horizontal-map)==0, 0, nth($horizontal-map, $index));\r\n $spread: if(length($spread-map)==0, 0, nth($spread-map, $index));\r\n\r\n $top: nth($vertical-map, $index);\r\n $blur: nth($blur-map, $index);\r\n $color: nth($color-map, $index);\r\n\r\n $result: append($result, #{$left} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n $result-both: append($result-both, #{$left} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n\r\n $result-inner: append($result-inner, #{0} #{0} #{$blur} #{0} #{$color} inset, \"comma\");\r\n $result-both: append($result-both, #{0} #{0} #{$blur} #{0} #{$color} inset, \"comma\");\r\n $result-br: append($result-br, #{$top} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n\r\n $result-t: append($result-t, #{0} #{-$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-r: append($result-r, #{$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-l: append($result-l, #{-$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-b: append($result-b, #{0} #{$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n\r\n $result-x: append($result-x, #{$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-x: append($result-x, #{-$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n\r\n $result-y: append($result-y, #{0} #{-$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-y: append($result-y, #{0} #{$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n }\r\n $suffix: if($suffix==null, \"\", \"-#{$suffix}\");\r\n\r\n $return-map: ();\r\n @if (length($result) > 0) {\r\n $return-map: (\r\n inset#{$suffix} : $result-inner,\r\n both#{$suffix} : $result-both,\r\n br#{$suffix} : $result-br,\r\n t#{$suffix} : $result-t,\r\n e#{$suffix} : $result-r,\r\n s#{$suffix} : $result-l,\r\n b#{$suffix} : $result-b,\r\n x#{$suffix} : $result-x,\r\n y#{$suffix} : $result-y,\r\n );\r\n }\r\n @return $return-map;\r\n}\r\n\r\n// box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];\r\n// $Shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.18),\r\n// 0px 2px 2px 0px rgba(0, 0, 0, 0.12),\r\n// 0px 4px 6px 0px rgba(0, 0, 0, 0.06);\r\n@function Shadow-Separator($suffix, $Shadow) {\r\n // lists\r\n $horizontal-map: ();\r\n $vertical-map: ();\r\n $blur-map: ();\r\n $spread-map: ();\r\n $color-map: ();\r\n\r\n @each $value in $Shadow {\r\n @for $index from 1 through length($value) {\r\n $layer: nth($value, $index);\r\n @if ($index==1) {\r\n $horizontal-map: append($horizontal-map, $layer, \"comma\");\r\n } @else if ($index==2) {\r\n $vertical-map: append($vertical-map, $layer, \"comma\");\r\n } @else if ($index==3) {\r\n $blur-map: append($blur-map, $layer, \"comma\");\r\n } @else if ($index==4) {\r\n $spread-map: append($spread-map, $layer, \"comma\");\r\n } @else if ($index==5) {\r\n $color-map: append($color-map, $layer, \"comma\");\r\n }\r\n }\r\n }\r\n\r\n @return Shadow-Builder($suffix, length($Shadow), $horizontal-map, $vertical-map, $blur-map, $spread-map, $color-map);\r\n}\r\n\r\n/// Based on $Shadow: 0px 1px 1px -1px rgba($Black, 0.18), 0px 2px 2px 0px rgba($Black, 0.12), 0px 4px 6px 0px rgba($Black, 0.06);\r\n@function Colored-shadow($color: black) {\r\n // using best result of shadow set\r\n @return 0 1px 1px -1px rgba($color, 0.18), 0px 2px 2px 0px rgba($color, 0.12), 0px 4px 6px 0px rgba($color, 0.06);\r\n}\r\n\r\n@function Colored-shadow-inner($color: black) {\r\n // using best result of shadow set\r\n @return 0 0 1px 0 rgba($color, 0.18) inset, 0 0 2px 0 rgba($color, 0.12) inset, 0 0 6px 0 rgba($color, 0.06) inset;\r\n}\r\n\r\n// box-shadow: Shadow-mixer($Shadow, $Shadow-inner);\r\n@function Shadow-mixer($shadow...) {\r\n $result: ();\r\n\r\n @each $value in $shadow {\r\n @if $value != null {\r\n $result: append($result, $value, \"comma\");\r\n }\r\n @if $value == none and length($shadow) > 1 {\r\n @warn \"The keyword 'none' must be used as a single argument.\";\r\n }\r\n }\r\n\r\n @if (length($result) > 0) {\r\n @return $result;\r\n }\r\n\r\n @return none;\r\n}","/*\r\n// ===========================================================================\r\n// Mixins - Utilities\r\n// ===========================================================================\r\n*/\r\n@mixin Utility-applier($important, $class-prefix, $properties, $values, $pseudo:null ) {\r\n @each $key, $value in $values {\r\n // Don't prefix if value key is null (eg. with shadow class)\r\n $class-suffix: if($key, if($class-prefix == \"\" , \"\", \"-\") + $key, \"\");\r\n\r\n @if $value != null {\r\n .#{$class-prefix + $class-suffix} {\r\n\r\n @if $pseudo != null {\r\n &:#{$pseudo} {\r\n @each $property in $properties {\r\n #{$property}: $value if($important, !important, null);\r\n }\r\n }\r\n } @else {\r\n @each $property in $properties {\r\n #{$property}: $value if($important, !important, null);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@mixin Utility-value-separator($utility, $breakpoints: $responsive-Breakpoints) {\r\n $values: map-get($utility, Values);\r\n\r\n // If the values are a list or string, convert it into a map\r\n @if type-of($values) == \"string\" or type-of(nth($values, 1)) != \"list\" {\r\n $values: zip($values, $values);\r\n }\r\n\r\n $properties: map-get($utility, Properties);\r\n // Multiple properties are possible, for example with vertical or horizontal margins or paddings\r\n @if type-of($properties) == \"string\" {\r\n $properties: append((), $properties);\r\n }\r\n\r\n $important: map-get($utility, Important);\r\n $responsive: map-get($utility, Responsive);\r\n $pseudo: map-get($utility, Pseudo); // null before after\r\n $print: map-get($utility, Print); // TODO: media print..\r\n\r\n // Use custom class if present\r\n $class-prefix: if(map-has-key($utility, Prefix), map-get($utility, Prefix), nth($properties, 1));\r\n $class-prefix: if($class-prefix == null, \"\", $class-prefix);\r\n\r\n @if $responsive {\r\n @each $breakpointKey, $breakpointValue in $breakpoints {\r\n $responsive-Infix: if($breakpointValue == 0, \"\", \"-#{$breakpointKey}\");\r\n @include media-min-W($breakpointValue) {\r\n @include Utility-applier($important, $class-prefix + $responsive-Infix, $properties, $values, $pseudo);\r\n }\r\n }\r\n } @else {\r\n @include Utility-applier($important, $class-prefix, $properties, $values, $pseudo);\r\n }\r\n}\r\n\r\n/*\r\n * KEY : VALUES\r\n * \"Opacity\": (Prefix: Opacity, Properties: opacity, Important: true, Responsive: false, Values: $opacity-map,),\r\n */\r\n@mixin Utilities($utilities) {\r\n @each $keyUtil, $valueUtil in $utilities {\r\n @include Utility-value-separator($valueUtil);\r\n }\r\n}","// ===========================================================================\r\n// Color System\r\n// ===========================================================================\r\n/*@formatter:off*/\r\n$White : hsl(0, 0%, 100%) !default;\r\n$Black : hsl(0,0%,0%) !default;\r\n$Silver : hsl(0, 0%, 75%) !default;\r\n$Gray\t :\thsl(213,8%,45%) !default;\r\n\r\n$Red : hsl(354,66%,54%) !default;\r\n$Lime : hsl(120, 100%, 50%) !default;\r\n$Blue : hsl(212,97%,43%) !default;\r\n$Yellow : hsl(45,100%,51%) !default;\r\n$Cyan : hsl(180,100%,50%) !default;\r\n$Magenta : hsl(300,100%, 50%) !default;\r\n\r\n$Purple : hsl(261,51%,51%) !default;\r\n$Green : hsl(134,61%,41%) !default;\r\n$Maroon : hsl(331, 74%, 30%) !default;\r\n$Navy : hsl(210, 100%, 12%) !default;\r\n$Teal : hsl(162,73%,46%) !default;\r\n$Olive : hsl(60,100%, 25%) !default;\r\n$Orange : hsl(24,93%,50%) !default;\r\n$Pink : hsl(324,79%,60%) !default;\r\n$Brown : hsl(0, 33%, 38%) !default;\r\n$Indigo : hsl(270, 100%, 25%) !default;\r\n\r\n/*\r\n// Theming\r\n*/\r\n\r\n$Night : hsl(0, 0%, 7%) !default; // #121212\r\n$Dark : hsl(240, 7%, 18%) !default; // #2B2B31 based mixed\r\n$Light : hsl(0, 0%, 98%) !default; // #FAFAFA based $mdb-Light\r\n$Primary : hsl(217, 96%, 52%) !default; // #0F69FA based $bs-Primary\r\n$Secondary : hsl(208,7%,46%) !default; // #6D767E based $bs-Secondary\r\n$Success : hsl(150, 67%, 35%) !default; // #1D9559 based $bs-Success\r\n$Danger : hsl(354,66%,54%) !default; // #D73C4C based mixed\r\n$Warning : hsl(45, 100%, 45%) !default; // #E6AC00 based mixed\r\n$Info : hsl(195, 90%, 55%) !default; // #25C0F4 based mixed $bs-Info / $mdb-Info\r\n/*@formatter:on*/\r\n\r\n$var-Prefix: ls-;\r\n\r\n// 'red', 'lime', 'blue', 'yellow', 'cyan', 'magenta', 'purple', 'green', 'maroon', 'navy', 'teal', 'olive', 'orange', 'pink', 'brown', 'indigo', 'white', 'silver', 'gray'\r\n$colors: (\r\n \"red\" : $Red,\r\n \"lime\" : $Lime,\r\n \"blue\" : $Blue,\r\n \"yellow\" : $Yellow,\r\n \"cyan\" : $Cyan,\r\n \"magenta\" : $Magenta,\r\n \"purple\" : $Purple,\r\n \"green\" : $Green,\r\n \"maroon\" : $Maroon,\r\n \"navy\" : $Navy,\r\n \"teal\" : $Teal,\r\n \"olive\" : $Olive,\r\n \"orange\" : $Orange,\r\n \"pink\" : $Pink,\r\n \"brown\" : $Brown,\r\n \"indigo\" : $Indigo,\r\n \"black\" : $Black,\r\n \"white\" : $White,\r\n \"silver\" : $Silver,\r\n \"gray\" : $Gray,\r\n) !default;\r\n\r\n$colors-Theme: (\r\n \"light\" : $Light,\r\n \"dark\" : $Dark,\r\n \"night\" : $Night,\r\n \"primary\" : $Primary,\r\n \"secondary\" : $Secondary,\r\n \"success\" : $Success,\r\n \"info\" : $Info,\r\n \"warning\" : $Warning,\r\n \"danger\" : $Danger, //\"error\" : $Danger,\r\n) !default;\r\n\r\n$theme-Components: (\r\n 'Theme': null,\r\n 'Alert':'alert',\r\n 'Calendar':'calendar',\r\n 'Card':'card',\r\n 'Caret':'caret',\r\n 'Toast':'toast',\r\n 'Btn':'btn',\r\n 'Btn-outline':'btn',\r\n 'List-item':'lst',\r\n) !default;\r\n\r\n$Muted: hsla(213, 11%, var(--ls-text-lightness, 69%), var(--ls-text-alpha, 1));\r\n/*\r\n// Colors\r\n*/\r\n\r\n$colors-all: map-merge($colors, $colors-Theme);\r\n\r\n$colors-Background-hsla: ();\r\n$colors-Background-hsla: Color-hsla($colors-all, --ls-bg-alpha, --ls-bg-lightness);\r\n$colors-Background-hsla: map-merge($colors-Background-hsla, (\"transparent\": transparent));\r\n\r\n$colors-Text-hsla: ();\r\n$colors-Text-hsla: Color-hsla($colors-all, --ls-text-alpha, --ls-text-lightness);\r\n$colors-Text-hsla: map-merge($colors-Text-hsla, (\"muted\": $Muted, \"reset\": inherit,));\r\n\r\n$colors-Border-hsla: ();\r\n$colors-Border-hsla: Color-hsla($colors-all, --ls-border-alpha, --ls-border-lightness);\r\n$colors-Border-hsla: map-merge($colors-Border-hsla, (\"transparent\": transparent));\r\n\r\n\r\n/*\r\n// ===========================================================================\r\n// Utils\r\n// ===========================================================================\r\n*/\r\n\r\n$color-Alpha-map: (0: 0, 5: .05, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;\r\n$color-Lightness-map: (0:0%, 5: 5%, 10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%) !default;\r\n$sizes-percents: (\r\n 10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%,\r\n 25:25%, 75:75%, 33:33.333%, 66:66.666%, auto:auto\r\n) !default;\r\n\r\n/*\r\n// Border radius\r\n*/\r\n\r\n$Rounded: .25rem !default;\r\n$Rounded-2x: .5rem !default;\r\n$Rounded-3x: .75rem !default;\r\n$Rounded-pill: 50rem !default;\r\n\r\n/*\r\n// Border\r\n*/\r\n\r\n$Border-width: 1px !default;\r\n$Border-widths: (0: 0, 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px) !default;\r\n\r\n/*\r\n// Spacing\r\n*/\r\n\r\n$spacer: 1rem !default; // 16px\r\n$spacers-map: (\r\n 0: 0,\r\n 1: ($spacer * 0.25),\r\n 2: ($spacer * 0.5),\r\n 3: ($spacer * 1.00),\r\n 4: ($spacer * 1.50),\r\n 5: ($spacer * 3.00),\r\n);\r\n$negative-spacers: (\r\n n1: ($spacer * -0.25),\r\n n2: ($spacer * -0.5),\r\n n3: ($spacer * -1.00),\r\n n4: ($spacer * -1.50),\r\n n5: ($spacer * -3.00),\r\n);\r\n\r\n\r\n/*\r\n// Grid System\r\n// Set the number of columns and specify the width of the gutters.\r\n*/\r\n\r\n$breakpoints-Grid: (none: 0, sm : 480px, md : 768px, lg : 1024px, xl : 1280px, xxl : 1440px);\r\n$breakpoints-Container: (sm : 480px, md : 768px, lg : 976px, xl : 1232px, xxl : 1376px);\r\n$responsive-Breakpoints: $breakpoints-Grid;\r\n\r\n$grid-Columns: 12 !default;\r\n$grid-Gutter-width: 1.5rem; // 1rem\r\n$grid-Row-Columns: 6 !default;\r\n\r\n$gutters-map: $spacers-map !default;\r\n\r\n/*\r\n// Shadow\r\n// Box-shadow with rgba variable\r\n// --component-shadow-color: 0, 0, 0; // Has to be like this :p\r\n// https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable\r\n*/\r\n$Shadow-color: var(--#{$var-Prefix}shadow-color-rgb);\r\n\r\n$Shadow: 0px 1px 1px -1px rgba($Shadow-color, 0.18), 0px 2px 2px 0px rgba($Shadow-color, 0.12), 0px 4px 6px 0px rgba($Shadow-color, 0.06);\r\n$Shadow-2x: 0px 1px 1px 0px rgba($Shadow-color, 0.18), 0px 2px 3px 0px rgba($Shadow-color, 0.12), 0px 6px 9px 0px rgba($Shadow-color, 0.06);\r\n$Shadow-3x: 0px 2px 2px 0px rgba($Shadow-color, 0.18), 0px 3px 4px 0px rgba($Shadow-color, 0.12), 0px 9px 12px 0px rgba($Shadow-color, 0.06);\r\n\r\n$Shadow-map: (null: $Shadow, 2x: $Shadow-2x, 3x: $Shadow-3x,);\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(null, $Shadow));\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(2x, $Shadow-2x));\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(3x, $Shadow-3x));\r\n\r\n$Drop-shadow: drop-shadow(0px 1px 1px rgba($Shadow-color, 0.72)) drop-shadow(0px 2px 2px rgba($Shadow-color, 0.48)) drop-shadow(0px 4px 6px rgba($Shadow-color, 0.24));\r\n$Drop-shadow-2x: drop-shadow(0px 1px 1px rgba($Shadow-color, 0.72)) drop-shadow(0px 2px 3px rgba($Shadow-color, 0.48)) drop-shadow(0px 6px 9px rgba($Shadow-color, 0.24));\r\n$Drop-shadow-3x: drop-shadow(0px 2px 2px rgba($Shadow-color, 0.72)) drop-shadow(0px 3px 4px rgba($Shadow-color, 0.48)) drop-shadow(0px 9px 12px rgba($Shadow-color, 0.24));\r\n\r\n$Drop-shadow-map: (0: drop-shadow(0 0 #0000), null: $Drop-shadow, 2x: $Drop-shadow-2x, 3x: $Drop-shadow-3x,);\r\n\r\n/*\r\n// Typography\r\n// Font, line-height, and color for body text, headings, and more.\r\n*/\r\n// Font-family\r\n$font-family-sans-serif: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\r\n$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\r\n\r\n$font-family-base: var(--#{$var-Prefix}font-sans-serif) !default;\r\n$font-family-code: var(--#{$var-Prefix}font-monospace) !default;\r\n\r\n// Font-weight\r\n$font-weight-lighter: lighter !default;\r\n$font-weight-light: 300 !default;\r\n$font-weight-normal: 400 !default;\r\n$font-weight-bold: 700 !default;\r\n$font-weight-bolder: bolder !default;\r\n\r\n$line-height-base: 1.5 !default;\r\n$line-height-sm: 1.25 !default;\r\n$line-height-lg: 2 !default;\r\n\r\n// Font-size\r\n$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`\r\n\r\n$h1-font-size: $font-size-base * 2.5 !default;\r\n$h2-font-size: $font-size-base * 2 !default;\r\n$h3-font-size: $font-size-base * 1.75 !default;\r\n$h4-font-size: $font-size-base * 1.5 !default;\r\n$h5-font-size: $font-size-base * 1.25 !default;\r\n$h6-font-size: $font-size-base !default;\r\n\r\n$font-sizes: (\r\n 1: $h1-font-size,\r\n 2: $h2-font-size,\r\n 3: $h3-font-size,\r\n 4: $h4-font-size,\r\n 5: $h5-font-size,\r\n 6: $h6-font-size\r\n) !default;\r\n","/*\n// Configuration\n*/\n/*\n https://brumm.af/shadows\n https://tobiasahlin.com/blog/layered-smooth-box-shadows/\n https://css-tricks.com/getting-deep-into-shadows/\n*/\n/*\n// ===========================================================================\n// Mixins - Utilities\n// ===========================================================================\n*/\n/*\n * KEY : VALUES\n * \"Opacity\": (Prefix: Opacity, Properties: opacity, Important: true, Responsive: false, Values: $opacity-map,),\n */\n/*@formatter:off*/\n/*\n// Theming\n*/\n/*@formatter:on*/\n/*\n// Colors\n*/\n/*\n// ===========================================================================\n// Utils\n// ===========================================================================\n*/\n/*\n// Border radius\n*/\n/*\n// Border\n*/\n/*\n// Spacing\n*/\n/*\n// Grid System\n// Set the number of columns and specify the width of the gutters.\n*/\n/*\n// Shadow\n// Box-shadow with rgba variable\n// --component-shadow-color: 0, 0, 0; // Has to be like this :p\n// https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable\n*/\n/*\n// Typography\n// Font, line-height, and color for body text, headings, and more.\n*/\n.Text-red {\n --value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));\n}\n\n.Text-lime {\n --value: hsla(120deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-blue {\n --value: hsla(212deg, 97%, var(--ls-text-lightness, 43%), var(--ls-text-alpha, 1));\n}\n\n.Text-yellow {\n --value: hsla(45deg, 100%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-cyan {\n --value: hsla(180deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-magenta {\n --value: hsla(300deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-purple {\n --value: hsla(261deg, 51%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-green {\n --value: hsla(134deg, 61%, var(--ls-text-lightness, 41%), var(--ls-text-alpha, 1));\n}\n\n.Text-maroon {\n --value: hsla(331deg, 74%, var(--ls-text-lightness, 30%), var(--ls-text-alpha, 1));\n}\n\n.Text-navy {\n --value: hsla(210deg, 100%, var(--ls-text-lightness, 12%), var(--ls-text-alpha, 1));\n}\n\n.Text-teal {\n --value: hsla(162deg, 73%, var(--ls-text-lightness, 46%), var(--ls-text-alpha, 1));\n}\n\n.Text-olive {\n --value: hsla(60deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));\n}\n\n.Text-orange {\n --value: hsla(24deg, 93%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-pink {\n --value: hsla(324deg, 79%, var(--ls-text-lightness, 60%), var(--ls-text-alpha, 1));\n}\n\n.Text-brown {\n --value: hsla(0deg, 33%, var(--ls-text-lightness, 38%), var(--ls-text-alpha, 1));\n}\n\n.Text-indigo {\n --value: hsla(270deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));\n}\n\n.Text-black {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 0%), var(--ls-text-alpha, 1));\n}\n\n.Text-white {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 100%), var(--ls-text-alpha, 1));\n}\n\n.Text-silver {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 75%), var(--ls-text-alpha, 1));\n}\n\n.Text-gray {\n --value: hsla(213deg, 8%, var(--ls-text-lightness, 45%), var(--ls-text-alpha, 1));\n}\n\n.Text-light {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 98%), var(--ls-text-alpha, 1));\n}\n\n.Text-dark {\n --value: hsla(240deg, 7%, var(--ls-text-lightness, 18%), var(--ls-text-alpha, 1));\n}\n\n.Text-night {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 7%), var(--ls-text-alpha, 1));\n}\n\n.Text-primary {\n --value: hsla(217deg, 96%, var(--ls-text-lightness, 52%), var(--ls-text-alpha, 1));\n}\n\n.Text-secondary {\n --value: hsla(208deg, 7%, var(--ls-text-lightness, 46%), var(--ls-text-alpha, 1));\n}\n\n.Text-success {\n --value: hsla(150deg, 67%, var(--ls-text-lightness, 35%), var(--ls-text-alpha, 1));\n}\n\n.Text-info {\n --value: hsla(195deg, 90%, var(--ls-text-lightness, 55%), var(--ls-text-alpha, 1));\n}\n\n.Text-warning {\n --value: hsla(45deg, 100%, var(--ls-text-lightness, 45%), var(--ls-text-alpha, 1));\n}\n\n.Text-danger {\n --value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));\n}\n\n.Text-muted {\n --value: hsla(213, 11%, var(--ls-text-lightness, 69%), var(--ls-text-alpha, 1));\n}\n\n.Text-reset {\n --value: inherit;\n}\n\n.Border-red {\n --value: hsla(354deg, 66%, 54%, var(--ls-border-alpha, 1));\n}\n\n.Border-lime {\n --value: hsla(120deg, 100%, 50%, var(--ls-border-alpha, 1));\n}\n\n.Border-blue {\n --value: hsla(212deg, 97%, 43%, var(--ls-border-alpha, 1));\n}\n\n.Border-yellow {\n --value: hsla(45deg, 100%, 51%, var(--ls-border-alpha, 1));\n}\n\n.Border-cyan {\n --value: hsla(180deg, 100%, 50%, var(--ls-border-alpha, 1));\n}\n\n.Border-magenta {\n --value: hsla(300deg, 100%, 50%, var(--ls-border-alpha, 1));\n}\n\n.Border-purple {\n --value: hsla(261deg, 51%, 51%, var(--ls-border-alpha, 1));\n}\n\n.Border-green {\n --value: hsla(134deg, 61%, 41%, var(--ls-border-alpha, 1));\n}\n\n.Border-maroon {\n --value: hsla(331deg, 74%, 30%, var(--ls-border-alpha, 1));\n}\n\n.Border-navy {\n --value: hsla(210deg, 100%, 12%, var(--ls-border-alpha, 1));\n}\n\n.Border-teal {\n --value: hsla(162deg, 73%, 46%, var(--ls-border-alpha, 1));\n}\n\n.Border-olive {\n --value: hsla(60deg, 100%, 25%, var(--ls-border-alpha, 1));\n}\n\n.Border-orange {\n --value: hsla(24deg, 93%, 50%, var(--ls-border-alpha, 1));\n}\n\n.Border-pink {\n --value: hsla(324deg, 79%, 60%, var(--ls-border-alpha, 1));\n}\n\n.Border-brown {\n --value: hsla(0deg, 33%, 38%, var(--ls-border-alpha, 1));\n}\n\n.Border-indigo {\n --value: hsla(270deg, 100%, 25%, var(--ls-border-alpha, 1));\n}\n\n.Border-black {\n --value: hsla(0deg, 0%, 0%, var(--ls-border-alpha, 1));\n}\n\n.Border-white {\n --value: hsla(0deg, 0%, 100%, var(--ls-border-alpha, 1));\n}\n\n.Border-silver {\n --value: hsla(0deg, 0%, 75%, var(--ls-border-alpha, 1));\n}\n\n.Border-gray {\n --value: hsla(213deg, 8%, 45%, var(--ls-border-alpha, 1));\n}\n\n.Border-light {\n --value: hsla(0deg, 0%, 98%, var(--ls-border-alpha, 1));\n}\n\n.Border-dark {\n --value: hsla(240deg, 7%, 18%, var(--ls-border-alpha, 1));\n}\n\n.Border-night {\n --value: hsla(0deg, 0%, 7%, var(--ls-border-alpha, 1));\n}\n\n.Border-primary {\n --value: hsla(217deg, 96%, 52%, var(--ls-border-alpha, 1));\n}\n\n.Border-secondary {\n --value: hsla(208deg, 7%, 46%, var(--ls-border-alpha, 1));\n}\n\n.Border-success {\n --value: hsla(150deg, 67%, 35%, var(--ls-border-alpha, 1));\n}\n\n.Border-info {\n --value: hsla(195deg, 90%, 55%, var(--ls-border-alpha, 1));\n}\n\n.Border-warning {\n --value: hsla(45deg, 100%, 45%, var(--ls-border-alpha, 1));\n}\n\n.Border-danger {\n --value: hsla(354deg, 66%, 54%, var(--ls-border-alpha, 1));\n}\n\n.Border-transparent {\n --value: transparent;\n}\n\n/*# sourceMappingURL=test.css.map */\n"]}
|
package/package.json
CHANGED
|
@@ -50,16 +50,17 @@
|
|
|
50
50
|
@each $colorKey, $colorValue in $colors {
|
|
51
51
|
$color: $colorValue;
|
|
52
52
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}
|
|
53
|
+
// Not: Dont f*ck with border color..
|
|
54
|
+
//@if (str-index($alpha, '--#{$var-Prefix}border')) {
|
|
55
|
+
// $color: Color-ByLightness($colorValue, 70%); // 80
|
|
56
|
+
// @if ($colorKey=='dark') {
|
|
57
|
+
// $color: Color-ByLightness($colorValue, 45%);
|
|
58
|
+
// } @else if ($colorKey=='night') {
|
|
59
|
+
// $color: Color-ByLightness($colorValue, 35%);
|
|
60
|
+
// } @else if ($colorKey=='light' or $colorKey=='white') {
|
|
61
|
+
// $color: Color-ByLightness($colorValue, 90%);
|
|
62
|
+
// }
|
|
63
|
+
//}
|
|
63
64
|
|
|
64
65
|
$color-h: #{round(hue($color))};
|
|
65
66
|
$color-s: #{round(saturation($color))};
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
both#{$suffix} : $result-both,
|
|
58
58
|
br#{$suffix} : $result-br,
|
|
59
59
|
t#{$suffix} : $result-t,
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
e#{$suffix} : $result-r,
|
|
61
|
+
s#{$suffix} : $result-l,
|
|
62
62
|
b#{$suffix} : $result-b,
|
|
63
63
|
x#{$suffix} : $result-x,
|
|
64
64
|
y#{$suffix} : $result-y,
|
|
@@ -3,23 +3,6 @@
|
|
|
3
3
|
// ===========================================================================
|
|
4
4
|
// CSS Variables (Custom Properties)
|
|
5
5
|
|
|
6
|
-
@mixin Bg-Text-Border-variables($colors) {
|
|
7
|
-
@each $colorKey, $colorValue in $colors {
|
|
8
|
-
.Bg-#{$colorKey} {
|
|
9
|
-
--#{$var-Prefix}bg-lightness: #{lightness($colorValue)};
|
|
10
|
-
--#{$var-Prefix}bg-alpha: 1;
|
|
11
|
-
//color: #{TextColor-ByBackground($colorValue)}; // DON'T
|
|
12
|
-
}
|
|
13
|
-
.Text-#{$colorKey} {
|
|
14
|
-
--#{$var-Prefix}text-lightness: #{lightness($colorValue)};
|
|
15
|
-
--#{$var-Prefix}text-alpha: 1;
|
|
16
|
-
}
|
|
17
|
-
.Border-#{$colorKey} {
|
|
18
|
-
--#{$var-Prefix}border-alpha: 1;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
6
|
@mixin Theme-components($theme-colors, $theme-components) {
|
|
24
7
|
@each $colorKey, $colorValue in $theme-colors {
|
|
25
8
|
$fg-muted: hsla(213, 11%, 69%, 1);
|
|
@@ -31,7 +14,7 @@
|
|
|
31
14
|
$color-border: Color-ByLightness($colorValue, 70%); // 80
|
|
32
15
|
$color-shadow-rgb: 0, 0, 0 ; // Has to be this way.. check shadows
|
|
33
16
|
|
|
34
|
-
$color-active: lighten($colorValue, 10%);
|
|
17
|
+
$color-active: $colorValue;// lighten($colorValue, 10%);
|
|
35
18
|
$color-surface: Color-ByLightness($colorValue, 90%); // 90% - DON'T CHANGE
|
|
36
19
|
|
|
37
20
|
$color-lightest: Color-ByLightness($colorValue, 95%); // 95% - DON'T CHANGE
|
|
@@ -25,17 +25,23 @@ $Pink : hsl(324,79%,60%) !default;
|
|
|
25
25
|
$Brown : hsl(0, 33%, 38%) !default;
|
|
26
26
|
$Indigo : hsl(270, 100%, 25%) !default;
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
$
|
|
34
|
-
$
|
|
35
|
-
$
|
|
36
|
-
$
|
|
28
|
+
/*
|
|
29
|
+
// Theming
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
$Night : hsl(0, 0%, 7%) !default; // #121212
|
|
33
|
+
$Dark : hsl(240, 7%, 18%) !default; // #2B2B31 based mixed
|
|
34
|
+
$Light : hsl(0, 0%, 98%) !default; // #FAFAFA based $mdb-Light
|
|
35
|
+
$Primary : hsl(217, 96%, 52%) !default; // #0F69FA based $bs-Primary
|
|
36
|
+
$Secondary : hsl(208,7%,46%) !default; // #6D767E based $bs-Secondary
|
|
37
|
+
$Success : hsl(150, 67%, 35%) !default; // #1D9559 based $bs-Success
|
|
38
|
+
$Danger : hsl(354,66%,54%) !default; // #D73C4C based mixed
|
|
39
|
+
$Warning : hsl(45, 100%, 45%) !default; // #E6AC00 based mixed
|
|
40
|
+
$Info : hsl(195, 90%, 55%) !default; // #25C0F4 based mixed $bs-Info / $mdb-Info
|
|
37
41
|
/*@formatter:on*/
|
|
38
42
|
|
|
43
|
+
$var-Prefix: ls-;
|
|
44
|
+
|
|
39
45
|
// 'red', 'lime', 'blue', 'yellow', 'cyan', 'magenta', 'purple', 'green', 'maroon', 'navy', 'teal', 'olive', 'orange', 'pink', 'brown', 'indigo', 'white', 'silver', 'gray'
|
|
40
46
|
$colors: (
|
|
41
47
|
"red" : $Red,
|
|
@@ -54,21 +60,22 @@ $colors: (
|
|
|
54
60
|
"pink" : $Pink,
|
|
55
61
|
"brown" : $Brown,
|
|
56
62
|
"indigo" : $Indigo,
|
|
63
|
+
"black" : $Black,
|
|
57
64
|
"white" : $White,
|
|
58
65
|
"silver" : $Silver,
|
|
59
66
|
"gray" : $Gray,
|
|
60
67
|
) !default;
|
|
61
68
|
|
|
62
69
|
$colors-Theme: (
|
|
70
|
+
"light" : $Light,
|
|
71
|
+
"dark" : $Dark,
|
|
72
|
+
"night" : $Night,
|
|
63
73
|
"primary" : $Primary,
|
|
64
74
|
"secondary" : $Secondary,
|
|
65
75
|
"success" : $Success,
|
|
66
76
|
"info" : $Info,
|
|
67
77
|
"warning" : $Warning,
|
|
68
|
-
"danger" : $Danger,
|
|
69
|
-
"light" : $Light,
|
|
70
|
-
"dark" : $Dark,
|
|
71
|
-
"night" : $Black
|
|
78
|
+
"danger" : $Danger, //"error" : $Danger,
|
|
72
79
|
) !default;
|
|
73
80
|
|
|
74
81
|
$theme-Components: (
|
|
@@ -83,8 +90,7 @@ $theme-Components: (
|
|
|
83
90
|
'List-item':'lst',
|
|
84
91
|
) !default;
|
|
85
92
|
|
|
86
|
-
$var-
|
|
87
|
-
|
|
93
|
+
$Muted: hsla(213, 11%, var(--ls-text-lightness, 69%), var(--ls-text-alpha, 1));
|
|
88
94
|
/*
|
|
89
95
|
// Colors
|
|
90
96
|
*/
|
|
@@ -93,12 +99,15 @@ $colors-all: map-merge($colors, $colors-Theme);
|
|
|
93
99
|
|
|
94
100
|
$colors-Background-hsla: ();
|
|
95
101
|
$colors-Background-hsla: Color-hsla($colors-all, --ls-bg-alpha, --ls-bg-lightness);
|
|
102
|
+
$colors-Background-hsla: map-merge($colors-Background-hsla, ("transparent": transparent));
|
|
96
103
|
|
|
97
104
|
$colors-Text-hsla: ();
|
|
98
105
|
$colors-Text-hsla: Color-hsla($colors-all, --ls-text-alpha, --ls-text-lightness);
|
|
106
|
+
$colors-Text-hsla: map-merge($colors-Text-hsla, ("muted": $Muted, "reset": inherit,));
|
|
99
107
|
|
|
100
108
|
$colors-Border-hsla: ();
|
|
101
109
|
$colors-Border-hsla: Color-hsla($colors-all, --ls-border-alpha, --ls-border-lightness);
|
|
110
|
+
$colors-Border-hsla: map-merge($colors-Border-hsla, ("transparent": transparent));
|
|
102
111
|
|
|
103
112
|
|
|
104
113
|
/*
|
|
@@ -109,7 +118,6 @@ $colors-Border-hsla: Color-hsla($colors-all, --ls-border-alpha, --ls-border-ligh
|
|
|
109
118
|
|
|
110
119
|
$color-Alpha-map: (0: 0, 5: .05, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;
|
|
111
120
|
$color-Lightness-map: (0:0%, 5: 5%, 10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%) !default;
|
|
112
|
-
$opacity-map: (0: 0, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;
|
|
113
121
|
$sizes-percents: (
|
|
114
122
|
10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%,
|
|
115
123
|
25:25%, 75:75%, 33:33.333%, 66:66.666%, auto:auto
|
|
@@ -145,11 +153,11 @@ $spacers-map: (
|
|
|
145
153
|
5: ($spacer * 3.00),
|
|
146
154
|
);
|
|
147
155
|
$negative-spacers: (
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
156
|
+
n1: ($spacer * -0.25),
|
|
157
|
+
n2: ($spacer * -0.5),
|
|
158
|
+
n3: ($spacer * -1.00),
|
|
159
|
+
n4: ($spacer * -1.50),
|
|
160
|
+
n5: ($spacer * -3.00),
|
|
153
161
|
);
|
|
154
162
|
|
|
155
163
|
|
|
@@ -195,13 +203,39 @@ $Drop-shadow-map: (0: drop-shadow(0 0 #0000), null: $Drop-shadow, 2x: $Drop-shad
|
|
|
195
203
|
// Typography
|
|
196
204
|
// Font, line-height, and color for body text, headings, and more.
|
|
197
205
|
*/
|
|
198
|
-
//
|
|
199
|
-
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
|
|
206
|
+
// Font-family
|
|
200
207
|
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
|
201
208
|
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
|
202
209
|
|
|
210
|
+
$font-family-base: var(--#{$var-Prefix}font-sans-serif) !default;
|
|
211
|
+
$font-family-code: var(--#{$var-Prefix}font-monospace) !default;
|
|
212
|
+
|
|
213
|
+
// Font-weight
|
|
203
214
|
$font-weight-lighter: lighter !default;
|
|
204
215
|
$font-weight-light: 300 !default;
|
|
205
216
|
$font-weight-normal: 400 !default;
|
|
206
217
|
$font-weight-bold: 700 !default;
|
|
207
218
|
$font-weight-bolder: bolder !default;
|
|
219
|
+
|
|
220
|
+
$line-height-base: 1.5 !default;
|
|
221
|
+
$line-height-sm: 1.25 !default;
|
|
222
|
+
$line-height-lg: 2 !default;
|
|
223
|
+
|
|
224
|
+
// Font-size
|
|
225
|
+
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
|
|
226
|
+
|
|
227
|
+
$h1-font-size: $font-size-base * 2.5 !default;
|
|
228
|
+
$h2-font-size: $font-size-base * 2 !default;
|
|
229
|
+
$h3-font-size: $font-size-base * 1.75 !default;
|
|
230
|
+
$h4-font-size: $font-size-base * 1.5 !default;
|
|
231
|
+
$h5-font-size: $font-size-base * 1.25 !default;
|
|
232
|
+
$h6-font-size: $font-size-base !default;
|
|
233
|
+
|
|
234
|
+
$font-sizes: (
|
|
235
|
+
1: $h1-font-size,
|
|
236
|
+
2: $h2-font-size,
|
|
237
|
+
3: $h3-font-size,
|
|
238
|
+
4: $h4-font-size,
|
|
239
|
+
5: $h5-font-size,
|
|
240
|
+
6: $h6-font-size
|
|
241
|
+
) !default;
|