feat(core): refine form spacings

haiilo · Apr 22, 2024 · c29ed02 · c29ed02
1 parent 08aa64f
commit c29ed02
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 9 deletions.
diff --git a/core/src/components/cat-checkbox/cat-checkbox.scss b/core/src/components/cat-checkbox/cat-checkbox.scss
@@ -8,7 +8,7 @@ $checkbox-height: 1.25rem;
 :host {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 :host([hidden]) {

diff --git a/core/src/components/cat-radio/cat-radio.scss b/core/src/components/cat-radio/cat-radio.scss
@@ -8,7 +8,7 @@ $radio-height: 1.25rem;
 :host {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 :host([hidden]) {

diff --git a/core/src/components/cat-toggle/cat-toggle.scss b/core/src/components/cat-toggle/cat-toggle.scss
@@ -8,7 +8,7 @@ $toggle-height: 1.25rem;
 :host {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 :host([hidden]) {

diff --git a/core/src/index.html b/core/src/index.html
@@ -993,9 +993,9 @@ <h2>Radio</h2>
 
               <h3>Group</h3>
               <cat-radio-group a11y-label="Radio Group 1" label-left>
-                <cat-radio value="one" label="Option 1 - Group 1" checked></cat-radio>
-                <cat-radio value="two" label="Option 2 - Group 1"></cat-radio>
-                <cat-radio value="three" label="Option 3 - Group 1" disabled></cat-radio>
+                <cat-radio value="one" label="Option 1 - Group 1" hint="This is a hint" checked></cat-radio>
+                <cat-radio value="two" label="Option 2 - Group 1" hint="This is a hint"></cat-radio>
+                <cat-radio value="three" label="Option 3 - Group 1" hint="This is a hint" disabled></cat-radio>
               </cat-radio-group>
 
               <h3>State</h3>

diff --git a/core/src/styles/_variables.scss b/core/src/styles/_variables.scss
@@ -19,7 +19,6 @@ $cat-font-color-mono: rgb(var(--cat-font-color-mono));
 
 $cat-head-margin-bottom: 1rem;
 $cat-body-margin-bottom: 2rem;
-$cat-form-margin-bottom: 1.5rem;
 $cat-nav-padding-horizontal: 0.75rem;
 
 // --------

diff --git a/core/src/styles/core/_form.scss b/core/src/styles/core/_form.scss
@@ -15,11 +15,11 @@
       cat-date,
       cat-time
     ):not(:last-child) {
-    margin-bottom: calc($cat-form-margin-bottom * var(--cat-form-spacer, 1));
+    margin-bottom: calc(1rem * var(--cat-form-spacer, 1));
   }
 
   cat-radio:not(:last-child) {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
   }
 }