Contents

@import "./button_mixins";
@import "../tokens/colors";
@import "../tokens/border_radius";
@import "../tokens/colors";
@import "../tokens/spacing";
@import "../tokens/typography";

$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;
  }
  &[class*=_reaction] {
    background-color: $card_light;
    min-width: 40px;
    border-radius: $border_radius_rounded;
    border: 1px solid $border_light;
    color: $text_lt_light;
    padding: ($space_xxs - 2) $space_xs;
    min-height: $space_md + 2;

    .icon_circle_emoji {
      height: $space_sm - 1;
    }
    &:hover {
      background-color: $bg_light;
    }
    &.active {
      border-color: $primary_action;
    }
  }

  &.reaction_default {
    padding: ($space_xxs + 1) ($space_sm - 4);
    color: $text_lt_lighter;
  }

  .reaction_button_icon_wrapper {
    display: flex;
    height: $space_sm + 1;
  }

  // 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

1 entries across 1 versions & 1 rubygems

Version	Path
playbook_ui-12.33.0.pre.alpha.PLAY905reactionbuttons979	app/pb_kits/playbook/pb_button/_button.scss