Skip to content

[Card]: refactor spacing #15599

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simeonoff merged 11 commits into from
Mar 27, 2025
Merged

[Card]: refactor spacing #15599

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b83ebdd
refactor(card): Change spacings according to the new design
desig9stein Mar 25, 2025
7c54e9b
refactor(card): update the card sample
desig9stein Mar 25, 2025
2fee02b
refactor(card): fix sample rtl
desig9stein Mar 25, 2025
985aecc
refactor(card): fix thumbnail position to match webC
desig9stein Mar 26, 2025
72fd2e9
refactor(card): update the sample
desig9stein Mar 26, 2025
1828b7a
refactor(card): update the sample
desig9stein Mar 26, 2025
8d45a87
refactor(card): update the sample
desig9stein Mar 26, 2025
6e99e97
fix(card): fix fluent padding
desig9stein Mar 26, 2025
3565a54
fix(card): change where the padding is added for indigo and bootstrap
desig9stein Mar 27, 2025
9590419
Merge branch 'master' into mpopov/refactoring/card/issue-15432
desig9stein Mar 27, 2025
e8c70ea
Merge branch 'master' into mpopov/refactoring/card/issue-15432
simeonoff Mar 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 12 additions & 18 deletions projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,6 @@

$card-heading-padding: rem(16px, 16px);
$card-content-padding: rem(16px);
$card-actions-padding: rem(8px);

$card-tgroup-margin: 0 em(16px);

Expand Down Expand Up @@ -159,7 +158,7 @@
%igx-card-header {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
align-items: center;
width: 100%;
padding: $card-heading-padding;
color: var-get($theme, 'header-text-color');
Expand All @@ -168,10 +167,6 @@
display: block;
padding: 0;
}

@if $variant == 'fluent' {
padding: rem(16px) rem(8px);
}
}

%igx-card-header--vertical {
Expand All @@ -195,7 +190,6 @@
}

%igx-card-header-thumbnail {
align-self: flex-start;
margin-inline-end: rem(16px);

@if $variant == 'indigo' {
Expand Down Expand Up @@ -259,6 +253,14 @@
}

%igx-card-actions {
$card-actions-padding: map.get((
'material': rem(8px) rem(16px),
'fluent': rem(8px) rem(16px),
'bootstrap': rem(16px),
'indigo': rem(16px),
), $variant);


display: flex;
flex-flow: row wrap;
justify-content: space-between;
Expand All @@ -282,21 +284,13 @@
}

@if $variant == 'bootstrap' {
%igx-card-content {
@if $variant == 'bootstrap' {
padding-block: rem(16px) rem(24px);
padding-inline: rem(24px);
}
}

%igx-card-actions {
padding: rem(16px);
%igx-card-content + %igx-card-actions {
padding-block-start: rem(24px);
}
}

@if $variant == 'indigo' {
%igx-card-content,
%igx-card-actions {
%igx-card-content {
padding: rem(16px);
}

Expand Down
200 changes: 113 additions & 87 deletions src/app/card/card.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
<h2 class="sample-title">Angular Card</h2>

<!--New York City Card Begins-->
<article class="card">
<igx-card class="my-cool-card">
<igx-card class="my-cool-card">
@for(section of sectionOrder; track section) {
<ng-container>
@if(section === 'media' && !properties.hideMedia) {
Expand Down Expand Up @@ -33,27 +32,27 @@ <h2 igxCardHeaderSubtitle>{{ cards[0].subtitle }}</h2>
@if(section === 'actions' && !properties.hideActions) {
<igx-card-actions>
<button igxButton igxRipple>Read More</button>

@for(icon of cards[0].icons; track icon) {
<span
igxIconButton="flat"
igxRipple
[igxRippleCentered]="true"
>
<igx-icon>{{icon}}</igx-icon>
</span>
<span
igxIconButton="flat"
igxRipple
[igxRippleCentered]="true"
>
<igx-icon>{{icon}}</igx-icon>
</span>
}
</igx-card-actions>
}
</ng-container>
}
</igx-card>
</article>
<!--New York City Card End-->

<article class="card">
<igx-card [horizontal]="true">
<igx-card [horizontal]="true">
@if(!properties.hideActions) {
<igx-card-actions layout="justify">

<igx-card-actions [layout]="properties.justifyActions ? 'justify' : 'cantHandleNull'">
@for(icon of cards[1].icons; track icon) {
<button
igxIconButton="flat"
Expand Down Expand Up @@ -95,28 +94,28 @@ <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
</igx-card-media>
}
</igx-card>
</article>

<article class="card">
<igx-card>
<igx-card-header>
@if(!properties.hideHeader && !hideTitle) {
<h5 igxCardHeaderTitle>{{cards[1].title}}</h5>
}
@if(!properties.hideHeader && !hideSubtitle) {
<h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
}
@if(!properties.hideMedia) {
<igx-card-media width="62px" height="62px">
<img [src]="cards[1].imageUrl" />
</igx-card-media>
}
</igx-card-header>
<igx-card>
@if(!properties.hideHeader) {
<igx-card-header>
@if(!hideTitle) {
<h5 igxCardHeaderTitle>{{cards[1].title}}</h5>
}
@if(!hideSubtitle) {
<h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
}
@if(!properties.hideMedia) {
<igx-card-media width="62px" height="62px">
<img [src]="cards[1].imageUrl" />
</igx-card-media>
}
</igx-card-header>
}

<igx-divider type="dashed" [middle]="true"></igx-divider>

@if(!properties.hideActions) {
<igx-card-actions layout="justify">
<igx-card-actions [layout]="properties.justifyActions? 'justify': 'cantHandleNull'">
@for(icon of cards[1].icons; track icon) {
<button
igxIconButton="flat"
Expand All @@ -129,45 +128,56 @@ <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
</igx-card-actions>
}
</igx-card>
</article>

<!--Melo Di Card Begins-->
<article class="card">
<igx-card [horizontal]="true">
<igx-card [horizontal]="true">
<div
style="
display: flex;
flex-direction: column;
flex: 1 1 auto;
"
>
<igx-card-header>
<igx-avatar [src]="cards[2].avatarUrl"></igx-avatar>
<h3 igxCardHeaderTitle>{{ cards[2].title }}</h3>
<h5 igxCardHeaderSubtitle>{{ cards[2].subtitle }}</h5>
</igx-card-header>

<igx-card-actions [vertical]="false">
@for(button of cards[2].buttons; track button){
<button igxButton igxRipple>{{ button }}</button>
}
</igx-card-actions>
@if(!properties.hideHeader) {
<igx-card-header>
@if(!hideThumbnail) {
<igx-avatar [src]="cards[2].avatarUrl"></igx-avatar>
}

@if(!hideTitle) {
<h3 igxCardHeaderTitle>{{ cards[2].title }}</h3>
}

@if(!hideSubtitle) {
<h5 igxCardHeaderSubtitle>{{ cards[2].subtitle }}</h5>
}
</igx-card-header>
}

@if(!properties.hideActions) {
<igx-card-actions [vertical]="false">
@for(button of cards[2].buttons; track button){
<button igxButton igxRipple>{{ button }}</button>
}
</igx-card-actions>
}
</div>

<igx-card-media width="86px" height="132px">
@if(!properties.hideMedia) {
<igx-card-media width="86px">
<img [src]="cards[2].imageUrl" />
</igx-card-media>
}
</igx-card>
</article>
<!--Melo Di Card Ends-->
</article>

<article class="wc-cards">
<h2 class="sample-title">WC Card</h2>

<!--New York City Card Begins-->
<article class="card">
<igc-card>
<igc-card>
@for(section of sectionOrder; track section) {
<ng-container>
@if(section === 'media' && !properties.hideMedia) {
Expand Down Expand Up @@ -217,11 +227,9 @@ <h2 class="sample-title">WC Card</h2>
</ng-container>
}
</igc-card>
</article>
<!--New York City Card End-->

<article class="card">
<igc-card style="flex-direction: row">
<igc-card style="flex-direction: row">
@if(!properties.hideActions) {
<igc-card-actions orientation="vertical">
@for(icon of cards[1].icons; track icon) {
Expand Down Expand Up @@ -256,30 +264,38 @@ <h2 class="sample-title">WC Card</h2>
</igc-card-media>
}
</igc-card>
</article>

<article class="card">
<igc-card>
<igc-card-header style="flex-direction: row">
@if(!properties.hideMedia) {
<igc-card-media
slot="thumbnail"
style="width: 62px; height: 62px"
>
<img [src]="cards[1].imageUrl" />
</igc-card-media>
}
@if(!properties.hideHeader) { @if(!hideTitle) {
<span slot="title">{{cards[1].title}}</span>
}
@if(!hideSubtitle) {
<span slot="subtitle">{{cards[1].subtitle}}</span>

<igc-card>
<div style="
display: flex;
">
@if(!properties.hideHeader) {
<igc-card-header>
@if(!properties.hideMedia) {
<div slot="thumbnail">
<igc-card-media
slot="thumbnail"
style="width: 62px; height: 62px"
>
<img [src]="cards[1].imageUrl" />
</igc-card-media>
</div>
}

@if(!properties.hideHeader) { @if(!hideTitle) {
<span slot="title">{{cards[1].title}}</span>
}
@if(!hideSubtitle) {
<span slot="subtitle">{{cards[1].subtitle}}</span>
}
}
</igc-card-header>
}
}
</igc-card-header>
</div>


@if(!properties.hideActions) {
<igc-card-actions>
<igc-card-actions>
@for(icon of cards[1].icons; track icon) {
<button
igxIconButton="flat"
Expand All @@ -292,39 +308,49 @@ <h2 class="sample-title">WC Card</h2>
</igc-card-actions>
}
</igc-card>
</article>

<!--Melo Di Card Begins-->
<article class="card">
<igc-card style="flex-direction: row">
<igc-card style="flex-direction: row">
<div
style="
display: flex;
flex-direction: column;
flex: 1 1 auto;
"
>
<igc-card-header>
<igc-avatar
slot="thumbnail"
[src]="cards[2].avatarUrl"
></igc-avatar>
<span slot="title">{{ cards[2].title }}</span>
<span slot="subtitle">{{ cards[2].subtitle }}</span>
</igc-card-header>
@if(!properties.hideHeader) {
<igc-card-header>
@if(!hideThumbnail) {
<igc-avatar
slot="thumbnail"
[src]="cards[2].avatarUrl"
></igc-avatar>
}
@if(!hideTitle) {
<span slot="title">{{ cards[2].title }}</span>
}

<igc-card-actions>
@if(!hideSubtitle) {
<span slot="subtitle">{{ cards[2].subtitle }}</span>
}
</igc-card-header>
}

@if(!properties.hideActions) {
<igc-card-actions>
@for(button of cards[2].buttons; track button){
<igc-button variant="flat">{{ button }}</igc-button>
}
</igc-card-actions>
}
</div>

<igc-card-media style="width: 86px; height: 132px">
<img [src]="cards[2].imageUrl" />
</igc-card-media>
@if(!properties.hideMedia) {
<igc-card-media style="width: 86px">
<img [src]="cards[2].imageUrl" />
</igc-card-media>
}
</igc-card>
</article>
<!--Melo Di Card Ends-->
</article>

Expand Down
Loading
Loading