create-sitecore-jss 22.2.0-canary.5 → 22.2.0-canary.6

package/dist/templates/angular-xmcloud/src/assets/styles/sass/base/typehead/_typehead.scss

@@ -0,0 +1,95 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+
+.twitter-typeahead {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
+  width: 100%;
+}
+.tt-menu {
+  background: $bg-basic-color;
+  width: 100%;
+  border: 1px solid $border-gray;
+}
+.tt-hint {
+  color: $tt-color;
+}
+.tt-dropdown-menu {
+  width: 250px;
+  margin-top: 5px;
+  background-color: $tt-dropdown-bg;
+  border: 1px solid $tt-dropdown-border;
+  max-height: 300px;
+  overflow-y: auto;
+  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
+.tt-suggestion {
+  padding: 4px 10px;
+  color: $tt-color;
+  overflow: hidden;
+  a {
+    text-decoration: none;
+  }
+  &:last-child {
+    border: none;
+  }
+  .field-image {
+    width: 100px;
+    float: left;
+    margin-right: 10px;
+  }
+  .field-make {
+    font-size: 15px;
+    float: left;
+    margin-right: 5px;
+  }
+  .field-model {
+    margin-left: 4px;
+    font-size: 15px;
+    font-weight: bold;
+    width: 100%;
+  }
+  .field-priceformatted {
+    float: right;
+    font-size: 15px;
+    color: $tt-price-color;
+    margin-top: -20px;
+  }
+}
+.tt-suggestion.tt-cursor {
+  color: $tt-color-active;
+  background-color: $tt-suggestion-bg-active;
+  cursor: pointer;
+}
+.loading-in-progress {
+  .tt-dropdown-menu {
+    display: block !important;
+    min-height: 50px;
+    position: relative;
+    &:after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -20px;
+      margin-left: -20px;
+      height: 40px;
+      width: 50px;
+      display: block;
+      @include loading-gif();
+      z-index: 11;
+    }
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: $tt-dropdown-bg;
+      opacity: 0.8;
+      z-index: 10;
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/base/typehead/index.scss

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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/_component-column-splitter.scss

@@ -0,0 +1,14 @@
+@import 'sass/abstracts/vars';
+
+.row.column-splitter {
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: calc($default-padding / 2);
+    padding-right: calc($default-padding / 2);
+    max-width: none;
+
+    > div {
+       padding-left: $default-padding;
+       padding-right: $default-padding;
+    }
+}

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

@@ -0,0 +1,27 @@
+@import 'sass/abstracts/mixins';
+
+$size-padding: 8px;
+.container-wrapper {
+  width: 100%;
+}
+
+.component {
+  position: relative;
+  padding: 0 $size-padding;
+
+  @include respond-to(all-mobile) {
+    padding: 0;
+  }
+}
+
+.container {
+  padding: 0;
+
+  &.fullwidth-container {
+    max-width: unset;
+  }
+
+  .component-content {
+    @include clearfix();
+  }
+}

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

@@ -0,0 +1,18 @@
+@import "sass/abstracts/vars";
+
+.image {
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+    a {
+        display: inline-block;
+        max-width: 100%;
+    }
+    .image-caption {
+        display: block;
+        font-style: italic;
+        font-size: $font-small;
+        color: $image-caption-color;
+    }
+}

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

@@ -0,0 +1,51 @@
+@import "sass/abstracts/mixins";
+@import "sass/abstracts/vars";
+
+.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: 10px;
+          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/";

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

@@ -0,0 +1,42 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+
+.promo {
+    background: $promo-bg;
+    padding: 15px;
+    overflow: hidden;
+    box-sizing: border-box;
+    >.component-content {
+        position: relative;
+        @include clearfix();
+        @include border-basic(all, $promo-border);
+
+        >div {
+            padding: 5px;
+        }
+    }
+    .zg-height-fix {
+        .field-promoicon {
+            margin-top: 100px;
+        }
+    }
+    .field-promoicon {
+        overflow: hidden;
+        width: 100%;
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
+    .field-promolink {
+        margin-top: 5px;
+        padding-bottom: 10px;
+    }
+    &.image-full-size {
+        img {
+            margin-bottom: 10px;
+        }
+    }
+    @import "sass/variants/promo";
+    @import "sass/base/richtext/richtext";
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/_component-richtext-content.scss

@@ -0,0 +1,19 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+
+.content, .rich-text {
+    border: $rich-content-border;
+    line-height: 1.5;
+    font-size: 12px;
+    overflow: hidden;
+    * {
+        max-width: 100%;
+    }
+    @import "sass/base/richtext";
+}
+.rich-text  {
+    @import "sass/variants/rich-text";
+}
+.content {
+    @import "sass/variants/page-content";
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/common/_alignment.scss

@@ -0,0 +1,26 @@
+.position-left,
+.position-left * {
+    text-align: left !important;
+}
+
+.position-right,
+.position-right * {
+    text-align: right !important;
+}
+
+.position-center,
+.position-center * {
+    text-align: center !important;
+}
+
+.position-left select {
+    direction: ltr !important;
+}
+
+.position-right select {
+    direction: rtl !important;
+}
+
+.position-center select {
+    text-align-last: center !important;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/common/_boxed.scss

@@ -0,0 +1,16 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+
+.boxed {
+    box-sizing: border-box;
+    margin: 20px 0;
+    @include respond-to(tablet) {
+        padding: 10px;
+    }
+    @include respond-to(mobile) {
+        padding: 10px;
+    }
+    >div {
+        @include wrapper();
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/common/_clearfix.scss

@@ -0,0 +1,11 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+
+.component-content-clearfix {
+    .component-content {
+        @include clearfix;
+    }
+}
+.component-clearfix {
+    @include clearfix;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/common/_highlighted.scss

@@ -0,0 +1,63 @@
+.highlighted-top {
+    background: #ffffff;
+    border-top-width: 3px;
+    border-top-color: #15909c;
+    border-style: solid;
+    padding: 25px;
+    margin: 0;
+}
+
+.highlighted-top h1,
+.highlighted-top h2,
+.highlighted-top h3,
+.highlighted-top h4 {
+    margin: 0 0 10px 0;
+}
+
+.highlighted-bottom {
+    background: #ffffff;
+    border-bottom-width: 3px;
+    border-bottom-color: #15909c;
+    border-style: solid;
+    padding: 25px;
+    margin: 0;
+}
+
+.highlighted-bottom h1,
+.highlighted-bottom h2,
+.highlighted-bottom h3,
+.highlighted-bottom h4 {
+    margin: 0 0 10px 0;
+}
+
+.highlighted-left {
+    background: #ffffff;
+    border-left-width: 3px;
+    border-left-color: #15909c;
+    border-style: solid;
+    padding: 25px;
+    margin: 0;
+}
+
+.highlighted-left h1,
+.highlighted-left h2,
+.highlighted-left h3,
+.highlighted-left h4 {
+    margin: 0 0 10px 0;
+}
+
+.highlighted-right {
+    background: #ffffff;
+    border-right-width: 3px;
+    border-right-color: #15909c;
+    border-style: solid;
+    padding: 25px;
+    margin: 0;
+}
+
+.highlighted-right h1,
+.highlighted-right h2,
+.highlighted-right h3,
+.highlighted-right h4 {
+    margin: 0 0 10px 0;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/common/_link-button.scss

@@ -0,0 +1,16 @@
+@import "sass/abstracts/mixins";
+
+.link-button {
+    @import "sass/base/links/";
+}
+// Promo button
+.promo.link-button {
+    a {
+        @extend .button-default;
+    }
+}
+.link.link-button {
+    .is-empty-hint, .field-link span, a {
+        @include default-link-button();
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/common/_promoted-box.scss

@@ -0,0 +1,3 @@
+.promoted-box {
+    border: none !important;
+}

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

@@ -0,0 +1,6 @@
+@import "alignment";
+@import "boxed";
+@import "clearfix";
+@import "highlighted";
+@import "link-button";
+@import "promoted-box";

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/container/_bordered.scss

@@ -0,0 +1,24 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+
+.sxa-bordered {
+    box-sizing: border-box;
+    >.component-content {
+        padding: 0;
+        @include border-basic();
+        border-radius: 5px;
+    }
+}
+
+.column-splitter,
+.row-splitter {
+    box-sizing: border-box;
+    .sxa-bordered {
+        padding: $default-padding !important;
+        >.component,
+        .scEmptyPlaceholder {
+            @include border-basic();
+            border-radius: 5px;
+        }
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/container/_title-row-box.scss

@@ -0,0 +1,66 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+
+.title-row-box {
+    @include border-basic();
+    box-sizing: border-box;
+    width: 100%;
+    height: 87px;
+    margin: 0;
+    padding: 0;
+    background: $container-title-row-bg;
+    >.component-content {
+        @include wrapper();
+        .title {
+            display: inline-block;
+            vertical-align: middle;
+            box-sizing: border-box;
+            margin: 23px 0 0 0;
+            padding: 0;
+            h1 {
+                @include font-size(2.2);
+                border: none;
+            }
+            @include respond-to(all-mobile) {
+                margin: 23px 0 0 20px;
+            }
+        }
+        .rich-text {
+            margin: 0;
+            h1, h2, h3, h4 {
+                margin: 0;
+                padding: 0;
+            }
+        }
+        .breadcrumb {
+            display: inline-block;
+            vertical-align: middle;
+            box-sizing: border-box;
+            @include font-size(1.4);
+            margin: 23px 0 0 0;
+            padding: 0;
+            float: right;
+            clear: both;
+            @include respond-to(tablet) {
+                margin: 23px 20px 0 0;
+            }
+            @include respond-to(mobile) {
+                display: none;
+            }
+        }
+    }
+    @include respond-to(all-mobile) {
+        .alpha {
+            vertical-align: middle;
+            box-sizing: border-box;
+            width: auto !important; //overrides grid
+            float: left;
+        }
+        .omega {
+            vertical-align: middle;
+            box-sizing: border-box;
+            width: auto !important; //overrides grid
+            float: right;
+        }
+    }
+}

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

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

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/image/_image-default-size.scss

@@ -0,0 +1,6 @@
+.image-default-size {
+    img {
+        max-width: none;
+        width: auto !important;
+    }
+}

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

@@ -0,0 +1 @@
+@import "image-default-size";

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/image-alignment/_image-left.scss

@@ -0,0 +1,3 @@
+.image-left .component-content>div>img {
+    float: left;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/image-alignment/_image-right.scss

@@ -0,0 +1,3 @@
+.image-right .component-content>div>img {
+    float: right;
+}

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

@@ -0,0 +1,17 @@
+@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";
+@import "spacing";
+@import "promo";
+@import "spacing";
+@import "title";
+@import "image";
+@import "link-list";
+@import "rich-text";

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

@@ -0,0 +1,5 @@
+@import "sass/abstracts/vars";
+
+.alan-indent {
+    margin: 0 $extralarge-margin;
+}

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";