2 @mixin generate-button-colors($textColor, $backgroundColor) {
3 background-color: $backgroundColor;
6 background-color: lighten($backgroundColor, 8%);
12 background-color: darken($backgroundColor, 8%);
15 background-color: lighten($backgroundColor, 4%);
16 box-shadow: $bs-light;
17 text-decoration: none;
22 // Button Specific Variables
23 $button-border-radius: 2px;
26 text-decoration: none;
30 margin: $-xs $-xs $-xs 0;
31 display: inline-block;
36 border-radius: $button-border-radius;
38 transition: all ease-in-out 120ms;
39 box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.21);
40 @include generate-button-colors(#EEE, $primary);
43 .button, input[type="button"], input[type="submit"] {
46 @include generate-button-colors(#EEE, $positive);
49 @include generate-button-colors(#EEE, $negative);
52 @include generate-button-colors(#EEE, $secondary);
55 @include generate-button-colors(#EEE, #888);
61 background-color: transparent;
75 .button, button[type="button"] {
76 margin: $-xs 0 $-xs 0;
80 border-radius: $button-border-radius 0 0 $button-border-radius;
83 border-radius: 0 $button-border-radius $button-border-radius 0;