Merge pull request #620 from azkyakhan/#619

Replaced hard coded values of icon size, font, padding and margin with respective variables(#619)
vuestorefront · Jan 5, 2022 · b354e2c · b354e2c
2 parents d95aa9c + 691fa4e
commit b354e2c
Show file tree

Hide file tree

Showing 27 changed files with 98 additions and 41 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added safe Area of Elements in the Bottom Elements(#499)
 
 ### Changed / Improved
+
+- Replaced icon size, font styling, margin and padding's hard coded values with variables(#619)
 - Improved category list and product list styling through css grid(#617)
 - Improved color of filter icon(#617)
 - Improved font size of sortby dropdown(#617)

diff --git a/components/atoms/a-back-to-top.vue b/components/atoms/a-back-to-top.vue
@@ -9,7 +9,7 @@
       <SfCircleIcon
         class="icon"
         icon="chevron_down"
-        icon-size="20px"
+        icon-size="xs"
         icon-color="white"
       />
     </div>

diff --git a/components/atoms/a-home-icon.vue b/components/atoms/a-home-icon.vue
@@ -2,7 +2,7 @@
   <div class="a-home-icon">
     <SfCircleIcon
       icon="home"
-      icon-size="20px"
+      icon-size="xs"
       icon-color="black"
       class="sf-header__circle-icon"
       role="button"

diff --git a/components/atoms/a-loading-error.vue b/components/atoms/a-loading-error.vue
@@ -50,7 +50,7 @@ export default {
     justify-content: center;
   }
   .sf-button {
-    margin: 0 1em;
+    margin: 0 var(--spacer-sm);
   }
 }
 </style>
diff --git a/components/atoms/a-promo-code.vue b/components/atoms/a-promo-code.vue
@@ -78,7 +78,7 @@ export default {
   }
   &__button {
     --button-height: 2rem;
-    --button-font-size: 0.6875rem;
+    --button-font-size: var(--font-2xs);
   }
 }
 </style>
diff --git a/components/atoms/a-search-icon.vue b/components/atoms/a-search-icon.vue
@@ -1,7 +1,7 @@
 <template>
   <SfCircleIcon
     icon="search"
-    icon-size="20px"
+    icon-size="xs"
     icon-color="black"
     class="sf-header__circle-icon a-search-icon"
     role="button"

diff --git a/components/atoms/a-sort-icon.vue b/components/atoms/a-sort-icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <SfIcon size="15px" style="margin-left: 10px;">
+  <SfIcon size="xxs" style="margin-left: var(--spacer-xs);">
     <svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M8.32809 15.2897L12 11.7644V12.2892L8.13547 16L4.27094 12.2892V11.7644L7.94285 15.2897V6.83165H8.32809L8.32809 15.2897ZM3.67191 0.710288L0 4.23556V3.71082L3.86453 0L7.72906 3.71082V4.23556L4.05715 0.710288V9.16835H3.67191L3.67191 0.710288Z" fill="black" />
     </svg>

diff --git a/components/atoms/a-static.vue b/components/atoms/a-static.vue
@@ -45,9 +45,9 @@ export default {
 
 <style lang="scss" scoped>
 .a-static {
-  font-size: 16px;
+  font-size: var(--font-base);
   line-height: 1.6;
-  font-weight: 400;
+  font-weight: var(--font-normal);
   table {
     width: 100%;
     margin: var(--spacer-2xl) 0;

diff --git a/components/atoms/a-wishlist-icon.vue b/components/atoms/a-wishlist-icon.vue
@@ -2,7 +2,7 @@
   <div class="a-wishlist-icon">
     <SfCircleIcon
       icon="heart"
-      icon-size="20px"
+      icon-size="xs"
       class="sf-header__circle-icon"
       role="button"
       aria-label="wishlist"
@@ -32,8 +32,8 @@ export default {
   position: absolute;
   bottom: 2.2em;
   left: 4.2em;
-  font-size: 0.6em;
-  padding: 0.3em 0;
+  font-size: var(--font-2xs);
+  padding: var(--spacer-2xs) 0;
   border-radius: 100%;
   width: 2.2em;
   min-height: 2.2em;

diff --git a/components/molecules/m-cookie-notification.vue b/components/molecules/m-cookie-notification.vue
@@ -89,7 +89,7 @@ export default {
   padding-bottom: env(safe-area-inset-bottom);
   .cookie {
     box-sizing: border-box;
-    padding: 0 1.5rem;
+    padding: 0 var(--spacer-base);
     margin: auto;
     display: flex;
     justify-content: space-between;
@@ -98,7 +98,7 @@ export default {
     max-width: 100%;
     height: 3rem;
     &__message-link {
-      padding-left: 1rem;
+      padding-left: var(--spacer-sm);
       --c-link: var(--c-gray);
       --c-link-hover: var(--c-light);
     }

diff --git a/components/molecules/m-loader.vue b/components/molecules/m-loader.vue
@@ -67,7 +67,7 @@ export default {
   &--message {
     color: #fff;
     text-align: center;
-    margin-top: 10px;
+    margin-top: var(--spacer-xs);
   }
 }
 </style>

diff --git a/components/molecules/m-menu.vue b/components/molecules/m-menu.vue
@@ -118,7 +118,7 @@ export default {
   visibility: hidden;
   transition: 0.2s;
   .router-link-exact-active {
-    --menu-item-font-weight: bold;
+    --menu-item-font-weight: var(--font-bold);
   }
 }
 .aside-menu {

diff --git a/components/molecules/m-price-summary.vue b/components/molecules/m-price-summary.vue
@@ -118,8 +118,8 @@ export default {
 .promo-code {
   &__button {
     --button-height: 2rem;
-    --button-font-size: 0.6875rem;
-    margin: 1rem 0;
+    --button-font-size: var(--font-2xs);
+    margin: var(--spacer-sm) 0;
   }
 }
 </style>
diff --git a/components/molecules/m-product-option-bundle.vue b/components/molecules/m-product-option-bundle.vue
@@ -69,7 +69,7 @@ export default {
 }
 ::v-deep {
   .a-product-quantity {
-    margin-top: 1rem;
+    margin-top: var(--spacer-sm);
     height: 3rem;
     min-height: 3rem;
   }

diff --git a/components/molecules/m-product-options-custom.vue b/components/molecules/m-product-options-custom.vue
@@ -144,9 +144,9 @@ export default {
   }
 }
 .single-option {
-  margin-top: 1.5rem;
+  margin-top: var(--spacer-base);
 }
 .sf-divider {
-  margin-top: 1.5rem;
+  margin-top: var(--spacer-base);
 }
 </style>
diff --git a/components/molecules/m-review-list.vue b/components/molecules/m-review-list.vue
@@ -79,7 +79,7 @@ export default {
 
 .product {
   &__review {
-    padding-bottom: 24px;
+    padding-bottom: var(--spacer-base);
     border-bottom: var(--c-light) solid 1px;
     margin-bottom: var(--spacer-base);
     &:last-of-type {

diff --git a/components/molecules/modals/m-modal-order-confirmation.vue b/components/molecules/modals/m-modal-order-confirmation.vue
@@ -131,7 +131,7 @@ export default {
     display: flex;
     justify-content: flex-end;
     .sf-button:not(:first-child) {
-      margin-left: 1rem;
+      margin-left: var(--spacer-sm);
     }
   }
   @include for-desktop {

diff --git a/components/organisms/o-confirm-order.vue b/components/organisms/o-confirm-order.vue
@@ -476,7 +476,7 @@ export default {
   }
   &__terms {
     &--link {
-      margin: 0 0 0 0.4em;
+      margin: 0 0 0 var(--spacer-xs);
     }
   }
 }
@@ -557,7 +557,7 @@ export default {
   &__terms {
     margin: var(--spacer-xs) 0;
     &--link {
-      margin: 0 0 0 0.4em;
+      margin: 0 0 0 var(--spacer-xs);
     }
   }
   &__total {
@@ -568,7 +568,7 @@ export default {
   margin: 0 0 var(--spacer-base) 0;
   color: var(--c-text);
   &__label {
-    font-weight: 400;
+    font-weight: var(--font-normal);
   }
 }
 .actions {

diff --git a/components/organisms/o-header.vue b/components/organisms/o-header.vue
@@ -152,11 +152,11 @@ export default {
   z-index: 1;
 }
 .o-header {
-  --header-navigation-item-margin: 0 2rem 0 0;
+  --header-navigation-item-margin: 0 var(--spacer-lg) 0 0;
   box-sizing: border-box;
   a {
     &.active {
-      font-weight: bold;
+      font-weight: var(--font-bold);
     }
   }
   .search-container {

diff --git a/components/organisms/o-my-account-order-details.vue b/components/organisms/o-my-account-order-details.vue
@@ -270,8 +270,8 @@ export default {
   }
 }
 .property-total {
-  --property-name-font-weight: 500;
-  --property-value-font-weight: 500;
+  --property-name-font-weight: var(--font-medium);
+  --property-value-font-weight: var(--font-medium);
 }
 .order-details__summary {
   .sf-property__name {

diff --git a/components/organisms/o-my-account-shipping-details.vue b/components/organisms/o-my-account-shipping-details.vue
@@ -154,6 +154,9 @@
                   icon="cross"
                   color="gray"
                   size="xxs"
+                  role="button"
+                  class="mobile-only"
+                  @click="deleteAddress(key)"
                 />
               </SfButton>
             </div>

diff --git a/components/organisms/o-notification.vue b/components/organisms/o-notification.vue
@@ -79,11 +79,11 @@ export default {
 }
 .notification {
   &:not(:first-child) {
-    margin-top: 1rem;
+    margin-top: var(--spacer-sm);
   }
   .sf-notification__action {
     cursor: pointer;
-    margin: 0.3rem 1rem 0 0;
+    margin: var(--spacer-2xs) var(--spacer-sm) 0 0;
   }
   @include for-desktop {
     max-width: 32rem;

diff --git a/components/organisms/o-order-confirmation.vue b/components/organisms/o-order-confirmation.vue
@@ -188,17 +188,17 @@ export default {
 .banner {
   background-color: #f1f2f3;
   &__info {
-    padding: 2rem;
+    padding: var(--spacer-lg);
     text-align: left;
     @include for-desktop {
       text-align: center;
     }
     @include for-mobile {
-      margin: 1rem;
+      margin: var(--spacer-sm);
     }
   }
   &__order-number {
-    font-size: 0.875rem;
+    font-size: var(--font-sm);
   }
 }
 .wrapper {
@@ -238,7 +238,7 @@ export default {
   border: 1px solid var(--c-light);
   width: 100%;
   height: 25vh;
-  padding: 0.5em;
+  padding: var(--spacer-xs);
   font-family: var(--font-family-primary);
   resize: vertical;
 }

diff --git a/components/organisms/o-personal-details.vue b/components/organisms/o-personal-details.vue
@@ -245,6 +245,16 @@ export default {
 }
 
 .log-in {
+  &__info {
+    margin: var(--spacer-lg) 0;
+    color: var(--c-dark-variant);
+    font: var(--font-light) var(--font-base) / 1.6 var(--font-family-primary);
+    @include for-desktop {
+      font-weight: var(--font-weight--normal);
+      font-size: var(--font-sm);
+    }
+  }
+  
   &__button {
     width: 100%;
   }
@@ -273,13 +283,52 @@ export default {
 .info { grid-area: info;
 
   &__heading {
-    font-family: var(--font-family-secondary);
+    font-family: var(--font-family-primary);
+    font-weight: var(--font-weight--light);
   }
 
   &__characteristic {
     --characteristic-description-font-size: var(--font-xs);
     margin: var(--spacer-base) 0;
   }
+
+  &__action {
+    margin: var(--spacer-sm) 0;
+    &-button {
+      &:first-child {
+        --button-height: 4.0625rem;
+      }
+      &--secondary {
+        margin: var(--spacer-base) 0;
+      }
+    }
+  }
+  @include for-mobile {
+    &__checkbox {
+      --checkbox-font-family: var(--font-family-primary);
+      --checkbox-font-weight: var(--font-light);
+      --checkbox-font-size: var(--font-sm);
+    }
+  }
+  @include for-desktop {
+    margin: 0 var(--spacer-2xl) 0 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    &__element {
+      margin: 0 0 var(--spacer-base) 0;
+      flex: 0 0 100%;
+      &--half {
+        flex: 1 1 50%;
+        &-even {
+          padding: 0 0 0 var(--spacer-lg);
+        }
+      }
+    }
+  }
+  .terms {
+    margin: 0 0 0 var(--spacer-xs);
+  }
 }
 
 .account { grid-area: account; }

diff --git a/components/organisms/o-product-details.vue b/components/organisms/o-product-details.vue
@@ -158,7 +158,7 @@ export default {
     padding: 0 var(--spacer-sm);
     @include for-desktop {
       max-width: 32.625rem;
-      margin: 0 0 0 7.5rem;
+      margin: 0 0 0 var(--spacer-2xl);
       padding: 0;
     }
   }
@@ -178,7 +178,7 @@ export default {
 
 .section {
   border-bottom: 1px solid #f1f2f3;
-  padding-bottom: 10px;
+  padding-bottom: 1var(--spacer-xs);
   @include for-desktop {
     border: 0;
     padding-bottom: 0;

diff --git a/components/organisms/o-search-panel.vue b/components/organisms/o-search-panel.vue
@@ -223,7 +223,7 @@ export default {
         padding: var(--spacer-2xs) 0;
       }
       .sf-menu-item.selected {
-        --menu-item-font-weight: 500;
+        --menu-item-font-weight: var(--font-medium);
         text-decoration: underline;
       }
     }