adam/bones73k
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improved input fields, icons, error helpers

Browse source
This commit is contained in:
Adam Piontek 2021-03-08 22:23:19 -05:00
parent 0039146cd4
commit 6aa9a4bd48
16 changed files with 250 additions and 269 deletions

1
assets/css/_phx-liveview.scss
View file

@ -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;

33
assets/css/app.scss
View file

@ -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;
}

5
assets/js/app.js
View file

@ -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