Sha256: cd507f7a58ad31802f43912761caf5d71277a6d9a7184acee4aacef22abd641e

Contents?: true

Size: 1.24 KB

Versions: 273

Compression:

Stored size: 1.24 KB

Contents

@import "../tokens/border_radius";
@import "../tokens/colors";
@import "../tokens/typography";
@import "../tokens/opacity";
@import "../pb_icon/icon";

$pb_icon_circle_sizes: (
  "xs":   28px,
  "sm":   38px,
  "md":   60px,
  "base": 60px,
  "lg":   80px,
  "xl":   100px,
);

[class^=pb_icon_circle_kit] {
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: cover;
  overflow: hidden;
  position: relative;

  i,
  svg {
    &[class^=pb_icon_kit] {
      width: 100%;
      height: 100%;
      display: block;
      text-align: center;
      text-transform: uppercase;
      position: relative;
      z-index: 0;
    }
  }

  @each $name, $size in $pb_icon_circle_sizes {
    &[class*=_#{$name}] {
      width: $size;
      height: $size;
      border-radius: $size/2;
      background: $silver;
      color: $text_lt_light;
      font-size: $size * 0.38;
      line-height: $size;
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: $size;
    }
  }

  @each $color_name, $color_value in $colors {
    &[class*=_#{$color_name}] {
      color: $color_value;
      background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
      &.dark {
        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
      }
    }
  }
}

Version data entries

273 entries across 273 versions & 1 rubygems

Version Path
playbook_ui-12.26.0.pre.alpha.multiselectfixes821 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown818 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown817 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown815 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown813 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0.pre.alpha.alphafix812 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0.pre.alpha.alphafix810 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0.pre.alpha.railsmultilevelimprovements805 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0.pre.alpha.multiselectfixes798 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0.pre.alpha.multiselectfixes797 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0.pre.alpha.multiselectfixes796 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0.pre.alpha.multiselectfixes795 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown794 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.25.0.pre.alpha.play824786 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.26.0 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.25.0.pre.alpha.railsmultilevelimprovements785 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.25.0.pre.alpha.railsmultilevelimprovements780 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.25.0.pre.alpha.PLAY818multilevelrebuild779 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.25.0.pre.alpha.railsmultilevelimprovements776 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-12.25.0.pre.alpha.PLAY818multilevelrebuild774 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss