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

This is falcon v3.1.2

_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;
+  }
+}