Fix CSS styling for iOS (#22)

- Fix button styling for iOS - Fix radio input remaining space in iOS
pobch · Jun 9, 2022 · d010b44 · d010b44
1 parent 835d866
commit d010b44
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/ToolRadio.module.css b/src/ToolRadio.module.css
@@ -2,6 +2,9 @@
 
 .radioInput {
   appearance: none;
+  /* remove remaining space in iOS */
+  width: 1px;
+  height: 1px;
 }
 
 .radioLabel {
@@ -16,10 +19,10 @@
 /* State styling */
 
 .radioInput:checked + .radioLabel {
-  background-color: #bae6fd;
+  background-color: #bae6fd; /* sky-200 */
   border: 1px dashed black;
 }
 
 .radioInput:focus-visible + .radioLabel {
-  outline: 1px solid blue;
+  outline: 1px solid #8b5cf6; /* violet-500 */
 }
diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,6 @@
-* {
+*,
+*::before,
+*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -18,3 +20,19 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
+
+button {
+  padding: 0.125rem;
+  border-radius: 0;
+  border: 1px solid #0ea5e9; /* sky-500 */
+  background-color: #bae6fd; /* sky-200 */
+}
+
+button:active,
+button:hover {
+  background-color: #7dd3fc; /* sky-300 */
+}
+
+button:focus-visible {
+  outline: 1px solid #8b5cf6; /* violet-500 */
+}