103 lines
2.9 KiB
Sass
103 lines
2.9 KiB
Sass
// Button variants
|
|
//
|
|
// Easily pump out default styles, as well as :hover, :focus, :active,
|
|
// and disabled options for all buttons
|
|
|
|
=button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%))
|
|
color: color-yiq($background)
|
|
|
|
+gradient-bg($background)
|
|
|
|
border-color: $border
|
|
|
|
+box-shadow($btn-box-shadow)
|
|
|
|
+hover
|
|
color: color-yiq($hover-background)
|
|
|
|
+gradient-bg($hover-background)
|
|
|
|
border-color: $hover-border
|
|
|
|
|
|
&:focus,
|
|
&.focus
|
|
// Avoid using mixin so we can pass custom focus shadow properly
|
|
@if $enable-shadows
|
|
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, 0.5)
|
|
@else
|
|
box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5)
|
|
|
|
// Disabled comes first so active can properly restyle
|
|
&.disabled,
|
|
&:disabled
|
|
color: color-yiq($background)
|
|
background-color: $background
|
|
border-color: $border
|
|
|
|
&:not(:disabled):not(.disabled):active,
|
|
&:not(:disabled):not(.disabled).active,
|
|
.show > &.dropdown-toggle
|
|
color: color-yiq($active-background)
|
|
background-color: $active-background
|
|
|
|
@if $enable-gradients
|
|
background-image: none
|
|
|
|
// Remove the gradient for the pressed/active state
|
|
|
|
border-color: $active-border
|
|
|
|
&:focus
|
|
// Avoid using mixin so we can pass custom focus shadow properly
|
|
@if $enable-shadows
|
|
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, 0.5)
|
|
@else
|
|
box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5)
|
|
|
|
=button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color)
|
|
color: $color
|
|
background-color: transparent
|
|
background-image: none
|
|
border-color: $color
|
|
|
|
&:hover
|
|
color: $color-hover
|
|
background-color: $active-background
|
|
border-color: $active-border
|
|
|
|
&:focus,
|
|
&.focus
|
|
box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5)
|
|
|
|
&.disabled,
|
|
&:disabled
|
|
color: $color
|
|
background-color: transparent
|
|
|
|
&:not(:disabled):not(.disabled):active,
|
|
&:not(:disabled):not(.disabled).active,
|
|
.show > &.dropdown-toggle
|
|
color: color-yiq($active-background)
|
|
background-color: $active-background
|
|
border-color: $active-border
|
|
|
|
&:focus
|
|
// Avoid using mixin so we can pass custom focus shadow properly
|
|
@if $enable-shadows and $btn-active-box-shadow != none
|
|
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, 0.5)
|
|
@else
|
|
box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5)
|
|
|
|
// Button sizes
|
|
=button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius)
|
|
padding: $padding-y $padding-x
|
|
font-size: $font-size
|
|
line-height: $line-height
|
|
|
|
// Manually declare to provide an override to the browser default
|
|
@if $enable-rounded
|
|
border-radius: $border-radius
|
|
@else
|
|
border-radius: 0
|