Sha256: 76ae63827b8a15c5b4b3a517a8751c9cb17787679b9695255d2afbd8ae41a9d1
Contents?: true
Size: 1.92 KB
Versions: 40
Compression:
Stored size: 1.92 KB
Contents
//
// 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;
}
}
Version data entries
40 entries across 40 versions & 1 rubygems