Contents

[class^=pb_avatar_action_button_kit] {

  $icon_size: 0px;
  $border_size: 0px;

  $action-colors: (
    "add": $primary,
    "remove": $error,
  );

  @each $key, $value in $action-colors {
    &[class*=_#{$key}] a {
      color: $value;
    }
  }
  
  @mixin icon-base {
    &.dark{
        background-color: $bg_dark
    }
    width: $icon_size;
    height: $icon_size;
    position: absolute;
    background-color: $white;
    border-radius: $icon_size;
    font-size: calc(#{$icon_size} - #{$border_size} * 2);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }

  @each $name, $size in $avatar-sizes {
    
    &[class*=_#{$name}] {
      
      $avatar_size: map-get($avatar-sizes, $name);
      $icon_size: calc($avatar_size / 2);
      $border_size: calc($icon_size / 10);

      position: relative;
      width: $avatar_size * 1.25;
      height: $avatar_size * 1.1;
      display: flex;
    
      [class^=pb_tooltip_kit] {
        justify-self: center;
      }
    
      &[class*=_bottom] .icon {
        @include icon-base;
        top: $icon_size * 1.27;
      }
      &[class*=_top] .icon {
        @include icon-base;
        bottom: $icon_size * 1.27;
      }
      &[class*=_right] .icon {
        left: $icon_size * 1.5;
      }
      &[class*=_left] [class^=pb_avatar_kit] {
        padding-left: calc($icon_size / 2);
      }
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
playbook_ui-14.1.0.pre.alpha.PLAY15063613	app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss