CLLLEANED the forms, inputs, buttons, labels and form/button groups

public/objects/modal/Modal.scss

@@ -0,0 +1,111 @@
+/*
+ *  Modal
+ *    Popup box designed to alert, or offer a unique interaction method.
+ *
+ *  Dependencies:
+ *    styles/tools/_absolute-centering.scss
+ *    styles/tools/_shadow.scss
+ *    styles/settings/z.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/07/05
+ */
+@import '~@styles/global';
+$o-modal--backdrop: rgba(0, 0, 0, 0.7);
+$o-modal--background: white;
+
+$o-modal--transition: 0.2s $s-animation--ease-out;
+
+.o-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $s-z--modal;
+
+  &__inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+
+  &__backdrop {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: $o-modal--backdrop;
+
+    //Transition Properties
+    transition: opacity #{$o-modal--transition};
+    opacity: 0;
+  }
+
+  &__box {
+    @extend %t-dp--shadow;
+    background: $o-modal--background;
+    position: relative;
+    width: 100%;
+    margin: 5em auto;
+
+    //Transition properties
+    transition: all #{$o-modal--transition};
+    @include t-scale(0.4);
+    opacity: 0;
+
+    &-heading,
+    &-body,
+    &-footer {
+      padding: 1em;
+    }
+  }
+
+  &__title {
+    margin: 1em 0 0.5em;
+  }
+
+
+  //Media Queries
+  @include t-media-query($s-xsmall-up) {
+    &__box {
+      max-width: 600px;
+
+      &.is-large {
+        max-width: 900px;
+      }
+    }
+  }
+
+
+  //Transition related
+  &__transition {
+    &-container {}//Top level container
+
+    //Entry animation
+    &-enter {
+      &-active {}
+      &-done {}
+
+      &-active,&-done {
+        .o-modal__backdrop {
+          opacity: 1;
+        }
+
+        .o-modal__box {
+          @include t-scale(1);
+          opacity: 1;
+        }
+      }
+    }
+
+    //Exit animation
+    &-exit {
+      &-active {}
+      &-done {
+      }
+    }
+  }
+}