@tacc/core-styles 2.24.1 → 2.25.1

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

@@ -3,8 +3,9 @@
 table,
 :--s-paragraph-table {
   --font-size: var(--global-font-size--small, 12px);
-  --cell-pad-vert: 1em;
-  --cell-pad-horz: 2em;
+  --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;
 
   /* To prevent borders from being hidden */
   /* SEE: TABLE WITH A <thead> */
@@ -13,10 +14,7 @@ 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 */
 }
@@ -28,7 +26,6 @@ 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__:
@@ -36,7 +33,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 */
@@ -53,7 +50,6 @@ 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);
@@ -67,18 +63,29 @@ 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);
 }
@@ -93,6 +100,8 @@ caption {
   padding-inline: var(--cell-pad-horz);
 }
 
+
+
 /* Cell Content */
 
 /* To override browser */
@@ -101,10 +110,9 @@ 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: 1em;
+  margin-bottom: 0.5em;
 }
 
 /* To override browser */
@@ -119,110 +127,7 @@ 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,66 +29,42 @@
   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);
 }
 
-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);
+/* 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;
 }
-
-@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);
-  line-height: 1.4; /* to match body */
+  --cell-line-height: 1.4; /* to match body */
 
-  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+  border-bottom: var(--global-border-width--thick) 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--normal);
+  border-top-width: var(--global-border-width--thick);
 }
 
 /* To match row height in design (~40px) */
@@ -21,11 +21,3 @@ 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/elements/table.portal.css

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

package/src/lib/_imports/tools/selectors.common.css

@@ -7,7 +7,8 @@ These are global selectors to target common elements.
 
 Styleguide Tools.CustomSelectors.MultipleElements
 */
-@custom-selector :--action   button, a;
-@custom-selector :--main-content   [role="main"], main;
-@custom-selector :--portal-content   #root;
-@custom-selector :--modal   .modal;
+@custom-selector :--action          button, a;
+@custom-selector :--main-content    [role="main"], main;
+@custom-selector :--portal-content  #root;
+@custom-selector :--modal           .modal;
+@custom-selector :--heading         :is(h1, h2, h3, h4, h5, h6);

package/src/lib/_imports/trumps/s-app-card/config.yml

@@ -0,0 +1,79 @@
+status: prototype
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this
+  shouldLoadBootstrap: true
+  📝 shouldLoadBootstrap: to use Bootstrap 4 grid for layout
+  supportStyles:
+    - ../../assets/components/bootstrap.row.css
+    - ../../assets/components/cortal.icon.css
+  can-wrap-in-a-link: false
+  data:
+    - title: ADCIRC
+      desc: Widely applied coastal circulation and coastal flooding model.
+      feats:
+        - Storm Surge
+        - Hurricane
+        - Flood
+      tags:
+        - Popular
+        - Open Source
+    - title: ANSYS
+      icon: ansys
+      desc: Widely applied coastal circulation and coastal flooding model.
+      tags:
+        - Licensed
+    - title: ClawPack
+      icon: clawpack
+      desc: Model and simulate coastal and oceanic processes.
+      feats:
+        - Tsunami
+        - Storm Surge
+        - Flood
+      tags:
+        - Open Source
+    - title: Hazmapper
+      icon: hazmapper
+      desc: Visualize, analyze, and share geospatial data.
+      tags:
+        - Open Source
+    - title: QGIS
+      icon: qgis
+      desc: Create, edit, visualize and analyze geospatial information.
+      tags:
+        - Licensed
+    - title: OpenSEES
+      icon: opensees
+      desc: Advanced seismic and structural analysis
+      feats:
+        - Earthquake
+      tags:
+        - Popular
+        - Open Source
+    - title: LS-DYNA
+      icon: lsdyna
+      desc: Conduct dynamic finite element analysis of complex physics
+      feats:
+        - Earthquake
+        - Landslide
+        - Tsunami
+        - Storm Surge
+      tags:
+        - Licensed
+    - title: OpenFOAM
+      icon: openfoam
+      desc: Simulate and analyze fluid flow and heat transfer
+      feats:
+        - Tsunami
+        - Storm Surge
+        - Flood
+        - Fire
+      tags:
+        - Open Source
+    - title: EE-UQ
+      desc: Determine the response of a structure to an earthquake.
+      feats:
+        - Earthquake
+      tags:
+        - SimCenter
+        - Open Source

package/src/lib/_imports/trumps/s-app-card/demo.css

@@ -0,0 +1,12 @@
+/* To add vertical gap in Bootstrap 4 grid */
+.col {
+    margin-bottom: var(--global-space--bootstrap-gap);
+}
+.row {
+    margin-bottom: calc( var(--global-space--bootstrap-gap) * -1 );
+}
+
+/* To stretch app card height to match col */
+.col .s-app-card {
+    height: 100%;
+}

package/src/lib/_imports/trumps/s-app-card/readme.md

@@ -0,0 +1 @@
+A card for an application e.g. a DesignSafe application button / card.

package/src/lib/_imports/trumps/s-app-card/s-app-card.hbs

@@ -0,0 +1,44 @@
+<div class="container">
+<div class="row row-col-stretch-content-y">
+  {{#each data}}
+    {{#if can-wrap-in-a-link}}
+    <a href="#" class="app-card">
+    {{else}}
+    <div class="col col-12 col-md-6 col-xl-4">
+    <div class="app-card">
+    {{/if}}
+      <h3>
+        {{#if icon}}<i class="icon icon-user"></i>{{/if}}
+        {{!-- FAQ: These custom icons are not available in Cortal --}}
+        {{!-- {{#if icon}}<i class="icon icon-{{icon}}"></i>{{/if}} --}}
+        {{title}}
+      </h3>
+      <p>{{desc}}</p>
+      <ul>
+        {{#each feats}}
+        <li>{{this}}</li>
+        {{else}}
+        <li>&nbsp;</li>
+        {{/each}}
+      </ul>
+      <ul>
+      {{#each tags}}
+        <li>
+        {{#if (eq this "Popular")}}<strong>{{this}}</strong>
+        {{else}}{{this}}
+        {{/if}}
+        </li>
+      {{/each}}
+      </ul>
+      {{#unless can-wrap-in-a-link}}
+        <a href="#">magic link</a>
+      {{/unless}}
+    {{#if can-wrap-in-a-link}}
+    </a>
+    {{else}}
+    </div>
+    </div>
+    {{/if}}
+  {{/each}}
+</div>
+</div>

package/src/lib/_imports/trumps/s-app-card.css

@@ -0,0 +1,111 @@
+@import url("../tools/selectors.common.css");
+
+
+
+@custom-selector :--s-app-card
+  .s-app-card,
+  .app-card,
+  [class*="app-card--"];
+
+@custom-selector :--s-app-card__title
+  :--s-app-card > :--heading;
+
+@custom-selector :--s-app-card__desc
+  :--s-app-card > p;
+
+@custom-selector :--s-app-card__list
+  :--s-app-card > ul:not(:last-of-type);
+
+@custom-selector :--s-app-card__tags
+  :--s-app-card > ul:last-of-type;
+@custom-selector :--s-app-card__tags--no-list
+  :--s-app-card > ul:only-of-type;
+
+@custom-selector :--s-app-card__link
+  :--s-app-card > a:last-child;
+
+
+
+/* Layout */
+:--s-app-card {
+  display: flex;
+  flex-direction: column;
+
+  text-align: center;
+}
+:--s-app-card__list {
+  flex-grow: 1;
+}
+
+
+
+/* Title */
+:--s-app-card__title > .icon {
+  vertical-align: middle;
+}
+
+
+
+/* Items */
+:--s-app-card__list {
+  padding-inline-start: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+
+  /* To achieve `height: min-content` and `space-around` */
+  margin-block: auto;
+  flex-grow: 0;
+}
+:--s-app-card__list > li {
+  display: inline;
+}
+:--s-app-card__list > li:not(:last-child)::after {
+  content: "•";
+  display: inline;
+  margin-inline: 0.25em;
+}
+
+
+
+/* Tags */
+:--s-app-card__tags {
+  list-style: none;
+  padding-inline-start: 0;
+  margin-block: unset;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+:--s-app-card__tags--no-list {
+  /* To fill parent with this item, but keep text aligned to bottom */
+  flex-grow: 1;
+  align-items: end;
+}
+:--s-app-card__tags > li:where(
+  :not(:first-child),
+  :only-child
+) {
+    margin-left: auto;
+}
+
+
+
+/* Links */
+
+/* To stretch a child link atop the entire card */
+:--s-app-card {
+  position: relative;
+}
+:--s-app-card__link {
+  position: absolute;
+  user-select: none;
+  color: transparent;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

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

@@ -4,4 +4,5 @@ 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/trumps/s-truncated-table/config.yml

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,7 @@
+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

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

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

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