anc 0.1.0 → 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/_sass/anc.scss +9 -0
  3. data/_sass/anc/_base.scss +144 -0
  4. data/_sass/anc/_layout.scss +0 -0
  5. data/_sass/anc/_materialize.scss +42 -0
  6. data/_sass/anc/_syntax-highlighting.scss +78 -0
  7. data/_sass/anc/components/_variables.scss +343 -0
  8. data/_sass/materialize/components/_badges.scss +47 -0
  9. data/_sass/materialize/components/_buttons.scss +291 -0
  10. data/_sass/materialize/components/_cards.scss +196 -0
  11. data/_sass/materialize/components/_carousel.scss +90 -0
  12. data/_sass/materialize/components/_chips.scss +89 -0
  13. data/_sass/materialize/components/_collapsible.scss +84 -0
  14. data/_sass/materialize/components/_color.scss +412 -0
  15. data/_sass/materialize/components/_dropdown.scss +68 -0
  16. data/_sass/materialize/components/_global.scss +734 -0
  17. data/_sass/materialize/components/_grid.scss +156 -0
  18. data/_sass/materialize/components/_icons-material-design.scss +5 -0
  19. data/_sass/materialize/components/_materialbox.scss +43 -0
  20. data/_sass/materialize/components/_modal.scss +90 -0
  21. data/_sass/materialize/components/_navbar.scss +208 -0
  22. data/_sass/materialize/components/_normalize.scss +424 -0
  23. data/_sass/materialize/components/_preloader.scss +334 -0
  24. data/_sass/materialize/components/_pulse.scss +34 -0
  25. data/_sass/materialize/components/_roboto.scss +39 -0
  26. data/_sass/materialize/components/_sideNav.scss +214 -0
  27. data/_sass/materialize/components/_slider.scss +92 -0
  28. data/_sass/materialize/components/_table_of_contents.scss +33 -0
  29. data/_sass/materialize/components/_tabs.scss +93 -0
  30. data/_sass/materialize/components/_tapTarget.scss +103 -0
  31. data/_sass/materialize/components/_toast.scss +59 -0
  32. data/_sass/materialize/components/_tooltip.scss +31 -0
  33. data/_sass/materialize/components/_transitions.scss +13 -0
  34. data/_sass/materialize/components/_typography.scss +61 -0
  35. data/_sass/materialize/components/_variables.scss +343 -0
  36. data/_sass/materialize/components/_waves.scss +114 -0
  37. data/_sass/materialize/components/date_picker/_default.date.scss +456 -0
  38. data/_sass/materialize/components/date_picker/_default.scss +212 -0
  39. data/_sass/materialize/components/date_picker/_default.time.scss +267 -0
  40. data/_sass/materialize/components/forms/_checkboxes.scss +210 -0
  41. data/_sass/materialize/components/forms/_file-input.scss +44 -0
  42. data/_sass/materialize/components/forms/_forms.scss +22 -0
  43. data/_sass/materialize/components/forms/_input-fields.scss +333 -0
  44. data/_sass/materialize/components/forms/_radio-buttons.scss +115 -0
  45. data/_sass/materialize/components/forms/_range.scss +160 -0
  46. data/_sass/materialize/components/forms/_select.scss +182 -0
  47. data/_sass/materialize/components/forms/_switches.scss +89 -0
  48. data/_sass/materialize/materialize.scss +42 -0
  49. metadata +48 -1
@@ -0,0 +1,90 @@
1
+ .carousel {
2
+ &.carousel-slider {
3
+ top: 0;
4
+ left: 0;
5
+
6
+ .carousel-fixed-item {
7
+ &.with-indicators {
8
+ bottom: 68px;
9
+ }
10
+
11
+ position: absolute;
12
+ left: 0;
13
+ right: 0;
14
+ bottom: 20px;
15
+ z-index: 1;
16
+ }
17
+
18
+ .carousel-item {
19
+ width: 100%;
20
+ height: 100%;
21
+ min-height: $carousel-height;
22
+ position: absolute;
23
+ top: 0;
24
+ left: 0;
25
+
26
+ h2 {
27
+ font-size: 24px;
28
+ font-weight: 500;
29
+ line-height: 32px;
30
+ }
31
+
32
+ p {
33
+ font-size: 15px;
34
+ }
35
+ }
36
+ }
37
+
38
+ overflow: hidden;
39
+ position: relative;
40
+ width: 100%;
41
+ height: $carousel-height;
42
+ perspective: 500px;
43
+ transform-style: preserve-3d;
44
+ transform-origin: 0% 50%;
45
+
46
+ .carousel-item {
47
+ display: none;
48
+ width: $carousel-item-width;
49
+ height: $carousel-item-height;
50
+ position: absolute;
51
+ top: 0;
52
+ left: 0;
53
+
54
+ & > img {
55
+ width: 100%;
56
+ }
57
+ }
58
+
59
+ .indicators {
60
+ position: absolute;
61
+ text-align: center;
62
+ left: 0;
63
+ right: 0;
64
+ bottom: 0;
65
+ margin: 0;
66
+
67
+ .indicator-item {
68
+ &.active {
69
+ background-color: #fff;
70
+ }
71
+
72
+ display: inline-block;
73
+ position: relative;
74
+ cursor: pointer;
75
+ height: 8px;
76
+ width: 8px;
77
+ margin: 24px 4px;
78
+ background-color: rgba(255,255,255,.5);
79
+
80
+ transition: background-color .3s;
81
+ border-radius: 50%;
82
+ }
83
+ }
84
+
85
+ // Materialbox compatibility
86
+ &.scrolling .carousel-item .materialboxed,
87
+ .carousel-item:not(.active) .materialboxed {
88
+ pointer-events: none;
89
+ }
90
+ }
@@ -0,0 +1,89 @@
1
+ .chip {
2
+ display: inline-block;
3
+ height: 32px;
4
+ font-size: 13px;
5
+ font-weight: 500;
6
+ color: rgba(0,0,0,.6);
7
+ line-height: 32px;
8
+ padding: 0 12px;
9
+ border-radius: 16px;
10
+ background-color: $chip-bg-color;
11
+ margin-bottom: $chip-margin;
12
+ margin-right: $chip-margin;
13
+
14
+ > img {
15
+ float: left;
16
+ margin: 0 8px 0 -12px;
17
+ height: 32px;
18
+ width: 32px;
19
+ border-radius: 50%;
20
+ }
21
+
22
+ .close {
23
+ cursor: pointer;
24
+ float: right;
25
+ font-size: 16px;
26
+ line-height: 32px;
27
+ padding-left: 8px;
28
+ }
29
+ }
30
+
31
+ .chips {
32
+ border: none;
33
+ border-bottom: 1px solid $chip-border-color;
34
+ box-shadow: none;
35
+ margin: $input-margin;
36
+ min-height: 45px;
37
+ outline: none;
38
+ transition: all .3s;
39
+
40
+ &.focus {
41
+ border-bottom: 1px solid $chip-selected-color;
42
+ box-shadow: 0 1px 0 0 $chip-selected-color;
43
+ }
44
+
45
+ &:hover {
46
+ cursor: text;
47
+ }
48
+
49
+ .chip.selected {
50
+ background-color: $chip-selected-color;
51
+ color: #fff;
52
+ }
53
+
54
+ .input {
55
+ background: none;
56
+ border: 0;
57
+ color: rgba(0,0,0,.6);
58
+ display: inline-block;
59
+ font-size: $input-font-size;
60
+ height: $input-height;
61
+ line-height: 32px;
62
+ outline: 0;
63
+ margin: 0;
64
+ padding: 0 !important;
65
+ width: 120px !important;
66
+ }
67
+
68
+ .input:focus {
69
+ border: 0 !important;
70
+ box-shadow: none !important;
71
+ }
72
+
73
+ // Autocomplete
74
+ .autocomplete-content {
75
+ margin-top: 0;
76
+ margin-bottom: 0;
77
+ }
78
+ }
79
+
80
+ // Form prefix
81
+ .prefix ~ .chips {
82
+ margin-left: 3rem;
83
+ width: 92%;
84
+ width: calc(100% - 3rem);
85
+ }
86
+ .chips:empty ~ label {
87
+ font-size: 0.8rem;
88
+ transform: translateY(-140%);
89
+ }
@@ -0,0 +1,84 @@
1
+ .collapsible {
2
+ border-top: 1px solid $collapsible-border-color;
3
+ border-right: 1px solid $collapsible-border-color;
4
+ border-left: 1px solid $collapsible-border-color;
5
+ margin: $element-top-margin 0 $element-bottom-margin 0;
6
+ @extend .z-depth-1;
7
+ }
8
+
9
+ .collapsible-header {
10
+ display: flex;
11
+ cursor: pointer;
12
+ -webkit-tap-highlight-color: transparent;
13
+ line-height: 1.5;
14
+ padding: 1rem;
15
+ background-color: $collapsible-header-color;
16
+ border-bottom: 1px solid $collapsible-border-color;
17
+
18
+ i {
19
+ width: 2rem;
20
+ font-size: 1.6rem;
21
+ display: inline-block;
22
+ text-align: center;
23
+ margin-right: 1rem;
24
+ }
25
+ }
26
+
27
+ .collapsible-body {
28
+ display: none;
29
+ border-bottom: 1px solid $collapsible-border-color;
30
+ box-sizing: border-box;
31
+ padding: 2rem;
32
+ }
33
+
34
+ // sideNav collapsible styling
35
+ .side-nav,
36
+ .side-nav.fixed {
37
+
38
+ .collapsible {
39
+ border: none;
40
+ box-shadow: none;
41
+
42
+ li { padding: 0; }
43
+ }
44
+
45
+ .collapsible-header {
46
+ background-color: transparent;
47
+ border: none;
48
+ line-height: inherit;
49
+ height: inherit;
50
+ padding: 0 $sidenav-padding;
51
+
52
+ &:hover { background-color: rgba(0,0,0,.05); }
53
+ i { line-height: inherit; }
54
+ }
55
+
56
+ .collapsible-body {
57
+ border: 0;
58
+ background-color: $collapsible-header-color;
59
+
60
+ li a {
61
+ padding: 0 (7.5px + $sidenav-padding)
62
+ 0 (15px + $sidenav-padding);
63
+ }
64
+ }
65
+
66
+ }
67
+
68
+ // Popout Collapsible
69
+
70
+ .collapsible.popout {
71
+ border: none;
72
+ box-shadow: none;
73
+ > li {
74
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
75
+ // transform: scaleX(.92);
76
+ margin: 0 24px;
77
+ transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940);
78
+ }
79
+ > li.active {
80
+ box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
81
+ margin: 16px 0;
82
+ // transform: scaleX(1);
83
+ }
84
+ }
@@ -0,0 +1,412 @@
1
+ // Utility Color Classes
2
+
3
+ //.success {
4
+ //
5
+ //}
6
+
7
+ // Google Color Palette defined: http://www.google.com/design/spec/style/color.html
8
+
9
+
10
+ $materialize-red: (
11
+ "base": #e51c23,
12
+ "lighten-5": #fdeaeb,
13
+ "lighten-4": #f8c1c3,
14
+ "lighten-3": #f3989b,
15
+ "lighten-2": #ee6e73,
16
+ "lighten-1": #ea454b,
17
+ "darken-1": #d0181e,
18
+ "darken-2": #b9151b,
19
+ "darken-3": #a21318,
20
+ "darken-4": #8b1014,
21
+ );
22
+
23
+ $red: (
24
+ "base": #F44336,
25
+ "lighten-5": #FFEBEE,
26
+ "lighten-4": #FFCDD2,
27
+ "lighten-3": #EF9A9A,
28
+ "lighten-2": #E57373,
29
+ "lighten-1": #EF5350,
30
+ "darken-1": #E53935,
31
+ "darken-2": #D32F2F,
32
+ "darken-3": #C62828,
33
+ "darken-4": #B71C1C,
34
+ "accent-1": #FF8A80,
35
+ "accent-2": #FF5252,
36
+ "accent-3": #FF1744,
37
+ "accent-4": #D50000
38
+ );
39
+
40
+ $pink: (
41
+ "base": #e91e63,
42
+ "lighten-5": #fce4ec,
43
+ "lighten-4": #f8bbd0,
44
+ "lighten-3": #f48fb1,
45
+ "lighten-2": #f06292,
46
+ "lighten-1": #ec407a,
47
+ "darken-1": #d81b60,
48
+ "darken-2": #c2185b,
49
+ "darken-3": #ad1457,
50
+ "darken-4": #880e4f,
51
+ "accent-1": #ff80ab,
52
+ "accent-2": #ff4081,
53
+ "accent-3": #f50057,
54
+ "accent-4": #c51162
55
+ );
56
+
57
+ $purple: (
58
+ "base": #9c27b0,
59
+ "lighten-5": #f3e5f5,
60
+ "lighten-4": #e1bee7,
61
+ "lighten-3": #ce93d8,
62
+ "lighten-2": #ba68c8,
63
+ "lighten-1": #ab47bc,
64
+ "darken-1": #8e24aa,
65
+ "darken-2": #7b1fa2,
66
+ "darken-3": #6a1b9a,
67
+ "darken-4": #4a148c,
68
+ "accent-1": #ea80fc,
69
+ "accent-2": #e040fb,
70
+ "accent-3": #d500f9,
71
+ "accent-4": #aa00ff
72
+ );
73
+
74
+ $deep-purple: (
75
+ "base": #673ab7,
76
+ "lighten-5": #ede7f6,
77
+ "lighten-4": #d1c4e9,
78
+ "lighten-3": #b39ddb,
79
+ "lighten-2": #9575cd,
80
+ "lighten-1": #7e57c2,
81
+ "darken-1": #5e35b1,
82
+ "darken-2": #512da8,
83
+ "darken-3": #4527a0,
84
+ "darken-4": #311b92,
85
+ "accent-1": #b388ff,
86
+ "accent-2": #7c4dff,
87
+ "accent-3": #651fff,
88
+ "accent-4": #6200ea
89
+ );
90
+
91
+ $indigo: (
92
+ "base": #3f51b5,
93
+ "lighten-5": #e8eaf6,
94
+ "lighten-4": #c5cae9,
95
+ "lighten-3": #9fa8da,
96
+ "lighten-2": #7986cb,
97
+ "lighten-1": #5c6bc0,
98
+ "darken-1": #3949ab,
99
+ "darken-2": #303f9f,
100
+ "darken-3": #283593,
101
+ "darken-4": #1a237e,
102
+ "accent-1": #8c9eff,
103
+ "accent-2": #536dfe,
104
+ "accent-3": #3d5afe,
105
+ "accent-4": #304ffe
106
+ );
107
+
108
+ $blue: (
109
+ "base": #2196F3,
110
+ "lighten-5": #E3F2FD,
111
+ "lighten-4": #BBDEFB,
112
+ "lighten-3": #90CAF9,
113
+ "lighten-2": #64B5F6,
114
+ "lighten-1": #42A5F5,
115
+ "darken-1": #1E88E5,
116
+ "darken-2": #1976D2,
117
+ "darken-3": #1565C0,
118
+ "darken-4": #0D47A1,
119
+ "accent-1": #82B1FF,
120
+ "accent-2": #448AFF,
121
+ "accent-3": #2979FF,
122
+ "accent-4": #2962FF
123
+ );
124
+
125
+ $light-blue: (
126
+ "base": #03a9f4,
127
+ "lighten-5": #e1f5fe,
128
+ "lighten-4": #b3e5fc,
129
+ "lighten-3": #81d4fa,
130
+ "lighten-2": #4fc3f7,
131
+ "lighten-1": #29b6f6,
132
+ "darken-1": #039be5,
133
+ "darken-2": #0288d1,
134
+ "darken-3": #0277bd,
135
+ "darken-4": #01579b,
136
+ "accent-1": #80d8ff,
137
+ "accent-2": #40c4ff,
138
+ "accent-3": #00b0ff,
139
+ "accent-4": #0091ea
140
+ );
141
+
142
+ $cyan: (
143
+ "base": #00bcd4,
144
+ "lighten-5": #e0f7fa,
145
+ "lighten-4": #b2ebf2,
146
+ "lighten-3": #80deea,
147
+ "lighten-2": #4dd0e1,
148
+ "lighten-1": #26c6da,
149
+ "darken-1": #00acc1,
150
+ "darken-2": #0097a7,
151
+ "darken-3": #00838f,
152
+ "darken-4": #006064,
153
+ "accent-1": #84ffff,
154
+ "accent-2": #18ffff,
155
+ "accent-3": #00e5ff,
156
+ "accent-4": #00b8d4
157
+ );
158
+
159
+ $teal: (
160
+ "base": #009688,
161
+ "lighten-5": #e0f2f1,
162
+ "lighten-4": #b2dfdb,
163
+ "lighten-3": #80cbc4,
164
+ "lighten-2": #4db6ac,
165
+ "lighten-1": #26a69a,
166
+ "darken-1": #00897b,
167
+ "darken-2": #00796b,
168
+ "darken-3": #00695c,
169
+ "darken-4": #004d40,
170
+ "accent-1": #a7ffeb,
171
+ "accent-2": #64ffda,
172
+ "accent-3": #1de9b6,
173
+ "accent-4": #00bfa5
174
+ );
175
+
176
+ $green: (
177
+ "base": #4CAF50,
178
+ "lighten-5": #E8F5E9,
179
+ "lighten-4": #C8E6C9,
180
+ "lighten-3": #A5D6A7,
181
+ "lighten-2": #81C784,
182
+ "lighten-1": #66BB6A,
183
+ "darken-1": #43A047,
184
+ "darken-2": #388E3C,
185
+ "darken-3": #2E7D32,
186
+ "darken-4": #1B5E20,
187
+ "accent-1": #B9F6CA,
188
+ "accent-2": #69F0AE,
189
+ "accent-3": #00E676,
190
+ "accent-4": #00C853
191
+ );
192
+
193
+ $light-green: (
194
+ "base": #8bc34a,
195
+ "lighten-5": #f1f8e9,
196
+ "lighten-4": #dcedc8,
197
+ "lighten-3": #c5e1a5,
198
+ "lighten-2": #aed581,
199
+ "lighten-1": #9ccc65,
200
+ "darken-1": #7cb342,
201
+ "darken-2": #689f38,
202
+ "darken-3": #558b2f,
203
+ "darken-4": #33691e,
204
+ "accent-1": #ccff90,
205
+ "accent-2": #b2ff59,
206
+ "accent-3": #76ff03,
207
+ "accent-4": #64dd17
208
+ );
209
+
210
+ $lime: (
211
+ "base": #cddc39,
212
+ "lighten-5": #f9fbe7,
213
+ "lighten-4": #f0f4c3,
214
+ "lighten-3": #e6ee9c,
215
+ "lighten-2": #dce775,
216
+ "lighten-1": #d4e157,
217
+ "darken-1": #c0ca33,
218
+ "darken-2": #afb42b,
219
+ "darken-3": #9e9d24,
220
+ "darken-4": #827717,
221
+ "accent-1": #f4ff81,
222
+ "accent-2": #eeff41,
223
+ "accent-3": #c6ff00,
224
+ "accent-4": #aeea00
225
+ );
226
+
227
+ $yellow: (
228
+ "base": #ffeb3b,
229
+ "lighten-5": #fffde7,
230
+ "lighten-4": #fff9c4,
231
+ "lighten-3": #fff59d,
232
+ "lighten-2": #fff176,
233
+ "lighten-1": #ffee58,
234
+ "darken-1": #fdd835,
235
+ "darken-2": #fbc02d,
236
+ "darken-3": #f9a825,
237
+ "darken-4": #f57f17,
238
+ "accent-1": #ffff8d,
239
+ "accent-2": #ffff00,
240
+ "accent-3": #ffea00,
241
+ "accent-4": #ffd600
242
+ );
243
+
244
+ $amber: (
245
+ "base": #ffc107,
246
+ "lighten-5": #fff8e1,
247
+ "lighten-4": #ffecb3,
248
+ "lighten-3": #ffe082,
249
+ "lighten-2": #ffd54f,
250
+ "lighten-1": #ffca28,
251
+ "darken-1": #ffb300,
252
+ "darken-2": #ffa000,
253
+ "darken-3": #ff8f00,
254
+ "darken-4": #ff6f00,
255
+ "accent-1": #ffe57f,
256
+ "accent-2": #ffd740,
257
+ "accent-3": #ffc400,
258
+ "accent-4": #ffab00
259
+ );
260
+
261
+ $orange: (
262
+ "base": #ff9800,
263
+ "lighten-5": #fff3e0,
264
+ "lighten-4": #ffe0b2,
265
+ "lighten-3": #ffcc80,
266
+ "lighten-2": #ffb74d,
267
+ "lighten-1": #ffa726,
268
+ "darken-1": #fb8c00,
269
+ "darken-2": #f57c00,
270
+ "darken-3": #ef6c00,
271
+ "darken-4": #e65100,
272
+ "accent-1": #ffd180,
273
+ "accent-2": #ffab40,
274
+ "accent-3": #ff9100,
275
+ "accent-4": #ff6d00
276
+ );
277
+
278
+ $deep-orange: (
279
+ "base": #ff5722,
280
+ "lighten-5": #fbe9e7,
281
+ "lighten-4": #ffccbc,
282
+ "lighten-3": #ffab91,
283
+ "lighten-2": #ff8a65,
284
+ "lighten-1": #ff7043,
285
+ "darken-1": #f4511e,
286
+ "darken-2": #e64a19,
287
+ "darken-3": #d84315,
288
+ "darken-4": #bf360c,
289
+ "accent-1": #ff9e80,
290
+ "accent-2": #ff6e40,
291
+ "accent-3": #ff3d00,
292
+ "accent-4": #dd2c00
293
+ );
294
+
295
+ $brown: (
296
+ "base": #795548,
297
+ "lighten-5": #efebe9,
298
+ "lighten-4": #d7ccc8,
299
+ "lighten-3": #bcaaa4,
300
+ "lighten-2": #a1887f,
301
+ "lighten-1": #8d6e63,
302
+ "darken-1": #6d4c41,
303
+ "darken-2": #5d4037,
304
+ "darken-3": #4e342e,
305
+ "darken-4": #3e2723
306
+ );
307
+
308
+ $blue-grey: (
309
+ "base": #607d8b,
310
+ "lighten-5": #eceff1,
311
+ "lighten-4": #cfd8dc,
312
+ "lighten-3": #b0bec5,
313
+ "lighten-2": #90a4ae,
314
+ "lighten-1": #78909c,
315
+ "darken-1": #546e7a,
316
+ "darken-2": #455a64,
317
+ "darken-3": #37474f,
318
+ "darken-4": #263238
319
+ );
320
+
321
+ $grey: (
322
+ "base": #9e9e9e,
323
+ "lighten-5": #fafafa,
324
+ "lighten-4": #f5f5f5,
325
+ "lighten-3": #eeeeee,
326
+ "lighten-2": #e0e0e0,
327
+ "lighten-1": #bdbdbd,
328
+ "darken-1": #757575,
329
+ "darken-2": #616161,
330
+ "darken-3": #424242,
331
+ "darken-4": #212121
332
+ );
333
+
334
+ $shades: (
335
+ "black": #000000,
336
+ "white": #FFFFFF,
337
+ "transparent": transparent
338
+ );
339
+
340
+ $colors: (
341
+ "materialize-red": $materialize-red,
342
+ "red": $red,
343
+ "pink": $pink,
344
+ "purple": $purple,
345
+ "deep-purple": $deep-purple,
346
+ "indigo": $indigo,
347
+ "blue": $blue,
348
+ "light-blue": $light-blue,
349
+ "cyan": $cyan,
350
+ "teal": $teal,
351
+ "green": $green,
352
+ "light-green": $light-green,
353
+ "lime": $lime,
354
+ "yellow": $yellow,
355
+ "amber": $amber,
356
+ "orange": $orange,
357
+ "deep-orange": $deep-orange,
358
+ "brown": $brown,
359
+ "blue-grey": $blue-grey,
360
+ "grey": $grey,
361
+ "shades": $shades
362
+ ) !default;
363
+
364
+
365
+ // Color Classes
366
+
367
+ @each $color_name, $color in $colors {
368
+ @each $color_type, $color_value in $color {
369
+ @if $color_type == "base" {
370
+ .#{$color_name} {
371
+ background-color: $color_value !important;
372
+ }
373
+ .#{$color_name}-text {
374
+ color: $color_value !important;
375
+ }
376
+ }
377
+ @else if $color_name != "shades" {
378
+ .#{$color_name}.#{$color_type} {
379
+ background-color: $color_value !important;
380
+ }
381
+ .#{$color_name}-text.text-#{$color_type} {
382
+ color: $color_value !important;
383
+ }
384
+ }
385
+ }
386
+ }
387
+
388
+ // Shade classes
389
+ @each $color, $color_value in $shades {
390
+ .#{$color} {
391
+ background-color: $color_value !important;
392
+ }
393
+ .#{$color}-text {
394
+ color: $color_value !important;
395
+ }
396
+ }
397
+
398
+
399
+ // usage: color("name_of_color", "type_of_color")
400
+ // to avoid to repeating map-get($colors, ...)
401
+
402
+ @function color($color, $type) {
403
+ @if map-has-key($colors, $color) {
404
+ $curr_color: map-get($colors, $color);
405
+ @if map-has-key($curr_color, $type) {
406
+ @return map-get($curr_color, $type);
407
+ }
408
+ }
409
+ @warn "Unknown `#{$color}` - `#{$type}` in $colors.";
410
+ @return null;
411
+ }
412
+