@ulu/frontend 0.1.0-beta.32 → 0.1.0-beta.34

package/docs-dev/sass/core/cssvar/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2527,6 +2527,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-system/">
+          
+    
+    <span class="nav-tree__text">
+      utils/system
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -2729,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2759,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -5013,6 +5028,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-system/">
+          
+    
+    <span class="nav-tree__text">
+      utils/system
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>

package/docs-dev/sass/core/element/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2527,6 +2527,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-system/">
+          
+    
+    <span class="nav-tree__text">
+      utils/system
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -2729,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2759,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -5013,6 +5028,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-system/">
+          
+    
+    <span class="nav-tree__text">
+      utils/system
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -5097,6 +5127,12 @@
 
                     <li><a href="#mixin-hidden-visually">hidden-visually()</a>
             		</li>
+
+                    <li><a href="#mixin-cap">cap()</a>
+            		</li>
+
+                    <li><a href="#mixin-cap-appearance">cap-appearance()</a>
+            		</li>
                 </ol>
             		</li>
 
@@ -5166,6 +5202,8 @@
   <span class="pjs-token pjs-string">"ul-list-style-type"</span><span class="pjs-token pjs-punctuation">:</span>               disc<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"ul-list-style-type-2"</span><span class="pjs-token pjs-punctuation">:</span>             circle<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"ul-list-style-type-3"</span><span class="pjs-token pjs-punctuation">:</span>             square<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"cap-color"</span> <span class="pjs-token pjs-punctuation">:</span>                       <span class="pjs-token pjs-string">"accent"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"cap-size"</span> <span class="pjs-token pjs-punctuation">:</span>                        5px
 <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
 <details>
   <summary>File Information</summary>
@@ -5174,7 +5212,7 @@
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> variable</li>
 <li><strong>Lines (comments):</strong> 10-40</li>
-<li><strong>Lines (code):</strong> 42-72</li>
+<li><strong>Lines (code):</strong> 42-74</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5381,8 +5419,8 @@
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 74-75</li>
-<li><strong>Lines (code):</strong> 77-80</li>
+<li><strong>Lines (comments):</strong> 76-77</li>
+<li><strong>Lines (code):</strong> 79-82</li>
 </ul>
 </details>
 <div class="sassdoc-item-header">
@@ -5404,8 +5442,8 @@
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 82-83</li>
-<li><strong>Lines (code):</strong> 85-90</li>
+<li><strong>Lines (comments):</strong> 84-85</li>
+<li><strong>Lines (code):</strong> 87-92</li>
 </ul>
 </details>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -5422,8 +5460,8 @@
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 92-94</li>
-<li><strong>Lines (code):</strong> 96-98</li>
+<li><strong>Lines (comments):</strong> 94-96</li>
+<li><strong>Lines (code):</strong> 98-100</li>
 </ul>
 </details>
 <h4 id="parameters" tabindex="-1">Parameters</h4>
@@ -5465,8 +5503,8 @@
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 108-109</li>
-<li><strong>Lines (code):</strong> 111-113</li>
+<li><strong>Lines (comments):</strong> 110-111</li>
+<li><strong>Lines (code):</strong> 113-115</li>
 </ul>
 </details>
 <h4 id="parameters-1" tabindex="-1">Parameters</h4>
@@ -5503,8 +5541,8 @@
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 115-116</li>
-<li><strong>Lines (code):</strong> 118-120</li>
+<li><strong>Lines (comments):</strong> 117-118</li>
+<li><strong>Lines (code):</strong> 120-122</li>
 </ul>
 </details>
 <h4 id="parameters-2" tabindex="-1">Parameters</h4>
@@ -5541,8 +5579,8 @@
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 136-137</li>
-<li><strong>Lines (code):</strong> 139-145</li>
+<li><strong>Lines (comments):</strong> 138-139</li>
+<li><strong>Lines (code):</strong> 141-147</li>
 </ul>
 </details>
 <h4 id="parameters-3" tabindex="-1">Parameters</h4>
@@ -5580,8 +5618,8 @@
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 147-148</li>
-<li><strong>Lines (code):</strong> 150-152</li>
+<li><strong>Lines (comments):</strong> 149-150</li>
+<li><strong>Lines (code):</strong> 152-154</li>
 </ul>
 </details>
 <h4 id="parameters-4" tabindex="-1">Parameters</h4>
@@ -5620,8 +5658,8 @@
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 154-155</li>
-<li><strong>Lines (code):</strong> 157-161</li>
+<li><strong>Lines (comments):</strong> 156-157</li>
+<li><strong>Lines (code):</strong> 159-163</li>
 </ul>
 </details>
 <h4 id="parameters-5" tabindex="-1">Parameters</h4>
@@ -5667,8 +5705,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 163-169</li>
-<li><strong>Lines (code):</strong> 171-184</li>
+<li><strong>Lines (comments):</strong> 165-171</li>
+<li><strong>Lines (code):</strong> 173-186</li>
 </ul>
 </details>
 <h4 id="parameters-6" tabindex="-1">Parameters</h4>
@@ -5710,8 +5748,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 186-188</li>
-<li><strong>Lines (code):</strong> 190-212</li>
+<li><strong>Lines (comments):</strong> 188-190</li>
+<li><strong>Lines (code):</strong> 192-214</li>
 </ul>
 </details>
 <h4 id="parameters-7" tabindex="-1">Parameters</h4>
@@ -5753,8 +5791,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 214-215</li>
-<li><strong>Lines (code):</strong> 217-241</li>
+<li><strong>Lines (comments):</strong> 216-217</li>
+<li><strong>Lines (code):</strong> 219-243</li>
 </ul>
 </details>
 <h4 id="parameters-8" tabindex="-1">Parameters</h4>
@@ -5791,8 +5829,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 243-244</li>
-<li><strong>Lines (code):</strong> 246-266</li>
+<li><strong>Lines (comments):</strong> 245-246</li>
+<li><strong>Lines (code):</strong> 248-268</li>
 </ul>
 </details>
 <h4 id="parameters-9" tabindex="-1">Parameters</h4>
@@ -5829,8 +5867,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 268-273</li>
-<li><strong>Lines (code):</strong> 275-293</li>
+<li><strong>Lines (comments):</strong> 270-275</li>
+<li><strong>Lines (code):</strong> 277-295</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5854,6 +5892,139 @@ styling (text-decoration, etc)</li>
 </tr>
 </tbody>
 </table>
+<div class="sassdoc-item-header">
+<h3 id="mixin-cap" tabindex="-1">cap()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Layout utility to add a colored bar (cap) to an element's edge, positioned over the element and its border</p>
+<ul>
+<li>You need to set position (relative, fixed) on parent</li>
+</ul>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _element.scss</li>
+<li><strong>Group:</strong> element</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 298-306</li>
+<li><strong>Lines (code):</strong> 308-331</li>
+</ul>
+</details>
+<h4 id="parameters-11" tabindex="-1">Parameters</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Description</th>
+<th style="text-align:left">Default</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">$side</td>
+<td style="text-align:left"><code>String</code></td>
+<td style="text-align:left">The side to place the cap (top, bottom, left, right)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">$options</td>
+<td style="text-align:left"><code>Map</code></td>
+<td style="text-align:left">Options for the appearance of the cap</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">$options.color</td>
+<td style="text-align:left"><code>Color</code></td>
+<td style="text-align:left">The color for the end cap</td>
+<td style="text-align:left">$config.cap-color</td>
+</tr>
+<tr>
+<td style="text-align:left">$options.size</td>
+<td style="text-align:left"><code>Number</code></td>
+<td style="text-align:left">The width/height of the cap</td>
+<td style="text-align:left">$config.cap-size</td>
+</tr>
+<tr>
+<td style="text-align:left">$options.offset</td>
+<td style="text-align:left"><code>Number</code></td>
+<td style="text-align:left">A positive number of the amount the cap should extend outside the box (to account for border-width)</td>
+<td style="text-align:left">0</td>
+</tr>
+<tr>
+<td style="text-align:left">$options.border-radius</td>
+<td style="text-align:left"><code>Number</code></td>
+<td style="text-align:left">An optional border-radius to apply to the outward-facing edges of the cap (used to match parent)</td>
+<td style="text-align:left">null</td>
+</tr>
+<tr>
+<td style="text-align:left">$before</td>
+<td style="text-align:left"><code>Boolean</code></td>
+<td style="text-align:left">Whether or not to use the ::before element (if not uses :after)</td>
+<td style="text-align:left">true</td>
+</tr>
+</tbody>
+</table>
+<h4 id="require-10" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/core/element/#mixin-cap-appearance">cap-appearance()</a></li>
+<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
+<li><a href="/frontend/sass/core/breakpoint/#variable-config">$config</a></li>
+</ul>
+<div class="sassdoc-item-header">
+<h3 id="mixin-cap-appearance" tabindex="-1">cap-appearance()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Provides the appearance styles for a given cap</p>
+<ul>
+<li>If an option is not provided it won't be output</li>
+<li>This is used to update the caps styling (states, modifiers, etc)</li>
+</ul>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _element.scss</li>
+<li><strong>Group:</strong> element</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 335-340</li>
+<li><strong>Lines (code):</strong> 342-384</li>
+</ul>
+</details>
+<h4 id="parameters-12" tabindex="-1">Parameters</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">$side</td>
+<td style="text-align:left"><code>String</code></td>
+<td style="text-align:left">The side to place the cap (top, bottom, left, right)</td>
+</tr>
+<tr>
+<td style="text-align:left">$options</td>
+<td style="text-align:left"><code>Map</code></td>
+<td style="text-align:left">Options for the appearance of the cap (see options from element.cap)</td>
+</tr>
+<tr>
+<td style="text-align:left">$before</td>
+<td style="text-align:left"><code>Boolean</code></td>
+<td style="text-align:left">Whether or not to use the ::before element (if not uses :after)</td>
+</tr>
+</tbody>
+</table>
+<h4 id="require-11" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
+</ul>
 <h2 id="functions" tabindex="-1">Functions</h2>
 <div class="sassdoc-item-header">
 <h3 id="function-get" tabindex="-1">get()</h3>
@@ -5868,11 +6039,11 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 100-102</li>
-<li><strong>Lines (code):</strong> 104-106</li>
+<li><strong>Lines (comments):</strong> 102-104</li>
+<li><strong>Lines (code):</strong> 106-108</li>
 </ul>
 </details>
-<h4 id="parameters-11" tabindex="-1">Parameters</h4>
+<h4 id="parameters-13" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -5894,7 +6065,7 @@ styling (text-decoration, etc)</li>
 </tr>
 </tbody>
 </table>
-<h4 id="require-10" tabindex="-1">Require</h4>
+<h4 id="require-12" tabindex="-1">Require</h4>
 <ul>
 <li>require-map-get()</li>
 <li><a href="/frontend/sass/core/breakpoint/#variable-config">$config</a></li>
@@ -5912,11 +6083,11 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 122-123</li>
-<li><strong>Lines (code):</strong> 125-127</li>
+<li><strong>Lines (comments):</strong> 124-125</li>
+<li><strong>Lines (code):</strong> 127-129</li>
 </ul>
 </details>
-<h4 id="parameters-12" tabindex="-1">Parameters</h4>
+<h4 id="parameters-14" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -5933,7 +6104,7 @@ styling (text-decoration, etc)</li>
 </tr>
 </tbody>
 </table>
-<h4 id="require-11" tabindex="-1">Require</h4>
+<h4 id="require-13" tabindex="-1">Require</h4>
 <ul>
 <li>require-map-get()</li>
 <li><a href="/frontend/sass/core/element/#variable-rule-styles">$rule-styles</a></li>
@@ -5951,11 +6122,11 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 129-130</li>
-<li><strong>Lines (code):</strong> 132-134</li>
+<li><strong>Lines (comments):</strong> 131-132</li>
+<li><strong>Lines (code):</strong> 134-136</li>
 </ul>
 </details>
-<h4 id="parameters-13" tabindex="-1">Parameters</h4>
+<h4 id="parameters-15" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -5972,7 +6143,7 @@ styling (text-decoration, etc)</li>
 </tr>
 </tbody>
 </table>
-<h4 id="require-12" tabindex="-1">Require</h4>
+<h4 id="require-14" tabindex="-1">Require</h4>
 <ul>
 <li>require-map-get()</li>
 <li><a href="/frontend/sass/core/element/#variable-rule-margins">$rule-margins</a></li>

package/docs-dev/sass/core/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2527,6 +2527,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-system/">
+          
+    
+    <span class="nav-tree__text">
+      utils/system
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -2729,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2759,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -5013,6 +5028,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-system/">
+          
+    
+    <span class="nav-tree__text">
+      utils/system
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>