From 13688782ed7fddab0a13c473cf15f6f6011a68dc Mon Sep 17 00:00:00 2001 From: Ruslan Matkovskyi <100142572+matkovskyi@users.noreply.github.com> Date: Wed, 13 Jul 2022 15:06:09 +0300 Subject: [PATCH] #533938 fixed styles for managed classes (#1097) --- .../src/assets/basic/_container.scss | 2 +- .../nextjs-sxa/src/assets/basic/_footer.scss | 6 +- .../nextjs-sxa/src/assets/basic/_header.scss | 2 +- .../src/assets/basic/_navigation.scss | 10 +- .../nextjs-sxa/src/assets/sass/_app.scss | 6 +- .../components/_component-navigation.scss | 90 +++--- .../src/assets/sass/components/index.scss | 1 - .../_navigation-main-horizontal-vertical.scss | 293 +++++++++--------- .../navigation/_navigation-mobile.scss | 5 +- 9 files changed, 217 insertions(+), 198 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_container.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_container.scss index f57484ba25..d80a6cbdcd 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_container.scss +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_container.scss @@ -1,7 +1,7 @@ @import "@sass/abstracts/mixins"; @import "variables"; -* { +body { font-family: Roboto; color: $main-color; } diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss index a127e3e8eb..9f9140d8d3 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss @@ -2,6 +2,10 @@ @import "variables"; footer { + .container-dark-background { + background-color: #262626; + } + .rich-text { font-size: $text-size-14; @@ -16,7 +20,7 @@ footer { } .indent-inner { - padding: 3rem; + padding: 65px; @include respond-to(all-mobile) { padding: 25px 0; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss index 2250ff222f..bb07ae7e19 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss @@ -29,7 +29,7 @@ header { text-align: center; h1 { - font-weight: 600; + font-weight: 500; line-height: 29px; padding-top: 0; margin-bottom: 10px; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss index 555b3af66a..fc0f1ec264 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss @@ -6,6 +6,12 @@ $hamburger-height: 18px; $border-size: 6px; $hamburger-margin: 18px; +.navigation { + .menu-mobile-navigate-wrapper { + width: 100%; + } +} + .navigation.navigation-horizontal { width: 100%; padding-right: 70px; @@ -47,7 +53,7 @@ $hamburger-margin: 18px; @include respond-to(all-mobile) { .component-content { display: none; - position: absolute; + position: fixed; top: 0; bottom: 0; right: 0; @@ -86,8 +92,6 @@ $hamburger-margin: 18px; } .menu-mobile-navigate-wrapper { - width: 100%; - .menu-mobile-navigate { display: inline-block; z-index: 2; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/_app.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/_app.scss index b2deeda499..3ccdee7fd7 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/_app.scss +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/_app.scss @@ -12,7 +12,7 @@ body { position: relative; overflow: auto; color: $text-basic; - font-size: 14px; + font-size: 16px; line-height: 1.5; background: $page-bg; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); @@ -64,6 +64,10 @@ h6 { font-size: 0.67em; } +ul li { + list-style-type: none; +} + .xa-variable { border: 0px; padding: 1px; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-navigation.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-navigation.scss index 3d9b3a7beb..6a3904ac86 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-navigation.scss +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-navigation.scss @@ -1,47 +1,51 @@ @import "@sass/abstracts/mixins"; @import "@sass/abstracts/vars"; + .navigation { - background: $nav-bg; - .level1, .level0 { - >.navigation-title>a { - font-size: $navigation-font-basic; - border-color: $nav-border-root; - border-style: solid; - border-width: 0 0 2px 0; - padding-right: 3px; - margin-right: 5px; - &:hover { - text-decoration: none; - } - } - } - a { - color: $nav-color-root; - .lt-ie9 &, .lt-ie9 & span { - color: $nav-color-root; - } - &:focus, &:hover { - color: $nav-color-root-active; - } - } - li { - &.submenu { - margin-bottom: 0; - } - >.navigation-title { - >a { - padding: 3px 5px 3px 0; - display: block; - color: $nav-color-root; - text-decoration: none; - } - } - >ul a { - font-size: $navigation-font-basic-submenu; - } - } - .submenu>ul { - padding-left: 10px; - } - @import "@sass/variants/navigation"; + background: $nav-bg; + ul { + padding-left: 0; + } + .level0, .level1 { + >.navigation-title>a { + font-size: $navigation-font-basic; + border-color: $nav-border-root; + border-style: solid; + border-width: 0 0 2px 0; + padding-right: 3px; + margin-right: 5px; + &:hover { + text-decoration: none; + } + } + } + a { + color: $nav-color-root; + .lt-ie9 &, .lt-ie9 & span { + color: $nav-color-root; + } + &:focus, &:hover { + color: $nav-color-root-active; + } + } + li { + &.submenu { + margin-bottom: 0; + } + >.navigation-title { + >a { + padding: 3px 5px 3px 0; + display: block; + color: $nav-color-root; + text-decoration: none; + } + } + >ul a { + font-size: $navigation-font-basic-submenu; + } + } + .submenu>ul { + padding-left: 10px; + } } +@import "@sass/components/navigation/"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/index.scss index e49c300c0b..76f359e5b9 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/index.scss +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/index.scss @@ -9,7 +9,6 @@ @import "container"; @import "layout"; @import "spacing"; -@import "navigation"; @import "promo"; @import "spacing"; @import "title"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-main-horizontal-vertical.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-main-horizontal-vertical.scss index 7a8574768f..e27302550b 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-main-horizontal-vertical.scss +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-main-horizontal-vertical.scss @@ -1,151 +1,152 @@ -@import "@sass/abstracts/vars"; -@import "@sass/abstracts/mixins"; +@import '@sass/abstracts/vars'; +@import '@sass/abstracts/mixins'; @import '@fontawesome/scss/mixins'; -@import "@fontawesome/scss/variables"; +@import '@fontawesome/scss/variables'; + +$borderSize: 2px; //Drop Down Navigation Common Part .navigation.navigation-main { - .component-content>nav { - position: relative; - ul { - @include clearfix(); - } - } - .rel-level1 { - float: left; - &.active { - >.navigation-title>a { - border-color: $nav-border-root; - } - } - >.navigation-title>a { - border-width: 2px 0 0 0; - border-color: transparent; - &:hover { - border-color: $nav-border-root; - } - } - &.submenu { - >.navigation-title a { - position: relative; - padding-right: 15px; - &:after { - @include fa-icon(); - font-size: 10px; - content: $fa-var-chevron-down; - position: absolute; - transform: translateY(-50%); - top: 50%; - right: 0; - } - } - } - //submenu - >ul { - overflow: hidden; - $borderSize: 2px; - display: none; - z-index: 10; - position: absolute; - top: 100%; - background: $nav-bg-submenu; - margin-left: 0; - margin-top: -$borderSize; - border-top: $borderSize solid $nav-border-submenu; - border-left: 1px solid $nav-submenu-item-border; - border-bottom: 1px solid $nav-submenu-item-border; - } - &.show { - >a { - &+ul { - display: block !important; - } - } - >ul { - display: block !important; - min-width: 60px; - } - } - &.active { - >.navigation-title>a:link, >.navigation-title>a:visited { - color: $text-basic-active; - } - >span { - display: block; - padding: 10px 20px; - color: $text-white; - } - } - &.submenu.active { - border-color: $menu-active-color; - } - } - .rel-level2 { - &:hover, &:focus { - transition: background .2s ease-in; - background: $nav-bg-submenu-active; - } - div>a { - display: block; - font-weight: normal; - font-size: $navigation-font-basic-submenu; - text-align: center; - &:hover, &:focus { - color: $nav-color-submenu; - } - } - &.submenu { - box-sizing: border-box; - &.navigation-image { - text-align: center; - >a, .field-navigationtext { - text-align: left; - } - } - } - } - // Additional styles fot drop down horizontal navigation - &.navigation-main-horizontal { - .submenu>ul { - padding-left: 0; - } - .rel-level1 { - &.show { - >a { - &+ul { - display: inline-flex !important; - flex-wrap: wrap; - } - } - >ul { - display: inline-flex !important; - flex-wrap: wrap; - } - } - >ul { - width: 100%; - clear: both; - left: 0; - } - } - .rel-level2 { - float: left; - padding: 10px; - @include border-basic(right, $nav-submenu-item-border, 1px); - flex-grow: 1; - flex-basis: 23%; - } - } - // Additional styles fot drop down vertical navigation - &.navigation-main-vertical { - .rel-level1>ul { - padding-left: 0; - width: auto; - left: auto; - @include border-basic(right, $nav-submenu-item-border, 1px); - >li { - padding: 5px 10px; - } - } - } + .component-content>nav { + position: relative; + ul { + @include clearfix(); + } + } + .rel-level1 { + float: left; + &.active { + >.navigation-title>a { + border-color: $nav-border-root; + } + } + >.navigation-title>a { + border-width: 2px 0 0 0; + border-color: transparent; + &:hover { + border-color: $nav-border-root; + } + } + &.submenu { + >.navigation-title a { + position: relative; + padding-right: 15px; + &:after { + @include fa-icon(); + font-size: 10px; + content: $fa-var-chevron-down; + position: absolute; + transform: translateY(-50%); + top: 50%; + right: 0; + } + } + } + //submenu + >ul { + overflow: hidden; + display: none; + z-index: 10; + position: absolute; + top: 100%; + background: $nav-bg-submenu; + margin-left: 0; + margin-top: -$borderSize; + border-top: $borderSize solid $nav-border-submenu; + border-left: 1px solid $nav-submenu-item-border; + border-bottom: 1px solid $nav-submenu-item-border; + } + &:active, &:hover { + >a { + &+ul { + display: block !important; + } + } + >ul { + display: block !important; + min-width: 60px; + } + } + &.active { + >.navigation-title>a:link, >.navigation-title>a:visited { + color: $text-basic-active; + } + >span { + display: block; + padding: 10px 20px; + color: $text-white; + } + } + &.submenu.active { + border-color: $menu-active-color; + } + } + .rel-level2 { + &:hover, &:focus { + transition: background .2s ease-in; + background: $nav-bg-submenu-active; + } + div>a { + display: block; + font-weight: normal; + font-size: $navigation-font-basic-submenu; + text-align: center; + &:hover, &:focus { + color: $nav-color-submenu; + } + } + &.submenu { + box-sizing: border-box; + &.navigation-image { + text-align: center; + >a, .field-navigationtext { + text-align: left; + } + } + } + } + // Additional styles fot drop down horizontal navigation + &.navigation-main-horizontal { + .submenu>ul { + padding-left: 0; + } + .rel-level1 { + &:active, &:hover { + >a { + &+ul { + display: inline-flex !important; + flex-wrap: wrap; + } + } + >ul { + display: inline-flex !important; + flex-wrap: wrap; + } + } + >ul { + width: 100%; + clear: both; + left: 0; + } + } + .rel-level2 { + float: left; + padding: 10px; + @include border-basic(right, $nav-submenu-item-border, 1px); + flex-grow: 1; + flex-basis: 23%; + } + } + // Additional styles fot drop down vertical navigation + &.navigation-main-vertical { + .rel-level1>ul { + padding-left: 0; + width: auto; + left: auto; + @include border-basic(right, $nav-submenu-item-border, 1px); + >li { + padding: 5px 10px; + } + } + } } diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-mobile.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-mobile.scss index 34527e8648..33b534c557 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-mobile.scss +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-mobile.scss @@ -31,7 +31,10 @@ background: $nav-bg-submenu; } &.submenu { - &.active { + > ul { + display: none; + } + &:focus { > .navigation-title:before { transform: rotate(180deg); transition: 0.6s;