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.
98 lines
2.2 KiB
98 lines
2.2 KiB
@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'); |
|
} |
|
|
|
|