114 lines
2.5 KiB
SCSS
114 lines
2.5 KiB
SCSS
// Buttons
|
|
@mixin btn($color, $fg: $color) {
|
|
background: $color;
|
|
background-image: linear-gradient(to top, darken($color, 5%), $color);
|
|
border-color: $color;
|
|
text-shadow: 0 1px 0 $color;
|
|
color: darken($fg, 30%);
|
|
|
|
&:hover {
|
|
background: darken($color, 5%);
|
|
background-image: linear-gradient(to bottom, darken($color, 5%), $color);
|
|
border-color: darken($color, 5%);
|
|
}
|
|
|
|
&:active {
|
|
background: darken($color, 10%);
|
|
border-color: darken($color, 10%);
|
|
box-shadow: 0 1px 2px rgba($color, 0.6);
|
|
box-shadow: inset 0 0 10px rgba(darken($color, 30%), 0.2);
|
|
}
|
|
|
|
&:focus {
|
|
border-color: darken($color, 5%);
|
|
box-shadow: 0 0 0 1px rgba($color, 0.2), 0 1px 2px rgba($color, 0.2);
|
|
}
|
|
|
|
&:disabled {
|
|
background: darken($color, 20%);
|
|
border-color: darken($color, 25%);
|
|
text-shadow: none;
|
|
color: darken($fg, 30%);
|
|
box-shadow: inset 0 0 5px rgba(darken($color, 60%), 0.2);
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 0.5em 1em;
|
|
background: $black;
|
|
border: 1px solid $black;
|
|
@if $border-radius <= 0 {
|
|
border-radius: 3px;
|
|
} @else {
|
|
border-radius: $border-radius;
|
|
}
|
|
color: $white;
|
|
text-decoration: none;
|
|
text-shadow: 0 1px 0 $black;
|
|
box-shadow: 0 1px 2px rgba($black, 0.2);
|
|
transition: all 0.2s ease-in-out;
|
|
|
|
&:hover {
|
|
background: $black;
|
|
border-color: $black;
|
|
box-shadow: 0 1px 2px rgba($black, 0.2);
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:active {
|
|
background: #000;
|
|
border-color: $black;
|
|
box-shadow: inset 0 1px 2px rgba($black, 0.3);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: $black;
|
|
box-shadow: 0 0 0 1px rgba($black, 0.2), 0 1px 2px rgba($black, 0.2);
|
|
}
|
|
|
|
&:disabled {
|
|
background: #151515;
|
|
border-color: $black;
|
|
color: #333;
|
|
cursor: default;
|
|
box-shadow: inset 0 0 10px rgba($black, 0.1);
|
|
}
|
|
|
|
&.btn-wide {
|
|
width: 100%;
|
|
}
|
|
|
|
&.btn-primary {
|
|
@include btn($accent);
|
|
}
|
|
|
|
&.btn-secondary {
|
|
@include btn($accent-alt);
|
|
}
|
|
|
|
&.btn-success {
|
|
@include btn($green);
|
|
}
|
|
|
|
&.btn-danger {
|
|
@include btn($red);
|
|
}
|
|
|
|
&.btn-warning {
|
|
@include btn($orange);
|
|
}
|
|
|
|
&.btn-info {
|
|
@include btn($blue);
|
|
}
|
|
|
|
&.btn-dark {
|
|
@include btn($black, #fefefe);
|
|
}
|
|
|
|
&.btn-light {
|
|
@include btn($white, #121212);
|
|
}
|
|
} |