@tacc/core-styles 2.27.0 → 2.28.0

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

@@ -289,7 +289,7 @@ a:--c-button--is-busy {
   opacity: 0.5;
 }
 :--c-button--is-busy :--c-button__text {
-  opacity: 0.3;
+  opacity: 0.5;
 }
 
 
@@ -337,3 +337,9 @@ a:--c-button--is-busy {
 :--c-button__icon--after {
   margin-left: 0.5em;
 }
+
+/* To position Bootstrap spinner inside TACC's flex-based button */
+:--c-button .spinner-border {
+  align-self: center;
+  margin-left: 0.5ch;
+}

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

@@ -11,7 +11,6 @@
   padding-inline: 0.75em;
   min-width: 6.5em;
 
-  line-height: 1.4;
   text-align: center;
   text-transform: none; /* avoid inheritance form context e.g. <h1> */
   border-radius: 0.5em;

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

@@ -31,10 +31,3 @@
 @import url("./components/c-card.css");
 @import url("./components/c-card--docs.css");
 @import url("./components/tacc-docs.css");
-
-/* TRUMPS */
-/* These styles from retired Core-CMS doc pages might be useful */
-/* ./trumps/s-document.css */
-/* ./trumps/s-guide-doc.css */
-/* ./trumps/s-inline-dl.css */
-/* ./trumps/u-nested-text-content.css */

package/src/lib/_imports/trumps/s-document.css

@@ -1,5 +1,5 @@
 /*
-Document
+(DEPRECATED) Document
 
 Styles for elements within a document page or section
 

package/src/lib/_imports/trumps/s-guide-doc.css

@@ -21,6 +21,30 @@ Styleguide Trumps.Scopes.GuideDoc
   text-align: center;
 }
 
+/* ELEMENTS: Description List */
+
+.s-guide-doc dt {
+  display: block;
+  float: left;
+
+  /* Remove space between <dt> and <dd> (from our styles) */
+  /* SEE: ../elments/html-elements.html */
+  margin-bottom: 0;
+
+  font-weight: var(--bold);
+}
+.s-guide-doc dt::after {
+  content: ':';
+
+  margin-inline-end: 0.25em;
+}
+.s-guide-doc dd {
+  clear: right;
+
+  /* Remove space between <dd>'s (from Bootstrap) */
+  margin-bottom: 0;
+}
+
 
 
 

package/src/lib/_imports/trumps/s-inline-dl.css

@@ -1,5 +1,5 @@
 /*
-"Inline" Description List
+(DEPRECATED) "Inline" Description List
 
 Of `<dl>` (description lists), make terms in-line with descritpions.
 

package/src/lib/_imports/trumps/tacc-search-bar.css

@@ -36,11 +36,6 @@ Styleguide Scopes.SearchBar
 
 /* Container */
 
-:host {
-  /* To remove all whitespace */
-  /* NOTE: A `font-size: 0` is not necessary if tag whitespace is removed */
-  font-size: 0;
-}
 :host [part="form"] {
   /* To ensure search field font matches Portal */
   /* GH-101: Set and rely on header font */

package/src/lib/_imports/trumps/u-nested-text-content.css

@@ -1,5 +1,5 @@
 /*
-Nested Text Content
+(DEPRECATED) Nested Text Content
 
 Any content that should be nested like a list (`<ol>`, `<ul>`) would be.
 

package/src/lib/_imports/vendors/README.md

@@ -0,0 +1,12 @@
+# TACC Core Styles - Library - Vendor
+
+Add and import these only when you need a subset of a vendor's stylesheet.
+
+## Example Use Case
+
+1. Client needs a TACC loading spinner.
+2. TACC only styles Boostrap's loading spinner.
+3. Client does not use Bootstrap.
+4. Add Bootstrap's loading spinner to this directory.
+5. Client loads Bootstrap's loading spinner from here.
+6. Client loads TACC skin for Bootstrap's loading spinner.

package/src/lib/_imports/vendors/bootstrap5/bootstrap5--border-spinner.hbs

@@ -0,0 +1,22 @@
+<dl>
+  <dt>Spinner</dt>
+  <dd>
+    <span class="spinner-border" aria-hidden="true"></span>
+  </dd>
+  <dt>Spinner in Bootstrap Button</dt>
+  <dd>
+    <button class="btn btn-primary" type="button" disabled>
+      <span>Login</span>
+      <span class="visually-hidden" role="status">Loading...</span>
+      <span class="spinner-border" aria-hidden="true"></span>
+    </button>
+  </dd>
+  <dt>Spinner in a TACC Button</dt>
+  <dd>
+    <button class="c-button c-button--primary c-button--is-busy" type="button" disabled>
+      <span>Login</span>
+      <span class="u-hide--visually" role="status">Loading...</span>
+      <span class="spinner-border" aria-hidden="true"></span>
+    </button>
+  </dd>
+</dl>

package/src/lib/_imports/vendors/bootstrap5/bootstrap5--border-spinner.readme.md

@@ -0,0 +1,3 @@
+[Bootstrap 5 Spinners: Border spinner](https://getbootstrap.com/docs/5.3/components/spinners/#border-spinner).
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/vendors/bootstrap5/bootstrap5.hbs

@@ -0,0 +1,7 @@
+Bootstrap v5 is used by TACC in:
+
+<ul>
+    <li>
+        <a href="https://github.com/TACC/tup-ui/blob/v1.1.10/libs/core-components/src/lib/LoadingSpinner/LoadingSpinner.global.css#L27-L42" target="_blank">TACC/tup-ui</a>
+    </li>
+<ul>

package/src/lib/_imports/vendors/bootstrap5/config.yml

@@ -0,0 +1,9 @@
+variants:
+  - name: border-spinner
+    status: prototype
+    context:
+      shouldLoadBootstrap5: true
+      supportStyles:
+        - ../../assets/trumps/u-hide.css
+        - ../../assets/vendors/bootstrap5--border-spinner.css
+        - ../../assets/components/bootstrap5.border-spinner.css

package/src/lib/_imports/vendors/bootstrap5--border-spinner.css

@@ -0,0 +1,48 @@
+/*
+Spinner (Bootstrap 5)
+
+Port only the Bootstrap 5 spinner styles that LoadingSpinner needs in tup-ui.
+
+- [Reactstrap: Components: Spinners](https://react-bootstrap.github.io/components/spinners/)
+- [Bootstrap 5: Components: Spinners](https://getbootstrap.com/docs/5.0/components/spinners/)
+
+Styleguide Component.Bootstrap5.Spinners
+*/
+/* https://github.com/twbs/bootstrap/blob/v5.3.3/scss/_spinners.scss */
+/* https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.css */
+.spinner-border {
+  display: inline-block;
+  width: var(--bs-spinner-width);
+  height: var(--bs-spinner-height);
+  vertical-align: var(--bs-spinner-vertical-align);
+  border-radius: 50%;
+  -webkit-animation: var(--bs-spinner-animation-speed) linear infinite
+    var(--bs-spinner-animation-name);
+  animation: var(--bs-spinner-animation-speed) linear infinite
+    var(--bs-spinner-animation-name);
+}
+@-webkit-keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.spinner-border {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-border-width: 0.25em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-border;
+  border: var(--bs-spinner-border-width) solid currentcolor;
+  border-right-color: transparent;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spinner-border {
+    --bs-spinner-animation-speed: 1.5s;
+  }
+}

package/dist/trumps/s-app-card/demo.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.27.0+ | MIT | github.com/TACC/Core-Styles */.col{margin-bottom:var(--global-space--bootstrap-gap)}.row{margin-bottom:calc(var(--global-space--bootstrap-gap)*-1)}.col .s-app-card{height:100%}

package/dist/trumps/s-app-card.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.27.0+ | MIT | github.com/TACC/Core-Styles */.app-card,.s-app-card,[class*=app-card--]{display:flex;flex-direction:column;text-align:center}.app-card>ul:not(:last-of-type),.s-app-card>ul:not(:last-of-type),[class*=app-card--]>ul:not(:last-of-type){flex-grow:1}.app-card>:is(h1,h2,h3,h4,h5,h6)>.icon,.s-app-card>:is(h1,h2,h3,h4,h5,h6)>.icon,[class*=app-card--]>:is(h1,h2,h3,h4,h5,h6)>.icon{vertical-align:middle}.app-card>ul:not(:last-of-type),.s-app-card>ul:not(:last-of-type),[class*=app-card--]>ul:not(:last-of-type){align-items:center;display:flex;flex-grow:0;flex-wrap:wrap;justify-content:center;margin-block:auto;padding-inline-start:0}.app-card>ul:not(:last-of-type)>li,.s-app-card>ul:not(:last-of-type)>li,[class*=app-card--]>ul:not(:last-of-type)>li{display:inline}.app-card>ul:not(:last-of-type)>li:not(:last-child):after,.s-app-card>ul:not(:last-of-type)>li:not(:last-child):after,[class*=app-card--]>ul:not(:last-of-type)>li:not(:last-child):after{content:"•";display:inline;margin-inline:.25em}.app-card>ul:last-of-type,.s-app-card>ul:last-of-type,[class*=app-card--]>ul:last-of-type{display:flex;flex-direction:row;justify-content:space-between}.app-card>ul:last-of-type,.s-app-card>ul:last-of-type,[class*=app-card--]>ul:last-of-type{list-style:none;margin-block:unset;padding-inline-start:0}.app-card>ul:last-of-type:not(.s-app-card>ul:not(:last-of-type)~*,.app-card>ul:not(:last-of-type)~*,[class*=app-card--]>ul:not(:last-of-type)~*),.s-app-card>ul:last-of-type:not(.s-app-card>ul:not(:last-of-type)~*,.app-card>ul:not(:last-of-type)~*,[class*=app-card--]>ul:not(:last-of-type)~*),[class*=app-card--]>ul:last-of-type:not(.s-app-card>ul:not(:last-of-type)~*,.app-card>ul:not(:last-of-type)~*,[class*=app-card--]>ul:not(:last-of-type)~*){align-items:end;flex-grow:1}.app-card>ul:last-of-type>:only-child,.s-app-card>ul:last-of-type>:only-child,[class*=app-card--]>ul:last-of-type>:only-child{margin-left:auto}.app-card,.s-app-card,[class*=app-card--]{position:relative}.app-card>a:last-child,.s-app-card>a:last-child,[class*=app-card--]>a:last-child{bottom:0;color:transparent;left:0;position:absolute;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}

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

@@ -1,95 +0,0 @@
-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.
-      types:
-        - Storm Surge
-        - Hurricane
-        - Flood
-      flags:
-        - name: Popular
-          type: other
-          should-highlight: true
-        - name: Open Source
-          type: repo
-    - title: ANSYS
-      icon: ansys
-      desc: Widely applied coastal circulation and coastal flooding model.
-      flags:
-        - name: Licensed
-          type: repo
-    - title: ClawPack
-      icon: clawpack
-      desc: Model and simulate coastal and oceanic processes.
-      types:
-        - Tsunami
-        - Storm Surge
-        - Flood
-      flags:
-        - name: SimCenter
-          type: other
-        - name: Licensed
-          type: repo
-    - title: Hazmapper
-      icon: hazmapper
-      desc: Visualize, analyze, and share geospatial data.
-      flags:
-        - name: Open Source
-          type: repo
-    - title: QGIS
-      icon: qgis
-      desc: Create, edit, visualize and analyze geospatial information.
-      flags:
-        - name: Licensed
-          type: repo
-    - title: OpenSEES
-      icon: opensees
-      desc: Advanced seismic and structural analysis
-      types:
-        - Earthquake
-      flags:
-        - name: Popular
-          type: other
-          should-highlight: true
-        - name: Open Source
-          type: repo
-    - title: LS-DYNA
-      icon: lsdyna
-      desc: Conduct dynamic finite element analysis of complex physics
-      types:
-        - Earthquake
-        - Landslide
-        - Tsunami
-        - Storm Surge
-      flags:
-        - name: Licensed
-          type: repo
-    - title: OpenFOAM
-      icon: openfoam
-      desc: Simulate and analyze fluid flow and heat transfer
-      types:
-        - Tsunami
-        - Storm Surge
-        - Flood
-        - Fire
-      flags:
-        - name: Open Source
-          type: repo
-    - title: EE-UQ
-      desc: Determine the response of a structure to an earthquake.
-      types:
-        - Earthquake
-      flags:
-        - name: SimCenter
-          type: other
-        - name: Open Source
-          type: repo

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

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

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

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

@@ -1,44 +0,0 @@
-<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="s-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 types}}
-        <li>{{this}}</li>
-        {{else}}
-        <li>&nbsp;</li>
-        {{/each}}
-      </ul>
-      <ul>
-      {{#each flags}}
-        <li>
-        {{#if this.should-highlight}}<strong>{{this.name}}</strong>
-        {{else}}{{this.name}}
-        {{/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

@@ -1,110 +0,0 @@
-@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__types
-  :--s-app-card > ul:not(:last-of-type);
-
-@custom-selector :--s-app-card__flags
-  :--s-app-card > ul:last-of-type;
-
-@custom-selector :--s-app-card__repo
-  :--s-app-card > li:last-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__types {
-  flex-grow: 1;
-}
-
-
-
-/* Title */
-:--s-app-card__title > .icon {
-  vertical-align: middle;
-}
-
-
-
-/* Items */
-:--s-app-card__types {
-  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__types > li {
-  display: inline;
-}
-:--s-app-card__types > li:not(:last-child)::after {
-  content: "•";
-  display: inline;
-  margin-inline: 0.25em;
-}
-
-
-
-/* Tags */
-:--s-app-card__flags {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-:--s-app-card__flags {
-  list-style: none;
-  padding-inline-start: 0;
-  margin-block: unset;
-}
-:--s-app-card__flags:not(:--s-app-card__types ~ *) {
-  /* To fill parent with this item, but keep text aligned to bottom */
-  flex-grow: 1;
-  align-items: end;
-}
-:--s-app-card__flags > :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;
-}