fix(styles): settings updates after ngx implementation [ci visual]

SAP · Feb 13, 2025 · 507269a · 507269a
1 parent 64e1983
commit 507269a
Show file tree

Hide file tree

Showing 6 changed files with 879 additions and 854 deletions.
diff --git a/packages/styles/src/settings.scss b/packages/styles/src/settings.scss
@@ -12,6 +12,7 @@ $block: #{$fd-namespace}-settings;
     min-height: var(--fdSettings_Dialog_Content_Min_Height, 42.5rem);
     max-width: var(--fdSettings_Dialog_Content_Max_Width, 60rem);
     max-height: var(--fdSettings_Dialog_Content_Max_Height, 42.5rem);
+    height: var(--fdSettings_Dialog_Content_Height, 42.5rem);
   }
 
   .#{$block}__dialog-body {
@@ -99,45 +100,53 @@ $block: #{$fd-namespace}-settings;
     }
   }
 
-  &--sm {
+  &__container {
+    @include fd-reset();
+    @include fd-flex();
+
+    width: 100%;
+    height: 100%;
+  }
+
+  &:has(.#{$block}__container--sm) {
     --fdSettings_List_Area_Width: 100%;
     --fdSettings_Header_Margin_Top: 0;
-    --fdSettings_List_Nav_Indicator_Content: "\e1ed";
+    --fdSettings_List_Nav_Indicator_Content: '\e1ed';
     --fdSettings_Dialog_Content_Min_Width: 100%;
     --fdSettings_Dialog_Content_Min_Height: 100%;
     --fdSettings_Dialog_Content_Max_Width: 100%;
     --fdSettings_Dialog_Content_Max_Height: 100%;
     --fdSettings_List_Area_Border: none;
 
     .#{$block}__dialog-content {
-      box-shadow: none;
-      border-radius: 0;
+        box-shadow: none;
+        border-radius: 0;
     }
 
     .#{$block}__dialog-body {
-      border-radius: 0;
+        border-radius: 0;
     }
   }
 
-  &--md {
-    --fdSettings_List_Area_Width: 100%;
-    --fdSettings_Header_Margin_Top: 0;
-    --fdSettings_List_Nav_Indicator_Content: "\e1ed";
-    --fdSettings_Dialog_Content_Min_Width: 80%;
-    --fdSettings_Dialog_Content_Min_Height: 88%;
-    --fdSettings_Dialog_Content_Max_Width: 40rem;
-    --fdSettings_Dialog_Content_Max_Height: 42.5rem;
-    --fdSettings_List_Area_Border: none;
+  &:has(.#{$block}__container--md) {
+      --fdSettings_List_Area_Width: 100%;
+      --fdSettings_Header_Margin_Top: 0;
+      --fdSettings_List_Nav_Indicator_Content: '\e1ed';
+      --fdSettings_Dialog_Content_Min_Width: 80%;
+      --fdSettings_Dialog_Content_Min_Height: 88%;
+      --fdSettings_Dialog_Content_Max_Width: 40rem;
+      --fdSettings_Dialog_Content_Max_Height: 42.5rem;
+      --fdSettings_List_Area_Border: none;
   }
 
-  &--lg,
-  &--xl {
-    --fdSettings_List_Area_Width: 20rem;
-    --fdSettings_Header_Margin_Top: 1rem;
-    --fdSettings_List_Nav_Indicator_Content: none;
-    --fdSettings_Dialog_Content_Min_Width: 60rem;
-    --fdSettings_Dialog_Content_Min_Height: 42.5rem;
-    --fdSettings_Dialog_Content_Max_Width: 60rem;
-    --fdSettings_Dialog_Content_Max_Height: 42.5rem;
+  &:has(.#{$block}__container--lg),
+  &:has(.#{$block}__container--xl) {
+      --fdSettings_List_Area_Width: 20rem;
+      --fdSettings_Header_Margin_Top: 1rem;
+      --fdSettings_List_Nav_Indicator_Content: none;
+      --fdSettings_Dialog_Content_Min_Width: 60rem;
+      --fdSettings_Dialog_Content_Min_Height: 42.5rem;
+      --fdSettings_Dialog_Content_Max_Width: 60rem;
+      --fdSettings_Dialog_Content_Max_Height: 42.5rem;
   }
 }