1// Excerpted from vendor/twbs/bootstrap/scss/mixins/_buttons.scss (button size code on lines 97-110 excluded) 2// /*! 3// * Bootstrap v4.1.3 (https://getbootstrap.com/) 4// * Copyright 2011-2018 The Bootstrap Authors 5// * Copyright 2011-2018 Twitter, Inc. 6// * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 7// */ 8@mixin 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%)) { 9 color: color-yiq($background); 10 @include gradient-bg($background); 11 border-color: $border; 12 @include box-shadow($btn-box-shadow); 13 14 @include hover { 15 color: color-yiq($hover-background); 16 @include gradient-bg($hover-background); 17 border-color: $hover-border; 18 } 19 20 &:focus, 21 &.focus { 22 color: color-yiq($hover-background); 23 @include gradient-bg($hover-background); 24 border-color: $hover-border; 25 // Avoid using mixin so we can pass custom focus shadow properly 26 @if $enable-shadows { 27 box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); 28 } @else { 29 box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); 30 } 31 } 32 33 // Disabled comes first so active can properly restyle 34 &.disabled, 35 &:disabled { 36 color: color-yiq($background); 37 background-color: $background; 38 border-color: $border; 39 } 40 41 &:not(:disabled):not(.disabled):active, 42 &:not(:disabled):not(.disabled).active, 43 .show > &.dropdown-toggle { 44 color: color-yiq($active-background); 45 background-color: $active-background; 46 @if $enable-gradients { 47 background-image: none; // Remove the gradient for the pressed/active state 48 } 49 border-color: $active-border; 50 51 &:focus { 52 // Avoid using mixin so we can pass custom focus shadow properly 53 @if $enable-shadows { 54 box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); 55 } @else { 56 box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); 57 } 58 } 59 } 60} 61 62@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { 63 color: $color; 64 background-color: transparent; 65 background-image: none; 66 border-color: $color; 67 68 &:hover { 69 color: $color-hover; 70 background-color: $active-background; 71 border-color: $active-border; 72 } 73 74 &:focus, 75 &.focus { 76 box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); 77 } 78 79 &.disabled, 80 &:disabled { 81 color: $color; 82 background-color: transparent; 83 } 84 85 &:not(:disabled):not(.disabled):active, 86 &:not(:disabled):not(.disabled).active, 87 .show > &.dropdown-toggle { 88 color: color-yiq($active-background); 89 background-color: $active-background; 90 border-color: $active-border; 91 92 &:focus { 93 // Avoid using mixin so we can pass custom focus shadow properly 94 @if $enable-shadows and $btn-active-box-shadow != none { 95 box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5); 96 } @else { 97 box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); 98 } 99 } 100 } 101} 102// From mixins/_buttons.scss end