fix(styles): form layout grid (#3838)

BREAKING CHANGE: * `fd-form-layout-grid-container--vertical` additional modifier classes added, see docs
SAP · Sep 14, 2022 · 4604d7a · 4604d7a
1 parent 8b57148
commit 4604d7a
Show file tree

Hide file tree

Showing 3 changed files with 1,083 additions and 721 deletions.
diff --git a/src/styles/form-layout-grid.scss b/src/styles/form-layout-grid.scss
@@ -11,14 +11,16 @@ $gridContainer: #{$fd-namespace}-container;
 $gridRow: #{$fd-namespace}-row;
 $gridCol: #{$fd-namespace}-col;
 
-@mixin fd-form-vertical($marginTop: 0.625rem) {
-  &.#{$formGroup},
-  .#{$formGroup} {
-    .#{$formItem} {
-      margin-top: $marginTop;
-
-      &:first-of-type {
-        margin-top: 0;
+@mixin fd-form-vertical($verticalSelector, $marginTop: 0.625rem) {
+  .#{$gridContainer}.#{$formContainer}.#{$verticalSelector} {
+    &.#{$formGroup},
+    .#{$formGroup} {
+      .#{$formItem} {
+        margin-top: 0.625rem;
+
+        &:first-of-type {
+          margin-top: 0;
+        }
       }
     }
   }
@@ -30,8 +32,6 @@ $gridCol: #{$fd-namespace}-col;
   .#{$gridContainer}.#{$formContainer} .#{$gridRow} {
     @for $col from 1 through $cols - 1 {
       .#{$colSelector}--#{$col} {
-        @include fd-form-vertical();
-
         > .#{$fd-namespace}-form-label {
           float: right;
           text-align: right;
@@ -64,15 +64,14 @@ $gridCol: #{$fd-namespace}-col;
 }
 
 .#{$gridContainer}.#{$formContainer} {
-  &,
-  &.#{$formContainer}--vertical {
-    @include fd-form-vertical();
-  }
-
   &.#{$formGroup},
   .#{$formGroup} {
     padding: 1rem !important;
 
+    .#{$formGroup} {
+      padding: 0 !important;
+    }
+
     .#{$formItem} {
       &--compact {
         .#{$fd-namespace}-select__control {
@@ -97,28 +96,36 @@ $gridCol: #{$fd-namespace}-col;
   }
 
   .#{$gridRow} {
+    flex-direction: row;
+
     .#{$gridCol} {
       @include fd-ellipsis();
 
       padding-top: 0;
       padding-bottom: 0;
-      align-self: center;
+
+      &:not(.#{$formGroup}) {
+        align-self: center;
+      }
     }
   }
 }
 
 @media (min-width: 0) {
+  @include fd-form-vertical(#{$formContainer}--vertical);
   @include fd-form-col-paddings('fd-col');
 }
 
+@media (min-width: 0) and (max-width: 599px) {
+  @include fd-form-vertical(#{$formContainer});
+}
+
 @media (min-width: 600px) {
   .#{$gridContainer}.#{$formContainer} {
     $gutter: 0.25rem;
 
     padding: 0 $gutter;
 
-    @include fd-form-vertical(0);
-
     .#{$gridRow} {
       margin: 0 -#{$gutter};
       min-width: calc(100% + #{$gutter} * 2);
@@ -132,10 +139,19 @@ $gridCol: #{$fd-namespace}-col;
   @include fd-form-col-paddings('fd-col-md');
 }
 
+@media (min-width: 600px) and (max-width: 1023px) {
+  @include fd-form-vertical(#{$formContainer}--md-vertical);
+}
+
 @media (min-width: 1024px) {
   @include fd-form-col-paddings('fd-col-lg');
 }
 
+@media (min-width: 1024px) and (max-width: 1443px) {
+  @include fd-form-vertical(#{$formContainer}--lg-vertical);
+}
+
 @media (min-width: 1440px) {
+  @include fd-form-vertical(#{$formContainer}--xl-vertical);
   @include fd-form-col-paddings('fd-col-xl');
 }