@ulu/frontend 0.1.0-beta.66 → 0.1.0-beta.68

package/docs-dev/sass/components/spoke-spinner/index.html

@@ -166,6 +166,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -2712,6 +2727,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">

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

@@ -166,6 +166,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -2712,6 +2727,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">

package/docs-dev/sass/components/tabs/index.html

@@ -166,6 +166,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -2712,6 +2727,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">

package/docs-dev/sass/components/tag/index.html

@@ -166,6 +166,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -2712,6 +2727,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">

package/docs-dev/sass/components/tile-button/index.html

@@ -166,6 +166,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -2712,6 +2727,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">

package/docs-dev/sass/components/tile-grid/index.html

@@ -166,6 +166,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -2712,6 +2727,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">

package/docs-dev/sass/components/tile-grid-overlay/index.html

@@ -166,6 +166,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -2712,6 +2727,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">

package/docs-dev/sass/components/vignette/index.html

@@ -166,6 +166,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -2712,6 +2727,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">

package/docs-dev/sass/components/wysiwyg/index.html

@@ -166,6 +166,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -2712,6 +2727,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">

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

@@ -166,6 +166,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -2712,6 +2727,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -5327,8 +5357,8 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 47-51</li>
-<li><strong>Lines (code):</strong> 53-57</li>
+<li><strong>Lines (comments):</strong> 45-49</li>
+<li><strong>Lines (code):</strong> 51-55</li>
 </ul>
 </details>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -5386,8 +5416,8 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 59-66</li>
-<li><strong>Lines (code):</strong> 68-70</li>
+<li><strong>Lines (comments):</strong> 57-64</li>
+<li><strong>Lines (code):</strong> 66-68</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5439,8 +5469,8 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 116-125</li>
-<li><strong>Lines (code):</strong> 127-133</li>
+<li><strong>Lines (comments):</strong> 137-146</li>
+<li><strong>Lines (code):</strong> 148-154</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>
@@ -5484,8 +5514,8 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 135-144</li>
-<li><strong>Lines (code):</strong> 146-152</li>
+<li><strong>Lines (comments):</strong> 156-165</li>
+<li><strong>Lines (code):</strong> 167-173</li>
 </ul>
 </details>
 <h4 id="examples-3" tabindex="-1">Examples</h4>
@@ -5529,8 +5559,8 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 154-164</li>
-<li><strong>Lines (code):</strong> 166-173</li>
+<li><strong>Lines (comments):</strong> 175-185</li>
+<li><strong>Lines (code):</strong> 187-194</li>
 </ul>
 </details>
 <h4 id="examples-4" tabindex="-1">Examples</h4>
@@ -5583,8 +5613,8 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 175-185</li>
-<li><strong>Lines (code):</strong> 187-199</li>
+<li><strong>Lines (comments):</strong> 196-206</li>
+<li><strong>Lines (code):</strong> 208-220</li>
 </ul>
 </details>
 <h4 id="examples-5" tabindex="-1">Examples</h4>
@@ -5637,8 +5667,8 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 201-208</li>
-<li><strong>Lines (code):</strong> 210-228</li>
+<li><strong>Lines (comments):</strong> 222-229</li>
+<li><strong>Lines (code):</strong> 231-249</li>
 </ul>
 </details>
 <h4 id="examples-6" tabindex="-1">Examples</h4>
@@ -5699,8 +5729,8 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 230-233</li>
-<li><strong>Lines (code):</strong> 235-245</li>
+<li><strong>Lines (comments):</strong> 251-254</li>
+<li><strong>Lines (code):</strong> 256-266</li>
 </ul>
 </details>
 <h4 id="require-7" tabindex="-1">Require</h4>
@@ -5723,8 +5753,8 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 33-41</li>
-<li><strong>Lines (code):</strong> 43-45</li>
+<li><strong>Lines (comments):</strong> 33-39</li>
+<li><strong>Lines (code):</strong> 41-43</li>
 </ul>
 </details>
 <h4 id="examples-7" tabindex="-1">Examples</h4>
@@ -5785,17 +5815,17 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 72-81</li>
-<li><strong>Lines (code):</strong> 83-85</li>
+<li><strong>Lines (comments):</strong> 70-77</li>
+<li><strong>Lines (code):</strong> 79-81</li>
 </ul>
 </details>
 <h4 id="examples-8" tabindex="-1">Examples</h4>
 <p>Example usage</p>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get </span><span class="pjs-token pjs-punctuation">{</span>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get-sizes </span><span class="pjs-token pjs-punctuation">{</span>
   <span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-sizes</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
   <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> map.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-variable">$sizes</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
 <span class="pjs-token pjs-punctuation">}</span></code></pre>
-<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get</span> <span class="pjs-token pjs-punctuation">{</span>
+<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get-sizes</span> <span class="pjs-token pjs-punctuation">{</span>
   <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
 <span class="pjs-token pjs-punctuation">}</span></code></pre>
 <h4 id="returns-1" tabindex="-1">Returns</h4>
@@ -5830,10 +5860,18 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 87-89</li>
-<li><strong>Lines (code):</strong> 90-93</li>
+<li><strong>Lines (comments):</strong> 83-90</li>
+<li><strong>Lines (code):</strong> 92-94</li>
 </ul>
 </details>
+<h4 id="examples-9" tabindex="-1">Examples</h4>
+<p>Example usage</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get-size </span><span class="pjs-token pjs-punctuation">{</span>
+  <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
+<span class="pjs-token pjs-punctuation">}</span></code></pre>
+<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get-size</span> <span class="pjs-token pjs-punctuation">{</span>
+  <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
+<span class="pjs-token pjs-punctuation">}</span></code></pre>
 <h4 id="parameters-8" tabindex="-1">Parameters</h4>
 <table>
 <thead>
@@ -5884,10 +5922,20 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 95-97</li>
-<li><strong>Lines (code):</strong> 99-105</li>
+<li><strong>Lines (comments):</strong> 96-104</li>
+<li><strong>Lines (code):</strong> 106-112</li>
 </ul>
 </details>
+<h4 id="examples-10" tabindex="-1">Examples</h4>
+<p>Example usage</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get-size-value </span><span class="pjs-token pjs-punctuation">{</span>
+  <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size-value</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
+  <span class="pjs-token pjs-property">max-height</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size-value</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
+<span class="pjs-token pjs-punctuation">}</span></code></pre>
+<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get-size-value</span> <span class="pjs-token pjs-punctuation">{</span>
+  <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> 75.99em<span class="pjs-token pjs-punctuation">;</span>
+  <span class="pjs-token pjs-property">max-height</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
+<span class="pjs-token pjs-punctuation">}</span></code></pre>
 <h4 id="parameters-9" tabindex="-1">Parameters</h4>
 <table>
 <thead>
@@ -5940,10 +5988,30 @@
 <li><strong>File:</strong> _breakpoint.scss</li>
 <li><strong>Group:</strong> breakpoint</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 107-109</li>
-<li><strong>Lines (code):</strong> 111-114</li>
+<li><strong>Lines (comments):</strong> 114-130</li>
+<li><strong>Lines (code):</strong> 132-135</li>
 </ul>
 </details>
+<h4 id="examples-11" tabindex="-1">Examples</h4>
+<p>Example usage</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-exists </span><span class="pjs-token pjs-punctuation">{</span>
+  <span class="pjs-token pjs-keyword">@if</span><span class="pjs-token pjs-punctuation">(</span>ulu.<span class="pjs-token pjs-function">breakpoint-exists</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
+    <span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">breakpoint-min</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
+      <span class="pjs-token pjs-property">padding</span><span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">;</span>
+    <span class="pjs-token pjs-punctuation">}</span>
+  <span class="pjs-token pjs-punctuation">}</span>
+  <span class="pjs-token pjs-comment">// The below content doesn't print because the size doesn't exist.</span>
+  <span class="pjs-token pjs-keyword">@if</span><span class="pjs-token pjs-punctuation">(</span>ulu.<span class="pjs-token pjs-function">breakpoint-exists</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"too-large"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
+    <span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">breakpoint-min</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"too-large"</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
+      <span class="pjs-token pjs-property">padding</span><span class="pjs-token pjs-punctuation">:</span> 20000rem<span class="pjs-token pjs-punctuation">;</span>
+    <span class="pjs-token pjs-punctuation">}</span>
+  <span class="pjs-token pjs-punctuation">}</span>
+<span class="pjs-token pjs-punctuation">}</span></code></pre>
+<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-atrule"><span class="pjs-token pjs-rule">@media</span> screen <span class="pjs-token pjs-keyword">and</span> <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-property">min-width</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">)</span></span> <span class="pjs-token pjs-punctuation">{</span>
+  <span class="pjs-token pjs-selector">.test-exists</span> <span class="pjs-token pjs-punctuation">{</span>
+    <span class="pjs-token pjs-property">padding</span><span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">;</span>
+  <span class="pjs-token pjs-punctuation">}</span>
+<span class="pjs-token pjs-punctuation">}</span></code></pre>
 <h4 id="parameters-10" tabindex="-1">Parameters</h4>
 <table>
 <thead>