This repository has been archived on 2022-11-21. You can view files and clone it, but cannot push or open issues or pull requests.
kspace-static/scss/_colorize.scss

229 lines
9.5 KiB
SCSS
Raw Normal View History

2019-10-08 13:06:59 +02:00
/* ------------------ COULEURS ------------------- */
$color-button-light: $color-light;
$color-button-dark: $color-dark;
2019-10-08 13:06:59 +02:00
@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, $color-button-light);
2019-10-08 13:06:59 +02:00
}
::-moz-selection {
@include background-color($color-selection, $color-button-light);
2019-10-08 13:06:59 +02:00
}
/* CARDS */
.card {
&-blue { @include card-color($color-blue, $color-button-light); }
&-violet { @include card-color($color-violet, $color-button-light); }
&-purple { @include card-color($color-purple, $color-button-light); }
&-red { @include card-color($color-red, $color-button-light); }
&-orange { @include card-color($color-orange, $color-button-light); }
&-green { @include card-color($color-green, $color-button-light); }
&-skyblue { @include card-color($color-skyblue, $color-button-light); }
&-dark { @include card-color($color-dark, $color-button-light); }
&-light { @include card-color($color-light, $color-button-dark); }
&-turquoise { @include card-color($color-turquoise, $color-button-light); }
&-yellow { @include card-color($color-yellow, $color-button-light); }
&-brown { @include card-color($color-brown, $color-button-light); }
&-grey { @include card-color($color-grey, $color-button-light); }
2019-10-08 13:06:59 +02:00
&-primary { @include card-color($color-primary, $color-button-light); }
&-secondary { @include card-color($color-secondary, $color-button-light); }
&-warning { @include card-color($color-warning, $color-button-light); }
&-danger { @include card-color($color-danger, $color-button-light); }
&-info { @include card-color($color-info, $color-button-light); }
&-success { @include card-color($color-success, $color-button-light); }
2019-10-08 13:06:59 +02:00
}
/* BUTTONS & BADGES */
.btn {
&-blue { @include button-color($color-blue, $color-button-light); }
&-violet { @include button-color($color-violet, $color-button-light); }
&-purple { @include button-color($color-purple, $color-button-light); }
&-red { @include button-color($color-red, $color-button-light); }
&-orange { @include button-color($color-orange, $color-button-light); }
&-green { @include button-color($color-green, $color-button-light); }
&-skyblue { @include button-color($color-skyblue, $color-button-light); }
&-dark { @include button-color($color-dark, $color-button-light); }
&-light { @include button-color($color-light, $color-button-dark); }
&-turquoise { @include button-color($color-turquoise, $color-button-light); }
&-yellow { @include button-color($color-yellow, $color-button-light); }
&-brown { @include button-color($color-brown, $color-button-light); }
&-grey { @include button-color($color-grey, $color-button-light); }
2019-10-08 13:06:59 +02:00
&-primary { @include button-color($color-primary, $color-button-light); }
&-secondary { @include button-color($color-secondary, $color-button-light); }
&-warning { @include button-color($color-warning, $color-button-light); }
&-danger { @include button-color($color-danger, $color-button-light); }
&-info { @include button-color($color-info, $color-button-light); }
&-success { @include button-color($color-success, $color-button-light); }
2019-10-08 13:06:59 +02:00
}
/* social */
.btn {
&-facebook {@include button-color(#3B5998, $color-button-light);}
&-twitter {@include button-color(#55ACEE, $color-button-light);}
&-googleplus {@include button-color(#d34836, $color-button-light);}
&-diaspora {@include button-color(#313739, $color-button-light);}
&-mastodon {@include button-color(#282c37, $color-button-light);}
2019-10-08 13:06:59 +02:00
}
/* BADGES */
.badge {
&-blue { @include badge-color($color-blue, $color-button-light); }
&-violet { @include badge-color($color-violet, $color-button-light); }
&-purple { @include badge-color($color-purple, $color-button-light); }
&-red { @include badge-color($color-red, $color-button-light); }
&-orange { @include badge-color($color-orange, $color-button-light); }
&-green { @include badge-color($color-green, $color-button-light); }
&-skyblue { @include badge-color($color-skyblue, $color-button-light); }
&-dark { @include badge-color($color-dark, $color-button-light); }
&-light { @include badge-color($color-light, $color-button-dark); }
&-turquoise { @include badge-color($color-turquoise, $color-button-light); }
&-yellow { @include badge-color($color-yellow, $color-button-light); }
&-brown { @include badge-color($color-brown, $color-button-light); }
&-grey { @include badge-color($color-grey, $color-button-light); }
2019-10-08 13:06:59 +02:00
&-primary { @include badge-color($color-primary, $color-button-light); }
&-secondary { @include badge-color($color-secondary, $color-button-light); }
&-warning { @include badge-color($color-warning, $color-button-light); }
&-danger { @include badge-color($color-danger, $color-button-light); }
&-info { @include badge-color($color-info, $color-button-light); }
&-success { @include badge-color($color-success, $color-button-light); }
2019-10-08 13:06:59 +02:00
}
/* BACKGROUNDS */
.bg {
&-blue { @include background-color($color-blue, $color-button-light); }
&-violet { @include background-color($color-violet, $color-button-light); }
&-purple { @include background-color($color-purple, $color-button-light); }
&-red { @include background-color($color-red, $color-button-light); }
&-orange { @include background-color($color-orange, $color-button-light); }
&-green { @include background-color($color-green, $color-button-light); }
&-skyblue { @include background-color($color-skyblue, $color-button-light); }
&-dark { @include background-color($color-dark, $color-button-light); }
&-light { @include background-color($color-light, $color-button-dark); }
&-turquoise { @include background-color($color-turquoise, $color-button-light); }
&-yellow { @include background-color($color-yellow, $color-button-light); }
&-brown { @include background-color($color-brown, $color-button-light); }
&-grey { @include background-color($color-grey, $color-button-light); }
2019-10-08 13:06:59 +02:00
&-primary { @include background-color($color-primary, $color-button-light); }
&-secondary { @include background-color($color-secondary, $color-button-light); }
&-warning { @include background-color($color-warning, $color-button-light); }
&-danger { @include background-color($color-danger, $color-button-light); }
&-info { @include background-color($color-info, $color-button-light); }
&-success { @include background-color($color-success, $color-button-light); }
2019-10-08 13:06:59 +02:00
}
/* 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); }
&-yellow { @include alert-color($color-yellow); }
&-brown { @include alert-color($color-brown); }
&-grey { @include alert-color($color-grey); }
&-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); }
&-yellow { @include text-color($color-yellow); }
&-brown { @include text-color($color-brown); }
&-grey { @include text-color($color-grey); }
&-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); }
}
/* Clear-Typography overrides */
mark {
background-color: lighten($color-mark, 30%)
}
blockquote, pre {
border-color: $color-primary;
}