From 2c409688d1b43381f43e80174bd232b7bf3744a9 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 10 Jul 2023 12:42:32 -0400 Subject: [PATCH 1/4] Adjust height of announcement bar and sub-items. --- assets/base.css | 8 +++++++- assets/component-list-social.css | 4 ++++ assets/component-localization-form.css | 5 +++-- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/assets/base.css b/assets/base.css index 7d2373db9f3..23dece23d36 100644 --- a/assets/base.css +++ b/assets/base.css @@ -117,7 +117,8 @@ body:has(.section-header .drawer-menu) .announcement-bar-section .page-width { padding: 0 5rem; } - .header.page-width { + .header.page-width, + .utility-bar__grid.page-width { padding-left: 3.2rem; padding-right: 3.2rem; } @@ -2196,6 +2197,10 @@ product-info .loading-overlay:not(.hidden) ~ *, width: 100%; } +.announcement-bar .slider-button { + height: 3.8rem; +} + .announcement-bar .slider-button--next { margin-right: -1.5rem; min-width: 44px; @@ -2266,6 +2271,7 @@ product-info .loading-overlay:not(.hidden) ~ *, padding: 1rem 0; margin: 0; letter-spacing: 0.1rem; + min-height: 3.8rem; } .announcement-bar-slider--fade-in-next .announcement-bar__message, diff --git a/assets/component-list-social.css b/assets/component-list-social.css index f57a1374415..48f62e2ef95 100644 --- a/assets/component-list-social.css +++ b/assets/component-list-social.css @@ -22,6 +22,10 @@ color: rgb(var(--color-foreground)); } +.utility-bar .list-social__link { + padding: 1rem 1.1rem; +} + .list-social__link:hover .icon { transform: scale(1.07); } diff --git a/assets/component-localization-form.css b/assets/component-localization-form.css index 81cccba3141..e1b96f15eaa 100644 --- a/assets/component-localization-form.css +++ b/assets/component-localization-form.css @@ -193,12 +193,14 @@ noscript .localization-selector.link { /* Header localization */ .header-localization .localization-form:only-child { margin: 0; + padding: 0; } .header-localization .disclosure .localization-form__select { font-size: 1.4rem; letter-spacing: 0.06rem; height: auto; + min-height: initial; background: transparent; } @@ -234,11 +236,10 @@ noscript .localization-selector.link { .header-localization:not(.menu-drawer__localization) { align-items: center; - min-height: 4.4rem; } .js .header-localization:not(.menu-drawer__localization) .localization-form__select { - padding: 0 2.7rem 0 1.2rem; + padding: 0.85rem 2.7rem 0.85rem 1.2rem; width: max-content; } From 349169df2ee30766b7d1378cc82591425b25b961 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 10 Jul 2023 12:46:29 -0400 Subject: [PATCH 2/4] Adjust announcement bar button height on desktop only. --- assets/base.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/base.css b/assets/base.css index 23dece23d36..0fef381bf07 100644 --- a/assets/base.css +++ b/assets/base.css @@ -2197,10 +2197,6 @@ product-info .loading-overlay:not(.hidden) ~ *, width: 100%; } -.announcement-bar .slider-button { - height: 3.8rem; -} - .announcement-bar .slider-button--next { margin-right: -1.5rem; min-width: 44px; @@ -2238,6 +2234,10 @@ product-info .loading-overlay:not(.hidden) ~ *, .announcement-bar-slider { width: 60%; } + + .announcement-bar .slider-button { + height: 3.8rem; + } } .announcement-bar__link { From 310b916fa58d42d53ab8a4e68bbb9ab4fa728f59 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 10 Jul 2023 13:24:41 -0400 Subject: [PATCH 3/4] Fix width of the utility bar on mobile. --- assets/base.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assets/base.css b/assets/base.css index 0fef381bf07..48e51c2416d 100644 --- a/assets/base.css +++ b/assets/base.css @@ -112,6 +112,11 @@ body:has(.section-header .drawer-menu) .announcement-bar-section .page-width { margin: 0 auto; } +.utility-bar__grid.page-width { + padding-left: 3rem; + padding-right: 3rem; +} + @media screen and (min-width: 750px) { .page-width { padding: 0 5rem; From dff48f2d58f9ab74e06053cc62b0eacafde18cf0 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 10 Jul 2023 15:08:40 -0400 Subject: [PATCH 4/4] Remove bizarre rem-based values. --- assets/component-list-social.css | 3 ++- assets/component-localization-form.css | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/component-list-social.css b/assets/component-list-social.css index 48f62e2ef95..209f2358cae 100644 --- a/assets/component-list-social.css +++ b/assets/component-list-social.css @@ -23,7 +23,8 @@ } .utility-bar .list-social__link { - padding: 1rem 1.1rem; + padding: 0 1.1rem; + height: 3.8rem; } .list-social__link:hover .icon { diff --git a/assets/component-localization-form.css b/assets/component-localization-form.css index e1b96f15eaa..2285d96f6ab 100644 --- a/assets/component-localization-form.css +++ b/assets/component-localization-form.css @@ -239,8 +239,9 @@ noscript .localization-selector.link { } .js .header-localization:not(.menu-drawer__localization) .localization-form__select { - padding: 0.85rem 2.7rem 0.85rem 1.2rem; + padding: 0 2.7rem 0 1.2rem; width: max-content; + height: 3.8rem; } .header-localization:not(.menu-drawer__localization) .localization-form:only-child .localization-form__select {