Revert "refactor(common): CHECKOUT-4752 refactor address css to be included inside js files

src/app/address/AddressForm.tsx

@@ -7,7 +7,6 @@ import { withLanguage, WithLanguageProps } from '../locale';
 import { AutocompleteItem } from '../ui/autocomplete';
 
 import { mapToAddress, GoogleAutocompleteFormField } from './googleAutocomplete';
-import './AddressForm.scss';
 import AddressFormField from './AddressFormField';
 import { AddressKeyMap } from './DynamicFormField';
 import DynamicFormFieldType from './DynamicFormFieldType';

src/app/address/AddressSelect.tsx

@@ -6,7 +6,6 @@ import { TranslatedString } from '../locale';
 import { DropdownTrigger } from '../ui/dropdown';
 
 import isEqualAddress from './isEqualAddress';
-import './AddressSelect.scss';
 import StaticAddress from './StaticAddress';
 
 export interface AddressSelectProps {

src/app/address/MultiCheckboxControl.tsx

@@ -2,8 +2,6 @@ import React, { memo, useCallback, FunctionComponent, MouseEvent } from 'react';
 
 import { TranslatedString } from '../locale';
 
-import './MultiCheckboxControl.scss';
-
 export interface MultiCheckboxControlProps {
     testId?: string;
     onSelectedAll(): void;

src/app/ui/Base.scss

@@ -1,5 +1,4 @@
 @import '../../../node_modules/@bigcommerce/citadel/src/tools/toolkit';
 @import '../../../node_modules/@bigcommerce/citadel/src/settings/global/global';
-@import '../../scss/settings/foundation/foundation';
 
 $global-radius: 4px;

src/scss/components/_components.scss

@@ -85,6 +85,9 @@
 // Checkout Steps
 @import "checkout/checkoutSteps/component";
 
+// Checkout Dropdown Select
+@import "checkout/dropdownSelect/component";
+
 // GenericModal
 @import "checkout/genericModal/component";
 

src/scss/components/checkout/checkoutAddress/_checkoutAddress.scss

@@ -11,8 +11,52 @@
     flex: 1; // 1
 }
 
+.checkout-address {
+    display: flex;
+    flex-flow: row wrap;
+    margin-left: -1 * spacing("half");
+    margin-right: -1 * spacing("half");
+
+    .dynamic-form-addressState,
+    .dynamic-form-field {
+        display: block;
+        flex: 1;
+        flex-basis: 100%;
+        max-width: 100%;
+        padding: 0 spacing("half");
+    }
+
+    .dynamic-form-field--province,
+    .dynamic-form-field--provinceCode,
+    .dynamic-form-field--firstName,
+    .dynamic-form-field--lastName,
+    .dynamic-form-field--phone,
+    .dynamic-form-field--city {
+        @include breakpoint("small") {
+            flex-basis: 50%;
+        }
+    }
+
+    .dynamic-form-field--postCode {
+        @include breakpoint("small") {
+            flex-basis: 30%;
+        }
+    }
+}
+
 .shipping-address {
     .address-line {
         margin-bottom: 0;
     }
 }
+
+.multiCheckbox--controls {
+    list-style: none;
+    margin: 0 0 spacing("half");
+    padding: 0;
+}
+
+.multiCheckbox--control {
+    display: inline-block;
+    margin-right: spacing("quarter");
+}

src/scss/components/checkout/dropdownSelect/_component.scss

@@ -0,0 +1,5 @@
+// =============================================================================
+// DROPDOWN SELECT
+// =============================================================================
+
+@import "dropdownSelect";

src/app/address/AddressSelect.scss → src/scss/components/checkout/dropdownSelect/_dropdownSelect.scss

@@ -1,4 +1,6 @@
-@import "../ui/Base";
+// =============================================================================
+// DROPDOWN SELECT (Component)
+// =============================================================================
 
 .dropdown--select {
     cursor: pointer;
@@ -8,7 +10,7 @@
 .dropdown-toggle--select {
     color: $input-font-color;
     margin-bottom: 0;
-    min-height: 3rem;
+    min-height: $dropdown-toggle-height--select;
     padding: $buttonSize-default-verticalPadding $input-horizontalPadding;
     text-align: left;
     text-transform: none;
@@ -20,6 +22,12 @@
     }
 }
 
+.dropdown-menu--select {
+    max-height: 20rem;
+    max-width: none;
+    overflow: auto;
+}
+
 .dropdown-menu-item--select {
     border-bottom: container("border");
 

src/scss/components/foundation/forms/_forms.scss

@@ -28,6 +28,14 @@
         }
     }
 
+    .dynamic-form-field {
+        margin-bottom: spacing("half");
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
     .form-field {
         position: relative;