@ulu/frontend 0.1.0-beta.27 → 0.1.0-beta.28

package/docs-dev/changelog/index.html

@@ -5016,6 +5016,12 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#version-0.1.0-beta.28">Version 0.1.0-beta.28</a>
+            		</li>
+
+                    <li><a href="#version-0.1.0-beta.27">Version 0.1.0-beta.27</a>
+            		</li>
+
                     <li><a href="#version-0.1.0-beta.26">Version 0.1.0-beta.26</a>
             		</li>
 
@@ -5151,6 +5157,30 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="version-0.1.0-beta.28" tabindex="-1">Version 0.1.0-beta.28</h2>
+<ul>
+<li>scss/components/popover
+<ul>
+<li>Remove options (footer-box-shadow, footer-box-shadow-color) as it interferes with main popover box shadow and arrow box shadow.</li>
+<li>Added &quot;footer-border-top&quot; to separate footer from content (useful for showing overflow)</li>
+</ul>
+</li>
+</ul>
+<h2 id="version-0.1.0-beta.27" tabindex="-1">Version 0.1.0-beta.27</h2>
+<ul>
+<li>scss/components/popover
+<ul>
+<li>Add popover's content box-shadow to arrow (using the other pseudo to mask the shadow)</li>
+</ul>
+</li>
+<li>scss/components/utils
+<ul>
+<li>Fix number-info function, and add errors option</li>
+<li>Add function add-unit() to add unit to a number</li>
+<li>Add function hypotenuse() which returns hypotenuse of triangle</li>
+</ul>
+</li>
+</ul>
 <h2 id="version-0.1.0-beta.26" tabindex="-1">Version 0.1.0-beta.26</h2>
 <ul>
 <li>scss/components/card

package/docs-dev/demos/card/index.html

@@ -5030,7 +5030,8 @@
 
   <hr class="rule rule--light rule--margin-large">
 
-    <div id="icd" class="interactive-demo">
+    <h2 class="h2">Interactive Card Demo</h2>
+<div id="icd" class="interactive-demo">
   <div id="icd-display" class="interactive-demo__display">
   </div>
   <form id="icdForm" class="interactive-demo__form form-theme">
@@ -5065,17 +5066,12 @@
         <option value="horizontal">Horizontal</option>
         <option value="overlay">Overlay</option>
       </select>
+      <div class="form-theme__description">Note: Overlay is not compatible with "Icon" and "No Image" options.</div>
     </div>
     <div class="form-theme__actions">
       <button type="button" id="icdSubmit" class="button">Refresh</button>
     </div>
   </form>
-  <div><em>Note the following config combinations are not currently supported</em></div>
-  <dl>
-    <dt>Overlay</dt>
-    <dd>No Image</dd>
-    <dd>Icon</dd>
-</dl>
 </div>
 <!-- Note you will need to run the pageModified event after re-rendering the card, you can add the following to cause the scripts to update
 

package/docs-dev/demos/data-table/index.html

@@ -5071,46 +5071,46 @@
   </tfoot>
 </table>
 <h2 class="h2">Complex Table</h2>
-<table class="data-table" id="dt-1">
+<table class="data-table" id="dt-3">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-1-type" rowspan="2">Type</th>
-      <th id="dt-1-group" colspan="2">Group</th>
-      <th id="dt-1-details" colspan="2">Details</th>
-      <th id="dt-1-id" rowspan="2">Id</th>
+      <th id="dt-3-type" rowspan="2">Type</th>
+      <th id="dt-3-group" colspan="2">Group</th>
+      <th id="dt-3-details" colspan="2">Details</th>
+      <th id="dt-3-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-1-group" id="dt-1-primary">Primary</th>
-      <th headers="dt-1-group" id="dt-1-secondary">Secondary</th>
-      <th headers="dt-1-details" id="dt-1-before">Before Task</th>
-      <th headers="dt-1-details" id="dt-1-after">After Task</th>
+      <th headers="dt-3-group" id="dt-3-primary">Primary</th>
+      <th headers="dt-3-group" id="dt-3-secondary">Secondary</th>
+      <th headers="dt-3-details" id="dt-3-before">Before Task</th>
+      <th headers="dt-3-details" id="dt-3-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-1-type dt-1-r1" id="dt-1-r1">Default</th>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-3-type dt-3-r1" id="dt-3-r1">Default</th>
+      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-id">OL-53-GHSLE</td>
+      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-id">OL-53-GHSLE</td>
+      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/docs-dev/demos/popovers/index.html

@@ -5118,7 +5118,9 @@
   </button> 
   <div class="popover" data-ulu-popover-content="">
     <div class="popover__inner">
-      This is the popover body area <a href="#">test link</a>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
     </div>
     <div class="popover__footer">Popover Footer</div>
     <span class="popover__arrow" data-ulu-popover-arrow=""></span>

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

@@ -5069,6 +5069,7 @@
 <p>Module Settings</p>
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
   <span class="pjs-token pjs-string">"arrow-size"</span>                   <span class="pjs-token pjs-punctuation">:</span> 16px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"arrow-mask-overlap"</span>           <span class="pjs-token pjs-punctuation">:</span> 4px<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"background-color"</span>             <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"border-radius"</span>                <span class="pjs-token pjs-punctuation">:</span> 6px<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"color"</span>                        <span class="pjs-token pjs-punctuation">:</span> inherit<span class="pjs-token pjs-punctuation">,</span>
@@ -5078,14 +5079,12 @@
   <span class="pjs-token pjs-string">"padding-large"</span>                <span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"type-size"</span>                    <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"z-index"</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-string">"box-shadow"</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-string">"box-shadow-footer"</span>            <span class="pjs-token pjs-punctuation">:</span> 0 0 4px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"box-shadow-footer-color"</span>      <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"box-shadow"</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"header-background-color"</span>      <span class="pjs-token pjs-punctuation">:</span> #ccc<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"header-color"</span>                 <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"header-media-background-color"</span><span class="pjs-token pjs-punctuation">:</span> black<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"header-padding-y"</span>             <span class="pjs-token pjs-punctuation">:</span> 0.25rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"footer-border-top"</span>            <span class="pjs-token pjs-punctuation">:</span> 1px solid #dfdfdf<span class="pjs-token pjs-punctuation">,</span>  
   <span class="pjs-token pjs-string">"footer-background-color"</span>      <span class="pjs-token pjs-punctuation">:</span> #ccc<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"footer-color"</span>                 <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"footer-padding-y"</span>             <span class="pjs-token pjs-punctuation">:</span> 0.25rem<span class="pjs-token pjs-punctuation">,</span>
@@ -5106,7 +5105,7 @@
 <li><strong>Group:</strong> popover</li>
 <li><strong>Type:</strong> variable</li>
 <li><strong>Lines (comments):</strong> 30-60</li>
-<li><strong>Lines (code):</strong> 62-93</li>
+<li><strong>Lines (code):</strong> 62-92</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5124,7 +5123,13 @@
 <td style="text-align:left">arrow-size</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">16px</td>
-<td style="text-align:left">size of the dropdown arrow.</td>
+<td style="text-align:left">Size of the dropdown arrow.</td>
+</tr>
+<tr>
+<td style="text-align:left">arrow-mask-overlap</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">4px</td>
+<td style="text-align:left">Size that the mask extends beyond the arrow size (which covers up the arrow box shadow inside the popover content). This should be adjusted based on the size of the box-shadow being used)</td>
 </tr>
 <tr>
 <td style="text-align:left">background-color</td>
@@ -5187,18 +5192,6 @@
 <td style="text-align:left">Box shadow of the popover.</td>
 </tr>
 <tr>
-<td style="text-align:left">box-shadow-footer</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">0 0 4px</td>
-<td style="text-align:left">Box shadow of the popover footer.</td>
-</tr>
-<tr>
-<td style="text-align:left">box-shadow-footer-color</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">&quot;box-shadow&quot;</td>
-<td style="text-align:left">Color of the footer's box shadow.</td>
-</tr>
-<tr>
 <td style="text-align:left">header-background-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">#ccc</td>
@@ -5229,6 +5222,12 @@
 <td style="text-align:left">Background color of the footer.</td>
 </tr>
 <tr>
+<td style="text-align:left">footer-border-top</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">1px solid #dfdfdf</td>
+<td style="text-align:left">Optional border used to separate the content from footer</td>
+</tr>
+<tr>
 <td style="text-align:left">footer-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">null</td>
@@ -5310,8 +5309,8 @@
 <li><strong>File:</strong> _popover.scss</li>
 <li><strong>Group:</strong> popover</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 95-98</li>
-<li><strong>Lines (code):</strong> 100-102</li>
+<li><strong>Lines (comments):</strong> 94-97</li>
+<li><strong>Lines (code):</strong> 99-101</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5350,8 +5349,8 @@
 <li><strong>File:</strong> _popover.scss</li>
 <li><strong>Group:</strong> popover</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 114-116</li>
-<li><strong>Lines (code):</strong> 118-272</li>
+<li><strong>Lines (comments):</strong> 113-115</li>
+<li><strong>Lines (code):</strong> 117-232</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5374,8 +5373,8 @@
 <li><strong>File:</strong> _popover.scss</li>
 <li><strong>Group:</strong> popover</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 104-107</li>
-<li><strong>Lines (code):</strong> 109-112</li>
+<li><strong>Lines (comments):</strong> 103-106</li>
+<li><strong>Lines (code):</strong> 108-111</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>