Skip to content
Snippets Groups Projects
Commit d4c6c804 authored by xaralis's avatar xaralis
Browse files

Form field improvements

parent 5a9a3398
Branches
Tags
No related merge requests found
Pipeline #943 passed
......@@ -5,6 +5,11 @@
.text-input {
@apply outline-none bg-grey-25 py-3 px-4 text-lg border border-grey-200 transition duration-200;
/* Fix FF text-input not adjusting it's width.
* See: https://stackoverflow.com/a/48326796/303184
*/
@apply min-w-0;
&:hover:not([disabled]):not([readonly]) {
@apply border-grey-300;
}
......@@ -74,6 +79,11 @@
.select__control {
@apply w-full appearance-none outline-none bg-grey-25 py-3 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200;
/* Fix FF input not adjusting it's width.
* See: https://stackoverflow.com/a/48326796/303184
*/
@apply min-w-0;
&:hover:not([disabled]):not([readonly]) {
@apply border-grey-300;
}
......@@ -104,7 +114,7 @@
@apply relative flex;
input {
@apply w-5 h-5 cursor-pointer appearance-none outline-none bg-grey-200 mr-2 border border-grey-200 transition duration-200;
@apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-grey-200 border border-grey-200 transition duration-200;
&:hover:not([disabled]):not([readonly]) {
@apply border-grey-300;
......@@ -148,7 +158,7 @@
@apply relative;
input {
@apply w-5 h-5 appearance-none cursor-pointer outline-none bg-grey-200 mr-2 border border-grey-200 transition duration-200 rounded-full;
@apply w-5 h-5 mr-2 flex-shrink-0 appearance-none cursor-pointer outline-none bg-grey-200 border border-grey-200 transition duration-200 rounded-full;
&:hover:not([disabled]):not([readonly]) {
@apply border-grey-300;
......@@ -173,14 +183,13 @@
}
&:after {
@apply inline absolute pointer-events-none rounded-full bg-white;
width: .7rem;
height: .7rem;
@apply w-2 h-2 inline absolute pointer-events-none bg-white;
content: "";
top: calc((theme("spacing.5") - .7rem) / 2);
left: calc((theme("spacing.5") - .7rem) / 2);
/* Somehow, standard Tailwind `rounded-full` ends up not creating a perfect circle */
border-radius: 50%;
top: calc((theme("spacing.5") - theme("spacing.2")) / 2);
left: calc((theme("spacing.5") - theme("spacing.2")) / 2);
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment