101 lines
3.2 KiB
SCSS
101 lines
3.2 KiB
SCSS
/* --- COLORS --- */
|
|
|
|
$color-blue: #4e63c9;
|
|
$color-violet: #ce4dcd;
|
|
$color-purple: #7951c0;
|
|
$color-red: #e33d22;
|
|
$color-orange: #eb790a;
|
|
$color-green: #75b82d;
|
|
$color-skyblue: #42a0f3;
|
|
$color-dark: #2D2D2D;
|
|
$color-light: #eeeeec;
|
|
$color-turquoise: #46bd9e;
|
|
$color-yellow: #f6d32d;
|
|
$color-brown: #986a44;
|
|
$color-grey: #77767b;
|
|
|
|
$color-primary: $color-purple;
|
|
$color-secondary: $color-blue;
|
|
$color-warning: $color-orange;
|
|
$color-danger: $color-red;
|
|
$color-info: $color-skyblue;
|
|
$color-success: $color-green;
|
|
|
|
$color-link: $color-blue;
|
|
$color-selection: $color-blue;
|
|
$color-mark: $color-yellow;
|
|
|
|
@mixin text-color($text-color) {
|
|
color: $text-color;
|
|
}
|
|
|
|
@mixin background-color($background-color, $text-color) {
|
|
background-color: $background-color!important;
|
|
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);
|
|
}
|
|
|
|
mark {
|
|
background-color: lighten($color-mark, 30%)
|
|
}
|
|
|
|
blockquote, pre {
|
|
border-color: $color-primary;
|
|
}
|
|
|
|
.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); }
|
|
}
|
|
|
|
.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); }
|
|
&-yellow { @include background-color($color-yellow, #FFF); }
|
|
&-brown { @include background-color($color-brown, #FFF); }
|
|
&-grey { @include background-color($color-grey, #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); }
|
|
}
|