// // Button Flat Type //
// e.g. @include u-button-flat ($g-color-primary, $g-color-white, $g-color-black); @mixin u-button-flat ($color-bg-brd, $color-text, $color-text-hover) {
color: $color-text; background-color: $color-bg-brd; &:hover, &.active { border-color: lighten($color-bg-brd, 10%); background-color: lighten($color-bg-brd, 10%); } &:hover, &:focus, &.active { color: $color-text-hover; } // Test from Oleg &.g-btn-hover-reset { &:hover, &.active { background-color: $color-bg-brd; border-color: $color-bg-brd; } }
}
// // Button Outline Type //
// e.g. @include u-hover-btn-v1-1 ($g-color-primary, $g-color-white); @mixin u-button-outline ($color-bg-brd, $color-text, $color-text-hover) {
color: $color-text; border-color: $color-bg-brd; background-color: transparent; &:focus, &.active { color: $color-text-hover; background-color: $color-bg-brd; } &:hover { color: $color-text-hover; background-color: $color-bg-brd }
}
// // Button Gradient Type //
// e.g. @include u-button-gradient ($g-color-primary, $g-color-red); @mixin u-button-gradient ($btn-left, $btn-right){
color: $g-color-white; background: linear-gradient(to right, $btn-left 0%, $btn-right 100%) !important; border-image: linear-gradient(to right, $btn-left 0%, $btn-right 100%); border-image-slice: 1; &:hover, &:focus, &.active { opacity: .9; color: $g-color-white; }
}
// // Button Gradient Outline Type //
// e.g. @include u-button-outline-gradient ($g-color-primary, $g-color-red); @mixin u-button-outline-gradient ($btn-left, $btn-right){
color: $g-color-gray-dark-v3; background: transparent; border-image: linear-gradient(to right, $btn-left 0%, $btn-right 100%); border-image-slice: 1; &:hover, &:focus, &.active { background: linear-gradient(to right, $btn-left 0%, $btn-right 100%); color: $g-color-white; }
}