@tacc/core-styles 2.27.1 → 2.28.0

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

@@ -0,0 +1,7 @@
+.spinner-border {
+  --bs-spinner-width: 1em;
+  --bs-spinner-height: 1em;
+  --bs-spinner-border-width: 0.125em;
+
+  box-sizing: border-box;
+}

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