// // Buttons //
/* Button Styles ————————————*/ /* General Button Styles */ .btn {
position: relative; transition: .2s ease; cursor: pointer; &:focus, &:active:focus, &.active:focus { outline: 0 none; box-shadow: none; }
}
/* Button Content ————————————*/ .u-btn-content {
white-space: normal;
}
/* Buttons Only Icon (O) ————————————*/ .u-btn-only-icon {
position: relative; i { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
}
/* Button Sizes ————————————*/ // // e.g. @include g-button-size ($padding-y, $padding-x, $font-size); //
/* Extra Small */ .btn-xs {
@include u-button-size (2px, 7px, 11px);
}
/* Medium */ .btn-md {
@include u-button-size (8px, 20px, 15px);
}
/* Extra Large */ .btn-xl {
@include u-button-size (13px, 26px, 18px);
}
/* Extramly Large */ .btn-xxl {
@include u-button-size (15px, 30px, 21px);
}
/* Button Types ————————————*/ // Inset @import “inset/button-inset”;
// Button 3d @import “3d/button-3d”;
// Button 3d @import “skew/button-skew”;
/* Button Hovers ————————————*/
- class*=“u-btn-hover”
-
{
z-index: 1; &:hover { text-decoration: none; } &:focus { text-decoration: none; } &::after { position: absolute; content: ""; z-index: -1; transition: all .3s; }
}
// Hover v1-1 @import “hovers/button-hover-v1-1”;
// Hover v1-2 @import “hovers/button-hover-v1-2”;
// Hover v1-3 @import “hovers/button-hover-v1-3”;
// Hover v1-4 @import “hovers/button-hover-v1-4”;
// Hover v2-1 @import “hovers/button-hover-v2-1”;
// Hover v2-2 @import “hovers/button-hover-v2-2”;
/* Flat Buttons ————————————*/ @import “flat/button-flat”;
/* Outline Buttons ————————————*/ @import “outline/button-outline”;
/* Gradient Buttons ————————————*/ @import “gradient/button-gradients”;
/* Gradient Outline Buttons ————————————*/ @import “gradient-ouline/button-ouline-gradients”;