Sha256: 1b698b198ae983dabb3acfc3ac031eae34643436ba3b8e1cdd03b4325c3a3013
Contents?: true
Size: 1.79 KB
Versions: 13
Compression:
Stored size: 1.79 KB
Contents
// =============
// EDGE BUTTON
// =============
$button-color: $main-color !default;
// ---------------
// BUTTON :hover
// ---------------
@mixin button-hover($color) {
&:hover {
// Darken background if background is light
@if is_light($color) {
background-color: darken($color, 5%);
}
// Lighten background if background is dark
@else {
background-color: lighten($color, 5%);
}
}
}
// -----------------
// BUTTON :active
// -----------------
@mixin button-active($color) {
&:active {
// Make it darker than hover state if background is light
@if is_light($color) {
background-color: darken($color, 10%);
}
// Darken background if background is dark
@else {
background-color: darken($color, 5%);
}
}
}
// ---------------
// BUTTON :focus
// ---------------
@mixin button-focus() {
&:focus {
outline: none;
}
}
// -----------------
// BUTTON
// Create button
// -----------------
@mixin button(
$color : $button-color,
$for-base : false) {
@if $for-base {
display: inline-block;
cursor: pointer;
position: relative;
border: 1px solid transparent;
padding: 10px 20px;
font-weight: 700;
}
background-color: $color;
color: contrast-color($color, $body-font-color, white, 70%);
@if $for-base {
@include border-radius($g-radius);
@include transition($g-transition);
@include button-focus();
}
@include button-hover($color);
@include button-active($color);
}
@if $include-button and not $user-mode {
/* ---------------
EDGE Button
--------------- */
button,
.button,
input[type="submit"],
input[type="reset"] {
@include button($for-base: true);
}
} // $include-button
Version data entries
13 entries across 13 versions & 1 rubygems