From 8edb5dafe69be16d490c9e2be7c58247bc9c2fc4 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 17 Oct 2023 18:36:14 +0200 Subject: [PATCH] Add color mode on cards --- scss/_variables.scss | 6 +- site/content/docs/5.3/dark-mode.md | 317 +++++++++++++++++++++++++++++ 2 files changed, 320 insertions(+), 3 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 0773392750..59f71d6a04 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1709,15 +1709,15 @@ $card-box-shadow: null !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; $card-cap-padding-y: $card-spacer-bottom * .5 !default; // Boosted mod $card-cap-padding-x: $card-spacer-x !default; -$card-cap-bg: $black !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)` -$card-cap-color: $white !default; // Boosted mod: instead of `null` +$card-cap-bg: var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)` +$card-cap-color: var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `null` $card-cap-font-weight: $font-weight-bold !default; // Boosted mod $card-height: null !default; $card-color: null !default; $card-bg: var(--#{$prefix}body-bg) !default; $card-img-overlay-padding: $spacer !default; $card-group-margin: $grid-gutter-width * .5 !default; -$card-footer-color: $gray-700 !default; // Boosted mod +$card-footer-color: var(--#{$prefix}placeholder-color) !default; // Boosted mod // scss-docs-end card-variables // Accordion diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index bfb1e03bb1..56b00a82ca 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -860,6 +860,323 @@ sitemap_exclude: true
+### Card + +

No theme

+ +
+
+
+ Placeholder + + + + +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+
+
+
+
+
+ Placeholder + + + + +
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
+
+
+
+ Featured +
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+
+ Card link + Another link +
+
+ Featured +
+
+
+
+ +

Dark theme on container

+ +
+
+
+ Placeholder + + + + +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+
+
+
+
+
+ Placeholder + + + + +
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
+
+
+
+ Featured +
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+
+ Card link + Another link +
+
+ Featured +
+
+
+
+ +

Light theme on container

+ +
+
+
+ Placeholder + + + + +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+
+
+
+
+
+ Placeholder + + + + +
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
+
+
+
+ Featured +
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+
+ Card link + Another link +
+
+ Featured +
+
+
+
+ +

Dark theme on component

+ +
+
+
+ Placeholder + + + + +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+
+
+
+
+
+ Placeholder + + + + +
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
+
+
+
+ Featured +
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+
+ Card link + Another link +
+
+ Featured +
+
+
+
+ +

Light theme on component

+ +
+
+
+ Placeholder + + + + +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+
+
+
+
+
+ Placeholder + + + + +
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
+
+
+
+ Featured +
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+
+ Card link + Another link +
+
+ Featured +
+
+
+
+ ### Carousel

No theme