|
@@ -1 +1,50 @@
|
|
|
@import '~bootstrap/scss/mixins';
|
|
|
+
|
|
|
+
|
|
|
+@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%)
|
|
|
+) {
|
|
|
+ color: color-yiq($background);
|
|
|
+ @include gradient-bg($background);
|
|
|
+ border-color: $border;
|
|
|
+ @include box-shadow($btn-box-shadow);
|
|
|
+
|
|
|
+ @include hover() {
|
|
|
+ color: color-yiq($hover-background);
|
|
|
+ @include gradient-bg($hover-background);
|
|
|
+ border-color: $hover-border;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:focus,
|
|
|
+ &.focus {
|
|
|
+ color: color-yiq($hover-background);
|
|
|
+ @include gradient-bg($hover-background);
|
|
|
+ border-color: $hover-border;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 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;
|
|
|
+ border-color: $active-border;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: $hover-border;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|