fix(layout): CardLarge remove Cell negative margins and fix by spec

taiga-family · Sep 15, 2024 · bc18674 · bc18674
1 parent a87b608
commit bc18674
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/projects/layout/components/card/card.styles.less b/projects/layout/components/card/card.styles.less
@@ -49,11 +49,11 @@
 }
 
 [tuiCardLarge][data-space] {
-    --t-gap: 0.75rem;
     --t-radius: var(--tui-radius-l);
-    --t-comp: -0.25rem;
     --t-padding: 0.75rem;
+    --t-comp: -0.25rem;
     --t-dim: calc(var(--t-padding) + var(--t-comp));
+    --t-gap: 0.75rem;
 
     font: var(--tui-font-text-m);
     padding: var(--t-padding);
@@ -69,16 +69,37 @@
     &[data-space='compact'] {
         --t-radius: 1rem;
         --t-padding: 1.25rem;
-        --t-gap: 1.25rem;
     }
 
     &:not([tuiCell], [tuiHeader]) {
         flex-direction: column;
         gap: var(--t-gap);
         align-items: stretch;
 
+        > [tuiTitle] {
+            margin-top: var(--t-comp);
+        }
+
+        > :last-child {
+            margin-bottom: -0.5rem;
+
+            &:not([tuiCell]) {
+                margin-top: auto;
+                margin-bottom: auto;
+            }
+        }
+    }
+
+    &:has([tuiCell]) {
+        --t-gap: 0.25rem;
+
+        > [tuiHeader],
+        > [tuiTitle] {
+            margin-bottom: 0.5rem;
+        }
+
         > :last-child:not([tuiCell]) {
-            margin-top: auto;
+            margin-top: 0.75rem;
         }
     }
 
@@ -91,7 +112,7 @@
     }
 
     > [tuiHeader] {
-        margin: var(--t-comp) var(--t-comp) calc(1.5 * var(--t-comp)) 0;
+        margin: var(--t-comp) var(--t-comp) var(--t-comp) 0;
 
         [tuiLink]:last-child {
             margin-right: calc(-1 * var(--t-comp));
@@ -101,7 +122,7 @@
     [tuiCell] {
         inline-size: stretch;
         padding: 0.5rem;
-        margin: -0.5rem -0.5rem -0.75rem;
+        margin: 0 -0.5rem;
         border-radius: var(--tui-radius-l);
     }
 

diff --git a/projects/layout/components/cell/cell.styles.less b/projects/layout/components/cell/cell.styles.less
@@ -171,6 +171,10 @@
     tui-primitive-textfield & {
         padding: 0;
     }
+
+    > tui-avatar {
+        align-self: flex-start;
+    }
 }
 
 @media (hover: hover) and (pointer: fine) {