@ulu/frontend 0.1.0-beta.42 → 0.1.0-beta.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.42",
+  "version": "0.1.0-beta.44",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",
@@ -46,7 +46,10 @@
     "modules",
     "javascript",
     "framework",
-    "mixin"
+    "mixin",
+    "components",
+    "HTML",
+    "frontend framework"
   ],
   "authors": {
     "name": "Joe Scherben, Informatics Studio",

package/scss/components/_card.scss

@@ -66,6 +66,10 @@
 /// @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,
@@ -85,9 +89,9 @@ $config: (
   "footer-min-height" : 2.5rem,
   "horizontal-breakpoint" : "small",
   "horizontal-image-width" : min(33%, 20rem),
-  "horizontal-body-max-width" : 80rem,
-  "horizontal-min-height" : 10rem,
-  "horizontal-max-width" : 40rem,
+  "horizontal-body-max-width" : 40rem,
+  "horizontal-min-height" : 20rem,
+  "horizontal-max-width" : 80rem,
   "header-margin" : 0.75em,
   "image-ratio" : 56.25%,
   "image-aspect-ratio": list.slash(5, 3),
@@ -123,11 +127,10 @@ $config: (
   "overlay-shading": true,
   "overlay-body-padding-y": 1rem,
   // new below
-  "toggle-aside-rule" : true,
-  "aside-rule-width" : 6px,
+  "aside-rule" : false,
+  "aside-rule-width" : 1px,
   "aside-background-color" : transparent,
-  "aside-rule-color": "rule",
-
+  "aside-rule-color": "rule-light",
 ) !default;
   
   /// Change modules $config
@@ -353,7 +356,7 @@ $config: (
     flex-grow: 1;
     min-height: get("body-min-height");
   }
-  @if(get("toggle-aside-rule")) {
+  @if(get("aside-rule")) {
     #{ $prefix }__aside {
       background-color: color.get(get("aside-background-color"));
     }
@@ -395,10 +398,12 @@ $config: (
       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 {
@@ -492,6 +497,11 @@ $config: (
     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;
@@ -504,12 +514,11 @@ $config: (
       grid-column: 2 / 3;
     }
     #{ $prefix }__body {
-      // display: flex;
       flex-direction: row;
-      justify-content: center;
       max-width: get("horizontal-body-max-width");
     }
-    @if(get("toggle-aside-rule")) {
+    
+    @if(get("aside-rule")) {
       #{ $prefix }__main {
         flex: 1 1 60%;
       }
@@ -539,6 +548,11 @@ $config: (
       @include -card-horizontal-no-image-styles();
     }
   }
+  #{ $prefix }--horizontal-center {
+    #{ $prefix }__body {
+      align-self: center;
+    }
+  }
 }
 
 @mixin -card-horizontal-no-image-styles() {