package.scss.mixins._buttons.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of boosted Show documentation
Orange Boosted with Bootstrap is a Bootstrap based, Orange branded accessible and ergonomic components library.
The newest version!
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
//

// scss-docs-start btn-variant-mixin
@mixin button-variant(
  $background,
  $border,
  $color, // Boosted mod
  $hover-background: $btn-default-hover-bg, // Boosted mod
  $hover-border: $btn-default-hover-border, // Boosted mod
  $hover-color: $btn-default-hover-color, // Boosted mod
  $active-background: $btn-default-active-bg, // Boosted mod
  $active-border: $btn-default-active-border, // Boosted mod
  $active-color: $btn-default-active-color, // Boosted mod
  $disabled-background: $btn-default-disabled-bg, // Boosted mod
  $disabled-border: $btn-default-disabled-border, // Boosted mod
  $disabled-color: $btn-default-disabled-color, // Boosted mod
) {
  --#{$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: #{$white}; // Boosted mod
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  // Boosted mod: no definition of --#{$prefix}btn-active-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: $btn-outline-default-hover-color, // Boosted mod: instead of `color-contrast($color)`
  $active-background: $btn-outline-default-active-bg, // Boosted mod: instead of `$color`
  $active-border: $btn-outline-default-active-border, // Boosted mod: instead of `$color`
  $active-color: $btn-outline-default-active-color, // Booted mod: `color-contrast($active-background)`
  $hover-background: $btn-outline-default-hover-bg, // Boosted mod
  $hover-border: $btn-outline-default-hover-border // Boosted mod
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$hover-background}; // Boosted mod: instead of using `#{$active-background}`
  --#{$prefix}btn-hover-border-color: #{$hover-border}; // Boosted mod: instead of using `#{$active-border}`
  --#{$prefix}btn-focus-shadow-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: #{$btn-outline-default-disabled-color};
  --#{$prefix}btn-disabled-bg: #{$btn-outline-default-disabled-bg};
  --#{$prefix}btn-disabled-border-color: #{$btn-outline-default-disabled-border};
  --#{$prefix}gradient: none;
}
// scss-docs-end btn-outline-variant-mixin

// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius, $line-height: null, $icon-spacing: $btn-icon-padding-x, $letter-spacing: $letter-spacing-base) {
  --#{$prefix}icon-spacing: #{$icon-spacing}; // Boosted mod: used for icons
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-line-height: #{$line-height}; // Boosted mod
  --#{$prefix}btn-letter-spacing: #{$letter-spacing}; // Boosted mod
  --#{$prefix}btn-border-radius: #{$border-radius};
}
// scss-docs-end btn-size-mixin

// Boosted mod: embed an icon as mask-image in a button
// scss-docs-start btn-icon
@mixin button-icon(
  $icon,
  $width: $spacer,
  $height: $width,
  $size: $width $height,
  $pseudo: "before",
  $selector: &,
  $position: 50%
) {
  min-width: $width;
  min-height: $height;

  @at-root #{$selector} {
    &::#{$pseudo} {
      display: block;
      min-width: inherit;
      min-height: inherit;
      content: "";
      background-color: currentcolor;
      mask: #{$icon} no-repeat #{$position} / #{$size};
    }
  }
}
// scss-docs-end btn-icon