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

package/docs-dev/changelog/index.html

@@ -5166,6 +5166,12 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#version-0.1.0-beta.43">Version 0.1.0-beta.43</a>
+            		</li>
+
+                    <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 +5352,22 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="version-0.1.0-beta.43" tabindex="-1">Version 0.1.0-beta.43</h2>
+<ul>
+<li><strong>scss/components/card</strong>
+<ul>
+<li>Document all new aside configuration properties change toggle-aside-rule to aside-rule</li>
+</ul>
+</li>
+</ul>
+<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 +5375,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

@@ -5238,12 +5238,12 @@
   <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">
-    <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="overlay">Overlay</option>
+    <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="horizontalCenter">Horizontal Center</option>,<option value="overlay">Overlay</option>
   </select>
 </div>
   </form>
   <script type="application/json" data-live-demo-options="">
-    {"debug":false,"template":"{% set hasProxy = action == \"proxy\" %}\n{% set isLink = action == \"link\" %}\n{% set hasImage = media == \"image\" or media == \"imageFit\" %}\n{% set element = isLink ? \"a\" : \"article\" %}\n{% set classes = [\n  \"card\",\n  layout ? \"card--\" ~ layout : \"\",\n  media == \"imageFit\" ? \"card--image-fit\" : \"\"\n] %}\n\n<{{ element }} \n  class=\"{{ classes|join(' ') }}\"\n  {{ hasProxy ? \"data-ulu-proxy-click\" }}\n  {{ isLink ? \"href='https://www.google.com'\" }}\n>\n  {% if body %}\n    <div class=\"card__body\">\n      <div class=\"card__main\">\n        {% if title %}\n          <h5 class=\"card__title\">\n            {# If link don't nest link (no link title) #}\n            {% if isLink %}\n              Card Title\n            {% else %}\n              <a \n                class=\"card__title-link\" \n                href=\"https://www.google.com\" \n                {{ hasProxy ? \"data-ulu-proxy-click-source\" }}\n              >\n                Card Title\n              </a>\n            {% endif %}\n          </h5>\n        {% endif %}\n        {% if content %}\n          <div>\n            This is the card content. It can contain around 2-3 sentences.\n          </div>\n        {% endif %}\n      </div>\n      {% if aside %}\n        <div class=\"card__aside\">\n          This is the aside. attach the rule to this element.\n        </div>\n      {% endif %}\n    </div>\n  {% endif %}\n\n  {% if hasImage %}\n    <div class=\"card__image\">\n      <img src=\"/frontend/assets/placeholder/image-1.jpg\">\n    </div>\n  {% endif %}\n\n  {% if media == \"icon\" %}\n    <div class=\"card__image card__image--icon\">\n      <img src=\"/frontend/assets/placeholder/icon-calendar.svg\" width=\"150\" height=\"150\">\n    </div>\n  {% endif %}\n\n  {% if footer %}\n    <div class=\"card__footer\">\n      {# If link don't nest link (no link title) #}\n      {% if isLink %}\n        Card Footer Text\n      {% else %}\n        <a class=\"button button--small\" href=\"https://www.yahoo.com/\">Footer</a>\n      {% endif %}\n    </div>\n  {% endif %}\n</{{ element }}>\n\n"}
+    {"debug":false,"template":"{% set hasProxy = action == \"proxy\" %}\n{% set isLink = action == \"link\" %}\n{% set hasImage = media == \"image\" or media == \"imageFit\" %}\n{% set element = isLink ? \"a\" : \"article\" %}\n\n{% set layoutClass = \"\" %}\n{% if layout == \"horizontalCenter\" %}\n  {% set layoutClass = \"card--horizontal card--horizontal-center\" %}\n{% elseif layout %}\n  {% set layoutClass = \"card--\" ~ layout %}\n{% endif %}\n\n{% set classes = [\n  \"card\",\n  layoutClass,\n  media == \"imageFit\" ? \"card--image-fit\" : \"\"\n] %}\n\n<{{ element }} \n  class=\"{{ classes|join(' ') }}\"\n  {{ hasProxy ? \"data-ulu-proxy-click\" }}\n  {{ isLink ? \"href='https://www.google.com'\" }}\n>\n  {% if body %}\n    <div class=\"card__body\">\n      <div class=\"card__main\">\n        {% if title %}\n          <h5 class=\"card__title\">\n            {# If link don't nest link (no link title) #}\n            {% if isLink %}\n              Card Title\n            {% else %}\n              <a \n                class=\"card__title-link\" \n                href=\"https://www.google.com\" \n                {{ hasProxy ? \"data-ulu-proxy-click-source\" }}\n              >\n                Card Title\n              </a>\n            {% endif %}\n          </h5>\n        {% endif %}\n        {% if content %}\n          <div>\n            This is the card content. It can contain around 2-3 sentences.\n          </div>\n        {% endif %}\n      </div>\n      {% if aside %}\n        <div class=\"card__aside\">\n          This is the aside. attach the rule to this element.\n        </div>\n      {% endif %}\n    </div>\n  {% endif %}\n\n  {% if hasImage %}\n    <div class=\"card__image\">\n      <img src=\"/frontend/assets/placeholder/image-1.jpg\">\n    </div>\n  {% endif %}\n\n  {% if media == \"icon\" %}\n    <div class=\"card__image card__image--icon\">\n      <img src=\"/frontend/assets/placeholder/icon-calendar.svg\" width=\"150\" height=\"150\">\n    </div>\n  {% endif %}\n\n  {% if footer %}\n    <div class=\"card__footer\">\n      {# If link don't nest link (no link title) #}\n      {% if isLink %}\n        Card Footer Text\n      {% else %}\n        <a class=\"button button--small\" href=\"https://www.yahoo.com/\">Footer</a>\n      {% endif %}\n    </div>\n  {% endif %}\n</{{ element }}>\n\n"}
   </script>
 </div>