.form-group--stacked: fix single child

conedevelopment · Jul 26, 2023 · e84e61e · e84e61e
1 parent 23309f0
commit e84e61e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/css/spruce.css b/css/spruce.css
@@ -1421,10 +1421,6 @@ legend {
 .form-group--stacked {
   display: flex;
 }
-.form-group--stacked > * {
-  /* stylelint-disable */
-  /* stylelint-enable */
-}
 .form-group--stacked > * + * {
   border-radius: 0;
   -webkit-margin-start: -1px;
@@ -1442,6 +1438,9 @@ legend {
   border-end-end-radius: var(--spruce-border-radius);
   border-end-start-radius: 0;
 }
+.form-group--stacked > *:only-child {
+  border-radius: var(--spruce-border-radius);
+}
 .form-group--stacked > *:focus {
   z-index: 2;
 }

diff --git a/css/spruce.min.css b/css/spruce.min.css
diff --git a/preview/pug/page/form.pug b/preview/pug/page/form.pug
@@ -275,7 +275,6 @@ block content
       legend Form Group Stacked
       div(class='form-group--stacked')
         input(class='form-control' type='text' aria-label='First Name')
-        input(class='form-control' type='text' aria-label='Last Name')
       div(class='form-group--stacked')
         input(class='form-control' type='text' aria-label='First Name')
         input(class='form-control' type='text' aria-label='Last Name')

diff --git a/scss/form/_group.scss b/scss/form/_group.scss
@@ -62,7 +62,7 @@
           margin-inline-start: -1px;
         }
 
-        /* stylelint-disable */
+        // stylelint-disable
         &:first-child {
           border-start-end-radius: 0;
           border-start-start-radius: config('border-radius', $form-control);
@@ -76,7 +76,11 @@
           border-end-end-radius: config('border-radius', $form-control);
           border-end-start-radius: 0;
         }
-        /* stylelint-enable */
+
+        &:only-child {
+          border-radius: config('border-radius', $form-control);
+        }
+        // stylelint-enable
 
         &:focus {
           z-index: 2;