/* ==|== button classes ========================================
Classes to style buttons
*/¶ ↑
@import “../mixins/helper-mixins”
, "../mixins/decoration-mixins" , "../functions/linear-gradient-colors" , "../functions/responsive-size";
// Button Variables $blue: #002868 !default; $lightened-blue: lighten($blue, 15%) !default; $white: darken(fff, 4%) !default; $button-default-bg-color: $lightened-blue, $blue !default; $button-default-font-color: $white !default; $button-default-border-positions: top, right, bottom, left; $button-default-border-colors: desaturate(lighten($blue, 21%), 37%), lighten($blue, 10%), lighten($blue, 10%), desaturate(lighten($blue, 21%), 37%);
%button-props {
width: auto; min-width: 100px; height: 30px; @include opacity(100); text-align: center; font-size: 1.0em; line-height: rs(16px); margin: 10px; display: inline-block; position: relative; @include add-border-radius($border-radius: 5px);
}
@mixin generateButton($bg-color: $button-default-bg-color,
$font-color: $button-default-font-color, $border-colors: $button-default-border-colors, $disabled-opacity: 40) { //determine the dominant color of the button, this is needed for the determination of the font color $button-major-color: $bg-color; //if the background color has more than one color, the colors are to be used to create a linear //gradient @if length($bg-color) > 1 { @include linear-gradient(top, $bg-color); &:hover { $hover-bg-color: darken(nth($bg-color, 1), 15%), nth($bg-color, 2); @include linear-gradient(top, $hover-bg-color); } &:active { background-color: nth($bg-color, 2); } $button-major-color: nth($bg-color, 2); } @else { background-color: $bg-color; } //use the different border settings to set the colors $idx: 1; @if length($border-colors) > 1 { @each $border-color in $border-colors { @include add-border(nth($button-default-border-positions, $idx), 1px, solid, $border-color); $idx: $idx + 1; } } @else { @include add-border($border-color: $border-colors); } //calculate the lightness of the background color and set the font color @if lightness($button-major-color) < 80% { color: $font-color; } @else { color: invert($font-color); } @extend %button-props; &.button-disabled { @include opacity($disabled-opacity); cursor: default; }
}