@tacc/core-styles 2.25.0 → 2.25.2

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/trumps/s-header.css

@@ -42,13 +42,6 @@ Styleguide Trumps.Scopes.Header
   border-bottom: 1px solid var(--header-major-border-color);
 }
 
-/* To enlarge height for all screen widths */
-@media (--medium-and-above)  {
-  .s-header {
-      height: 60px;
-  }
-}
-
 /* Affiliation */
 
 /* SEE: ../branding_logos.css */
@@ -77,14 +70,6 @@ Styleguide Trumps.Scopes.Header
     align-items: stretch;
 }
 
-/* On wide viewport, prevent header resize from dynamic content */
-/* CAVEAT: This is only for Portal and Docs which dynamically load content */
-@media (--wide-and-above) {
-  .s-header.navbar {
-    height: 50px;
-  }
-}
-
 .s-header.navbar {
   /* Make horizontal padding match the horizontal content buffer in Portal */
   /* FAQ: The `calc()` keeps track of disparate source of space values */
@@ -96,6 +81,17 @@ Styleguide Trumps.Scopes.Header
   background-color: var(--header-bkgd-color);
   padding: var(--nav-padding-vert) var(--nav-padding-horz);
 }
+/* On wide viewport, prevent header resize from dynamic content */
+@media (--medium-and-above) {
+  .s-header.navbar {
+    --logo-height: 60px;
+
+    min-height: var(--logo-height);
+  }
+  .s-header > .navbar-brand {
+    min-height: calc( var(--logo-height) - var(--nav-padding-vert) * 2 );
+  }
+}
 
 /* Navigation: Links */
 

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;
+}