Sha256: 7a31147436cca6d84e65521850ec5dac0505d9e679e8b0784e04fe8562436ddb

Contents?: true

Size: 1 KB

Versions: 1088

Compression:

Stored size: 1 KB

Contents

@import "../tokens/border_radius";
@import "../tokens/colors";

$image-sizes: (
  "xs": 60px,
  "sm": 80px,
  "md": 100px,
  "lg": 120px,
  "xl": 140px,
);

[class^=pb_image_kit] {
  position: relative;
  object-fit: cover;

  @each $name, $size in $image-sizes {
    &[class*=size_#{$name}] {
      width: $size;
      height: $size;
      object-fit: cover;
      position: relative;
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: $size;
    }

    &[class*= rounded] {
      border-radius: $border-rad-heaviest;
    }

    &.fade {
      opacity: 0;
      &.lazyloaded {
        opacity: 1;
        transition: opacity 300ms ease-in;
      }
    }

    &.blur {
      filter: blur(5px);
      &.lazyloaded {
        -webkit-filter: blur(0);
        filter: blur(0);
        transition: filter 300ms ease-in;
      }
    }

    &.scale {
      opacity: 0;
      transform: scale(0.9);
      &.lazyloaded {
        opacity: 1;
        transform: scale(1);
        transition: 700ms ease-in;
      }
    }
  }
}

Version data entries

1,088 entries across 1,088 versions & 1 rubygems

Version Path
playbook_ui-11.4.0.pre.alpha.rubytheme1 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.4.0 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.3.0.pre.alpha2 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.3.0.pre.alpha1 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.3.0 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.2.7 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.2.6 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.2.5 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.2.4 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.2.4.pre.alpha1 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.2.3 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.2.2 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.2.1 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.2.0 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.1.2 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.1.2.pre.alpha1 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.1.1 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.1.1.pre.alpha1 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.1.0 app/pb_kits/playbook/pb_image/_image.scss
playbook_ui-11.0.1 app/pb_kits/playbook/pb_image/_image.scss