@tacc/core-styles 0.10.0 → 1.0.0

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

@@ -0,0 +1,54 @@
+/*! core-styles.base.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* SETTINGS */
+@import url("./core-styles.settings.css");
+
+/* GENERICS */
+/* Mostly from Bootstrap */
+/* https://confluence.tacc.utexas.edu/x/b53tDg */
+
+/* ELEMENTS */
+/* To override Bootstrap */
+/* NOTE: Load generic html-elements.css before specific elements/….css */
+@import url("./elements/html-elements.css");
+@import url("./elements/links.css");
+@import url("./elements/table.css");
+
+/* OBJECTS */
+@import url("./objects/o-fixed-header-table.css");
+@import url("./objects/o-float-content.css");
+@import url("./objects/o-grid.css");
+@import url("./objects/o-offset-content.css");
+@import url("./objects/o-section.css");
+@import url("./objects/o-site.css");
+@import url("./objects/o-table-wrap.css");
+
+/* COMPONENTS */
+@import url("./components/bootstrap.container.css");
+@import url("./components/bootstrap.figure.css");
+@import url("./components/bootstrap.modal.css");
+@import url("./components/c-button.css");
+@import url("./components/c-card.css");
+@import url("./components/c-callout.css");
+@import url("./components/c-data-list.css");
+@import url("./components/c-footer.css");
+@import url("./components/c-form.css");
+@import url("./components/c-nav.css");
+@import url("./components/c-page.css");
+@import url("./components/c-message.css");
+@import url("./components/c-recognition.css");
+@import url("./components/c-see-all-link.css");
+@import url("./components/cortal.icon.css");
+
+/* TRUMPS */
+@import url("./trumps/s-affixed-input-wrapper.css");
+@import url("./trumps/s-blockquote.css");
+@import url("./trumps/s-breadcrumbs.css");
+@import url("./trumps/s-footer.css");
+@import url("./trumps/u-empty.css");
+@import url("./trumps/s-irregular-links.css");
+@import url("./trumps/u-mailto-text-replace.css");

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

@@ -0,0 +1,34 @@
+/*! core-styles.cms.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* SETTINGS */
+/* To get these, client should load `./base.css` first */
+
+/* GENERICS */
+/* Mostly from Bootstrap */
+/* https://confluence.tacc.utexas.edu/x/b53tDg */
+
+/* ELEMENTS */
+/* To override Bootstrap */
+@import url("./elements/html-elements.cms.css");
+@import url("./elements/form.cms.css");
+
+/* OBJECTS */
+/* (none) */
+
+/* COMPONENTS */
+/* (none) */
+
+/* TRUMPS */
+/* To explain the in-limbo Core-CMS doc page styles */
+/* FAQ: Commented out because Core-CMS doc pages load these directly */
+/* IMPORTANT: If CMS docs are moved to TACC-Docs, then kill these stylesheets */
+/*
+@import url("_imports/trumps/s-document.css");
+@import url("_imports/trumps/s-guide-doc.css");
+@import url("_imports/trumps/s-inline-dl.css");
+@import url("_imports/trumps/u-nested-text-content.css");
+*/

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

@@ -0,0 +1,23 @@
+/*! core-styles.demo.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* SETTINGS */
+/* (none) */
+
+/* GENERICS */
+/* (none) */
+
+/* ELEMENTS */
+@import url("./elements/demo.css");
+
+/* OBJECTS */
+/* (none) */
+
+/* COMPONENTS */
+/* (none) */
+
+/* TRUMPS */
+/* (none) */

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

@@ -0,0 +1,37 @@
+/*! core-styles.header.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* SETTINGS */
+/* To get these, client should load `./base.css` first */
+
+/* GENERICS */
+/* Mostly from Bootstrap */
+/* https://confluence.tacc.utexas.edu/x/b53tDg */
+
+/* ELEMENTS */
+/* To override Bootstrap */
+/* (none) */
+
+/* OBJECTS */
+/* (none) */
+
+/* COMPONENTS */
+/* (none) */
+
+/* TRUMPS */
+/* FAQ: Because of third-party code and a rush to style the Frontera header
+        (which meant maintaining existing markup), scope classes were used for
+        - the header
+        - the Portal nav
+        - the CMS nav
+*/
+@import url("./trumps/s-header.css");
+@import url("./trumps/s-portal-nav.css");
+@import url("./trumps/s-cms-nav.css");
+
+/* UNORGANIZED */
+/* TODO: Convert to a component */
+@import url("./branding_logos.css");

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

@@ -0,0 +1,25 @@
+/*! core-styles.portal.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* SETTINGS */
+/* To get these, client should load `./base.css` first */
+
+/* GENERICS */
+/* Mostly from Bootstrap */
+/* https://confluence.tacc.utexas.edu/x/b53tDg */
+
+/* ELEMENTS */
+/* To override Bootstrap */
+/* (none) */
+
+/* OBJECTS */
+@import url("./objects/o-flex-item-table-wrap.css");
+
+/* COMPONENTS */
+@import url("./components/mui.tabs.css");
+
+/* TRUMPS */
+/* (none) */

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

@@ -0,0 +1,9 @@
+/*! core-styles.settings.css → */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+@import url("./settings/border.css");
+@import url("./settings/color.css");
+@import url("./settings/font.css");
+@import url("./settings/max-width.css");
+@import url("./settings/space.css");
+/*! ← core-styles.settings.css */

package/src/lib/_imports/elements/demo.css

@@ -0,0 +1,59 @@
+/* Organize */
+
+body > dl dl {
+  margin-block: 0;
+}
+body > dl dt,
+body > dl dd {
+  font-family: Arial, sans;
+  color: #484848;
+  line-height: normal;
+}
+body > dl dt {
+  font-weight: normal;
+  margin-bottom: 10px;
+}
+body > dl dt:not(:first-of-type) {
+  margin-top: 20px;
+}
+body > dl dd {
+  margin-bottom: 10px;
+  margin-left: 25px;
+}
+body > dl dd > * {
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+
+
+/* Debug */
+
+body > details:last-of-type {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 1;
+
+  padding: 1em;
+  background-color: #222;
+  color: lime;
+
+  text-align: right;
+  direction: rtl;
+
+  font-family: var(--global-font-family--mono);
+}
+body > details[open]:last-of-type { opacity: 1; }
+body > details:not([open]):last-of-type { opacity: 0.5; }
+
+body > details:last-of-type summary {
+  font-weight: bold;
+}
+body > details:last-of-type dt { font-weight: normal; }
+body > details:last-of-type dd { font-weight: bold; }
+body > details:last-of-type dd {
+  line-height: 1.4;
+  min-height: 1.4em;
+  width: 4ch;
+}

package/src/lib/_imports/elements/form.cms/readme.md

@@ -0,0 +1,16 @@
+[Form elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms) allow users to enter and submit data.
+
+```
+<form> <fieldset> <legend> <label> <input> <select> <optgroup> <option> <textarea> <button> <output> <progress> <meter> <datalist>
+```
+
+> **⚠️ WARNING**
+>
+> These overwrite, but may accidentally rely on, [Bootstrap Reboot: Forms](https://getbootstrap.com/docs/4.0/content/reboot/#forms).
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

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

@@ -1,26 +1,3 @@
-/*
-Forms
-
-Elements that create forms which the user can fill out and submit to the Web site or application.
-
-```
-<form> <fieldset> <legend> <label> <input> <select> <optgroup> <option> <textarea> <button> <output> <progress> <meter> <datalist>
-```
-
-> **⚠️ Warning**
->
-> Relies on Bootstrap.
-
-Reference:
-
-- [HTML element reference: Forms | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms)
-- [Bootstrap Reboot: Forms](https://getbootstrap.com/docs/4.0/content/reboot/#forms)
-
-Styleguide Elements.Forms
-*/
-
-
-
 /* Fonts */
 
 /* FAQ: Setting font on form would erroneously apply to links and buttons */
@@ -37,6 +14,7 @@ textarea {
 
 label {
   font-size: var(--global-font-size--small);
+  font-weight: var(--medium);
 
   line-height: normal;
   margin-bottom: 0.75em;
@@ -72,6 +50,10 @@ textarea {
 ::placeholder {
   color: var(--global-color-primary--dark);
 }
+input, select {
+  height: 1.4em;
+  box-sizing: content-box;
+}
 
 input[type="time"],
 input[type="date"] {

package/src/lib/_imports/elements/html-elements.cms.css

@@ -14,9 +14,6 @@ Reference:
 
 Styleguide Elements.MainSectioningRoots
 */
-@import url('../settings/color.css');
-@import url('../settings/font.css');
-@import url('../settings/space.css');
 
 html {
   /* Set base font but support user-defined browser font size */
@@ -31,6 +28,8 @@ body {
 }
 
 body {
+  margin: 0;
+
   /* To avoid negative whitespace at right on horz scroll on tiny screen */
   min-width: 290px; /* developer-decided value */
 
@@ -156,7 +155,7 @@ dt {
   font-weight: initial; /* overwrite Bootstrap */
 }
 
-li {
+li:not(td li) {
   line-height: 1.6;
 }
 
@@ -175,10 +174,10 @@ hr {
 /*
 Inline Text Semantics
 
-Elements that define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
+Elements that define the meaning, structure, or style of a word, line, or any arbitrary piece of text. (The [<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) is styled in `../links.css`.)
 
 ```
-<a> <abbr> <b> <bdi> <bdo> <br> <cite> <code> <data> <dfn> <em> <i> <kbd> <mark> <q> <rb> <rp> <rt> <rtc> <ruby> <s> <samp> <small> <span> <strong> <sub> <sup> <time> <u> <var> <wbr>
+<abbr> <b> <bdi> <bdo> <br> <cite> <code> <data> <dfn> <em> <i> <kbd> <mark> <q> <rb> <rp> <rt> <rtc> <ruby> <s> <samp> <small> <span> <strong> <sub> <sup> <time> <u> <var> <wbr>
 ```
 
 Reference:
@@ -188,21 +187,6 @@ Reference:
 Styleguide Elements.InlineTextSemantics
 */
 
-/* Links */
-
-a {
-  color: var(--global-color-link-on-light--normal);
-  text-decoration-thickness: var(--global-border-width--normal);
-}
-a:hover {
-  text-decoration-line: underline;
-  text-decoration-style: dashed;
-}
-a:focus {
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
-}
-
 /* Monospace */
 
 var,
@@ -221,7 +205,7 @@ code kbd {
 
 /* Code (<code>, <samp>, <pre>) */
 
-/* Code: any content or context) */ code,
+/* Code: any content or context */ code,
 /* Code: content has only output */ pre > samp {
   /* Undo Bootstrap */
   color: unset;
@@ -347,37 +331,6 @@ Styleguide Elements.DemarcatingEdits
 
 
 
-/*
-Table Content
-
-Elements that create and handle tabular data.
-
-```
-<table> <thead> <tbody> <th> <td> <tfoot> <colgroup> <col> <caption>
-```
-
-Reference:
-
-- [HTML element reference: Table content | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content)
-
-Styleguide Elements.Tables
-*/
-
-table,
-td,
-th {
-  border: var(--global-border--normal);
-}
-
-caption {
-  font-size: var(--global-font-size--small);
-  text-align: unset; /* undo Bootstrap _reboot.css */
-}
-
-
-
-
-
 /*
 Interactive Elements
 

package/src/lib/_imports/elements/html-elements.css

@@ -0,0 +1,67 @@
+/*
+Text Content
+
+Elements that create forms which allow users to enter and submit data.
+
+```
+<form> <fieldset> <legend> <label> <input> <select> <optgroup> <option> <textarea> <button> <output> <progress> <meter> <datalist>
+```
+
+Reference:
+
+- [HTML element reference: Forms | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms)
+
+Styleguide Elements.Forms
+*/
+
+/* To mimic Bootstrap */
+button, input, optgroup, select, textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/*
+Text Content
+
+Elements that organize blocks or sections of content placed (includes lists).
+
+```
+<blockquote> <dd> <div> <dl> <dt> <figcaption> <figure> <hr> <li> <ol> <p> <pre> <ul>
+```
+
+Reference:
+
+- [HTML element reference: Text content | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content)
+
+Styleguide Elements.TextContent
+*/
+
+/* To mimic Bootstrap */
+dl, ol, ul {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/*
+Interactive Elements
+
+Elements that help to create interactive user interface objects.
+
+```
+<details> <summary> <dialog> <menu>
+```
+
+Reference:
+
+- [HTML element reference: Interactive elements | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Interactive_elements)
+
+Styleguide Elements.Interactive
+*/
+
+/* To mimic Bootstrap's <p> and <ul> margins */
+details {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}

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

@@ -0,0 +1,3 @@
+context:
+  supportStyles:
+    - /assets/tools/x-link/demo.css

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

@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="{{path '/trumps/s-irregular-links.css'}}" />
-
 <dl>
   <dt>Standard</dt>
   <dd>

package/src/lib/_imports/elements/links.css

@@ -1,11 +1,11 @@
 @import url('../tools/x-link.css');
 
-a {
+a:not(.c-button) {
   @extend .x-link;
 }
-a:hover {
+a:not(.c-button):hover {
   @extend .x-link--hover;
 }
-a:active {
+a:not(.c-button):active {
   @extend .x-link--active;
 }

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

@@ -0,0 +1,146 @@
+context:
+  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+variants:
+  - name: default
+    label: Basic
+    context:
+      data:
+        cols:
+          - ID
+          - Name
+          - Size
+          - Time
+          - Actions
+        rows:
+          - id: n234as
+            name-link: apple-sauce
+            custom-1: 0.5 KB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 56l810
+            name-link: milk-shake-032
+            custom-1: 300.0 KB
+            time: 03/22/2021 05:23:01
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 3r56xc
+            name-link: white-candy-5
+            custom-1: 1.5 MB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+  - name: paragraph
+    context:
+      data:
+        cols:
+          - Name
+          - Summary
+          - Actions
+        rows:
+          - name: apple-sauce
+            paragraph: true
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - name: milk-shake-032
+            paragraph: true
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - name: white-candy-5
+            paragraph: true
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+  - name: nested
+    context:
+      data:
+        has-table: true
+        cols:
+          - Title
+          - Principal Investigator
+          - Team
+          - Usage
+        rows:
+          - id: Copper
+            name: Paul Bunyan
+            name-link: View Team
+            table:
+              cols:
+                - Systems
+                - Awarded
+                - Remaining
+                - Expires
+              rows:
+                - name: Corral
+                  custom-1: 50 GB
+                  custom-2: <span class="c-pill">13 GB</span>
+                  time: 12/01/2019 11:04:19
+                - name: Hikari
+                  custom-1: 21 SU
+                  custom-2: <span class="c-pill">1.5 SU</span>
+                  time: 03/22/2021 05:23:01
+                - name: Ranch
+                  custom-1: 1 TB
+                  custom-2: <span class="c-pill">932 GB</span>
+                  time: 12/01/2019 11:04:19
+          - id: Vermillion
+            name: Nathan Fillion
+            name-link: View Team
+            table:
+              cols:
+                - Systems
+                - Awarded
+                - Remaining
+                - Expires
+              rows:
+                - name: Corral
+                  custom-1: 50 GB
+                  custom-2: <span class="c-pill">13 GB</span>
+                  time: 12/01/2019 11:04:19
+                - name: Hikari
+                  custom-1: 21 SU
+                  custom-2: <span class="c-pill">1.5 SU</span>
+                  time: 03/22/2021 05:23:01
+                - name: Ranch
+                  custom-1: 1 TB
+                  custom-2: <span class="c-pill">932 GB</span>
+                  time: 12/01/2019 11:04:19
+          - id: Emerald
+            name: Wesley Snipes
+            name-link: View Team
+            table:
+              cols:
+                - Systems
+                - Awarded
+                - Remaining
+                - Expires
+              rows:
+                - name: Corral
+                  custom-1: 50 GB
+                  custom-2: <span class="c-pill">13 GB</span>
+                  time: 12/01/2019 11:04:19
+                - name: Hikari
+                  custom-1: 21 SU
+                  custom-2: <span class="c-pill">1.5 SU</span>
+                  time: 03/22/2021 05:23:01
+                - name: Ranch
+                  custom-1: 1 TB
+                  custom-2: <span class="c-pill">932 GB</span>
+                  time: 12/01/2019 11:04:19

package/src/lib/_imports/elements/table/readme.md

@@ -0,0 +1,12 @@
+[Table elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content) create and handle tabular data.
+
+```
+<table> <thead> <tbody> <th> <td> <tfoot> <colgroup> <col> <caption>
+```
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/elements/table/table--nested.readme.md

@@ -0,0 +1,12 @@
+A [table]({{path './table' }}) nested inside a [table]({{path './table' }}).
+
+> **⚠️ Workaround**
+>
+> Nested tables require `.has-table` class on **both** parent table **and** containing cell.
+>
+> <small>This is only **until** [`:has()` pseudo-class support](https://caniuse.com/css-has) exists on all major browsers.</small>
+
+| Class | Example | On
+| - | - | - |
+| `.has-table` | `<table class="has-table"> … </table>` | parent table
+| `.has-table` | `<td class="has-table"> … </td>`    | cell that contains nested table