Feature/new design (#74)

* WIP

* wip

* Update add_to_cart.rb

* Update variables.scss

* fixes

* fixes

* fixes

* Update products_filtering_spec.rb

* address form fixes

app/assets/stylesheets/spree/frontend/components-custom/headers.scss

@@ -1,6 +1,4 @@
 .spree-header {
-  font-size: font-px-to-rem(18px);
-  text-transform: uppercase;
   color: theme-color('dark-text');
   text-align: center;
 

app/assets/stylesheets/spree/frontend/components-custom/inputs.scss

@@ -1,53 +1,9 @@
 .spree-flat-input {
-  color: theme-color("secondary");
-  transition: basic-transition(border-color);
-  padding: 15px;
-  width: 100%;
-  height: auto;
-  border-width: 1px;
-  border-style: solid;
-  border-color: $second-global-border;
-  border-radius: 0;
-  outline: none;
-  font-size: font-px-to-rem(12px);
-  line-height: inherit;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  @include media-breakpoint-up(sm) {
-    padding: 25px;
-    font-size: font-px-to-rem(23px);
-  }
-  @include media-breakpoint-up(lg) {
-    padding: 20px;
-    font-size: font-px-to-rem(14px);
-  }
-  &:focus {
-    border-color: theme-color("secondary");
-  }
-  &::placeholder {
-    text-transform: uppercase;
-  }
+  @extend .form-control;
 }
 
 .spree-flat-select {
-  @extend .spree-flat-input;
-  appearance: none;
-  padding-top:22px;
-  padding-bottom:21px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  &-arrow {
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    @include media-breakpoint-up(sm) {
-      right: 23px;
-    }
-    @include media-breakpoint-up(lg) {
-      right: 20px;
-    }
-  }
+  @extend .custom-select;
 }
 
 .field_with_errors {
@@ -58,12 +14,6 @@
 
 .spree-flat-label {
   color: theme-color("secondary");
-  text-transform: uppercase;
-  font-size: font-px-to-rem(12px);
-
-  @include media-breakpoint-up(sm) {
-    font-size: font-px-to-rem(17px);
-  }
 }
 
 .spree-checkbox-container {
@@ -80,16 +30,6 @@
   width: 22px;
   margin-right: 0.5rem;
 
-  @include media-breakpoint-up(sm) {
-    width: 32px;
-    height: 32px;
-  }
-
-  @include media-breakpoint-up(lg) {
-    width: 22px;
-    height: 22px;
-  }
-
   input[type="checkbox"] {
     opacity: 0;
     position: absolute;
@@ -105,20 +45,10 @@
     width: 22px;
     height: 22px;
     font-size: 0;
-    border-radius: 0;
-    border: 2px solid theme-color("secondary");
+    border-radius: $input-border-radius;
+    border: 1px solid $input-border-color;
     background-color: $input-background;
     cursor: pointer;
-
-    @include media-breakpoint-up(sm) {
-      width: 32px;
-      height: 32px;
-    }
-
-    @include media-breakpoint-up(lg) {
-      width: 22px;
-      height: 22px;
-    }
   }
 
   label:after {
@@ -135,20 +65,6 @@
     border-top: none;
     border-right: none;
     transform: rotate(-45deg);
-
-    @include media-breakpoint-up(sm) {
-      width: 15px;
-      height: 10px;
-      top: 6px;
-      left: 6px;
-    }
-
-    @include media-breakpoint-up(lg) {
-      width: 12px;
-      height: 8px;
-      top: 4px;
-      left: 3px;
-    }
   }
 
   input[type="checkbox"]:focus + label {
@@ -162,23 +78,6 @@
       opacity: 1;
     }
   }
-
-  @include media-breakpoint-up(lg) {
-    height: 28px;
-    width: 28px;
-
-    label {
-      height: 28px;
-      width: 28px;
-    }
-
-    label:after {
-      width: 14px;
-      height: 9px;
-      top: 6px;
-      left: 5px;
-    }
-  }
 }
 
 .spree-checkbox-label {
@@ -202,47 +101,6 @@
   }
 }
 
-.spree-btn {
-  text-transform: uppercase;
-  letter-spacing: 0.05rem;
-  font-size: font-px-to-rem(14px);
-  font-weight: bold;
-
-  &.btn-primary {
-    font-size: font-px-to-rem(17px);
-  }
-
-  &.btn-outline-primary {
-    border-width: 2px;
-  }
-
-  @include media-breakpoint-up(sm) {
-    padding-top: 14px;
-    padding-bottom: 14px;
-
-    &.btn-primary {
-      font-size: font-px-to-rem(28px);
-    }
-
-    &.btn-outline-primary {
-      font-size: font-px-to-rem(28px);
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    padding-top: 6px;
-    padding-bottom: 6px;
-
-    &.btn-primary {
-      font-size: font-px-to-rem(20px);
-    }
-
-    &.btn-outline-primary {
-      font-size: font-px-to-rem(20px);
-    }
-  }
-}
-
 .spree-radio-label {
   position: relative;
   padding-left: 30px;