diff --git a/dist/core-styles.header.css b/dist/core-styles.header.css index 64243feee..5bd136c83 100644 --- a/dist/core-styles.header.css +++ b/dist/core-styles.header.css @@ -1,2 +1,2 @@ /*! @tacc/core-styles 2.39.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:hsla(0,0%,84%,.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{--height:50px;--header-major-border-width:1px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:var(--header-major-border-width) 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}.s-header .navbar-brand{height:calc(var(--height) - var(--nav-padding-vert)*2 - var(--header-major-border-width))}.s-header .navbar-brand{flex-basis:175px;flex-shrink:0;margin-right:15px;padding:unset}.s-header,.s-header .navbar-collapse{align-items:stretch}.s-header{--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{--border-width:4px;border-color:transparent;border-style:solid;border-width:0 0 var(--border-width);white-space:nowrap}@media (min-width:576px){.navbar-expand-sm.s-header .nav-item{display:flex}.navbar-expand-sm.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width))}}@media (min-width:768px){.navbar-expand-md.s-header .nav-item{display:flex}.navbar-expand-md.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width))}}@media (min-width:992px){.navbar-expand-lg.s-header .nav-item{display:flex}.navbar-expand-lg.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width))}}@media (min-width:1200px){.navbar-expand-xl.s-header .nav-item{display:flex}.navbar-expand-xl.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width))}}.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(--global-color-secondary--light)}#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:991.98px){.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}.s-portal-nav .icon{font-size:1.5em;margin-right:.25em;vertical-align:middle}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:50px;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{height:100%}img.portal-logo{border-style:none} \ 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:hsla(0,0%,84%,.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{--height:50px;--header-major-border-width:1px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:var(--header-major-border-width) 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}.s-header .navbar-brand{height:calc(var(--height) - var(--nav-padding-vert)*2 - var(--header-major-border-width))}.s-header .navbar-brand{flex-basis:175px;flex-shrink:0;margin-right:15px;padding:unset}.s-header,.s-header .navbar-collapse{align-items:stretch}.s-header{--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{--border-width:4px;border-color:transparent;border-style:solid;border-width:0 0 var(--border-width);padding-inline:14px;white-space:nowrap}@media (min-width:576px){.navbar-expand-sm.s-header .nav-item{display:flex}.navbar-expand-sm.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));padding-block:5px}}@media (min-width:768px){.navbar-expand-md.s-header .nav-item{display:flex}.navbar-expand-md.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));padding-block:5px}}@media (min-width:992px){.navbar-expand-lg.s-header .nav-item{display:flex}.navbar-expand-lg.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));padding-block:5px}}@media (min-width:1200px){.navbar-expand-xl.s-header .nav-item{display:flex}.navbar-expand-xl.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));padding-block:5px}}@media (max-width:575.98px){.navbar-expand-sm.s-header .nav-link{padding-block:8px}}@media (max-width:767.98px){.navbar-expand-md.s-header .nav-link{padding-block:8px}}@media (max-width:991.98px){.navbar-expand-lg.s-header .nav-link{padding-block:8px}}@media (max-width:1199.98px){.navbar-expand-xl.s-header .nav-link{padding-block:8px}}.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(--global-color-secondary--light)}#s-header .nav-link,#s-header .nav-link>a{color:var(--header-text-color)}.s-header .s-search-bar~.s-portal-nav{border-left:1px solid var(--header-minor-border-color);margin-left:12px}.s-header .dropdown-menu{font-size:16px}.s-header .dropdown-menu{padding-block:5px}.s-header .dropdown-item{padding-block:2.5px;padding-inline:15px}.s-header [class*=fa-]{text-align:center;width:27px}.s-header .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}.s-portal-nav .icon{font-size:1.5em;margin-right:.25em;vertical-align:middle}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:50px;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{height:100%}img.portal-logo{border-style:none} \ No newline at end of file diff --git a/dist/trumps/s-header.css b/dist/trumps/s-header.css index b7c5da950..a790bc72a 100644 --- a/dist/trumps/s-header.css +++ b/dist/trumps/s-header.css @@ -1 +1 @@ -/*! @tacc/core-styles 2.39.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:hsla(0,0%,84%,.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{--height:50px;--header-major-border-width:1px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:var(--header-major-border-width) 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}.s-header .navbar-brand{height:calc(var(--height) - var(--nav-padding-vert)*2 - var(--header-major-border-width))}.s-header .navbar-brand{flex-basis:175px;flex-shrink:0;margin-right:15px;padding:unset}.s-header,.s-header .navbar-collapse{align-items:stretch}.s-header{--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{--border-width:4px;border-color:transparent;border-style:solid;border-width:0 0 var(--border-width);white-space:nowrap}@media (min-width:576px){.navbar-expand-sm.s-header .nav-item{display:flex}.navbar-expand-sm.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width))}}@media (min-width:768px){.navbar-expand-md.s-header .nav-item{display:flex}.navbar-expand-md.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width))}}@media (min-width:992px){.navbar-expand-lg.s-header .nav-item{display:flex}.navbar-expand-lg.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width))}}@media (min-width:1200px){.navbar-expand-xl.s-header .nav-item{display:flex}.navbar-expand-xl.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width))}}.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(--global-color-secondary--light)}#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:991.98px){.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 +/*! @tacc/core-styles 2.39.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:hsla(0,0%,84%,.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{--height:50px;--header-major-border-width:1px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:var(--header-major-border-width) 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}.s-header .navbar-brand{height:calc(var(--height) - var(--nav-padding-vert)*2 - var(--header-major-border-width))}.s-header .navbar-brand{flex-basis:175px;flex-shrink:0;margin-right:15px;padding:unset}.s-header,.s-header .navbar-collapse{align-items:stretch}.s-header{--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{--border-width:4px;border-color:transparent;border-style:solid;border-width:0 0 var(--border-width);padding-inline:14px;white-space:nowrap}@media (min-width:576px){.navbar-expand-sm.s-header .nav-item{display:flex}.navbar-expand-sm.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));padding-block:5px}}@media (min-width:768px){.navbar-expand-md.s-header .nav-item{display:flex}.navbar-expand-md.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));padding-block:5px}}@media (min-width:992px){.navbar-expand-lg.s-header .nav-item{display:flex}.navbar-expand-lg.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));padding-block:5px}}@media (min-width:1200px){.navbar-expand-xl.s-header .nav-item{display:flex}.navbar-expand-xl.s-header .nav-link{align-items:center;display:flex;height:calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));padding-block:5px}}@media (max-width:575.98px){.navbar-expand-sm.s-header .nav-link{padding-block:8px}}@media (max-width:767.98px){.navbar-expand-md.s-header .nav-link{padding-block:8px}}@media (max-width:991.98px){.navbar-expand-lg.s-header .nav-link{padding-block:8px}}@media (max-width:1199.98px){.navbar-expand-xl.s-header .nav-link{padding-block:8px}}.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(--global-color-secondary--light)}#s-header .nav-link,#s-header .nav-link>a{color:var(--header-text-color)}.s-header .s-search-bar~.s-portal-nav{border-left:1px solid var(--header-minor-border-color);margin-left:12px}.s-header .dropdown-menu{font-size:16px}.s-header .dropdown-menu{padding-block:5px}.s-header .dropdown-item{padding-block:2.5px;padding-inline:15px}.s-header [class*=fa-]{text-align:center;width:27px}.s-header .navbar-toggler-icon{filter:var(--menu-toggle-icon)} \ No newline at end of file diff --git a/src/lib/_imports/trumps/s-header.css b/src/lib/_imports/trumps/s-header.css index 43c4f2463..77aa70794 100644 --- a/src/lib/_imports/trumps/s-header.css +++ b/src/lib/_imports/trumps/s-header.css @@ -103,9 +103,11 @@ Styleguide Trumps.Scopes.Header /* If link text uses 2 lines, header grows taller (but it must not do so) */ white-space: nowrap; + + padding-inline: 14px; } -@define-mixin header__nav-link--tall { +@define-mixin header--not-expanded { &.s-header .nav-item { display: flex; } @@ -116,19 +118,39 @@ Styleguide Trumps.Scopes.Header /* To align the underline of a hovered link to bottom of header */ height: calc(100% + var(--nav-padding-vert) + var(--header-major-border-width)); + + padding-block: 5px; } } @media (--x-narrow-and-above) { - .navbar-expand-sm { @mixin header__nav-link--tall; } + .navbar-expand-sm { @mixin header--not-expanded; } } @media (--narrow-and-above) { - .navbar-expand-md { @mixin header__nav-link--tall; } + .navbar-expand-md { @mixin header--not-expanded; } } @media (--medium-and-above) { - .navbar-expand-lg { @mixin header__nav-link--tall; } + .navbar-expand-lg { @mixin header--not-expanded; } } @media (--wide-and-above) { - .navbar-expand-xl { @mixin header__nav-link--tall; } + .navbar-expand-xl { @mixin header--not-expanded; } +} + +@define-mixin header--is-expanded { + &.s-header .nav-link { + padding-block: 8px; + } +} +@media (--x-narrow-and-below) { + .navbar-expand-sm { @mixin header--is-expanded; } +} +@media (--narrow-and-below) { + .navbar-expand-md { @mixin header--is-expanded; } +} +@media (--medium-and-below) { + .navbar-expand-lg { @mixin header--is-expanded; } +} +@media (--wide-and-below) { + .navbar-expand-xl { @mixin header--is-expanded; } } .s-header .nav-link:hover, @@ -144,19 +166,6 @@ Styleguide Trumps.Scopes.Header color: var(--header-text-color); } -/* Navigation: Links: Responsive Design */ - -/* Tweak Bootstrap `_nav.scss` (which selects via `navbar-expand-` class) */ -.s-header[class*="navbar-expand-"] .navbar-nav .nav-link { - 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 */ @@ -170,9 +179,19 @@ Styleguide Trumps.Scopes.Header /* Dropdown */ -.dropdown-menu { +/* To ensure sizes match between clients with different rem value */ +/* FAQ: Bootstrap uses rem space values but CMS and Portal rem values differ */ +.s-header .dropdown-menu { font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */ } +/* - to match portal nav size */ +.s-header .dropdown-menu { + padding-block: 5px; +} +.s-header .dropdown-item { + padding-block: 2.5px; + padding-inline: 15px; +} /* Icons */ @@ -226,6 +245,6 @@ Styleguide Trumps.Scopes.Header ``` */ -.navbar-toggler-icon  { +.s-header .navbar-toggler-icon { filter: var(--menu-toggle-icon); }