You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.2 KiB
99 lines
2.2 KiB
2 years ago
|
@import "colors-list";
|
||
|
|
|
||
|
|
@mixin button-theme($theme-name) {
|
||
|
|
$colors: map-get(map-get($themes, $theme-name), 'colors');
|
||
|
|
font-size: 15px;
|
||
|
|
border: 0;
|
||
|
|
padding: 6px 12px;
|
||
|
|
cursor: pointer;
|
||
|
|
user-select: none;
|
||
|
|
display: inline-flex;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
flex-shrink: 0;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
text-align: center;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: background-color 0.3s linear, color 0.3s linear, opacity 0.3s linear, outline-color 0.3s ease-in-out, outline-width 0.3s ease-in-out, box-shadow 0.3s;
|
||
|
|
|
||
|
|
&.button-cut {
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-rounded {
|
||
|
|
border-radius: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $key, $color in $colors {
|
||
|
|
@if($theme-name == 'dark') {
|
||
|
|
@include button($key, map-get($colors, 'black'), $color);
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
@include button($key, map-get($colors, 'white'), darken($color, 20));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.disabled {
|
||
|
|
opacity: 0.5;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-exp {
|
||
|
|
@each $key, $color in $colors {
|
||
|
|
@if($theme-name == 'dark') {
|
||
|
|
@include button($key, $color, darken($color, 60));
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
@include button($key, $color, darken($color, 40));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-plate {
|
||
|
|
@each $key, $color in $colors {
|
||
|
|
@if($theme-name == 'dark') {
|
||
|
|
@include button($key, $color, darken(map-get($colors, 'gray'), 45));
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
@include button($key, darken($color, 30), lighten(map-get($colors, 'gray'), 25));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-shade {
|
||
|
|
@each $key, $color in $colors {
|
||
|
|
@if($theme-name == 'dark') {
|
||
|
|
@include button($key, $color, mix(map-get($colors-dark, 'gray-0'), $color, 85%));
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
@include button($key, darken($color, 30), mix(map-get($colors, 'white'), $color, 80%));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin button($key, $fg-color, $bg-color) {
|
||
|
|
&.button-#{$key} {
|
||
|
|
background-color: $bg-color;
|
||
|
|
color: $fg-color;
|
||
|
|
&:hover {
|
||
|
|
background-color: lighten($bg-color, 10);
|
||
|
|
}
|
||
|
|
&:focus,
|
||
|
|
&:active {
|
||
|
|
background-color: darken($bg-color, 5);
|
||
|
|
box-shadow: 0 0 2px 2px transparentize($bg-color, 0.7);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
@include button-theme('light');
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .button {
|
||
|
|
@include button-theme('dark');
|
||
|
|
}
|
||
|
|
|