fix(styles): paddings and margins specificity [ci visual] (#5594)

SAP · Aug 27, 2024 · d65536d · d65536d
1 parent 7315122
commit d65536d
Show file tree

Hide file tree

Showing 46 changed files with 198 additions and 150 deletions.
diff --git a/packages/common-css/src/sap-tool-layout.scss b/packages/common-css/src/sap-tool-layout.scss
@@ -7,7 +7,8 @@ $block: #{$sap-namespace}-tool-layout;
 
 .#{$block} {
   --fdToolLayout_Gap: 0.5rem;
-  --fdToolLayout_Padding: 0.5rem 0.5rem 0 0.5rem;
+  --fdToolLayout_Padding_Block: 0.5rem 0;
+  --fdToolLayout_Padding_Inline: 0.5rem;
   --fdToolLayout_Content_Container_Border_Radius: 0.5rem 0.5rem 0 0;
   --fdToolLayout_Content_Container_Background: var(--sapBackgroundColor);
   --fdToolLayout_Content_Container_BoxShadow: var(--sapContainer_Shadow1);
@@ -20,7 +21,8 @@ $block: #{$sap-namespace}-tool-layout;
 
   width: 100%;
   height: 100%;
-  padding: var(--fdToolLayout_Padding);
+  padding-block: var(--fdToolLayout_Padding_Block);
+  padding-inline: var(--fdToolLayout_Padding_Inline);
   background: var(--fdToolLayout_Background);
 
   &__container {
@@ -90,13 +92,15 @@ $block: #{$sap-namespace}-tool-layout;
   }
 
   &--tablet {
-    --fdToolLayout_Padding: 0.5rem;
+    --fdToolLayout_Padding_Block: 0.5rem;
+    --fdToolLayout_Padding_Inline: 0.5rem;
     --fdToolLayout_Content_Container_Border_Radius: 0.5rem;
   }
 
   &--phone {
     --fdToolLayout_Gap: 0.25rem;
-    --fdToolLayout_Padding: 0.25rem;
+    --fdToolLayout_Padding_Block: 0.25rem;
+    --fdToolLayout_Padding_Inline: 0.25rem;
     --fdToolLayout_Content_Container_Border_Radius: 0.25rem;
   }
 

diff --git a/packages/cx/src/side-nav.scss b/packages/cx/src/side-nav.scss
@@ -10,7 +10,8 @@ $block-nested-list: #{$fd-cx-namespace}-nested-list;
 $fd-side-nav-border-radius: 1rem;
 
 .#{$block} {
-  --fdSideNav_Padding: 0.25rem 0;
+  --fdSideNav_Padding_Block: 0.25rem;
+  --fdSideNav_Padding_Inline: 0;
   --fdSideNav_First_Item_Margin_Top: 0.25rem;
   --fdSideNav_Utility_Margin_Bottom: 1rem;
 
@@ -24,7 +25,8 @@ $fd-side-nav-border-radius: 1rem;
 
   width: 15rem;
   height: 100%;
-  padding: var(--fdSideNav_Padding);
+  padding-block: var(--fdSideNav_Padding_Block);
+  padding-inline: var(--fdSideNav_Padding_Inline);
   box-shadow: var(--sapContent_Shadow0);
   background-color: var(--sapGroup_ContentBackground);
   border-radius: 0 $fd-side-nav-border-radius $fd-side-nav-border-radius 0;
@@ -66,7 +68,8 @@ $fd-side-nav-border-radius: 1rem;
   &__popover-body {
     @include fd-set-width(16rem !important);
 
-    padding: 0.25rem 0 !important;
+    padding-block: 0.25rem !important;
+    padding-inline: 0 !important;
     border-radius: $fd-side-nav-border-radius !important;
 
     .#{$block-nested-list} {
@@ -111,7 +114,7 @@ $fd-side-nav-border-radius: 1rem;
   }
 
   @include fd-compact-or-condensed() {
-    --fdSideNav_Padding: 0.125rem 0;
+    --fdSideNav_Padding_Block: 0.125rem;
     --fdSideNav_First_Item_Margin_Top: 0.125rem;
     --fdSideNav_Utility_Margin_Bottom: 0.75rem;
   }

diff --git a/packages/styles/src/_app.scss b/packages/styles/src/_app.scss
@@ -31,14 +31,17 @@ $block: #{$fd-namespace}-app;
 
     &--horizontal {
       flex: 1 100%;
-      padding: 0 0.5rem;
+      padding-block: 0;
+      padding-inline: 0.5rem;
 
       @include fd-screen(m) {
-        padding: 0 2rem;
+        padding-block: 0;
+        padding-inline: 2rem;
       }
 
       @include fd-screen(xl) {
-        padding: 0 3rem;
+        padding-block: 0;
+        padding-inline: 3rem;
       }
     }
 

diff --git a/packages/styles/src/action-sheet.scss b/packages/styles/src/action-sheet.scss
@@ -10,20 +10,24 @@ $block: #{$fd-namespace}-action-sheet;
   $fd-action-sheet-overlay-color: var(--sapBlockLayer_Background);
 
   // SPACING
-  --fdActionSheet_Padding: 0.25rem 0.5rem;
-  --fdActionSheet_Item_Padding: 0.25rem 0;
+  --fdActionSheet_Padding_Block: 0.25rem;
+  --fdActionSheet_Padding_Inline: 0.5rem;
+  --fdActionSheet_Item_Padding_Block: 0.25rem;
+  --fdActionSheet_Item_Padding_Inline: 0;
 
   @include fd-reset();
 
   width: 100%;
-  padding: var(--fdActionSheet_Padding);
+  padding-block: var(--fdActionSheet_Padding_Block);
+  padding-inline: var(--fdActionSheet_Padding_Inline);
 
   &__item {
     @include fd-reset();
 
     display: block;
     width: 100%;
-    padding: var(--fdActionSheet_Item_Padding);
+    padding-block: var(--fdActionSheet_Item_Padding_Block);
+    padding-inline: var(--fdActionSheet_Item_Padding_Inline);
   }
 
   &__wrapper {
@@ -64,8 +68,10 @@ $block: #{$fd-namespace}-action-sheet;
   }
 
   @include fd-compact-or-condensed() {
-    --fdActionSheet_Padding: 0.1875rem 0.375rem;
-    --fdActionSheet_Item_Padding: 0.1875rem 0;
+    --fdActionSheet_Padding_Block: 0.1875rem;
+    --fdActionSheet_Padding_Inline: 0.375rem;
+    --fdActionSheet_Item_Padding_Block: 0.1875rem;
+    --fdActionSheet_Item_Padding_Inline: 0;
   }
 
   &--mobile {

diff --git a/packages/styles/src/card.scss b/packages/styles/src/card.scss
@@ -446,7 +446,8 @@ $legend-background-colors: (
     @include fd-reset();
     @include fd-flex-vertical-center();
 
-    padding: var(--fdCard_Footer_Padding);
+    padding-block: var(--fdCard_Footer_Padding) 1rem;
+    padding-inline: 1rem;
     background: var(--fdCard_Footer_Background, var(--sapTile_Background));
     border-radius: var(--fdCard_Footer_Border_Radius);
     border-top: var(--fdCard_Footer_Border_Top);
@@ -577,7 +578,8 @@ $legend-background-colors: (
 
   &__badge.#{$object-status} {
     --fdObjectStatus_Inverted_Border_Radius: 0.5rem;
-    --fdObjectStatus_Inverted_Padding: 0 0.25rem;
+    --fdObjectStatus_Inverted_Padding_Block: 0;
+    --fdObjectStatus_Inverted_Padding_Inline: 0.25rem;
     --fdObjectStatus_Inverted_Line_Height: 0.875rem;
 
     span {

diff --git a/packages/styles/src/dynamic-page.scss b/packages/styles/src/dynamic-page.scss
@@ -273,7 +273,8 @@ $block: #{$fd-namespace}-dynamic-page;
     @include fd-reset();
 
     background-color: $fd-dynamic-page-background-color;
-    padding: $fd-dynamic-page-header-padding-top-bottom 0;
+    padding-block: $fd-dynamic-page-header-padding-top-bottom;
+    padding-inline: 0;
 
     &[aria-hidden="true"] {
       display: none;

diff --git a/packages/styles/src/form-layout-grid.scss b/packages/styles/src/form-layout-grid.scss
@@ -118,7 +118,8 @@ $gridCol: #{$fd-namespace}-col;
     padding-inline: $gutter;
 
     .#{$gridRow} {
-      margin: 0 -#{$gutter};
+      margin-block: 0;
+      margin-inline: -#{$gutter};
       min-width: calc(100% + #{$gutter} * 2);
 
       .#{$gridCol} {

diff --git a/packages/styles/src/icon-tab-bar.scss b/packages/styles/src/icon-tab-bar.scss
@@ -26,19 +26,19 @@ $fd-icon-tab-bar-dnd-separator-circle-size: 0.5rem !default;
 $fd-icon-tab-bar-focus-offset: var(--fdIcon_Tab_Bar_Focus_Offset) !default;
 $fd-icon-tab-bar-responsive-paddings: (
   'sm': (
-    'padding': 0 1rem
+    'padding': 1rem
   ),
   'md': (
-    'padding': 0 2rem
+    'padding': 2rem
   ),
   'lg': (
-    'padding': 0 2rem
+    'padding': 2rem
   ),
   'xl': (
-    'padding': 0 3rem
+    'padding': 3rem
   ),
   'xxl': (
-    'padding': 0 3rem
+    'padding': 3rem
   )
 );
 $fd-icon-tab-bar-semantic-values: (
@@ -1532,7 +1532,8 @@ $fd-icon-tab-bar-semantic-values: (
   @each $set-name, $set-padding in $fd-icon-tab-bar-responsive-paddings {
     &--#{$set-name} {
       .#{$block}__header {
-        padding: map.get($set-padding, 'padding');
+        padding-block: 0;
+        padding-inline: map.get($set-padding, 'padding');
       }
     }
   }

diff --git a/packages/styles/src/illustrated-message.scss b/packages/styles/src/illustrated-message.scss
@@ -10,12 +10,14 @@ $block: #{$fd-namespace}-illustrated-message;
   --illustratedMessageMaxWidth: 30rem;
   --illustrationW: 20rem;
   --illustrationH: 15rem;
-  --illustrationMargin: 2rem 0;
+  --illustrationMarginBlock: 2rem;
+  --illustrationMarginInline: 0;
   --figcaptionMaxWidth: 25rem;
   --titleMarginBottom: 1rem;
   --titleFontSize: var(--sapFontHeader2Size);
   --textMarginBottom: 0.5rem;
-  --actionsMargin: 1rem 0;
+  --actionsMarginBlock: 1rem;
+  --actionsMarginInline: 0;
 
   @include fd-reset();
 
@@ -45,7 +47,8 @@ $block: #{$fd-namespace}-illustrated-message;
 
     width: var(--illustrationW);
     height: var(--illustrationH);
-    margin: var(--illustrationMargin);
+    margin-block: var(--illustrationMarginBlock);
+    margin-inline: var(--illustrationMarginInline);
   }
 
   &__figcaption {
@@ -87,7 +90,8 @@ $block: #{$fd-namespace}-illustrated-message;
     }
 
     width: 100%;
-    margin: var(--actionsMargin);
+    margin-block: var(--actionsMarginBlock);
+    margin-inline: var(--actionsMarginInline);
   }
 
   @media screen and (width <= 599px) {
@@ -100,18 +104,18 @@ $block: #{$fd-namespace}-illustrated-message;
   &--dialog {
     --illustrationW: 10rem;
     --illustrationH: 10rem;
-    --illustrationMargin: 1rem 0;
+    --illustrationMarginBlock: 1rem;
     --titleMarginBottom: 0.5rem;
     --titleFontSize: var(--sapFontHeader3Size);
-    --actionsMargin: 0.5rem 0 1rem 0;
+    --actionsMarginBlock: 0.5rem 1rem;
   }
 
   &--spot {
     --illustratedMessagePadding: 0.5rem;
     --illustrationW: 8rem;
     --illustrationH: 8rem;
-    --illustrationMargin: 0 0 0.5rem 0;
-    --actionsMargin: 0.5rem 0;
+    --illustrationMarginBlock: 0 0.5rem;
+    --actionsMarginBlock: 0.5rem;
     --titleMarginBottom: 0.5rem;
     --titleFontSize: var(--sapFontHeader4Size);
   }
@@ -120,17 +124,17 @@ $block: #{$fd-namespace}-illustrated-message;
     --illustratedMessagePadding: 0.25rem;
     --illustrationW: 2.813rem;
     --illustrationH: 2.813rem;
-    --illustrationMargin: 0;
+    --illustrationMarginBlock: 0;
     --textMarginBottom: 0.313rem;
     --titleMarginBottom: 0.25rem;
     --titleFontSize: var(--sapFontHeader5Size);
-    --actionsMargin: 0.25rem 0;
+    --actionsMarginBlock: 0.25rem;
     --illustrationMarginRight: 0.25rem;
 
     flex-flow: row wrap;
 
     .#{$block}__illustration {
-      @include fd-set-margin-right(var(--illustrationMarginRight));
+      margin-inline-end: var(--illustrationMarginRight);
 
       & + .#{$block}__figcaption {
         width: calc(100% - var(--illustrationW) - var(--illustrationMarginRight));

diff --git a/packages/styles/src/info-label.scss b/packages/styles/src/info-label.scss
@@ -77,7 +77,8 @@ $color-accents: (
   width: auto;
   color: var(--fdInfoLabel_Color);
   height: var(--fdInfoLabel_Height);
-  padding: 0 var(--fdInfoLabel_Padding);
+  padding-block: 0;
+  padding-inline: var(--fdInfoLabel_Padding);
   border-radius: var(--fdInfoLabel_Border_Radius);
   background-color: var(--fdInfoLabel_Background);
   border: 0.0625rem solid var(--fdInfoLabel_Border_Color);

diff --git a/packages/styles/src/input-group.scss b/packages/styles/src/input-group.scss
@@ -117,8 +117,8 @@ $fd-input-border-radius: var(--sapField_BorderCornerRadius);
   @include fd-compact-or-condensed() {
     height: var(--sapElement_Compact_Height);
 
-    --fdInput_Field_Margin: 0.1875rem 0;
-    --fdInput_Field_Compact_Margin: 0;
+    --fdInput_Field_Margin_Block: 0.1875rem;
+    --fdInput_Field_Compact_Margin_Block: 0;
     --fdInput_Group_Addon_Width: 2rem;
     --fdInput_Group_Addon_Height: var(--fdInput_Compact_Height);
   }

diff --git a/packages/styles/src/menu.scss b/packages/styles/src/menu.scss
@@ -12,12 +12,8 @@ $block: #{$fd-namespace}-menu;
 .#{$block} {
   $fd-menu-border-radius: var(--fdButton_Menu_Border_Radius) !default;
   $fd-menu-item-color-active: var(--sapList_Active_TextColor) !default;
-  $fd-menu-link-padding-top: 0.25rem !default;
-  $fd-menu-link-padding-left: -0.25rem !default;
 
   --fdMenu_Icon_Width: 2.25rem;
-  --fdMenu_Icon_Before_Margin: 0 0 0 -0.75rem;
-  --fdMenu_Icon_After_Margin: 0 -1rem 0 0;
   --fdMenu_Link_Height: 2.75rem;
   --fdMenu_Item_Spacing_Left: 0.75rem;
   --fdMenu_Item_Spacing_Right: 0.75rem;
@@ -82,13 +78,13 @@ $block: #{$fd-namespace}-menu;
     top: 0;
     left: 100%;
     z-index: 2;
-    margin: $fd-menu-link-padding-top 0 0 $fd-menu-link-padding-left;
+    margin-block: 0.25rem 0;
+    margin-inline: -0.25rem 0;
     min-width: 100%;
 
     @include fd-rtl() {
       right: 100%;
       left: initial;
-      margin: $fd-menu-link-padding-top $fd-menu-link-padding-left 0 0;
     }
 
     &[aria-hidden='true'] {
@@ -345,8 +341,6 @@ $block: #{$fd-namespace}-menu;
     max-width: 100%;
     width: 100%;
 
-    --fdMenu_Icon_Before_Margin: 0 0 0 -1rem;
-    --fdMenu_Icon_After_Margin: 0 -1rem 0 0;
     --fdMenu_Icon_Width: 2.75rem;
     --fdMenu_Item_Spacing_Left: 1rem;
     --fdMenu_Item_Spacing_Right: 1rem;
@@ -358,7 +352,8 @@ $block: #{$fd-namespace}-menu;
       border-radius: 0;
       box-shadow: none;
       position: static;
-      margin: 0;
+      margin-inline: 0;
+      margin-block: 0;
 
       .#{$block}__item {
         border-radius: 0;
@@ -377,8 +372,6 @@ $block: #{$fd-namespace}-menu;
   }
 
   @include fd-compact-or-condensed() {
-    --fdMenu_Icon_Before_Margin: 0 0 0 -0.5rem;
-    --fdMenu_Icon_After_Margin: 0 -0.75rem 0 0;
     --fdMenu_Icon_Width: 2rem;
     --fdMenu_Link_Height: 2rem;
     --fdMenu_Item_Spacing_Left: 0.5rem;

diff --git a/packages/styles/src/message-page.scss b/packages/styles/src/message-page.scss
@@ -29,7 +29,8 @@ $block: #{$fd-namespace}-message-page;
       align-items: center;
     }
 
-    padding: 1rem;
+    padding-block: 1rem;
+    padding-inline: 1rem;
     background: var(--fdMessage_Page_Container_Background);
     border-radius: var(--fdMessage_Page_Container_Corner_Radius);
   }

diff --git a/packages/styles/src/micro-process-flow.scss b/packages/styles/src/micro-process-flow.scss
@@ -202,7 +202,8 @@ $fd-micro-process-flow-semantic-colors: (
     @include fd-set-padding-left($fd-micro-process-flow-item-padding);
 
     position: relative;
-    margin: calc(var(--sapContent_FocusWidth) + var(--sapContent_FocusWidth)) 0;
+    margin-block: calc(var(--sapContent_FocusWidth) + var(--sapContent_FocusWidth));
+    margin-inline: 0;
     justify-content: flex-start;
 
     .#{$fd-namespace}-status-indicator {