Created
December 26, 2018 14:23
-
-
Save js2me/001ea849beddb85e8bf3e78da3d13175 to your computer and use it in GitHub Desktop.
Nice implementation of the mixin which will generate child classes with colors. This file will create many count of color classes (.blue-grey, blue-grey-lighten-1, blue-grey-text-lighten )
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// MIXIN | |
.make-sub-colors(@colors, @prefix) { | |
.sub-color(@index) when (@index =< length(@colors)) { | |
@value: extract(@colors, @index); | |
@item: ~".@{prefix}-@{index}"; | |
&@{item} { | |
color: @value !important; | |
} | |
.sub-color(@index + 1); | |
} | |
.sub-color(1); | |
} | |
.materialize-red{ | |
background-color: #e51c23 !important; | |
@lighten-colors: #ea454b, #ee6e73, #f3989b, #f8c1c3, #fdeaeb; | |
@darken-colors: #d0181e, #b9151b, #a21318, #8b1014; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
&-text{ | |
color: #e51c23 !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
} | |
} | |
.red{ | |
background-color: #F44336 !important; | |
@lighten-colors: #EF5350, #E57373, #EF9A9A, #FFCDD2, #FFEBEE; | |
@darken-colors: #E53935, #D32F2F, #C62828, #B71C1C; | |
@accent-colors: #FF8A80, #FF5252,#FF1744,#D50000; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: #F44336 !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.pink{ | |
background-color: #e91e63 !important; | |
@lighten-colors: #ec407a, #f06292, #f48fb1, #f8bbd0, #fce4ec; | |
@darken-colors: #d81b60, #c2185b, #ad1457, #880e4f; | |
@accent-colors: #ff80ab, #ff4081,#f50057,#c51162; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: #e91e63 !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.purple{ | |
@default-color: #9c27b0; | |
@lighten-colors: #ab47bc, #ba68c8, #ce93d8, #e1bee7, #f3e5f5; | |
@darken-colors: #8e24aa, #7b1fa2, #6a1b9a, #4a148c; | |
@accent-colors: #ea80fc, #e040fb,#d500f9,#aa00ff; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.deep-purple{ | |
@default-color: #673ab7; | |
@lighten-colors: #7e57c2, #9575cd, #b39ddb, #d1c4e9, #ede7f6; | |
@darken-colors: #5e35b1, #512da8, #4527a0, #311b92; | |
@accent-colors: #b388ff, #7c4dff,#651fff,#6200ea; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.indigo{ | |
@default-color: #3f51b5; | |
@lighten-colors: #5c6bc0, #7986cb, #9fa8da, #c5cae9, #e8eaf6; | |
@darken-colors: #3949ab, #303f9f, #283593, #1a237e; | |
@accent-colors: #8c9eff, #536dfe,#3d5afe,#304ffe; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.blue{ | |
@default-color: #2196F3; | |
@lighten-colors: #42A5F5, #64B5F6, #90CAF9, #BBDEFB, #E3F2FD; | |
@darken-colors: #1E88E5, #1976D2, #1565C0, #0D47A1; | |
@accent-colors: #82B1FF, #448AFF,#2979FF,#2962FF; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.light-blue{ | |
@default-color: #03a9f4; | |
@lighten-colors: #29b6f6, #4fc3f7, #81d4fa, #b3e5fc, #e1f5fe; | |
@darken-colors: #039be5, #0288d1, #0277bd, #01579b; | |
@accent-colors: #80d8ff, #40c4ff,#00b0ff,#0091ea; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.cyan{ | |
@default-color: #00bcd4; | |
@lighten-colors: #26c6da, #4dd0e1, #80deea, #b2ebf2, #e0f7fa; | |
@darken-colors: #00acc1, #0097a7, #00838f, #006064; | |
@accent-colors: #84ffff, #18ffff,#00e5ff,#00b8d4; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.teal{ | |
@default-color: #009688; | |
@lighten-colors: #26a69a, #4db6ac, #80cbc4, #b2dfdb, #e0f2f1; | |
@darken-colors: #00897b, #00796b, #00695c, #004d40; | |
@accent-colors: #a7ffeb, #64ffda,#1de9b6,#00bfa5; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.green{ | |
@default-color: #4CAF50; | |
@lighten-colors: #66BB6A, #81C784, #A5D6A7, #C8E6C9, #E8F5E9; | |
@darken-colors: #43A047, #388E3C, #2E7D32, #1B5E20; | |
@accent-colors: #B9F6CA, #69F0AE,#00E676,#00C853; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.light-green{ | |
@default-color: #8bc34a; | |
@lighten-colors: #9ccc65, #aed581, #c5e1a5, #dcedc8, #f1f8e9; | |
@darken-colors: #7cb342, #689f38, #558b2f, #33691e; | |
@accent-colors: #ccff90, #b2ff59,#76ff03,#64dd17; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.lime{ | |
@default-color: #cddc39; | |
@lighten-colors: #d4e157, #dce775, #e6ee9c, #f0f4c3, #f9fbe7; | |
@darken-colors: #c0ca33, #afb42b, #9e9d24, #827717; | |
@accent-colors: #f4ff81, #eeff41,#c6ff00,#aeea00; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.yellow{ | |
@default-color: #ffeb3b; | |
@lighten-colors: #ffee58, #fff176, #fff59d, #fff9c4, #fffde7; | |
@darken-colors: #fdd835, #fbc02d, #f9a825, #f57f17; | |
@accent-colors: #ffff8d, #ffff8d,#ffea00,#ffd600; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
&.text-accent-2{ | |
color: #ffff00 !important; | |
} | |
} | |
} | |
.amber{ | |
@default-color: #ffc107; | |
@lighten-colors: #ffca28, #ffd54f, #ffe082, #ffecb3, #fff8e1; | |
@darken-colors: #ffb300, #ffa000, #ff8f00, #ff6f00; | |
@accent-colors: #ffe57f, #ffd740,#ffc400,#ffab00; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.orange{ | |
@default-color: #ff9800; | |
@lighten-colors: #ffa726, #ffb74d, #ffcc80, #ffe0b2, #fff3e0; | |
@darken-colors: #fb8c00, #f57c00, #ef6c00, #e65100; | |
@accent-colors: #ffd180, #ffab40,#ff9100,#ff6d00; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.deep-orange{ | |
@default-color: #ff5722; | |
@lighten-colors: #ff7043, #ff8a65, #ffab91, #ffccbc, #fbe9e7; | |
@darken-colors: #f4511e, #e64a19, #d84315, #bf360c; | |
@accent-colors: #ff9e80, #ff6e40,#ff3d00,#dd2c00; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
.make-sub-colors(@accent-colors, "accent"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
.make-sub-colors(@accent-colors, "text-accent"); | |
} | |
} | |
.brown{ | |
@default-color: #795548; | |
@lighten-colors: #8d6e63, #a1887f, #bcaaa4, #d7ccc8, #efebe9; | |
@darken-colors: #6d4c41, #5d4037, #4e342e, #3e2723; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
} | |
} | |
.blue-grey{ | |
@default-color: #607d8b; | |
@lighten-colors: #78909c, #90a4ae, #b0bec5, #cfd8dc, #eceff1; | |
@darken-colors: #546e7a, #455a64, #37474f, #263238; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
} | |
} | |
.grey{ | |
@default-color: #9e9e9e; | |
@lighten-colors: #bdbdbd, #e0e0e0, #eeeeee, #f5f5f5, #fafafa; | |
@darken-colors: #757575, #616161, #424242, #212121; | |
background-color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "lighten"); | |
.make-sub-colors(@darken-colors, "darken"); | |
&-text{ | |
color: @default-color !important; | |
.make-sub-colors(@lighten-colors, "text-lighten"); | |
.make-sub-colors(@darken-colors, "text-darken"); | |
} | |
} | |
.shades{ | |
@black-color: #000000; | |
@white-color: #FFFFFF; | |
@transparent-color: transparent; | |
&.black{ | |
background-color: @black-color !important; | |
} | |
&.white{ | |
background-color: @white-color !important; | |
} | |
&.transparent{ | |
background-color: @transparent-color !important; | |
} | |
&-text{ | |
&.text-black { | |
color: @black-color !important; | |
} | |
&.text-white{ | |
color: @white-color !important; | |
} | |
&.text-transparent{ | |
color: @transparent-color !important; | |
} | |
} | |
} | |
.black { | |
@color: #000000; | |
background-color: @color !important; | |
&-text { | |
color: @color !important; | |
} | |
} | |
.white { | |
@color: #FFFFFF; | |
background-color: @color !important; | |
&-text { | |
color: @color !important; | |
} | |
} | |
.transparent { | |
@color: transparent; | |
background-color: @color !important; | |
&-text { | |
color: @color !important; | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment