progress on modal functionality and form styling

assets/css/_phx-liveview.scss

@@ -1,9 +1,32 @@
 /* LiveView specific classes for your customizations */
+
+/* hides the feedback field help if liveview indicates field not touched yet */
 .phx-no-feedback.invalid-feedback,
 .phx-no-feedback .invalid-feedback {
   display: none;
 }
 
+/* sets default bootstrap form-control styles if field not touched yet */
+.phx-no-feedback .form-control.is-valid,
+.phx-no-feedback .form-control.is-invalid {
+  padding: $input-padding-y $input-padding-x;
+  border: $input-border-width solid $input-border-color;
+  background-image: none;
+
+  &:focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+}
+
 .phx-click-loading {
   opacity: 0.5;
   transition: opacity 1s ease-out;
@@ -15,38 +38,3 @@
 .phx-disconnected * {
   pointer-events: none;
 }
-
-.phx-modal {
-  opacity: 1 !important;
-  position: fixed;
-  z-index: 1;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: rgb(0, 0, 0);
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
-.phx-modal-content {
-  background-color: #fefefe;
-  margin: 15% auto;
-  padding: 20px;
-  border: 1px solid #888;
-  width: 80%;
-}
-
-.phx-modal-close {
-  color: #aaa;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-}
-
-.phx-modal-close:hover,
-.phx-modal-close:focus {
-  color: black;
-  text-decoration: none;
-  cursor: pointer;
-}