@ecomplus/storefront-components 1.0.0-beta.19 → 1.0.0-beta.190

package/src/scss/ShippingCalculator.scss

@@ -4,7 +4,7 @@
   }
 
   &__services {
-    max-width: 350px;
+    max-width: 370px;
     font-size: var(--font-size-sm);
 
     .active {
@@ -12,9 +12,50 @@
     }
   }
 
+  &__label {
+    padding: var(--spacer-3) var(--spacer-2);
+
+    i {
+      font-size: var(--font-size-lg);
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
+      margin-right: var(--spacer-2);
+      color: var(--primary-light);
+    }
+  }
+
   &__option {
     display: flex;
     justify-content: space-between;
     width: 100%;
+
+    > small {
+      min-width: 70px;
+      text-align: right;
+    }
+
+    @media (min-width: 1200px) {
+      display: block;
+      position: relative;
+
+      > small {
+        position: absolute;
+        top: -5px;
+        right: -5px;
+      }
+    }
+  }
+
+  &__free-from-value {
+    margin-top: var(--spacer-2);
+
+    .progress {
+      height: 1.5rem;
+      margin-top: var(--spacer-1);
+
+      &-bar {
+        background-color: var(--info);
+      }
+    }
   }
 }

package/src/scss/ShippingLine.scss

@@ -0,0 +1,24 @@
+.shipping-line {
+  > strong {
+    display: inline-block;
+    min-width: 120px;
+  }
+
+  > span {
+    display: inline-block;
+  }
+
+  > small {
+    display: block;
+    display: -webkit-box;
+    line-height: var(--line-height-sm);
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    color: var(--text-muted);
+  }
+}
+
+.active .shipping-line > small {
+  color: inherit;
+}

package/src/scss/TheAccount.scss

@@ -19,6 +19,10 @@
 
   &__nav {
     margin-top: var(--spacer-5);
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
   }
 
   &__content {

package/src/scss/TheCart.scss

@@ -0,0 +1,54 @@
+.cart {
+  &__empty {
+    width: 100%;
+    text-align: center;
+  }
+
+  .cart-item {
+    padding-top: 1rem;
+    border-top: 1px dotted var(--gray);
+
+    &__name {
+      margin-bottom: .5rem;
+    }
+  }
+
+  &__discount {
+    margin: .5rem 0;
+
+    @media (min-width: 576px) {
+      margin: 1.5rem 0 1rem;
+    }
+  }
+
+  &__info {
+    border-radius: .25rem;
+    padding: 1rem;
+    background: var(--light);
+  }
+
+  &__summary-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: right;
+
+    > span {
+      color: var(--gray);
+    }
+  }
+
+  &__shipping {
+    margin: 1rem 0;
+  }
+
+  &__total {
+    margin: 1rem 0;
+
+    .prices {
+      &__value {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}

package/src/scss/TheProduct.scss

@@ -1,3 +1,4 @@
+
 .product {
   &__sku {
     color: var(--text-muted);
@@ -10,10 +11,12 @@
   }
 
   &__unavailable,
+  &__without-price,
   &__out-of-stock {
     font-weight: var(--font-bold);
     font-size: var(--font-size-lg);
     color: var(--warning);
+    margin-bottom: var(--spacer-3);
   }
 
   &__discount {
@@ -21,9 +24,28 @@
   }
 
   &__short-stock {
-    color: var(--danger);
     font-weight: var(--font-light);
     text-transform: lowercase;
+    background: rgba(var(--info-rgb), .2);
+    display: inline-block;
+    padding: var(--spacer-1) var(--spacer-3);
+    border-radius: var(--border-radius-sm);
+
+    i,
+    svg {
+      color: var(--info);
+    }
+  }
+
+  &__production {
+    i,
+    svg {
+      color: var(--info);
+    }
+
+    strong {
+      text-transform: lowercase;
+    }
   }
 
   &__payment > a {
@@ -31,4 +53,127 @@
     justify-content: space-between;
     align-items: center;
   }
+
+  &__free-shipping-from {
+    font-size: var(--font-size);
+    color: var(--secondary);
+  }
+
+  &__sticky {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 500;
+    width: 100%;
+    padding: var(--spacer-2) var(--spacer-3);
+    background: var(--body-bg);
+    box-shadow: var(--box-shadow-lg);
+
+    &-container {
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    a {
+      padding: var(--spacer-2) var(--spacer-5);
+      margin-left: var(--spacer-3);
+      white-space: nowrap
+    }
+
+    .prices {
+      display: flex;
+      align-items: center;
+      gap: var(--spacer-2);
+      white-space: nowrap;
+      position: relative;
+    }
+
+    &-picture {
+      width: auto;
+
+      img {
+        max-height: 70px;
+        width: auto;
+      }
+    }
+
+    &-info {
+      display: flex;
+      align-items: center;
+
+      h5 {
+        margin: 0 var(--spacer-3);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    &-buy {
+      display: flex;
+    }
+  }
+  
+  &__favorite i {
+    opacity: 0.4;
+    color: var(--red);
+
+    &.active {
+      opacity: 1;
+
+      + span {
+        color: var(--text-muted);
+      }
+    }
+  }
+
+  &__sale-timer {
+    width: 100%;
+    max-width: 300px;
+    background-color: var(--secondary-light);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacer-2);
+    color: var(--secondary-light-yiq);
+    border-radius: var(--border-radius);
+    text-transform: uppercase;
+    line-height: 1.2;
+    text-align: center;
+
+    small {
+      text-transform: lowercase;
+    }
+  }
+
+  @media (max-width: 768px) {
+    &__sticky-info {
+      display: none;
+    }
+  }
+
+  @media (max-width: 992px) {
+    &__sticky {
+      &-buy {
+        width: 100%;
+      }
+
+      .btn {
+        width: 100%;
+        margin-left: 0;
+      }
+
+      .prices {
+        display: none;
+      }
+    }
+  }
+}
+
+.offers-variation-notification {
+  margin: -1rem 0 1rem 0;
 }

package/webpack.config.js

@@ -59,12 +59,14 @@ const webpackConfig = {
           {
             loader: 'postcss-loader',
             options: {
-              ident: 'postcss',
-              minimize: !devMode,
-              plugins: [
-                require('autoprefixer')(),
-                require('cssnano')({ preset: 'default' })
-              ]
+              postcssOptions: {
+                ident: 'postcss',
+                minimize: !devMode,
+                plugins: [
+                  require('autoprefixer')(),
+                  require('cssnano')({ preset: 'default' })
+                ]
+              }
             }
           },
           {
@@ -80,6 +82,18 @@ const webpackConfig = {
             }
           }
         ]
+      },
+
+      {
+        test: /\.(woff|woff2|svg|eot|ttf|png|jpg|gif)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192
+            }
+          }
+        ]
       }
     ]
   },