|
|
@@ -1,5 +1,64 @@
|
|
|
$theme-colors: map-merge($theme-colors, $colors);
|
|
|
|
|
|
+@mixin button-svg-icon-variant($background, $hover-background: darken($background, 7.5%), $active-background: darken($background, 10%)) {
|
|
|
+ svg {
|
|
|
+ fill: color-yiq($background);
|
|
|
+ }
|
|
|
+
|
|
|
+ @include hover() {
|
|
|
+ svg {
|
|
|
+ fill: color-yiq($hover-background);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:focus,
|
|
|
+ &.focus {
|
|
|
+ svg {
|
|
|
+ fill: color-yiq($hover-background);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Disabled comes first so active can properly restyle
|
|
|
+ &.disabled,
|
|
|
+ &:disabled {
|
|
|
+ svg {
|
|
|
+ color: color-yiq($background);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:not(:disabled):not(.disabled):active,
|
|
|
+ &:not(:disabled):not(.disabled).active,
|
|
|
+ .show > &.dropdown-toggle {
|
|
|
+ svg {
|
|
|
+ color: color-yiq($active-background);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@mixin button-outline-svg-icon-variant($value, $color-hover: $value) {
|
|
|
+ svg {
|
|
|
+ fill: $value;
|
|
|
+ }
|
|
|
+ @include hover() {
|
|
|
+ svg {
|
|
|
+ fill: $value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.disabled,
|
|
|
+ &:disabled {
|
|
|
+ svg {
|
|
|
+ fill: $value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:not(:disabled):not(.disabled):active,
|
|
|
+ &:not(:disabled):not(.disabled).active,
|
|
|
+ .show > &.dropdown-toggle {
|
|
|
+ svg {
|
|
|
+ fill: $value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
@each $color, $value in $theme-colors {
|
|
|
@include bg-variant('.bg-#{$color}', $value);
|
|
|
}
|
|
|
@@ -17,11 +76,14 @@ $theme-colors: map-merge($theme-colors, $colors);
|
|
|
@each $color, $value in $theme-colors {
|
|
|
.btn-#{$color} {
|
|
|
@include button-variant($value, $value);
|
|
|
+ @include button-svg-icon-variant($value, $value);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@each $color, $value in $theme-colors {
|
|
|
.btn-outline-#{$color} {
|
|
|
@include button-outline-variant($value, $color-hover: $value, $active-background: rgba($value, 0.1), $active-border: $value);
|
|
|
+ @include button-outline-svg-icon-variant($value, $color-hover: $value);
|
|
|
&:not(:disabled):not(.disabled):active,
|
|
|
&:not(:disabled):not(.disabled).active,
|
|
|
.show > &.dropdown-toggle {
|