/*————————————
Background Colors
————————————*/ /* Basic Colors ————————————*/ /* Main Colors */ .g-bg-main {
background-color: $g-bg-color-main !important;
}
/* Main Secondary */ .g-bg-secondary {
background-color: $g-bg-color-secondary !important;
}
/* Primary Colors */ .g-bg-primary {
background-color: $g-color-primary !important; // Hover &--hover:hover { background-color: $g-color-primary !important; } .u-block-hover:hover &--hover { background-color: $g-color-primary; } &--parent-hover { .g-parent:hover & { background-color: $g-color-primary !important; } } // Active &--active { &.active, .active & { background-color: $g-color-primary !important; } } &--parent-active { .g-parent.active & { background-color: $g-color-primary !important; } } //Pseudo-elements background color &--before::before, &--after::after { background-color: $g-color-primary !important; } // Primary dark &-dark { &-v1 { background-color: $g-color-primary-dark-v1 !important; } &-v2 { background-color: $g-color-primary-dark-v2 !important; } &-v3 { background-color: $g-color-primary-dark-v3 !important; } } // Primary opacity &-opacity { &-0_1 { background-color: rgba($g-color-primary, .1) !important; } &-0_2 { background-color: rgba($g-color-primary, .2) !important; &--hover:hover { background-color: rgba($g-color-primary, .2) !important; } &--hover--after:hover::after { background-color: rgba($g-color-primary, .2) !important; } &--active { .active & { background-color: rgba($g-color-primary, .2) !important; } } &--before::before, &--after::after { background-color: rgba($g-color-primary, .2) !important; } } &-0_3 { background-color: rgba($g-color-primary, .3) !important; &--hover:hover { background-color: rgba($g-color-primary, .3) !important; } &--hover--after:hover::after { background-color: rgba($g-color-primary, .3) !important; } &--active { .active & { background-color: rgba($g-color-primary, .3) !important; } } &--before::before, &--after::after { background-color: rgba($g-color-primary, .3) !important; } } &-0_4 { background-color: rgba($g-color-primary, .4) !important; &--hover:hover { background-color: rgba($g-color-primary, .4) !important; } &--hover--after:hover::after { background-color: rgba($g-color-primary, .4) !important; } &--after::after { background-color: rgba($g-color-primary, .4) !important; } } &-0_6 { background-color: rgba($g-color-primary, .6) !important; &--hover:hover { background-color: rgba($g-color-primary, .6) !important; } &--hover--after:hover::after { background-color: rgba($g-color-primary, .6) !important; } &--after::after { background-color: rgba($g-color-primary, .6) !important; } } &-0_8 { background-color: rgba($g-color-primary, .8) !important; &--hover:hover { background-color: rgba($g-color-primary, .8) !important; } &--hover--after:hover::after { background-color: rgba($g-color-primary, .8) !important; } &--before, &--after { &::after { background-color: rgba($g-color-primary, .8) !important; } &--hover:hover { &::after { background-color: rgba($g-color-primary, .8) !important; } } } } &-0_9 { background-color: rgba($g-color-primary, .9) !important; &--hover:hover { background-color: rgba($g-color-primary, .9) !important; } &--hover--after:hover::after { background-color: rgba($g-color-primary, .9) !important; } &--before, &--after { &::after { background-color: rgba($g-color-primary, .9) !important; } &--hover:hover { &::after { background-color: rgba($g-color-primary, .9) !important; } } } } }
}
/* Black Colors */ .g-bg-black {
background-color: $g-color-black !important; &--hover:hover { background-color: $g-color-black !important; } &--after::after { background-color: $g-color-black !important; } // Black opacity &-opacity { &-0_1 { background-color: rgba($g-color-black, .1) !important; &--after::after { background-color: rgba($g-color-black, .1) !important; } } &-0_2 { background-color: rgba($g-color-black, .2) !important; &--after::after { background-color: rgba($g-color-black, .2) !important; } } &-0_3 { background-color: rgba($g-color-black, .3) !important; &--hover { &:hover { background-color: rgba($g-color-black, .3) !important; } } &--after::after, &--before::before { background-color: rgba($g-color-black, .3) !important; } &--hover--after:hover::after { background-color: rgba($g-color-black, .3) !important; } } &-0_4 { background-color: rgba($g-color-black, .4) !important; &--after::after { background-color: rgba($g-color-black, .4) !important; } } &-0_5 { background-color: rgba($g-color-black, .5) !important; &--hover { &:hover { background-color: rgba($g-color-black, .5) !important; } } &--after::after { background-color: rgba($g-color-black, .5) !important; } } &-0_6 { background-color: rgba($g-color-black, .6) !important; &--hover:hover { background-color: rgba($g-color-black, .7) !important; } &--after::after { background-color: rgba($g-color-black, .6) !important; } } &-0_7 { background-color: rgba($g-color-black, .7) !important; &--hover:hover { background-color: rgba($g-color-black, .7) !important; } &--after::after { background-color: rgba($g-color-black, .7) !important; } } &-0_8 { background-color: rgba($g-color-black, .8) !important; &--after::after { background-color: rgba($g-color-black, .8) !important; } &--hover { &:hover { background-color: rgba($g-color-black, .8) !important; } } } &-0_9 { background-color: rgba($g-color-black, .9) !important; &--after::after { background-color: rgba($g-color-black, .9) !important; } &--hover { &:hover { background-color: rgba($g-color-black, .9) !important; } } } }
}
/* White Colors */ .g-bg-white {
background-color: $g-color-white !important; //Pseudo-elements background color &--before::before, &--after::after { background-color: $g-color-white !important; } &--hover:hover, &--active.active { background-color: $g-color-white !important; } &--parent-hover { .g-parent:hover & { background-color: $g-color-white !important; } } //Pseudo-elements background color &--before::before, &--after::after { background-color: $g-color-white !important; } // White opacity &-opacity { &-0--after { &--parent-hover::after { .g-parent:hover & { background-color: rgba($g-color-white, 0) !important; } } } &-0_05 { background-color: rgba($g-color-white, .05) !important; } &-0_1 { background-color: rgba($g-color-white, .1) !important; &--after::after { background-color: rgba($g-color-white, .1) !important; } } &-0_2 { background-color: rgba($g-color-white, .2) !important; &--hover:hover { background-color: rgba($g-color-white, .2) !important; } } &-0_3 { background-color: rgba($g-color-white, .3) !important; &--hover:hover { background-color: rgba($g-color-white, .3) !important; } &--after::after { background-color: rgba($g-color-white, .3) !important; } } &-0_4 { background-color: rgba($g-color-white, .4) !important; &--hover:hover { background-color: rgba($g-color-white, .4) !important; } } &-0_5 { background-color: rgba($g-color-white, .5) !important; &--after::after { background-color: rgba($g-color-white, .5) !important; } } &-0_7 { background-color: rgba($g-color-white, .7) !important; &--hover:hover { background-color: rgba($g-color-white, .7) !important; } &--after::after { background-color: rgba($g-color-white, .7) !important; } } &-0_8 { background-color: rgba($g-color-white, .8) !important; &--hover:hover { background-color: rgba($g-color-white, .8) !important; } &--after::after { background-color: rgba($g-color-white, .8) !important; } &--hover--after:hover::after { background-color: rgba($g-color-primary, .8) !important; } } &-0_9 { background-color: rgba($g-color-white, .9) !important; &--hover:hover { background-color: rgba($g-color-white, .9) !important; } &--after::after { background-color: rgba($g-color-white, .9) !important; } } }
}
/* Gray Colors */ .g-bg-gray {
// Dark Gray &-dark { &-v1 { background-color: $g-color-gray-dark-v1 !important; &--hover:hover { background-color: $g-color-gray-dark-v1 !important; } } &-v2 { background-color: $g-color-gray-dark-v2 !important; &--hover:hover { background-color: $g-color-gray-dark-v2 !important; } } &-v3 { background-color: $g-color-gray-dark-v3 !important; &--hover:hover { background-color: $g-color-gray-dark-v3 !important; } } &-v4 { background-color: $g-color-gray-dark-v4 !important; &--hover:hover { background-color: $g-color-gray-dark-v4 !important; } } &-v5 { background-color: $g-color-gray-dark-v5 !important; &--hover:hover { background-color: $g-color-gray-dark-v5 !important; } } } // Light Gray &-light { &-v1 { background-color: $g-color-gray-light-v1 !important; &--hover:hover { background-color: $g-color-gray-light-v1 !important; } } &-v2 { background-color: $g-color-gray-light-v2 !important; &--hover:hover { background-color: $g-color-gray-light-v2 !important; } } &-v3 { background-color: $g-color-gray-light-v3 !important; &--hover:hover { background-color: $g-color-gray-light-v3 !important; } } &-v4 { background-color: $g-color-gray-light-v4 !important; &--hover:hover { background-color: $g-color-gray-light-v4 !important; } } &-v5 { background-color: $g-color-gray-light-v5 !important; &--hover:hover { background-color: $g-color-gray-light-v5 !important; } // Active &--active { &.active, .active & { background-color: $g-color-gray-light-v5 !important; } } } }
}
/* Transparent */ .g-bg-transparent {
background-color: transparent !important; &--hover:hover { background-color: transparent !important; } &--hover--after:hover::after { background-color: transparent !important; } &--parent-hover { .g-parent:hover & { background-color: transparent !important; } }
}
/* Complementary Colors ————————————*/ /* Beige Colors */ .g-bg-beige {
background-color: $g-color-beige !important;
}
/* Color Green */ .g-bg-green {
background-color: $g-color-green !important; &-opacity { &-0_1 { background-color: rgba($g-color-green, .1) !important; // R } } &--hover:hover { background-color: $g-color-green !important; // J }
}
/* Color Blue */ .g-bg-blue {
background-color: $g-color-blue !important; &-opacity { &-0_1 { background-color: rgba($g-color-blue, .1) !important; // R } &-0_7 { background-color: rgba($g-color-blue, .7) !important; // J } &-0_9 { background-color: rgba($g-color-blue, .9) !important; // Z } } &--hover:hover { background-color: $g-color-blue !important; // J }
}
/* Color Light Blue */ .g-bg-lightblue {
background-color: $g-color-lightblue !important; &-opacity { &-0_1 { background-color: rgba($g-color-lightblue, .1) !important; // R } }
}
.g-bg-lightblue-v1 {
background-color: $g-color-lightblue-v1 !important; &-opacity { &-0_1 { background-color: rgba($g-color-lightblue-v1, .1) !important; // R } }
}
/* Color Dark Blue */ .g-bg-darkblue {
background-color: $g-color-darkblue !important; &-opacity { &-0_1 { background-color: rgba($g-color-darkblue, .1) !important; // R } }
}
/* Color Indigo */ .g-bg-indigo {
background-color: $g-color-indigo !important; &-opacity { &-0_1 { background-color: rgba($g-color-indigo, .1) !important; // R } }
}
/* Color Red */ .g-bg-red {
background-color: $g-color-red !important; &-opacity { &-0_1 { background-color: rgba($g-color-red, .1) !important; // R } &-0_2 { background-color: rgba($g-color-red, .2) !important; // O } &-0_5 { background-color: rgba($g-color-red, .5) !important; // J } &-0_8 { background-color: rgba($g-color-red, .8) !important; // P } } &--hover:hover { background-color: $g-color-red !important; // J }
}
/* Color Light Red */ .g-bg-lightred {
background-color: $g-color-lightred !important; &-opacity { &-0_1 { background-color: rgba($g-color-lightred, .1) !important; // R } } &--hover:hover { background-color: $g-color-lightred !important; // Z }
}
/* Color Dark Red */ .g-bg-darkred {
background-color: $g-color-darkred !important; &-opacity { &-0_1 { background-color: rgba($g-color-darkred, .1) !important; // R } }
}
/* Color Purple */ .g-bg-purple {
background-color: $g-color-purple !important; &-opacity { &-0_1 { background-color: rgba($g-color-purple, .1) !important; // R } &-0_7 { background-color: rgba($g-color-purple, .7) !important; // P } &-0_9 { background-color: rgba($g-color-purple, .9) !important; // Z &--after::after { background-color: rgba($g-color-purple, .9) !important; // J } } } &--hover:hover { background-color: $g-color-purple !important; // J }
}
/* Color Dark Purple */ .g-bg-darkpurple {
background-color: $g-color-darkpurple !important; &-opacity { &-0_1 { background-color: rgba($g-color-darkpurple, .1) !important; // R } }
}
/* Color Pink */ .g-bg-pink {
background-color: $g-color-pink !important; &-opacity { &-0_1 { background-color: rgba($g-color-pink, .1) !important; // R } &-0_9 { background-color: rgba($g-color-pink, .9) !important; // Z } } &--hover:hover { background-color: $g-color-pink !important; // J } &--before, &--after { &::after { background-color: $g-color-pink !important; } &--hover:hover { &::after { background-color: $g-color-pink !important; } } }
}
/* Color Orange */ .g-bg-orange {
background-color: $g-color-orange !important; &-opacity { &-0_1 { background-color: rgba($g-color-orange, .1) !important; // R } } &-opacity { &-0_2 { background-color: rgba($g-color-orange, .2) !important; // O } } &--hover:hover { background-color: $g-color-orange !important; // J }
}
/* Color Deep Orange */ .g-bg-deeporange {
background-color: $g-color-deeporange !important; &-opacity { &-0_1 { background-color: rgba($g-color-deeporange, .1) !important; // R } } &--hover:hover { background-color: $g-color-deeporange !important; // J }
}
/* Color Yellow */ .g-bg-yellow {
background-color: $g-color-yellow !important; &-opacity { &-0_1 { background-color: rgba($g-color-yellow, .1) !important; // R } &-0_7 { background: rgba($g-color-yellow, .7) !important; // J } } &--hover:hover { background-color: $g-color-yellow !important; // J }
}
/* Color Aqua */ .g-bg-aqua {
background-color: $g-color-aqua !important; &-opacity { &-0_1 { background-color: rgba($g-color-aqua, .1) !important; // R } &-0_9 { background-color: rgba($g-color-aqua, .9) !important; // Z } } &--hover:hover { background-color: $g-color-aqua !important; // J }
}
/* Color Cyan */ .g-bg-cyan {
background-color: $g-color-cyan !important; &-opacity { &-0_1 { background-color: rgba($g-color-cyan, .1) !important; // R } &-0_9 { background-color: rgba($g-color-cyan, .9) !important; &--after::after { background-color: rgba($g-color-cyan, .9) !important; // J } } } &--hover:hover { background-color: $g-color-cyan !important; // J }
}
/* Color Teal */ .g-bg-teal {
background-color: $g-color-teal !important; &-opacity { &-0_1 { background-color: rgba($g-color-teal, .1) !important; // R } &-0_9 { background-color: rgba($g-color-teal, .9) !important; // J &--after::after { background-color: rgba($g-color-teal, .9) !important; // J } } } &--hover:hover { background-color: $g-color-teal !important; // J }
}
/* Color Brown */ .g-bg-brown {
background-color: $g-color-brown !important; &-opacity { &-0_1 { background-color: rgba($g-color-brown, .1) !important; // R } } &--hover:hover { background-color: $g-color-brown !important; // Z }
}
/* Color Blue Gray */ .g-bg-bluegray {
background-color: $g-color-bluegray !important; &-opacity { &-0_1 { background-color: rgba($g-color-bluegray, .1) !important; // R } &-0_2 { &--before::before, &--after::after { background-color: rgba($g-color-bluegray, .2) !important; // Z } } &-0_3 { &--before::before, &--after::after { background-color: rgba($g-color-bluegray, .3) !important; // Z } } &-0_5 { background-color: rgba($g-color-bluegray, .5) !important; // Z } &-0_7 { background-color: rgba($g-color-bluegray, .7) !important; // Z } } &--hover:hover { background-color: $g-color-bluegray !important; // J }
}
//Grayscale .g-grayscale {
&-100x { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; -webkit-filter: grayscale(100%); } &-0 { &--parent-hover { .g-parent:hover & { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter: grayscale(0%); } } &--hover:hover { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter: grayscale(0%); } }
}