fix(stack-view): horizontal alignment

vmware-clarity · Aug 30, 2024 · e7cca99 · e7cca99
1 parent 3ccaf28
commit e7cca99
Showing 1 changed file with 7 additions and 14 deletions.
diff --git a/projects/angular/src/data/stack-view/_stack-view.clarity.scss b/projects/angular/src/data/stack-view/_stack-view.clarity.scss
@@ -103,13 +103,13 @@
       flex: 1 1 auto;
       display: flex;
       align-items: center;
+      gap: tokens.$cds-global-space-5;
 
       &::before {
         display: inline-block;
         content: '';
         float: left;
-        @include mixins.equilateral(tokens.$cds-global-space-7);
-        margin: tokens.$cds-global-space-3 tokens.$cds-global-space-5 0 0;
+        @include mixins.min-equilateral(tokens.$cds-global-space-7);
         text-align: center;
       }
 
@@ -125,13 +125,12 @@
     .stack-view-key {
       flex: 0 0 40%;
       max-width: 40%;
-      margin: 0 tokens.$cds-global-space-7 0 0;
+      margin-right: var(--cds-global-space-5);
     }
 
     .stack-block-caret {
       @include mixins.equilateral(tokens.$cds-global-space-7);
-      margin-right: tokens.$cds-global-space-5;
-      fill: stack-view-variables.$clr-stack-view-stack-block-caret-color;
+      --color: #{stack-view-variables.$clr-stack-view-stack-block-caret-color};
     }
 
     .stack-block-content {
@@ -162,10 +161,6 @@
       .stack-block-content {
         background-color: stack-view-variables.$clr-stack-view-stack-children-stack-block-label-and-content-bg-color;
       }
-
-      .stack-block-label {
-        padding-left: tokens.$cds-global-space-9;
-      }
     }
 
     .stack-block-expandable {
@@ -246,11 +241,9 @@
     .modal & {
       margin-bottom: 0;
     }
-  }
 
-  //Disable the generated icon without a breaking change for the stackview static markup
-  //Only targets the Angular component as of now. Static will require a breaking change.
-  .stack-view {
+    //Disable the generated icon without a breaking change for the stackview static markup
+    //Only targets the Angular component as of now. Static will require a breaking change.
     clr-stack-block.stack-block-expandable {
       .stack-block-label::before {
         content: none;
@@ -260,7 +253,7 @@
     .stack-children clr-stack-block,
     .stack-children {
       .stack-block-label {
-        padding-left: tokens.$cds-global-space-12;
+        padding-left: mixins.baselinePx(52);
 
         &::before {
           display: none;