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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/layout/_background.scss

@@ -0,0 +1,27 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+
+%cover-bg {
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+.cover-background {
+    >.component-content {
+        @extend %cover-bg;
+    }
+}
+.fix-background {
+    >.component-content {
+        @extend %cover-bg;
+        @include fixed-bg(left top);
+    }
+}
+.parallax-background {
+    >.component-content {
+        @extend %cover-bg;
+        @include fixed-bg(50% 0);
+        @include respond-to(mobile-large) {
+            background-attachment: scroll;
+        }
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/layout/index.scss

@@ -0,0 +1 @@
+@import "background";

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/link-list/_component-link-list.scss

@@ -0,0 +1,45 @@
+@import "sass/abstracts/mixins";
+@import "sass/abstracts/vars";
+@import 'font-awesome/scss/mixins';
+@import "font-awesome/scss/variables";
+
+.link-list {
+    background: $link-list-bg;
+    h1, h2, h3, h4, h5, h6 {
+        @include border-basic(bottom, $link-list-header-border);
+    }
+    >.component-content {
+        ul {
+            background: $link-list-items-bg;
+        }
+        li {
+            background: $link-list-item-bg;
+            display: block;
+            font-size: $font-normal;
+            a {
+                display: inline;
+                color: $link-list-item-color;
+                position: relative;
+                padding-left: 10px;
+                font-size: 1em;
+                text-decoration: none;
+                &:before {
+                    @include fa-icon();
+                    content: $fa-var-chevron-right;
+                    position: absolute;
+                    left: 0;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    font-size: 10px;
+                }
+                &:hover {
+                    color: $link-list-item-color-active;
+                    text-decoration: none;
+                    border-bottom: 1px solid $link-list-item-border-active;
+                }
+            }
+        }
+    }
+    @import "../../base/links";
+    @import "../../variants/link-list";
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/link-list/_list-vertical.scss

@@ -0,0 +1,20 @@
+@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;
+  }
+}
+

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/link-list/index.scss

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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-fat.scss

@@ -0,0 +1,58 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+@import 'font-awesome/scss/mixins';
+@import 'font-awesome/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/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-main-horizontal-vertical.scss

@@ -0,0 +1,176 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+@import 'font-awesome/scss/mixins';
+@import 'font-awesome/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/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-mobile.scss

@@ -0,0 +1,85 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+@import 'font-awesome/scss/mixins';
+@import 'font-awesome/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;
+      }
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_navigation-sidebar.scss

@@ -0,0 +1,29 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+
+.navigation.navigation-sidebar {
+    a {
+        text-decoration: none;
+    }
+    nav>ul {
+        .rel-level1 {
+            >.navigation-title {
+                margin-bottom: 0;
+                >a {
+                    padding: 5px 10px;
+                    display: block;
+                    position: relative;
+                    z-index: 1;
+                    margin-right: 0;
+                }
+            }
+            >ul {
+                margin-left: $small-margin;
+                margin-top: $extrasmall-margin;
+            }
+        }
+        .rel-level2 {
+            display: block;
+        }
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/_sitemap-navigation.scss

@@ -0,0 +1,20 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+@import 'font-awesome/scss/mixins';
+@import 'font-awesome/scss/variables';
+
+.navigation.sitemap-navigation {
+  .level2 a {
+    position: relative;
+    padding-left: 10px;
+    &:before {
+      @include font-size(1.4);
+      @include fa-icon();
+      transform: translateY(-50%) scale(1, -1);
+      position: absolute;
+      content: $fa-var-share;
+      top: 50%;
+      left: -8px;
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/navigation/index.scss

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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_absolute-bottom-link.scss

@@ -0,0 +1,8 @@
+.promo.absolute-bottom-link {
+    position: relative;
+    .field-promolink {
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_promo-hero.scss

@@ -0,0 +1,40 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+
+.promo.promo-hero {
+    position: relative;
+    text-align: center;
+    &.promo-hero-half {
+        float: left;
+        width: 50%;
+        @include respond-to(all-mobile) {
+            float: none;
+            width: 100%;
+        }
+    }
+    .field-promotext {
+        display: inline-block;
+        transform: translateY(-50%);
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        padding: 20px;
+        color: $promo-hero-text-color;
+        background: $promo-bg-hero;
+        >a {
+            color: inherit;
+            text-decoration: none;
+        }
+        @include respond-to(all-mobile) {
+            width: 100%;
+            margin: 0;
+            h1 {
+                @include font-size(2.4);
+            }
+            h2, h3, h4 {
+                @include font-size(2.0);
+            }
+        }
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_promo-shadow.scss

@@ -0,0 +1,42 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+
+.promo-shadow {
+    max-width: 960px;
+    padding: 0;
+    border-top-width: 3px;
+    border-top-color: $promo-shadow-border;
+    border-style: solid;
+    overflow: visible;
+    position: relative;
+    &.promo {
+        float: left;
+    }
+    >.component-content {
+        @include respond-to(all-mobile) {
+            margin: 0 10px 30px 10px;
+        }
+        padding: 15px;
+        margin: 0 0 30px 0;
+        &:before, &:after {
+            opacity: 0.7;
+            box-shadow: 0 17px 10px rgba(0, 0, 0, 0.7);
+            position: absolute;
+            z-index: -1;
+            height: 20%;
+            max-height: 100px;
+            max-width: 460px;
+            width: 47%;
+            content: "";
+            bottom: 10px;
+        }
+        &:before {
+            left: 2%;
+            transform: rotate(-3deg);
+        }
+        &:after {
+            right: 2%;
+            transform: rotate(3deg);
+        }
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/promo/index.scss

@@ -0,0 +1,3 @@
+@import "absolute-bottom-link";
+@import "promo-hero";
+@import "promo-shadow";

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/_rich-text-lists.scss

@@ -0,0 +1,63 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+
+.rich-text-lists,
+.field-featurelist {
+  ul {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    li {
+      @include font-size(1.3);
+      position: relative;
+      line-height: 21px;
+      list-style: none;
+      margin: 0;
+      padding: 5px 0 5px 25px;
+      &:before {
+        display: inline-block;
+        vertical-align: middle;
+        @include font-size(1.2);
+        font-family: 'FontAwesome', sans-serif;
+        position: absolute;
+        top: 3px;
+        left: 0;
+        color: $text-basic;
+        text-align: center;
+        content: '\f00c';
+        width: 20px;
+        margin: 0 5px 0 0;
+        padding: 0;
+      }
+    }
+  }
+}
+.field-featurelist {
+  ul {
+    li {
+      &:before {
+        display: inline-block;
+        vertical-align: middle;
+        @include font-size(1.2);
+        font-family: 'FontAwesome', sans-serif;
+        position: absolute;
+        top: 3px;
+        left: 0;
+        color: $text-basic;
+        text-align: center;
+        content: '\f046';
+        width: 20px;
+        margin: 0 5px 0 0;
+        padding: 0;
+      }
+    }
+  }
+}
+.media-link {
+  &.file-type-icon-media-link {
+    float: left;
+    .field-filetypeicon {
+      text-align: center;
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/index.scss

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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_background-colors.scss

@@ -0,0 +1,14 @@
+@import 'sass/abstracts/vars';
+
+.container-gray-background {
+  background: $bg-light-gray;
+}
+.container-clean-background {
+  background: $bg-basic-color;
+}
+.container-dark-background {
+  background: $bg-black-active;
+}
+.container-color-background {
+  background: $bg-blue;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_indent.scss

@@ -0,0 +1,13 @@
+@import 'sass/abstracts/vars';
+.indent {
+  margin: 0 $extralarge-margin;
+  &.col-xxl-12, &.col-xl-12, &.col-lg-12, &.col-md-12, &.col-12 {
+    width: calc(100% - ($extralarge-margin * 2));
+  }
+}
+.indent-top {
+  margin-top: $middle-margin;
+}
+.indent-bottom {
+  margin-bottom: $middle-margin;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/index.scss

@@ -0,0 +1,2 @@
+@import "background-colors";
+@import "indent";