@tacc/core-styles 2.23.0 → 2.24.0

package/src/lib/_imports/components/c-card.css

@@ -103,8 +103,15 @@
 /* Structure */
 
 /* Elements */
-:--c-card > a:not(:--c-button) {
-    display: flex;
+
+:--c-card > a:not(:--c-button),
+:--c-card > p > a:not(:--c-button) {
+    display: inline-flex;
+    align-items: baseline;
+}
+/* I.e. one of multiple icon links within a p tag */
+:--c-card > p > a:not(:--c-button):has(.icon):not(:last-child) {
+    margin-right: 1rem;
 }
 :--c-card > :is(:--action) {
     vertical-align: middle;
@@ -264,9 +271,11 @@
 
 :--c-card--image-top,
 :--c-card--image-bottom {
-    --image-height: auto;
     --global-space--pattern-pad: 15px;
 
+    /* Repeat many times, because element count is unknown */
+    grid-template-rows: repeat(10, min-content);
+
     /* Use extra columns to add horizontal padding */
     grid-template-columns: var(--global-space--pattern-pad) 1fr var(--global-space--pattern-pad);
     padding-inline: unset;
@@ -284,10 +293,6 @@
     grid-column-end: -1;
 }
 
-:--c-card--image-top {
-    /* Repeat many times, because element count is unknown */
-    grid-template-rows: repeat(10, min-content) var(--image-height);
-}
 :--c-card--image-top > img {
     grid-row-start: 1;
     margin-bottom: var(--global-space--pattern-pad);
@@ -296,10 +301,6 @@
     margin-top: unset; /* to avoid combining margin with image */
 }
 
-:--c-card--image-bottom {
-    /* Repeat many times, because element count is unknown */
-    grid-template-rows: var(--image-height) repeat(10, min-content);
-}
 :--c-card--image-bottom > img {
     grid-row-end: -1;
     margin-top: var(--global-space--pattern-pad);
@@ -307,3 +308,20 @@
 :--c-card--image-bottom > p:last-of-type {
     margin-bottom: unset; /* to avoid combining margin with image */
 }
+
+/* Image: Contact Card */
+
+:--c-card--image-top h4 {
+    margin-bottom: 0.375em;
+}
+:--c-card--image-top h4 ~ p {
+    margin-top: 0px;
+    margin-bottom: 10px;
+}
+
+/* To not let card be wider than image */
+/* NOTE: For now, only applied where problem appears */
+/* HELP: Should this apply to all cards? How to demo it? */
+:--c-card--image-top:has(h4) {
+    max-width: fit-content;
+}

package/src/lib/_imports/components/c-tag.css

@@ -5,7 +5,7 @@
   /* FAQ: We should not assume the display of an element client controls */
   /* display: inline-block; */
 
-  padding: 0.25em 0.5em;
+  padding: 0.25rem 0.5rem 0rem;
   width: min-content;
 
   white-space: nowrap;

package/src/lib/_imports/components/cortal.icon.css

@@ -42,9 +42,12 @@ Styleguide Components.Cortal.Icon
 
 /* To tweak action icon appearance and layout */
 :--c-card > :is(:--action) > .icon:first-child,
-p > :is(:--action):only-child > .icon:first-child {
+p > :is(:--action) > .icon:first-child {
     margin-right: 10px;
     font-size: 1.2em;
+
+    position: relative;
+    top: 0.2em;
 }
 
 

package/src/lib/_imports/core-styles.cms.css

@@ -52,4 +52,3 @@
 @import url("./trumps/s-drop-cap.css");
 @import url("./trumps/s-footer.css");
 @import url("./trumps/s-footer--thick.css");
-@import url("./trumps/s-truncated-table.css");

package/src/lib/_imports/core-styles.portal.css

@@ -16,7 +16,6 @@
 /* ELEMENTS */
 @import url("./elements/root--portal.css");
 @import url("./elements/sticky-footer.css");
-@import url("./elements/table.portal.css");
 
 /* OBJECTS */
 @import url("./objects/o-flex-item-table-wrap.css");
@@ -34,4 +33,3 @@
 @import url("./trumps/s-footer.css");
 @import url("./trumps/s-footer--thin.css");
 @import url("./trumps/s-form-page.css");
-@import url("./trumps/s-truncated-table.css");

package/src/lib/_imports/elements/table/config.yml

@@ -315,7 +315,9 @@ variants:
         rows:
           - id: Copper
             name: Paul Bunyan
-            name-link: View Team
+            name-link:
+                - is-button: true
+                - text: View Team
             table:
               cols:
                 - Systems
@@ -337,7 +339,9 @@ variants:
                   time: 12/01/2019 11:04:19
           - id: Vermillion
             name: Nathan Fillion
-            name-link: View Team
+            name-link:
+                - is-button: true
+                - text: View Team
             table:
               cols:
                 - Systems
@@ -359,7 +363,9 @@ variants:
                   time: 12/01/2019 11:04:19
           - id: Emerald
             name: Wesley Snipes
-            name-link: View Team
+            name-link:
+                - is-button: true
+                - text: View Team
             table:
               cols:
                 - Systems

package/src/lib/_imports/elements/table/table.hbs

@@ -1,6 +1,6 @@
-<table class="{{#if table }}has-table{{/if}} {{#if class }}{{ class }}{{/if}}">
+<table class="{{#if data.has-table }}has-table{{/if}} {{#if data.cols}}has-data-cols{{/if}} {{#if class }}{{ class }}{{/if}}">
   {{#if caption }}
-  <caption>{{{ caption }}}</catpion>
+  <caption>{{{ caption }}}</caption>
   {{/if}}
   {{#if data.cols }}
   <thead>
@@ -18,25 +18,33 @@
   {{/each}}
   {{#each data.rows}}
     <tr>
-      {{#if id}}<th>{{ id }}</th>{{/if}}
-      {{#if name}}<th>{{ name }}</th>{{/if}}
-      {{#if name-link}}<th><a href="#">{{ name-link }}</a></th>{{/if}}
+      {{#if id}}<td data-col="{{ getColFromRow this id ../data.cols }}">{{ id }}</td>{{/if}}
+      {{#if name}}<td data-col="{{ getColFromRow this name ../data.cols }}">{{ name }}</td>{{/if}}
+      {{#if name-link.[0].is-button}}
+        <td data-col="{{ getColFromRow this name-link ../data.cols }}"><button class="c-button c-button--secondary">{{ name-link.[1].text }}</button></td>
+      {{else}}
+        {{#if name-link}}
+          <td data-col="{{ getColFromRow this name-link ../data.cols }}">
+            <a href="#">{{ name-link }}</a>
+          </td>
+        {{/if}}
+      {{/if}}
       {{#if paragraph}}
-      <td title="{{> @text-of-one-paragraph-short }}">
+      <td data-col="{{ getColFromRow this paragraph ../data.cols }}" title="{{> @text-of-one-paragraph-short }}">
         <p>{{> @text-of-one-paragraph-short }}</p>
       </td>
       {{/if}}
       {{#if sentence}}
-      <td title="{{> @text-of-one-sentence }}">
+      <td data-col="{{ getColFromRow this sentence ../data.cols}}" title="{{> @text-of-one-sentence }}">
         <span>{{> @text-of-one-sentence }}</span>
       </td>
       {{/if}}
-      {{#if custom-1}}<td>{{{ custom-1 }}}</td>{{/if}}
-      {{#if custom-2}}<td>{{{ custom-2 }}}</td>{{/if}}
-      {{#if custom-3}}<td>{{{ custom-3 }}}</td>{{/if}}
-      {{#if time}}<td><time>{{ time }}</time></td>{{/if}}
+      {{#if custom-1}}<td data-col="{{ getColFromRow this custom-1 ../data.cols }}">{{{ custom-1 }}}</td>{{/if}}
+      {{#if custom-2}}<td data-col="{{ getColFromRow this custom-2 ../data.cols }}">{{{ custom-2 }}}</td>{{/if}}
+      {{#if custom-3}}<td data-col="{{ getColFromRow this custom-3 ../data.cols }}">{{{ custom-3 }}}</td>{{/if}}
+      {{#if time}}<td data-col="{{ getColFromRow this time ../data.cols }}"><time>{{ time }}</time></td>{{/if}}
       {{#if acts}}
-      <td>
+      <td data-col="{{ getColFromRow this acts ../data.cols }}">
         <ul>
         {{#each acts}}
           {{#if is-link }}<li><a href="#">{{ text }}</a></li>{{/if}}
@@ -50,11 +58,16 @@
       </td>
       {{/if}}
       {{#if table}}
-      <td class="has-table">
-        {{> @table data=table }}
-      </td>
+        <td class="has-table">
+          {{> @table data=table class="nested-table"}}
+        </td>
       {{/if}}
     </tr>
   {{/each}}
   </tbody>
 </table>
+
+{{!-- {{#if data.has-table}}
+
+  {{> @table data=data.table class="nested-table" }}
+{{/if}} --}}

package/src/lib/_imports/elements/table--basic.css

@@ -3,9 +3,8 @@
 table,
 :--s-paragraph-table {
   --font-size: var(--global-font-size--small, 12px);
-  --cell-pad-vert: 0.6667em; /* 8px if font-size is 12px */
-  --cell-pad-horz: 1.3333em; /* 16px if font-size is 12px */
-  --cell-line-height: 1.1;
+  --cell-pad-vert: 1em;
+  --cell-pad-horz: 2em;
 
   /* To prevent borders from being hidden */
   /* SEE: TABLE WITH A <thead> */
@@ -14,7 +13,10 @@ table,
 
   font-family: var(--global-font-family--sans--portal);
   font-size: var(--font-size);
+
+  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
 }
+
 :--s-paragraph-table {
   display: table; /* to mimic shrink-wrap width of real table */
 }
@@ -26,6 +28,7 @@ table,
 thead tr:last-child :is(td, th) {
   border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
 }
+
 /* TABLE WITH NO <thead> */
 /* FAQ: To __avoid__ styling a __nested__ table, must use direct selector `>`  */
 /* FAQ: To __ensure__ border is __visible__:
@@ -33,7 +36,7 @@ thead tr:last-child :is(td, th) {
           (because table has `border-collapse: separate`) */
 tbody:not(thead + tbody) > tr:first-child > :is(td, th),
 :--s-paragraph-table {
-  border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+  border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);;
 }
 
 /* To add bottom border to rows */
@@ -50,6 +53,7 @@ tr:not(:last-of-type) > :is(td, th),
 tr:nth-child(odd) :is(th, td) {
   background: var(--global-color-background--app);
 }
+
 tr:nth-child(even) :is(th, td),
 :--s-paragraph-table p:nth-child(even) {
   background: var(--global-color-primary--x-light);
@@ -63,29 +67,18 @@ tr:nth-child(even) :is(th, td),
 
   color: var(--global-color-primary--dark);
 }
-/* To ensure <thead> height matches between browsers */
-/* IMPORTANT: More than for consistency; `table--nested.css` requires this */
-:is(td, th),
-:--s-paragraph-table p {
-  line-height: var(--cell-line-height);
-}
-/* To pin first column to left of table even during scroll */
-/* WARNING: Design does NOT approve this */
-/* TODO: Replace with APCD-CMS "responsive-data-tables" solution */
-/* SEE: https://github.com/TACC/Core-CMS-Custom/blob/3bec84b/apcd-cms/src/apps/view_users/static/view_users_table/css/table.css#L65-L129 */
-:is(th, td):first-child {
-  position: sticky;
-  left: 0;
-}
 
 th {
   color: var(--global-color-primary--x-dark);
 
-  text-align: inherit; /* copied from Bootstrap 4.0.0 */
+  text-align: inherit;
+  /* copied from Bootstrap 4.0.0 */
 }
+
 thead > tr > th {
   font-weight: var(--bold);
 }
+
 tbody > tr > th {
   font-weight: var(--normal);
 }
@@ -100,8 +93,6 @@ caption {
   padding-inline: var(--cell-pad-horz);
 }
 
-
-
 /* Cell Content */
 
 /* To override browser */
@@ -110,9 +101,10 @@ td ul {
   padding-inline-start: 0;
   margin-block: 0;
 }
+
 td li:not(:last-of-type) {
   /* To match line-height of other cells, but still allow space between items */
-  margin-bottom: 0.5em;
+  margin-bottom: 1em;
 }
 
 /* To override browser */
@@ -127,7 +119,110 @@ table p,
 :--s-paragraph-table p {
   margin-top: 0;
 }
+
 table p:last-child,
 :--s-paragraph-table p {
   margin-bottom: 0;
 }
+
+/* SEE: https://css-tricks.com/responsive-data-tables/ */
+@media (max-width: 767px) {
+  /* overwrite Core CMS site.css */
+  table,
+  :--s-paragraph-table {
+    --font-size: var(--global-font-size--medium, 14px);
+    --cell-pad-vert: 1.2em;
+    --cell-pad-horz: 2.2em;
+
+    font-family: var(--global-font-family--sans--portal);
+    font-size: var(--font-size);
+
+    border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+    border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+  }
+
+
+  :is(table, thead, tbody, th, td, tr) {
+    display: block;
+  }
+
+  tr:not(:last-of-type) > :is(td, th),
+  :--s-paragraph-table p:not(:last-of-type) {
+    border-bottom: unset;
+  }
+
+  tr > :is(td, th):not(:last-of-type),
+  :--s-paragraph-table p:not(:last-of-type) {
+    border-bottom-width: var(--global-border-width--normal);
+    border-bottom-style: solid;
+    border-bottom-color: var(--global-color-primary--light);
+  }
+
+  tr:not(:last-of-type) {
+    border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--light);
+  }
+
+  /* To make cells look like left-aligned labels */
+  td:before {
+    position: absolute;
+    width: calc( 50% - var(--cell-pad-horz) );
+    padding-right: 10px;
+    white-space: nowrap;
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    /* To mimic cell padding */
+    left: var(--cell-pad-horz);
+  }
+
+  tbody:not(thead + tbody) > tr:first-child > :is(td, th) {
+    border-top: none;
+  }
+
+  /* To remove border (that should probably be in Core anyway) */
+  table.has-data-cols {
+    /* To hide table headers (but not `display: none;`, for a11y) */
+    & thead tr {
+      position: absolute;
+      top: -9999px;
+      left: -9999px;
+    }
+
+    /* To make each cell behave like a "row" */
+    & td {
+      position: relative;
+      padding-left: 50%;
+    }
+
+    /* To label the cells */
+    /* RFE: Add `data-label` to each cell so we can use `attr(data-label)` */
+    & td:before {
+      content: attr(data-col);
+    }
+
+    & td:not(:first-child) th:first-child,
+    td:not(:first-child) td:first-child {
+      padding-inline-start: 50%;
+    }
+
+    & td:not(:last-child) th:last-child,
+    td:not(:last-child) td:last-child {
+      padding-inline-end: 50%;
+    }
+
+    & .c-pill {
+      min-width: unset;
+    }
+
+    & td.has-table {
+      padding: 10px;
+    }
+  }
+
+  table.has-table {
+    & tr :is(td,th):last-child {
+      border-bottom: unset;
+    }
+  }
+}

package/src/lib/_imports/elements/table--nested.css

@@ -29,42 +29,66 @@
   td.has-table { padding: 0; }
 }
 
-/* To replace any parent table columns above with nested table columns */
-/* FAQ: Pulls nested table up by the height of the parent table head */
-thead + tbody tr table {
-  --offset-distance: calc(
-    var(--cell-pad-vert) * 2
-    +
-    var(--cell-line-height) * var(--font-size)
-    +
-    var(--global-border-width--normal)
-  );
-  --offset: calc( var(--offset-distance) * -1 );
-
-  transform: translateY(var(--offset));
-  margin-bottom: var(--offset);
-}
-/* FAQ: Hides any parent table head underneath nested table head */
-thead + tbody tr:first-of-type thead {
-  background: var(--global-color-background--app);
-}
-/* FAQ: Hides all successive (thus redundant) nested table heads */
-thead + tbody tr:not(:first-of-type) thead {
-  visibility: hidden;
-}
 /* FAQ: Re-colors border of all successive nested rows (to match parent row) */
 thead + tbody tr:not(:first-of-type) tbody :is(td,th) {
   border-color: var(--global-color-primary--light);
 }
 
-/* To reduce inline padding
-   at start and end of nested table
-   unless at start or end of parent table */
-td:not(:first-child) th:first-child,
-td:not(:first-child) td:first-child {
-  padding-inline-start: 8px;
-}
-td:not(:last-child) th:last-child,
-td:not(:last-child) td:last-child {
-  padding-inline-end: 8px;
+table.nested-table {
+  border-bottom: unset;
+  border-left: var(--global-border-width--normal) solid var(--global-color-primary--light);
+  border-right: var(--global-border-width--normal) solid var(--global-color-primary--light);
 }
+
+@media (max-width: 767px) {
+
+  table.has-table {
+    & td:nth-child(3):not(:is(table.nested-table *) > *):before {
+      content: none;
+    }
+
+    & td:nth-child(3):not(:is(table.nested-table *) > *) {
+      padding-left: unset;
+      position: unset;
+
+      display: flex;
+      justify-content: center;
+      border-bottom: unset;
+    }
+
+    & td:last-child:not(:is(table.nested-table *) > *) {
+      padding-top: unset;
+    }
+  }
+
+  table.nested-table {
+    border: unset;
+
+    & tr {
+      border: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+    }
+
+    & tr:nth-child(odd) :is(th, td) {
+      background-color: rgba(var(--global-color-primary--light-rgb), 0.40)
+    }
+    & tr:nth-child(odd) :is(th, td):nth-child(even) {
+      background-color: var(--global-color-primary--x-light);
+    }
+
+    & tr:nth-child(even) :is(th, td):nth-child(odd) {
+      background-color: rgba( var(--global-color-primary--x-light-rgb), 0.50);
+    }
+    & tr:nth-child(even) > :is(th, td):nth-child(even) {
+      background-color: var(--global-color-primary--xx-light);
+    }
+
+    & tr:not(:last-of-type) {
+      border-bottom: unset;
+    }
+  }
+
+  tr:not(:last-of-type) {
+    border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+  }
+
+}

package/src/lib/_imports/elements/table.cms.css

@@ -4,16 +4,16 @@
 table,
 :--s-paragraph-table {
   --font-size: var(--global-font-size--medium);
-  --cell-line-height: 1.4; /* to match body */
+  line-height: 1.4; /* to match body */
 
-  border-bottom: var(--global-border-width--thick) solid var(--global-color-primary--dark);
+  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
 }
 
 /* TABLE WITH NO <thead> */
 /* To thicken top border */
 tbody:not(thead + tbody) > tr:first-child > :is(td,th),
 :--s-paragraph-table {
-  border-top-width: var(--global-border-width--thick);
+  border-top-width: var(--global-border-width--normal);
 }
 
 /* To match row height in design (~40px) */
@@ -21,3 +21,11 @@ tbody:not(thead + tbody) > tr:first-child > :is(td,th),
 :--s-paragraph-table p {
     padding-block: 10px;
 }
+
+
+@media (max-width: 767px) { 
+  table {
+    border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+  }
+
+}

package/src/lib/_imports/settings/font.css

@@ -6,9 +6,9 @@ Define standard fonts for a TACC website.
 Usage:
   ```
   .something {
-    font-family: var(--global-font-family--serif);
-    font-size: var(--global-font-size--normal);
-    font-weight: var(--global-font-weight--bold); /* or `var(--bold)` *\/
+    font-family: var(--serif);
+    font-size: var(--normal);
+    font-weight: var(--bold);
   }
   ```
 
@@ -23,26 +23,29 @@ Styleguide Settings.CustomProperties.Font
 
 :root {
   /* Family */
-  /* https://confluence.tacc.utexas.edu/x/nB4FDg */
-  --global-font-family--sans--cms: "Benton Sans", "Roboto", sans-serif;
-  --global-font-family--sans--portal: "Roboto", sans-serif;
-  --global-font-family--serif: sans-serif;
-  --global-font-family--mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-  --sans--cms: var(--global-font-family--sans--cms);
-  --sans--portal: var(--global-font-family--sans--portal);
-  --serif: var(--global-font-family--serif);
-  --mono: var(--global-font-family--mono);
+  /* https://tacc-main.atlassian.net/wiki/x/Nw9v */
+  --sans--cms: "Benton Sans", "Roboto", sans-serif;
+  --sans--portal: "Roboto", sans-serif;
+  --serif: sans-serif;
+  --mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 
   /* Weight */
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
-  /* NOTE: Long names to be consistent (opinions welcome) */
-  --global-font-weight--regular: 400;
-  --global-font-weight--medium: 500;
-  --global-font-weight--bold: 700;
-  --global-font-weight--black: 800;
-  /* NOTE: Short names to increase adoption (opinions welcome) */
-  --regular: var(--global-font-weight--regular);
-  --medium: var(--global-font-weight--medium);
-  --bold: var(--global-font-weight--bold);
-  --black: var(--global-font-weight--black);
+  --regular: 400;
+  --medium: 500;
+  --bold: 700;
+  --black: 800;
+}
+
+/* For backwards-compatibility with v0, v1, v2.23 */
+:root {
+  --global-font-family--sans--cms: var(--sans--cms);
+  --global-font-family--sans--portal: var(--sans--portal);
+  --global-font-family--serif: var(--serif);
+  --global-font-family--mono: var(--mono);
+
+  --global-font-weight--regular: var(--regular);
+  --global-font-weight--black: var(--black);
+  --global-font-weight--medium: var(--medium);
+  --global-font-weight--bold: var(--bold);
 }

package/src/lib/_imports/trumps/s-paragraph-table/readme.md

@@ -4,5 +4,4 @@ A [table]({{path './table' }}) that uses [paragraphs](https://developer.mozilla.
 >
 > - Text will not truncate. It will wrap.
 > - Only a single column is supported.
-
 <script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/elements/table.portal.css

@@ -1,6 +0,0 @@
-@import url("../trumps/s-truncated-table.css");
-
-/* Assume portal tables always supports truncation */
-table {
-  @extend .s-truncated-table;
-}

package/src/lib/_imports/trumps/s-truncated-table/config.yml

@@ -1,9 +0,0 @@
-context:
-  shouldSkipPattern: false
-  📝 shouldSkipPattern: because core-styles.base.css does not import this
-  data:
-    rows:
-      - paragraph: true
-      - paragraph: true
-      - paragraph: true
-      - paragraph: true

package/src/lib/_imports/trumps/s-truncated-table/readme.md

@@ -1,7 +0,0 @@
-A [table]({{path './table' }}) that uses a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element, but cell text should be truncated.
-
-> **ⓘ Notice**
->
-> - Text will truncate only if it is in a `<p>` tag.
-
-<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/trumps/s-truncated-table/s-truncated-table.hbs

@@ -1 +0,0 @@
-{{> @table class="s-truncated-table" }}

package/src/lib/_imports/trumps/s-truncated-table.css

@@ -1,6 +0,0 @@
-@import url("../tools/x-truncate.css");
-
-/* To truncate paragraphs in specific tables */
-.s-truncated-table p {
-  @extend %x-truncate--many-lines;
-}