Skip to content

Commit

Permalink
fix(styles): card updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikerodonnell89
mikerodonnell89 committed Oct 27, 2023
1 parent 7b9fc95 commit 4e48c78
Show file tree
Hide file tree
Showing 5 changed files with 640 additions and 90 deletions.
17 changes: 13 additions & 4 deletions packages/styles/src/card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,8 +193,6 @@ $fd-card-header-outline-offset: 0.0625rem !default;
@include fd-flex() {
align-items: flex-end;
}

margin-top: 0.25rem;
}

&__subtitle {
Expand All @@ -212,6 +210,7 @@ $fd-card-header-outline-offset: 0.0625rem !default;
text-align: right;
margin: var(--fdCard_Counter_Margin);
white-space: nowrap;
color: var(--sapTile_TitleTextColor);

@include fd-rtl() {
margin: var(--fdCard_Counter_Margin_RTL);
Expand Down Expand Up @@ -323,6 +322,10 @@ $fd-card-header-outline-offset: 0.0625rem !default;
overflow: hidden;
}

.#{$list} {
@include fd-set-paddings-x(0.125rem);
}

&:last-child {
border-bottom-left-radius: $fd-card-border-radius;
border-bottom-right-radius: $fd-card-border-radius;
Expand Down Expand Up @@ -388,6 +391,10 @@ $fd-card-header-outline-offset: 0.0625rem !default;
@include fd-reset();

padding-bottom: 0.5rem;

h3 {
font-size: var(--sapFontSize);
}
}

&__content-group {
Expand All @@ -411,8 +418,6 @@ $fd-card-header-outline-offset: 0.0625rem !default;
}

& > * {
margin-bottom: 0.25rem;

&:last-child {
margin-bottom: 0;
}
Expand Down Expand Up @@ -441,6 +446,10 @@ $fd-card-header-outline-offset: 0.0625rem !default;
}

&--table {
.#{$block}__header {
padding-bottom: 0.5rem;
}

@include fd-compact-or-condensed() {
.#{$block}__content {
padding-bottom: 0.5rem;
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/stories/Components/card/card.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,4 +121,4 @@ Component (class) | Description
`
}
}
};
};
38 changes: 19 additions & 19 deletions packages/styles/stories/Components/card/object-card.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,38 +19,38 @@
<div class="fd-card__content" role="group" aria-label="Card Content">
<div class="fd-card__content-container">
<div class="fd-card__content-section">
<div class="fd-card__content-title-container">Group Title 1</div>
<div class="fd-card__content-title-container"><h3>Group Title 1</h3></div>
<div class="fd-card__content-group">
<div class="fd-card__content-group-text">
<span>Label</span>
<span>Text</span>
<span>Label:</span>
<span class="fd-link">Text</span>
</div>
</div>
<div class="fd-card__content-group">
<div class="fd-card__content-group-text">
<span>Label</span>
<span>Text</span>
<span>Label:</span>
<span class="fd-link">Text</span>
</div>
</div>
<div class="fd-card__content-group">
<div class="fd-card__content-group-text">
<span>Label</span>
<span>Text</span>
<span>Label:</span>
<span class="fd-link">Text</span>
</div>
</div>
</div>
<div class="fd-card__content-section">
<div class="fd-card__content-title-container">Group Title 2</div>
<div class="fd-card__content-group">
<div class="fd-card__content-group-text">
<span>Label</span>
<span>Text</span>
<span>Label:</span>
<span class="fd-link">Text</span>
</div>
</div>
<div class="fd-card__content-group">
<div class="fd-card__content-group-text">
<span>Label</span>
<span>Text</span>
<span>Label:</span>
<span class="fd-link">Text</span>
</div>
</div>
<div class="fd-card__content-group">
Expand Down Expand Up @@ -97,14 +97,14 @@ <h3 style="margin: 0;">Group Title 1</h3>
</div>
<div class="fd-card__content-group">
<div class="fd-card__content-group-text">
<span>Label</span>
<span>Text</span>
<span>Label:</span>
<span class="fd-link">Text</span>
</div>
</div>
<div class="fd-card__content-group">
<div class="fd-card__content-group-text">
<span>Label</span>
<span>Text</span>
<span>Label:</span>
<span class="fd-link">Text</span>
</div>
</div>
</div>
Expand All @@ -122,14 +122,14 @@ <h3 style="margin: 0;">Group Title 2</h3>
</div>
<div class="fd-card__content-group">
<div class="fd-card__content-group-text">
<span>Label</span>
<span>Text</span>
<span>Label:</span>
<span class="fd-link">Text</span>
</div>
</div>
<div class="fd-card__content-group">
<div class="fd-card__content-group-text">
<span>Label</span>
<span>Text</span>
<span>Label:</span>
<span class="fd-link">Text</span>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions packages/styles/stories/Components/card/table-card.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<tr class="fd-table__row">
<th class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="kqqzPI">
<label class="fd-checkbox__label" for="kqqzPI"></label>
<label class="fd-checkbox__label" for="kqqzPI"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</th>
<th class="fd-table__cell" scope="col">Name</th>
<th class="fd-table__cell" scope="col">Status</th>
Expand All @@ -28,7 +28,7 @@
<tr class="fd-table__row">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="EWuzWh">
<label class="fd-checkbox__label" for="EWuzWh"></label>
<label class="fd-checkbox__label" for="EWuzWh"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</td>
<td class="fd-table__cell">Banana</td>
<td class="fd-table__cell">
Expand All @@ -45,7 +45,7 @@
<tr class="fd-table__row">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="19j0Sc">
<label class="fd-checkbox__label" for="19j0Sc"></label>
<label class="fd-checkbox__label" for="19j0Sc"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</td>
<td class="fd-table__cell">Pineapple</td>
<td class="fd-table__cell">
Expand All @@ -62,7 +62,7 @@
<tr class="fd-table__row">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="a7SfGX">
<label class="fd-checkbox__label" for="a7SfGX"></label>
<label class="fd-checkbox__label" for="a7SfGX"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</td>
<td class="fd-table__cell">Orange</td>
<td class="fd-table__cell">
Expand Down
Loading

0 comments on commit 4e48c78

Please sign in to comment.