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

Form field improvements

parent 5a9a3398
Branches
Tags 1.5.2
No related merge requests found
...@@ -5,6 +5,11 @@ ...@@ -5,6 +5,11 @@
.text-input { .text-input {
@apply outline-none bg-grey-25 py-3 px-4 text-lg border border-grey-200 transition duration-200; @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]) { &:hover:not([disabled]):not([readonly]) {
@apply border-grey-300; @apply border-grey-300;
} }
...@@ -74,6 +79,11 @@ ...@@ -74,6 +79,11 @@
.select__control { .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; @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]) { &:hover:not([disabled]):not([readonly]) {
@apply border-grey-300; @apply border-grey-300;
} }
...@@ -104,7 +114,7 @@ ...@@ -104,7 +114,7 @@
@apply relative flex; @apply relative flex;
input { 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]) { &:hover:not([disabled]):not([readonly]) {
@apply border-grey-300; @apply border-grey-300;
...@@ -148,7 +158,7 @@ ...@@ -148,7 +158,7 @@
@apply relative; @apply relative;
input { 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]) { &:hover:not([disabled]):not([readonly]) {
@apply border-grey-300; @apply border-grey-300;
...@@ -173,14 +183,13 @@ ...@@ -173,14 +183,13 @@
} }
&:after { &:after {
@apply inline absolute pointer-events-none rounded-full bg-white; @apply w-2 h-2 inline absolute pointer-events-none bg-white;
width: .7rem;
height: .7rem;
content: ""; content: "";
top: calc((theme("spacing.5") - .7rem) / 2); /* Somehow, standard Tailwind `rounded-full` ends up not creating a perfect circle */
left: calc((theme("spacing.5") - .7rem) / 2); 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