diff --git a/projects/layout/components/card/card.styles.less b/projects/layout/components/card/card.styles.less index dd076a027130c..bbc3e885055ff 100644 --- 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,7 +69,6 @@ &[data-space='compact'] { --t-radius: 1rem; --t-padding: 1.25rem; - --t-gap: 1.25rem; } &:not([tuiCell], [tuiHeader]) { @@ -77,8 +76,30 @@ 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 index 236a4a1575b64..8513f1a0ce9d2 100644 --- 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) {