87 lines
2.1 KiB
SCSS
87 lines
2.1 KiB
SCSS
@mixin btn-style($color, $background, $hover-background, $shadow) {
|
|
color: $color;
|
|
background-color: $background;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: -$border-size;
|
|
right: -$border-size;
|
|
bottom: -$border-size;
|
|
left: -$border-size;
|
|
content: "";
|
|
box-shadow: inset -4px -4px $shadow;
|
|
}
|
|
|
|
&:hover {
|
|
color: $color;
|
|
text-decoration: none;
|
|
background-color: $hover-background;
|
|
|
|
&::after {
|
|
box-shadow: inset -6px -6px $shadow;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 6px rgba($shadow, 0.3);
|
|
}
|
|
|
|
&:active:not(.is-disabled)::after {
|
|
box-shadow: inset 4px 4px $shadow;
|
|
}
|
|
}
|
|
|
|
// Default style
|
|
.nes-btn {
|
|
@include compact-rounded-corners();
|
|
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 6px 8px;
|
|
margin: $border-size;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
cursor: $cursor-click-url, pointer;
|
|
user-select: none;
|
|
|
|
@include btn-style(
|
|
$base-color,
|
|
map-get($default-colors, "normal"),
|
|
map-get($default-colors, "hover"),
|
|
map-get($default-colors, "shadow")
|
|
);
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
&.is-disabled,
|
|
&.is-disabled:hover,
|
|
&.is-disabled:focus {
|
|
color: $base-color;
|
|
cursor: not-allowed;
|
|
background-color: map-get($disabled-colors, "normal");
|
|
box-shadow: inset -4px -4px map-get($disabled-colors, "shadow");
|
|
opacity: 0.6;
|
|
}
|
|
|
|
// Other styles
|
|
// prettier-ignore
|
|
$types:
|
|
"primary" $background-color map-get($primary-colors, "normal") map-get($primary-colors, "hover") map-get($primary-colors, "shadow"),
|
|
"success" $background-color map-get($success-colors, "normal") map-get($success-colors, "hover") map-get($success-colors, "shadow"),
|
|
"warning" $base-color map-get($warning-colors, "normal") map-get($warning-colors, "hover") map-get($warning-colors, "shadow"),
|
|
"error" $background-color map-get($error-colors, "normal") map-get($error-colors, "hover") map-get($error-colors, "shadow");
|
|
|
|
@each $type in $types {
|
|
&.is-#{nth($type, 1)} {
|
|
@include btn-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5));
|
|
}
|
|
}
|
|
|
|
input[type="file"] {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
}
|