585 lines
20 KiB
SCSS
585 lines
20 KiB
SCSS
/* ==============
|
|
Buttons
|
|
===================*/
|
|
|
|
.btn {
|
|
border-radius: 3px;
|
|
font-family: $font-primary;
|
|
font-size: $base-font;
|
|
line-height: 24px;
|
|
&:focus{
|
|
box-shadow: 0 0 0 0.2rem $gray-200;
|
|
}
|
|
}
|
|
.animation-btn,
|
|
.button-list,
|
|
.button-items {
|
|
margin-bottom: -8px;
|
|
|
|
.btn {
|
|
margin-bottom: 8px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
.btn-round {
|
|
border-radius: 30px;
|
|
}
|
|
|
|
|
|
.btn-primary, .btn-success,.btn-secondary, .btn-info, .btn-warning,
|
|
.btn-danger, .btn-dark,.btn-pink,.btn-purple{
|
|
color: $white;
|
|
}
|
|
|
|
/*btn-primary*/
|
|
|
|
.btn-primary{
|
|
background-color: $primary;
|
|
border: 1px solid $primary;
|
|
box-shadow: 0 2px 6px 0 rgba($primary,.5);
|
|
}
|
|
.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover,
|
|
.open > .dropdown-toggle.btn-primary,.btn-outline-primary.active, .btn-outline-primary:active,
|
|
.show>.btn-outline-primary.dropdown-toggle,.btn-outline-primary:hover,.btn-primary.active,.btn-primary:not(:disabled):not(.disabled):active,
|
|
.btn-primary:active, .show>.btn-primary.dropdown-toggle,
|
|
a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
|
|
background-color: darken($primary, 5%) !important;
|
|
border: 1px solid darken($primary, 5%);
|
|
}
|
|
.btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus,
|
|
.btn-primary.focus, .btn-primary:focus,.btn-outline-primary.focus, .btn-outline-primary:focus {
|
|
-webkit-box-shadow: 0 0 0 2px rgba($primary,.3);
|
|
box-shadow: 0 0 0 2px rgba($primary,.3);
|
|
}
|
|
|
|
/*btn-success*/
|
|
|
|
.btn-success {
|
|
background-color: $success;
|
|
border: 1px solid $success;
|
|
box-shadow: 0 2px 6px 0 rgba($success,.5);
|
|
}
|
|
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active,
|
|
.btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover,
|
|
.btn-success:not(:disabled):not(.disabled):active,
|
|
.open > .dropdown-toggle.btn-success,.btn-outline-success.active, .btn-outline-success:active,
|
|
.show>.btn-outline-success.dropdown-toggle,.btn-outline-success:hover,.btn-success.active,
|
|
.btn-success:active, .show>.btn-success.dropdown-toggle {
|
|
background-color: darken($success, 5%);
|
|
border: 1px solid darken($success, 5%);
|
|
}
|
|
.btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus,
|
|
.btn-success.focus, .btn-success:focus,.btn-outline-success.focus, .btn-outline-success:focus {
|
|
-webkit-box-shadow: 0 0 0 2px rgba($success,.3);
|
|
box-shadow: 0 0 0 2px rgba($success,.3);
|
|
}
|
|
|
|
/*btn-secondary*/
|
|
|
|
.btn-secondary {
|
|
background-color: $secondary;
|
|
border: 1px solid $secondary;
|
|
box-shadow: 0 2px 6px 0 rgba($secondary,.5);
|
|
}
|
|
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active,
|
|
.btn-secondary.focus, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover,
|
|
.btn-secondary:not(:disabled):not(.disabled):active,
|
|
.open > .dropdown-toggle.btn-secondary,.btn-outline-secondary.active, .btn-outline-secondary:active,
|
|
.show>.btn-outline-secondary.dropdown-toggle,.btn-outline-secondary:hover,.btn-secondary.active,
|
|
.btn-secondary:active, .show>.btn-secondary.dropdown-toggle {
|
|
background-color: darken($secondary, 5%);
|
|
border: 1px solid darken($secondary, 5%);
|
|
}
|
|
.btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus,
|
|
.btn-secondary.focus, .btn-secondary:focus,.btn-outline-secondary.focus, .btn-outline-secondary:focus {
|
|
-webkit-box-shadow: 0 0 0 2px rgba($secondary,.3);
|
|
box-shadow: 0 0 0 2px rgba($secondary,.3);
|
|
}
|
|
|
|
/*btn-info*/
|
|
|
|
.btn-info {
|
|
background-color: $info;
|
|
border: 1px solid $info;
|
|
box-shadow: 0 2px 6px 0 rgba($info,.5);
|
|
}
|
|
.btn-info:not(:disabled):not(.disabled):active,
|
|
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.focus,
|
|
.btn-info:active, .btn-info:focus, .btn-info:hover, .open > .dropdown-toggle.btn-info,
|
|
.btn-outline-info.active, .btn-outline-info:active,.btn-info.disabled, .btn-info:disabled,
|
|
.show>.btn-outline-info.dropdown-toggle,.btn-outline-info:hover,.btn-info.active, .btn-info:active,
|
|
.show>.btn-info.dropdown-toggle{
|
|
background-color: darken($info, 5%);
|
|
border: 1px solid darken($info, 5%);
|
|
}
|
|
.btn-info:not(:disabled):not(.disabled):active:focus, .show>.btn-info.dropdown-toggle:focus,
|
|
.btn-info.focus, .btn-info:focus,.btn-outline-info.focus, .btn-outline-info:focus {
|
|
-webkit-box-shadow: 0 0 0 2px rgba($info,.3);
|
|
box-shadow: 0 0 0 2px rgba($info,.3);
|
|
}
|
|
|
|
/*btn-warning*/
|
|
|
|
.btn-warning {
|
|
background-color: $warning;
|
|
border: 1px solid $warning;
|
|
box-shadow: 0 2px 6px 0 rgba($warning,.5);
|
|
}
|
|
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active,
|
|
.btn-warning.focus, .btn-warning:active, .btn-warning:focus, .btn-warning:hover,
|
|
.open > .dropdown-toggle.btn-warning,.btn-outline-warning.active, .btn-outline-warning:active,
|
|
.show>.btn-outline-warning.dropdown-toggle,.btn-outline-warning:hover,.btn-warning.active,
|
|
.btn-warning:active, .show>.btn-warning.dropdown-toggle {
|
|
background-color: darken($warning, 5%);
|
|
border: 1px solid darken($warning, 5%);
|
|
}
|
|
.btn-warning:not(:disabled):not(.disabled):active:focus, .show>.btn-warning.dropdown-toggle:focus,
|
|
.btn-warning.focus, .btn-warning:focus,.btn-outline-warning.focus, .btn-outline-warning:focus {
|
|
-webkit-box-shadow: 0 0 0 2px rgba($warning,.3);
|
|
box-shadow: 0 0 0 2px rgba($warning,.3);
|
|
}
|
|
|
|
/*btn-danger*/
|
|
|
|
.btn-danger {
|
|
background-color: $danger;
|
|
border: 1px solid $danger;
|
|
box-shadow: 0 2px 6px 0 rgba($danger,.5);
|
|
}
|
|
.btn-danger:not(:disabled):not(.disabled):active,
|
|
.btn-danger:active, .btn-danger:focus, .btn-danger:hover, .btn-danger.active,
|
|
.btn-danger.focus, .btn-danger:active, .btn-danger:focus, .btn-danger:hover,
|
|
.open > .dropdown-toggle.btn-danger,.btn-outline-danger.active, .btn-outline-danger:active,
|
|
.show>.btn-outline-danger.dropdown-toggle,.btn-outline-danger:hover,.btn-danger.active,
|
|
.btn-danger:active, .show>.btn-danger.dropdown-toggle {
|
|
background-color: darken($danger, 5%);
|
|
border: 1px solid darken($danger, 5%);
|
|
}
|
|
|
|
.btn-danger.focus, .btn-danger:focus,.btn-outline-danger.focus, .btn-outline-danger:focus {
|
|
-webkit-box-shadow: 0 0 0 2px rgba($danger,.3);
|
|
box-shadow: 0 0 0 2px rgba($danger,.3);
|
|
}
|
|
|
|
|
|
/*btn-light*/
|
|
.btn-light {
|
|
color: $gray-700;
|
|
background-color: $light;
|
|
border: 1px solid $gray-300;
|
|
box-shadow: 0 2px 6px 0 rgba($light,.9);
|
|
}
|
|
.btn-light:active, .btn-light:focus, .btn-light:hover, .btn-light.active,
|
|
.btn-light.focus, .btn-light:active, .btn-light:focus, .btn-light:hover,
|
|
.open > .dropdown-toggle.btn-light,.btn-outline-light.active, .btn-outline-light:active,
|
|
.show>.btn-outline-light.dropdown-toggle,.btn-outline-light:hover,.btn-light.active,
|
|
.btn-light:active, .show>.btn-light.dropdown-toggle {
|
|
background-color: darken($light, 5%);
|
|
border: 1px solid darken($light, 5%);
|
|
}
|
|
|
|
.btn-light.focus, .btn-light:focus,.btn-outline-light.focus, .btn-outline-light:focus {
|
|
-webkit-box-shadow: 0 0 0 2px rgba($light,.3);
|
|
box-shadow: 0 0 0 2px rgba($light,.3);
|
|
}
|
|
|
|
/*btn-dark*/
|
|
|
|
.btn-dark {
|
|
background-color: $dark;
|
|
border: 1px solid $dark;
|
|
color: $white;
|
|
box-shadow: 0 2px 6px 0 rgba($dark,.5);
|
|
}
|
|
.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .btn-dark.focus,
|
|
.btn-dark:active, .btn-dark:focus, .btn-dark:hover, .open > .dropdown-toggle.btn-dark,
|
|
.btn-outline-dark.active, .btn-outline-dark:active,
|
|
.show>.btn-outline-dark.dropdown-toggle,.btn-outline-dark:hover{
|
|
background-color: darken($dark, 5%);
|
|
border: 1px solid darken($dark, 5%);
|
|
color: $white;
|
|
}
|
|
.btn-dark.focus, .btn-dark:focus,.btn-outline-dark.focus, .btn-outline-dark:focus {
|
|
-webkit-box-shadow: 0 0 0 2px rgba($dark,.3);
|
|
box-shadow: 0 0 0 2px rgba($dark,.3);
|
|
}
|
|
|
|
/*btn-link*/
|
|
|
|
.btn-link {
|
|
color: $gray-400;
|
|
}
|
|
|
|
.btn-link:hover,
|
|
.btn-link:focus,
|
|
.btn-link:active {
|
|
text-decoration: none;
|
|
color: lighten($gray-400, 10%);
|
|
}
|
|
|
|
|
|
/*btn-pink*/
|
|
|
|
.btn-pink {
|
|
background-color: $pink;
|
|
border: 1px solid $pink;
|
|
color: $white;
|
|
box-shadow: 0 2px 6px 0 rgba($pink,.5);
|
|
}
|
|
.btn-pink:hover, .btn-pink:focus, .btn-pink:active, .btn-pink.active, .btn-pink.focus,
|
|
.btn-pink:active, .btn-pink:focus, .btn-pink:hover, .open > .dropdown-toggle.btn-pink,
|
|
.btn-outline-pink.active, .btn-outline-pink:active,
|
|
.show>.btn-outline-pink.dropdown-toggle,.btn-outline-pink:hover{
|
|
background-color: darken($pink, 5%);
|
|
border: 1px solid darken($pink, 5%);
|
|
color: $white;
|
|
}
|
|
.btn-pink.focus, .btn-pink:focus,.btn-outline-pink.focus, .btn-outline-pink:focus {
|
|
-webkit-box-shadow: 0 0 0 2px rgba($pink,.3);
|
|
box-shadow: 0 0 0 2px rgba($pink,.3);
|
|
}
|
|
|
|
/*btn-purple*/
|
|
|
|
.btn-purple {
|
|
background-color: $purple;
|
|
border: 1px solid $purple;
|
|
color: $white;
|
|
box-shadow: 0 2px 6px 0 rgba($purple,.5);
|
|
}
|
|
.btn-purple:hover, .btn-purple:focus, .btn-purple:active, .btn-purple.active, .btn-purple.focus,
|
|
.btn-purple:active, .btn-purple:focus, .btn-purple:hover, .open > .dropdown-toggle.btn-purple,
|
|
.btn-outline-purple.active, .btn-outline-purple:active,
|
|
.show>.btn-outline-purple.dropdown-toggle,.btn-outline-purple:hover{
|
|
background-color: darken($purple, 5%);
|
|
border: 1px solid darken($purple, 5%);
|
|
color: $white;
|
|
}
|
|
.btn-purple.focus, .btn-purple:focus,.btn-outline-purple.focus, .btn-outline-purple:focus {
|
|
-webkit-box-shadow: 0 0 0 2px rgba($purple,.3);
|
|
box-shadow: 0 0 0 2px rgba($purple,.3);
|
|
}
|
|
|
|
|
|
.btn-light {
|
|
box-shadow: 0 2px 6px 0 rgba($light,.5);
|
|
border-color: darken($light, 2%);
|
|
}
|
|
|
|
.btn-link {
|
|
color: $gray-300;
|
|
|
|
&:hover {
|
|
color: lighten($gray-300, 3%);
|
|
}
|
|
}
|
|
|
|
/* button Outline */
|
|
.btn-outline-primary {
|
|
color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
.btn-outline-success {
|
|
color: $success;
|
|
border-color: $success;
|
|
}
|
|
.btn-outline-info {
|
|
color: $info;
|
|
border-color: $info;
|
|
}
|
|
.btn-outline-warning {
|
|
color: $warning;
|
|
border-color: $warning;
|
|
}
|
|
.btn-outline-danger {
|
|
color: $danger;
|
|
border-color: $danger;
|
|
}
|
|
.btn-outline-pink {
|
|
color: $pink;
|
|
border-color: $pink;
|
|
background-color: transparent;
|
|
background-image:none;
|
|
}
|
|
.btn-outline-purple {
|
|
color: $purple;
|
|
border-color: $purple;
|
|
background-color: transparent;
|
|
background-image:none;
|
|
}
|
|
.btn-outline-dark {
|
|
color: $dark;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
border-color: $dark;
|
|
}
|
|
|
|
/* Social Buttons */
|
|
.btn-facebook {
|
|
color: $white !important;
|
|
background-color: #3b5998;
|
|
}
|
|
.btn-twitter {
|
|
color: $white !important;
|
|
background-color: #00aced;
|
|
}
|
|
.btn-linkedin {
|
|
color: $white !important;
|
|
background-color: #007bb6;
|
|
}
|
|
.btn-dribbble {
|
|
color: $white !important;
|
|
background-color: #ea4c89;
|
|
}
|
|
.btn-googleplus {
|
|
color: $white !important;
|
|
background-color: #dd4b39;
|
|
}
|
|
.btn-instagram {
|
|
color: $white !important;
|
|
background-color: #517fa4;
|
|
}
|
|
.btn-pinterest {
|
|
color: $white !important;
|
|
background-color: #cb2027;
|
|
}
|
|
.btn-dropbox {
|
|
color: $white !important;
|
|
background-color: #007ee5;
|
|
}
|
|
.btn-flickr {
|
|
color: $white !important;
|
|
background-color: #ff0084;
|
|
}
|
|
.btn-tumblr {
|
|
color: $white !important;
|
|
background-color: #32506d;
|
|
}
|
|
.btn-skype {
|
|
color: $white !important;
|
|
background-color: #00aff0;
|
|
}
|
|
.btn-youtube {
|
|
color: $white !important;
|
|
background-color: #bb0000;
|
|
}
|
|
.btn-github {
|
|
color: $white !important;
|
|
background-color: #171515;
|
|
}
|
|
|
|
/*btn-gradient-success*/
|
|
|
|
|
|
.btn-gradient-success{
|
|
background-image: linear-gradient(120deg, $success 0%, #00c4b5 100%);
|
|
color:$white;
|
|
box-shadow: 0 2px 6px 0 rgba($success,.5);
|
|
border: 1px solid darken($success, 5%);
|
|
}
|
|
.btn-gradient-success:hover, .btn-gradient-success:focus, .btn-gradient-success:active, .btn-gradient-success.active,
|
|
.btn-gradient-success.focus, .btn-gradient-success:active, .btn-gradient-success:focus, .btn-gradient-success:hover,
|
|
.open > .dropdown-toggle.btn-gradient-success,.btn-gradient-success.active,
|
|
.btn-gradient-success:active, .show>.btn-gradient-success.dropdown-toggle {
|
|
background-image: linear-gradient(120deg, #00c4b5 0%,$success 100%);
|
|
border: 1px solid darken($success, 5%);
|
|
}
|
|
.btn-gradient-success:not(:disabled):not(.disabled):active:focus, .show>.btn-gradient-success.dropdown-toggle:focus,
|
|
.btn-gradient-success.focus, .btn-gradient-success:focus{
|
|
-webkit-box-shadow: 0 0 0 2px rgba($success,.3);
|
|
box-shadow: 0 0 0 2px rgba($success,.3);
|
|
}
|
|
|
|
/*btn-gradient-secondary*/
|
|
|
|
.btn-gradient-secondary{
|
|
background-image: linear-gradient(120deg, $secondary 0%, #8898b3 100%);
|
|
color:$white;
|
|
box-shadow: 0 2px 6px 0 rgba($secondary,.5);
|
|
border: 1px solid lighten($secondary, 5%);
|
|
}
|
|
|
|
.btn-gradient-secondary:hover, .btn-gradient-secondary:focus, .btn-gradient-secondary:active, .btn-gradient-secondary.active,
|
|
.btn-gradient-secondary.focus, .btn-gradient-secondary:active, .btn-gradient-secondary:focus, .btn-gradient-secondary:hover,
|
|
.open > .dropdown-toggle.btn-gradient-secondary,.btn-gradient-secondary.active,
|
|
.btn-gradient-secondary:active, .show>.btn-gradient-secondary.dropdown-toggle {
|
|
background-image: linear-gradient(120deg, #8898b3 0%,$secondary 100%);
|
|
border: 1px solid darken($secondary, 5%);
|
|
color: $white;
|
|
}
|
|
.btn-gradient-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-gradient-secondary.dropdown-toggle:focus,
|
|
.btn-gradient-secondary.focus, .btn-gradient-secondary:focus{
|
|
-webkit-box-shadow: 0 0 0 2px rgba($secondary,.3);
|
|
box-shadow: 0 0 0 2px rgba($secondary,.3);
|
|
}
|
|
|
|
/*btn-gradient-danger*/
|
|
|
|
.btn-gradient-danger{
|
|
background-image: linear-gradient(120deg, $danger 0%, #f63f6a 100%);
|
|
color:$white;
|
|
box-shadow: 0 2px 6px 0 rgba($danger,.5);
|
|
border: 1px solid darken($danger, 5%);
|
|
}
|
|
.btn-gradient-danger:hover, .btn-gradient-danger:focus, .btn-gradient-danger:active, .btn-gradient-danger.active,
|
|
.btn-gradient-danger.focus, .btn-gradient-danger:active, .btn-gradient-danger:focus, .btn-gradient-danger:hover,
|
|
.open > .dropdown-toggle.btn-gradient-danger,.btn-gradient-danger.active,
|
|
.btn-gradient-danger:active, .show>.btn-gradient-danger.dropdown-toggle {
|
|
background-image: linear-gradient(120deg, #f63f6a 0%,$danger 100%);
|
|
border: 1px solid darken($danger, 5%);
|
|
}
|
|
.btn-gradient-danger:not(:disabled):not(.disabled):active:focus, .show>.btn-gradient-danger.dropdown-toggle:focus,
|
|
.btn-gradient-danger.focus, .btn-gradient-danger:focus{
|
|
-webkit-box-shadow: 0 0 0 2px rgba($danger,.3);
|
|
box-shadow: 0 0 0 2px rgba($danger,.3);
|
|
}
|
|
|
|
/*btn-gradient-warning*/
|
|
|
|
.btn-gradient-warning{
|
|
background-image: linear-gradient(120deg, $warning 0%, #f5604a 100%);
|
|
color:$white;
|
|
box-shadow: 0 2px 6px 0 rgba($warning,.5);
|
|
border: 1px solid darken($warning, 5%);
|
|
}
|
|
|
|
.btn-gradient-warning:hover, .btn-gradient-warning:focus, .btn-gradient-warning:active, .btn-gradient-warning.active,
|
|
.btn-gradient-warning.focus, .btn-gradient-warning:active, .btn-gradient-warning:focus, .btn-gradient-warning:hover,
|
|
.open > .dropdown-toggle.btn-gradient-warning,.btn-gradient-warning.active,
|
|
.btn-gradient-warning:active, .show>.btn-gradient-warning.dropdown-toggle {
|
|
background-image: linear-gradient(120deg, #f5604a 0%,$warning 100%);
|
|
border: 1px solid darken($warning, 5%);
|
|
}
|
|
.btn-gradient-warning:not(:disabled):not(.disabled):active:focus, .show>.btn-gradient-warning.dropdown-toggle:focus,
|
|
.btn-gradient-warning.focus, .btn-gradient-warning:focus{
|
|
-webkit-box-shadow: 0 0 0 2px rgba($warning,.3);
|
|
box-shadow: 0 0 0 2px rgba($warning,.3);
|
|
}
|
|
/*btn-gradient-info*/
|
|
|
|
.btn-gradient-info{
|
|
background-image: linear-gradient(120deg, $info 0%, #0c93fe 100%);
|
|
color:$white;
|
|
box-shadow: 0 2px 6px 0 rgba($info,.5);
|
|
border: 1px solid darken($info, 5%);
|
|
}
|
|
.btn-gradient-info:hover, .btn-gradient-info:focus, .btn-gradient-info:active, .btn-gradient-info.active,
|
|
.btn-gradient-info.focus, .btn-gradient-info:active, .btn-gradient-info:focus, .btn-gradient-info:hover,
|
|
.open > .dropdown-toggle.btn-gradient-info,.btn-gradient-info.active,
|
|
.btn-gradient-info:active, .show>.btn-gradient-info.dropdown-toggle {
|
|
background-image: linear-gradient(120deg, #0c93fe 0%,$info 100%);
|
|
border: 1px solid darken($info, 5%);
|
|
}
|
|
.btn-gradient-info:not(:disabled):not(.disabled):active:focus, .show>.btn-gradient-info.dropdown-toggle:focus,
|
|
.btn-gradient-info.focus, .btn-gradient-info:focus{
|
|
-webkit-box-shadow: 0 0 0 2px rgba($info,.3);
|
|
box-shadow: 0 0 0 2px rgba($info,.3);
|
|
}
|
|
/*btn-gradient-primary*/
|
|
|
|
.btn-gradient-primary{
|
|
background-image: linear-gradient(120deg, $primary 0%, #3c8da8 100%);
|
|
color:$white;
|
|
box-shadow: 0 2px 6px 0 rgba($primary,.5);
|
|
border: 1px solid lighten($primary, 15%);
|
|
}
|
|
.btn-gradient-primary:hover, .btn-gradient-primary:focus, .btn-gradient-primary:active, .btn-gradient-primary.active,
|
|
.btn-gradient-primary.focus, .btn-gradient-primary:active, .btn-gradient-primary:focus, .btn-gradient-primary:hover,
|
|
.open > .dropdown-toggle.btn-gradient-primary,.btn-gradient-primary.active,
|
|
.btn-gradient-primary:active, .show>.btn-gradient-primary.dropdown-toggle {
|
|
background-image: linear-gradient(120deg, #3c8da8 0%,$primary 100%);
|
|
border: 1px solid lighten($primary, 15%);
|
|
}
|
|
.btn-gradient-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-gradient-primary.dropdown-toggle:focus,
|
|
.btn-gradient-primary.focus, .btn-gradient-primary:focus{
|
|
-webkit-box-shadow: 0 0 0 2px rgba($primary,.3);
|
|
box-shadow: 0 0 0 2px rgba($primary,.3);
|
|
}
|
|
/*btn-gradient-dark*/
|
|
|
|
.btn-gradient-dark{
|
|
background-image: linear-gradient(120deg, $dark 0%, #5a6c82 100%);
|
|
color:$white;
|
|
box-shadow: 0 2px 6px 0 rgba($dark,.5);
|
|
border: 1px solid lighten($dark, 20%);
|
|
}
|
|
|
|
.btn-gradient-dark:hover, .btn-gradient-dark:focus, .btn-gradient-dark:active, .btn-gradient-dark.active,
|
|
.btn-gradient-dark.focus, .btn-gradient-dark:active, .btn-gradient-dark:focus, .btn-gradient-dark:hover,
|
|
.open > .dropdown-toggle.btn-gradient-dark,.btn-gradient-dark.active,
|
|
.btn-gradient-dark:active, .show>.btn-gradient-dark.dropdown-toggle {
|
|
background-image: linear-gradient(120deg, #5a6c82 0%,$dark 100%);
|
|
border: 1px solid lighten($dark, 20%);
|
|
}
|
|
.btn-gradient-dark:not(:disabled):not(.disabled):active:focus, .show>.btn-gradient-dark.dropdown-toggle:focus,
|
|
.btn-gradient-dark.focus, .btn-gradient-dark:focus{
|
|
-webkit-box-shadow: 0 0 0 2px rgba($dark,.3);
|
|
box-shadow: 0 0 0 2px rgba($dark,.3);
|
|
}
|
|
|
|
/*btn-gradient-light*/
|
|
|
|
.btn-gradient-light{
|
|
background-image: linear-gradient(120deg, $light 0%, #f7f9ff 100%);
|
|
color:$gray-800;
|
|
box-shadow: 0 2px 6px 0 rgba($light,.5);
|
|
border: 1px solid darken($light, 5%);
|
|
}
|
|
|
|
.btn-gradient-light:hover, .btn-gradient-light:focus, .btn-gradient-light:active, .btn-gradient-light.active,
|
|
.btn-gradient-light.focus, .btn-gradient-light:active, .btn-gradient-light:focus, .btn-gradient-light:hover,
|
|
.open > .dropdown-toggle.btn-gradient-light,.btn-gradient-light.active,
|
|
.btn-gradient-light:active, .show>.btn-gradient-light.dropdown-toggle {
|
|
background-image: linear-gradient(120deg, #f7f9ff 0%,$light 100%);
|
|
border: 1px solid darken($light, 5%);
|
|
}
|
|
.btn-gradient-light:not(:disabled):not(.disabled):active:focus, .show>.btn-gradient-light.dropdown-toggle:focus,
|
|
.btn-gradient-light.focus, .btn-gradient-light:focus{
|
|
-webkit-box-shadow: 0 0 0 2px rgba($light,.3);
|
|
box-shadow: 0 0 0 2px rgba($light,.3);
|
|
}
|
|
|
|
/*btn-gradient-pink*/
|
|
|
|
.btn-gradient-pink{
|
|
background-image: linear-gradient(120deg, $pink 0%, #f55654 100%);
|
|
color:$white;
|
|
box-shadow: 0 2px 6px 0 rgba($pink,.5);
|
|
border: 1px solid darken($pink, 5%);
|
|
}
|
|
.btn-gradient-pink:hover, .btn-gradient-pink:focus, .btn-gradient-pink:active, .btn-gradient-pink.active,
|
|
.btn-gradient-pink.focus, .btn-gradient-pink:active, .btn-gradient-pink:focus, .btn-gradient-pink:hover,
|
|
.open > .dropdown-toggle.btn-gradient-pink,.btn-gradient-pink.active,
|
|
.btn-gradient-pink:active, .show>.btn-gradient-pink.dropdown-toggle {
|
|
background-image: linear-gradient(120deg, #f55654 0%,$pink 100%);
|
|
border: 1px solid darken($pink, 5%);
|
|
}
|
|
.btn-gradient-pink:not(:disabled):not(.disabled):active:focus, .show>.btn-gradient-pink.dropdown-toggle:focus,
|
|
.btn-gradient-pink.focus, .btn-gradient-pink:focus{
|
|
-webkit-box-shadow: 0 0 0 2px rgba($pink,.3);
|
|
box-shadow: 0 0 0 2px rgba($pink,.3);
|
|
}
|
|
|
|
/*btn-gradient-purple*/
|
|
|
|
.btn-gradient-purple{
|
|
background-image: linear-gradient(120deg, $purple 0%, #a456ad 100%);
|
|
color:$white;
|
|
box-shadow: 0 2px 6px 0 rgba($purple,.5);
|
|
border: 1px solid lighten($purple, 5%);
|
|
}
|
|
|
|
.btn-gradient-purple:hover, .btn-gradient-purple:focus, .btn-gradient-purple:active, .btn-gradient-purple.active,
|
|
.btn-gradient-purple.focus, .btn-gradient-purple:active, .btn-gradient-purple:focus, .btn-gradient-purple:hover,
|
|
.open > .dropdown-toggle.btn-gradient-purple,.btn-gradient-purple.active,
|
|
.btn-gradient-purple:active, .show>.btn-gradient-purple.dropdown-toggle {
|
|
background-image: linear-gradient(120deg, #a456ad 0%,$purple 100%);
|
|
border: 1px solid darken($purple, 5%);
|
|
}
|
|
.btn-gradient-purple:not(:disabled):not(.disabled):active:focus, .show>.btn-gradient-purple.dropdown-toggle:focus,
|
|
.btn-gradient-purple.focus, .btn-gradient-purple:focus{
|
|
-webkit-box-shadow: 0 0 0 2px rgba($purple,.3);
|
|
box-shadow: 0 0 0 2px rgba($purple,.3);
|
|
} |