@tacc/core-styles 2.18.0 → 2.20.0

package/src/lib/_imports/components/c-card--from-tup-cms.css

@@ -17,119 +17,4 @@
 
 :--c-card h4 {
     margin-bottom: 1em;
-}
-
-
-
-
-
-/* ADD CARD--IMAGE */
-
-/* Image */
-
-:--c-card--image {
-    display: grid;
-}
-
-:--c-card--image-top {
-    padding-top: 0;
-}
-:--c-card--image-left {
-    padding-left: 0;
-    padding-bottom: var(--global-space--pattern-pad);
-}
-:--c-card--image-right {
-    padding-right: 0;
-    padding-bottom: var(--global-space--pattern-pad);
-}
-:--c-card--image-bottom {
-    padding-bottom: 0;
-}
-
-
-
-/* Image: Left & Right */
-
-:--c-card--image-left,
-:--c-card--image-right {
-    --image-width: 50%;
-
-    grid-column-gap: var(--global-space--pattern-pad);
-
-    /* Repeat many times, because element count is unknown */
-    grid-template-rows: repeat(10, min-content);
-}
-:--c-card--image-left > img,
-:--c-card--image-right > img {
-    grid-row-start: 1;
-    grid-row-end: -1;
-
-    /* To remove card padding */
-    margin-block: calc( -1 * var(--global-space--pattern-pad) );
-}
-
-:--c-card--image-left {
-    grid-template-columns: var(--image-width) 1fr; /* to overwrite `.c-card` */
-}
-:--c-card--image-left > img {
-    grid-column-start: 1;
-    grid-column-end: span 1;
-}
-
-:--c-card--image-right {
-    grid-template-columns: 1fr var(--image-width); /* to overwrite `.c-card` */
-}
-:--c-card--image-right > img {
-    grid-column-start: 2;
-    grid-column-end: span 1;
-}
-
-
-
-/* Image: Top & Bottom */
-
-:--c-card--image-top,
-:--c-card--image-bottom {
-    --image-height: auto;
-    --global-space--pattern-pad: 15px;
-
-    /* Use extra columns to add horizontal padding */
-    grid-template-columns: var(--global-space--pattern-pad) 1fr var(--global-space--pattern-pad);
-    padding-inline: unset;
-}
-:--c-card--image-top > :not(img),
-:--c-card--image-bottom > :not(img) {
-    /* Span only columns for content */
-    grid-column-start: 2;
-    grid-column-end: -2;
-}
-:--c-card--image-top > img,
-:--c-card--image-bottom > img {
-    /* Span all columns, padding and content */
-    grid-column-start: 1;
-    grid-column-end: -1;
-}
-
-:--c-card--image-top {
-    /* Repeat many times, because element count is unknown */
-    grid-template-rows: repeat(10, min-content) var(--image-height);
-}
-:--c-card--image-top > img {
-    grid-row-start: 1;
-    margin-bottom: var(--global-space--pattern-pad);
-}
-:--c-card--image-bottom > :is(h1, h2, h3, h4, h5):first-of-type {
-    margin-top: unset; /* to avoid combining margin with image */
-}
-
-:--c-card--image-bottom {
-    /* Repeat many times, because element count is unknown */
-    grid-template-rows: var(--image-height) repeat(10, min-content);
-}
-:--c-card--image-bottom > img {
-    grid-row-end: -1;
-    margin-top: var(--global-space--pattern-pad);
-}
-:--c-card--image-bottom > p:last-of-type {
-    margin-bottom: unset; /* to avoid combining margin with image */
-}
+}

package/src/lib/_imports/components/c-card--frontera-about-page.css

@@ -5,6 +5,8 @@
 
   border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
   margin-bottom: 4.6rem;
+
+  padding: unset; /* overwrite .c-card */
 }
 
 

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

@@ -169,12 +169,6 @@
     margin-top: unset;
 }
 
-/* To make buttons bold */
-/* TODO: Determine whether this should apply to all CMS buttons */
-:--c-card a:--c-button {
-    font-weight: var(--bold);
-}
-
 /* To reduce font size of mailto link */
 :--c-card a[data-user][data-domain]::before {
     font-size: var(--global-font-size--medium);
@@ -186,3 +180,130 @@
     line-height: 1.7;
     margin-bottom: 2rem; /* to mimic <p> */
 }
+
+/* Elements: Lists */
+
+:--c-card ul {
+    /* list-style: none; *//* H.P. restored bullets, M.S. does not know */
+    padding-left: 1em; /* overwrite core-styles.cms */
+}
+/* To add space between line items */
+/* FAQ: Using margin and li:not(:first-of-type) because of multi-line items */
+:--c-card li:not(:first-of-type) {
+    margin-top: 0.5em;
+}
+:--c-card ul:last-child {
+    margin-bottom: 2rem;
+}
+
+
+
+
+/* Image */
+
+:--c-card--image {
+    display: grid;
+}
+
+:--c-card--image-top {
+    padding-top: 0;
+}
+:--c-card--image-left {
+    padding-left: 0;
+    padding-bottom: var(--global-space--pattern-pad);
+}
+:--c-card--image-right {
+    padding-right: 0;
+    padding-bottom: var(--global-space--pattern-pad);
+}
+:--c-card--image-bottom {
+    padding-bottom: 0;
+}
+
+
+
+/* Image: Left & Right */
+
+:--c-card--image-left,
+:--c-card--image-right {
+    --image-width: 50%;
+
+    grid-column-gap: var(--global-space--pattern-pad);
+
+    /* Repeat many times, because element count is unknown */
+    grid-template-rows: repeat(10, min-content);
+}
+:--c-card--image-left > img,
+:--c-card--image-right > img {
+    grid-row-start: 1;
+    grid-row-end: -1;
+
+    /* To remove card padding */
+    margin-block: calc( -1 * var(--global-space--pattern-pad) );
+}
+
+:--c-card--image-left {
+    grid-template-columns: var(--image-width) 1fr; /* to overwrite `.c-card` */
+}
+:--c-card--image-left > img {
+    grid-column-start: 1;
+    grid-column-end: span 1;
+}
+
+:--c-card--image-right {
+    grid-template-columns: 1fr var(--image-width); /* to overwrite `.c-card` */
+}
+:--c-card--image-right > img {
+    grid-column-start: 2;
+    grid-column-end: span 1;
+}
+
+
+
+/* Image: Top & Bottom */
+
+:--c-card--image-top,
+:--c-card--image-bottom {
+    --image-height: auto;
+    --global-space--pattern-pad: 15px;
+
+    /* Use extra columns to add horizontal padding */
+    grid-template-columns: var(--global-space--pattern-pad) 1fr var(--global-space--pattern-pad);
+    padding-inline: unset;
+}
+:--c-card--image-top > :not(img),
+:--c-card--image-bottom > :not(img) {
+    /* Span only columns for content */
+    grid-column-start: 2;
+    grid-column-end: -2;
+}
+:--c-card--image-top > img,
+:--c-card--image-bottom > img {
+    /* Span all columns, padding and content */
+    grid-column-start: 1;
+    grid-column-end: -1;
+}
+
+:--c-card--image-top {
+    /* Repeat many times, because element count is unknown */
+    grid-template-rows: repeat(10, min-content) var(--image-height);
+}
+:--c-card--image-top > img {
+    grid-row-start: 1;
+    margin-bottom: var(--global-space--pattern-pad);
+}
+:--c-card--image-bottom > :is(h1, h2, h3, h4, h5):first-of-type {
+    margin-top: unset; /* to avoid combining margin with image */
+}
+
+:--c-card--image-bottom {
+    /* Repeat many times, because element count is unknown */
+    grid-template-rows: var(--image-height) repeat(10, min-content);
+}
+:--c-card--image-bottom > img {
+    grid-row-end: -1;
+    margin-top: var(--global-space--pattern-pad);
+}
+:--c-card--image-bottom > p:last-of-type {
+    margin-bottom: unset; /* to avoid combining margin with image */
+}

package/src/lib/_imports/components/c-content-block/c-content-block.hbs

@@ -0,0 +1,33 @@
+<dl>
+    <dt>Staff Profile</dt>
+    <dd>
+        <div class="content-block">
+            <img class="img-fluid" />
+            <img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Exampleavatar.png"
+                title="University of Texas at Austin" class="img-fluid" />
+        </div>
+
+        <div class="content-block">
+            <h3>Education</h3>
+
+            <p><strong>Ph.D., Computer Engineering</strong><br>
+                Clemson University, 2000</p>
+
+            <p><strong>M.S., Computer Engineering</strong><br>
+                Clemson University, 1993</p>
+
+            <p><strong>B.S., Electrical Engineering</strong><br>
+                Clemson University, B.S. (Electrical Engineering), 1991</p>
+        </div>
+    </dd>
+
+    <dt>Newsletters</dt>
+    <dd>
+        <article class="content-block">
+            <h3>EPIC + WeTeach_CS Newsletter</h3>
+
+            <p>Stay connected with our biweekly <a href="#">newsletter</a>.</p>
+            <a class="c-button c-button--primary" href="#">Newsletter Signup</a>
+        </article>
+    </dd>
+</dl>

package/src/lib/_imports/components/c-content-block.css

@@ -0,0 +1,9 @@
+:is(.c-content-block, .content-block) {
+    margin-bottom: var(--global-space--bootstrap-gap);
+    padding: var(--global-space--pattern-pad);
+}
+
+:is(.c-content-block, .content-block) :is(h1, h2, h3, h4, h5, h6) {
+    border-left: var(--global-border-width--xx-thick) solid var(--global-color-accent--tertiary);
+    padding-left: 10px;
+}

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

@@ -0,0 +1,27 @@
+<dl>
+  <dt>Update</dt>
+  <dd>
+    <aside class="c-update">
+      <header class="c-update__header">
+        <h3 class="c-update__title">
+          <span class="c-pill c-pill--is-updated">Update</span>&nbsp;
+        </h3>
+        <span>Published:</span>&nbsp;
+        <time datetime="2023-10-13T14:27:18.637000">
+          October 13, 2023
+        </time>
+      </header>
+    </aside>
+  </dd>
+  <dd>
+  </dd>
+  <dt>Original</dt>
+  <dd>
+    <header class="c-update__header">
+      <span>Published:</span>&nbsp;
+      <time datetime="2023-10-03T17:55:22.513000">
+        October 03, 2023
+      </time>
+    </header>
+  </dd>
+</dl>

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

@@ -0,0 +1,3 @@
+status: ready
+context:
+  shouldLoadCMS: true

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

@@ -0,0 +1,2 @@
+- Will show "Update" pill and date
+- Will show "ORIGINAL MESSAGE" and date

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

@@ -0,0 +1,10 @@
+.c-update__header {
+    display: flex;
+    align-items: baseline;
+}
+
+.c-update__title {
+    margin-right: 0.5em;
+
+    text-transform: uppercase;
+}

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

@@ -10,8 +10,9 @@
 /* GENERICS */
 /* Mostly from Bootstrap */
 /* https://confluence.tacc.utexas.edu/x/b53tDg */
-@import url('./generics/fonts.css');
+@import url("./generics/fonts.css");
 @import url("./generics/pseudo-elements.css");
+@import url("./generics/attributes.css");
 
 /* ELEMENTS */
 /* To override Bootstrap */

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

@@ -26,17 +26,22 @@
 @import url("./objects/o-float-content.css");
 @import url("./objects/o-offset-content.css");
 @import url("./objects/o-section.css");
+@import url("./objects/o-heading-steps.css");
+
 
 /* COMPONENTS */
 @import url("./components/bootstrap.col.css");
 @import url("./components/bootstrap.modal--cms.css");
 @import url("./components/bootstrap.row.css");
+@import url("./components/c-content-block.css");
 @import url("./components/cortal.icon.css");
 @import url("./components/c-card.css");
 @import url("./components/c-form--cms.css");
 @import url("./components/c-message.css");
 @import url("./components/c-message--expanded.css");
 @import url("./components/c-recognition.css");
+@import url("./components/c-update.css");
+
 /* TODO: Move to TACC/Core-CMS-Resources:/frontera-cms
         or — alternatively — TACC/Core-CMS */
 @import url("./components/c-card--frontera-about-page.css");

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

@@ -29,7 +29,6 @@
 @import url("./components/admonition.css");
 @import url("./components/align.css");
 @import url("./components/c-card.css");
-@import url("./components/c-card--from-tup-cms.css");
 @import url("./components/c-card--docs.css");
 @import url("./components/tacc-docs.css");
 

package/src/lib/_imports/generics/attributes/attributes.hbs

@@ -0,0 +1,3 @@
+<time data-prefix="Published:" >
+  <span>OCTOBER 3, 2023</span>
+</time>

package/src/lib/_imports/generics/attributes/readme.md

@@ -0,0 +1 @@
+Renders data-prefix attribute value as prefix to text. Typically used in blog titles.

package/src/lib/_imports/generics/attributes.css

@@ -0,0 +1,12 @@
+/* To render data-prefix value as prefixed text */
+[data-prefix]::before {
+  display: inline-block;
+  content: attr(data-prefix);
+  margin-right: 0.25ch;
+
+  text-transform: none;
+}
+
+[disabled] {
+  pointer-events: none;
+}

package/src/lib/_imports/objects/o-heading-steps/config.yml

@@ -0,0 +1,3 @@
+status: ready
+context:
+  shouldLoadCMS: true

package/src/lib/_imports/objects/o-heading-steps/o-heading-steps.hbs

@@ -0,0 +1,14 @@
+<div class="heading-steps">
+    <article class="heading-steps__item">
+      <h3>Create an Account</h3>
+    </article>
+    <article class="heading-steps__item">
+      <h3>Request Allocations</h3>
+    </article>
+    <article class="heading-steps__item">
+      <h3>Learn How to Use Our Resources</h3>
+    </article>
+    <article class="heading-steps__item">
+          <h3>Work With Our Team</h3>
+    </article>
+</div>

package/src/lib/_imports/objects/o-heading-steps/readme.md

@@ -0,0 +1,2 @@
+Heading Steps will add numbers to the beginning of a heading. 
+A visual representation of this is shown in the numebers 1-4 listed in the example above.

package/src/lib/_imports/objects/o-heading-steps.css

@@ -0,0 +1,17 @@
+/* To add numbers to steps */
+.heading-steps,
+[class*="heading-steps--"] {
+  counter-reset: step;
+}
+
+.heading-steps :is(h1, h2, h3, h4, h5, h6),
+[class*="heading-steps--"] :is(h1, h2, h3, h4, h5, h6) {
+  counter-increment: step;
+}
+
+.heading-steps--root :is(h1, h2, h3, h4, h5, h6)::before,
+.heading-steps__item :is(h1, h2, h3, h4, h5, h6)::before {
+  content: counter(step) '. ';
+  color: var(--global-color-accent--secondary);
+  font-weight: var(--medium);
+}

package/src/lib/_imports/trumps/{s-cms-nav.html → _s-cms-nav/_s-cms-nav.hbs}

@@ -6,7 +6,7 @@ from https://frontera-portal.tacc.utexas.edu/. It has:
 - Bootstrap class names
 - extra markup (`a > span`)
 -->
-<ul class="s-cms-nav navbar-nav">
+<ul class="s-cms-nav navbar-nav mr-auto">
   <li class="nav-item active">
     <a class="nav-link" href="/"><span>Frontera</span></a>
   </li>

package/src/lib/_imports/trumps/{s-portal-nav.html → _s-portal-nav/_s-portal-nav.hbs}

@@ -9,18 +9,12 @@ from https://frontera-portal.tacc.utexas.edu/. It has:
 <ul class="s-portal-nav navbar-nav">
   <!-- When user is not logged in, there are zero dropdown(-*) classes -->
   <li class="nav-item dropdown">
-    <a
-      class="nav-link dropdown-toggle"
-      href="#"
-      data-toggle="dropdown"
-      aria-haspopup="true"
-      aria-expanded="false"
-    >
+    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <i class="icon icon-user"></i>
       <span>username</span>
       <span class="sr-only">Toggle Dropdown</span>
     </a>
-    <nav class="dropdown-menu dropdown-menu-right show">
+    <nav class="dropdown-menu dropdown-menu-right">
       <a class="dropdown-item" href="/workbench/dashboard">
         <i class="icon icon-dashboard"></i> My Dashboard
       </a>
@@ -35,4 +29,4 @@ from https://frontera-portal.tacc.utexas.edu/. It has:
       </a>
     </nav>
   </li>
-</ul>
+</ul>

package/src/lib/_imports/trumps/s-header/config.yml

@@ -0,0 +1,11 @@
+context:
+  shouldLoadBootstrap: true
+  shouldLoadCMS: true
+  supportStyles:
+    - ../../assets/core-styles.header.css
+    - ../../assets/core-styles.theme.default.css
+variants:
+  - name: with-branding
+    label: With Branding
+  - name: default
+    label: Without Branding

package/src/lib/_imports/trumps/s-header/s-header--with-branding.hbs

@@ -0,0 +1,32 @@
+<!-- FAQ:
+
+This is the markup of the #s-header, as of 2020-03-11,
+from https://frontera-portal.tacc.utexas.edu/. It has:
+
+- Bootstrap class names
+  (also via `./s-portal-nav.html`)
+  (also via `./s-cms-nav.html`)
+- Bootstrap attributes
+  (also via `./s-portal-nav.html`)
+- multiple internal scope (`s-`) classes
+  (only via `./s-portal-nav.html`)
+  (only via `./s-cms-nav.html`)
+- FontAwesome class names
+  (only via `./s-portal-nav.html`)
+- illegally-nested markup (`ul > div > li`)
+  (only via `./s-portal-nav.html`)
+-->
+<div class="branding-header">
+  <a href="https://www.nsf.gov/" target="_blank">
+    <img class="branding-logo branding-nsf" src="http://tacc.utexas.edu/static/site_cms/img/org_logos/nsf-white.png" alt="NSF Logo">
+  </a>
+  <span class="branding-seperator"></span>
+  <a href="https://www.tacc.utexas.edu/" target="_blank">
+    <img class="branding-logo branding-tacc" src="http://tacc.utexas.edu/static/site_cms/img/org_logos/tacc-white.png" alt="TACC Logo">
+  </a>
+  <span class="branding-seperator"></span>
+  <a href="https://www.utexas.edu/" target="_blank">
+    <img class="branding-logo branding-utaustin" src="http://tacc.utexas.edu/static/site_cms/img/org_logos/utaustin-white.png" alt="University of Texas at Austin Logo">
+  </a>
+</div>
+{{> @s-header}}

package/src/lib/_imports/trumps/s-header/s-header.demo.css

@@ -0,0 +1,10 @@
+:root {
+    --global-font-family: var(--global-font-family--sans);
+    --font-family-sans-serif: var(--global-font-family--sans);
+    --font-family-monospace: var(--global-font-family--mono);
+}
+
+main {
+    padding-block: unset;
+    width: unset;
+}

package/src/lib/_imports/trumps/s-header/s-header.hbs

@@ -0,0 +1,14 @@
+<nav id="s-header" class="s-header navbar navbar-expand-lg navbar-dark">
+  <a class="navbar-brand" href="/">
+    <img src="http://tacc.utexas.edu/static/site_cms/img/org_logos/portal.png" alt="Portal Logo"
+      class="nav-logo-double nav-logo-frontera-double" />
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExpandTarget"
+    aria-controls="navbarsExpandTarget" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="navbarsExpandTarget">
+    {{> @s-cms-nav}} {{> @s-portal-nav}}
+  </div>
+</nav>

package/src/lib/_imports/trumps/s-header.bootstrap.css

@@ -16,13 +16,13 @@ Styleguide Trumps.Scopes.Header.Bootstrap
 .s-header .dropdown-item:hover {
   color: #16181b;
   text-decoration: none;
-  background-color: #f8f9fa;
+  background-color: rgba(var(--global-color-primary--light-rgb), 0.3);
 }
 .s-header .dropdown-item.active,
 .s-header .dropdown-item:active {
   color: #fff;
   text-decoration: none;
-  background-color: #007bff
+  background-color: var(--global-color-accent--normal);
 }
 
 .s-header input {