@tacc/core-styles 2.23.1 → 2.24.1

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