@import “mix-variables”;
// // mixin Button transition // // @param $transitions // // usage: // @include mix-transition(background-color .2s ease-in-out); // @mixin mix-transition($transitions…) {
-webkit-transition: $transitions; -moz-transition: $transitions; -ms-transition: $transitions; transition: $transitions;
}
// // mixin appearance | css-tricks.com/almanac/properties/a/appearance/ // // @param $appearance // // usage: // @include appearance(none); // @mixin mix-appearance($appearance: none) {
-webkit-appearance: $appearance; -moz-appearance: $appearance; -ms-appearance: $appearance; appearance: $appearance;
}
// // mixin border-radius | css-tricks.com/almanac/properties/b/border-radius/ // // @param $radius // // usage: // @include border-radius(4px); // @mixin mix-border-radius($radius) {
-webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;
}
// // mixin mix-color-variant // // @param $font-color // @param $bg-color // @param $border-color // @param $ghost // // usage: // @include mix-color-variant(fff, #8cd1a8, transparent, false); // @mixin mix-color-variant(
$font-color: $mix-white-color, $bg-color: $mix-primary-color, $border-color: $mix-border-color, $ghost: $mix-ghost
) {
color: $font-color; background-color: $bg-color; border: 1px solid $border-color; &:hover, &:focus { color: darken($font-color, 5%); border-color: darken($border-color, 6%); @if $ghost == true { $bg-color: rgba($mix-white-color, .1); } background-color: darken($bg-color, 5%); }
}
// // mixin mix-button-size // // @param $mix-height // @param $mix-spacing // @param $mix-font-size // // usage: // @include mix-button-size(1.2em, 2em, 16px); // @mixin mix-button-size(
$mix-height: $mix-base-height, $mix-spacing: $mix-base-spacing, $mix-font-size: $mix-base-font-size
) {
height: $mix-height; line-height: $mix-height; padding: 0 $mix-spacing; font-size: $mix-font-size;
}
// // placeholder %default-mix-button | sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_ // %default-mix-button {
letter-spacing: .05em; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; display: inline-block; margin-top: $mix-margin; margin-bottom: $mix-margin; @include mix-button-size(); @include mix-transition($mix-transition); @include mix-appearance; &, &:hover, &:focus, &:active { outline: none; } &:active { position: relative; top: 2px; }
}
// // mixin button // // @param $bg-color // @param $font-color // @param $border-radius // @param $font-weight // @param $ghost // @param $upper // // usage: // @include mix-button(#8cd1a8, fff, 2px, 700, false, false); // @mixin mix-button(
$bg-color: $mix-primary-color, $font-color: $mix-white-color, $border-radius: $mix-border-radius, $font-weight: $mix-font-weight, $ttransform: $mix-ttransform, $ghost: $mix-ghost
) {
@extend %default-mix-button; font-weight: $font-weight; text-transform: $ttransform; $border-color: darken($bg-color, 5%); $bg-color: $bg-color; @if $ghost == true { $bg-color: transparent; $border-color: darken($font-color, 5%); } @include mix-border-radius($border-radius); @include mix-color-variant($font-color, $bg-color, $border-color, $ghost);
}