From adb989198b9db1e6d1759cab029f97421f44eace Mon Sep 17 00:00:00 2001 From: Danny Kim Date: Fri, 22 Sep 2023 12:22:29 -0400 Subject: [PATCH 1/3] fix: fluid-container padding size on mobile --- .../vanilla/src/sass/components/header/_application.scss | 5 ++--- packages/vanilla/src/sass/layout/_container.scss | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/vanilla/src/sass/components/header/_application.scss b/packages/vanilla/src/sass/components/header/_application.scss index 7ea0ef02..d4d33b46 100644 --- a/packages/vanilla/src/sass/components/header/_application.scss +++ b/packages/vanilla/src/sass/components/header/_application.scss @@ -4,9 +4,7 @@ @mixin menu-hover { color: var(--cbp-color-text-darkest); background-color: var(--cbp-color-interactive-secondary-lighter); - //border-style: solid; border-color: var(--cbp-color-interactive-secondary-darker); - //border-width: 0 0 var(--cbp-border-size-md) 0; } .cbp-application-header { @@ -82,7 +80,8 @@ .nav-home { font-size: var(--cbp-font-size-heading-sm); font-weight: var(--cbp-font-weight-bold); - padding: 0 var(--cbp-space-4x) 0 var(--cbp-space-4x); + padding-left: var(--cbp-space-5x); + padding-right: var(--cbp-space-5x); } } diff --git a/packages/vanilla/src/sass/layout/_container.scss b/packages/vanilla/src/sass/layout/_container.scss index 80a340dc..2f663581 100644 --- a/packages/vanilla/src/sass/layout/_container.scss +++ b/packages/vanilla/src/sass/layout/_container.scss @@ -1,8 +1,8 @@ @use './../tokens/breakpoints' as *; .cbp-fluid-container { - padding-left: var(--cbp-space-4x); - padding-right: var(--cbp-space-4x); + padding-left: var(--cbp-space-5x); + padding-right: var(--cbp-space-5x); @media (min-width: $cbp-breakpoint-md) and (max-width: $cbp-breakpoint-xl) { padding-left: var(--cbp-space-8x); From 460c192d9a89b18f7eb52d69d251d8ee02745cf6 Mon Sep 17 00:00:00 2001 From: Danny Kim Date: Fri, 22 Sep 2023 12:27:58 -0400 Subject: [PATCH 2/3] fix: replace values in _application.scss with variables --- .../vanilla/src/sass/components/header/_application.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vanilla/src/sass/components/header/_application.scss b/packages/vanilla/src/sass/components/header/_application.scss index d4d33b46..eb65557a 100644 --- a/packages/vanilla/src/sass/components/header/_application.scss +++ b/packages/vanilla/src/sass/components/header/_application.scss @@ -10,12 +10,12 @@ .cbp-application-header { display: flex; align-items: center; - height: 56px; + height: var(--cbp-space-14x); width: 100%; position: sticky; - top: -1px; + top: calc(-1 * var(--cbp-space-half-x)); background-color: var(--cbp-color-white); - box-shadow: 0px 5px 5px -3px var(--cbp-color-interactive-secondary-dark); + box-shadow: var(--cbp-shadow-level-1-down); padding-right: var(--cbp-space-4x); z-index: var(--cbp-z-index-level-1); @@ -60,7 +60,7 @@ border-width: 0 0 var(--cbp-border-size-md) 0; & > i { - margin-left: 8px; + margin-left: var(--cbp-space-2x); } &:hover { From eb1fccf1b37110ae945066d545688799ceda7cd2 Mon Sep 17 00:00:00 2001 From: Danny Kim Date: Tue, 26 Sep 2023 10:05:03 -0400 Subject: [PATCH 3/3] fix: remove upper limit in _container.scss media query --- packages/vanilla/src/sass/layout/_container.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vanilla/src/sass/layout/_container.scss b/packages/vanilla/src/sass/layout/_container.scss index 2f663581..9bfce968 100644 --- a/packages/vanilla/src/sass/layout/_container.scss +++ b/packages/vanilla/src/sass/layout/_container.scss @@ -4,7 +4,7 @@ padding-left: var(--cbp-space-5x); padding-right: var(--cbp-space-5x); - @media (min-width: $cbp-breakpoint-md) and (max-width: $cbp-breakpoint-xl) { + @media (min-width: $cbp-breakpoint-md) { padding-left: var(--cbp-space-8x); padding-right: var(--cbp-space-8x); }