Contents

@import "../tokens/shadows";
@import "../tokens/border_radius";
@import "../tokens/shadows";
@import "../tokens/colors";
@import "child_kits/card_body";

$pb_card_border_width: 1px;
$pb_card_border_radius: $border_rad_heavier;
$pb_card_highlight_colors: map-merge($status_colors, $product_colors);
$pb_card_highlight_size: 4px;

[class^=pb_card_kit] {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: $card_light;
  background-clip: border-box;
  border: $pb_card_border_width solid $border_light;
  border-radius: $pb_card_border_radius;
  transition: all 0.3s ease;

  &[class*=_selected] {
    border-color: $primary;
    border-width: $pb_card_border_width * 2;
  }

  @each $name, $shadow in $box_shadows {
    &[class*=_#{$name}] {
      box-shadow: $shadow;
    }
  }

  @mixin pb_card_highlight($width, $height, $background){
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: $width;
    height: $height;
    background: $background;
    z-index: 10;
  }

  &[class*=_highlight] {
    overflow: hidden;
  }

  &[class*=_highlight_side] {
    @each $color_name, $color_value in $pb_card_highlight_colors {
      &[class*=_highlight_#{$color_name}]::before {
        @include pb_card_highlight(100%, $pb_card_highlight_size, $color_value);
      }
    }
  }

  &[class*=_highlight_top] {
    @each $color_name, $color_value in $pb_card_highlight_colors {
      &[class*=_highlight_#{$color_name}]::before {
        @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
      }
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
playbook_ui-2.9.9	app/pb_kits/playbook/pb_card/_card.scss