diff --git a/source/css/atoms/form-field.pcss b/source/css/atoms/form-field.pcss index 35ec6ce4632a6631153b50bb3e01cba89959bf94..7da6e0f45fe80b3b65dee089e9c2da0b8bbe936c 100644 --- a/source/css/atoms/form-field.pcss +++ b/source/css/atoms/form-field.pcss @@ -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); } }