@ulu/frontend 0.1.0-beta.110 → 0.1.0-beta.111

package/docs-dev/sass/helpers/utilities/index.html

@@ -956,13 +956,106 @@
         </li>
       
         
+        <li class="nav-tree__item  ">
+          <details class="nav-tree__collapsible">
+            <summary class="nav-tree__toggle">
+              
+    <span class="nav-tree__toggle-content">
+      
+    
+    <span class="nav-tree__text">
+      Core
+    </span>
+  
+    </span>
+    <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
+  
+            </summary>
+            
+      <ul class="nav-tree" data-menu-depth="3">
+        
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/sass/core/">
+        <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/core/">
           
     
     <span class="nav-tree__text">
-      Core
+      Introduction
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+        
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/breakpoint/">
+          
+    
+    <span class="nav-tree__text">
+      Breakpoint
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/button/">
+          
+    
+    <span class="nav-tree__text">
+      Button
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/color/">
+          
+    
+    <span class="nav-tree__text">
+      Color
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/cssvar/">
+          
+    
+    <span class="nav-tree__text">
+      Cssvar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/element/">
+          
+    
+    <span class="nav-tree__text">
+      Element
     </span>
   
         </a>
@@ -971,6 +1064,101 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/layout/">
+          
+    
+    <span class="nav-tree__text">
+      Layout
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/path/">
+          
+    
+    <span class="nav-tree__text">
+      Path
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/selector/">
+          
+    
+    <span class="nav-tree__text">
+      Selector
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/typography/">
+          
+    
+    <span class="nav-tree__text">
+      Typography
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/units/">
+          
+    
+    <span class="nav-tree__text">
+      Units
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/utils/">
+          
+    
+    <span class="nav-tree__text">
+      Utils
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+      </ul>
+    
+          </details>
+        </li>
+      
+
         <li class="nav-tree__item  ">
           <details class="nav-tree__collapsible">
             <summary class="nav-tree__toggle">
@@ -3614,13 +3802,106 @@
         </li>
       
         
+        <li class="nav-tree__item  ">
+          <details class="nav-tree__collapsible">
+            <summary class="nav-tree__toggle">
+              
+    <span class="nav-tree__toggle-content">
+      
+    
+    <span class="nav-tree__text">
+      Core
+    </span>
+  
+    </span>
+    <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
+  
+            </summary>
+            
+      <ul class="nav-tree" data-menu-depth="3">
+        
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/sass/core/">
+        <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/core/">
           
     
     <span class="nav-tree__text">
-      Core
+      Introduction
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+        
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/breakpoint/">
+          
+    
+    <span class="nav-tree__text">
+      Breakpoint
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/button/">
+          
+    
+    <span class="nav-tree__text">
+      Button
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/color/">
+          
+    
+    <span class="nav-tree__text">
+      Color
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/cssvar/">
+          
+    
+    <span class="nav-tree__text">
+      Cssvar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/element/">
+          
+    
+    <span class="nav-tree__text">
+      Element
     </span>
   
         </a>
@@ -3629,6 +3910,101 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/layout/">
+          
+    
+    <span class="nav-tree__text">
+      Layout
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/path/">
+          
+    
+    <span class="nav-tree__text">
+      Path
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/selector/">
+          
+    
+    <span class="nav-tree__text">
+      Selector
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/typography/">
+          
+    
+    <span class="nav-tree__text">
+      Typography
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/units/">
+          
+    
+    <span class="nav-tree__text">
+      Units
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/utils/">
+          
+    
+    <span class="nav-tree__text">
+      Utils
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+      </ul>
+    
+          </details>
+        </li>
+      
+
         <li class="nav-tree__item  ">
           <details class="nav-tree__collapsible">
             <summary class="nav-tree__toggle">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.110",
+  "version": "0.1.0-beta.111",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_accordion.scss

@@ -124,6 +124,7 @@ $config: (
 
   // When not one of our custom classed details components
   #{ $prefix } {
+    position: relative; // For pushing to the top when in accordion groups
     padding: 0;
     margin: get("margin");
     border: $border;
@@ -161,15 +162,26 @@ $config: (
       > #{ $prefix }__summary {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0; 
+
         @if (get("summary-border-enabled")) {
-          border-bottom: get("summary-border-width") solid color.get(get("summary-border-color"));
+          &::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            height: get("summary-border-width");
+            background-color: color.get(get("summary-border-color"));
+          }
         }
       }
     }
   }
   #{ $prefix }__summary {
+    position: relative; // For pseudo border (done this way for animations)
     display: flex;
     list-style: none; // Remove the default arrow (old safari?)
+    width: 100%; // For <button>
     background-color: color.get(get("summary-background-color"));
     color: color.get(get("summary-color"));
     line-height: get("summary-line-height");

package/scss/components/_card.scss

@@ -89,9 +89,10 @@ $config: (
   "footer-min-height" : 2.5rem,
   "horizontal-breakpoint" : "small",
   "horizontal-image-width" : min(33%, 20rem),
-  "horizontal-body-max-width" : 40rem,
   "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),
@@ -126,7 +127,6 @@ $config: (
   "overlay-background-color": rgba(0, 0, 0, 0.6),
   "overlay-shading": true,
   "overlay-body-padding-y": 1rem,
-  // new below
   "aside-rule" : false,
   "aside-rule-width" : 1px,
   "aside-background-color" : transparent,
@@ -520,19 +520,17 @@ $config: (
     }
     #{ $prefix }__body {
       flex-direction: row;
-      max-width: get("horizontal-body-max-width");
+      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 }__main {
-        flex: 1 1 60%;
-      }
-      #{ $prefix }__aside {
-        flex: 1 1 40%;
-        height: 100%;
-        // flex-basis: 40%;
-        // min-width: 40%;
-      }
       #{ $prefix }__aside::after {
         content: "";
         position: absolute;