Merge pull request #1173 from vuestorefront/M2-709-shipping-billing-p…

…age-design-looks-broken-when-user-has-many-addresses refactor: user addresses styling
vuestorefront · Jun 28, 2022 · b8bfba4 · b8bfba4
2 parents 7591a92 + 63ade40
commit b8bfba4
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 62 deletions.
diff --git a/packages/theme/modules/checkout/components/UserBillingAddresses.vue b/packages/theme/modules/checkout/components/UserBillingAddresses.vue
@@ -2,14 +2,14 @@
   <div>
     <SfAddressPicker
       :selected="`${selectedAddress}`"
-      class="billing__addresses"
+      class="addresses"
       @change="setCurrentAddress($event)"
     >
       <SfAddress
         v-for="billingAddress in addressesWithCountryName"
         :key="userBillingGetters.getId(billingAddress)"
         :name="`${userBillingGetters.getId(billingAddress)}`"
-        class="billing__address"
+        class="address"
       >
         <UserAddressDetails :address="billingAddress">
           <template #country>
@@ -22,7 +22,7 @@
       :selected="value"
       name="setAsDefault"
       label="Use this address as my default one."
-      class="billing__setAsDefault"
+      class="setAsDefault"
       @change="$emit('input', $event)"
     />
     <hr class="sf-divider">
@@ -99,31 +99,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.billing {
-  &__address {
-    margin-bottom: var(--spacer-base);
-    @include for-desktop {
-      margin-right: var(--spacer-sm);
-      display: flex;
-      width: 100%;
-      flex-direction: column;
-    }
-  }
-
-  &__addresses {
-    margin-bottom: var(--spacer-xl);
-    @include for-desktop {
-      display: flex;
-    }
-  }
-
-  &__setAsDefault {
-    margin-bottom: var(--spacer-xl);
-  }
-}
-
-.sf-divider,
-.form__action-button--margin-bottom {
-  margin-bottom: var(--spacer-xl);
-}
+@import "./styles/userAddresses";
 </style>
diff --git a/packages/theme/modules/checkout/components/UserShippingAddresses.vue b/packages/theme/modules/checkout/components/UserShippingAddresses.vue
@@ -2,13 +2,13 @@
   <div>
     <SfAddressPicker
       :selected="`${currentAddressId}`"
-      class="shipping__addresses"
+      class="addresses"
       @change="setCurrentAddress($event)"
     >
       <SfAddress
         v-for="shippingAddress in addressesWithCountryName"
         :key="userShippingGetters.getId(shippingAddress)"
-        class="shipping__address"
+        class="address"
         :name="`${userShippingGetters.getId(shippingAddress)}`"
       >
         <UserAddressDetails :address="shippingAddress">
@@ -23,7 +23,7 @@
       :selected="value"
       name="setAsDefault"
       label="Use this address as my default one."
-      class="shipping__setAsDefault"
+      class="setAsDefault"
       @change="$emit('input', $event)"
     />
     <hr class="sf-divider">
@@ -95,33 +95,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.shipping {
-  &__address {
-    margin-bottom: var(--spacer-base);
-    @include for-desktop {
-      margin-right: var(--spacer-sm);
-      display: flex;
-      width: calc(50% - var(--spacer-sm));
-      flex-direction: column;
-    }
-  }
-
-  &__addresses {
-    margin-bottom: var(--spacer-xl);
-    @include for-desktop {
-      display: flex;
-      flex-wrap: wrap;
-      margin-right: var(--spacer-sm)
-    }
-  }
-
-  &__setAsDefault {
-    margin-bottom: var(--spacer-xl);
-  }
-}
-
-.sf-divider,
-.form__action-button--margin-bottom {
-  margin-bottom: var(--spacer-xl);
-}
+@import "./styles/userAddresses";
 </style>
diff --git a/packages/theme/modules/checkout/components/styles/userAddresses.scss b/packages/theme/modules/checkout/components/styles/userAddresses.scss
@@ -0,0 +1,27 @@
+.address {
+  margin-bottom: var(--spacer-base);
+  @include for-desktop {
+    margin-right: var(--spacer-sm);
+    display: flex;
+    width: calc(50% - var(--spacer-sm));
+    flex-direction: column;
+  }
+}
+
+.addresses {
+  margin-bottom: var(--spacer-xl);
+  @include for-desktop {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: var(--spacer-sm)
+  }
+}
+
+.setAsDefault {
+  margin-bottom: var(--spacer-xl);
+}
+
+.sf-divider,
+.form__action-button--margin-bottom {
+  margin-bottom: var(--spacer-xl);
+}