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

package/dist/templates/angular-xmcloud/src/assets/styles/basic/_navigation.scss

@@ -0,0 +1,150 @@
+@import "sass/abstracts/vars";
+@import "variables";
+
+$hamburger-width: 28px;
+$hamburger-height: 18px;
+$border-size: 6px;
+$hamburger-margin: 18px;
+
+.navigation {
+  .menu-mobile-navigate-wrapper {
+    width: 100%;
+  }
+}
+
+.navigation.navigation-horizontal {
+  width: 100%;
+  padding-right: 70px;
+  margin-top: -15px;
+
+  .menu-mobile-navigate {
+    display: none;
+  }
+  
+  @include respond-to(mobile-large) {
+    padding-right: 0;
+  }
+
+  .component-content {
+    display: inline-block;
+
+    @include respond-to(mobile-large) {
+      display: none;
+    }
+    
+    ul.clearfix {
+      list-style: none;
+    }
+    .level0 {
+      display: flex;
+    }
+  
+    .level0, .level1 {
+      float: left;
+      margin-left: 30px;
+
+      >.navigation-title {
+        >a {
+          border-width: 0;
+          font-size: $text-size-14;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  @include respond-to(mobile-large) {
+    .component-content {
+      display: none;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      background-color: $bg-black-active;
+      z-index: 1;
+
+      * {
+        text-align: center !important;
+      }
+
+      nav {
+        padding-top: 110px;
+        
+        .level0 {
+          display: block;
+        }
+      }
+      
+      ul {
+        margin: 0;
+        padding: 0;
+      }
+
+      .level0, .level1 {
+        float: unset;
+        margin-left: 0;
+        >.navigation-title {
+          >a {
+            font-size: $text-size-30;
+            line-height: 90px;
+            >span {
+              color: $text-white;
+            }
+          }
+        }
+      }
+    }
+
+    .menu-mobile-navigate-wrapper {
+      .menu-mobile-navigate {
+        display: inline-block;
+        z-index: 2;
+        position: absolute;
+        right: $hamburger-margin;
+        top: $hamburger-margin;
+        height: $hamburger-width;
+        width: $hamburger-width;
+        opacity: 0;
+
+        &:checked ~ {
+          .menu-humburger {
+            &::before {
+              content: "\00d7";
+              color: $text-basic-active;
+              font-size: $text-size-48;
+              position: fixed;
+              top: 0;
+              right: 0;
+              margin-top: calc($hamburger-margin + ($hamburger-margin / 2));
+              margin-right: $hamburger-margin;
+              line-height: 0;
+              border: 0;
+            }
+          }
+
+          .component-content {
+            position: fixed;
+            display: inline-block;
+          }
+        }
+      }
+
+      .menu-humburger {
+        &::before {
+          content: "";
+          width: $hamburger-width;
+          height: $hamburger-height;
+          margin-right: $hamburger-margin;
+          margin-top: calc($hamburger-margin + ($hamburger-margin / 2)) + 8px;
+          display: block;
+          border-top: 6px solid $bg-black;
+          border-bottom: 6px solid $bg-black;
+          float: right;
+          z-index: 99;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/basic/_promo.scss

@@ -0,0 +1,58 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+/**PROMO**/
+
+.promo {
+  &.main-promo-no-border {
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    margin-bottom: 80px;
+
+    @include respond-to(mobile-large) {
+      margin-bottom: 0;
+    }
+
+    >.component-content {
+      border: 0;
+      max-width: 583px;
+      margin-right: 50px;
+
+      > div {
+        padding-bottom: 0;
+      }
+
+      @include respond-to(mobile-large) {
+        max-width: 100%;
+        margin-right: 0;
+      }
+      
+      .promo-text {
+        .field-promotext {
+          font-size: 14px;
+
+          h3 {
+            font-size: $text-size-18;
+            margin: 15px 0;
+
+            @include respond-to(mobile-large) {
+              margin: 10px 0;
+            }
+          }
+          p {
+            margin: 10px 0;
+          }
+        }
+      }
+      @include respond-to(mobile-large) {
+        > div {
+          padding: 0;
+        }
+  
+        .promo-text {
+          padding: 15px 30px 5px 30px;
+        }
+      }
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/basic/_rich-text.scss

@@ -0,0 +1,11 @@
+@import "sass/abstracts/vars";
+@import "variables";
+
+.rich-text {
+  font-size: $text-size-16;
+
+  @include respond-to(mobile-large) {
+    padding: 0 30px 10px 30px;
+    font-size: $text-size-14;
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/basic/_variables.scss

@@ -0,0 +1,10 @@
+$text-size-14: 14px;
+$text-size-16: 16px;
+$text-size-18: 18px;
+$text-size-24: 24px;
+$text-size-30: 30px;
+$text-size-36: 36px;
+$text-size-48: 48px;
+$text-size-50: 50px;
+
+$main-color: #27272A;

package/dist/templates/angular-xmcloud/src/assets/styles/basic/main.scss

@@ -0,0 +1,8 @@
+@import "fonts";
+@import "container";
+@import "header";
+@import "promo";
+@import "navigation";
+@import "component";
+@import "rich-text";
+@import "footer";

package/dist/templates/angular-xmcloud/src/assets/styles/main.scss

@@ -0,0 +1,4 @@
+@import "basic/fonts";
+@import "bootstrap/scss/bootstrap";
+@import "sass/main.scss";
+@import "basic/main.scss";

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

@@ -0,0 +1,103 @@
+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: 16px;
+  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;
+}
+
+ul li {
+  list-style-type: none;
+}
+
+.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;
+}
+
+#header, #content, #footer, .sc-jss-empty-placeholder {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.sc-jss-placeholder-error {
+  background: #ff0000;
+  outline: 5px solid #e36565;
+  padding: 10px;
+  color:#fff;
+  max-width: 500px;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/abstracts/_functions.scss

@@ -0,0 +1,8 @@
+@function headings($from:1, $to:6) {
+    @if $from==$to {
+        @return 'h#{$from}';
+    }
+    @else {
+        @return 'h#{$from},'+headings($from+1, $to);
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/abstracts/_mixins.scss

@@ -0,0 +1,121 @@
+@import "vars";
+
+/* breakpoints */
+
+$break-desktop: 1024px;
+$break-mobile: 380px;
+$break-mobile-horizontal: 640px;
+$break-mobile-large: 992px;
+@mixin wrapper() {
+    max-width: 960px;
+    margin: 0 auto !important;
+}
+@mixin clearfix {
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}
+@mixin headings($from: 1, $to: 6) {
+    @for $i from $from through $to {
+        h#{$i} {
+            @content
+        }
+    }
+}
+@mixin font-size($sizeValue: 1.6) {
+    font-size: ($sizeValue * 10) + px;
+    font-size: $sizeValue + rem;
+}
+    @mixin proxima-font($weight:semibold) {
+        @if($weight==semibold) {
+            font-family: "ProximaNova-Semibold", arial, helvetica, sans-serif;
+        }
+        @else if($weight==light) {
+            font-family: "ProximaNova-Light", arial, helvetica, sans-serif;
+        }
+    }
+@mixin opensans-font-stack() {
+    font-family: "Open Sans", Helvetica, Verdana, Tahoma, sans-serif;
+}
+@mixin loading-gif() {
+    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJibGFjayI+DQogIDxwYXRoICBvcGFjaXR5PSIuMjUiIGQ9Ik0xNiAwIEExNiAxNiAwIDAgMCAxNiAzMiBBMTYgMTYgMCAwIDAgMTYgMCBNMTYgNCBBMTIgMTIgMCAwIDEgMTYgMjggQTEyIDEyIDAgMCAxIDE2IDQiLz4NCiAgPHBhdGggZmlsbD0nIzFhODBiNicgZD0iTTE2IDAgQTE2IDE2IDAgMCAxIDMyIDE2IEwyOCAxNiBBMTIgMTIgMCAwIDAgMTYgNHoiPg0KICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDE2IDE2IiB0bz0iMzYwIDE2IDE2IiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICA8L3BhdGg+DQo8L3N2Zz4NCg==);
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+@mixin respond-to($media) {
+    @if $media==mobile {
+        @media only screen and (max-width: $break-mobile) {
+            @content;
+        }
+    }
+    @else if $media==mobile-horizontal {
+        @media only screen and (max-width: $break-mobile-horizontal - 1) {
+            @content;
+        }
+    }
+    @else if $media==mobile-large {
+        @media only screen and (max-width: $break-mobile-large) {
+            @content;
+        }
+    }
+    @else if $media==tablet {
+        @media only screen and (min-width: $break-mobile + 1) and (max-width: $break-desktop - 1) {
+            @content;
+        }
+    }
+    @else if $media==all-mobile {
+        @media only screen and (max-width: $break-desktop - 1) {
+            @content;
+        }
+    }
+    @else if $media==desktop {
+        @media only screen and (min-width: $break-desktop) {
+            @content;
+        }
+    }
+}
+@mixin border-basic($position:all, $border-color:$border-gray, $border-width:1px) {
+    @if($position!=all) {
+        border-#{$position}-width: $border-width;
+        border-#{$position}-style: solid;
+        border-#{$position}-color: $border-color;
+    }
+    @else {
+        border-width: $border-width;
+            border-style: solid;
+            border-color: $border-color;
+    }
+}
+@mixin fixed-bg($pos, $min-height:240px) {
+    background-position: $pos;
+    background-attachment: fixed;
+    min-height: $min-height;
+}
+@mixin linear-gradient($direction, $color-stops...) {
+    // Direction has been omitted and happens to be a color-stop
+    @if is-direction($direction)==false {
+        $color-stops: $direction, $color-stops;
+        $direction: 180deg;
+    }
+    background: nth(nth($color-stops, 1), 1);
+    background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
+    background: linear-gradient($direction, $color-stops);
+}
+@mixin default-link-button {
+  @include border-basic();
+  @include font-size(1.2);
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  margin: 5px 0;
+  padding: 10px 15px;
+  text-align: center;
+  text-decoration: none;
+  font-weight: bold;
+  &:hover {
+      color: $text-basic;
+      background: $bg-light-gray;
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/abstracts/_vars.scss

@@ -0,0 +1,3 @@
+@import "vars/colors";
+@import "vars/margins";
+@import "vars/fontSizes";