create-sitecore-jss 22.2.1 → 22.3.0-canary.10

package/dist/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-fat.scss

@@ -1,58 +1,58 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
-@import '@fontawesome/scss/mixins';
-@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;
-  }
-
-  .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;
-    }
-  }
-  .rel-level2 {
-    padding-left: $small-margin;
-    display: block;
-  }
-}
-
+@import '@sass/abstracts/vars';
+@import '@sass/abstracts/mixins';
+@import '@fontawesome/scss/mixins';
+@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;
+  }
+
+  .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;
+    }
+  }
+  .rel-level2 {
+    padding-left: $small-margin;
+    display: block;
+  }
+}
+

package/dist/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-main-horizontal-vertical.scss

@@ -1,176 +1,176 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
-@import '@fontawesome/scss/mixins';
-@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;
-      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 0.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;
-      }
-    }
-    .submenu {
-      ul {
-        li {
-          a:before {
-            @include fa-icon();
-            content: $fa-var-chevron-right;
-            display: block;
-            position: absolute;
-            left: 0;
-            font-size: 10px;
-            top: 18px;
-            transform: translateY(-50%);
-            padding-left: 7px;
-          }
-        }
-      }
-    }
-  }
-}
-
+@import '@sass/abstracts/vars';
+@import '@sass/abstracts/mixins';
+@import '@fontawesome/scss/mixins';
+@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;
+      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 0.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;
+      }
+    }
+    .submenu {
+      ul {
+        li {
+          a:before {
+            @include fa-icon();
+            content: $fa-var-chevron-right;
+            display: block;
+            position: absolute;
+            left: 0;
+            font-size: 10px;
+            top: 18px;
+            transform: translateY(-50%);
+            padding-left: 7px;
+          }
+        }
+      }
+    }
+  }
+}
+

package/dist/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-mobile.scss

@@ -1,85 +1,85 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
-@import '@fontawesome/scss/mixins';
-@import '@fontawesome/scss/variables';
-
-.navigation.navigation-mobile {
-  nav > ul {
-    border: none;
-    @include border-basic();
-  }
-  .rel-level1 {
-    cursor: pointer;
-    margin: 0;
-    background: $bg-basic-color;
-    > .navigation-title {
-      border-bottom: 1px solid $border-basic-color;
-      margin: 0;
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-    .navigation-title {
-      padding: 10px;
-      > a {
-        text-decoration: none;
-        color: $text-basic;
-        display: inline;
-      }
-    }
-  }
-  .rel-level2 {
-    display: list-item;
-    .navigation-title > a {
-      font-weight: 500;
-    }
-  }
-  .submenu {
-    > ul {
-      li {
-        position: relative;
-        a:before {
-          @include fa-icon();
-          content: $fa-var-chevron-right;
-          display: block;
-          position: absolute;
-          left: 0;
-          font-size: 10px;
-          top: 20px;
-          transform: translateY(-50%);
-        }
-      }
-      padding-left: 25px;
-      background: $nav-bg-submenu;
-    }
-    > ul {
-      display: none;
-    }
-    &.active{
-      > .navigation-title:before {
-        transform: rotate(180deg);
-        transition: 0.6s;
-        transform-style: preserve-3d;
-      }
-      > ul {
-        display: block;
-      }
-    }
-    > .navigation-title {
-      position: relative;
-      &:before {
-        @include fa-icon();
-        content: $fa-var-chevron-down;
-        display: block;
-        position: absolute;
-        right: 10px;
-        font-size: 10px;
-        top: 20px;
-        transform: translateY(-50%);
-        transform: rotate(0);
-        transition: 0.6s;
-        transform-style: preserve-3d;
-      }
-    }
-  }
-}
+@import '@sass/abstracts/vars';
+@import '@sass/abstracts/mixins';
+@import '@fontawesome/scss/mixins';
+@import '@fontawesome/scss/variables';
+
+.navigation.navigation-mobile {
+  nav > ul {
+    border: none;
+    @include border-basic();
+  }
+  .rel-level1 {
+    cursor: pointer;
+    margin: 0;
+    background: $bg-basic-color;
+    > .navigation-title {
+      border-bottom: 1px solid $border-basic-color;
+      margin: 0;
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+    .navigation-title {
+      padding: 10px;
+      > a {
+        text-decoration: none;
+        color: $text-basic;
+        display: inline;
+      }
+    }
+  }
+  .rel-level2 {
+    display: list-item;
+    .navigation-title > a {
+      font-weight: 500;
+    }
+  }
+  .submenu {
+    > ul {
+      li {
+        position: relative;
+        a:before {
+          @include fa-icon();
+          content: $fa-var-chevron-right;
+          display: block;
+          position: absolute;
+          left: 0;
+          font-size: 10px;
+          top: 20px;
+          transform: translateY(-50%);
+        }
+      }
+      padding-left: 25px;
+      background: $nav-bg-submenu;
+    }
+    > ul {
+      display: none;
+    }
+    &.active{
+      > .navigation-title:before {
+        transform: rotate(180deg);
+        transition: 0.6s;
+        transform-style: preserve-3d;
+      }
+      > ul {
+        display: block;
+      }
+    }
+    > .navigation-title {
+      position: relative;
+      &:before {
+        @include fa-icon();
+        content: $fa-var-chevron-down;
+        display: block;
+        position: absolute;
+        right: 10px;
+        font-size: 10px;
+        top: 20px;
+        transform: translateY(-50%);
+        transform: rotate(0);
+        transition: 0.6s;
+        transform-style: preserve-3d;
+      }
+    }
+  }
+}