/* ------------------ 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; } /* 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); } } .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);} } /* social */ /* de base */ .bg-primary { background-color:#7951c0!important; } /* alertes */ .alert-primary { background-color:#e4dcf2; } .alert-secondary { background-color:#dbdff4; } .alert-info { background-color:#d9ecfc; } .alert-success { background-color:#e3f0d5; } .alert-warning { background-color:#fbe4ce; } .alert-danger { background-color:#f9d8d2; } .alert-violet { background-color:#f5dbf5; } .alert-purple { background-color:#e4dcf2; } .alert-blue { background-color:#dbdff4; } .alert-skyblue { background-color:#d9ecfc; } .alert-turquoise { background-color:#daf1eb; } .alert-green { background-color:#e3f0d5; } .alert-orange { background-color:#fbe4ce; } .alert-red { background-color:#f9d8d2; } .alert-light { background-color:#ffffff; } .alert-dark { background-color:#e1e1e1; }