@tacc/core-styles 1.0.0 → 2.0.0

package/src/lib/_imports/components/c-data-list.css

@@ -35,9 +35,94 @@ Styleguide Components.DataList
 
 
 
+/* Tools */
+/* FAQ: These selectors:
+        - reduce actual selector complexity
+        - support old complex class names
+        - support new simple class names
+*/
+
+/* Base */
+@custom-selector :--data-list
+  .c-data-list,
+  .data-list,
+  [class*="data-list--"];
+
+/* Modifiers */
+@custom-selector :--data-list--horz
+  .c-data-list--is-horz,
+  .data-list--horz;
+@custom-selector :--data-list--vert
+  .c-data-list--is-vert,
+  .data-list--vert;
+@custom-selector :--data-list--wide
+  .c-data-list--is-wide,
+  .data-list--wide;
+@custom-selector :--data-list--narrow
+  .c-data-list--is-narrow,
+  .data-list--narrow;
+@custom-selector :--data-list--truncate-values
+  .c-data-list--should-truncate-values,
+  .data-list--truncate-values;
+
+/* Elements (Partials) */
+@custom-selector :--dlist-key dt;
+@custom-selector :--dlist-value dd;
+@custom-selector :--table-key th;
+@custom-selector :--table-value td;
+@custom-selector :--class-key [class*="data-list__key"];
+@custom-selector :--class-value [class*="data-list__value"];
+@custom-selector :--non-table-key
+  :--dlist-key,
+  :--class-key:not(th);
+@custom-selector :--non-table-value
+  :--dlist-value,
+  :--class-value:not(td);
+@custom-selector :--any-key
+  :--dlist-key,
+  :--table-key,
+  :--class-key;
+@custom-selector :--any-value
+  :--dlist-value,
+  :--table-value,
+  :--class-value;
+
+/* Elements (Complete) */
+@custom-selector :--data-list__dlist-key
+  :--data-list > :--dlist-key;
+@custom-selector :--data-list__dlist-value
+  :--data-list > :--dlist-value;
+@custom-selector :--data-list__table-key
+  :--data-list > tbody > :--table-key;
+@custom-selector :--data-list__table-value
+  :--data-list > tbody > :--table-value;
+@custom-selector :--data-list__class-key
+  :--class-key; /* parent is redundant, so reuse child selector */
+@custom-selector :--data-list__class-value
+  :--class-value; /* parent is redundant, so reuse child selector */
+@custom-selector :--data-list__non-table-key
+  :--data-list__dlist-key,
+  :--data-list__class-key;
+@custom-selector :--data-list__non-table-value
+  :--data-list__dlist-value,
+  :--data-list__class-value;
+@custom-selector :--data-list__key
+  :--data-list__dlist-key,
+  :--data-list__table-key,
+  :--data-list__class-key;
+@custom-selector :--data-list__value
+  :--data-list__dlist-value,
+  :--data-list__table-value,
+  :--data-list__class-value;
+
+
+
+
+
 /* Base i.e. Container */
 
-table.c-data-list {
+table:--data-list {
+  /* ???: Is this only for CEPv2? It appears useless in v1 */
   border-left: 0;
   border-right: 0;
 }
@@ -49,30 +134,29 @@ table.c-data-list {
 /* Elements i.e. Children */
 
 /* To truncate text */
-.c-data-list__key {
+:--data-list__key {
   @extend %x-truncate--one-line;
 }
 @supports(text-overflow: ':') {
-  .c-data-list__key:not(th) {
+  :--data-list__non-table-key {
     --text-overflow: ':';
   }
 }
 
 /* To space out elements (tables) */
-th.c-data-list__key,
-td.c-data-list__value {
+:--data-list__table-key,
+:--data-list__table-value {
   padding-block: 0.5em;
 }
 
 /* To add colon (non-tables) */
-.c-data-list__key:not(th)::after {
+:--data-list__non-table-key::after {
   content: ':';
   display: inline;
   padding-right: 0.25em;
 }
-
 /* To add space (instead of colon) (tables) */
-th.c-data-list__key {
+:--data-list__table-key {
   padding-right: 0.25em;
 }
 
@@ -80,24 +164,25 @@ th.c-data-list__key {
 
 
 /* Modifiers i.e. Types */
-/* FAQ: The `:not(table)` selectors avoid nesting caveats by using `>` */
+/* FAQ: The `__non-table-…` selectors avoid nesting caveats by using `>` */
+/* FAQ: The `table:--data-list-…` selectors also avoid nesting caveats */
 
 
 
 /* Horizontal */
 
-.c-data-list--is-horz {
+:--data-list--horz {
   display: flex;
   flex-direction: row;
 }
-dl.c-data-list--is-horz,
-.c-data-list--is-horz dd.c-data-list__value {
+dl:--data-list--horz,
+:--data-list__dlist-value {
   margin-bottom: 0; /* overwrite Bootstrap's `_reboot.scss` */
 }
 
 /* To propogate flexbox layout so cells are flex items */
-table.c-data-list--is-horz tr,
-table.c-data-list--is-horz tbody {
+table:--data-list--horz tr,
+table:--data-list--horz tbody {
   min-width: 0;
 
   display: flex;
@@ -105,31 +190,27 @@ table.c-data-list--is-horz tbody {
 }
 
 /* To space out key and value (non-tables) */
-.c-data-list--is-horz:not(table).c-data-list--is-narrow
-  > .c-data-list__key ~ .c-data-list__key::before {
+:--data-list--horz:--data-list--narrow
+  > :--non-table-key ~ :--non-table-key::before {
   padding-left: 0.5em;
   padding-right: 0.5em;
 }
-.c-data-list--is-horz:not(table).c-data-list--is-wide
-  > .c-data-list__key ~ .c-data-list__key::before {
+:--data-list--horz:--data-list--wide
+  > :--non-table-key ~ :--non-table-key::before {
   padding-left: 1em;
   padding-right: 1em;
 }
 /* To space out key and value (tables) */
-table.c-data-list--is-horz.c-data-list--is-narrow
-  tr:not(:first-child) th.c-data-list__key {
+table:--data-list--horz:--data-list--narrow tr:not(:first-child) :--table-key {
   padding-left: 0.5em;
 }
-table.c-data-list--is-horz.c-data-list--is-narrow
-  td.c-data-list__value {
+table:--data-list--horz:--data-list--narrow :--table-value {
   margin-right: 0.5em; /* use margin because text would show through padding */
 }
-table.c-data-list--is-horz.c-data-list--is-wide
-  tr:not(:first-child) th.c-data-list__key {
+table:--data-list--horz:--data-list--wide tr:not(:first-child) :--table-key {
   padding-left: 1em;
 }
-table.c-data-list--is-horz.c-data-list--is-wide
-  td.c-data-list__value {
+table:--data-list--horz:--data-list--wide :--table-value {
   margin-right: 1em; /* use margin because text would show through padding */
 }
 
@@ -137,23 +218,21 @@ table.c-data-list--is-horz.c-data-list--is-wide
 
 /* Vertical */
 
-table.c-data-list--is-vert {
+table:--data-list--vert {
   width: 100%;
   table-layout: fixed;
 }
 
 /* To overwrite Bootstrap `_reboot.scss` */
-.c-data-list--is-vert:not(table) > .c-data-list__value {
+:--data-list--vert > :--non-table-value {
   margin-left: 0;
 }
 
-/* To space out key and value (tables) */
-.c-data-list--is-vert:not(table).c-data-list--is-narrow > .c-data-list__value,
-table.c-data-list--is-vert.c-data-list--is-narrow td.c-data-list__value {
+/* To space out key and value */
+:--data-list--vert:--data-list--narrow :--any-value {
   padding-left: 0;
 }
-.c-data-list--is-vert:not(table).c-data-list--is-wide > .c-data-list__value,
-table.c-data-list--is-vert.c-data-list--is-wide td.c-data-list__value {
+:--data-list--vert:--data-list--wide :--any-value {
   padding-left: 2.5em; /* font-size 10px gives 40px (Firefox default margin) */
 }
 
@@ -168,29 +247,29 @@ table.c-data-list--is-vert.c-data-list--is-wide td.c-data-list__value {
 /* Element Borders */
 
 /* To remove most borders (tables) */
-table.c-data-list--is-vert th.c-data-list__key,
-td.c-data-list__value {
+table:--data-list--vert :--table-key,
+:--data-list__table-value {
   border-left: 0;
   border-right: 0;
 }
-table.c-data-list--is-horz th.c-data-list__key,
-table.c-data-list--is-horz td.c-data-list__value {
+table:--data-list--horz :--table-key,
+table:--data-list--horz :--table-value {
   border-top: 0;
   border-bottom: 0;
 }
 
 /* To keep real border between key and value (tables) */
 /* CAVEAT: Certain fonts may limit border height (see "Font Alignment") */
-table.c-data-list--is-horz tr:first-child th.c-data-list__key {
+table:--data-list--horz tr:first-child :--table-key {
   border-left: 0;
 }
-table.c-data-list--is-horz th.c-data-list__key {
+table:--data-list--horz :--table-key {
   border-right: 0;
 }
 
 /* To add fake border between key and value (non-tables) */
-.c-data-list--is-horz:not(table)
-  > .c-data-list__key ~ .c-data-list__key::before {
+:--data-list--horz
+  > :--non-table-key ~ :--non-table-key::before {
   content: '|';
   display: inline-block;
 }
@@ -200,7 +279,7 @@ table.c-data-list--is-horz th.c-data-list__key {
 /* Truncate Values */
 /* FAQ: Truncate when doing is unlikely to almost entirely obscure text */
 
-.c-data-list--should-truncate-values .c-data-list__value {
+:--data-list--truncate-values :--any-value {
   @extend %x-truncate--one-line;
 }
 
@@ -211,12 +290,12 @@ table.c-data-list--is-horz th.c-data-list__key {
 /* FAQ: "Benton Sans" needs this solution (as of 2021-07) */
 
 /* NOTE: This assumes key and value are flex items, not inline display */
-.c-data-list--is-horz:not(table) { align-items: baseline; }
+:--data-list--horz:not(table) { align-items: baseline; }
 
 /* CAVEAT: On Firefox (for "Benton Sans"), `align-items` is ineffectual */
 /* CAVEAT: This causes <th> and <td> cell borders to be offset */
-table.c-data-list--is-horz tr { align-items: baseline; }
+table:--data-list--is-horz tr { align-items: baseline; }
 
 /* NOTE: This assumes key and value are inline display, not flex items */
-table.c-data-list--is-vert th.c-data-list__key,
-table.c-data-list--is-vert td.c-data-list__value { vertical-align: baseline; }
+table:--data-list--is-vert :--table-key,
+table:--data-list--is-vert :--table-value { vertical-align: baseline; }

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

@@ -9,59 +9,12 @@ Styleguide Components.Footer
 */
 
 .c-footer {
-  /* TODO: Use global custom property when available */
-  --line-height: 1.5; /* value (not unit) from Bootstrap via `body` */
-  --min-line-count: 2;
-
-  /* The minimum height of the footer should be 2 lines of text, plus padding */
-  box-sizing: content-box;
-  min-height: calc(var(--line-height) * var(--min-line-count) * 1em);
-
-  /* Center content vertically (assuming unknown height) */
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  /* FAQ: Value was manually calculated, then rounded to nearest multiple of 5
-          i.e. `orig. value 12px` + `( total vertical padding of content / 2 )`
-          (vertical padding was added via `style` attributes on CMS markup) */
-  padding-top: 20px;
-  padding-bottom: 20px;
+  padding-top: 36px; /* HELP: value from developer, allow design to change */
+  padding-inline: 36px; /* mimic `.s-header.navbar { --nav-padding-horz }` */
 
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-primary--xx-dark);
 
-  font-size: 12px;
+  font-size: var(--global-font-size--small);
   text-align: center;
 }
-/* TODO: Use "custom media query" for each standard Bootstrap media query */
-@media only screen and (max-width: 640px) {
-  .c-footer {
-    padding-left: 5%;
-    padding-right: 5%;
-  }
-}
-@media only screen and (min-width: 641px) and (max-width: 767px) {
-  .c-footer {
-    padding-left: 7.5%;
-    padding-right: 7.5%;
-  }
-}
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-  .c-footer {
-    padding-left: 10%;
-    padding-right: 10%;
-  }
-}
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
-  .c-footer {
-    padding-left: 12.5%;
-    padding-right: 12.5%;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .c-footer {
-    padding-left: 15%;
-    padding-right: 15%;
-  }
-}

package/src/lib/_imports/components/c-form/c-form.hbs

@@ -1,3 +1,6 @@
+<p class="c-message c-message--scope-global">
+  This component currently depends on CMS stylesheets. When this component is used on the Portal, the font size should not be this small. When this component is proven to work independent of CMS, its demo font will not match CMS and this message will be removed.
+</p>
 <form action="" method="POST" enctype="multipart/form-data" class="c-form">
 
   <h3 class="c-form__title">Title of Form</h3>

package/src/lib/_imports/components/c-form/config.yml

@@ -1,2 +1,3 @@
 context:
-  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+  shouldLoadCMS: true 
+  📝 shouldLoadCMS: temporary dependence, until proven to work on Portal

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

@@ -130,7 +130,7 @@ ul.c-form__errors {
   @extend .c-message;
   @extend .c-message--type-error;
   @extend .c-message--scope-section;
-  @extend .c-message--scope-section.c-message--type-error;
+  @extend .c-message--type-error.c-message--scope-section;
 }
 .c-form__field .c-form__errors li {
   @extend .c-message;

package/src/lib/_imports/components/c-message/_c-message--classes.hbs

@@ -0,0 +1,5 @@
+| Class (Std.)             | Class (Alt.)             | Usage
+| - | - | - |
+| `.c-message`             | ⊘                        | base class required only for `c-message--` modifiers
+| `.c-message--type-...`   | `.message--...`          | express reason for message
+| `.c-message--scope-...`  | `.message--...`          | define context of message

package/src/lib/_imports/components/c-message/_c-message--intro.hbs

@@ -0,0 +1 @@
+To notify users for different reasons (type) and at different contexts (scope).

package/src/lib/_imports/components/c-message/_c-message--single.hbs

@@ -0,0 +1,3 @@
+<div class="c-message c-message--type-{{ type }} c-message--scope-{{ scope }}">
+  <p><strong>{{ title }}:</strong> {{{ content }}}</p>
+</div>

package/src/lib/_imports/components/c-message/c-message--scope.hbs

@@ -0,0 +1,15 @@
+<dl>
+  {{#each scopes}}
+  <dt>Scope <strong>{{ this.name }}</strong></dt>
+  <dd>
+    {{> @c-message--single scope=this.name
+        type="success" title="Success" content=this.content}}
+    {{> @c-message--single scope=this.name
+        type="info" title="Info" content=this.content}}
+    {{> @c-message--single scope=this.name
+        type="warning" title="Warning" content=this.content}}
+    {{> @c-message--single scope=this.name
+        type="error" title="Error" content=this.content}}
+  </dd>
+  {{/each}}
+</dl>

package/src/lib/_imports/components/c-message/c-message--scope.readme.md

@@ -0,0 +1,14 @@
+{{render '@c-message--intro'}}
+
+| Class (Std.)                | Class (Alt.)                | Context
+| - | - | - |
+| `.c-message--scope-inline`  | `.message--inline`          | inline text
+| `.c-message--scope-section` | `.message--section`         | wide block
+| `.c-message--scope-app`*    | `.message--app`*            | floating block*
+| `.c-message--scope-section` | `.message--section`         | site-wide banner
+
+<small>* Not implemented officially yet. Exists in Core Portal as a "toast notification".</small>
+
+---
+
+{{render '@c-message--classes'}}

package/src/lib/_imports/components/c-message/c-message--type.hbs

@@ -0,0 +1,15 @@
+<dl>
+  {{#each types }}
+  <dt>Type <strong>{{ this.name }}</strong></dt>
+  <dd>
+    {{> @c-message--single type=this.name
+        scope="inline" title="Inline" content=this.content}}
+    {{> @c-message--single type=this.name
+        scope="section" title="Section" content=this.content}}
+    <!--{{> @c-message--single type=this.name
+        scope="app" title="App" content=this.content}}-->
+    {{> @c-message--single type=this.name
+        scope="global" title="Global" content=this.content}}
+  </dd>
+  {{/each}}
+</dl>

package/src/lib/_imports/components/c-message/c-message--type.readme.md

@@ -0,0 +1,12 @@
+{{render '@c-message--intro'}}
+
+| Class (Std.)               | Class (Alt.)             | Reason
+| - | - | - |
+| `.c-message--type-success` | `.message--success`      | action completed
+| `.c-message--type-info`    | `.message--info`         | just info, no problem
+| `.c-message--type-warning` | `.message--warning`      | event could prevent function
+| `.c-message--type-error`   | `.message--error`        | event does prevent function
+
+---
+
+{{render '@c-message--classes'}}

package/src/lib/_imports/components/c-message/c-message.hbs

@@ -0,0 +1 @@
+<!-- SEE: c-message--type(-…), c-message--scope(-…) -->

package/src/lib/_imports/components/c-message/config.yml

@@ -0,0 +1,35 @@
+status: wip
+context:
+  types:
+    - name: success
+      content: Notify user of a successful event.
+    - name: info
+      content: Notify user of any details that are <strong>not</strong> a problem.
+    - name: warning
+      content: Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
+    - name: error
+      content: Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality.
+  scopes:
+    - name: inline
+      content: 	An inline message.
+    - name: section
+      content: A wide block message.
+    # - name: app
+    #   content: A floating block message.
+    - name: global
+      content: A site-wide banner message.
+variants:
+  - name: default
+    hidden: true
+  - name: type
+  - name: type-portal
+    label: Type (Portal)
+    view: 'c-message--type.hbs'
+    context:
+      shouldLoadPortal: true
+  - name: scope
+  - name: scope-portal
+    label: Scope (Portal)
+    view: 'c-message--scope.hbs'
+    context:
+      shouldLoadPortal: true

package/src/lib/_imports/components/c-message/demo.css

@@ -0,0 +1,12 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.c-message {
+  margin-top: 1em;
+}
+
+dt {
+  text-transform: capitalize;
+}
+dd {
+  margin-block: 2em;
+}

package/src/lib/_imports/components/c-message/readme.md

@@ -0,0 +1 @@
+To notify users for different reasons (type) and at different contexts (scope).

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

@@ -1,26 +1,17 @@
-/*
-Message
-
-Inform user about a temporary status.
-
-- .c-message--type-info - neither positive nor negative
-- .c-message--type-success - a positive status
-- .c-message--type-warning - a minor negative status
-- .c-message--type-danger - a major negative status
-- .c-message--scope-inline - an error for one interatction on a page
-- .c-message--scope-section - an error for a whole section of a page
-
-Reference:
-- https://getbootstrap.com/docs/4.0/components/alerts/
-
-Styleguide Components.Message
-*/
 @import url('../tools/x-link.css');
 
 
 
 /* Elements */
 
+/* To prevent excess space at top and bottom of message */
+.c-message > *:first-child {
+  margin-top: 0;
+}
+.c-message > *:last-child {
+  margin-bottom: 0;
+}
+
 /* To avoid clash of link color with message color */
 .c-message a,
 .c-message .c-button--as-link {
@@ -47,16 +38,20 @@ Styleguide Components.Message
 
 /* Structure */
 
-.c-message--scope-inline,
-.c-message--scope-section {
-  font-size: var(--global-font-size--small);
+.c-message--scope-inline {
+  /* no styles yet *//* FAQ: added so alt. class name @extend does not fail */
 }
 
-.c-message--scope-section {
+.c-message--scope-section,
+.c-message--scope-global {
   padding: 15px 20px;
   border: var(--global-border--thick);
 }
 
+.c-message--scope-global {
+  text-align: center;
+}
+
 /* Skin */
 
 .c-message--type-info {
@@ -72,19 +67,53 @@ Styleguide Components.Message
   color: var(--global-color-danger--dark);
 }
 
-.c-message--scope-section.c-message--type-info {
+.c-message--type-info.c-message--scope-section {
   background-color: var(--global-color-info--x-light);
   border-color: var(--global-color-info--normal);
 }
-.c-message--scope-section.c-message--type-success {
+.c-message--type-success.c-message--scope-section {
   background-color: var(--global-color-success--x-light);
   border-color: var(--global-color-success--normal);
 }
-.c-message--scope-section.c-message--type-warning {
+.c-message--type-warning.c-message--scope-section {
   background-color: var(--global-color-warning--x-light);
   border-color: var(--global-color-warning--normal);
 }
-.c-message--scope-section.c-message--type-error {
+.c-message--type-error.c-message--scope-section {
   background-color: var(--global-color-danger--x-light);
   border-color: var(--global-color-danger--normal);
 }
+
+.c-message--scope-global {
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-accent--secondary);
+  border-color: var(--global-color-primary--dark);
+}
+
+
+
+/* Alternate Class Names */
+
+[class*="message--"]:not(.c-message) { @extend .c-message; }
+
+.message--inline { @extend .c-message--scope-inline; }
+.message--section { @extend .c-message--scope-section; }
+.message--global { @extend .c-message--scope-global; }
+
+.message--success { @extend .c-message--type-success; }
+.message--info { @extend .c-message--type-info; }
+.message--warning { @extend .c-message--type-warning; }
+.message--error { @extend .c-message--type-error; }
+
+.message--success.message--section {
+  @extend .c-message--type-success.c-message--scope-section;
+}
+.message--info.message--section {
+  @extend .c-message--type-info.c-message--scope-section;
+}
+.message--warning.message--section {
+  @extend .c-message--type-warning.c-message--scope-section;
+}
+.message--error.message--section {
+  @extend .c-message--type-error.c-message--scope-section;
+}

package/src/lib/_imports/components/c-message.portal.css

@@ -0,0 +1,5 @@
+.c-message--scope-inline,
+.c-message--scope-section,
+.c-message--scope-global {
+  font-size: var(--global-font-size--small);
+}