Merge branch 'release/2.1.4'

_dev/css/partials/custom_variables.scss → _dev/css/abstracts/_variables.scss

@@ -1,25 +1,10 @@
-//color
-
-$bg-dark :                      #dededd;
-$tertiary:                      #f39d72;
+@import "variables/layout";
+@import "variables/product-miniature";
+@import "variables/searchbar";
 
 //BS touchspin
 $bs-touchspin-boxshadow:        2px 2px 4px 0 rgba(0,0,0,.2);
 
-//option
-$enable-fluid-layout:            false;
-
-// main layout
-$header-bg:                     $white;
-$footer-bg:                     $white;
-$wrapper-bg:                    #f1f1f1;
-$footer-container-margin-top:   $spacer;
-//product miniature
-
-$pm-title-color:                $gray-700;
-$pm-title-font-size:            $font-size-base;
-$pm-title-font-weight:          400;
-
 //cart
 $promo-code-bg:                 darken($body-bg,10%);
 
@@ -37,12 +22,23 @@ $product-thumb-wrap-width-2:    2 * ($product-thumb-width + 2 * $product-thumb-m
 $product-thumb-wrap-height:     $product-thumb-height + $product-thumb-margin * 2;
 
 //prices
-$regular-price-font-size:       $font-size-base * .875;
-$regular-price-font-weight:       700;
-$regular-price-color:           $gray-700;
-$price-color:                   $black;
-$product-price-discount-color:           $tertiary;
-$product-regular-price-font-size:       $font-size-base * 1.25;
+$product-price-current-color:             null;
+$product-price-current-font-size:         null;
+$product-price-current-font-weight:       700;
+$product-price-current-font-family:       null;
+
+$product-price-regular-color:             #7a7a7a;
+$product-price-regular-font-size:         $font-size-base * .875;
+$product-price-regular-font-weight:       700;
+$product-price-regular-font-family:       null;
+
+
+$product-price-discount-color:         $tertiary;
+$product-price-discount-font-size:         null;
+$product-price-discount-font-weight:       700;
+$product-price-discount-font-family:       null;
+
+
 
 
 //product color box
@@ -60,7 +56,15 @@ $social-share-bg-color:         $gray-300;
 
 //main menu
 $menu-topitem-font-size:            $font-size-base;
+$menu-topitem-font-weight:            600;
 $menu-topitem-color:            $gray-800;
+$menu-topitem-text-transform:   uppercase;
+$menu-topitem-padding:          $spacer/2;
+$menu-topitem-margin-left:          $spacer*2;
+
+$menu-sub-top: 60px;
+
+  //main menu mobile
 $menu-item-padding:             $spacer/2;
 $menu-item-border-color:        $border-color;
 $menu-sub-mobile-bg-color:      $wrapper-bg;
@@ -76,6 +80,27 @@ $footer-padding-top:             $spacer;
 //$card-box-shadow : $box-shadow !default;
 $card-box-shadow : null !default;
 
+//product section
+
+$section-title-font-family: null;
+$section-title-color: null;
+$section-title-size: null;
+$section-title-font-weight: null;
+$section-title-text-align: center;
+$section-title-text-transform: uppercase;
+$section-title-margin-bottom: $spacer;
+
+//blockcart
+$blockcart-color: $white;
+$blockcart-background-color: $primary;
+$blockcart-inactive-color: $gray-600;
+$blockcart-inactive-background-color: $gray-200;
+$blockcart-padding:$spacer/2;
+
+
+//block left column
+$block-border-color: null;
+
 
 
 

_dev/css/abstracts/variables/_layout.scss

@@ -0,0 +1,23 @@
+//color
+
+$bg-dark :                      #dededd;
+$tertiary:                      #f39d72;
+
+//option
+$enable-fluid-layout:            false;
+
+
+/* HEADER */
+$header-bg:                     $white;
+$header-box-shadow:             '0 2px 6px 0 rgba(0,0,0,.2)';
+$header-nav-bg-color:           null;
+$header-nav-color:              $body-color;
+$header-nav-padding-y:          null;
+$header-nav-border-color:       $border-color;
+$header-top-border-color:       $header-nav-border-color;
+/* MAIN */
+$spacer-y : $spacer*2;
+$wrapper-bg:                    #f1f1f1;
+/* FOOTER */
+$footer-bg:                     $white;
+$footer-container-margin-top:   $spacer;

_dev/css/abstracts/variables/_product-miniature.scss

@@ -0,0 +1,16 @@
+/* PRODUCT MINIATURE */
+$pm-bg-color: null;
+$pm-border-width: null;
+$pm-border-color: null;
+/* product title */
+$pm-name-color:                $gray-700;
+$pm-name-hover-color:          $primary;
+$pm-name-font-size:            $font-size-base;
+$pm-name-font-weight:          400;
+$pm-name-font-family: null;
+$pm-name-font-size: null;
+$pm-name-hover-border-width: 1px;
+$pm-name-hover-border-color: transparent;
+
+$pm-highlight-bg-color: #fff;
+$pm-highlight-translateY: 0;

_dev/css/components/cart.scss

@@ -1,13 +1,13 @@
 .blockcart{
-  color:#fff;
-  background-color: theme-color('primary');
-  padding:$spacer/2;
+  color:$blockcart-color;
+  background-color: $blockcart-background-color;
+  padding:$blockcart-padding;
 }
 .blockcart.inactive{
-  color:$gray-600;
-  background-color: $gray-200;
+  color:$blockcart-inactive-color;
+  background-color: $blockcart-background-color;
   .material-icons{
-    color:$gray-600;
+    color:$blockcart-inactive-color;
   }
 }
 .product-line-actions{

_dev/css/components/products.scss

@@ -27,13 +27,20 @@
   max-width: 100%;
 }
 /* Product miniature*/
-.card-product{
+.card-product.card{
   height:100%;
   position: relative;
-  &:hover .highlighted-informations{
-    transform:translateY(0);
+  background-color: $pm-bg-color;
+  border-width: $pm-border-width;
+  border-color: $pm-border-color;
+  &:hover
+  {
+    .highlighted-informations{
+      transform:translateY(0);
+    }
 
   }
+
   .discount{
     display:none;
   }
@@ -51,19 +58,22 @@
   position: absolute;
   bottom: 0;
   width:100%;
-  background: #fff;
+  background-color: $pm-highlight-bg-color;
   transform:translateY(100%);
   transition:transform .3s;
+  .card-product:hover & {
+    transform:translateY($pm-highlight-translateY);
+  }
 }
 .quick-view{
-  cursor:pointer
+  cursor:pointer;
 }
 
 .product-flags{
   position:absolute;
   top:0;
   margin-bottom: 0;
-  z-index: 2;
+  z-index: 1;
   left:-$spacer/4;
   display: flex;
   flex-direction: column;
@@ -97,13 +107,24 @@
 }
 
 .product-title{
-  color: $pm-title-color;
-  font-size: $pm-title-font-size;
+  color: $pm-name-color;
+  font-size: $pm-name-font-size;
   text-decoration: none;
   text-align: center;
-  font-weight: $pm-title-font-weight;
+  font-weight: $pm-name-font-weight;
   & a {
-    color: $pm-title-color;
+    color: $pm-name-color;
+    &:hover{
+      color: $pm-name-hover-color;
+      border-bottom: $pm-name-hover-border-width solid $pm-name-hover-border-color;
+    }
+
+  }
+  .card-product:hover & {
+    color: $pm-name-hover-color;
+    & a {
+      color: $pm-name-hover-color;
+    }
   }
 }
 
@@ -177,12 +198,29 @@
 }
 
 //product prices
-.current-price-display{
-  font-size: $product-regular-price-font-size;
-  font-weight: $regular-price-font-weight;
+.product__product-price.has-discount{
+  .current-price{
+    display: inline-block;
+  }
+}
+.price{
+  color:$product-price-current-color;
+  font-size:$product-price-current-font-size;
+  font-weight:$product-price-current-font-weight;
+  font-family: $product-price-current-font-family;
+  &.current-price-discount{
+    color:$product-price-discount-color;
+    font-size:$product-price-discount-font-size;
+    font-weight:$product-price-discount-font-weight;
+    font-family: $product-price-discount-font-family;
+  }
 }
-.current-price-discount{
-  color:$product-price-discount-color;
+.regular-price{
+  color:$product-price-regular-color;
+  font-size:$product-price-regular-font-size;
+  font-weight:$product-price-regular-font-weight;
+  font-family: $product-price-regular-font-family;
+  text-decoration: line-through;
 }
 .discount{
   text-transform: uppercase;

_dev/css/layout/_footer.scss

@@ -0,0 +1,5 @@
+.l-footer{
+  background-color: $footer-bg;
+  margin-top: $footer-margin-top;
+  padding-top: $footer-padding-top;
+}

_dev/css/layout/_header.scss

@@ -0,0 +1,28 @@
+.l-header{
+  background-color: $header-bg;
+  margin-bottom: $spacer;
+  box-shadow: $header-box-shadow;
+}
+.header-nav{
+  border-bottom: 1px solid $header-nav-border-color;
+  background-color: $header-nav-bg-color;
+  color:$header-nav-color;
+  padding-top: $header-nav-padding-y;
+  padding-bottom: $header-nav-padding-y;
+  & a:not(.dropdown-item), .btn{
+    color: $header-nav-color;
+  }
+}
+.header-top{
+  border-bottom: 1px solid $header-top-border-color;
+}
+@include media-breakpoint-mobile {
+  .header__container{
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .logo{
+    width:100%;
+    max-width: 115px;
+  }
+}

_dev/css/partials/_commons.scss

@@ -49,21 +49,7 @@ sup{
   margin-bottom: $spacer;
 }
 /* HEADER */
-.l-header{
-  background-color: $header-bg;
-  margin-bottom: $spacer;
-  box-shadow: 0 2px 6px 0 rgba(0,0,0,.2);
-}
-@include media-breakpoint-down(sm) {
-  .header__container{
-    padding-left: 0;
-    padding-right: 0;
-  }
-  .logo{
-    width:100%;
-    max-width: 115px;
-  }
-}
+
 /* FOOTER */
 .l-footer{
   background-color: $footer-bg;
@@ -277,17 +263,7 @@ display: inline-block;
   border: 3px solid $card-border-color;
 }
 
-//prices
-.regular-price{
-  text-decoration: line-through;
-  font-size: $regular-price-font-size;
-  color: $regular-price-color;
-  font-weight: 700;
-}
-.price{
-  font-weight: 700;
-  color:$black;
-}
+
 //forms
 custom-file-label.selected:after{
   content: "" !important;
@@ -312,17 +288,20 @@ custom-file-label.selected:after{
 }
 //products-section-title
 .products-section-title{
-  text-transform: uppercase;
-  text-align: center;
+  text-transform: $section-title-text-transform;
+  text-align: $section-title-text-align;
   display: block;
-  margin-bottom: $spacer;
+  margin-bottom: $section-title-margin-bottom;
   @extend .h1;
-  font-weight: 700;
+  font-family: $section-title-font-family;
+  color:$section-title-color;
+  font-size:$section-title-size;
+  font-weight:$section-title-font-weight;
 }
 
 //home content spacing
 .page-home > *{
-  margin-bottom: $spacer * .75;
+  margin-bottom: $spacer-y;
 }
 
 @include media-breakpoint-down(sm) {

_dev/css/partials/_fonts.scss

@@ -16,8 +16,8 @@
   font-size: $font-size-base*$line-height-base;  /* Preferred icon size */
   display: inline-block;
   vertical-align: top;
-  //width: 1em;
-  //height: 1em;
+  width: 1em;
+  height: 1em;
   line-height: 1;
   text-transform: none;
   letter-spacing: normal;