spree_frontend 3.1.0 → 4.7.0

data/app/assets/stylesheets/spree/frontend/views/spree/shared/carousel/thumbnails.scss

@@ -0,0 +1,89 @@
+.product-thumbnails-carousel {
+  &-item {
+    will-change: transform;
+    $single-gap: 5%;
+    &-content {
+      height: 0;
+      padding-bottom: thubnails-carousel-content-min-height(
+        5,
+        $single-gap,
+        $thumbnails-carousel-single-height
+      );
+      display: block;
+    }
+    &-single {
+      position: relative;
+      display: none;
+      overflow: hidden;
+
+      img {
+        border: 2px solid transparent;
+        &.selected {
+          border-color: $secondary-color;
+        }
+      }
+      &--empty {
+        background: none;
+      }
+      &--visible {
+        margin-top: 0;
+        display: block;
+        cursor: pointer;
+        & ~ & {
+          margin-top: $single-gap;
+        }
+      }
+    }
+    &:not(.carousel-item) {
+      display: none;
+    }
+  }
+  &-previous {
+    top: 0;
+    .spree-icon {
+      display: block;
+    }
+  }
+  &-next {
+    bottom: 0;
+    .spree-icon {
+      display: block;
+    }
+  }
+  &--empty {
+    padding: 0 0 100% / $photo-width-to-height-ratio 0;
+    background: theme-color("light");
+    & > * {
+      display: none !important;
+    }
+  }
+  @include media-breakpoint-up(md) {
+    &-item {
+      $single-gap-md: 16%;
+      &-content {
+        padding-bottom: 0px;
+        height: fit-content;
+      }
+      &-single {
+        &--visible {
+          & ~ & {
+            margin-top: $single-gap-md / 2;
+          }
+
+          .modal-dialog--zoom & ~ & {
+            margin-top: 3px;
+          }
+
+          @media (min-height: $zoom-height-breakpoint) {
+            .modal-dialog--zoom & ~ & {
+              margin-top: 10px;
+            }
+            .modal-dialog--zoom & {
+              margin-top: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/spree/frontend/views/spree/shared/cart.scss

@@ -0,0 +1,60 @@
+.cart-icon {
+  $self: &;
+  position: relative;
+  display: inline-block;
+  padding-right: 7%;
+  svg {
+    width: 24px;
+    height: 24px;
+    @include media-breakpoint-up(xl) {
+      width: 36px;
+      height: 36px;
+    }
+  }
+  &,
+  &:hover {
+    color: $header-font-color;
+  }
+
+  &-count {
+    $size: 19px;
+    $border-width: 1px;
+    border-radius: $size / 2;
+    border: 1px solid $header-background;
+    color: $header-background;
+    background: $header-font-color;
+    position: absolute;
+    height: $size;
+    min-width: $size;
+    right: -5%;
+    bottom: 35%;
+    text-align: center;
+    line-height: $size - $border-width * 2;
+    padding: 0 2px;
+    font-size: font-px-to-rem(12px);
+    display: none;
+    @include media-breakpoint-up(xl) {
+      $size: 26px;
+      $border-width: 2px;
+      border-radius: $size / 2;
+      border-width: $border-width;
+      height: $size;
+      min-width: $size;
+      line-height: $size - $border-width * 2;
+      font-size: font-px-to-rem(15px);
+    }
+  }
+  &--visible-count {
+    #{$self}-count {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+.cart-checkout-btn {
+  font-size: 1.375rem;
+  height: 65px;
+  padding: 16px 28px;
+}

data/app/assets/stylesheets/spree/frontend/views/spree/shared/category_nav_bar.scss

@@ -0,0 +1,86 @@
+.category {
+  &-links {
+    width: 170px;
+    min-width: 170px;
+
+    &-header {
+      color: $meganav-font-color;
+      font-weight: bold;
+      line-height: 1.06;
+      letter-spacing: 0.4px;
+    }
+
+    ul {
+      list-style-type: none;
+      padding-top: 15px;
+    }
+
+    li {
+      font-size: 14px;
+      padding-bottom: 11px;
+    }
+
+    li:hover {
+      text-decoration: underline;
+    }
+
+    a {
+      color: $meganav-font-color;
+      font-weight: 500;
+      line-height: 1.21;
+      letter-spacing: 0.35px;
+      display: block;
+    }
+
+    a:hover {
+      text-decoration: none;
+      color: $font-color;
+    }
+  }
+
+  &-image {
+    background: $secondary-background;
+    color: $secondary-font-color;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    position: relative;
+    width: 350px;
+    height: 234px;
+
+    img {
+      object-fit: contain;
+    }
+  }
+
+  &-box {
+    background-color: white;
+    padding: 1rem 0 0.5rem;
+    width: 90%;
+    position: absolute;
+    bottom: 5%;
+    left: 5%;
+
+    &-small-text {
+      text-align: center;
+      color: theme-color('primary');
+      font-size: font-px-to-rem(12px);
+      padding-bottom: 7px;
+      font-weight: 500;
+      line-height: 0.75;
+      letter-spacing: 0.3px;
+      text-align: center;
+    }
+
+    &-big-text {
+      font-weight: 600;
+      color: $font-color;
+      font-size: font-px-to-rem(16px);
+      font-weight: 600;
+      line-height: 1.38;
+      letter-spacing: 0.4px;
+      text-align: center;
+    }
+  }
+}

data/app/assets/stylesheets/spree/frontend/views/spree/shared/change_store.scss

@@ -0,0 +1,7 @@
+.change-store {
+  .active {
+    a {
+      font-weight: bold;
+    }
+  }
+}

data/app/assets/stylesheets/spree/frontend/views/spree/shared/delete_address_popup.scss

@@ -0,0 +1,118 @@
+.delete-address-popup {
+  width: 100%;
+  height: 277px;
+  border: solid 1px $global-border-style;
+  background-color: $primary-background;
+  align-items: center;
+  position: static;
+  margin: auto;
+  padding: 0;
+
+  @include media-breakpoint-up(sm) {
+    height: auto;
+    padding-bottom: 79.1px;
+  }
+
+  @include media-breakpoint-up(lg) {
+    width: 686px;
+    height: 378px;
+    padding-bottom: 0;
+  }
+
+  &-dropdown {
+    visibility: hidden;
+    opacity: 0;
+    z-index: 5;
+    left: 0;
+    right: 0;
+    position: fixed;
+    top: $spree-header-mobile-height;
+    margin: auto;
+
+    @include media-breakpoint-up(sm) {
+      left: 50%;
+      transform: translateX(-50%);
+      top: 129.2px;
+      width: 80%;
+    }
+
+    &.shown {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 0.5s;
+    }
+  }
+  &-header {
+    font-size: font-px-to-rem(22px);
+    font-weight: 600;
+    line-height: 0.91;
+    letter-spacing: 0.55px;
+    text-align: center;
+    color: $font-color;
+    margin-bottom: 23px;
+
+    @include media-breakpoint-up(lg) {
+      font-size: font-px-to-rem(24px);
+      margin-bottom: 27px;
+      line-height: 1.06;
+      letter-spacing: 0.8px;
+    }
+  }
+  &-text {
+    width: 234px;
+    font-size: font-px-to-rem(16px);
+    font-weight: 500;
+    line-height: 1.38;
+    letter-spacing: 0.4px;
+    text-align: center;
+    color: $font-color;
+    margin: auto;
+
+    @include media-breakpoint-up(sm) {
+      width: 462px;
+      font-size: font-px-to-rem(24px);
+      line-height: 1.42;
+      letter-spacing: 0.6px;
+    }
+  }
+  &-buttons {
+    margin-top: 48px;
+    justify-content: space-evenly;
+    @supports (-ms-ime-align: auto) {
+      justify-content: space-around;
+    }
+  }
+  &-button {
+    width: 198px;
+    height: 29px;
+    font-size: font-px-to-rem(12px);
+    line-height: 1.4;
+    letter-spacing: 0.3px;
+    text-align: center;
+
+    @include media-breakpoint-up(sm) {
+      height: 53px;
+      font-size: font-px-to-rem(20px);
+      line-height: 37px;
+      letter-spacing: 0.5px;
+    }
+
+    @include media-breakpoint-down(xs) {
+      width: 145px;
+    }
+  }
+  &-icon {
+    width: 16.8px;
+    height: 16.8px;
+    margin: 17px 18px 20px auto;
+
+    @include media-breakpoint-up(sm) {
+      width: 29.7px;
+      height: 29.7px;
+      margin: 34px 32px 20px auto;
+    }
+  }
+  &-icon:hover {
+    cursor: pointer;
+  }
+}

data/app/assets/stylesheets/spree/frontend/views/spree/shared/dropdown.scss

@@ -0,0 +1,3 @@
+.spree-flat-select-arrow {
+  pointer-events: none;
+}

data/app/assets/stylesheets/spree/frontend/views/spree/shared/footer.scss

@@ -0,0 +1,60 @@
+.footer-spree {
+  background: $footer-background;
+  color: $footer-font-color;
+  border-color: $global-border-style !important;
+  .logo img {
+    height: 27px;
+    width: 62px;
+    @include media-breakpoint-up(xl) {
+      height: 52px;
+      width: 122px;
+    }
+  }
+  .spree-icon path {
+    fill: $footer-font-color;
+  }
+  &-contact-note {
+    font-size: font-px-to-rem(12px);
+    @include media-breakpoint-up(xl) {
+      font-size: font-px-to-rem(14px);
+    }
+  }
+  &-copyright {
+    border-color: $global-border-style !important;
+    font-size: font-px-to-rem(9px);
+    a {
+      color: $footer-font-color;
+      text-decoration: underline;
+    }
+
+    @include media-breakpoint-up(md) {
+      font-size: font-px-to-rem(14px);
+    }
+    &-logo-spark {
+      height: 14px;
+      @include media-breakpoint-up(md) {
+        height: 21px;
+      }
+    }
+  }
+  &-label {
+    @include media-breakpoint-up(xl) {
+      font-size: font-px-to-rem(16px);
+      font-weight: 500;
+
+      a {
+        font-size: font-px-to-rem(16px) !important;
+      }
+    }
+  }
+  &-info {
+    font-size: font-px-to-rem(14px);
+  }
+  &-menu-links {
+    border-color: $global-border-style !important;
+    a {
+      color: $footer-font-color;
+      font-size: font-px-to-rem(14px);
+    }
+  }
+}

data/app/assets/stylesheets/spree/frontend/views/spree/shared/header.scss

@@ -0,0 +1,82 @@
+body {
+  padding-top: $spree-header-mobile-height;
+
+  @include media-breakpoint-up(sm) {
+    padding-top: $spree-header-tablet-height;
+  }
+  @include media-breakpoint-up(xl) {
+    padding-top: $spree-header-desktop-height;
+  }
+}
+
+.header-spree {
+  background: $header-background;
+  color: $header-font-color;
+  border-color: $global-border-style !important;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 16;
+
+  @include media-breakpoint-up(xl) {
+    z-index: 4;
+
+    &.above-overlay {
+      z-index: 6;
+    }
+  }
+
+  height: $spree-header-mobile-height;
+  &-fluid {
+    max-width: $spree-header-max-width;
+    &-logo {
+      flex-basis: auto;
+      margin: 0;
+      img {
+        max-height: 32px;
+      }
+    }
+    &-secondary-navigation {
+      flex-basis: 0;
+    }
+    &-mobile-menu-toggler {
+      flex-basis: 0;
+      .navbar-toggler {
+        color: $header-font-color;
+      }
+    }
+  }
+  @include media-breakpoint-up(sm) {
+    height: $spree-header-tablet-height;
+    &-fluid {
+      &-logo {
+        img {
+          max-height: 50px;
+        }
+      }
+    }
+  }
+  @include media-breakpoint-up(xl) {
+    height: $spree-header-desktop-height;
+    &-fluid {
+      &-logo {
+        flex-basis: 0;
+        margin: 0 0 1rem;
+        img {
+          max-height: 50px;
+        }
+      }
+      &-primary-navigation {
+        flex-basis: auto;
+      }
+    }
+  }
+}
+
+#logo {
+  margin: 0;
+  padding: 0;
+  a {
+    display: inline-block;
+  }
+}

data/app/assets/stylesheets/spree/frontend/views/spree/shared/login.scss

@@ -0,0 +1,30 @@
+.forgot-password {
+  margin-top: font-px-to-rem(10px);
+
+  a {
+    transition: basic-transition(color);
+    text-transform: uppercase;
+    text-decoration: underline;
+    color: theme-color('info');
+    font-size: font-px-to-rem(12px);
+
+    &:hover,
+    &:active {
+      color: theme-color('primary');
+    }
+  }
+
+  @include media-breakpoint-up(sm) {
+    margin-top: font-px-to-rem(19.7px);
+    a {
+      font-size: font-px-to-rem(23px);
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    margin-top: font-px-to-rem(20px);
+    a {
+      font-size: font-px-to-rem(16px);
+    }
+  }
+}

data/app/assets/stylesheets/spree/frontend/views/spree/shared/main_nav_bar.scss

@@ -0,0 +1,120 @@
+.main-nav-bar {
+  &-item {
+    text-transform: uppercase;
+    font-size: 20px;
+    font-weight: $font-weight-medium;
+    padding: 0 1.5rem;
+    height: 100%;
+    a {
+      color: theme-color('dark-text');
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+  &-category {
+    $self: &;
+    display: flex;
+    position: static;
+
+    &:hover, &.show {
+      #{$self}-button {
+        color: $header-font-color;
+        text-decoration: none;
+        &:after {
+          border-bottom-color: $header-font-color;
+        }
+      }
+    }
+
+    #{$self}-button.active {
+      color: $header-font-color;
+      text-decoration: none;
+      &:after {
+        border-bottom-color: $header-font-color;
+      }
+    }
+
+    .dropdown-item {
+      width: auto;
+      padding: 0;
+      background-color: transparent;
+      &:hover, &:focus {
+        background-color: transparent;
+      }
+      &.active {
+        color: $header-font-color;
+        text-decoration: underline;
+      }
+    }
+
+    &-button {
+      background: none;
+      border: none;
+      color: $header-font-color;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      position: relative;
+      &:after {
+        content: '';
+        display: block;
+        width: calc(100% - 2rem);
+        position: absolute;
+        left: 1rem;
+        bottom: 0.75rem;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        border-bottom: 3px solid transparent;
+      }
+    }
+
+    &-dropdown {
+      min-height: 341px;
+      left: 0;
+      right: 0;
+      width: 100%;
+      position: absolute;
+      top: $spree-header-mobile-height;
+      margin: 0;
+      border: none;
+      z-index: 1000;
+      background: $meganav-background;
+      background-clip: padding-box;
+      border-top: 1px solid $global-border-style;
+
+      form {
+        input#keywords {
+          color: theme-color('dark-text');
+          font-size: font-px-to-rem(14px);
+          width: calc(100% - 40px);
+          &:focus {
+            outline: none;
+          }
+          &::placeholder {
+            color: theme-color('borders');
+          }
+          &::-webkit-search-cancel-button {
+            display: none;
+          }
+          @include media-breakpoint-up(md) {
+            font-size: font-px-to-rem(22px);
+          }
+        }
+        input[type='submit'] {
+          display: none;
+        }
+      }
+
+      @include media-breakpoint-up(xl) {
+        top: $spree-header-desktop-height - 1px;
+      }
+    }
+  }
+
+  .spree-icon {
+    color: theme-color('dark-text');
+  }
+}