@import "_variables"; /* ========================================================================== Color Utility Classes ========================================================================== */ @l_Button-Hot-BG: @g_Accent-BG; @l_Button-Hot-Text: contrast(@l_Button-Hot-BG, darken(@l_Button-Hot-BG, 85%), lighten(@l_Button-Hot-BG, 85%), 43%); /* Warning State ========================================================================== */ .u-warning { background-color: @g_Warning-BG !important; color: @g_Warning-FG; &-text { color: @g_Warning-BG !important; } &-bg { background-color: @g_Warning-BG !important; } &-border { border-color: @g_Warning-BG !important; } } /* Success State ========================================================================== */ .u-success { background-color: @g_Success-BG !important; color: @g_Success-FG; &-text { color: @g_Success-BG !important; } &-bg { background-color: @g_Success-BG !important; } &-border { border-color: @g_Success-BG !important; } } /* Danger State ========================================================================== */ .u-danger { background-color: @g_Danger-BG !important; color: @g_Danger-FG; &-text { color: @g_Danger-BG !important; } &-bg { background-color: @g_Danger-BG !important; } &-border { border-color: @g_Danger-BG !important; } } /* Info State ========================================================================== */ .u-info { background-color: @g_Info-BG !important; color: @g_Info-FG; &-text { color: @g_Info-BG !important; } &-bg { background-color: @g_Info-BG !important; } &-border { border-color: @g_Info-BG !important; } } /* Hot State ========================================================================== */ .u-hot { background-color: @l_Button-Hot-BG !important; color: @l_Button-Hot-Text; &-text { color: @l_Button-Hot-BG !important; } &-bg { background-color: @l_Button-Hot-BG !important; } &-border { border-color: @l_Button-Hot-BG !important; } } /* Normal State ========================================================================== */ .u-normal { background-color: @g_Body-BG !important; color: @g_Body-Text; &-text { color: @g_Body-Text !important; } &-bg { background-color: @g_Body-Text !important; } &-border { border-color: @g_Body-Text !important; } } // /* ========================================================================== // Cycle Colors for Lists // ========================================================================== */ // .color-cycle(@counter) when (@counter > 0) { // .color-cycle(@counter - 1); // li:nth-child(@{i}) { // color: @color@{i}; // } // } // .u-color-cycle { // .color-cycle(30); // }