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-10.21.0 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-10.21.0.pre.alpha.lightbox app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-10.21.0.pre.alpha.rg1 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-10.21.0.pre.alpha.jg1 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-10.21.0.pre.alpha.na1 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-10.21.0.pre.alpha.jd1 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-10.20.0 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-10.19.0 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-10.19.0.pre.lightbox app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-10.18.2 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-10.19.0.pre.popover.alpha1 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-10.18.1 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
playbook_ui-10.18.0 app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss