/*————————————
Colors
————————————*/ /* Basic Colors ————————————*/ /* Inherit Colors */ .g-color-inherit {
color: inherit !important;
}
/* Main Colors */ .g-color-main {
color: $g-color-main !important; &--hover:hover { color: $g-color-main !important; }
}
/* Primary Colors */ .g-color-primary {
color: $g-color-primary !important; .u-block-hover:hover &--hover, &--hover:hover { color: $g-color-primary !important; } &--parent-hover { .g-parent:hover & { color: $g-color-primary !important; } } &-opacity { &-0_3 { color: rgba($g-color-primary, .3) !important; } &-0_4 { color: rgba($g-color-primary, .4) !important; } } //Pseudo-elements color // Z &--before::before, &--after::after { color: $g-color-primary; }
}
/* Black Colors */ .g-color-black {
color: $g-color-black !important; &--hover:hover { color: $g-color-black !important; } &--parent-hover { .g-parent:hover & { color: $g-color-black !important; } } &-opacity { &-0_1 { color: rgba($g-color-black, .1) !important; } &-0_3 { color: rgba($g-color-black, .3) !important; } &-0_5 { color: rgba($g-color-black, .5) !important; } &-0_6 { color: rgba($g-color-black, .6) !important; } &-0_7 { color: rgba($g-color-black, .7) !important; } &-0_8 { color: rgba($g-color-black, .8) !important; &--child { * { color: rgba($g-color-black, .8) !important; } } } &-0_9 { color: rgba($g-color-black, .9) !important; } }
}
/* White Colors */ .g-color-white {
color: $g-color-white !important; .u-block-hover:hover &--hover, &--hover:hover { color: $g-color-white !important; } &--parent-hover { .g-parent:hover & { color: $g-color-white !important; } } &--active { .active & { color: $g-color-white !important; } } &--child { * { color: $g-color-white !important; } } &-opacity { &-0_1 { color: rgba($g-color-white, .1) !important; } &-0_2 { color: rgba($g-color-white, .2) !important; } &-0_3 { color: rgba($g-color-white, .3) !important; } &-0_5, &-0_5--hover:hover { color: rgba($g-color-white, .5) !important; } &-0_6 { color: rgba($g-color-white, .6) !important; &--parent-hover { .g-parent:hover & { color: rgba($g-color-white, .6) !important; } } } &-0_7, &-0_7--hover:hover { color: rgba($g-color-white, .7) !important; } &-0_75 { color: rgba($g-color-white, .75) !important; } &-0_8 { color: rgba($g-color-white, .8) !important; &--child { * { color: rgba($g-color-white, .8) !important; } } } &-0_9, &-0_9--hover:hover { color: rgba($g-color-white, .9) !important; } }
}
/* Gray Colors */ .g-color-gray {
// Gray Light &-light { &-v1 { color: $g-color-gray-light-v1 !important; &--hover:hover { color: $g-color-gray-light-v1 !important; } } &-v2 { color: $g-color-gray-light-v2 !important; &--hover:hover { color: $g-color-gray-light-v2 !important; } } &-v3 { color: $g-color-gray-light-v3 !important; &--hover:hover { color: $g-color-gray-light-v3 !important; } } &-v4 { color: $g-color-gray-light-v4 !important; &--hover:hover { color: $g-color-gray-light-v4 !important; } &-opacity { &-0_6 { color: rgba($g-color-gray-light-v4, .6) !important; } } } &-v5 { color: $g-color-gray-light-v5 !important; &--hover:hover { color: $g-color-gray-light-v5 !important; } } } // Gray Dark &-dark { &-v1 { color: $g-color-gray-dark-v1 !important; &--hover:hover { color: $g-color-gray-dark-v1 !important; } } &-v2 { color: $g-color-gray-dark-v2 !important; &--hover:hover { color: $g-color-gray-dark-v2 !important; } &-opacity { &-0_75 { color: rgba($g-color-gray-dark-v2, .75) !important; } } } &-v3 { color: $g-color-gray-dark-v3 !important; &--hover:hover { color: $g-color-gray-dark-v3 !important; } } &-v4 { color: $g-color-gray-dark-v4 !important; &--hover:hover { color: $g-color-gray-dark-v4 !important; } } &-v5 { color: $g-color-gray-dark-v5 !important; &--hover:hover { color: $g-color-gray-dark-v5 !important; } &--parent-hover { .g-parent:hover & { color: $g-color-gray-dark-v5 !important; } } } }
}
/* Complementary Colors ————————————*/ /* Color Green */ .g-color-green {
color: $g-color-green !important;
}
/* Color Blue */ .g-color-blue {
color: $g-color-blue !important; &--hover:hover { color: $g-color-blue !important; } &-dark-v1 { color: $g-color-blue-dark-v1 !important; // Z }
}
/* Color Light Blue */ .g-color-lightblue {
color: $g-color-lightblue !important; &--hover:hover { color: $g-color-lightblue !important; }
}
.g-color-lightblue-v1 {
color: $g-color-lightblue-v1 !important; &--hover:hover { color: $g-color-lightblue-v1 !important; }
}
/* Color Dark Blue */ .g-color-darkblue {
color: $g-color-darkblue !important; &--hover:hover { color: $g-color-darkblue !important; }
}
/* Color Indigo */ .g-color-indigo {
color: $g-color-indigo !important; &--hover:hover { color: $g-color-indigo !important; }
}
/* Color Red */ .g-color-red {
color: $g-color-red !important; &--hover:hover { color: $g-color-red !important; }
}
/* Color Light Red */ .g-color-lightred {
color: $g-color-lightred !important; &--hover:hover { color: $g-color-lightred !important; }
}
/* Color Dark Red */ .g-color-darkred {
color: $g-color-darkred !important; &--hover:hover { color: $g-color-darkred !important; }
}
/* Color Purple */ .g-color-purple {
color: $g-color-purple; &--hover:hover { color: $g-color-purple !important; } &-dark-v1 { color: $g-color-purple-dark-v1 !important; // Z }
}
/* Color Dark Purple */ .g-color-darkpurple {
color: $g-color-darkpurple !important; &--hover:hover { color: $g-color-darkpurple !important; }
}
/* Color Pink */ .g-color-pink {
color: $g-color-pink; &--hover:hover { color: $g-color-pink !important; } &-dark-v1 { color: $g-color-pink-dark-v1 !important; // Z }
}
/* Color Orange */ .g-color-orange {
color: $g-color-orange !important; &--hover:hover { color: $g-color-orange !important; }
}
/* Color Deep Orange */ .g-color-deeporange {
color: $g-color-deeporange !important; &--hover:hover { color: $g-color-deeporange !important; }
}
/* Color Yellow */ .g-color-yellow {
color: $g-color-yellow !important; &--hover:hover { color: $g-color-yellow !important; }
}
/* Color Aqua */ .g-color-aqua {
color: $g-color-aqua; &--hover:hover { color: $g-color-aqua !important; } &-dark-v1 { color: $g-color-aqua-dark-v1 !important; // Z }
}
/* Color Cyan */ .g-color-cyan {
color: $g-color-cyan !important; &--hover:hover { color: $g-color-cyan !important; }
}
/* Color Teal */ .g-color-teal {
color: $g-color-teal !important; &--hover:hover { color: $g-color-teal !important; }
}
/* Color Brown */ .g-color-brown {
color: $g-color-brown !important; &--hover:hover { color: $g-color-brown !important; }
}
/* Color Blue Gray */ .g-color-bluegray {
color: $g-color-bluegray !important; &--hover:hover { color: $g-color-bluegray !important; }
}