@tacc/core-styles 2.19.0 → 2.21.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.css

@@ -104,7 +104,7 @@
 
 /* Elements */
 :--c-card > a:not(:--c-button) {
-    display: inline-block; /* FAQ: for actions that do not yet have this */
+    display: flex;
 }
 :--c-card > :is(:--action) {
     vertical-align: middle;
@@ -181,8 +181,129 @@
     margin-bottom: 2rem; /* to mimic <p> */
 }
 
-/* FAQ: Used on image cards for staff like on /education/k-12-students/ */
-/* SEE: https://www.tacc.utexas.edu/education/k-12-students/high-school-camps/gencyber/ */
-:is(.card, :--c-card) h4 {
-    margin-bottom: 0.375em;
-}
+/* 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/cortal.icon.css

@@ -43,7 +43,6 @@ Styleguide Components.Cortal.Icon
 /* To tweak action icon appearance and layout */
 :--c-card > :is(:--action) > .icon:first-child,
 p > :is(:--action):only-child > .icon:first-child {
-    vertical-align: middle;
     margin-right: 10px;
     font-size: 1.2em;
 }

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

@@ -53,3 +53,4 @@
 @import url("./trumps/u-empty.css");
 @import url("./trumps/s-irregular-links.css");
 @import url("./trumps/u-mailto-text-replace.css");
+@import url("./trumps/u-highlight.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/elements/sticky-footer/demo.css

@@ -2,6 +2,11 @@
 
 /* To style the footer, see trumps/s-footer.css */
 
+aside {
+  text-align: center;
+  font-style: italic;
+}
+
 footer {
   text-align: center;
   background-color: var(--global-color-primary--light);

package/src/lib/_imports/elements/sticky-footer/sticky-footer.hbs

@@ -1,6 +1,9 @@
 <main>
   <p>Sample body content. Footer is at bottom of page.</p>
 </main>
+<aside>
+  <p>Unexpected content.</p>
+</aside>
 <footer class="s-footer s-footer--thin">
   <p>
     Sample footer content.

package/src/lib/_imports/elements/sticky-footer.css

@@ -1,6 +1,6 @@
 /* To make a footer stick to bottom of page */
 /* https://css-tricks.com/a-clever-sticky-footer-technique/ */
-body > main + footer {
+body > main ~ footer {
   position: sticky;
   top: 100vh;
 }

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 {

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

@@ -15,6 +15,7 @@ Markup: s-header.html
 
 Styleguide Trumps.Scopes.Header
 */
+@import url("../tools/media-queries.css");
 @import url("./s-header.bootstrap.css");
 
 /* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)…
@@ -22,7 +23,9 @@ Styleguide Trumps.Scopes.Header
             UPDATE: As of PR #312, this has likely changed (untested). */
 
 .s-header {
-  font-size: 16px; /* NO-R/EM: Overwrite `bootstrap.3.3.7.css` */
+  font-size: var(--global-font-size--medium); /* NO-R/EM: Overwrite `bootstrap.3.3.7.css` */
+  font-weight: var(--bold);
+  letter-spacing: 0.025px; /* 14px * 0.025em equals design-requested 0.35px */
   line-height: 1.4; /* `body` line-height differs between CMS, Portal, Docs */
 
   /* FAQ: Asssigning this font is only necessary for the User Guide,
@@ -39,6 +42,13 @@ Styleguide Trumps.Scopes.Header
   border-bottom: 1px solid var(--header-major-border-color);
 }
 
+/* To enlarge height for all screen widths */
+@media (--medium-and-above)  {
+  .s-header {
+      height: 60px;
+  }
+}
+
 /* Affiliation */
 
 /* SEE: ../branding_logos.css */
@@ -46,6 +56,9 @@ Styleguide Trumps.Scopes.Header
 /* Logo */
 
 .s-header .navbar-brand {
+  display: grid;
+  align-content: center;
+
   /* If branding is short enough, then align position of first CMS nav link with Portal "Dashboard" header */
   /* WARNING: This is a manual value; if Portal interface changes, then this may need to change */
   min-width: 176px;
@@ -58,9 +71,15 @@ Styleguide Trumps.Scopes.Header
 
 /* Navigation */
 
+/* To stretch nav items to header height (while retaining vertical centering) */
+.s-header,
+.s-header .navbar-collapse {
+    align-items: stretch;
+}
+
 /* On wide viewport, prevent header resize from dynamic content */
 /* CAVEAT: This is only for Portal and Docs which dynamically load content */
-@media only screen and (min-width: 1201px) {
+@media (--wide-and-above) {
   .s-header.navbar {
     height: 50px;
   }
@@ -96,6 +115,18 @@ Styleguide Trumps.Scopes.Header
   /* If link text uses 2 lines, header grows taller (but it must not do so) */
   white-space: nowrap;
 }
+
+@media (--medium-and-above) {
+  .s-header .nav-item {
+      display: flex;
+  }
+}
+
+.s-header .nav-link {
+  display: flex;
+  align-items: center;
+}
+
 .s-header .nav-link:hover,
 .s-header .nav-link:focus,
 .s-header .nav-link:active,
@@ -117,13 +148,16 @@ Styleguide Trumps.Scopes.Header
 
 /* Tweak Bootstrap `_nav.scss` (which selects via `navbar-expand-` class) */
 .s-header[class*="navbar-expand-"] .navbar-nav .nav-link {
-  padding-top: 8px; /* NO-R/EM: 0.5rem (from Bootstrap) */
-  padding-bottom: 8px; /* NO-R/EM: 0.5rem (from Bootstrap) */
-
   padding-right: 14px; /* NO-R/EM: .875rem (overwrite Bootstrap) */
   padding-left: 14px; /* NO-R/EM: .875rem (overwrite Bootstrap) */
 }
 
+@media (--medium-and-below) {
+  .s-header[class*="navbar-expand-"] .navbar-nav .nav-link {
+      padding-block: 8px;
+  }
+}
+
 /* Search */
 
 /* Create a line between search bar and login */

package/src/lib/_imports/trumps/s-portal-nav.css

@@ -28,3 +28,11 @@ ul.s-portal-nav {
   /* To overwrite @tacc/core-styles */
   text-decoration: none; /* copied from Bootstrap */
 }
+
+
+.s-portal-nav .icon {
+  margin-right: 0.25em;
+
+  font-size: 1.5em;
+  vertical-align: middle;
+}

package/src/lib/_imports/trumps/u-highlight/readme.md

@@ -0,0 +1,5 @@
+To style the highlighting behind text.
+**Use Cases:**
+- The hero image text on the [TACC homepage](https://www.tacc.utexas.edu/)
+
+`display: inline` is required to keep highlight behind text only, instead of filling the container the text is within. 

package/src/lib/_imports/trumps/u-highlight/u-highlight.demo.css

@@ -0,0 +1,11 @@
+.u-highlight-container {
+    max-width: 800px;
+}
+
+.u-highlight {
+    padding-inline: 10px;
+    color: var(--global-color-primary--xx-light);
+    background-color: var(--global-color-primary--xxx-dark);
+    line-height: 1;
+    text-transform: uppercase;
+}

package/src/lib/_imports/trumps/u-highlight/u-highlight.hbs

@@ -0,0 +1,4 @@
+<div class="u-highlight-container">
+  <h2 class="u-highlight">Going Strong: Computational researchers present
+    findings at third Frontera User Meeting</h2>
+</div>

package/src/lib/_imports/trumps/u-highlight.css

@@ -0,0 +1,8 @@
+.u-highlight {
+  /* So wrapped inline text has consistent padding */
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+:is(h1, h2, h3, h4).u-highlight {
+	display: inline;
+}

package/src/lib/_imports/components/c-card/_c-card--one-image.hbs

@@ -1,7 +0,0 @@
-<article class="c-card c-card--image">
-  <h3>Card - Image</h3>
-  <!--<p>{{> @text-of-one-paragraph-short }}</p>-->
-  {{> @message tag="span" type="warning" scope="inline"
-    content='Styles not in Core yet. See <a href="https://dev.tup.tacc.utexas.edu/design-system/pattern-library-manual/c-card/">TUP Demo</a> instead.' }}
-  <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" />
-</article>

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

@@ -1,43 +0,0 @@
-<!-- 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`)
--->
-<nav id="s-header" class="s-header navbar navbar-expand-lg navbar-dark">
-  <a class="navbar-brand" href="/">
-    <img
-      src="/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">
-    {% include "./s-cms-nav.html" %} {% include "./s-portal-nav.html" %}
-  </div>
-</nav>