@ulu/frontend 0.2.0-beta.1 → 0.2.0-beta.11

package/lib/scss/components/_card-before-no-position-relative.TRASH.scss

@@ -1,576 +0,0 @@
-////
-/// @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";
-@use "../color";
-@use "../layout";
-
-// 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 {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 [8rem] 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 {Dimension} footer-justify [flex-end] Flex alignment of footer items (on end by default)
-/// @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 {Number} image-fit-padding [1rem] Padding on inside of image when using image fit modifier
-/// @prop {CssValue} image-fit-filter [drop-shadow(0 0px 8px rgba(0, 0, 0, 0.2))] Filter to use on image when using image fit modifier
-/// @prop {List} image-icon-max-width [10rem] Max width for image when using the modifier on the .card__image--icon
-/// @prop {List} image-transition-properties [(transform, filter)] The properties for the image transitions.
-/// @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 {Unit} horizontal-min-height [10rem] Minimum height when horizontal
-/// @prop {Unit} horizontal-max-width [40rem] Maximum width when horizontal
-/// @prop {Unit} horizontal-body-max-width [80rem] The max-width of body when horizontal
-/// @prop {Boolean} aside-rule [false] Whether or not to have a rule separating body and aside
-/// @prop {CssUnit} aside-rule-width [1px] Size of rule
-/// @prop {CssUnit} aside-rule-color ["rule-light"] Color of rule
-/// @prop {CssUnit} aside-rule-background-color [transparent] Color of aside background color
-
-$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" : "type",
-  "color-hover" : null,
-  "footer-padding-y" : 0.25rem,
-  "footer-min-height" : 2.5rem,
-  "footer-justify" : flex-end,
-  "horizontal-breakpoint" : "small",
-  "horizontal-image-width" : min(33%, 20rem),
-  "horizontal-min-height" : 20rem,
-  "horizontal-max-width" : 80rem,
-  "horizontal-main-max-width" : 40rem,
-  "horizontal-aside-width" : 40%,
-  "header-margin" : 0.75em,
-  "image-ratio" : 56.25%,
-  "image-aspect-ratio": list.slash(5, 3),
-  "image-background-color" : rgb(238, 238, 238),
-  "image-border" : null, // For when you have a margin
-  "image-filter-hover" : null,
-  "image-margin" : null,
-  "image-icon-max-width" : 8rem,
-  "image-transform-hover" : null,
-  "image-transition-duration" :    350ms,
-  "image-transition-enabled" : true,
-  "image-transition-properties" : (transform, filter),
-  "image-transition-timing-function" : ease-in-out,
-  "image-fit-padding" : 1rem,
-  "image-fit-filter" : drop-shadow(0 0px 8px rgba(0, 0, 0, 0.3)),
-  "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,
-  "aside-rule" : false,
-  "aside-rule-width" : 1px,
-  "aside-background-color" : transparent,
-  "aside-rule-color": "rule-light",
-) !default;
-  
-  /// Change modules $config
-/// @param {Map} $changes Map of changes
-/// @example scss
-///   @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 scss
-///   @include ulu.component-card-get(( "property" : value ));
-
-@function get($name) {
-  @return utils.require-map-get($config, $name, "card [config]");
-}
-
-/// Prints component styles
-/// @demo card
-/// @example scss
-/// @example
-///   @include ulu.component-card-styles();
-
-@mixin styles {
-  $prefix: selector.class("card");
-
-  #{ $prefix } {
-    color: color.get(get("color"));
-    background-color: color.get(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");
-
-    // Border is on pseudo so that it's on top of image/etc
-    &::after {
-      @include layout.absolute-fill();
-      content: if(get("border"), "", null);
-      border: get("border");
-      border-radius: get("border-radius");
-      // Below body and footer but above the image
-      // - Note: Starting at 3 instead of 2 so that content can move to 
-      //   layer 2 on overlay modifier
-      // - General style doesn't need bleeding for content so this allows 
-      //   popovers/etc to not be affected by this pseudo hover border
-      z-index: 3; 
-      pointer-events: none;
-    }
-  }
-
-  @include when-clickable($hover: true) {
-    background-color: color.get(get("background-color-hover"));
-    color: color.get(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: color.get(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 {
-      transition-duration: get("transition-duration");
-      transition-timing-function: get("transition-timing-function");
-      transition-property: get("transition-properties");
-    }
-  } 
-
-  #{ $prefix }__title {
-    color: color.get(get("title-color"));
-    margin-bottom: get("title-margin");
-    display: block;
-    font-weight: get("title-font-weight");
-    #{ $prefix }__title-link {
-      all: unset;
-      cursor: pointer;
-      @if get("title-color-hover") {
-        &:hover,
-        &:focus {
-          color: color.get(get("title-color-hover"));
-        }
-      }
-    }
-  }
-  @if get("title-color-hover") {
-    @include when-clickable($hover: true) {
-      #{ $prefix }__title {
-        color: color.get(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: color.get(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 {
-    @include layout.absolute-fill(true);
-    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 }__footer,
-  #{ $prefix }__main,
-  #{ $prefix }__aside {
-    padding: get("padding");
-  }
-  #{ $prefix }__aside {
-    position: relative;
-  }
-
-  #{ $prefix }__image--icon {
-    // background-color: transparent; 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    // padding: 2rem;
-    img {
-      position: static;
-      display: block;
-      max-width: get("image-icon-max-width");
-      height: auto;
-      top: auto;
-      left: auto;
-    }
-  }
-  #{ $prefix }__body,
-  #{ $prefix }__footer { 
-    position: relative;
-    // Above image and pseudo (in case we have popovers/etc)
-    z-index: 4; 
-  }
-  #{ $prefix }__body {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    min-height: get("body-min-height");
-  }
-  @if (get("aside-rule")) {
-    #{ $prefix }__aside {
-      background-color: color.get(get("aside-background-color"));
-    }
-    #{ $prefix }__aside::after {
-      content: "";
-      position: absolute;
-      top: calc(0rem - get("aside-rule-width") / 2);
-      left: get("padding");
-      right: get("padding");
-      height: get("aside-rule-width");
-      background-color: color.get(get("aside-rule-color"));
-    }
-  }
-  // For actions/messages
-  // - Layout as flex with min height to support buttons 
-  //   and text without relying so much on padding
-  #{ $prefix }__footer {
-    flex: 0;
-    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: get("footer-justify");
-  }
-
-  #{ $prefix }--overlay {
-    aspect-ratio: get("overlay-aspect-ratio");
-    height: min-content;
-    
-    // On overlay putting the body/footer above the image and below the hover pseudo
-    // - If we have popovers in overlay this would need to be set above the pseudo
-    // - The trade off would be that the gradients background would be above the hover border, keeping them above will preserve the look / feel since popovers are probably not needed for this style
-    #{ $prefix }__body,
-    #{ $prefix }__footer {
-      z-index: 2;
-    }
-    #{ $prefix }__body {
-      position: relative;
-      flex-grow: 0;
-     
-      color: color.get(get("color-overlay"));
-      background-color: color.get(get("overlay-background-color"));
-      min-height: 0;
-      padding-top: get("overlay-body-padding-y");
-      padding-bottom: get("overlay-body-padding-y");
-      
-      &:not(:has(~ #{ $prefix }__footer)) {
-        border-bottom-left-radius: get("border-radius");
-        border-bottom-right-radius: get("border-radius");
-      }
-
-      @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: color.get(get("overlay-background-color"));
-      color: color.get(get("color-overlay"));
-      border-bottom-left-radius: get("border-radius");
-      border-bottom-right-radius: get("border-radius");
-    }
-    #{ $prefix }__body,
-    #{ $prefix }__footer {
-      &:last-child {
-        border-bottom-left-radius: get("border-radius");
-        border-bottom-right-radius: get("border-radius");
-      }
-    }
-    #{ $prefix }__title {
-      color: color.get(get("color-overlay"));
-    }
-    #{ $prefix }__image {
-      @include layout.absolute-fill();
-      overflow: hidden;
-      padding-top: 0;
-      background-color: color.get(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 {
-          @include layout.absolute-fill(true);
-          display: block;
-          background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9));
-        }
-      }
-    }
-  }
-
-  // Incase this modifier is being used to hide the image
-  // not just to tell the component how to layout without image
-  // - Use case is hiding image when you can't control the output 
-  //   of the inside of the card (printed no matter what). We had
-  //   this happen in HHRC, including this extra CSS for that
-  #{ $prefix }--no-image {
-    #{ $prefix }__image {
-      display: none;
-    }
-  }
-  #{ $prefix }--image-fit {
-    #{ $prefix }__image {
-      img {
-        padding: get("image-fit-padding");
-        object-fit: contain;
-        object-position: top center;
-        filter: get("image-fit-filter");
-      }
-    }
-  }
-  #{ $prefix }--fill {
-    max-width: none;
-    height: 100%;
-    margin: 0;
-  }
-
-  @if (get("horizontal-breakpoint")) {
-    @include breakpoint.min(get("horizontal-breakpoint")) {
-      @include -horizontal-card-styles();
-    }
-  } @else {
-    @include -horizontal-card-styles();
-  }
-}
-
-@mixin -horizontal-card-styles() {
-  $prefix: selector.class("card");
-
-  #{ $prefix }--horizontal {
-    display: grid;
-    grid-template-columns: get("horizontal-image-width") 1fr;
-    // Creating the two rows (body and footer), if one is missing it's height will be 0
-    // Cannot use gap with the grid as it will create space when a row isn't needed
-    grid-template-rows: auto auto;
-    min-height: get("horizontal-min-height");
-    max-width: get("horizontal-max-width");
-
-    // When no footer remove extra row
-    &:not(:has(> #{ $prefix }__footer)) {
-      grid-template-rows: auto;
-    }
-    #{ $prefix }__image {
-      grid-column: 1 / 2;
-      grid-row: 1 / -1;
-      aspect-ratio: auto;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: get("border-radius");
-    }
-    #{ $prefix }__body,
-    #{ $prefix }__footer {
-      grid-column: 2 / 3;
-    }
-    #{ $prefix }__body {
-      flex-direction: row;
-      justify-content: space-between;
-    }
-    #{ $prefix }__main {
-      flex-grow: 1;
-      max-width: get("horizontal-main-max-width");
-    }
-    #{ $prefix }__aside {
-      flex: 0 0 get("horizontal-aside-width");
-      height: 100%;
-    }
-    @if(get("aside-rule")) {
-      #{ $prefix }__aside::after {
-        content: "";
-        position: absolute;
-        top: get("padding");
-        left: calc(0rem - get("aside-rule-width") / 2);
-        height: calc(100% - get("padding") - get("padding"));
-        width: get("aside-rule-width");
-        background-color: get("aside-rule-color");
-      }
-    }
-
-    // For modern browsers
-    // Optionally use no-image modifier for older browser support
-    &:not(:has(#{ $prefix }__image)) {
-      @include -card-horizontal-no-image-styles();
-    }
-    &#{ $prefix }--no-image {
-      @include -card-horizontal-no-image-styles();
-    }
-  }
-  #{ $prefix }--horizontal-center {
-    #{ $prefix }__body {
-      align-self: center;
-    }
-  }
-}
-
-
-/// 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)
-/// Prints component styles
-/// @example scss
-///  @include ulu.component-card-styles();
-
-@mixin when-clickable($hover: false) {
-  $prefix: selector.class("card");
-  // When proxy click enabled
-  @if (get("clickable-card-enabled") and get("clickable-card-selector")) {
-    #{ $prefix }#{ get("clickable-card-selector") },
-    a#{ $prefix },
-    button#{ $prefix },
-    #{ $prefix }--clickable {
-      @if ($hover) {
-        #{ get("clickable-card-interact-selector") } {
-          @content;
-        }
-      } @else {
-        @content;
-      }
-    }
-  // Without proxy click (only if interactive)
-  } @else {
-    a#{ $prefix },
-    button#{ $prefix },
-    #{ $prefix }--clickable {
-      @if ($hover) {
-        #{ get("clickable-card-interact-selector") } {
-          @content;
-        }
-      } @else {
-        @content;
-      }
-    }
-  } 
-}
-
-
-// Internal mixin for DRY
-@mixin -card-horizontal-no-image-styles() {
-  $prefix: selector.class("card");
-  grid-template-columns: 1fr;
-  #{ $prefix }__body,
-  #{ $prefix }__footer {
-    grid-column: 1 / 2;
-  }
-}