// Main button style generator mixin
// scss-docs-start btn-variant-mixin
-<<<<<<< HEAD
-// @mixin button-variant(
-// $background,
-// $border,
-// $color: color-contrast($background),
-// $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
-// $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
-// $hover-color: color-contrast($hover-background),
-// $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
-// $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
-// $active-color: color-contrast($active-background),
-// $disabled-background: $background,
-// $disabled-border: $border,
-// $disabled-color: color-contrast($disabled-background)
-// ) {
-// --#{$prefix}btn-color: #{$color};
-// --#{$prefix}btn-bg: #{$background};
-// --#{$prefix}btn-border-color: #{$border};
-// --#{$prefix}btn-hover-color: #{$hover-color};
-// --#{$prefix}btn-hover-bg: #{$hover-background};
-// --#{$prefix}btn-hover-border-color: #{$hover-border};
-// // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
-// --#{$prefix}btn-active-color: #{$active-color};
-// --#{$prefix}btn-active-bg: #{$active-background};
-// --#{$prefix}btn-active-border-color: #{$active-border};
-// --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-// --#{$prefix}btn-disabled-color: #{$disabled-color};
-// --#{$prefix}btn-disabled-bg: #{$disabled-background};
-// --#{$prefix}btn-disabled-border-color: #{$disabled-border};
-// }
-// scss-docs-end btn-variant-mixin
-
-// scss-docs-start btn-outline-variant-mixin
-// @mixin button-outline-variant(
-// $color,
-// $color-hover: color-contrast($color),
-// $active-background: $color,
-// $active-border: $color,
-// $active-color: color-contrast($active-background)
-// ) {
-// --#{$prefix}btn-color: #{$color};
-// --#{$prefix}btn-border-color: #{$color};
-// --#{$prefix}btn-hover-color: #{$color-hover};
-// --#{$prefix}btn-hover-bg: #{$active-background};
-// --#{$prefix}btn-hover-border-color: #{$active-border};
-// --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
-// --#{$prefix}btn-active-color: #{$active-color};
-// --#{$prefix}btn-active-bg: #{$active-background};
-// --#{$prefix}btn-active-border-color: #{$active-border};
-// --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-// --#{$prefix}btn-disabled-color: #{$color};
-// --#{$prefix}btn-disabled-bg: transparent;
-// --#{$prefix}btn-disabled-border-color: #{$color};
-// --#{$prefix}gradient: none;
-// }
-// scss-docs-end btn-outline-variant-mixin
-=======
@mixin button-variant($color, $variant) {
$variant-styles: map.get($button-variants, $variant);
}
}
}
->>>>>>> f87a3a593 (redo buttons)
// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
//
// scss-docs-start btn-variant-loops
-<<<<<<< HEAD
- // @each $color, $value in $new-theme-colors {
- // .btn-#{$color} {
- // @if $color == "light" {
- // @include button-variant(
- // $value,
- // $value,
- // $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
- // $hover-border: shade-color($value, $btn-hover-border-shade-amount),
- // $active-background: shade-color($value, $btn-active-bg-shade-amount),
- // $active-border: shade-color($value, $btn-active-border-shade-amount)
- // );
- // } @else if $color == "dark" {
- // @include button-variant(
- // $value,
- // $value,
- // $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
- // $hover-border: tint-color($value, $btn-hover-border-tint-amount),
- // $active-background: tint-color($value, $btn-active-bg-tint-amount),
- // $active-border: tint-color($value, $btn-active-border-tint-amount)
- // );
- // } @else {
- // @include button-variant($value, $value);
- // }
- // }
- // }
-
- // @each $color, $value in $new-theme-colors {
- // .btn-outline-#{$color} {
- // @include button-outline-variant($value);
- // }
- // }
-=======
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($color, "solid");
@include button-variant($color, "outline");
}
}
->>>>>>> f87a3a593 (redo buttons)
// scss-docs-end btn-variant-loops