@ulu/frontend 0.0.23 → 0.1.0-beta.0

package/scss/components/_card.scss

@@ -0,0 +1,420 @@
+////
+/// @group card
+/// A versatile container for displaying and summarizing individual items, entities, or resources in a visually appealing and concise format
+////
+
+@use "sass:map";
+@use 'sass:list';
+
+@use "../breakpoint";
+@use "../utils";
+@use "../selector";
+
+// todo
+// sass color adjust for smooth transition. Add a comment for this if we can’t get to this
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} padding [2rem] The padding for the image icon
+/// @prop {Dimension} margin-y [3rem] Top and bottom margin for the card.
+/// @prop {Dimension} border-radius [5rem] The border radius of the card.
+/// @prop {String} horizontal-breakpoint [small] The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.
+/// @prop {CssValue} box-shadow [null] The box-shadow for the card.
+/// @prop {CssValue} box-shadow-hover [null] The box-shadow for the card when hovered or focused.
+/// @prop {Color} color [null] The type color of the card.
+/// @prop {Color} color-hover [null] The type color of the card when hovered or focused.
+/// @prop {Color} color-overlay [white] The type color of the card when using card--overlay.
+/// @prop {Color} color-overlay-hover [null] The type color of the card when hovered or focused and when using card--overlay.
+/// @prop {Color} overlay-background-color [rgba(0, 0, 0, 0.6)] The background color for the text box when using card--overlay.
+/// @prop {Color} background-color [white] The background color of the card.
+/// @prop {Color} background-color-hover [rgb(242, 244, 246)] The background color of the card when hovered or focused.
+/// @prop {Dimension} max-width [28rem] The max-width of the card.
+/// @prop {Dimension} body-min-height [10rem] the min-height of the card body.
+/// @prop {CssValue} border [1px solid #ccc] The card border.
+/// @prop {CssValue} border-hover [2px solid #278cca] The card border when hovered or focused.
+/// @prop {Dimension} header-margin [0.75em] The margin for the card header.
+/// @prop {Color} title-color [null] The type color of the title.
+/// @prop {Color} title-color-hover [null] The type color of the title (if link/button) when hovered or focused
+/// @prop {Dimension} title-margin [0] The margin for the title.
+/// @prop {CssValue} title-font-weight [bold] The font weight for the title.
+/// @prop {Number} image-ratio [56.25%] The image ratio for the card image.
+/// @prop {Color} image-background-color [rgb(197, 197, 197)] The background color behind the image.
+/// @prop {Dimension} image-margin [null] The margin for the image.
+/// @prop {Dimension} image-border [null] // For when you have a margin, the border for the image.
+/// @prop {CssValue} image-transform-hover [null] Animation for the image when hovered or focused.
+/// @prop {CssValue} image-filter-hover [null] Filter for the image when hovered or focused.
+/// @prop {Color} overlay-background-color-hover [null] The color of the pseudo-element when using proxy click.
+/// @prop {Boolean} clickable-card-enabled [true] Enable or disable proxy click.
+/// @prop {String} clickable-card-selector [data-ulu-proxy-click-init] The selector for proxy-click.js to find the card and implement the clickable card script.
+/// @prop {String} clickable-card-interact-selector [&:hover, &:focus-within] The selectors for the cards being interacted with.
+/// @prop {Dimension} footer-padding-y [0.25rem] The top and bottom padding for the footer.
+/// @prop {Dimension} footer-min-height [2.5rem] The min height for the footer
+/// @prop {String} prefix [card] The class name used to add card styling.
+/// @prop {Boolean} transition-enabled [true] Enable or disable transition for card.
+/// @prop {CssValue} transition-timing-function [ease-in-out] The timing function for the card animation.
+/// @prop {Time} transition-duration [200ms] The animation duration for the card animation.
+/// @prop {List} transition-properties [(border-color, background-color, color, box-shadow, transform)] The properties for the card animation.
+/// @prop {Boolean} image-transition-enabled [true] Enable or disable the image transition.
+/// @prop {Time} image-transition-duration [350ms] The duration of the image transition.
+/// @prop {CssValue} image-transition-timing-function [ease-in-out] The timing function for the image transition.
+/// @prop {List} image-transition-properties [(transform, filter)] The properties for the image transitions.
+
+
+
+$config: (
+  "background-color" : white,
+  "background-color-hover" : rgb(242, 244, 246),
+  "body-min-height" : 10rem,
+  "border" : 1px solid #ccc,
+  "border-hover" : 2px solid #278cca,
+  "border-radius" : 5px,
+  "box-shadow" : null,
+  "box-shadow-hover" : null,
+  "clickable-card-enabled" : true,
+  "clickable-card-selector" : "[data-ulu-proxy-click-init]",
+  "clickable-card-interact-selector" : "&:hover, &:focus-within",
+  "color" : null,
+  "color-hover" : null,
+  "footer-padding-y" : 0.25rem,
+  "footer-min-height" : 2.5rem,
+  "horizontal-breakpoint" : "small",
+  "header-margin" : 0.75em,
+  "image-ratio" : 56.25%,
+  "image-aspect-ratio": list.slash(5, 3),
+  "image-background-color" : rgb(197, 197, 197),
+  "image-border" : null, // For when you have a margin
+  "image-filter-hover" : null,
+  "image-margin" : null,
+  "image-transform-hover" : null,
+  "image-transition-duration" :    350ms,
+  "image-transition-enabled" : true,
+  "image-transition-properties" : (transform, filter),
+  "image-transition-timing-function" : ease-in-out,
+  "margin-y" : 3rem,
+  "max-width" : 28rem,
+  "padding" : 2rem,
+  "title-color" : null,
+  "title-color-hover" : null,
+  "title-color-card-hover" : null,
+  "title-margin" : 1rem,
+  "title-font-weight" : bold,
+  "transition-enabled":      true,
+  "transition-timing-function" : ease-in-out,
+  "transition-duration" :    200ms,
+  "transition-properties" :  (border-color, background-color, color, box-shadow, transform),
+  "overlay-aspect-ratio": list.slash(4, 3),
+  "overlay-background-color-hover" : null,
+  "color-overlay" : white,
+  "color-overlay-hover" : null,
+  "overlay-background-color": rgba(0, 0, 0, 0.6),
+  "overlay-shading": true,
+  "overlay-body-padding-y": 1rem,
+  ) !default;
+  
+  /// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-card-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example
+///   @include ulu.component-card-get(( "property" : value ));
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "card [config]");
+}
+
+/// Mixin styles for card when it has proxy click enabled and is being interacted with (hover/focus)
+/// @param {Boolean} $hover [false] Apply styles when the card is being hover/focused within, else applies styles to rest state of a clickable card (one who has a proxy click setup)
+
+@mixin when-clickable($hover: false) {
+  $prefix: selector.class("card");
+  @if (get("clickable-card-enabled") and get("clickable-card-selector")) {
+    #{ $prefix } {
+      &#{ get("clickable-card-selector") } {
+        @if ($hover) {
+          #{ get("clickable-card-interact-selector") } {
+            @content;
+          }
+        } @else {
+          @content;
+        }
+      }
+    }
+  }
+}
+
+
+@mixin shared-transition-styles() {
+  transition-duration: get("transition-duration");
+  transition-timing-function: get("transition-timing-function");
+}
+/// Prints component styles
+/// @demo card
+/// @example scss
+/// @example
+///   @include ulu.component-card-styles();
+
+@mixin styles {
+  $prefix: selector.class("card");
+
+  #{ $prefix } {
+    color: get("color");
+    background-color: get("background-color");
+    border-radius: get("border-radius");
+    box-shadow: get("box-shadow");
+    margin-top: get("margin-y");
+    margin-bottom: get("margin-y");
+    position: relative;
+    display: flex; // Reorder image
+    flex-direction: column;
+    justify-content: flex-end;
+    max-width: get("max-width");
+  }
+  @if (get("border") or get("border-hover") or get("overlay-background-color-hover")) {
+    @include when-clickable($hover: false) {
+      &:after {
+        position: absolute;
+        content: if(get("border"), "", false);
+        top: 0; 
+        bottom: 0; 
+        right: 0; 
+        left: 0;
+        border: get("border");
+        border-radius: get("border-radius");
+        z-index: 4;
+        pointer-events: none;
+      }
+    }
+  }
+
+  @include when-clickable($hover: true) {
+    background-color: get("background-color-hover");
+    color: get("color-hover");
+    box-shadow: get("box-shadow-hover");
+    
+    @if (get("border-hover") or get("overlay-background-color-hover")) {
+      &:after {
+        content: "";
+        border: get("border-hover");
+        background-color: get("overlay-background-color-hover");
+      }
+    }
+  }
+
+  // Setting transitions regardless of clickable card selector
+  // This shouldn't interfere since styles aren't changed if not clickable (ie. .card [border-color, etc])
+  @if get("transition-enabled") {
+    #{ $prefix },
+    #{ $prefix }::after,
+    #{ $prefix }__title {
+      @include shared-transition-styles();
+      transition-property: get("transition-properties");
+    }
+  } 
+
+  #{ $prefix }__title {
+    color: get("title-color");
+    margin-bottom: get("title-margin");
+    display: block;
+    font-weight: get("title-font-weight");
+    @if get("title-color-hover") {
+      &:hover,
+      &:focus {
+        color: get("title-color-hover");
+      }
+    }
+    #{ $prefix }__title-link {
+      all: unset;
+    }
+  }
+  @if get("title-color-hover") {
+    @include when-clickable($hover: true) {
+      #{ $prefix }__title {
+        color: get("title-color-hover");
+      }
+    }
+  }
+
+  #{ $prefix }__header + #{ $prefix }__content {
+    margin-top: get("header-margin");
+  }
+  
+  // Fix since sometimes these have nested markup sometimes just raw text
+  #{ $prefix }__image {
+    order: -1;
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+    // padding-top: get("image-ratio"); // 9:16
+    margin: get("image-margin");
+    border: get("image-border");
+    background-color: get("image-background-color");
+    border-top-right-radius: get("border-radius");
+    border-top-left-radius: get("border-radius");
+    aspect-ratio: get("image-aspect-ratio");
+    width: 100%;
+  }
+  #{ $prefix }__image img,
+  #{ $prefix}__image-media {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    object-fit: cover;
+    transform-origin: center center;
+    @if (get("image-transition-enabled")) {
+      transition-duration: get("image-transition-duration");
+      transition-timing-function: get("image-transition-timing-function");
+      transition-property: get("image-transition-properties");
+    }
+  }
+  @if (get("image-transform-hover") or get("image-filter-hover")) {
+    @include when-clickable($hover: true) {
+      #{ $prefix }__image img,
+      #{ $prefix}__image-media {
+        transform: get("image-transform-hover");
+        filter: get("image-filter-hover");
+      }
+    }
+  }
+  #{ $prefix }__body,
+  #{ $prefix }__footer,
+  #{ $prefix }__image--icon {
+    padding: get("padding");
+  }
+
+  #{ $prefix }__image--icon {
+    background-color: transparent; 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      position: static;
+      display: block;
+      max-width: 30rem;
+      height: auto;
+      top: auto;
+      left: auto;
+    }
+  }
+  #{ $prefix }__body,
+  #{ $prefix }__footer { 
+    position: relative;
+    z-index: 2; // Above image
+  }
+  #{ $prefix }__body {
+    flex-grow: 1;
+    min-height: get("body-min-height");
+  }
+  // For actions/messages
+  // - Layout as flex with min height to support buttons 
+  //   and text without relying so much on padding
+  #{ $prefix }__footer {
+    flex: 0;
+    z-index: 4;
+    padding-top: get("footer-padding-y");
+    padding-bottom: get("footer-padding-y");
+    min-height: get("footer-min-height");
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  // body + footer {
+  // means body keeps before pseudo element while footer loses it
+  #{ $prefix }--overlay {
+    // overflow: hidden;
+    aspect-ratio: get("overlay-aspect-ratio");
+    height: min-content;
+    #{ $prefix }__body {
+      position: relative;
+      flex-grow: 0;
+      z-index: 2;
+      color: get("color-overlay");
+      background-color: get("overlay-background-color");
+      min-height: 0;
+      padding-top: get("overlay-body-padding-y");
+      padding-bottom: get("overlay-body-padding-y");
+      @if (get("overlay-shading")) {
+        margin-top: 4rem;
+        &::before {
+          content: "";
+          position: absolute;
+          bottom: 100%;
+          left: 0;
+          right: 0;
+          height: 4rem;
+          background: linear-gradient(to top, get("overlay-background-color") 0%, rgba(0, 0, 0, 0));
+        }
+      }
+    }
+    #{ $prefix }__footer {
+      background-color: get("overlay-background-color");
+      color: get("color-overlay");
+    }
+    #{ $prefix }__title {
+      color: get("color-overlay");
+    }
+    #{ $prefix }__image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      overflow: hidden;
+      padding-top: 0;
+      background-color: rgb(255, 255, 255);
+      border-radius: get("border-radius");
+      aspect-ratio: auto;
+      img {      
+        z-index: 1;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        object-fit: cover;
+        &::before {
+          position: absolute;
+          display: block;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9));
+        }
+      }
+    }
+  }
+
+  @if (get("horizontal-breakpoint")) {
+    @include breakpoint.min(get("horizontal-breakpoint")) {
+      #{ $prefix }--horizontal {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        #{ $prefix }__image {
+          width: 33%;
+          flex: 0 1 33%;
+          // max-width: 30rem;
+          min-height: 28rem;
+          // padding-top: 0;
+        }
+        #{ $prefix }__body {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          justify-content: center;
+          max-width: 80rem;
+        }
+      }
+    }
+  }
+}
+