[SXA] Bugfix/539379 fix sxa initializer styles (#1083)

* #539379: fixed style for new structure of basic site

* #539379 changed styles and rebase

* #539379 fixed loading fonts for production version

* #539379 [SXA] fixed mobile menu

* #539379 fixed comments

* #539379 [SXA] fixed styles for EE

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_fonts.scss

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/main.scss

@@ -1,3 +1,4 @@
+@import "fonts";
 @import "container";
 @import "header";
 @import "promo";

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/main.scss

@@ -1,3 +1,4 @@
+@import "font-awesome/scss/font-awesome";
 @import "bootstrap/dist/css/bootstrap.css";
 @import "sass/main.scss";
 @import "basic/main.scss";

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/_app.scss

@@ -1,28 +1,86 @@
-a[target='_blank']:after {
-  content: '\1F5D7'
-}
-
-/*
-  Hides Sitecore Experience Editor markup,
-  if you run the app in connected mode while the Sitecore cookies
-  are set to edit mode.
-*/
-.scChromeData, .scpm { display: none !important; }
-
-/*
-  Styles for default JSS error components
-*/
-.sc-jss-editing-error,
-.sc-jss-placeholder-error {
-  padding: 1em;
-  background-color: lightyellow;
-}
-
-/* 
-  Style for default content block
-*/
-.contentTitle {
-    font-size: 3.5rem;
-    font-weight: 300;
-    line-height: 1.2;
+
+html {
+  font-size: 62.5%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin-bottom: 0px;
+  height: auto !important;
+}
+
+body {
+  @include opensans-font-stack();
+  position: relative;
+  overflow: auto;
+  color: $text-basic;
+  font-size: 14px;
+  line-height: 1.5;
+  background: $page-bg;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: auto !important;
+  &.on-page-editor {
+    background: $page-bg-editor !important;
+  }
+}
+
+a {
+  color: $text-basic;
+  cursor: pointer;
+  font-size: 0.85em;
+  &:hover {
+    color: $text-basic-active;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+}
+
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  font-size: 1.5em;
+}
+
+h3 {
+  font-size: 1.2em;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+h5 {
+  font-size: 0.83em;
+}
+
+h6 {
+  font-size: 0.67em;
+}
+
+.xa-variable {
+  border: 0px;
+  padding: 1px;
+  margin: 0px;
+  background-color: #ebebe4;
+  color: #545454;
+  user-select: none;
+  pointer-events: none;
+}
+
+//Navigation Bar fix
+#breadcrumbMenuSubcontrol_context_menu * {
+  box-sizing: initial;
+}
+
+//End navigation bar fix
+
+.menu-mobile-navigate {
+  display: none;
 }

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/vars/_colors.scss

@@ -10,8 +10,8 @@ $bg-submenu:#edebeb !default;
 $bg-submenu-active:#f6f6f6 !default;
 $bg-black:#000;
 $bg-black-active:#3d3d3d;
+$bg-dark-gray: #262626;
 //Text colors
-$text-gray: #262626;
 $text-white:#fff !default;
 $text-heading-color: #222 !default;
 $text-basic:#747474 !default;
@@ -22,6 +22,7 @@ $text-submenu-active: #222 !default;
 $text-disabled: #aaa !default;
 $text-black: #000 !default;
 $text-red:#de232f;
+$text-gray: #262626;
 //Border colors
 $border-gray: #d2d2d2 !default;
 $border-white: #ffffff !default;

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/fonts/_fonts.scss

@@ -1,2 +1 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image/index.scss

@@ -1,2 +1 @@
 @import "image-default-size";
-@import "component-image";

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/index.scss

@@ -1,3 +1,10 @@
+@import "component-column-splitter";
+@import "component-container";
+@import "component-image";
+@import "component-navigation";
+@import "component-promo";
+@import "_component-richtext-content";
+
 @import "common";
 @import "container";
 @import "layout";
@@ -6,10 +13,6 @@
 @import "promo";
 @import "spacing";
 @import "title";
-
-@import "component-column-splitter";
-@import "component-container";
-@import "component-image";
-@import "component-navigation";
-@import "component-promo";
-@import "_component-richtext-content";
+@import "image";
+@import "link-list";
+@import "rich-text";

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/link-list/_list-vertical.scss

@@ -1,19 +1,20 @@
-@import "@sass/abstracts/vars";
-@import "@sass/abstracts/mixins";
+@import '@sass/abstracts/vars';
+@import '@sass/abstracts/mixins';
 
 .link-list.list-vertical {
-    h3 {
-        background: $bg-basic-color;
-        width: 100%;
-        display: inline-block;
-        padding: 3px 5px;
-        @include border-basic();
-    }
-    a {
-        border: none;
-    }
-    li {
-        display: block;
-        margin-left: $middle-margin;
-    }
+  h3 {
+    background: $bg-basic-color;
+    width: 100%;
+    display: inline-block;
+    padding: 3px 5px;
+    @include border-basic();
+  }
+  a {
+    border: none;
+  }
+  li {
+    display: block;
+    margin-left: $middle-margin;
+  }
 }
+

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/link-list/index.scss

@@ -0,0 +1,2 @@
+@import "component-link-list";
+@import "list-vertical";

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-fat.scss

@@ -4,50 +4,55 @@
 @import '@fontawesome/scss/variables';
 
 .navigation.navigation-fat {
-    background: $bg-basic-color;
-    @include border-basic();
-    a {
-        text-decoration: none;
-    }
-    nav>ul {
-        list-style: none;
-        padding: 10px 0;
-        overflow: hidden;
+  background: $bg-basic-color;
+  @include border-basic();
+
+  a {
+    text-decoration: none;
+  }
+
+  nav > ul {
+    list-style: none;
+    padding: 10px 0;
+    overflow: hidden;
+  }
+
+  .rel-level1 {
+    margin: $small-margin;
+    padding: 0;
+    display: inline-block;
+    vertical-align: top;
+
+    &.submenu ul a {
+      position: relative;
+      &:before {
+        @include fa-icon();
+        transform: translateY(-50%);
+        position: absolute;
+        content: $fa-var-chevron-right;
+        top: 50%;
+        left: -9px;
+        font-size: 10px;
+      }
     }
-    .rel-level1 {
-        margin: $small-margin;
-        padding: 0;
-        display: inline-block;
-        vertical-align: top;
-        &.submenu ul a {
-            position: relative;
-            &:before {
-                @include fa-icon();
-                transform: translateY(-50%);
-                position: absolute;
-                content: $fa-var-chevron-right;
-                top: 50%;
-                left: -9px;
-                font-size: 10px;
-            }
-        }
-        >.navigation-title>a {
-            @include border-basic(top, $border-basic-color, 2px);
-            border-bottom: 0;
-            background: $nav-bg-root;
-            padding: 5px 10px;
-            display: block;
-            width: auto;
-            &:hover {
-                border-color: $menu-hover-color;
-            }
-        }
-        >ul {
-            padding: 0;
-        }
+    > .navigation-title > a {
+      @include border-basic(top, $border-basic-color, 2px);
+      border-bottom: 0;
+      background: $nav-bg-root;
+      padding: 5px 10px;
+      display: block;
+      width: auto;
+      &:hover {
+        border-color: $menu-hover-color;
+      }
     }
-    .rel-level2 {
-        padding-left: $small-margin;
-        display: block;
+    > ul {
+      padding: 0;
     }
+  }
+  .rel-level2 {
+    padding-left: $small-margin;
+    display: block;
+  }
 }
+

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/index.scss

@@ -1,5 +1,5 @@
-@import "navigation-fat";
 @import "navigation-main-horizontal-vertical";
 @import "navigation-mobile";
 @import "navigation-sidebar";
 @import "sitemap-navigation";
+@import "navigation-fat";

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/rich-text/index.scss

@@ -0,0 +1 @@
+@import "rich-text-lists";

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/title/_component-title.scss

@@ -4,19 +4,21 @@
 .title {
   background: $title-bg;
   h1,
-  .field-title a {
-    @include border-basic(bottom, $border-basic-color);
-    font-size: $font-extrabig;
-    margin-bottom: $small-margin;
-    color: $title-color;
-    line-height: normal;
-    padding-bottom: 10px;
-    display: block;
-    text-decoration: none;
-    cursor: pointer;
-    &:hover {
-      color: $title-color-active;
-    }
+  .field-title {
+    a, span {
+      @include border-basic(bottom, $border-basic-color);
+      font-size: $font-extrabig;
+      margin-bottom: $small-margin;
+      color: $title-color;
+      line-height: normal;
+      padding-bottom: 10px;
+      display: block;
+      text-decoration: none;
+      cursor: pointer;
+      &:hover {
+        color: $title-color-active;
+      }
   }
+}
   @import '@sass/variants/title';
 }