Remove bs class and add utilities + make the button more ergonomic on phone

_dev/css/components/cart.scss

@@ -41,7 +41,7 @@
 .product-line__img{
   margin-right: $spacer;
 }
-@include media-breakpoint-down(md) {
+@include media-breakpoint-mobile {
   .product-line__img{
     width: 100px;
     height: auto;
@@ -89,4 +89,21 @@
     }
 
   }
+}
+.nav-tabs--center{
+  justify-content: center;
+}
+@include media-breakpoint-mobile{
+  .checkout {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 2;
+    padding: 1rem;
+    background-color: rgba(0,0,0,.4);
+    a{
+      width: 100%;
+    }
+  }
 }

_dev/css/components/customer.scss

@@ -34,4 +34,9 @@
   display: flex;
   justify-content: space-between;
 
+}
+
+.needs-validation{
+  min-width: 100%;
+  width: 100%;
 }

_dev/css/components/footer.scss

@@ -46,7 +46,7 @@
   }
 }
 
-@include media-breakpoint-down(md) {
+@include media-breakpoint-mobile {
   .footer__title{
     &--desktop{
 
@@ -57,3 +57,31 @@
     }
   }
 }
+.footer__copyright{
+  text-align: center;
+  font-size: $font-size-sm;
+}
+.header__nav{
+  align-items: center;
+}
+.header-nav__nav2{
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.header-mobile{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+.header-mobile__user-cart{
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.header__top{
+  display: flex;
+  justify-content: space-between;
+  position: static;
+}

_dev/css/components/header.scss

@@ -0,0 +1,30 @@
+.displayNav1{
+    display: flex;
+    align-items: center;
+}
+.displayNav2{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+.mobile{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+.top-logo{
+    text-align: center;
+}
+.mobile-user{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+.displayTop{
+    display: flex;
+    justify-content: space-between;
+    position: static;
+}
+
+//checkout part

_dev/css/components/products.scss

@@ -302,3 +302,106 @@
   }
 }
 
+.products-selection{
+  justify-content: space-between;
+  align-items: center; 
+}
+.pack-miniature-item{
+  margin-bottom: $spacer * 2;
+}
+<<<<<<< HEAD
+.ratio1_1{
+  display: block;
+}
+.pack-product-name{
+  margin: 0 $spacer * 4;
+  flex-grow: 1;
+}
+.product-miniature{
+  margin-bottom: $spacer * 3;
+}
+.product__card-img{
+  position: relative;
+}
+.highlighted-informations{
+  text-align: center;
+  padding: $spacer * 2;
+}
+.active_filters{
+  display: flex;
+  align-items: center;
+  padding: $spacer * 3;
+  margin-bottom: $spacer * 3;
+}
+.active_filters_title{
+  margin: 0;
+  margin-right: $spacer * 2;
+}
+.active_filters_item{
+  margin-right: $spacer;
+}
+.facets__title{
+  text-transform: uppercase;
+}
+.facet__title{
+  justify-content: space-between;
+}
+.qty{
+  margin: 0 $spacer * 3;
+  margin-top: $spacer * 2;
+}
+.add{
+  margin-top: $spacer * 2;
+}
+.product-customization{
+  margin-bottom: $spacer * 4;
+}
+.product-discounts{
+  margin-bottom: $spacer * 4;
+}
+.product__quantity{
+  margin-bottom: 0;
+}
+=======
+>>>>>>> f/removeBSflexclass
+.sort-by-row{
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+.total__item-show{
+  text-align: center;
+  font-size: $font-size-sm;
+  margin-top: $spacer;
+}
+.variant-links{
+  display: flex;
+  justify-content: center;
+}
+.product__download{
+  text-transform: uppercase;
+}
+<<<<<<< HEAD
+.delivery-address{
+=======
+.card--address{
+>>>>>>> f/removeBSflexclass
+  height: 100%;
+  text-align: center;
+  justify-content: center;
+}
+.invoice__address{
+  margin-top: $spacer * 3;
+}
+.invoice-address{
+  height: 100%;
+  text-align: center;
+  justify-content: center;
+}
+.step-number{
+  padding: $spacer * 2;
+}
+.nav-tabs{
+  justify-content: center;
+}

_dev/css/components/slick-theme.scss

@@ -7,7 +7,7 @@
     justify-content: center;
     padding-top: 0;
     padding-bottom: 0;
-    z-index: 2;
+    z-index: 1;
 
     & > i{
         font-size: 2*$font-size-base;

_dev/css/components/utilities.scss

@@ -6,4 +6,39 @@ img[data-lazy] {
 }
 .cursor-pointer{
   cursor: pointer;
-}
+}
+@mixin media-breakpoint-desktop() {
+
+  @include media-breakpoint-up(lg) {
+    @content;
+  }
+}
+@mixin media-breakpoint-mobile() {
+
+  @include media-breakpoint-down(md) {
+    @content;
+  }
+}
+.visible--desktop{
+  @include media-breakpoint-mobile(){
+    display: none;
+  }
+}
+.visible--mobile{
+  @include media-breakpoint-desktop(){
+    display: none;
+  }
+}
+.d--none{
+  display: none;
+}
+.header-nav__container{
+  display: flex;
+  justify-content: space-between;
+}
+
+.full-bleed {
+  width: 100vw;
+  margin-left: 50%;
+  transform: translateX(-50%);
+}

_dev/css/partials/mixin.scss

@@ -0,0 +1,12 @@
+@mixin media-breakpoint-desktop() {
+
+    @include media-breakpoint-up(lg) {
+      @content;
+    }
+  }
+@mixin media-breakpoint-mobile() {
+
+    @include media-breakpoint-down(sm) {
+        @content;
+    }
+}

_dev/css/theme.scss

@@ -1,5 +1,6 @@
 @import "partials/variables";
 @import "bootstrap";
+@import "partials/mixin.scss";
 @import "partials/custom_variables";
 @import "partials/fonts";
 @import "partials/commons";
@@ -17,6 +18,7 @@
 @import "components/products";
 @import "components/slick";
 @import "components/slick-theme";
+@import "components/header.scss";
 @import "components/utilities";
 
 @import "partials/bs_alpha";

_dev/gulpfile.js

@@ -24,4 +24,4 @@ gulp.task('move',function(){
 
 gulp.task('watch', function(){
     gulp.watch('css/**/*.scss', gulp.series('sass','move'))
-});
+});