/* ------------------ 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; } } /* 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); } } /* de base */ .btn-primary, .btn-primary:hover, .btn-primary:active, .badge-primary { background-color:#7951c0; color:#FFF; } .btn-secondary, .btn-secondary:hover, .btn-secondary:active, .badge-secondary { background-color:#4e63c9; color:#FFF; } .btn-danger, .btn-red, .badge-red, .badge-danger { background-color:#e33d22; color:#FFF; } .btn-warning, .btn-orange, .badge-warning, .badge-orange { background-color:#eb790a; color:#FFF; } .btn-success, .btn-green, .badge-success, .badge-green { background-color:#75b82d; color:#FFF; } .btn-info, .btn-skyblue, .badge-info, .badge-skyblue { background-color:#42a0f3; color:#FFF; } .btn-blue, .badge-blue { background-color:#4e63c9; color:#FFF } .btn-purple, .badge-purple { background-color:#7951c0; color:#FFF } .btn-dark, .badge-dark { background-color:#6d6d6d; color:#FFF } .btn-light, .badge-light { background-color:#eeeeec; } .btn-violet, .badge-violet { background-color:#ce4dcd; color:#FFF } .btn-turquoise, .badge-turquoise { background-color:#46bd9e; color:#FFF } /* :hover */ .btn-primary:hover, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { background-color:#9373cc; color:#FFF; } .btn-secondary:hover, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { background-color:#7182d3; color:#FFF; } .btn-blue:hover, .btn-blue:active { background-color:#7182d3; color:#FFF; } .btn-purple:hover, .btn-purple:active { background-color:#9373cc; color:#FFF; } .btn-success:hover, .btn-success:active, .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle, .btn-green:hover, .btn-green:active { background-color:#90c657; color:#FFF; } .btn-info:hover, .btn-info:active, .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle, .btn-skyblue:hover, .btn-skyblue:active { background-color:#67b3f5; color:#FFF; } .btn-warning:hover, .btn-warning:active, .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle, .btn-orange:hover, .btn-orange:active { background-color:#ef933b; color:#FFF; } .btn-danger:hover, .btn-danger:active, .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle, .btn-red:hover, .btn-red:active { background-color:#e8634e; color:#FFF; } .btn-dark:hover, .btn-dark:active, .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { background-color:#8a8a8a; color:#FFF; } .btn-light:hover, .btn-light:active, .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { background-color:#dddddd; color:#000; } .btn-violet:hover, .btn-violet:active { background-color:#d770d7; color:#FFF; } .btn-turquoise:hover, .btn-turquoise:active { background-color:#6bcab1; color:#FFF; } .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; } /* social */ .btn-facebook { background-color:#3B5998; color:#FFF; } .btn-facebook:hover, .btn-facebook:active { background-color:#627aac; color:#FFF; } .btn-twitter { background-color:#55ACEE; color:#FFF; } .btn-twitter:hover, .btn-twitter:active { background-color:#77bcf1; color:#FFF; } .btn-googleplus { background-color:#d34836; color:#FFF; } .btn-googleplus:hover, .btn-googleplus:active { background-color:#db6c5e; color:#FFF; } .btn-diaspora { background-color:#313739; color:#FFF; } .btn-diaspora:hover, .btn-diaspora:active { background-color:#5a5f60; color:#FFF; } .btn-mastodon { background-color:#282c37; color:#FFF; } .btn-mastodon:hover, .btn-mastodon:active { background-color:#53565f; color:#FFF; }