/* ------------------ COULEURS ------------------- */ @mixin card-color($background-color, $text-color) { & > .card-header { background-color: $background-color; color:$text-color; } } @mixin button-lighten($background-color, $text-color) { background-color: lighten($background-color, 10%); color:$text-color; } @mixin button-color($background-color, $text-color) { background-color: $background-color; color: $text-color; &, &:not(.disabled):not(:disabled) { &:hover, &:active, &:focus { @include button-lighten($background-color, $text-color); } } } @mixin badge-color($background-color, $text-color) { background-color: $background-color; color: $text-color; &, &:not(.disabled):not(:disabled) { &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & { @include button-lighten($background-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; } a, a:hover, a:active { color: $color-link; } ::selection { @include background-color($color-selection, #FFF); } ::-moz-selection { @include background-color($color-selection, #FFF); } /* 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 { &-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);} } /* BADGES */ .badge { &-blue { @include badge-color($color-blue, #FFF); } &-violet { @include badge-color($color-violet, #FFF); } &-purple { @include badge-color($color-purple, #FFF); } &-red { @include badge-color($color-red, #FFF); } &-orange { @include badge-color($color-orange, #FFF); } &-green { @include badge-color($color-green, #FFF); } &-skyblue { @include badge-color($color-skyblue, #FFF); } &-dark { @include badge-color($color-dark, #FFF); } &-light { @include badge-color($color-light, #111); } &-turquoise { @include badge-color($color-turquoise, #FFF); } &-primary { @include badge-color($color-primary, #FFF); } &-secondary { @include badge-color($color-secondary, #FFF); } &-warning { @include badge-color($color-warning, #FFF); } &-danger { @include badge-color($color-danger, #FFF); } &-info { @include badge-color($color-info, #FFF); } &-success { @include badge-color($color-success, #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); } } mark { background-color: lighten($color-mark, 30%) }