mirror of
https://github.com/kidoman/embd
synced 2025-02-10 12:43:18 +01:00
76 lines
1.9 KiB
SCSS
76 lines
1.9 KiB
SCSS
// Color Pallete
|
|
|
|
@function getColor($key, $state: false, $list: $ui-coloring) {
|
|
@each $color in $list {
|
|
@if $key == nth($color, 1) and $state == default {
|
|
@return nth($color, 2);
|
|
}
|
|
@else if $key == nth($color, 1) and $state == hover {
|
|
@return nth($color, 3);
|
|
}
|
|
@else if $key == nth($color, 1) {
|
|
@return nth($color, 1);
|
|
}
|
|
}
|
|
@return false;
|
|
}
|
|
|
|
@mixin palette($shade, $palette-text-color:false) {
|
|
@if $shade == getColor($shade) {
|
|
@if $palette-text-color != false {
|
|
color: $palette-text-color;
|
|
}
|
|
@else {
|
|
color: lighten(getColor($shade, default), 80%);
|
|
}
|
|
background: getColor($shade, default);
|
|
border: 1px solid getColor($shade, default);
|
|
&:hover {
|
|
background: getColor($shade, hover);
|
|
border: 1px solid darken(getColor($shade, hover), 3%);
|
|
}
|
|
&:active {
|
|
background: darken(getColor($shade, default), 10%);
|
|
border: 1px solid darken(getColor($shade, default), 10%);
|
|
}
|
|
|
|
@if $shade == default {
|
|
@if $palette-text-color != false {
|
|
color: $palette-text-color;
|
|
}
|
|
@else {
|
|
color: darken(getColor($shade, default), 61.5%);
|
|
}
|
|
border: 1px solid getColor($shade, default);
|
|
&:hover {
|
|
border: 1px solid darken(getColor($shade, hover), 5%);
|
|
}
|
|
}
|
|
@if $shade == warning {
|
|
@if $palette-text-color != false {
|
|
color: $palette-text-color;
|
|
}
|
|
@else {
|
|
color: darken(getColor($shade, hover), 40%);
|
|
}
|
|
}
|
|
}
|
|
@else {
|
|
@if $palette-text-color != false {
|
|
color: $palette-text-color;
|
|
}
|
|
@else {
|
|
color: lighten($shade, 80%);
|
|
}
|
|
background: $shade;
|
|
border: 1px solid $shade;
|
|
&:hover {
|
|
background: lighten($shade, 30%);
|
|
border: 1px solid lighten($shade, 27%);
|
|
}
|
|
&:active {
|
|
background: darken($shade, 10%);
|
|
border: 1px solid darken($shade, 10%);
|
|
}
|
|
}
|
|
} |