diff --git a/src/OnboardingSPA/components/Header/stylesheet.scss b/src/OnboardingSPA/components/Header/stylesheet.scss index 0d0b9da26..854dc99a1 100644 --- a/src/OnboardingSPA/components/Header/stylesheet.scss +++ b/src/OnboardingSPA/components/Header/stylesheet.scss @@ -13,6 +13,7 @@ box-sizing: border-box; width: 100%; justify-content: space-between; + border-bottom: 1px solid var(--nfd-onboarding-header-border); padding-right: $grid-unit-20; diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss index 6e0dc17d4..63a890554 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss @@ -117,11 +117,6 @@ html.nfd-interface-interface-skeleton__html-container { .nfd-interface-interface-skeleton__sidebar { overflow: auto; - border-left: 1px solid #e0e0e0; - - @media (max-width: #{($break-medium)}) { - border-left: 1px solid #e0e0e0; - } } .nfd-interface-interface-skeleton__secondary-sidebar { @@ -134,7 +129,6 @@ html.nfd-interface-interface-skeleton__html-container { .nfd-interface-interface-skeleton__header { flex-shrink: 0; height: auto; // Keep the height flexible. - border-bottom: 1px solid #e0e0e0; z-index: 30; color: #1e1e1e; } @@ -142,7 +136,6 @@ html.nfd-interface-interface-skeleton__html-container { .nfd-interface-interface-skeleton__footer { height: auto; // Keep the height flexible. flex-shrink: 0; - border-top: 1px solid #e0e0e0; color: #1e1e1e; position: absolute; bottom: 0; diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index eafaeb092..79dea6bed 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -44,6 +44,7 @@ body { --nfd-onboarding-step-what-next-img-3: url(../../Brands/wordpress/full-service.png); --nfd-onboarding-step-what-next-img-1: url(../../Brands/wordpress/wp-admin.png); --nfd-onboarding-step-what-next-img-2: url(../static/images/help.png); + --nfd-onboarding-header-border: #e0e0e0; } &.nfd-brand-bluehost, @@ -104,6 +105,7 @@ body { --nfd-onboarding-sidebar-learn-more-pages-illustration: url(../../Brands/bluehost/learn-more-pages.svg); --nfd-onboarding-sidebar-learn-more-site-features-illustration: url(../../Brands/bluehost/learn-more-site-features.svg); --nfd-onboarding-sidebar-learn-more-what-next-illustration: url(../../Brands/bluehost/learn-more-what-next.svg); + --nfd-onboarding-header-border: #e0e0e0; } &.nfd-brand-hostgator-br { @@ -146,6 +148,7 @@ body { --nfd-onboarding-step-what-next-img-3: url(../../Brands/wordpress/full-service.png); --nfd-onboarding-step-what-next-img-1: url(../../Brands/wordpress/wp-admin.png); --nfd-onboarding-step-what-next-img-2: url(../static/images/help.png); + --nfd-onboarding-header-border: #e0e0e0; } &.nfd-brand-webcom { @@ -183,6 +186,7 @@ body { --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-tertiary-alt); --nfd-onboarding-loader-start: var(--nfd-onboarding-primary); --nfd-onboarding-loader-end: var(--nfd-onboarding-tertiary); + --nfd-onboarding-header-border: #e0e0e0; } &.nfd-brand-crazy-domains { @@ -293,6 +297,7 @@ body { background-color: rgba(var(--nfd-onboarding-highlighted--rgb), 0.2); } } + --nfd-onboarding-header-border: #e0e0e0; } .nfd-onboarding-sitegen-light { @@ -310,6 +315,7 @@ body { --nfd-onboarding-site-logo-on-drag: rgba(53, 59, 64, 0.3); --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); --nfd-onboarding-site-logo-border: var(--nfd-onboarding-primary); + --nfd-onboarding-header-border: rgba(var(--nfd-onboarding-primary-rgb), 0.3); } .nfd-onboarding-sitegen-dark { @@ -327,5 +333,6 @@ body { --nfd-onboarding-site-logo-on-drag: rgba(156, 162, 167, 0.3); --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); --nfd-onboarding-site-logo-border: rgba(156, 162, 167, 1); + --nfd-onboarding-header-border: rgba(var(--nfd-onboarding-primary-rgb), 0.3); } }