From 2613be8853dec90d4570c424c960911af7cd7cac Mon Sep 17 00:00:00 2001 From: Blake Morgan Date: Mon, 27 Jul 2020 19:24:01 -0600 Subject: [PATCH] Match Brightspot (#474) * Update blue header styles. * Update menu styles with JS. * Update menu styles FOUC. * Update search placeholder and icon. * Get rid of 'x' in search input. * Fix search input size * Adjust search FOUC * Adjust search requires JS text. * Adjust blue footer with JS and FOUC (as best I can). * Adjust white footer with four columns (no FOUC). * Adjust white footer FOUC. * Footer tablet fix * Adjust footer column layout. * Fix columns in white fouc * Search placement tablet/small screen * Mobile menu display * Mobile search display * Mobile menu button display * More random tweaks * Adjust tablet and mobile university footer view. * Fix spacing on mobile menu * Fix mobile menu shadow * Update dependencies and rollup. * Add license * Fixes #468 * Small fixes * Update docs with test page. * Add missing !important * Final tweaks --- CHANGELOG.md | 6 +- .../byu-footer-action-button.sass | 2 +- .../byu-footer-column-mixins.sass | 26 +- .../byu-footer-column/byu-footer-column.sass | 10 - components/byu-footer/byu-footer-fouc.sass | 40 +- components/byu-footer/byu-footer.js | 117 +- components/byu-footer/byu-footer.sass | 130 +- components/byu-header/byu-header-fouc.sass | 35 +- components/byu-header/byu-header-mixins.sass | 2 +- components/byu-header/byu-header.sass | 20 +- components/byu-menu/byu-menu-mixins.sass | 5 +- components/byu-menu/byu-menu.sass | 18 +- components/byu-search/byu-search-mixins.sass | 23 +- components/byu-search/byu-search.sass | 22 +- components/byu-theme-components.js | 3 +- components/byu-user-info/byu-user-info.sass | 5 +- components/shared-styles/vars.sass | 9 +- dist/byu-theme-components.min.css | 6 +- dist/byu-theme-components.min.css.map | 2 +- dist/byu-theme-components.min.js | 27 +- dist/byu-theme-components.min.js.map | 2 +- dist/components.min.js | 342 +- dist/components.min.js.map | 2 +- docs/byu-footer.html | 2 +- docs/byu-header.html | 2 +- docs/byu-menu.html | 2 +- docs/byu-search.html | 2 +- docs/byu-user-info.html | 2 +- docs/changes.html | 84 - docs/index.html | 26 +- docs/lib/bundle.js | 498 +- docs/test.html | 131 + index.html | 19 +- package-lock.json | 10449 ++++------------ package.json | 54 +- rollup/rollup-bundle.config.js | 18 +- rollup/rollup-dev.config.js | 20 +- rollup/rollup-docs.config.js | 9 +- rollup/rollup.config.js | 20 +- 39 files changed, 4047 insertions(+), 8145 deletions(-) delete mode 100644 docs/changes.html create mode 100644 docs/test.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 3440858b..6da57462 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,10 @@ # byu-theme-components CHANGELOG -## Breaking changes between 1.x.x and 2.x.x +## 2.1.0 + +The design was enhanced to better match the styles of websites hosted in Brightspot. + +## 2.0.0 In addition to a new design to match the design of sites hosted with BYU websites, the have been some minor tweaks to the theme components API. According to the [Semantic Versioning specification](https://semver.org/), these changes constitute a new major release. We have documented the breaking changes below so you know what you'll need to tweak to get the components working on your site. If you aren't using these changed feature listed belows, then no changes need to be made to use v2 of the BYU theme components. diff --git a/components/byu-footer-action-button/byu-footer-action-button.sass b/components/byu-footer-action-button/byu-footer-action-button.sass index 355da4f1..b6bc7926 100644 --- a/components/byu-footer-action-button/byu-footer-action-button.sass +++ b/components/byu-footer-action-button/byu-footer-action-button.sass @@ -20,7 +20,7 @@ \:host background-color: $royal font-family: $font-heading - font-size: 13px + font-size: 14px color: $white display: inline-block text-align: center diff --git a/components/byu-footer-column/byu-footer-column-mixins.sass b/components/byu-footer-column/byu-footer-column-mixins.sass index 5605cafd..e595fdf0 100644 --- a/components/byu-footer-column/byu-footer-column-mixins.sass +++ b/components/byu-footer-column/byu-footer-column-mixins.sass @@ -2,29 +2,29 @@ font-family: $font-heading text-transform: uppercase color: $grey90 - font-size: $fontSize16 - line-height: $fontSize18 + font-size: 14px // Set px value to match BrightSpot + line-height: $fontSize20 + letter-spacing: 1.5px padding-bottom: $spacing3 font-weight: $font-weight-bold width: 100% display: inline-block - max-width: 230px + margin-top: 0 =footerColumnHeader font-family: $font-heading text-transform: uppercase - font-size: $fontSize14 - line-height: $fontSize32 + font-size: 14px // Set px value to match BrightSpot + line-height: 24px // Set px value to match BrightSpot padding-bottom: $spacing1 font-weight: $font-weight-semi-bold width: 100% display: inline-block - max-width: 230px =baseColumnContent font-family: $font-text - font-size: $fontSize14 - line-height: $fontSize24 + font-size: 14px // Set px value to match BrightSpot + line-height: 24px // Set px value to match BrightSpot font-weight: $font-weight-normal color: $grey90 display: block @@ -34,13 +34,13 @@ text-decoration: none outline: none color: $royal - font-size: $fontSize14 - height: $fontSize18 - margin: 0 0 $spacing4 + font-size: 14px // Set px value to match BrightSpot + line-height: $fontSize24 + padding: 5px 0 =columnContentNotLink text-decoration: none outline: none - font-size: $fontSize14 + font-size: 14px // Set px value to match BrightSpot min-height: $fontSize24 - line-height: $fontSize32 + line-height: 24px // Set px value to match BrightSpot diff --git a/components/byu-footer-column/byu-footer-column.sass b/components/byu-footer-column/byu-footer-column.sass index 4400edcd..ae7c636b 100644 --- a/components/byu-footer-column/byu-footer-column.sass +++ b/components/byu-footer-column/byu-footer-column.sass @@ -23,7 +23,6 @@ @media (max-width: $breakMdLg) .column-title - font-size: $fontSize12 padding-bottom: $spacing0 slot[name="header"] @@ -64,15 +63,6 @@ .content > a:hover color: $navy - @media (max-width: $breakMdLg) - .content - \::slotted(:not(byu-footer-action-button)) - font-size: $fontSize12 - - slot[name="header"] ::slotted(*) - font-size: $fontSize12 - max-width: 230px - .footerActionButton background-color: $royal font-size: $fontSize12 diff --git a/components/byu-footer/byu-footer-fouc.sass b/components/byu-footer/byu-footer-fouc.sass index 5c791a03..03ddc053 100644 --- a/components/byu-footer/byu-footer-fouc.sass +++ b/components/byu-footer/byu-footer-fouc.sass @@ -16,17 +16,22 @@ byu-footer:not(.byu-component-rendered) display: grid - grid-template: 1fr 70px / auto repeat(4, 256px) auto + grid-template: 1fr 82px / auto repeat(4, 300px) auto background-color: #fff + padding-top: 60px + + @media (max-width: $breakMdSm) + padding-top: 30px &::before grid-area: 2/1/3/7 content: "" color: #fff + // TODO: Get SVG redesigned to match BrightSpot footer background: url(https://cdn.byu.edu/product-logos/latest/staging/footer-logo-full.svg) 0 0 no-repeat position: relative z-index: 100 - width: 345px + width: 450px height: 29px margin: auto auto @@ -40,17 +45,21 @@ byu-footer:not(.byu-component-rendered) byu-footer-column * display: block - font-size: 12.5px - font-family: "Public Sans", "Noto Sans", "Open Sans", Helvetica, Arial, sans-serif + font-size: 14px + font-family: $font-text margin: 0 0 13px 0 byu-footer-column - margin: 32px 8px 52px - padding: 0 20px + margin: 0 40px 40px 0 + min-width: 270px &:nth-child(1) grid-area: 1/2/2/3 + @media (max-width: 1300px) + padding-left: 70px + margin-left: 0 + &:nth-child(2) grid-area: 1/3/2/4 @@ -70,17 +79,19 @@ byu-footer:not(.byu-component-rendered) *[slot="header"] color: #141414 - font-family: "HCo Ringside Narrow SSm", "Noto Sans", "Open Sans", Helvetica, Arial, sans-serif + font-family: $font-heading text-transform: uppercase + letter-spacing: 1.5px font-weight: 700 font-size: 14px padding: 0 0 10px - margin: 12px 0 + margin-top: 0 + margin-bottom: 12px byu-footer-action-button a color: #fff !important background-color: #0062b8 - font-family: "HCo Ringside Narrow SSm", "Noto Sans", "Open Sans", Helvetica, Arial, sans-serif + font-family: $font-heading font-weight: 500 !important display: inline-block padding: 10px 20px @@ -147,6 +158,8 @@ byu-footer:not(.byu-component-rendered) &:nth-child(1) grid-area: 1/2/2/3 + padding-left: 0 + margin-left: 12px &:nth-child(2) grid-area: 1/3/2/4 @@ -160,20 +173,13 @@ byu-footer:not(.byu-component-rendered) margin-bottom: 50px *[slot="header"] - font-size: 10.5px margin: 0 - p, a - font-size: 10.5px - - p - line-height: 18px - byu-footer-action-button a font-size: 11px padding: 7px 23px - @media( max-width: $breakMdSm ) + @media( max-width: $breakMd ) grid-template: repeat(4, min-content) 76px / auto 100% auto &::before diff --git a/components/byu-footer/byu-footer.js b/components/byu-footer/byu-footer.js index 807fd032..84876fa5 100644 --- a/components/byu-footer/byu-footer.js +++ b/components/byu-footer/byu-footer.js @@ -39,59 +39,74 @@ export class BYUFooter extends LitElement {