#535917 added styles for sxa initializer(basic site) (#1062)

* #535917 fixed lint errors(added end of line)

* #535917 fixed comments

* #535917: fixed comments

(cherry picked from commit ba9dde0)

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

@@ -0,0 +1,3 @@
+* {
+  font-family: Roboto;
+}

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

@@ -0,0 +1,18 @@
+.component-content {
+  @include respond-to(all-mobile) {
+    .row {
+      padding: 0;
+      margin: 0;
+    }
+  }
+}
+@include respond-to(all-mobile) {
+  .row {
+    margin: 0;
+    padding: 0;
+    > * {
+      padding: 0;
+      margin: 0;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+@import "@sass/abstracts/mixins";
+
+footer {
+  .rich-text {
+    font-size: 14px;
+    color: $text-white;
+  }
+
+  .indent-inner {
+    padding: 3rem;
+
+    @include respond-to(all-mobile) {
+      padding: 25px 0;
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+@import "@sass/abstracts/vars/colors";
+@import "@sass/abstracts/mixins";
+
+header {
+  .container {
+    .row {
+      display: flex;
+      flex-direction: column;
+      padding-top: 10px;
+
+      @include respond-to(all-mobile) {
+        padding-top: 0;
+        flex-direction: column-reverse;
+      }
+    }
+  }
+
+  .title {
+    padding-left: 50px;
+
+    @include respond-to(all-mobile) {
+      padding-left: 0;
+    }
+
+    .field-title {
+      @include respond-to(all-mobile) {
+        text-align: center;
+      }
+      a {
+        font-size: 30px;
+        font-weight: bold;
+        border: none;
+        margin-bottom: 0;
+        color: $bg-black;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+@import "@sass/abstracts/vars";
+
+$hamburger-width: 30px;
+$hamburger-height: 18px;
+$border-size: 6px;
+$hamburger-margin: 1.5rem;
+
+.navigation.navigation-horizontal {
+  width: 100%;
+  padding-right: 50px;
+
+  @include respond-to(all-mobile) {
+    padding-right: 0;
+  }
+
+  .component-content {
+    display: inline-block;
+
+    @include respond-to(all-mobile) {
+      display: none;
+    }
+  }
+
+  @include respond-to(all-mobile) {
+    &::before {
+      content: "";
+      width: $hamburger-width;
+      height: $hamburger-height;
+      margin-right: $hamburger-margin;
+      margin-top: $hamburger-margin;
+      display: block;
+      border-top: 6px solid $bg-black;
+      border-bottom: 6px solid $bg-black;
+      float: right;
+      cursor: pointer;
+    }
+
+    &:active, &:hover {
+      &::before {
+        display: none;
+      }
+      .component-content {
+        display: inline-block;
+      }
+
+      .level0 {
+        display: block;
+      }
+    }
+  }
+
+  ul.clearfix {
+    list-style: none;
+  }
+  .level0 {
+    display: flex;
+  }
+
+  .level0, .level1 {
+    >.navigation-title {
+      >a {
+        border-width: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
+/**PROMO**/
+
+.promo {
+  &.promo-no-border {
+    padding-left: 0;
+    padding-right: 0;
+
+    >.component-content {
+      @include border-basic(all, 'none', 0);
+      @include respond-to(all-mobile) {
+        > div {
+          padding: 0;
+        }
+
+        .promo-text {
+          padding: 15px 10px 10px 25px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+.rich-text {
+  @include respond-to(all-mobile) {
+    padding: 15px 10px 10px 25px;
+
+    h2 {
+      font-size: 18px;
+    }
+
+    h4 {
+      font-size: 18px;
+      line-height: 35px;
+      font-weight: 600;
+    }
+
+    h6 {
+      font-size: 14px;
+      strong {
+        font-weight: normal;
+        line-height: 24px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "common";
+@import "header";
+@import "promo";
+@import "navigation";
+@import "component";
+@import "rich-text";
+@import "footer";

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Promo.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Image as JssImage,
   Link as JssLink,
+  RichText as JssRichText,
   ImageField,
   Field,
   LinkField,
@@ -39,7 +40,7 @@ export const Default = (props: PromoProps): JSX.Element => {
           <div className="promo-text">
             <div>
               <div className="field-promotext">
-                <Text className="image-caption" field={props.fields.PromoText} />
+                <JssRichText field={props.fields.PromoText} />
               </div>
             </div>
             <div className="field-promolink">

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/_app.tsx

@@ -3,6 +3,7 @@ import { I18nProvider } from 'next-localization';
 
 import 'bootstrap/dist/css/bootstrap.css';
 import 'assets/sass/main.scss';
+import 'assets/basic/main.scss';
 
 function App({ Component, pageProps }: AppProps): JSX.Element {
   const { dictionary, ...rest } = pageProps;