@ulu/frontend 0.1.0-beta.117 → 0.1.0-beta.119

package/docs-dev/sass/base/print/index.html

@@ -971,13 +971,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>
@@ -986,6 +1079,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 is-active-trail ">
           <details class="nav-tree__collapsible" open="">
             <summary class="nav-tree__toggle">
@@ -3659,13 +3847,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>
@@ -3674,6 +3955,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 is-active-trail ">
           <details class="nav-tree__collapsible" open="">
             <summary class="nav-tree__toggle">

package/docs-dev/sass/components/definition-list/index.html

@@ -6036,7 +6036,7 @@
 <li><strong>Group:</strong> definition-list</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 81-84</li>
-<li><strong>Lines (code):</strong> 86-170</li>
+<li><strong>Lines (code):</strong> 86-178</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.117",
+  "version": "0.1.0-beta.119",
   "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/_card.scss

@@ -151,49 +151,6 @@ $config: (
   @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)
-/// 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;
-      }
-    }
-  } 
-}
-
-
-@mixin shared-transition-styles() {
-  transition-duration: get("transition-duration");
-  transition-timing-function: get("transition-timing-function");
-}
 /// Prints component styles
 /// @demo card
 /// @example scss
@@ -215,8 +172,6 @@ $config: (
     flex-direction: column;
     justify-content: flex-end;
     max-width: get("max-width");
-    // Not absolutely necessary, incase we want to remove in future
-    overflow: hidden; 
 
     // Border is on pseudo so that it's on top of image/etc
     &::after {
@@ -249,7 +204,8 @@ $config: (
     #{ $prefix },
     #{ $prefix }::after,
     #{ $prefix }__title {
-      @include shared-transition-styles();
+      transition-duration: get("transition-duration");
+      transition-timing-function: get("transition-timing-function");
       transition-property: get("transition-properties");
     }
   } 
@@ -558,6 +514,47 @@ $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)
+/// 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;
@@ -565,30 +562,4 @@ $config: (
   #{ $prefix }__footer {
     grid-column: 1 / 2;
   }
-}
-
-// OLD CSS FOR HORIZONTAL
-  // #{ $prefix }--horizontal {
-  //   display: flex;
-  //   flex-direction: row;
-  //   justify-content: center;
-  //   align-items: center;
-  //   #{ $prefix }__image {
-  //     align-self: stretch;
-  //     border-top-right-radius: 0;
-  //     border-bottom-left-radius: get("border-radius");
-  //     width: get("horizontal-image-width");
-  //     flex: 0 0 get("horizontal-image-width");
-  //     // max-width: 30rem;
-  //     // min-height: 28rem;
-  //     // padding-top: 0;
-  //   }
-  //   #{ $prefix }__body {
-  //     display: flex;
-  //     flex: 1;
-  //     flex-direction: column;
-  //     justify-content: center;
-  //     max-width: get("horizontal-body-max-width");
-  //   }
-  // }
-
+}

package/scss/components/_definition-list.scss

@@ -167,4 +167,12 @@ $config: (
   #{ $prefix }--compact#{ $prefix }--separated-last > div:last-child {
     padding-bottom: $compact-item-margin-half;
   }
+
+  // Clip margin of first
+  #{ $prefix }:not(#{ $prefix }--separated-first) {
+    > div:first-child {
+      padding-top: 0;
+      margin-top: 0;
+    }
+  }
 }