Skip to content

Commit

Permalink
feat(cards): Orange branded 🎉
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed Jul 20, 2020
1 parent 5b3b9bd commit fde26b4
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 17 deletions.
17 changes: 12 additions & 5 deletions scss/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,11 @@
margin-bottom: $card-title-spacer-y;
}

// Boosted mod: prevent unwanted margin when nothing follows…

This comment has been minimized.

Sign in to view

Copy link
@ffoodd

ffoodd Jul 20, 2020

Author Contributor

Could be better with nesting and // End mod…
.card-title:only-child {
margin-bottom: 0;
}

.card-subtitle {
margin-top: -$card-title-spacer-y / 2;
margin-bottom: 0;
Expand Down Expand Up @@ -83,18 +88,20 @@
font-weight: $font-weight-bold; // Boosted mod
color: $card-cap-color;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
border-bottom: $card-border-width solid $card-cap-bg; // Boosted mod

&:first-child {
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
}
}

.card-footer {
padding: $card-cap-padding-y $card-cap-padding-x;
color: $card-cap-bg; // Boosted mod
background-color: $card-cap-color; // Boosted mod
border-top: $card-border-width solid $card-border-color;
// Boosted mod
padding: 0 $card-cap-padding-x $card-cap-padding-y;
font-weight: $font-weight-bold;
color: $card-footer-color;
background-color: $card-cap-color;
// End mod

&:last-child {
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
Expand Down
7 changes: 5 additions & 2 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1034,7 +1034,7 @@ $card-spacer-x: $spacer !default;
$card-title-spacer-y: $spacer / 2 !default;
$card-border-width: $border-width !default;
$card-border-radius: $border-radius !default;
$card-border-color: $black !default;
$card-border-color: $gray-500 !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y / 2 !default;
$card-cap-padding-x: $card-spacer-x !default;
Expand All @@ -1048,6 +1048,9 @@ $card-img-overlay-padding: $spacer !default;

$card-group-margin: $grid-gutter-width / 2 !default;

// Boosted mod
$card-footer-color: $gray-700 !default;
// End mod

// Tooltips

Expand Down Expand Up @@ -1218,7 +1221,7 @@ $progress-height-xs: $spacer / 4 !default;

$list-group-color: null !default;
$list-group-bg: $white !default;
$list-group-border-color: $black !default;
$list-group-border-color: $gray-500 !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;

Expand Down
29 changes: 19 additions & 10 deletions site/content/docs/5.0/components/card.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
<div class="card-footer">
2 days ago
</div>
</div>
Expand Down Expand Up @@ -376,7 +376,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.

{{< example >}}
<div class="card bg-dark text-white">
<div class="card">
{{< placeholder width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" >}}
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
Expand Down Expand Up @@ -422,7 +422,7 @@ Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to chan
{{< example >}}
{{< card.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="card bg-{{ .name }} mb-3" style="max-width: 18rem;">
<div class="card bg-{{ .name }} border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">{{ .name | title }} card title</h5>
Expand Down Expand Up @@ -451,7 +451,16 @@ Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
{{- end -}}
{{- end }}
<!-- Boosted mod -->
<div class="card border-0 mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Borderless card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<!-- End mod -->
{{< /card.inline >}}
{{< /example >}}

Expand Down Expand Up @@ -518,7 +527,7 @@ When using card groups with footers, their content will automatically line up.
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small>Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
Expand All @@ -528,7 +537,7 @@ When using card groups with footers, their content will automatically line up.
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small>Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
Expand All @@ -538,7 +547,7 @@ When using card groups with footers, their content will automatically line up.
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small>Last updated 3 mins ago</small>
</div>
</div>
</div>
Expand Down Expand Up @@ -687,7 +696,7 @@ Just like with card groups, card footers will automatically line up.
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small>Last updated 3 mins ago</small>
</div>
</div>
</div>
Expand All @@ -699,7 +708,7 @@ Just like with card groups, card footers will automatically line up.
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small>Last updated 3 mins ago</small>
</div>
</div>
</div>
Expand All @@ -711,7 +720,7 @@ Just like with card groups, card footers will automatically line up.
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small>Last updated 3 mins ago</small>
</div>
</div>
</div>
Expand Down

0 comments on commit fde26b4

Please sign in to comment.