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;
35 border-radius: $button-border-radius;
37 transition: all ease-in-out 120ms;
38 box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.21);
39 @include generate-button-colors(#EEE, $primary);
42 .button, input[type="button"], input[type="submit"] {
45 @include generate-button-colors(#EEE, $positive);
48 @include generate-button-colors(#EEE, $negative);
51 @include generate-button-colors(#EEE, $secondary);
54 @include generate-button-colors(#EEE, #888);
57 @include generate-button-colors(#666, #e4e4e4);
63 background-color: transparent;
72 text-decoration: none;
81 .button, button[type="button"] {
82 margin: $-xs 0 $-xs 0;
86 border-radius: $button-border-radius 0 0 $button-border-radius;
89 border-radius: 0 $button-border-radius $button-border-radius 0;
111 display: inline-block;
118 padding-bottom: $-s - 2px;
119 padding-left: $-m*2 + 24px;
123 background-color: #BBB;
126 background-color: #BBB;