@ulu/frontend 0.1.0-beta.42 → 0.1.0-beta.43

package/docs-dev/changelog/index.html

@@ -5166,6 +5166,9 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#version-0.1.0-beta.42">Version 0.1.0-beta.42</a>
+            		</li>
+
                     <li><a href="#version-0.1.0-beta.41">Version 0.1.0-beta.41</a>
             		</li>
 
@@ -5346,6 +5349,14 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="version-0.1.0-beta.42" tabindex="-1">Version 0.1.0-beta.42</h2>
+<ul>
+<li><strong>scss/components/card</strong>
+<ul>
+<li>Adjusted defaults for new aside element (rule and background color) to match standard defaults (initial testing values were there before)</li>
+</ul>
+</li>
+</ul>
 <h2 id="version-0.1.0-beta.41" tabindex="-1">Version 0.1.0-beta.41</h2>
 <ul>
 <li><strong>js/utils/dom</strong>
@@ -5353,6 +5364,11 @@
 <li><strong>addScrollbarProperty</strong> - Change arguments to object, Add argument for &quot;propertyElement&quot; and make this function add property to html element by default (so it can be used with other custom properties in CSS :root selector)</li>
 </ul>
 </li>
+<li><strong>scss/components/card.scss</strong>
+<ul>
+<li>card aside defaults changed (&quot;aside-background-color&quot; : transparent, &quot;aside-rule-color&quot;: &quot;rule&quot;,)</li>
+</ul>
+</li>
 </ul>
 <h2 id="version-0.1.0-beta.40" tabindex="-1">Version 0.1.0-beta.40</h2>
 <ul>

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

@@ -5184,60 +5184,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-9" name="title" checked="">
-<label for="live-demo-id-9">
+  <input type="checkbox" id="live-demo-id-1" name="title" checked="">
+<label for="live-demo-id-1">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-10" name="body" checked="">
-<label for="live-demo-id-10">
+  <input type="checkbox" id="live-demo-id-2" name="body" checked="">
+<label for="live-demo-id-2">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-11" name="content" checked="">
-<label for="live-demo-id-11">
+  <input type="checkbox" id="live-demo-id-3" name="content" checked="">
+<label for="live-demo-id-3">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-12" name="aside" checked="">
-<label for="live-demo-id-12">
+  <input type="checkbox" id="live-demo-id-4" name="aside" checked="">
+<label for="live-demo-id-4">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-13" name="footer" checked="">
-<label for="live-demo-id-13">
+  <input type="checkbox" id="live-demo-id-5" name="footer" checked="">
+<label for="live-demo-id-5">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-14">
+<label for="live-demo-id-6">
   Action
   <span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
 </label>  
-  <select id="live-demo-id-14" name="action">
+  <select id="live-demo-id-6" name="action">
     <option value="">None</option>,<option value="link">Card is Link</option>,<option value="proxy">Proxy Click</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-15">
+<label for="live-demo-id-7">
   Media
 </label>  
-  <select id="live-demo-id-15" name="media">
+  <select id="live-demo-id-7" name="media">
     <option value="icon">Icon</option>,<option value="image">Image</option>,<option value="imageFit">Image (fit)</option>,<option value="none">No Image</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-16">
+<label for="live-demo-id-8">
   Layout
   <span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
 </label>  
-  <select id="live-demo-id-16" name="layout">
+  <select id="live-demo-id-8" name="layout">
     <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="overlay">Overlay</option>
   </select>
 </div>

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

@@ -5222,178 +5222,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-5">
+<table class="data-table data-table--striped" id="dt-1">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-5-type" rowspan="2">Type</th>
-      <th id="dt-5-group" colspan="2">Group</th>
-      <th id="dt-5-details" colspan="2">Details</th>
-      <th id="dt-5-id" rowspan="2">Id</th>
+      <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>
     </tr>
     <tr>
-      <th headers="dt-5-group" id="dt-5-primary">Primary</th>
-      <th headers="dt-5-group" id="dt-5-secondary">Secondary</th>
-      <th headers="dt-5-details" id="dt-5-before">Before Task</th>
-      <th headers="dt-5-details" id="dt-5-after">After Task</th>
+      <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>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-5-type dt-5-r1" id="dt-5-r1">Default</th>
-      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-id">OL-53-GHSLE</td>
+      <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>
     </tr>
     <tr>
-      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-id">OL-53-GHSLE</td>
+      <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>
     </tr>
     <tr>
-      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-id">OL-53-GHSLE</td>
+      <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>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-first Table</h2>
-<table class="data-table data-table--large-first" id="dt-6">
+<table class="data-table data-table--large-first" id="dt-2">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-6-type" rowspan="2">Type</th>
-      <th id="dt-6-group" colspan="2">Group</th>
-      <th id="dt-6-details" colspan="2">Details</th>
-      <th id="dt-6-id" rowspan="2">Id</th>
+      <th id="dt-2-type" rowspan="2">Type</th>
+      <th id="dt-2-group" colspan="2">Group</th>
+      <th id="dt-2-details" colspan="2">Details</th>
+      <th id="dt-2-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-6-group" id="dt-6-primary">Primary</th>
-      <th headers="dt-6-group" id="dt-6-secondary">Secondary</th>
-      <th headers="dt-6-details" id="dt-6-before">Before Task</th>
-      <th headers="dt-6-details" id="dt-6-after">After Task</th>
+      <th headers="dt-2-group" id="dt-2-primary">Primary</th>
+      <th headers="dt-2-group" id="dt-2-secondary">Secondary</th>
+      <th headers="dt-2-details" id="dt-2-before">Before Task</th>
+      <th headers="dt-2-details" id="dt-2-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-6-type dt-6-r1" id="dt-6-r1">Default</th>
-      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-2-type dt-2-r1" id="dt-2-r1">Default</th>
+      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-id">OL-53-GHSLE</td>
+      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-id">OL-53-GHSLE</td>
+      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-header Table</h2>
-<table class="data-table data-table--large-header" id="dt-7">
+<table class="data-table data-table--large-header" id="dt-3">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-7-type" rowspan="2">Type</th>
-      <th id="dt-7-group" colspan="2">Group</th>
-      <th id="dt-7-details" colspan="2">Details</th>
-      <th id="dt-7-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-7-group" id="dt-7-primary">Primary</th>
-      <th headers="dt-7-group" id="dt-7-secondary">Secondary</th>
-      <th headers="dt-7-details" id="dt-7-before">Before Task</th>
-      <th headers="dt-7-details" id="dt-7-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-7-type dt-7-r1" id="dt-7-r1">Default</th>
-      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-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-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-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-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-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>
 <h2 class="h2">No-border Table</h2>
-<table class="data-table data-table--no-border" id="dt-8">
+<table class="data-table data-table--no-border" id="dt-4">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-8-type" rowspan="2">Type</th>
-      <th id="dt-8-group" colspan="2">Group</th>
-      <th id="dt-8-details" colspan="2">Details</th>
-      <th id="dt-8-id" rowspan="2">Id</th>
+      <th id="dt-4-type" rowspan="2">Type</th>
+      <th id="dt-4-group" colspan="2">Group</th>
+      <th id="dt-4-details" colspan="2">Details</th>
+      <th id="dt-4-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-8-group" id="dt-8-primary">Primary</th>
-      <th headers="dt-8-group" id="dt-8-secondary">Secondary</th>
-      <th headers="dt-8-details" id="dt-8-before">Before Task</th>
-      <th headers="dt-8-details" id="dt-8-after">After Task</th>
+      <th headers="dt-4-group" id="dt-4-primary">Primary</th>
+      <th headers="dt-4-group" id="dt-4-secondary">Secondary</th>
+      <th headers="dt-4-details" id="dt-4-before">Before Task</th>
+      <th headers="dt-4-details" id="dt-4-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-8-type dt-8-r1" id="dt-8-r1">Default</th>
-      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-4-type dt-4-r1" id="dt-4-r1">Default</th>
+      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-id">OL-53-GHSLE</td>
+      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-id">OL-53-GHSLE</td>
+      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>