Skip to content

Instantly share code, notes, and snippets.

@js2me
Created December 26, 2018 14:23
Show Gist options
  • Save js2me/001ea849beddb85e8bf3e78da3d13175 to your computer and use it in GitHub Desktop.
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 )
// 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