harpiya_frontend 4.3.0.alpha

data/app/assets/stylesheets/harpiya/frontend/views/harpiya/checkout/payment.scss

@@ -0,0 +1,98 @@
+.payment-option {
+  font-size: font-px-to-rem(14px);
+  font-weight: 500;
+  height: 18px;
+  line-height: 23px;
+  margin-bottom: 10px;
+
+  @include media-breakpoint-up(sm) {
+    font-size: font-px-to-rem(27px);
+    line-height: 35px;
+    margin-bottom: 37px;
+  }
+
+  @include media-breakpoint-up(lg) {
+    font-size: font-px-to-rem(20px);
+    height: 27px;
+    line-height: 32px;
+    margin-bottom: 23px;
+  }
+}
+
+.payment-sources {
+  box-shadow: 0 3px 6px 0 theme-color('shadow');
+  margin: 0 0 125px;
+  padding: 28px 18px 0;
+
+  @include media-breakpoint-up(sm) {
+    padding: 40px 40px 0;
+  }
+
+  @include media-breakpoint-up(lg) {
+    padding: 50px 50px 0;
+  }
+
+  .form-group {
+    margin-bottom: 0;
+  }
+
+  &-list {
+    font-size: font-px-to-rem(14px);
+    font-weight: 500;
+
+    @include media-breakpoint-up(sm) {
+      font-size: font-px-to-rem(27px);
+    }
+
+    @include media-breakpoint-up(lg) {
+      font-size: font-px-to-rem(20px);
+    }
+
+    > div:not(:last-child) {
+      margin-bottom: 5px;
+
+      @include media-breakpoint-up(sm) {
+        margin-bottom: 36px;
+      }
+
+      @include media-breakpoint-up(lg) {
+        margin-bottom: 20px;
+      }
+    }
+
+    &-item {
+      @include media-breakpoint-between(sm, lg) {
+        align-items: flex-end;
+        line-height: 38px;
+      }
+
+      &-image {
+        height: 22px;
+        margin-right: 10px;
+
+        @include media-breakpoint-up(sm) {
+          height: auto;
+          width: 50px;
+        }
+
+        @include media-breakpoint-up(lg) {
+          height: auto;
+          margin-right: 17px;
+          width: 50px;
+        }
+      }
+    }
+  }
+
+  &-add-form, &-existing-cards {
+    padding-bottom: 28px;
+
+    @include media-breakpoint-up(sm) {
+      padding-bottom: 40px;
+    }
+
+    @include media-breakpoint-up(lg) {
+      padding-bottom: 50px;
+    }
+  }
+}

data/app/assets/stylesheets/harpiya/frontend/views/harpiya/checkout/registration.scss

@@ -0,0 +1,25 @@
+.checkout-registration {
+  padding-bottom: 64px;
+
+  &-styled-or {
+    font-size: 12px;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin: 30px 0;
+
+    &:before,
+    &:after {
+      content: '';
+      border-top: 2px solid theme-color('borders');
+      margin: 0 20px 0 0;
+      flex: 1 0 20px;
+    }
+
+    &:after {
+      margin: 0 0 0 20px;
+    }
+  }
+}

data/app/assets/stylesheets/harpiya/frontend/views/harpiya/cms_sections/_index.scss

@@ -0,0 +1 @@
+@import "harpiya/frontend/views/harpiya/cms_sections/product_buy_bar";

data/app/assets/stylesheets/harpiya/frontend/views/harpiya/cms_sections/product_buy_bar.scss

@@ -0,0 +1,20 @@
+.row.section-row.sticky-top {
+  z-index: 3;
+  background-color: rgba(255, 255, 255, 0.95);
+  padding: 5px 0;
+  border-top: 1px solid $global-border-style;
+  border-bottom: 1px solid $global-border-style;
+  top: $harpiya-header-mobile-height + 24px;
+
+  .buy-container {
+    min-height: $harpiya-header-mobile-height;
+  }
+
+  li.buy-bar {
+    a { color: grey;
+      &.active {
+        color: $header-font-color;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/harpiya/frontend/views/harpiya/errors/not_found.scss

@@ -0,0 +1,3 @@
+.not-found-page {
+  min-height: 600px;
+}

data/app/assets/stylesheets/harpiya/frontend/views/harpiya/home/index.scss

@@ -0,0 +1,280 @@
+:root {
+  --harpiya-border-color: transparent;
+}
+
+.brand {
+  img {
+    width: 85%;
+    max-width: 140px;
+  }
+}
+
+.section-row {
+  margin-bottom: #{$grid-gutter-width};
+}
+
+.match-col-gap {
+  padding-left: $container-padding;
+  padding-right: $container-padding;
+}
+
+.homepage {
+  &-hero-image {
+    display: flex;
+    justify-content: start;
+    flex-direction: column;
+    text-align: center;
+    width: 100%;
+    overflow: hidden;
+
+    .hero-image {
+      object-fit: cover;
+      position: relative;
+      z-index: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .hero-content {
+      z-index: 1;
+      right: 10%;
+    }
+
+    &-text {
+      font-size: font-px-to-rem(22px);
+      font-weight: 500;
+      line-height: 1.27;
+      letter-spacing: 0.55px;
+      color: $font-color;
+      width: 116px;
+
+      @include media-breakpoint-up(md) {
+        font-size: font-px-to-rem(44px);
+        width: 398px;
+      }
+
+      @include media-breakpoint-up(lg) {
+        font-size: font-px-to-rem(54px);
+      }
+    }
+
+    .harpiya-btn {
+      &.btn-primary {
+        font-size: font-px-to-rem(12px);
+        font-weight: bold;
+        text-transform: uppercase;
+        @include media-breakpoint-up(md) {
+          font-size: font-px-to-rem(24px);
+        }
+        @include media-breakpoint-up(lg) {
+          font-size: font-px-to-rem(32px);
+        }
+      }
+    }
+  }
+
+  &-taxon-box {
+    display: block;
+
+    h3 {
+      margin: 0;
+      width: auto;
+      background: $primary-background;
+      text-align: center;
+      font-size: font-px-to-rem(14px);
+      font-weight: 500;
+      line-height: 2;
+      letter-spacing: 0.35px;
+      padding: 0 5%;
+
+      @include media-breakpoint-up(md) {
+        font-size: font-px-to-rem(24px);
+      }
+
+      @include media-breakpoint-up(lg) {
+        font-size: font-px-to-rem(32px);
+      }
+    }
+
+    &-text {
+      width: 100%;
+      text-transform: uppercase;
+      color: $font-color;
+      position: absolute;
+      left: 0;
+      bottom: 21px;
+      justify-content: center;
+      display: flex;
+    }
+  }
+
+  &-taxons-separator {
+    background: $secondary-background;
+    color: $secondary-font-color;
+    height: 40px;
+
+    @include media-breakpoint-up(md) {
+      height: 87px;
+    }
+    @include media-breakpoint-up(lg) {
+      height: 190px;
+    }
+  }
+
+  &-fashion-trends-box {
+    background: $secondary-background;
+    color: $secondary-font-color;
+    padding: 30px 15px;
+
+    @include media-breakpoint-up(md) {
+      padding: 5vw 0px;
+    }
+
+    &-summer-text {
+      font-weight: 500;
+      line-height: 1.83;
+      letter-spacing: 0.3px;
+      text-align: center;
+      color: theme-color('primary');
+      font-size: font-px-to-rem(12px);
+
+      @include media-breakpoint-up(md) {
+        font-size: font-px-to-rem(24px);
+      }
+      @include media-breakpoint-up(lg) {
+        font-size: font-px-to-rem(20px);
+      }
+    }
+
+    &-fashion-trends-text {
+      font-weight: 500;
+      line-height: 1.22;
+      letter-spacing: 0.45px;
+      text-align: center;
+      color: $font-color;
+      font-size: font-px-to-rem(18px);
+
+      @include media-breakpoint-up(md) {
+        font-size: font-px-to-rem(36px);
+      }
+      @include media-breakpoint-up(lg) {
+        font-size: font-px-to-rem(26px);
+      }
+    }
+
+    &-description-text {
+      font-weight: 500;
+      line-height: 1.67;
+      letter-spacing: 0.3px;
+      color: $font-color;
+      margin: auto;
+      font-size: font-px-to-rem(12px);
+      max-width: 283px;
+
+      @include media-breakpoint-up(md) {
+        font-size: font-px-to-rem(16px);
+        width: 90%;
+        max-width: 608px;
+      }
+    }
+    .harpiya-btn {
+      &.btn-outline-primary {
+        border: solid 2px theme-color('primary');
+        font-size: font-px-to-rem(12px);
+        font-weight: bold;
+        max-width: 100%;
+        @include media-breakpoint-up(md) {
+          font-size: font-px-to-rem(22px);
+        }
+        @include media-breakpoint-up(lg) {
+          font-size: font-px-to-rem(20px);
+        }
+      }
+    }
+  }
+
+  &-bottom-box {
+    img {
+      width: 100%;
+      object-fit: cover;
+    }
+
+    &-inner {
+      background: $primary-background;
+      margin: auto;
+      position: absolute;
+      max-height: 70%;
+      min-width: 60%;
+      max-width: 80%;
+      bottom: 35px;
+
+      &-small-text {
+        font-weight: 500;
+        line-height: 0.9;
+        letter-spacing: 0.25px;
+        color: theme-color('primary');
+        font-size: font-px-to-rem(10px);
+
+        @include media-breakpoint-up(md) {
+          font-size: font-px-to-rem(18px);
+        }
+        @include media-breakpoint-up(lg) {
+          font-size: font-px-to-rem(16px);
+        }
+      }
+
+      &-big-text {
+        font-weight: 600;
+        line-height: 1.2;
+        letter-spacing: 0.38px;
+        color: $font-color;
+        font-size: font-px-to-rem(14px);
+
+        @include media-breakpoint-up(sm) {
+          font-size: font-px-to-rem(22px);
+        }
+
+        @include media-breakpoint-up(md) {
+          font-size: font-px-to-rem(27px);
+        }
+        @include media-breakpoint-up(lg) {
+          font-size: font-px-to-rem(26px);
+        }
+      }
+    }
+  }
+
+  &-carousel {
+    a,
+    a:hover,
+    a:active,
+    a:visited,
+    a:focus {
+      text-decoration: none !important;
+    }
+    &-text {
+      font-size: font-px-to-rem(12px);
+
+      @include media-breakpoint-up(md) {
+        font-size: font-px-to-rem(22px);
+      }
+      @include media-breakpoint-up(lg) {
+        font-size: font-px-to-rem(24px);
+      }
+    }
+  }
+
+  &-hpb {
+    border: 3px solid var(--harpiya-border-color);
+  }
+}
+
+#missingHomepage {
+  .missing-homepage-logo-container {
+    width: 160px;
+
+    img {
+      max-width: 100%;
+    }
+  }
+}

data/app/assets/stylesheets/harpiya/frontend/views/harpiya/icon.scss

@@ -0,0 +1,13 @@
+.harpiya-icon {
+  &-arrow {
+    &-left {
+      transform: rotate(180deg);
+    }
+    &-up {
+      transform: rotate(270deg);
+    }
+    &-down {
+      transform: rotate(90deg);
+    }
+  }
+}