@ulu/frontend 0.1.0-beta.8 → 0.1.0-beta.9

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## Version 0.1.0-beta.9
+
+- Updates to "scss/component/card" - Fix card overlay border-radius (body and footer), fix card border being conditional on interactive (proxy-click)
+
 ## Version 0.1.0-beta.8
 
 - Update "scss/components/data-table" to have border and no margin on caption by default, add caption config properties (caption-text-align, caption-background-color)

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

@@ -4751,7 +4751,7 @@
 <td><strong>columns</strong></td>
 <td><strong>12</strong></td>
 <td>
-<p v-if="item.description">Number of columns for grid, must match grids that are setup in site. For most projects this is just '12'. This is set up this way to allow mutliple grids.</p>
+<p>Number of columns for grid, must match grids that are setup in site. For most projects this is just '12'. This is set up this way to allow mutliple grids.</p>
 <p class="options-table__example"><code>&lt;div data-grid="columns: 12"&gt;...</code></p>
 </td>
 </tr>
@@ -4759,7 +4759,7 @@
 <td><strong>justify</strong></td>
 <td><strong>(center|end)</strong></td>
 <td>
-<p v-if="item.description">Allows you to justify the columns (horizontal alignment). The defualt is start (left aligned)</p>
+<p>Allows you to justify the columns (horizontal alignment). The defualt is start (left aligned)</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., justify: center"&gt;...</code></p>
 </td>
 </tr>
@@ -4767,7 +4767,7 @@
 <td><strong>align</strong></td>
 <td><strong>(center|start|end|stretch-end|stretch-center)</strong></td>
 <td>
-<p v-if="item.description">Allows you to align the columns (vertical alignment within row). The defualt is stretch start. Note using stretch-end or stretch-center will stretch all columns to be the same height but will align the columns content to the end or center.</p>
+<p>Allows you to align the columns (vertical alignment within row). The defualt is stretch start. Note using stretch-end or stretch-center will stretch all columns to be the same height but will align the columns content to the end or center.</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., align: center"&gt;...</code></p>
 </td>
 </tr>
@@ -4775,7 +4775,7 @@
 <td><strong>gutters</strong></td>
 <td><strong>false</strong></td>
 <td>
-<p v-if="item.description">You can remove the gutters between columns by adding this setting. The grid shows the default gutters size by default.</p>
+<p>You can remove the gutters between columns by adding this setting. The grid shows the default gutters size by default.</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., gutters: false"&gt;...</code></p>
 </td>
 </tr>
@@ -4783,7 +4783,7 @@
 <td><strong>gutters-row</strong></td>
 <td><strong>(true|top|bottom|fit)</strong></td>
 <td>
-<p v-if="item.description">If set to 'top' gutters will be between items starting at the top including the first row (so it makes space above the first grid row. Bottom works the same way but on the bottom. True adds gutters between rows and to the top and bottom of the first/last grid row. Fit will only put gutters between the rows.</p>
+<p>If set to 'top' gutters will be between items starting at the top including the first row (so it makes space above the first grid row. Bottom works the same way but on the bottom. True adds gutters between rows and to the top and bottom of the first/last grid row. Fit will only put gutters between the rows.</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., gutters-row: true"&gt;...</code></p>
 </td>
 </tr>
@@ -4791,7 +4791,7 @@
 <td><strong>gutter-scale</strong></td>
 <td><strong>[scale key]</strong></td>
 <td>
-<p v-if="item.description">No alternated scales are configured for this site. Allows for different gutter scales to be used with grid. Requires setting up the scales when you configure/create the grid.</p>
+<p>No alternated scales are configured for this site. Allows for different gutter scales to be used with grid. Requires setting up the scales when you configure/create the grid.</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., gutter-scale: large"&gt;...</code></p>
 </td>
 </tr>
@@ -4799,7 +4799,7 @@
 <td><strong>rules-row</strong></td>
 <td><strong>(top|bottom|between)</strong></td>
 <td>
-<p v-if="item.description">Sets rules (dividers) between rows. Top adds rules to the rows top edge. Bottom adds rules to the rows bottom edge. Between adds rules between rows but not on top or bottom.</p>
+<p>Sets rules (dividers) between rows. Top adds rules to the rows top edge. Bottom adds rules to the rows bottom edge. Between adds rules between rows but not on top or bottom.</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., rules-row: true"&gt;...</code></p>
 </td>
 </tr>
@@ -4807,7 +4807,7 @@
 <td><strong>rules-row-style</strong></td>
 <td><strong>[style key]</strong></td>
 <td>
-<p v-if="item.description">If alternate rule styles are configured, applies them by the key that was used to configure the alternate style when initializing the grid in SCSS.</p>
+<p>If alternate rule styles are configured, applies them by the key that was used to configure the alternate style when initializing the grid in SCSS.</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., rules-row-style: light"&gt;...</code></p>
 </td>
 </tr>
@@ -4815,7 +4815,7 @@
 <td><strong>rules-row-align</strong></td>
 <td><strong>(gutter)</strong></td>
 <td>
-<p v-if="item.description">The default (without this set), will align to the outer edge of the grid item. If this is set to 'gutter' it will align to the grid columns gutters instead of extending to the edge.</p>
+<p>The default (without this set), will align to the outer edge of the grid item. If this is set to 'gutter' it will align to the grid columns gutters instead of extending to the edge.</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., rules-row-align: gutter"&gt;...</code></p>
 </td>
 </tr>
@@ -4823,7 +4823,7 @@
 <td><strong>rules-row-persist</strong></td>
 <td><strong>true</strong></td>
 <td>
-<p v-if="item.description">If set the rules between rows will persist when the grid is no longer in use (ie. mobile, smallest breakpoint before columns start to show. Useful to retain divider between rows on mobile.</p>
+<p>If set the rules between rows will persist when the grid is no longer in use (ie. mobile, smallest breakpoint before columns start to show. Useful to retain divider between rows on mobile.</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., rules-row-persist: true"&gt;...</code></p>
 </td>
 </tr>
@@ -4831,7 +4831,7 @@
 <td><strong>rules-row-stacked-only</strong></td>
 <td><strong>true</strong></td>
 <td>
-<p v-if="item.description">Same as persist adds rules to row before grid is being used (ie. mobile/small), except there will only be rules during this smallest breakpoint (mobile). Useful for when dividers don't make sense when the grid is displaying in columns but do make sense when columns are stacked on mobile.</p>
+<p>Same as persist adds rules to row before grid is being used (ie. mobile/small), except there will only be rules during this smallest breakpoint (mobile). Useful for when dividers don't make sense when the grid is displaying in columns but do make sense when columns are stacked on mobile.</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., rules-row-stacked-only: true"&gt;...</code></p>
 </td>
 </tr>
@@ -4839,7 +4839,7 @@
 <td><strong>rules-column</strong></td>
 <td><strong>(left|right)</strong></td>
 <td>
-<p v-if="item.description">Sets rules (dividers) between columns. Left adds rules between columns using the left side of the column. Right adds rules between columns using the left side of the column</p>
+<p>Sets rules (dividers) between columns. Left adds rules between columns using the left side of the column. Right adds rules between columns using the left side of the column</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., rules-column: left"&gt;...</code></p>
 </td>
 </tr>
@@ -4847,7 +4847,7 @@
 <td><strong>rules-column-style</strong></td>
 <td><strong>[style key]</strong></td>
 <td>
-<p v-if="item.description">If alternate rule styles are configured, applies them by the key that was used to configure the alternate style when initializing the grid in SCSS.</p>
+<p>If alternate rule styles are configured, applies them by the key that was used to configure the alternate style when initializing the grid in SCSS.</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., rules-row-style: light"&gt;...</code></p>
 </td>
 </tr>
@@ -4855,7 +4855,7 @@
 <td><strong>rules-column-ends</strong></td>
 <td><strong>true</strong></td>
 <td>
-<p v-if="item.description">Specify that the rules should not be removed at the beginning or end of rows. Which happens by default depending on if the rules are on the left or right of the element.</p>
+<p>Specify that the rules should not be removed at the beginning or end of rows. Which happens by default depending on if the rules are on the left or right of the element.</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., rules-column-ends: true"&gt;...</code></p>
 </td>
 </tr>
@@ -4863,7 +4863,7 @@
 <td><strong>rules-column-align</strong></td>
 <td><strong>true</strong></td>
 <td>
-<p v-if="item.description">Sets rules (dividers) between columns</p>
+<p>Sets rules (dividers) between columns</p>
 <p class="options-table__example"><code>&lt;div data-grid="..., rules-column: true"&gt;...</code></p>
 </td>
 </tr>
@@ -4883,7 +4883,7 @@
 <td><strong>width</strong></td>
 <td><strong>[# of columns]</strong></td>
 <td>
-<p v-if="item.description">Number of columns for grid, must match grids that are setup in site. For most projects this is just '12'. This is set up this way to allow mutliple grids.</p>
+<p>Number of columns for grid, must match grids that are setup in site. For most projects this is just '12'. This is set up this way to allow mutliple grids.</p>
 <p class="options-table__example"><code>&lt;div data-grid-item="width: 4"&gt;...</code></p>
 </td>
 </tr>
@@ -4891,7 +4891,7 @@
 <td><strong>width-[breakpoint]</strong></td>
 <td><strong>[# of columns]</strong></td>
 <td>
-<p v-if="item.description">Sets the width at a given breakpoint. Breakpoints are configured when initializing the grid in SCSS. Note this can be combined or used independently with the 'width' setting (above). For example if you only wanted the grid to start at the medium breakpoint you would just set 'width-medium'</p>
+<p>Sets the width at a given breakpoint. Breakpoints are configured when initializing the grid in SCSS. Note this can be combined or used independently with the 'width' setting (above). For example if you only wanted the grid to start at the medium breakpoint you would just set 'width-medium'</p>
 <p class="options-table__example"><code>&lt;div data-grid-item="width-medium: 2"&gt;...</code></p>
 </td>
 </tr>
@@ -4899,7 +4899,7 @@
 <td><strong>offset</strong></td>
 <td><strong>[# of columns]</strong></td>
 <td>
-<p v-if="item.description">Offsets the column by a certain number of columns</p>
+<p>Offsets the column by a certain number of columns</p>
 <p class="options-table__example"><code>&lt;div data-grid-item="..., offset: 2"&gt;...</code></p>
 </td>
 </tr>
@@ -4907,7 +4907,7 @@
 <td><strong>offset-[breakpoint]</strong></td>
 <td><strong>[# of columns]</strong></td>
 <td>
-<p v-if="item.description">Same as width-[breakpoint] except for offset instead of width</p>
+<p>Same as width-[breakpoint] except for offset instead of width</p>
 <p class="options-table__example"><code>&lt;div data-grid-item="..., offset: 2"&gt;...</code></p>
 </td>
 </tr>
@@ -4915,7 +4915,7 @@
 <td><strong>sticky</strong></td>
 <td><strong>[top, bottom]</strong></td>
 <td>
-<p v-if="item.description">Set's a column to be sticky</p>
+<p>Set's a column to be sticky</p>
 <p class="options-table__example"><code>&lt;div data-grid-item="..., sticky: top"&gt;...</code></p>
 </td>
 </tr>

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

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

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

@@ -5163,7 +5163,7 @@
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 161-165</li>
-<li><strong>Lines (code):</strong> 167-423</li>
+<li><strong>Lines (code):</strong> 167-433</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.8", 
+  "version": "0.1.0-beta.9", 
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_card.scss

@@ -179,21 +179,18 @@ $config: (
     flex-direction: column;
     justify-content: flex-end;
     max-width: get("max-width");
-  }
-  @if (get("border") or get("border-hover") or get("overlay-background-color-hover")) {
-    @include when-clickable($hover: false) {
-      &:after {
-        position: absolute;
-        content: if(get("border"), "", false);
-        top: 0; 
-        bottom: 0; 
-        right: 0; 
-        left: 0;
-        border: get("border");
-        border-radius: get("border-radius");
-        z-index: 4;
-        pointer-events: none;
-      }
+    // Border is on pseudo so that it's on top of image/etc
+    &:after {
+      position: absolute;
+      content: if(get("border"), "", false);
+      top: 0; 
+      bottom: 0; 
+      right: 0; 
+      left: 0;
+      border: get("border");
+      border-radius: get("border-radius");
+      z-index: 4;
+      pointer-events: none;
     }
   }
 
@@ -346,6 +343,10 @@ $config: (
       min-height: 0;
       padding-top: get("overlay-body-padding-y");
       padding-bottom: get("overlay-body-padding-y");
+      &:not(:has(~ #{ $prefix }__footer)) {
+        border-bottom-left-radius: get("border-radius");
+        border-bottom-right-radius: get("border-radius");
+      }
       @if (get("overlay-shading")) {
         margin-top: 4rem;
         &::before {
@@ -362,6 +363,15 @@ $config: (
     #{ $prefix }__footer {
       background-color: color.get(get("overlay-background-color"));
       color: color.get(get("color-overlay"));
+      border-bottom-left-radius: get("border-radius");
+      border-bottom-right-radius: get("border-radius");
+    }
+    #{ $prefix }__body,
+    #{ $prefix }__footer {
+      &:last-child {
+        border-bottom-left-radius: get("border-radius");
+        border-bottom-right-radius: get("border-radius");
+      }
     }
     #{ $prefix }__title {
       color: color.get(get("color-overlay"));