feat(default-theme): added custom form styles file

vuestorefront · Aug 1, 2020 · 48c6512 · 48c6512
1 parent d53ec66
commit 48c6512
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 130 deletions.
diff --git a/packages/default-theme/assets/scss/forms.scss b/packages/default-theme/assets/scss/forms.scss
@@ -0,0 +1,63 @@
+.form {
+  --form-direction: column;
+  --form-input-margin-bottom: 0;
+  --form-input-margin-left: 0;
+  --form-input-margin-right: 0;
+  --form-input-margin-top: 0;
+
+  --form-checkbox-margin-bottom: var(--spacer-base);
+  --form-checkbox-margin-left: 0;
+  --form-checkbox-margin-right: 0;
+  --form-checkbox-margin-top: var(--spacer-base);
+
+  --form-button-margin-bottom: 0;
+  --form-button-margin-left: 0;
+  --form-button-margin-right: 0;
+  --form-button-margin-top: var(--spacer-base);
+
+  display: flex;
+  flex-direction: var(--form-direction);
+
+  &__input {
+    margin-bottom: var(--form-input-margin-bottom);
+    margin-left: var(--form-input-margin-left);
+    margin-right: var(--form-input-margin-right);
+    margin-top: var(--form-input-margin-top);
+  }
+
+  &__checkbox {
+    margin-bottom: var(--form-checkbox-margin-bottom);
+    margin-left: var(--form-checkbox-margin-left);
+    margin-right: var(--form-checkbox-margin-right);
+    margin-top: var(--form-checkbox-margin-top);
+  }
+
+  &__button {
+    margin-bottom: var(--form-button-margin-bottom);
+    margin-left: var(--form-button-margin-left);
+    margin-right: var(--form-button-margin-right);
+    margin-top: var(--form-button-margin-top);
+  }
+
+  .inputs-group {
+    display: flex;
+    flex-direction: column;
+
+    > * {
+      width: 100%;
+    }
+  }
+
+  @include for-desktop {
+    .inputs-group {
+      flex-direction: row;
+    }
+
+    &__input {
+      --form-input-margin-bottom: var(--spacer-base);
+      --form-input-margin-left: var(--spacer-sm);
+      --form-input-margin-right: var(--spacer-sm);
+      --form-input-margin-top: var(--spacer-base);
+    }
+  }
+}
diff --git a/packages/default-theme/assets/scss/main.scss b/packages/default-theme/assets/scss/main.scss
@@ -1,5 +1,6 @@
 @import "~@storefront-ui/vue/styles";
 @import "@/assets/scss/variables.scss";
+@import "forms.scss";
 
 // Global styles for theme
 

diff --git a/packages/default-theme/components/SwLogin.vue b/packages/default-theme/components/SwLogin.vue
@@ -106,16 +106,4 @@ export default {
     margin-bottom: var(--spacer-base);
   }
 }
-
-.form {
-  &__input {
-    margin: var(--spacer-base) 0;
-  }
-  &__checkbox {
-    margin-bottom: var(--spacer-base);
-  }
-  &__button {
-    margin-top: var(--spacer-base);
-  }
-}
 </style>
diff --git a/packages/default-theme/components/SwRegister.vue b/packages/default-theme/components/SwRegister.vue
@@ -28,36 +28,38 @@
           {{ salutationOption.name }}
         </SfSelectOption>
       </SfSelect>
-      <SwInput
-        v-model="firstName"
-        name="first-name"
-        label="First Name"
-        class="form__input form__element form__element--small"
-        :valid="!$v.firstName.$error"
-        error-message="First name is required"
-        @blur="$v.firstName.$touch()"
-        data-cy="first-name-input"
-      />
-      <SwInput
-        v-model="lastName"
-        name="last-name"
-        label="Last Name"
-        class="form__input form__element form__element--small"
-        :valid="!$v.lastName.$error"
-        error-message="Last name is required"
-        @blur="$v.lastName.$touch()"
-        data-cy="last-name-input"
-      />
-      <SwInput
-        v-model="email"
-        name="email"
-        label="Your email"
-        class="form__input form__element form__element--small form__element"
-        :valid="!$v.email.$error"
-        error-message="Proper email is required"
-        @blur="$v.email.$touch()"
-        data-cy="email-input"
-      />
+      <div class="inputs-group">
+        <SwInput
+          v-model="firstName"
+          name="first-name"
+          label="First Name"
+          class="form__input form__element form__element--small"
+          :valid="!$v.firstName.$error"
+          error-message="First name is required"
+          @blur="$v.firstName.$touch()"
+          data-cy="first-name-input"
+        />
+        <SwInput
+          v-model="lastName"
+          name="last-name"
+          label="Last Name"
+          class="form__input form__element form__element--small"
+          :valid="!$v.lastName.$error"
+          error-message="Last name is required"
+          @blur="$v.lastName.$touch()"
+          data-cy="last-name-input"
+        />
+        <SwInput
+          v-model="email"
+          name="email"
+          label="Your email"
+          class="form__input form__element form__element--small form__element"
+          :valid="!$v.email.$error"
+          error-message="Proper email is required"
+          @blur="$v.email.$touch()"
+          data-cy="email-input"
+        />
+      </div>
       <SwInput
         v-model="password"
         name="password"
@@ -69,36 +71,38 @@
         @blur="$v.password.$touch()"
         data-cy="password-input"
       />
-      <SwInput
-        v-model="street"
-        name="street"
-        label="Street"
-        class="form__input form__element form__element--small"
-        :valid="!$v.street.$error"
-        error-message="Street is required"
-        @blur="$v.street.$touch()"
-        data-cy="street-input"
-      />
-      <SwInput
-        v-model="city"
-        name="city"
-        label="City"
-        class="form__input form__element form__element--small"
-        :valid="!$v.city.$error"
-        error-message="City is required"
-        @blur="$v.city.$touch()"
-        data-cy="city-input"
-      />
-      <SwInput
-        v-model="zipcode"
-        name="zipcode"
-        label="Zip Code"
-        class="form__input form__element form__element--small"
-        :valid="!$v.zipcode.$error"
-        error-message="Zipcode is required."
-        @blur="$v.zipcode.$touch()"
-        data-cy="zip-code-input"
-      />
+      <div class="inputs-group">
+        <SwInput
+          v-model="street"
+          name="street"
+          label="Street"
+          class="form__input form__element form__element--small"
+          :valid="!$v.street.$error"
+          error-message="Street is required"
+          @blur="$v.street.$touch()"
+          data-cy="street-input"
+        />
+        <SwInput
+          v-model="city"
+          name="city"
+          label="City"
+          class="form__input form__element form__element--small"
+          :valid="!$v.city.$error"
+          error-message="City is required"
+          @blur="$v.city.$touch()"
+          data-cy="city-input"
+        />
+        <SwInput
+          v-model="zipcode"
+          name="zipcode"
+          label="Zip Code"
+          class="form__input form__element form__element--small"
+          :valid="!$v.zipcode.$error"
+          error-message="Zipcode is required."
+          @blur="$v.zipcode.$touch()"
+          data-cy="zip-code-input"
+        />
+      </div>
       <SfSelect
         v-model="country"
         v-if="getMappedCountries && getMappedCountries.length > 0"
@@ -286,48 +290,7 @@ export default {
   }
 }
 
-.form {
-  &__input {
-    margin-bottom: var(--spacer-sm);
-  }
-  &__select {
-    margin-bottom: 0;
-  }
-  &__checkbox {
-    margin-bottom: var(--spacer-base);
-  }
-  @include for-desktop {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    &__element {
-      flex: 0 0 100%;
-      &--small {
-        flex: 1 1 calc(33% - calc(2 * var(--spacer-sm)));
-        margin-right: var(--spacer-sm);
-        &:odd {
-          margin-right: 0;
-        }
-      }
-    }
-  }
-}
-
 .sf-button--muted {
   color: var(--c-text-muted);
 }
 </style>
-
-//
-<style lang="scss" scoped>
-// .sf-modal__container {
-//   width: 100% !important;
-//   height: 100% !important;
-//   @media screen and (min-width: 900px) {
-//     width: auto !important;
-//     height: auto !important;
-//   }
-// }
-//
-</style>
diff --git a/packages/default-theme/components/checkout/steps/ShippingStep.vue b/packages/default-theme/components/checkout/steps/ShippingStep.vue
@@ -72,7 +72,7 @@
   </div>
 </template>
 <script>
-import { SfHeading, SfRadio, SfAlert } from "@storefront-ui/vue"
+import { SfHeading, SfRadio } from "@storefront-ui/vue"
 import { computed, onMounted } from "@vue/composition-api"
 import ShippingAddressGuestForm from "@shopware-pwa/default-theme/components/checkout/steps/guest/ShippingAddressGuestForm"
 import ShippingAddressUserForm from "@shopware-pwa/default-theme/components/checkout/steps/user/ShippingAddressUserForm"
@@ -90,7 +90,6 @@ export default {
     SfHeading,
     SwButton,
     SfRadio,
-    SfAlert,
     ShippingAddressGuestForm,
     ShippingAddressUserForm,
     SwPluginSlot,

diff --git a/packages/default-theme/components/modals/SwLoginModal.vue b/packages/default-theme/components/modals/SwLoginModal.vue
@@ -163,21 +163,6 @@ export default {
   justify-content: space-between;
 }
 
-.form {
-  &__input {
-    margin-bottom: var(--spacer-sm);
-    &--email {
-      margin-bottom: var(--spacer-sm);
-    }
-  }
-  &__checkbox {
-    margin-bottom: var(--spacer-base);
-  }
-  &__button {
-    margin-top: var(--spacer-base);
-  }
-}
-
 .action {
   margin-top: var(--spacer-base);
   text-align: center;