/* ------------------ COULEURS ------------------- */ $color-blue: #4e63c9; $color-violet: #ce4dcd; $color-purple: #7951c0; $color-red: #e33d22; $color-orange: #eb790a; $color-green: #75b82d; $color-skyblue: #42a0f3; $color-dark: #6d6d6d; $color-light: #eeeeec; $color-turquoise: #46bd9e; $color-primary: $color-purple; $color-secondary: $color-blue; $color-warning: $color-orange; $color-danger: $color-red; $color-info: $color-skyblue; $color-success: $color-green; @mixin card-color($background-color, $text-color) { & > .card-header { background-color: $background-color; color:$text-color; } } @mixin button-color($background-color, $text-color) { background-color: $background-color; &:hover, &:active, &:focus, &[href]:hover, &[href]:active, &[href]:focus {background-color: lighten($background-color, 10%); color:$text-color;} color: $text-color; } @mixin background-color($background-color, $text-color) { background-color: $background-color!important; color: $text-color; } @mixin alert-color($background-color) { background-color: lighten($background-color, 35%); color: darken($background-color, 80%); } @mixin text-color($text-color) { color: $text-color; } /* CARDS */ .card { &-blue { @include card-color($color-blue, #FFF); } &-violet { @include card-color($color-violet, #FFF); } &-purple { @include card-color($color-purple, #FFF); } &-red { @include card-color($color-red, #FFF); } &-orange { @include card-color($color-orange, #FFF); } &-green { @include card-color($color-green, #FFF); } &-skyblue { @include card-color($color-skyblue, #FFF); } &-dark { @include card-color($color-dark, #FFF); } &-light { @include card-color($color-light, #111); } &-turquoise { @include card-color($color-turquoise, #FFF); } &-primary { @include card-color($color-primary, #FFF); } &-secondary { @include card-color($color-secondary, #FFF); } &-warning { @include card-color($color-warning, #FFF); } &-danger { @include card-color($color-danger, #FFF); } &-info { @include card-color($color-info, #FFF); } &-success { @include card-color($color-success, #FFF); } } /* BUTTONS & BADGES */ .btn, .badge { &-blue { @include button-color($color-blue, #FFF); } &-violet { @include button-color($color-violet, #FFF); } &-purple { @include button-color($color-purple, #FFF); } &-red { @include button-color($color-red, #FFF); } &-orange { @include button-color($color-orange, #FFF); } &-green { @include button-color($color-green, #FFF); } &-skyblue { @include button-color($color-skyblue, #FFF); } &-dark { @include button-color($color-dark, #FFF); } &-light { @include button-color($color-light, #111); } &-turquoise { @include button-color($color-turquoise, #FFF); } &-primary { @include button-color($color-primary, #FFF); } &-secondary { @include button-color($color-secondary, #FFF); } &-warning { @include button-color($color-warning, #FFF); } &-danger { @include button-color($color-danger, #FFF); } &-info { @include button-color($color-info, #FFF); } &-success { @include button-color($color-success, #FFF); } } /* social */ .btn { &-facebook {@include button-color(#3B5998, #FFF);} &-twitter {@include button-color(#55ACEE, #FFF);} &-googleplus {@include button-color(#d34836, #FFF);} &-diaspora {@include button-color(#313739, #FFF);} &-mastodon {@include button-color(#282c37, #FFF);} } /* BACKGROUNDS */ .bg { &-blue { @include background-color($color-blue, #FFF); } &-violet { @include background-color($color-violet, #FFF); } &-purple { @include background-color($color-purple, #FFF); } &-red { @include background-color($color-red, #FFF); } &-orange { @include background-color($color-orange, #FFF); } &-green { @include background-color($color-green, #FFF); } &-skyblue { @include background-color($color-skyblue, #FFF); } &-dark { @include background-color($color-dark, #FFF); } &-light { @include background-color($color-light, #111); } &-turquoise { @include background-color($color-turquoise, #FFF); } &-primary { @include background-color($color-primary, #FFF); } &-secondary { @include background-color($color-secondary, #FFF); } &-warning { @include background-color($color-warning, #FFF); } &-danger { @include background-color($color-danger, #FFF); } &-info { @include background-color($color-info, #FFF); } &-success { @include background-color($color-success, #FFF); } } /* ALERTS */ .alert { &-blue { @include alert-color($color-blue); } &-violet { @include alert-color($color-violet); } &-purple { @include alert-color($color-purple); } &-red { @include alert-color($color-red); } &-orange { @include alert-color($color-orange); } &-green { @include alert-color($color-green); } &-skyblue { @include alert-color($color-skyblue); } &-dark { @include alert-color($color-dark); } &-light { @include alert-color($color-light); } &-turquoise { @include alert-color($color-turquoise); } &-primary { @include alert-color($color-primary); } &-secondary { @include alert-color($color-secondary); } &-warning { @include alert-color($color-warning); } &-danger { @include alert-color($color-danger); } &-info { @include alert-color($color-info); } &-success { @include alert-color($color-success); } } /* TEXT */ .text { &-blue { @include text-color($color-blue); } &-violet { @include text-color($color-violet); } &-purple { @include text-color($color-purple); } &-red { @include text-color($color-red); } &-orange { @include text-color($color-orange); } &-green { @include text-color($color-green); } &-skyblue { @include text-color($color-skyblue); } &-dark { @include text-color($color-dark); } &-light { @include text-color($color-light); } &-turquoise { @include text-color($color-turquoise); } &-primary { @include text-color($color-primary); } &-secondary { @include text-color($color-secondary); } &-warning { @include text-color($color-warning); } &-danger { @include text-color($color-danger); } &-info { @include text-color($color-info); } &-success { @include text-color($color-success); } }