From f4a3060dd95fc17695fe103d9a697e998e7ab188 Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <63771558+R-Tomas-Gonzalez@users.noreply.github.com> Date: Fri, 3 Nov 2023 18:39:37 -0500 Subject: [PATCH] feat/tup 627: Migrate s-header to core-styles (#249) * Migrated s-header css from tup-ui (font-size, font-weight, letter-spacing). * Migrated s-header css from tup-ui (font-size, font-weight, letter-spacing). Forgot to build. Let's see if this works * Migrated s-header css from tup-ui (height at screen-size 992px) * Migrated s-header css from tup-ui (header and navbar-collapse, align-items: stretch) * Migrated s-header css from tup-ui (nav-items and nav-link: lines 115-124. display:flex, align-items: center) * Migrated s-header css from tup-ui (nav-bar nav-link at screen-size 992px: padding-block:0) * Migrated s-header css from tup-ui (navbar-brand: display:grid, align-content:center) * Migrated s-header css from tup-ui (dropdown-item focus, hover, and active states) * added comment for dropdown-item states * resolved comments per W.B. * added in media query to ONLY effect top-bottom padding for nav-links * chore: remove cruft in s-header (and re-order imports) --------- Co-authored-by: Wesley B <62723358+wesleyboar@users.noreply.github.com> --- dist/core-styles.header.css | 2 +- dist/trumps/s-header.bootstrap.css | 2 +- dist/trumps/s-header.css | 2 +- .../_imports/trumps/s-header.bootstrap.css | 4 +- src/lib/_imports/trumps/s-header.css | 44 ++++++++++++++++--- 5 files changed, 44 insertions(+), 10 deletions(-) diff --git a/dist/core-styles.header.css b/dist/core-styles.header.css index 1d4095b60..7738e7bf6 100644 --- a/dist/core-styles.header.css +++ b/dist/core-styles.header.css @@ -1,2 +1,2 @@ /*! @tacc/core-styles 2.19.0+ | MIT | github.com/TACC/Core-Styles */ -/*! core-styles.header.css */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:#f8f9fa;color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:#007bff;color:#fff;text-decoration:none}.s-header input{font-family:inherit}.s-header{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:1px solid var(--header-major-border-color);font-family:var(--global-font-family);font-size:16px;line-height:1.4}.s-header .navbar-brand{color:var(--header-text-color);margin-right:16px;min-width:176px;padding:0}@media only screen and (min-width:1201px){.s-header.navbar{height:50px}}.s-header.navbar{--nav-padding-vert:5px;--nav-padding-horz:36px;background-color:var(--header-bkgd-color);padding:var(--nav-padding-vert) var(--nav-padding-horz)}.s-header .nav-link{--line-height:24px;--border-width:4px;--border-offset:calc(var(--nav-padding-vert) - var(--border-width));--border-color:var(--global-color-secondary--light);line-height:var(--line-height);position:relative;top:var(--border-offset);white-space:nowrap}.s-header .nav-item.active .nav-link,.s-header .nav-link:active,.s-header .nav-link:focus,.s-header .nav-link:hover{border-color:var(--border-color);border-style:solid;border-width:0 0 var(--border-width);margin-bottom:calc(var(--border-width)*-1)}#s-header .nav-link,#s-header .nav-link>a{color:var(--header-text-color)}.s-header[class*=navbar-expand-] .navbar-nav .nav-link{padding:8px 14px}.s-header .s-search-bar~.s-portal-nav{border-left:1px solid var(--header-minor-border-color);margin-left:12px}.dropdown-menu{font-size:16px}.s-header [class*=fa-]{text-align:center;width:27px}.navbar-toggler-icon{filter:var(--menu-toggle-icon)}.s-portal-nav{text-transform:none}ul.s-portal-nav{margin-bottom:0;padding-left:0}.s-portal-nav a:hover{text-decoration:none}ul.s-cms-nav{margin-bottom:0;padding-left:0}.s-cms-nav a:hover{text-decoration:none}.branding-header{--branding-logo-height:24px;align-items:center;background-color:var(--global-color-primary--xx-dark);border-bottom:1px solid var(--global-color-primary--normal);color:var(--global-color-primary--xx-light);display:flex;height:49px;justify-content:center}.branding-seperator{border-left:1px solid var(--global-color-primary--xx-light);height:100%;margin:0 15px;max-height:var(--branding-logo-height);vertical-align:middle;width:1px}.branding-logo{border:none;height:30px;margin:0;padding:0}.branding-logo--short{height:var(--branding-logo-height)}.branding-logo--tall{height:35px}.branding-nsf{height:35px}.branding-tacc{height:var(--branding-logo-height)}.branding-utaustin{height:var(--branding-logo-height)}.portal-logo{border:none;float:left;height:40px;margin:0;padding:0} \ No newline at end of file +/*! core-styles.header.css */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:rgba(var(--global-color-primary--light-rgb),.3);color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:var(--global-color-accent--normal);color:#fff;text-decoration:none}.s-header input{font-family:inherit}.s-header{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:1px solid var(--header-major-border-color);font-family:var(--global-font-family);font-size:var(--global-font-size--medium);font-weight:var(--bold);letter-spacing:.025px;line-height:1.4}@media (min-width:992px){.s-header{height:60px}}.s-header .navbar-brand{align-content:center;color:var(--header-text-color);display:grid;margin-right:16px;min-width:176px;padding:0}.s-header,.s-header .navbar-collapse{align-items:stretch}@media (min-width:1200px){.s-header.navbar{height:50px}}.s-header.navbar{--nav-padding-vert:5px;--nav-padding-horz:36px;background-color:var(--header-bkgd-color);padding:var(--nav-padding-vert) var(--nav-padding-horz)}.s-header .nav-link{--line-height:24px;--border-width:4px;--border-offset:calc(var(--nav-padding-vert) - var(--border-width));--border-color:var(--global-color-secondary--light);line-height:var(--line-height);position:relative;top:var(--border-offset);white-space:nowrap}@media (min-width:992px){.s-header .nav-item{display:flex}}.s-header .nav-link{align-items:center;display:flex}.s-header .nav-item.active .nav-link,.s-header .nav-link:active,.s-header .nav-link:focus,.s-header .nav-link:hover{border-color:var(--border-color);border-style:solid;border-width:0 0 var(--border-width);margin-bottom:calc(var(--border-width)*-1)}#s-header .nav-link,#s-header .nav-link>a{color:var(--header-text-color)}.s-header[class*=navbar-expand-] .navbar-nav .nav-link{padding-left:14px;padding-right:14px}@media (max-width:991px){.s-header[class*=navbar-expand-] .navbar-nav .nav-link{padding-block:8px}}.s-header .s-search-bar~.s-portal-nav{border-left:1px solid var(--header-minor-border-color);margin-left:12px}.dropdown-menu{font-size:16px}.s-header [class*=fa-]{text-align:center;width:27px}.navbar-toggler-icon{filter:var(--menu-toggle-icon)}.s-portal-nav{text-transform:none}ul.s-portal-nav{margin-bottom:0;padding-left:0}.s-portal-nav a:hover{text-decoration:none}ul.s-cms-nav{margin-bottom:0;padding-left:0}.s-cms-nav a:hover{text-decoration:none}.branding-header{--branding-logo-height:24px;align-items:center;background-color:var(--global-color-primary--xx-dark);border-bottom:1px solid var(--global-color-primary--normal);color:var(--global-color-primary--xx-light);display:flex;height:49px;justify-content:center}.branding-seperator{border-left:1px solid var(--global-color-primary--xx-light);height:100%;margin:0 15px;max-height:var(--branding-logo-height);vertical-align:middle;width:1px}.branding-logo{border:none;height:30px;margin:0;padding:0}.branding-logo--short{height:var(--branding-logo-height)}.branding-logo--tall{height:35px}.branding-nsf{height:35px}.branding-tacc{height:var(--branding-logo-height)}.branding-utaustin{height:var(--branding-logo-height)}.portal-logo{border:none;float:left;height:40px;margin:0;padding:0} \ No newline at end of file diff --git a/dist/trumps/s-header.bootstrap.css b/dist/trumps/s-header.bootstrap.css index 8a9a8f811..dd86d5982 100644 --- a/dist/trumps/s-header.bootstrap.css +++ b/dist/trumps/s-header.bootstrap.css @@ -1 +1 @@ -/*! @tacc/core-styles 2.19.0+ | MIT | github.com/TACC/Core-Styles */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:#f8f9fa;color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:#007bff;color:#fff;text-decoration:none}.s-header input{font-family:inherit} \ No newline at end of file +/*! @tacc/core-styles 2.19.0+ | MIT | github.com/TACC/Core-Styles */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:rgba(var(--global-color-primary--light-rgb),.3);color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:var(--global-color-accent--normal);color:#fff;text-decoration:none}.s-header input{font-family:inherit} \ No newline at end of file diff --git a/dist/trumps/s-header.css b/dist/trumps/s-header.css index f554c8800..423b75414 100644 --- a/dist/trumps/s-header.css +++ b/dist/trumps/s-header.css @@ -1 +1 @@ -/*! @tacc/core-styles 2.19.0+ | MIT | github.com/TACC/Core-Styles */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:#f8f9fa;color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:#007bff;color:#fff;text-decoration:none}.s-header input{font-family:inherit}.s-header{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:1px solid var(--header-major-border-color);font-family:var(--global-font-family);font-size:16px;line-height:1.4}.s-header .navbar-brand{color:var(--header-text-color);margin-right:16px;min-width:176px;padding:0}@media only screen and (min-width:1201px){.s-header.navbar{height:50px}}.s-header.navbar{--nav-padding-vert:5px;--nav-padding-horz:36px;background-color:var(--header-bkgd-color);padding:var(--nav-padding-vert) var(--nav-padding-horz)}.s-header .nav-link{--line-height:24px;--border-width:4px;--border-offset:calc(var(--nav-padding-vert) - var(--border-width));--border-color:var(--global-color-secondary--light);line-height:var(--line-height);position:relative;top:var(--border-offset);white-space:nowrap}.s-header .nav-item.active .nav-link,.s-header .nav-link:active,.s-header .nav-link:focus,.s-header .nav-link:hover{border-color:var(--border-color);border-style:solid;border-width:0 0 var(--border-width);margin-bottom:calc(var(--border-width)*-1)}#s-header .nav-link,#s-header .nav-link>a{color:var(--header-text-color)}.s-header[class*=navbar-expand-] .navbar-nav .nav-link{padding:8px 14px}.s-header .s-search-bar~.s-portal-nav{border-left:1px solid var(--header-minor-border-color);margin-left:12px}.dropdown-menu{font-size:16px}.s-header [class*=fa-]{text-align:center;width:27px}.navbar-toggler-icon{filter:var(--menu-toggle-icon)} \ No newline at end of file +/*! @tacc/core-styles 2.19.0+ | MIT | github.com/TACC/Core-Styles */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:rgba(var(--global-color-primary--light-rgb),.3);color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:var(--global-color-accent--normal);color:#fff;text-decoration:none}.s-header input{font-family:inherit}.s-header{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:1px solid var(--header-major-border-color);font-family:var(--global-font-family);font-size:var(--global-font-size--medium);font-weight:var(--bold);letter-spacing:.025px;line-height:1.4}@media (min-width:992px){.s-header{height:60px}}.s-header .navbar-brand{align-content:center;color:var(--header-text-color);display:grid;margin-right:16px;min-width:176px;padding:0}.s-header,.s-header .navbar-collapse{align-items:stretch}@media (min-width:1200px){.s-header.navbar{height:50px}}.s-header.navbar{--nav-padding-vert:5px;--nav-padding-horz:36px;background-color:var(--header-bkgd-color);padding:var(--nav-padding-vert) var(--nav-padding-horz)}.s-header .nav-link{--line-height:24px;--border-width:4px;--border-offset:calc(var(--nav-padding-vert) - var(--border-width));--border-color:var(--global-color-secondary--light);line-height:var(--line-height);position:relative;top:var(--border-offset);white-space:nowrap}@media (min-width:992px){.s-header .nav-item{display:flex}}.s-header .nav-link{align-items:center;display:flex}.s-header .nav-item.active .nav-link,.s-header .nav-link:active,.s-header .nav-link:focus,.s-header .nav-link:hover{border-color:var(--border-color);border-style:solid;border-width:0 0 var(--border-width);margin-bottom:calc(var(--border-width)*-1)}#s-header .nav-link,#s-header .nav-link>a{color:var(--header-text-color)}.s-header[class*=navbar-expand-] .navbar-nav .nav-link{padding-left:14px;padding-right:14px}@media (max-width:991px){.s-header[class*=navbar-expand-] .navbar-nav .nav-link{padding-block:8px}}.s-header .s-search-bar~.s-portal-nav{border-left:1px solid var(--header-minor-border-color);margin-left:12px}.dropdown-menu{font-size:16px}.s-header [class*=fa-]{text-align:center;width:27px}.navbar-toggler-icon{filter:var(--menu-toggle-icon)} \ No newline at end of file diff --git a/src/lib/_imports/trumps/s-header.bootstrap.css b/src/lib/_imports/trumps/s-header.bootstrap.css index 07c4dc082..3aab8f75b 100644 --- a/src/lib/_imports/trumps/s-header.bootstrap.css +++ b/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 { diff --git a/src/lib/_imports/trumps/s-header.css b/src/lib/_imports/trumps/s-header.css index 70098f143..bd17f3666 100644 --- a/src/lib/_imports/trumps/s-header.css +++ b/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 */