@tacc/core-styles 2.18.0 → 2.20.0

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/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>