feat(main): Add base theme: This is the falcon theme out of the box.

This is falcon v3.1.2

_dev/css/theme/_index.scss

@@ -0,0 +1,7 @@
+@import "vendors/index";
+@import "utility/index";
+@import "base/index";
+@import "override/index";
+@import "layout/index";
+@import "components/index";
+

_dev/css/theme/base/_base.scss

@@ -0,0 +1,39 @@
+body,
+html {
+  height: 100%;
+}
+
+body {
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+ul {
+  padding-left: 0;
+  list-style: none;
+}
+
+input,
+textarea {
+  &::placeholder {
+    color: $gray-600;
+  }
+
+  &:active {
+    &::placeholder {
+      color: $gray-900;
+    }
+  }
+}
+
+
+input[type="number"] {
+  appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    margin: 0;
+    appearance: none;
+  }
+}

_dev/css/theme/base/_fonts.scss

@@ -0,0 +1,92 @@
+$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';
+@import '~material-design-icons-iconfont/src/material-design-icons';
+
+@import "../../fonts/icomoon/style";
+
+%abstract-icon {
+
+  width: 1em;
+  height: 1em;
+
+  /* use !important to prevent issues with browser extensions that change fonts */
+
+  /* stylelint-disable */
+  font-family: $icomoon-font-family !important;
+  /* stylelint-enable */
+  font-style: normal;
+  font-weight: 400;
+  font-variant: normal;
+  line-height: 1;
+  text-transform: none;
+  speak: none;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+.material-icons {
+  display: inline-block;
+  /* stylelint-disable */
+  font-family: "Material Icons";
+  /* stylelint-enable */
+  font-size: 24px;  /* Preferred icon size */
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: "liga";
+}
+
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff");
+}
+
+/* roboto-500 - latin-ext_latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff");
+}
+
+/* roboto-italic - latin-ext_latin */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/roboto-v20-latin-ext_latin-italic.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-italic.woff") format("woff");
+}
+
+/* roboto-700 - latin-ext_latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff");
+}
+

_dev/css/theme/base/_index.scss

@@ -0,0 +1,3 @@
+@import "base";
+@import "fonts";
+@import "typography";

_dev/css/theme/base/_typography.scss

@@ -0,0 +1,5 @@
+label,
+.label {
+  color: $gray-900;
+}
+

_dev/css/theme/components/404/_errors.scss

@@ -0,0 +1,35 @@
+#products,
+#pagenotfound {
+  #main {
+    .page-header {
+      margin: 2rem 0 3rem;
+    }
+
+    .page-content {
+      margin-bottom: 10rem;
+    }
+  }
+
+  .page-not-found {
+    max-width: 570px;
+    padding: 1rem;
+    margin: 0 auto;
+    font-size: $font-size-sm;
+    color: $gray-600;
+    background: #fff;
+
+    h4 {
+      margin: 0.5rem 0 1rem;
+      font-size: $font-size-base;
+      font-weight: 700;
+    }
+
+    .search-widget {
+      float: none;
+
+      input {
+        width: 100%;
+      }
+    }
+  }
+}

_dev/css/theme/components/404/_index.scss

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

_dev/css/theme/components/_index.scss

@@ -0,0 +1,13 @@
+@import "product/index";
+@import "customer/index";
+@import "cart/index";
+@import "cms/index";
+@import "menu/index";
+@import "404/index";
+@import "newsletter/index";
+@import "homeslider/index";
+@import "search/index";
+@import "page-loader/index";
+@import "links-list/index";
+@import "lazyload/index";
+@import "alert-toast/index";

_dev/css/theme/components/alert-toast/_alert-toast-stack.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+
+.alert-toast-stack {
+  position: fixed;
+  right: map.get($spacers, 3);
+  top: map.get($spacers, 3);
+  width: rem-calc(250px);
+  display: block;
+  z-index: 101;
+}

_dev/css/theme/components/alert-toast/_alert-toast.scss

@@ -0,0 +1,43 @@
+@use "sass:map";
+
+.alert-toast {
+  $self: &;
+
+  @include font-size($font-size-sm);
+  margin-bottom: map.get($spacers, 3);
+  opacity: 0;
+  transform: translateX(100%);
+  box-shadow: $box-shadow;
+  border-radius: $border-radius;
+  transition: 0.4s ease-in-out;
+
+  &__content {
+    padding: map.get($spacers, 2) map.get($spacers, 3);
+  }
+
+  &.show {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  &--info {
+    color: color-yiq($primary);
+    background: $primary;
+  }
+
+  &--danger {
+    color: color-yiq($danger);
+    background: $danger;
+  }
+
+  &--warning {
+    color: color-yiq($warning);
+    background: $warning;
+  }
+
+  &--success {
+    color: color-yiq($success);
+    background: $success;
+  }
+}
+

_dev/css/theme/components/alert-toast/_index.scss

@@ -0,0 +1,2 @@
+@import "alert-toast-stack";
+@import "alert-toast";

_dev/css/theme/components/cart/_blockcart.scss

@@ -0,0 +1,11 @@
+.blockcart {
+  &__dropdown {
+    width: rem-calc(320px);
+    min-width: inherit;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
+  }
+}

_dev/css/theme/components/cart/_cart-dropdown.scss

@@ -0,0 +1,25 @@
+@use "sass:map";
+
+.cart-dropdown {
+  &__content {
+    padding: map.get($spacers, 2) map.get($spacers, 3) map.get($spacers, 3);
+  }
+
+  &__products {
+    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+    max-height: rem-calc(400px);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &__close {
+    font-size: rem-calc(22px);
+    color: $gray-600;
+
+    &:hover,
+    &:focus {
+      color: $black;
+    }
+  }
+}

_dev/css/theme/components/cart/_cart-loader.scss

@@ -0,0 +1,16 @@
+.cart-loader {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: rgba($white, 0.5);
+
+  .cart-loading & {
+    display: flex;
+  }
+}

_dev/css/theme/components/cart/_cart-products.scss

@@ -0,0 +1,26 @@
+@use "sass:map";
+
+.cart-products {
+  display: flex;
+  padding-bottom: map.get($spacers, 3);
+
+  &:not(:first-child) {
+    padding-top: map.get($spacers, 3);
+    border-top: 1px solid $border-color;
+  }
+
+  &__thumb {
+    @include custom-col(rem-calc(80px));
+    padding-right: map.get($spacers, 2);
+  }
+
+  &__desc {
+    flex: 1 1;
+    padding-right: map.get($spacers, 2);
+  }
+
+  &__remove {
+    flex: 0 0;
+  }
+
+}

_dev/css/theme/components/cart/_cart-summary-line.scss

@@ -0,0 +1,23 @@
+@use "sass:map";
+
+.cart-summary-line {
+  display: flex;
+  justify-content: space-between;
+  @include font-size($font-size-base);
+
+  &:not(:last-child) {
+    margin-bottom: map.get($spacers, 2);
+  }
+
+  &.cart-total {
+    @include font-size($font-size-lg);
+  }
+
+  .label {
+    margin-right: map.get($spacers, 2);
+  }
+
+  .value {
+    font-weight: 600;
+  }
+}

_dev/css/theme/components/cart/_index.scss

@@ -0,0 +1,5 @@
+@import "blockcart";
+@import "cart-dropdown";
+@import "cart-products";
+@import "cart-loader";
+@import "cart-summary-line";

_dev/css/theme/components/cms/_cms-content.scss

@@ -0,0 +1,19 @@
+.cms-content {
+  ol,
+  ul {
+    padding-left: .75rem;
+    list-style: inherit;
+    list-style-position: inside;
+  }
+
+  ol {
+    padding-left: rem-calc(30px);
+    list-style: decimal;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+}

_dev/css/theme/components/cms/_index.scss

@@ -0,0 +1 @@
+@import "cms-content";

_dev/css/theme/components/customer/_address.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+
+.address {
+  &__header {
+    background-color: transparent;
+  }
+
+  &__body {
+    line-height: 1.75;
+
+    address {
+      margin: 0;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    padding: 0;
+
+    a {
+      @include make-col(6);
+      padding: map.get($spacers, 2);
+      color: $gray-900;
+      text-align: center;
+
+      &:first-child {
+        border-right: 1px solid $card-border-color;
+      }
+
+      @include hover-focus() {
+        text-decoration: none;
+        background: $gray-200;
+      }
+    }
+  }
+}

_dev/css/theme/components/customer/_customer-links.scss

@@ -0,0 +1,83 @@
+@use "sass:map";
+
+.customer-links {
+  margin: 0 0 map.get($spacers, 3);
+  @include media-breakpoint-up(lg) {
+    margin: 0;
+  }
+
+  .link-item {
+    display: flex;
+    align-items: center;
+  }
+
+  &__list {
+    @include media-breakpoint-down(md) {
+      display: flex;
+      flex-wrap: nowrap;
+
+      margin: rem-calc(20px) 0 0;
+      overflow-x: scroll;
+      overflow-y: hidden;
+      white-space: nowrap;
+      -webkit-overflow-scrolling: touch;
+      -ms-overflow-style: -ms-autohiding-scrollbar;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  a {
+    display: block;
+    flex: 0 0;
+    max-width: inherit;
+    padding: map.get($spacers, 2);
+    font-weight: 700;
+    color: $gray-800;
+    white-space: nowrap;
+    border-radius: $border-radius;
+    @include font-size($font-size-base);
+
+    @include media-breakpoint-up(lg) {
+      white-space: normal;
+    }
+
+    @include hover-focus() {
+      color: $primary;
+      text-decoration: none;
+    }
+
+    i {
+      margin-right: map.get($spacers, 1);
+      color: $primary;
+      @include font-size(26px);
+      @include media-breakpoint-up(md) {
+        margin-right: map.get($spacers, 2);
+      }
+    }
+
+    &.active {
+      color: #fff;
+      background: $primary;
+
+      &::after {
+        display: block;
+      }
+
+      i {
+        color: inherit;
+      }
+    }
+  }
+
+  &__logout {
+    text-align: center;
+
+    &::after,
+    &::before {
+      display: none;
+    }
+  }
+}

_dev/css/theme/components/customer/_index.scss

@@ -0,0 +1,5 @@
+@import "address";
+@import "customer-links";
+@import "user-form";
+@import "product-table";
+@import "product-table-line";

_dev/css/theme/components/customer/_product-table-line.scss

@@ -0,0 +1,163 @@
+@use "sass:map";
+
+.product-line {
+  $self: &;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &--first {
+    border-top: 1px solid $border-color;
+  }
+
+  @include media-breakpoint-up(md) {
+    display: table-row;
+    padding: 0;
+    padding: map.get($spacers, 2) 0;
+    border-bottom: 1px solid $border-color;
+  }
+
+  #{$self} {
+    // NESTING TO OVERRIDE BOOTSTRAP TABLE STYLES
+    &__cell {
+      padding: map.get($spacers, 2);
+      @include media-breakpoint-up(sm) {
+        padding: $table-cell-padding;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  &__qty-input {
+    .bootstrap-touchspin {
+      margin: 0 auto;
+    }
+  }
+
+  &__cell {
+
+    &--img {
+      width: rem-calc(120px);
+      @include media-breakpoint-down(sm) {
+        order: -3;
+        width: auto;
+        @include custom-col(rem-calc(90px));
+      }
+    }
+
+    &--prod {
+      @include media-breakpoint-down(sm) {
+        order: -2;
+        @include custom-col(calc(100% - #{rem-calc(90px)}));
+      }
+    }
+
+    &--delete {
+      @include media-breakpoint-down(sm) {
+        order: -1;
+        @include custom-col(rem-calc(40px));
+      }
+    }
+
+    &--price,
+    &--total,
+    &--qty {
+      @include media-breakpoint-down(sm) {
+        @include make-col(4);
+      }
+    }
+
+    &--total {
+      @include media-breakpoint-down(sm) {
+        text-align: right;
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      &[data-title] {
+        &::before {
+          @include font-size($font-size-xs);
+          display: block;
+          margin: 0 0 map.get($spacers, 1);
+          content: attr(data-title);
+        }
+      }
+    }
+  }
+
+  &__price {
+    @include font-size($font-size-base);
+  }
+
+  &__checkbox-block {
+    position: static;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      cursor: pointer;
+      content: "";
+    }
+  }
+
+  &--return {
+    #{$self} {
+      &__cell {
+        @include media-breakpoint-down(sm) {
+          &--checkbox {
+            order: -3;
+            @include custom-col(rem-calc(40px));
+          }
+
+          &--img {
+            @include custom-col(rem-calc(70px));
+            padding-left: 0;
+          }
+
+          &--prod {
+            @include custom-col(calc(100% - #{rem-calc(110px)}));
+          }
+
+          &--qty,
+          &--price {
+            @include custom-col(50%);
+          }
+        }
+      }
+    }
+  }
+
+  &--extended {
+    #{$self} {
+      &__cell {
+        @include media-breakpoint-down(sm) {
+          &--price,
+          &--qty,
+          &--returned,
+          &--total {
+            @include custom-col(25%);
+          }
+        }
+        @include media-breakpoint-down(xs) {
+          &--price,
+          &--qty,
+          &--returned,
+          &--total {
+            @include custom-col(50%);
+          }
+
+          &--qty {
+            text-align: right;
+          }
+        }
+      }
+    }
+  }
+}

_dev/css/theme/components/customer/_product-table.scss

@@ -0,0 +1,26 @@
+.product-table {
+  margin: 0;
+  overflow: hidden;
+
+  &__head {
+    @include media-breakpoint-down(sm) {
+      display: none;
+    }
+
+    th {
+      border-top: 0;
+    }
+  }
+
+  &__row {
+    @include media-breakpoint-up(sm) {
+      margin-top: -1px;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    tbody {
+      display: block;
+    }
+  }
+}

_dev/css/theme/components/customer/_user-form.scss

@@ -0,0 +1,8 @@
+.user-form {
+  max-width: 800px;
+  margin: 0 auto;
+
+  &--sm {
+    max-width: 600px;
+  }
+}

_dev/css/theme/components/homeslider/_homeslider.scss

@@ -0,0 +1,49 @@
+@use "sass:map";
+
+.homeslider {
+
+  &__img {
+    background: $gray-100;
+  }
+
+  &__list {
+    margin: 0;
+  }
+
+  &__slider {
+    position: relative;
+  }
+
+  &__caption {
+    position: absolute;
+    top: 50%;
+    left: 80px;
+    transform: translateY(-50%);
+  }
+
+  &__desc {
+    * {
+      color: $gray-800;
+    }
+  }
+
+
+  &__arrow {
+    top: 0;
+    bottom: 0;
+    padding: 0 map.get($spacers, 3);
+    line-height: 1;
+
+    > * {
+      font-size: rem-calc(40px);
+    }
+
+    &--prev {
+      left: 0;
+    }
+
+    &--next {
+      right: 0;
+    }
+  }
+}

_dev/css/theme/components/homeslider/_index.scss

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

_dev/css/theme/components/lazyload/_index.scss

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

_dev/css/theme/components/lazyload/_lazyload.scss

@@ -0,0 +1,5 @@
+img.lazyload {
+  &:not(.loaded) {
+    background: $gray-200;
+  }
+}

_dev/css/theme/components/links-list/_index.scss

@@ -0,0 +1 @@
+@import "links-list";

_dev/css/theme/components/links-list/_links-list.scss

@@ -0,0 +1,23 @@
+@use "sass:map";
+
+.links-list {
+  padding: 0 0 map.get($spacers, 4);
+  margin: 0;
+  @include media-breakpoint-up(lg) {
+    padding: 0;
+  }
+
+
+  &__elem {
+    &:not(:last-child) {
+      margin: 0 0 map.get($spacers, 2);
+    }
+  }
+
+  &__link {
+    color: $gray-600;
+    @include hover-focus() {
+      color: $gray-900;
+    }
+  }
+}

_dev/css/theme/components/menu/_index.scss

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

_dev/css/theme/components/menu/_mainmenu.scss

@@ -0,0 +1,143 @@
+@use "sass:map";
+
+.main-menu {
+  $self: &;
+
+  &__item-header {
+    display: flex;
+    align-items: center;
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  &__dropdown {
+    margin: -#{$modal-inner-padding} -#{$modal-inner-padding} map.get($spacers, 3);
+    border-bottom: 1px solid $border-color;
+    @include media-breakpoint-up(md) {
+      position: relative;
+      display: flex;
+      align-items: center;
+      margin: 0;
+      border: 0;
+    }
+  }
+
+  &__list {
+    @include media-breakpoint-up(md) {
+      margin: 0 0 map.get($spacers, 2);
+
+      &--1 {
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+  }
+
+  &__item-link {
+    display: block;
+    padding: $modal-inner-padding;
+
+    @include media-breakpoint-up(md) {
+      display: inline-block;
+      padding: 0;
+    }
+
+    &--top {
+      @include font-size($font-size-lg);
+      font-weight: 700;
+      color: $gray-900;
+
+      @include hover-focus() {
+        text-decoration: none;
+      }
+
+      @include media-breakpoint-up(md) {
+        padding: map.get($spacers, 3) map.get($spacers, 4);
+      }
+    }
+
+    &--sub {
+      color: $gray-900;
+      @include media-breakpoint-up(md) {
+        margin: 0 0 map.get($spacers, 1);
+      }
+    }
+
+    &--1 {
+      font-weight: 700;
+    }
+
+    &--2 {
+      padding-left: #{$modal-inner-padding + rem-calc(map.get($spacers, 2))};
+      @include media-breakpoint-up(md) {
+        padding: 0;
+      }
+    }
+
+    &--3 {
+      padding-left: #{$modal-inner-padding + rem-calc(map.get($spacers, 3))};
+      @include media-breakpoint-up(md) {
+        padding-left: map.get($spacers, 2);
+      }
+    }
+
+    &--4 {
+      padding-left: #{$modal-inner-padding + rem-calc(map.get($spacers, 4))};
+      @include media-breakpoint-up(md) {
+        padding-left: map.get($spacers, 2);
+      }
+    }
+
+  }
+
+  &__item {
+    border-top: 1px solid $border-color;
+
+    &--top {
+      &:first-child {
+        border: 0;
+      }
+    }
+
+    @include media-breakpoint-up(md) {
+      border: 0;
+    }
+
+    &--active {
+      @include media-breakpoint-up(md) {
+        #{$self} {
+          &__sub {
+            visibility: visible;
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+
+    &--1 {
+      @include media-breakpoint-up(md) {
+        @include custom-col-padded(25%);
+      }
+    }
+  }
+
+  &__sub {
+    background: $gray-100;
+    @include media-breakpoint-up(md) {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      left: 0;
+      z-index: 100;
+      padding: map.get($spacers, 4) map.get($spacers, 4) map.get($spacers, 3);
+      visibility: hidden;
+      background: $white;
+      box-shadow: $box-shadow;
+      opacity: 0;
+      transition: 0.2s ease-in;
+      transform: translateY(5px);
+    }
+  }
+}

_dev/css/theme/components/newsletter/_index.scss

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

_dev/css/theme/components/newsletter/_newsletter.scss

@@ -0,0 +1,6 @@
+#left-column {
+  .block_newsletter {
+    padding: 1.563rem 1.25rem;
+    margin-bottom: 1.563rem;
+  }
+}

_dev/css/theme/components/page-loader/_index.scss

@@ -0,0 +1 @@
+@import "page-loader";

_dev/css/theme/components/page-loader/_page-loader.scss

@@ -0,0 +1,16 @@
+.page-loader {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba($white, 0.5);
+
+  .page-loader-active & {
+    display: flex;
+  }
+}

_dev/css/theme/components/product/_comments-pagination.scss

@@ -0,0 +1,15 @@
+.comments-pagination {
+  ul {
+    @extend .pagination;
+    margin: 0;
+  }
+
+  li {
+    @extend .page-item;
+  }
+
+  span {
+    @extend .page-link;
+    cursor: pointer;
+  }
+}

_dev/css/theme/components/product/_customization-modal.scss

@@ -0,0 +1,25 @@
+.customization-modal {
+  .modal-content {
+    border: 1px solid $gray-200;
+    border-radius: 0;
+
+    .modal-body {
+      padding-top: 0;
+
+      .product-customization-line {
+        .label {
+          font-weight: 600;
+          text-align: right;
+        }
+        padding-top: 0.9375rem;
+        padding-bottom: 0.9375rem;
+        border-bottom: 1px solid $gray-200;
+
+        &:last-child {
+          padding-bottom: 0;
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+}

_dev/css/theme/components/product/_index.scss

@@ -0,0 +1,8 @@
+@import "product-miniature";
+@import "product-flags";
+@import "customization-modal";
+@import "price";
+@import "stars";
+@import "products-list";
+@import "product-slider";
+@import "comments-pagination";

_dev/css/theme/components/product/_price.scss

@@ -0,0 +1,19 @@
+.price {
+  @include font-size($font-size-lg);
+  font-weight: 700;
+  color: $primary;
+
+  &--regular {
+    font-weight: 400;
+    color: $text-muted;
+    text-decoration: line-through;
+  }
+
+  &--lg {
+    @include font-size($h2-font-size);
+  }
+
+  &--sm {
+    @include font-size($font-size-base);
+  }
+}

_dev/css/theme/components/product/_product-flags.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+
+.product-flags {
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  pointer-events: none;
+
+  &__flag {
+    width: fit-content;
+    padding: map.get($spacers, 1) map.get($spacers, 2);
+    margin-bottom: map.get($spacers, 2);
+    font-size: $font-size-sm;
+    font-weight: 700;
+    line-height: 1.35;
+    color: #fff;
+    pointer-events: auto;
+    background: $primary;
+
+    &--online-only {
+      position: absolute;
+      right: 0;
+      z-index: 1;
+      margin-top: 0;
+    }
+
+    &--discount-percentage,
+    &--discount-amount,
+    &--discount {
+      background-color: $secondary;
+    }
+
+    &--on-sale {
+      order: -1;
+      width: 100%;
+      text-align: center;
+      background: $secondary;
+    }
+  }
+}

_dev/css/theme/components/product/_product-miniature.scss

@@ -0,0 +1,53 @@
+@use "sass:map";
+
+.product-miniature {
+  $self: &;
+
+  &__functional-btn {
+    position: absolute;
+    right: map.get($spacers, 2);
+    bottom: map.get($spacers, 2);
+    z-index: 2;
+    width: 1.7em;
+    height: 1.7em;
+    padding: 0;
+    line-height: 1.7em;
+    border: 0;
+    @include font-size(20px);
+
+    &--top {
+      top: map.get($spacers, 2);
+      bottom: auto;
+    }
+  }
+
+  &__functional-btn-icon {
+      font-size: inherit;
+      line-height: inherit;
+  }
+
+  &__pricing {
+    margin: 0 0 map.get($spacers, 4);
+  }
+
+  &__title {
+    $number-of-lines: 2;
+    $line-height: 1.3;
+    height: #{$number-of-lines * $line-height}em;
+    overflow: hidden;
+
+    line-height: $line-height;
+  }
+
+  &--smaller {
+    .price,
+    #{$self}__title {
+      @include font-size(15px);
+    }
+
+    #{$self}__pricing {
+      margin: 0;
+    }
+
+  }
+}

_dev/css/theme/components/product/_product-slider.scss

@@ -0,0 +1,17 @@
+.product-slider {
+  margin-right: -5px;
+  margin-left: -5px;
+  @include media-breakpoint-up(sm) {
+    margin-right: -10px;
+    margin-left: -10px;
+  }
+
+  &__item {
+    padding-right: 5px;
+    padding-left: 5px;
+    @include media-breakpoint-up(sm) {
+      padding-right: 10px;
+      padding-left: 10px;
+    }
+  }
+}

_dev/css/theme/components/product/_products-list.scss

@@ -0,0 +1,31 @@
+@use "sass:math";
+
+.products-list {
+  &__block {
+    padding: 0 math.div($grid-gutter-width, 2);
+    margin-bottom: $grid-gutter-width;
+
+    &--grid {
+      @include make-col(6);
+
+      .layout-left-column & {
+        @include media-breakpoint-up(lg) {
+          @include make-col(4);
+        }
+      }
+
+      .layout-full-width & {
+        @include media-breakpoint-up(md) {
+          @include make-col(4);
+        }
+        @include media-breakpoint-up(xl) {
+          @include make-col(3);
+        }
+      }
+    }
+
+    &--list {
+      @include make-col(12);
+    }
+  }
+}

_dev/css/theme/components/product/_stars.scss

@@ -0,0 +1,66 @@
+@use "sass:map";
+
+.star-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+
+  .star,
+  .star-on,
+  .star-hover {
+    display: block;
+    flex: auto;
+    width: 20px;
+    height: 20px;
+    margin-left: 3px;
+    background: url("../img/icons/star_gray.svg") no-repeat 0 0 transparent;
+    background-size: 20px;
+  }
+
+  .star-on,
+  .star-hover {
+    background-image: url("../img/icons/star_active.svg");
+  }
+
+  .star-hover {
+    cursor: pointer;
+  }
+
+  .small-stars & {
+    .star,
+    .star-on,
+    .star-hover {
+      width: 16px;
+      height: 16px;
+      margin-left: 2px;
+      background-size: 16px;
+    }
+  }
+}
+
+.grade-stars {
+  position: relative;
+  display: inline-block;
+  min-width: 120px;
+  height: 20px;
+
+  &.small-stars {
+    min-width: 70px;
+    height: 16px;
+  }
+}
+
+.product-list-reviews {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: map.get($spacers, 2);
+  visibility: hidden;
+  background: rgba($white, 0.4);
+
+  .grade-stars {
+    display: block;
+  }
+}

_dev/css/theme/components/search/_index.scss

@@ -0,0 +1,2 @@
+@import "search-form";
+@import "search-result";

_dev/css/theme/components/search/_search-form.scss

@@ -0,0 +1,54 @@
+@use "sass:map";
+
+.search-form {
+  position: relative;
+  max-width: rem-calc(620px);
+  margin: 0 auto;
+
+  &__form-group {
+    position: relative;
+    @include media-breakpoint-up(md) {
+      .search-result-open & {
+        z-index: 101;
+      }
+    }
+  }
+
+  &__input {
+    height: $search-input-height;
+    padding: 0 rem-calc(70px) 0 rem-calc(30px);
+    line-height: $search-input-height;
+    color: $gray-900;
+    border-width: 1px;
+    border-radius: 99em;
+
+    &:focus {
+      background: $gray-100;
+      box-shadow: none;
+    }
+
+  }
+
+  &__btn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0 map.get($spacers, 3);
+    line-height: 1;
+    color: $primary;
+  }
+}
+
+.search-modal {
+  .modal-body {
+    padding-top: rem-calc(40px);
+  }
+
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: rem-calc(7px) rem-calc(10px);
+  }
+}

_dev/css/theme/components/search/_search-result.scss

@@ -0,0 +1,53 @@
+@use "sass:math";
+@use "sass:map";
+
+.js-search-result {
+  @include media-breakpoint-up(md) {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    left: 0;
+    z-index: 99;
+    padding: #{math.div($search-input-height, 2) + #{map.get($spacers, 2)}} map.get($spacers, 3) map.get($spacers, 3);
+    margin-top: -#{math.div($search-input-height, 2)};
+    background: $white;
+    border: 1px solid $border-color;
+    border-radius: 0 0 $border-radius $border-radius;
+  }
+}
+
+.search-result {
+  @include media-breakpoint-up(md) {
+    padding: map.get($spacers, 3);
+  }
+
+  &__products {
+    margin: map.get($spacers, 3) -#{map.get($spacers, 2)} 0;
+
+    .products-list__block {
+      padding: 0 map.get($spacers, 2);
+      margin: 0 0 map.get($spacers, 3);
+      @include make-col(6);
+      @include media-breakpoint-up(md) {
+        @include make-col(4);
+      }
+    }
+  }
+
+  &__bottom {
+    /* stylelint-disable */
+    position: sticky;
+    /* stylelint-enable */
+    right: 0;
+    bottom: -#{$modal-inner-padding};
+    left: 0;
+    z-index: 1;
+    padding: map.get($spacers, 2) map.get($spacers, 3);
+    margin: 0 -#{map.get($spacers, 2)};
+    background: #fff;
+    @include media-breakpoint-up(md) {
+      padding: 0;
+      margin: 0;
+    }
+  }
+}

_dev/css/theme/layout/_footer.scss

@@ -0,0 +1,13 @@
+@use "sass:map";
+
+.l-footer {
+  padding-top: map.get($spacers, 5);
+  margin-top: auto;
+}
+
+.footer-container {
+  padding-top: map.get($spacers, 5);
+  padding-bottom: map.get($spacers, 2);
+  margin-top: map.get($spacers, 5);
+  background: $gray-100;
+}

_dev/css/theme/layout/_header.scss

@@ -0,0 +1,73 @@
+@use "sass:map";
+/* HEADER STYLES */
+
+.l-header {
+  margin: 0 0 map.get($spacers, 3);
+}
+
+.header-top {
+  background: $white;
+  border-bottom: 1px solid $border-color;
+
+  &__row {
+    flex-wrap: nowrap;
+    align-items: center;
+    @include media-breakpoint-up(md) {
+      flex-wrap: wrap;
+    }
+
+  }
+
+  &__link {
+    display: block;
+    padding: map.get($spacers, 1);
+    color: $gray-700;
+    text-decoration: none;
+    border-radius: $border-radius;
+
+    @include media-breakpoint-up(sm) {
+      padding: map.get($spacers, 2);
+    }
+
+    @include hover-focus() {
+      color: $black;
+      text-decoration: none;
+      background: $gray-100;
+    }
+  }
+
+  &__icon-container {
+    position: relative;
+  }
+
+  &__icon {
+    display: block;
+    font-size: rem-calc(26px);
+    @include media-breakpoint-up(sm) {
+      font-size: rem-calc(32px);
+    }
+  }
+
+  &__badge {
+    position: absolute;
+    top: -0.5em;
+    right: -0.2em;
+    width: 2em;
+    height: 2em;
+    font-size: rem-calc(8px);
+    font-weight: 700;
+    line-height: 2em;
+    color: $white;
+    text-align: center;
+    background: $primary;
+    border-radius: 50%;
+  }
+
+  &__block {
+    &--search {
+      @include media-breakpoint-down(sm) {
+        flex-grow: 0;
+      }
+    }
+  }
+}

_dev/css/theme/layout/_index.scss

@@ -0,0 +1,3 @@
+@import "footer";
+@import "header";
+@import "main";

_dev/css/theme/layout/_main.scss

@@ -0,0 +1,5 @@
+.l-main {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}

_dev/css/theme/override/_index.scss

@@ -0,0 +1,3 @@
+@import "swiper/index";
+@import "bootstrap/index";
+@import "bootstrap-touchspin/index";

_dev/css/theme/override/bootstrap-touchspin/_bootstrap-touchspin.scss

@@ -0,0 +1,59 @@
+.bootstrap-touchspin {
+  max-width: 100px;
+  overflow: hidden;
+  border: $input-border-width solid $input-border-color;
+  border-radius: $border-radius;
+  margin: 0 auto;
+
+  > input {
+    max-width: 60px;
+    padding: 0;
+    font-weight: 700;
+    text-align: center;
+    border: none;
+    border-right: $input-border-width solid $input-border-color;
+    border-left: $input-border-width solid $input-border-color;
+    box-shadow: none;
+    appearance: textfield;
+    margin-top: -#{$input-border-width};
+    margin-bottom: -#{$input-border-width};
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      margin: 0;
+      appearance: none;
+    }
+  }
+
+  .btn {
+    position: relative;
+    z-index: 2;
+    display: block;
+    width: 1.8em;
+    height: 100%;
+    padding: 0;
+    color: $input-color;
+    text-align: center;
+    background-color: $white;
+    border: 0;
+
+    @include hover-focus() {
+      background: $gray-200;
+    }
+  }
+
+  .input-group-prepend,
+  .input-group-append {
+    display: block;
+    margin: 0;
+  }
+}
+
+.input-touchspin {
+  max-width: 100px;
+  opacity: 0;
+
+  .bootstrap-touchspin & {
+    opacity: 1;
+  }
+}

_dev/css/theme/override/bootstrap-touchspin/_index.scss

@@ -0,0 +1 @@
+@import "bootstrap-touchspin";

_dev/css/theme/override/bootstrap/_bootstrap-backwards-compatibility.scss

@@ -0,0 +1,29 @@
+/* stylelint-disable declaration-no-important */
+@each $bp in map-keys($grid-breakpoints) {
+  .hidden-#{$bp}-up {
+    @include media-breakpoint-up($bp) {
+      display: none !important;
+    }
+  }
+  .hidden-#{$bp}-down {
+    @include media-breakpoint-down($bp) {
+      display: none !important;
+    }
+  }
+}
+/* stylelint-enable declaration-no-important */
+
+.float-xs-left  { @extend .float-left; }
+
+.float-xs-right { @extend .float-right; }
+
+.float-xs-none  { @extend .float-none; }
+
+
+@if $grid-columns > 0 {
+  @for $i from 1 through $grid-columns {
+    .col-xs-#{$i} {
+      @extend .col-#{$i};
+    }
+  }
+}

_dev/css/theme/override/bootstrap/_breadcrumb.scss

@@ -0,0 +1,32 @@
+.breadcrumb {
+  @include media-breakpoint-down(sm) {
+    position: relative;
+    flex-wrap: nowrap;
+    padding-right: 0;
+    padding-left: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .breadcrumb-item {
+      &:first-child {
+        padding-left: $breadcrumb-padding-x;
+      }
+
+      &:last-child {
+        padding-right: $breadcrumb-padding-x;
+      }
+    }
+  }
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  display: inline-block;
+  float: none;
+}

_dev/css/theme/override/bootstrap/_button.scss

@@ -0,0 +1,4 @@
+.btn-icon {
+  font-size: inherit;
+  vertical-align: middle;
+}

_dev/css/theme/override/bootstrap/_card.scss

@@ -0,0 +1,24 @@
+.card {
+  &--secondary {
+    border: 0;
+  }
+}
+
+.card-body + .card-body {
+  border-top: $card-border-width solid $card-border-color;
+}
+
+.card-group-vertical {
+  > .card {
+    &:not(:first-child) {
+      border-top: 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}

_dev/css/theme/override/bootstrap/_collapse.scss

@@ -0,0 +1,16 @@
+.icon-collapse {
+  &[aria-expanded="true"] {
+    .material-icons {
+      font-size: 0;
+
+      &::before {
+        font-size: 24px;
+        content: "keyboard_arrow_up";
+      }
+    }
+  }
+
+  @include hover-focus() {
+    text-decoration: none;
+  }
+}

_dev/css/theme/override/bootstrap/_custom-control.scss

@@ -0,0 +1,93 @@
+@use "sass:math";
+
+.custom-checkbox-color {
+  @extend .custom-checkbox;
+
+  .custom-control-label {
+    &::before {
+      /* stylelint-disable */
+      display: none !important;
+      /* stylelint-enable */
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label-dark {
+    &::after {
+      background-image: escape-svg($custom-checkbox-indicator-icon-checked-dark);
+    }
+  }
+}
+
+.custom-control-input-color {
+  position: absolute;
+  top: math.div(($font-size-base * $line-height-base - $custom-control-indicator-size), 2);
+  left: -($custom-control-gutter + $custom-control-indicator-size);
+  display: block;
+  width: $custom-control-indicator-size;
+  height: $custom-control-indicator-size;
+  pointer-events: none;
+  content: "";
+  background-color: $custom-control-indicator-bg;
+  border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
+  @include box-shadow($custom-control-indicator-box-shadow);
+  @include border-radius($custom-checkbox-indicator-border-radius);
+}
+
+.custom-checkbox-block {
+  padding-left: $custom-control-indicator-size;
+  .custom-control-label::after,
+  .custom-control-label::before {
+    left: -#{$custom-control-indicator-size};
+  }
+}
+
+.custom-radio-color {
+  @extend .custom-radio;
+  position: relative;
+  width: $custom-color-control-indicator-size;
+  height: $custom-color-control-indicator-size;
+  padding-left: $custom-color-control-indicator-size;
+
+  .custom-control-input-color {
+    @extend .custom-control-input-color;
+    top: 0;
+    left: -#{$custom-color-control-indicator-size};
+    width: $custom-color-control-indicator-size;
+    height: $custom-color-control-indicator-size;
+    border-radius: $custom-radio-indicator-border-radius;
+  }
+
+  .custom-control-label {
+    &::before {
+      display: none;
+    }
+  }
+
+
+  .custom-control-input {
+    width: 100%;
+    height: 100%;
+
+    &:checked ~ .custom-control-label {
+      &::after {
+        top: #{math.div(($custom-color-control-indicator-size - $custom-color-control-indicator-icon-size), 2)};
+        right: #{math.div(($custom-color-control-indicator-size - $custom-color-control-indicator-icon-size), 2)};
+        left: auto;
+        width: $custom-color-control-indicator-icon-size;
+        height: $custom-color-control-indicator-icon-size;
+        background-image: escape-svg($custom-checkbox-indicator-icon-checked);
+      }
+
+      .custom-control-input-color {
+        border-color: $custom-color-control-indicator-size-checked-border-color;
+      }
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label-dark {
+    &::after {
+      background-image: escape-svg($custom-checkbox-indicator-icon-checked-dark);
+    }
+  }
+}
+

_dev/css/theme/override/bootstrap/_form.scss

@@ -0,0 +1,3 @@
+.form-label {
+  display: block;
+}

_dev/css/theme/override/bootstrap/_grid.scss

@@ -0,0 +1,4 @@
+.container .container {
+  padding-right: 0;
+  padding-left: 0;
+}

_dev/css/theme/override/bootstrap/_index.scss

@@ -0,0 +1,9 @@
+@import "breadcrumb";
+@import "button";
+@import "grid";
+@import "card";
+@import "collapse";
+@import "form";
+@import "list-group";
+@import "custom-control";
+@import "bootstrap-backwards-compatibility";

_dev/css/theme/override/bootstrap/_list-group.scss

@@ -0,0 +1,47 @@
+
+.list-group-item-action {
+  font-weight: 500;
+}
+
+
+.list-group-item-action-dropdown {
+  @extend .list-group-item-action;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+
+  .list-group-item-collapse {
+    position: relative;
+    z-index: 1;
+    width: auto;
+    padding: 0;
+    margin-left: 10px;
+    /* stylelint-disable */
+    text-decoration: none !important;
+    /* stylelint-enable */
+    background: none;
+  }
+
+}
+
+.list-group-collapse {
+  .list-group-collapse {
+    .list-group-item {
+      padding-left: #{$list-group-item-padding-x + $list-group-item-padding-x * 0.5};
+      font-weight: 400;
+      border-bottom: $list-group-border-width solid $list-group-border-color;
+    }
+
+    .list-group-collapse {
+      .list-group-item {
+        padding-left: #{$list-group-item-padding-x + $list-group-item-padding-x * 1};
+        border-bottom: $list-group-border-width solid $list-group-border-color;
+      }
+    }
+  }
+}
+
+.list-group-item-action-dropdown-link {
+  @extend .list-group-item-action;
+  padding: 0;
+}

_dev/css/theme/override/swiper/_index.scss

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

_dev/css/theme/override/swiper/_navigation.scss

@@ -0,0 +1,11 @@
+.swiper-button-custom {
+  width: auto;
+  height: auto;
+  margin: 0;
+  color: $primary;
+
+  &::after {
+    display: none;
+  }
+
+}

_dev/css/theme/utility/_cursor.scss

@@ -0,0 +1,6 @@
+
+.cursor-pointer {
+  /* stylelint-disable */
+  cursor: pointer !important;
+  /* stylelint-enable */
+}

_dev/css/theme/utility/_dynamic-import-fix.scss

@@ -0,0 +1,14 @@
+// FIX TO MODAL, hidden by default
+.modal {
+  display: none;
+}
+
+// FIX TO MODAL, hidden by default
+.dropdown-menu {
+  display: none;
+}
+
+//FIX TO TOAST, opacity by default
+.toast {
+  opacity: 0;
+}

_dev/css/theme/utility/_index.scss

@@ -0,0 +1,3 @@
+@import "cursor";
+@import "typography";
+@import "dynamic-import-fix";

_dev/css/theme/utility/_typography.scss

@@ -0,0 +1,28 @@
+
+.font-reset {
+  /* stylelint-disable */
+  font-size: inherit !important;
+  /* stylelint-enable */
+}
+
+.line-height-reset {
+  /* stylelint-disable */
+  line-height: inherit !important;
+  /* stylelint-enable */
+}
+
+.font-sm {
+  @include font-size($font-size-sm);
+}
+
+.font-lg {
+  @include font-size($font-size-lg);
+}
+
+.font-xs {
+  @include font-size($font-size-xs);
+}
+
+.font-base {
+  @include font-size($font-size-base);
+}

_dev/css/theme/vendors/_bootstrap.scss

@@ -0,0 +1,38 @@
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";
+
+
+//MOVED TO DYNAMIC IMPORTS
+// @import "~bootstrap/scss/dropdown";
+// @import "~bootstrap/scss/modal";
+// @import "~bootstrap/scss/popover";
+// @import "~bootstrap/scss/toasts";
+
+//NOT USED
+// @import "~bootstrap/scss/jumbotron";
+// @import "~bootstrap/scss/carousel";

_dev/css/theme/vendors/_index.scss

@@ -0,0 +1,2 @@
+@import "bootstrap";
+@import "swiper";

_dev/css/theme/vendors/_swiper.scss

@@ -0,0 +1,8 @@
+@import "swiper/scss";
+
+@import "swiper/scss/autoplay";
+@import "swiper/scss/controller";
+@import "swiper/scss/free-mode";
+@import "swiper/scss/navigation";
+@import "swiper/scss/pagination";
+@import "swiper/scss/thumbs";