Contents

@import "./button_mixins";
@import "../tokens/colors";

$pb_button_sizes: (
  "sm":   0.75rem,
  "md":   0.875rem,
  "lg":   1.125rem,
);

[class*=pb_button_kit]{
  @include pb_button;
  // Size =================
  @each $name, $size in $pb_button_sizes {
    &[class*=size_#{$name}] {
      font-size: $size;
      padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
      @if $name == "sm" {
        min-height: 0;
      }
    }
  }

  // Variants =================
  &[class*=_primary]  {
    @include pb_button_primary;
  }
  &[class*=_secondary]  {
    @include pb_button_secondary;
  }
  &[class*=_link]  {
    @include pb_button_link;
    @media (hover:hover) {
      &:hover {
        @include pb_button_hover(mix($primary_action, $white, 3%));
      }
    } 
  }

  // Disabled =================
  &[class*=_disabled]  {
    @include pb_button_disabled;
  }

  // Block ====================
  &[class*=_block]  {
    @include pb_button_block;
  }

  // Loading ==================
  &[class*=_loading]  {
    @include pb_button_loading(true);
  }
  // Dark Variants =============
  &.dark  {
    &[class*=_primary]  {
      @include pb_button_primary_dark;
    }
    &[class*=_secondary]  {
      @include pb_button_secondary_dark;
    }
    &[class*=_link]  {
      @include pb_button_link_dark;
    }
    &[class*=_disabled]  {
      @include pb_button_disabled_dark;
    }
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
playbook_ui-11.13.0.pre.alpha.fileupload1	app/pb_kits/playbook/pb_button/_button.scss
playbook_ui-11.12.0	app/pb_kits/playbook/pb_button/_button.scss