Merge branch 'develop' into feature/update-changelog

Author: patzick

CHANGELOG.md

@@ -45,6 +45,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Check for placing single order in case of error in any payment module - @patzick (#2409)
 - Display prices in products added in offline mode. - @patzick (#2450)
 - Updated cypress dependency for e2e tests - @lukeromanowicz (#2518)
+- Improved styles on recommendation filters, product tile and numeric input - @patzick (#2458)
 
 ### Deprecated / Removed
 - `@vue-storefront/store` package deprecated - @filrak

src/themes/default/components/core/GenericSelector.vue

@@ -26,6 +26,7 @@ export default {
     height: 40px;
     padding-left: 8px;
     padding-right: 8px;
+    min-width: 50px;
 
     &:hover,
     &:focus {

src/themes/default/components/core/ProductTile.vue

@@ -152,14 +152,22 @@ $color-white: color(white);
   width: 100%;
   overflow: hidden;
   max-height: 300px;
-  height: 270px;
+  height: 100%;
+  min-height: 155px;
   display: flex;
   align-items: flex-end;
   background-image: url('/assets/placeholder.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 60% auto;
 
+  @media (min-width: 768px) {
+    min-height: 190px;
+  }
+  @media (min-width: 1200px) {
+    min-height: 300px;
+  }
+
   &__content {
     display: none;
   }

src/themes/default/components/core/blocks/Category/Sidebar.vue

@@ -52,10 +52,10 @@
           :content="price.label"
         />
       </div>
-      <div v-else>
+      <div v-else class="sidebar__inline-selecors">
         <generic-selector
           context="category"
-          class="price-select mb10 block"
+          class="mr10 mb10 block"
           :code="filterIndex"
           v-for="(option, index) in filter"
           :key="index"
@@ -108,5 +108,9 @@ export default {
     align-items: center;
     min-height: 47px;
   }
+
+  &__inline-selecors {
+    display: flex;
+  }
 }
 </style>

src/themes/default/components/core/blocks/Form/BaseInputNumber.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="base-input-number">
-    <label class="base-input-number__label flex" :for="getInputId">{{ name }}</label>
+    <label class="base-input-number__label cl-primary flex" :for="getInputId">{{ name }}</label>
     <input
       :id="getInputId"
       type="number"
@@ -69,13 +69,21 @@ export default {
       border-style: solid;
       border-width: 0 0 1px 0;
       width: 50px;
-      height: 1.7rem;
+      height: 1.4rem;
       line-height: 1.7rem;
+      @media (min-width: 768px) {
+        height: 1.7rem;
+      }
     }
 
     &__label {
-      font-size: 14px;
+      font-size: 0.8rem;
+      line-height: 1.2rem;
       max-width: 100px;
+      @media (min-width: 768px) {
+        font-size: 1rem;
+        line-height: 1.4rem;
+      }
     }
   }