From d4c6c804cdbc75b14d88a99d95d4878f84cd86ff Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Mon, 27 Jul 2020 08:47:54 +0200
Subject: [PATCH] Form field improvements
---
source/css/atoms/form-field.pcss | 25 +++++++++++++++++--------
1 file changed, 17 insertions(+), 8 deletions(-)
diff --git a/source/css/atoms/form-field.pcss b/source/css/atoms/form-field.pcss
index 35ec6ce..7da6e0f 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);
}
}
--
GitLab