diff --git a/assets/css/_phx-liveview.scss b/assets/css/_phx-liveview.scss index 4dadcd4..702bdd9 100644 --- a/assets/css/_phx-liveview.scss +++ b/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; diff --git a/assets/css/app.scss b/assets/css/app.scss index d1d0230..c392dfd 100644 --- a/assets/css/app.scss +++ b/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; +} diff --git a/assets/js/app.js b/assets/js/app.js index 63a63a9..c7015ec 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -17,9 +17,9 @@ import "../node_modules/bootstrap-icons/icons/at.svg"; // email field import "../node_modules/bootstrap-icons/icons/key.svg"; // new password field import "../node_modules/bootstrap-icons/icons/key-fill.svg"; // pw confirm field import "../node_modules/bootstrap-icons/icons/lock.svg"; // current pw field -import "../node_modules/bootstrap-icons/icons/shield-shaded.svg"; // role +import "../node_modules/bootstrap-icons/icons/shield.svg"; // role // live tables -import "../node_modules/bootstrap-icons/icons/filter.svg"; +import "../node_modules/bootstrap-icons/icons/funnel.svg"; import "../node_modules/bootstrap-icons/icons/backspace.svg"; // clear filter import "../node_modules/bootstrap-icons/icons/sort-down-alt.svg"; import "../node_modules/bootstrap-icons/icons/sort-up-alt.svg"; @@ -29,6 +29,7 @@ import "../node_modules/bootstrap-icons/icons/pencil.svg"; import "../node_modules/bootstrap-icons/icons/trash.svg"; import "../node_modules/bootstrap-icons/icons/check.svg"; import "../node_modules/bootstrap-icons/icons/x.svg"; +import "../node_modules/bootstrap-icons/icons/x-circle-fill.svg"; // page headers import "../node_modules/bootstrap-icons/icons/shield-lock.svg"; // reset password import "../node_modules/bootstrap-icons/icons/arrow-repeat.svg"; // resend confirmation diff --git a/lib/bones73k_web/live/property_live/form_component.html.leex b/lib/bones73k_web/live/property_live/form_component.html.leex index 21b1ae4..8df3199 100644 --- a/lib/bones73k_web/live/property_live/form_component.html.leex +++ b/lib/bones73k_web/live/property_live/form_component.html.leex @@ -7,38 +7,32 @@