UNPKG

12.4 kBSCSSView Raw
1// primary color ---------------------------------
2.primary-bg {
3 background-color: $primary !important;
4}
5.primary-color {
6 color: $primary !important;
7}
8.primary-border-color {
9 border-color: $primary !important;
10 &.border {
11 border-color: $primary !important;
12 }
13}
14
15// white
16.white-bg {
17 background-color: $white !important;
18}
19.white-color {
20 color: $white !important;
21}
22.white-border-color- {
23 border-color: $white !important;
24 &.border {
25 border-color: $white !important;
26 }
27}
28
29// primary colors tinte e ombre------------------
30
31$colorlist: $primary-a1 $primary-a2 $primary-a3 $primary-a4 $primary-a5 $primary-a6 $primary-a7 $primary-a8 $primary-a9 $primary-a10 $primary-a11 $primary-a12;
32
33@for $i from 1 through length($colorlist) {
34 $color: nth($colorlist, $i);
35 .primary-bg-a#{$i} {
36 background-color: $color !important;
37 }
38 .primary-color-a#{$i} {
39 color: $color !important;
40 }
41 .primary-border-color-a#{$i} {
42 border-color: $color !important;
43 &.border {
44 border-color: $color !important;
45 }
46 }
47}
48// primary colors toni------------------
49$colorlist: $primary-b1 $primary-b2 $primary-b3 $primary-b4 $primary-b5 $primary-b6 $primary-b7 $primary-b8;
50
51@for $i from 1 through length($colorlist) {
52 $color: nth($colorlist, $i);
53 .primary-bg-b#{$i} {
54 background-color: $color !important;
55 }
56 .primary-color-b#{$i} {
57 color: $color !important;
58 }
59 .primary-border-color-b#{$i} {
60 border-color: $color !important;
61 &.border {
62 border-color: $color !important;
63 }
64 }
65}
66// primary colors saturazione------------------
67$colorlist: $primary-c1 $primary-c2 $primary-c3 $primary-c4 $primary-c5 $primary-c6 $primary-c7 $primary-c8 $primary-c9 $primary-c10 $primary-c11 $primary-c12;
68
69@for $i from 1 through length($colorlist) {
70 $color: nth($colorlist, $i);
71 .primary-bg-c#{$i} {
72 background-color: $color !important;
73 }
74 .primary-color-c#{$i} {
75 color: $color !important;
76 }
77 .primary-border-color-c#{$i} {
78 border-color: $color !important;
79 &.border {
80 border-color: $color !important;
81 }
82 }
83}
84// accent colors-----------------------------------------------------------
85.analogue-1-bg {
86 background-color: $analogue-1 !important;
87}
88.analogue-1-color {
89 color: $analogue-1 !important;
90}
91.analogue-1-border-color- {
92 border-color: $analogue-1 !important;
93 &.border {
94 border-color: $analogue-1 !important;
95 }
96}
97// accent colors tinte e ombre------------------
98// analog 1
99$colorlist: $analogue-1-a1 $analogue-1-a2 $analogue-1-a3 $analogue-1-a4 $analogue-1-a5 $analogue-1-a6 $analogue-1-a7 $analogue-1-a8 $analogue-1-a9
100 $analogue-1-a10 $analogue-1-a11 $analogue-1-a12;
101
102@for $i from 1 through length($colorlist) {
103 $color: nth($colorlist, $i);
104 .analogue-1-bg-a#{$i} {
105 background-color: $color !important;
106 }
107 .analogue-1-color-a#{$i} {
108 color: $color !important;
109 }
110 .analogue-1-border-color-a#{$i} {
111 border-color: $color !important;
112 &.border {
113 border-color: $color !important;
114 }
115 }
116}
117// analog 2
118.analogue-2-bg {
119 background-color: $analogue-2 !important;
120}
121.analogue-2-color {
122 color: $analogue-2 !important;
123}
124.analogue-2-border-color- {
125 border-color: $analogue-2 !important;
126 &.border {
127 border-color: $analogue-2 !important;
128 }
129}
130$colorlist: $analogue-2-a1 $analogue-2-a2 $analogue-2-a3 $analogue-2-a4 $analogue-2-a5 $analogue-2-a6 $analogue-2-a7 $analogue-2-a8 $analogue-2-a9
131 $analogue-2-a10 $analogue-2-a11 $analogue-2-a12;
132
133@for $i from 1 through length($colorlist) {
134 $color: nth($colorlist, $i);
135 .analogue-2-bg-a#{$i} {
136 background-color: $color !important;
137 }
138 .analogue-2-color-a#{$i} {
139 color: $color !important;
140 }
141 .analogue-2-border-color-a#{$i} {
142 border-color: $color !important;
143 &.border {
144 border-color: $color !important;
145 }
146 }
147}
148
149// complementary 1
150.complementary-1-bg {
151 background-color: $complementary-1 !important;
152}
153.complementary-1-color {
154 color: $complementary-2 !important;
155}
156.complementary-1-border-color- {
157 border-color: $complementary-1 !important;
158 &.border {
159 border-color: $complementary-1 !important;
160 }
161}
162$colorlist: $complementary-1-a1 $complementary-1-a2 $complementary-1-a3 $complementary-1-a4 $complementary-1-a5 $complementary-1-a6 $complementary-1-a7
163 $complementary-1-a8 $complementary-1-a9 $complementary-1-a10 $complementary-1-a11 $complementary-1-a12;
164
165@for $i from 1 through length($colorlist) {
166 $color: nth($colorlist, $i);
167 .complementary-1-bg-a#{$i} {
168 background-color: $color !important;
169 }
170 .complementary-1-color-a#{$i} {
171 color: $color !important;
172 }
173 .complementary-1-border-color-a#{$i} {
174 border-color: $color !important;
175 &.border {
176 border-color: $color !important;
177 }
178 }
179}
180
181// complementary 2
182.complementary-2-bg {
183 background-color: $complementary-2 !important;
184}
185.complementary-2-color {
186 color: $complementary-2 !important;
187}
188.complementary-2-border-color- {
189 border-color: $complementary-2 !important;
190 &.border {
191 border-color: $complementary-2 !important;
192 }
193}
194$colorlist: $complementary-2-a1 $complementary-2-a2 $complementary-2-a3 $complementary-2-a4 $complementary-2-a5 $complementary-2-a6 $complementary-2-a7
195 $complementary-2-a8 $complementary-2-a9 $complementary-2-a10 $complementary-2-a11 $complementary-2-a12;
196
197@for $i from 1 through length($colorlist) {
198 $color: nth($colorlist, $i);
199 .complementary-2-bg-a#{$i} {
200 background-color: $color !important;
201 }
202 .complementary-2-color-a#{$i} {
203 color: $color !important;
204 }
205 .complementary-2-border-color-a#{$i} {
206 border-color: $color !important;
207 &.border {
208 border-color: $color !important;
209 }
210 }
211}
212
213// complementary 3
214.complementary-3-bg {
215 background-color: $complementary-3 !important;
216}
217.complementary-3-color {
218 color: $complementary-3 !important;
219}
220.complementary-3-border-color- {
221 border-color: $complementary-3 !important;
222 &.border {
223 border-color: $complementary-3 !important;
224 }
225}
226$colorlist: $complementary-3-a1 $complementary-3-a2 $complementary-3-a3 $complementary-3-a4 $complementary-3-a5 $complementary-3-a6 $complementary-3-a7
227 $complementary-3-a8 $complementary-3-a9 $complementary-3-a10 $complementary-3-a11 $complementary-3-a12;
228
229@for $i from 1 through length($colorlist) {
230 $color: nth($colorlist, $i);
231 .complementary-3-bg-a#{$i} {
232 background-color: $color !important;
233 }
234 .complementary-3-color-a#{$i} {
235 color: $color !important;
236 }
237 .complementary-3-border-color-a#{$i} {
238 border-color: $color !important;
239 &.border {
240 border-color: $color !important;
241 }
242 }
243}
244
245// accent colors toni------------------
246// analog 1
247$colorlist: $analogue-1-b1 $analogue-1-b2 $analogue-1-b3 $analogue-1-b4 $analogue-1-b5 $analogue-1-b6 $analogue-1-b7 $analogue-1-b8;
248
249@for $i from 1 through length($colorlist) {
250 $color: nth($colorlist, $i);
251 .analogue-1-bg-b#{$i} {
252 background-color: $color !important;
253 }
254 .analogue-1-color-b#{$i} {
255 color: $color !important;
256 }
257 .analogue-1-border-color-b#{$i} {
258 border-color: $color !important;
259 &.border {
260 border-color: $color !important;
261 }
262 }
263}
264
265// analog 2
266$colorlist: $analogue-2-b1 $analogue-2-b2 $analogue-2-b3 $analogue-2-b4 $analogue-2-b5 $analogue-2-b6 $analogue-2-b7 $analogue-2-b8;
267
268@for $i from 1 through length($colorlist) {
269 $color: nth($colorlist, $i);
270 .analogue-2-bg-b#{$i} {
271 background-color: $color !important;
272 }
273 .analogue-2-color-b#{$i} {
274 color: $color !important;
275 }
276 .analogue-2-border-color-b#{$i} {
277 border-color: $color !important;
278 &.border {
279 border-color: $color !important;
280 }
281 }
282}
283
284// complementary 1
285$colorlist: $complementary-1-b1 $complementary-1-b2 $complementary-1-b3 $complementary-1-b4 $complementary-1-b5 $complementary-1-b6 $complementary-1-b7
286 $complementary-1-b8;
287
288@for $i from 1 through length($colorlist) {
289 $color: nth($colorlist, $i);
290 .complementary-1-bg-b#{$i} {
291 background-color: $color !important;
292 }
293 .complementary-1-color-b#{$i} {
294 color: $color !important;
295 }
296 .complementary-1-border-color-b#{$i} {
297 border-color: $color !important;
298 &.border {
299 border-color: $color !important;
300 }
301 }
302}
303
304// complementary 2
305$colorlist: $complementary-2-b1 $complementary-2-b2 $complementary-2-b3 $complementary-2-b4 $complementary-2-b5 $complementary-2-b6 $complementary-2-b7
306 $complementary-2-b8;
307
308@for $i from 1 through length($colorlist) {
309 $color: nth($colorlist, $i);
310 .complementary-2-bg-b#{$i} {
311 background-color: $color !important;
312 }
313 .complementary-2-color-b#{$i} {
314 color: $color !important;
315 }
316 .complementary-2-border-color-b#{$i} {
317 border-color: $color !important;
318 &.border {
319 border-color: $color !important;
320 }
321 }
322}
323
324// complementary 3
325$colorlist: $complementary-3-b1 $complementary-3-b2 $complementary-3-b3 $complementary-3-b4 $complementary-3-b5 $complementary-3-b6 $complementary-3-b7
326 $complementary-3-b8;
327
328@for $i from 1 through length($colorlist) {
329 $color: nth($colorlist, $i);
330 .complementary-3-bg-b#{$i} {
331 background-color: $color !important;
332 }
333 .complementary-3-color-b#{$i} {
334 color: $color !important;
335 }
336 .complementary-3-border-color-b#{$i} {
337 border-color: $color !important;
338 &.border {
339 border-color: $color !important;
340 }
341 }
342}
343
344// neutral 1
345.neutral-1-bg {
346 background-color: $neutral-1 !important;
347}
348.neutral-1-color {
349 color: $neutral-1 !important;
350}
351.neutral-1-border-color- {
352 border-color: $neutral-1 !important;
353 &.border {
354 border-color: $neutral-1 !important;
355 }
356}
357
358$colorlist: $neutral-1-a1 $neutral-1-a2 $neutral-1-a3 $neutral-1-a4 $neutral-1-a5 $neutral-1-a6 $neutral-1-a7 $neutral-1-a8 $neutral-1-a9 $neutral-1-a10;
359
360@for $i from 1 through length($colorlist) {
361 $color: nth($colorlist, $i);
362 .neutral-1-bg-a#{$i} {
363 background-color: $color !important;
364 }
365 .neutral-1-color-a#{$i} {
366 color: $color !important;
367 }
368 .neutral-1-border-color-a#{$i} {
369 border-color: $color !important;
370 &.border {
371 border-color: $color !important;
372 }
373 }
374}
375
376// neutral 2
377.neutral-2-bg {
378 background-color: $neutral-2 !important;
379}
380.neutral-2-color {
381 color: $neutral-2 !important;
382}
383.neutral-2-border-color- {
384 border-color: $neutral-2;
385}
386
387$colorlist: $neutral-2-b1 $neutral-2-b2 $neutral-2-b3 $neutral-2-b4 $neutral-2-b5 $neutral-2-b6 $neutral-2-b7;
388
389@for $i from 1 through length($colorlist) {
390 $color: nth($colorlist, $i);
391 .neutral-2-bg-b#{$i} {
392 background-color: $color !important;
393 }
394 .neutral-2-color-b#{$i} {
395 color: $color !important;
396 }
397 .neutral-2-border-color-b#{$i} {
398 border-color: $color !important;
399 &.border {
400 border-color: $color !important;
401 }
402 }
403}
404
405$colorlist: $neutral-2-a1 $neutral-2-a2 $neutral-2-a3 $neutral-2-a4 $neutral-2-a5 $neutral-2-a6 $neutral-2-a7;
406
407@for $i from 1 through length($colorlist) {
408 $color: nth($colorlist, $i);
409 .neutral-2-bg-a#{$i} {
410 background-color: $color !important;
411 }
412 .neutral-2-color-a#{$i} {
413 color: $color !important;
414 }
415 .neutral-2-border-color-a#{$i} {
416 border-color: $color !important;
417 &.border {
418 border-color: $color !important;
419 }
420 }
421}
422
423// light greys a
424$colorlist: $lightgrey-a1 $lightgrey-a2 $lightgrey-a3 $lightgrey-a4;
425
426@for $i from 1 through length($colorlist) {
427 $color: nth($colorlist, $i);
428 .lightgrey-bg-a#{$i} {
429 background-color: $color !important;
430 }
431 .lightgrey-color-a#{$i} {
432 color: $color !important;
433 }
434 .lightgrey-border-color-a#{$i} {
435 border-color: $color !important;
436 &.border {
437 border-color: $color !important;
438 }
439 }
440}
441
442// light greys b
443$colorlist: $lightgrey-b1 $lightgrey-b2 $lightgrey-b3 $lightgrey-b4;
444
445@for $i from 1 through length($colorlist) {
446 $color: nth($colorlist, $i);
447 .lightgrey-bg-b#{$i} {
448 background-color: $color !important;
449 }
450 .lightgrey-color-b#{$i} {
451 color: $color !important;
452 }
453 .lightgrey-border-color-b#{$i} {
454 border-color: $color !important;
455 &.border {
456 border-color: $color !important;
457 }
458 }
459}
460
461// light greys c
462$colorlist: $lightgrey-c1 $lightgrey-c2;
463
464@for $i from 1 through length($colorlist) {
465 $color: nth($colorlist, $i);
466 .lightgrey-bg-c#{$i} {
467 background-color: $color !important;
468 }
469 .lightgrey-color-c#{$i} {
470 color: $color !important;
471 }
472 .lightgrey-border-color-c#{$i} {
473 border-color: $color !important;
474 &.border {
475 border-color: $color !important;
476 }
477 }
478}