improved input fields, icons, error helpers

assets/css/_phx-liveview.scss

@@ -9,7 +9,6 @@
 /* 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;
 

assets/css/app.scss

@@ -31,3 +31,36 @@
 .cursor-pointer {
   cursor: pointer !important;
 }
+
+/*
+  icons in input fields
+  */
+/* enable absolute positioning */
+.inner-addon {
+  position: relative;
+}
+
+/* style icon */
+.inner-addon .icon {
+  position: absolute;
+  padding: 0.5625rem 0.5rem;
+  pointer-events: none;
+}
+
+/* align icon */
+.inner-addon .icon.is-left {
+  left: 0px;
+}
+.inner-addon .icon.is-right {
+  right: 0px;
+}
+
+/* add padding  */
+.left-addon input,
+.left-addon select {
+  padding-left: 2rem;
+}
+.right-addon input,
+.right-addon select {
+  padding-right: 2rem;
+}