spree_frontend 4.0.8 → 4.1.0.rc1

data/app/assets/stylesheets/spree/frontend/views/spree/orders/show.scss

@@ -0,0 +1,273 @@
+.order-show {
+  padding-bottom: 40px;
+  font-weight: 500;
+
+  & > .order-show-check-mark {
+    color: $secondary-color;
+    margin-bottom: 25px;
+    @include media-breakpoint-up(sm) {
+      margin-bottom: 42px;
+    }
+  }
+
+  h5 {
+    @include media-breakpoint-up(sm) {
+      font-size: font-px-to-rem(29px);
+      line-height: 18px;
+      letter-spacing: 0.73px;
+    }
+  }
+
+  dd {
+    font-size: font-px-to-rem(14px);
+    margin-bottom: 30px;
+    @include media-breakpoint-up(sm) {
+      padding-bottom: 0px;
+      margin-bottom: 60px;
+      font-size: font-px-to-rem(27px);
+    }
+    @include media-breakpoint-up(lg) {
+      font-size: font-px-to-rem(18px);
+    }
+  }
+
+  dt {
+    font-weight: 500;
+    margin-bottom: 18px;
+    @include media-breakpoint-up(sm) {
+      padding: 0;
+      margin-bottom: 32px;
+      font-size: font-px-to-rem(30px);
+    }
+    @include media-breakpoint-up(lg) {
+      font-size: font-px-to-rem(22px);
+    }
+  }
+
+  &-number {
+    margin-top: 100px;
+    margin-bottom: 38px;
+    @include media-breakpoint-up(sm) {
+      margin-top: 80px;
+      margin-bottom: 60px;
+      font-size: font-px-to-rem(25px);
+    }
+    @include media-breakpoint-up(lg) {
+      margin-top: 60px;
+      font-size: font-px-to-rem(26px);
+    }
+  }
+
+  &-explain {
+    margin: 31px 0 0;
+    font-size: 23px;
+  }
+
+  &-line-items {
+    @include media-breakpoint-up(lg) {
+      border: none;
+      flex: 1 1 0;
+    }
+
+    &-header {
+      font-size: font-px-to-rem(27px);
+    }
+
+    &-line-item {
+      &:not(:last-child) {
+        margin-bottom: 26px;
+      }
+
+      @include media-breakpoint-up(sm) {
+        border-bottom: 1px solid $global-border-style;
+        padding-top: 40px;
+        padding-bottom: 40px;
+
+        &:first-child {
+          border-top: 1px solid $global-border-style;
+        }
+
+        &:not(:last-child) {
+          margin-bottom: 0;
+        }
+      }
+
+      @include media-breakpoint-up(lg) {
+        border-bottom: none;
+        padding-top: 0;
+        padding-bottom: 60px;
+
+        &:first-child {
+          border-top: none;
+        }
+
+        &:last-child {
+          padding-bottom: 0;
+        }
+      }
+      
+      a {
+        max-width: 50%;
+        margin-right: 20px;
+
+        @include media-breakpoint-up(lg) {
+          margin-right: 40px;
+        }
+      }
+
+      img {
+        width: 73px;
+        height: auto;
+
+        @include media-breakpoint-up(sm) {
+          width: 205px;
+        }
+
+        @include media-breakpoint-up(lg) {
+          width: 162px;
+        }
+      }
+
+      &-desc {
+        display: grid;
+        justify-content: space-between;
+        grid-template:
+              'n' fit-content(20px)
+              's' fit-content(20px)
+              'p' fit-content(20px)
+              'q' fit-content(20px)
+              't' fit-content(20px);
+
+        @include media-breakpoint-up(sm) {
+          font-size: font-px-to-rem(26px);
+        }
+        @include media-breakpoint-up(lg) {
+          grid-template: fit-content(40px) fit-content(22px) 1fr fit-content(60px) / repeat(3, 1fr);
+          grid-template-areas: 'n n n'
+                               's s s'
+                               '. . .'
+                               'p q t';
+        }
+
+        &-name {
+          grid-area: n;
+          font-size: font-px-to-rem(14px);
+          @include media-breakpoint-up(sm) {
+            font-size: font-px-to-rem(27px);
+          }
+          @include media-breakpoint-up(lg) {
+            font-size: font-px-to-rem(32px);
+          }
+        }
+
+        &-subtitle {
+          grid-area: s;
+          font-size: font-px-to-rem(12px);
+          ul {
+            li {
+              display: inline;
+              &:not(:last-child):after {
+                content: ', ';
+              }
+            }
+          }
+          @include media-breakpoint-up(sm) {
+            font-size: font-px-to-rem(22px);
+          }
+          @include media-breakpoint-up(lg) {
+            font-size: font-px-to-rem(16px);
+          }
+        }
+        &-price {
+          grid-area: p;
+          font-size: font-px-to-rem(12px);
+          @include media-breakpoint-up(sm) {
+            font-size: font-px-to-rem(26px);
+          }
+          @include media-breakpoint-up(lg) {
+            font-size: font-px-to-rem(20px);
+          }
+          div:last-child {
+            @include media-breakpoint-up(lg) {
+              font-size: font-px-to-rem(22px);
+            }
+          }
+          &-attr-name {
+            @include media-breakpoint-down(lg) {
+              span:after {
+                content: ':';
+              }
+            }
+          }
+        }
+        &-quantity {
+          grid-area: q;
+          font-size: font-px-to-rem(12px);
+          @include media-breakpoint-up(sm) {
+            font-size: font-px-to-rem(27px);
+          }
+          @include media-breakpoint-up(lg) {
+            font-size: font-px-to-rem(20px);
+          }
+          span {
+            @include media-breakpoint-up(lg) {
+              font-size: font-px-to-rem(22px);
+            }
+          }
+        }
+        &-total {
+          grid-area: t;
+          font-size: font-px-to-rem(12px);
+          @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:last-child {
+            @include media-breakpoint-up(lg) {
+              font-size: font-px-to-rem(22px);
+            }
+          }
+          &-attr-name {
+            @include media-breakpoint-down(lg) {
+              span:after {
+                content: ':';
+              }
+            }
+          }
+        }
+        &-quantity {
+          &-val {
+            @include media-breakpoint-up(lg) {
+              font-weight: bold;
+            }
+          }
+          &-attr-name {
+            @include media-breakpoint-down(lg) {
+              span:after {
+                content: ':';
+              }
+            }
+          }
+        }
+        &-check-mark {
+          padding-bottom: 25px;
+        }
+      }
+    }
+  }
+  #checkout-summary {
+    margin-top: 30px;
+    @include media-breakpoint-up(sm) {
+      margin-top: 75px;
+    }
+    @include media-breakpoint-up(lg) {
+      flex: 0 0 40%;
+      align-self: flex-start;
+      max-width: 380px;
+      margin-top: 0px;
+    }
+  }
+}
+

data/app/assets/stylesheets/spree/frontend/views/spree/products/cart_form.scss

@@ -0,0 +1,250 @@
+.add-to-cart-form {
+  &-price {
+    font-size: font-px-to-rem(24px);
+    color: $font-color;
+    font-weight: 500;
+    @include media-breakpoint-up(sm) {
+      font-size: font-px-to-rem(36px);
+    }
+  }
+  &-general-availability {
+    font-size: font-px-to-rem(12px);
+    color: $font-color;
+    font-weight: 500;
+    @include media-breakpoint-up(sm) {
+      font-size: font-px-to-rem(20px);
+    }
+    &-value {
+      color: theme-color("primary");
+      &--danger {
+        color: theme-color("danger");
+      }
+      &--warning {
+        color: theme-color("warning");
+      }
+    }
+  }
+  .quantity-select button {
+    background: $input-background;
+    color: color-yiq($input-background);
+  }
+  @include media-breakpoint-up(md) {
+    &-price {
+      font-size: font-px-to-rem(28px);
+    }
+    &-general-availability {
+      font-size: font-px-to-rem(14px);
+    }
+  }
+  hr {
+    border-color: $global-border-style;
+  }
+}
+
+.product-variants {
+  $self: &;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  &-variant {
+    transition: opacity 200ms;
+    &-title {
+      font-size: font-px-to-rem(12px);
+      @include media-breakpoint-up(sm) {
+        font-size: font-px-to-rem(20px);
+      }
+      &-value {
+        font-weight: 500;
+      }
+    }
+    &-values {
+      $self2: &;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      margin-left: - calc-spacer(1);
+      margin-right: - calc-spacer(1);
+      &-label {
+        font-size: font-px-to-rem(11px);
+        border: 2px solid theme-color-level("light", 1);
+        font-weight: 500;
+        min-width: 26px;
+        padding: calc-spacer(1);
+        transition: border-color 200ms;
+        cursor: pointer;
+        &:hover {
+          border-color: theme-color("dark-text");
+        }
+      }
+      &-radio {
+        opacity: 0;
+        position: fixed;
+        &:checked {
+          &+#{$self}-variant-values-label {
+            border-color: theme-color("dark-text");
+          }
+        }
+        &--bad-combination {
+          &+#{$self2}-label {
+            position: relative;
+            color: theme-color-level("light", 1);
+            &:hover {
+              border-color: theme-color-level("light", 1);
+              cursor: not-allowed;
+            }
+            &:after {
+              display: block;
+              width: 2px;
+              height: 100% * sqrt(2);
+              content: '';
+              background: theme-color-level("light", 1);
+              transition: background 200ms;
+              transform: rotate(-45deg);
+              top: 50% - 50% * sqrt(2);
+              left: calc(50% - 1px);
+              position: absolute;
+            }
+          }
+        }
+
+        &:disabled + label {
+          color: theme-color-level("light", 1);
+          cursor: not-allowed;
+          opacity: 0.5;
+
+          &:active, &:focus {
+            outline: theme-color("dark-text") dotted thin;
+          }
+        }
+      }
+    }
+    &--color {
+      $self3: &;
+      #{$self}-variant {
+        &-values {
+          &-label {
+            $size: 28px;
+            $size-border: 3px;
+            border-radius: 50%;
+            border-width: $size-border;
+            width: $size;
+            height: $size;
+            padding: calc-spacer(0);
+            line-height: $size - $size-border * 2;
+            &:before {
+              $inner-circle-size: $size - ($size-border - 1px) * 2; // Cover outer border by 1px to avoid color bleed.
+              content: '';
+              margin: -1px;
+              display: block;
+              border: 2px solid theme-color("light");
+              width: $inner-circle-size;
+              height: $inner-circle-size;
+              border-radius: 50%;
+              position: absolute;
+            }
+          }
+          &-radio {
+            &--bad-combination {
+              &+#{$self}-variant-values-label {
+                &:after {
+                  height: 100%;
+                  top: 0;
+                }
+              }
+            }
+            &:checked {
+              &--bad-combination {
+                &+#{$self}-variant-values-label {
+                  &:after {
+                    background: theme-color("dark-text");
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    &--disabled {
+      opacity: 0.3;
+      #{$self}-variant {
+        &-values {
+          &-label {
+            &:hover {
+              border-color: theme-color-level("light", 1);
+              cursor: not-allowed;
+            }
+          }
+          &-radio {
+            &--bad-combination {
+              &+#{$self}-variant-values-label {
+                &:hover {
+                  &:after {
+                    background: theme-color-level("light", 1);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &>li+li{
+    margin-top: calc-spacer(4);
+  }
+  @include media-breakpoint-up(md) {
+    &-variant {
+      &-title {
+        font-size: font-px-to-rem(14px);
+      }
+      &-values {
+        &-value {
+          font-size: font-px-to-rem(14px);
+        }
+      }
+    }
+  }
+}
+
+.select-label {
+  cursor: pointer;
+  padding: 4px 7px;
+  border: 2px solid theme-color('borders');
+  min-width: 32px;
+  max-height: 32px;
+  text-align: center;
+  font-size: font-px-to-rem(14px);
+  font-weight: 500;
+  @include media-breakpoint-up(sm) {
+    border: 3px solid theme-color('borders');
+    padding: 7px 7px;
+    min-width: 49px;
+    max-height: 49px;
+    font-size: font-px-to-rem(20px);
+  }
+  @include media-breakpoint-up(md) {
+    border: 2px solid theme-color('borders');
+    padding: 4px 7px;
+    min-width: 32px;
+    max-height: 32px;
+    font-size: font-px-to-rem(14px);
+  }
+
+  input:checked + & {
+    border-color: theme-color('secondary');
+  }
+}
+
+.add-to-cart-button {
+  padding: 6px 12px;
+  font-size: font-px-to-rem(17px);
+  @include media-breakpoint-up(sm) {
+    padding: 12px;
+    font-size: font-px-to-rem(30px);
+  }
+  @include media-breakpoint-up(md) {
+    padding: 6px 12px;
+    font-size: font-px-to-rem(18px);
+  }
+}