1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- // Button variants
- //
- // Easily pump out default styles, as well as :hover, :focus, :active,
- // and disabled options for all buttons
- @mixin button-variant($color, $background, $border) {
- color: $color;
- background-color: $background;
- border-color: $border;
- &:focus,
- &.focus {
- color: $color;
- background-color: darken($background, 10%);
- border-color: darken($border, 25%);
- }
- &:hover {
- color: $color;
- background-color: darken($background, 10%);
- border-color: darken($border, 12%);
- }
- &:active,
- &.active,
- .open > &.dropdown-toggle {
- color: $color;
- background-color: darken($background, 10%);
- border-color: darken($border, 12%);
- &:hover,
- &:focus,
- &.focus {
- color: $color;
- background-color: darken($background, 17%);
- border-color: darken($border, 25%);
- }
- }
- &:active,
- &.active,
- .open > &.dropdown-toggle {
- background-image: none;
- }
- &.disabled,
- &[disabled],
- fieldset[disabled] & {
- &,
- &:hover,
- &:focus,
- &.focus,
- &:active,
- &.active {
- background-color: $background;
- border-color: $border;
- }
- }
- .badge {
- color: $background;
- background-color: $color;
- }
- }
- // Button sizes
- @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
- padding: $padding-vertical $padding-horizontal;
- font-size: $font-size;
- line-height: $line-height;
- border-radius: $border-radius;
- }
|