Fix checkboxes being less rounded on mobile screens

chataize · Jun 15, 2024 · 475818b · 475818b
1 parent c9e5b3a
commit 475818b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 29 deletions.
diff --git a/preview/wwwroot/css/tailwind.css b/preview/wwwroot/css/tailwind.css
@@ -574,10 +574,6 @@ video {
   display: flex;
 }
 
-.flex-col {
-  flex-direction: column;
-}
-
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -595,25 +591,13 @@ video {
 }
 
 @media (min-width: 640px) {
-  .sm\:flex-row {
-    flex-direction: row;
-  }
-
   .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1rem * var(--tw-space-x-reverse));
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
 }
 
-@media (min-width: 1024px) {
-  .lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(1rem * var(--tw-space-x-reverse));
-    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-}
-
 @media (min-width: 1280px) {
   .xl\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
@@ -634,14 +618,6 @@ video {
   }
 }
 
-@media (max-width: 1023px) {
-  .-lg\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-  }
-}
-
 @media (max-width: 639px) {
   .-sm\:flex-col {
     flex-direction: column;

diff --git a/src/wwwroot/css/dopamine.css b/src/wwwroot/css/dopamine.css
@@ -136,7 +136,7 @@
     }
 
     .checkbox-container-base {
-        @apply flex items-center justify-center w-8 h-8 transition-all duration-300 ease-in-out border rounded-md shadow-sm stroke-2 sm:w-6 sm:h-6;
+        @apply flex items-center justify-center w-8 h-8 transition-all duration-300 ease-in-out border rounded-lg shadow-sm stroke-2 sm:rounded-md sm:w-6 sm:h-6;
     }
 
     .checkbox-container-off {

diff --git a/src/wwwroot/css/tailwind.css b/src/wwwroot/css/tailwind.css
@@ -1644,7 +1644,7 @@ video {
   width: 2rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border-width: 1px;
   stroke-width: 2;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -1659,6 +1659,7 @@ video {
   .checkbox-container-off {
     height: 1.5rem;
     width: 1.5rem;
+    border-radius: 0.375rem;
   }
 }
 
@@ -1726,7 +1727,7 @@ video {
   width: 2rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border-width: 1px;
   stroke-width: 2;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -1741,6 +1742,7 @@ video {
   .checkbox-container-on {
     height: 1.5rem;
     width: 1.5rem;
+    border-radius: 0.375rem;
   }
 }
 
@@ -1802,7 +1804,7 @@ video {
   width: 2rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border-width: 1px;
   stroke-width: 2;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -1817,6 +1819,7 @@ video {
   .checkbox-container-disabled-off {
     height: 1.5rem;
     width: 1.5rem;
+    border-radius: 0.375rem;
   }
 }
 
@@ -1846,7 +1849,7 @@ video {
   width: 2rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border-width: 1px;
   stroke-width: 2;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -1861,6 +1864,7 @@ video {
   .checkbox-container-disabled-on {
     height: 1.5rem;
     width: 1.5rem;
+    border-radius: 0.375rem;
   }
 }