From 22ccf545f9d5124cfdf53e16b466c78ea5066191 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 27 Oct 2023 14:12:08 +0200 Subject: [PATCH] Dark mode: Cards (#2318) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- scss/_variables.scss | 6 +- site/content/docs/5.3/components/card.md | 4 +- site/content/docs/5.3/content/figures.md | 4 +- site/content/docs/5.3/content/images.md | 12 +- site/content/docs/5.3/dark-mode.md | 327 +++++++++++++++++- .../docs/5.3/examples/cards-rtl/index.html | 154 +-------- .../docs/5.3/examples/cards/index.html | 154 +-------- .../docs/5.3/examples/masonry/index.html | 2 +- site/content/docs/5.3/layout/columns.md | 2 +- site/content/docs/5.3/utilities/borders.md | 36 +- site/content/docs/5.3/utilities/object-fit.md | 20 +- site/layouts/shortcodes/card.html | 12 +- site/layouts/shortcodes/placeholder.html | 20 +- 13 files changed, 405 insertions(+), 348 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 51e95c375e..1a6a355697 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1710,15 +1710,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/components/card.md b/site/content/docs/5.3/components/card.md index e9dee949ad..04e59e888b 100644 --- a/site/content/docs/5.3/components/card.md +++ b/site/content/docs/5.3/components/card.md @@ -302,7 +302,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components {{< example >}}
-
+
  • Active @@ -325,7 +325,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components {{< example >}}
    -
    +
    • Active diff --git a/site/content/docs/5.3/content/figures.md b/site/content/docs/5.3/content/figures.md index ee8ccfebac..036b17e795 100644 --- a/site/content/docs/5.3/content/figures.md +++ b/site/content/docs/5.3/content/figures.md @@ -14,7 +14,7 @@ Use the included `.figure`, `.figure-img` and `.figure-caption` classes to provi {{< example >}}
      - {{< placeholder width="400" height="300" class="figure-img img-fluid" >}} + {{< placeholder width="400" height="300" class="figure-img img-fluid" color="#999" >}}
      A caption for the above image.
      {{< /example >}} @@ -23,7 +23,7 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut {{< example >}}
      - {{< placeholder width="400" height="300" class="figure-img img-fluid" >}} + {{< placeholder width="400" height="300" class="figure-img img-fluid" color="#999" >}}
      A caption for the above image.
      {{< /example >}} diff --git a/site/content/docs/5.3/content/images.md b/site/content/docs/5.3/content/images.md index a97f0c57ef..fd12d66bb1 100644 --- a/site/content/docs/5.3/content/images.md +++ b/site/content/docs/5.3/content/images.md @@ -13,7 +13,7 @@ toc: true Images in Boosted are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent width. {{< example >}} -{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}} +{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" color="#999" >}} {{< /example >}} ## Image thumbnails @@ -21,7 +21,7 @@ Images in Boosted are made responsive with `.img-fluid`. This applies `max-width In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a 2px border appearance. {{< example >}} -{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a gray border around it" >}} +{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a gray border around it" color="#999" >}} {{< /example >}} ## Aligning images @@ -29,18 +29,18 @@ In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >} Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}). {{< example >}} -{{< placeholder width="200" height="200" class="float-start" >}} -{{< placeholder width="200" height="200" class="float-end" >}} +{{< placeholder width="200" height="200" class="float-start" color="#999" >}} +{{< placeholder width="200" height="200" class="float-end" color="#999" >}} {{< /example >}} {{< example >}} -{{< placeholder width="200" height="200" class="mx-auto d-block" >}} +{{< placeholder width="200" height="200" class="mx-auto d-block" color="#999" >}} {{< /example >}} {{< example >}}
      - {{< placeholder width="200" height="200" >}} + {{< placeholder width="200" height="200" color="#999" >}}
      {{< /example >}} diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index bfb1e03bb1..01d075ab80 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

    @@ -1523,7 +1840,7 @@ sitemap_exclude: true
    Placeholder - + @@ -1554,7 +1871,7 @@ sitemap_exclude: true
    Placeholder - + @@ -1585,7 +1902,7 @@ sitemap_exclude: true
    Placeholder - + @@ -1616,7 +1933,7 @@ sitemap_exclude: true
    Placeholder - + @@ -1647,7 +1964,7 @@ sitemap_exclude: true
    Placeholder - + diff --git a/site/content/docs/5.3/examples/cards-rtl/index.html b/site/content/docs/5.3/examples/cards-rtl/index.html index 3e68338c0a..3383f5f981 100644 --- a/site/content/docs/5.3/examples/cards-rtl/index.html +++ b/site/content/docs/5.3/examples/cards-rtl/index.html @@ -20,185 +20,55 @@

    أمثلة على البطاقة

    -
    -

    بطاقات ممتلئة باللون الأسود

    -
    - {{< card rtl=true >}} + {{< card rtl=true borders=true >}}
    - {{< card rtl=true metadata=true >}} + {{< card rtl=true borders=true metadata=true >}}
    - {{< card rtl=true caption=true >}} + {{< card rtl=true borders=true caption=true >}}
    - {{< card rtl=true caption=true metadata="true" >}} + {{< card rtl=true borders=true caption=true metadata=true >}}
    - {{< card rtl=true caption=true buttons="true" >}} + {{< card rtl=true borders=true caption=true buttons=true >}}
    - {{< card rtl=true caption=true action="true" >}} + {{< card rtl=true borders=true caption=true action=true >}}
    - -
    -

    بطاقات موضحة باللون الأبيض

    -
    - {{< card rtl=true borders=true background="body" >}} -
    - -
    - {{< card rtl=true borders=true background="body" metadata=true >}} -
    - -
    - {{< card rtl=true borders=true background="body" caption=true >}} + {{< card rtl=true open=true >}}
    - {{< card rtl=true borders=true background="body" caption=true metadata=true >}} + {{< card rtl=true open=true metadata=true >}}
    - {{< card rtl=true borders=true background="body" caption=true buttons=true >}} + {{< card rtl=true open=true caption=true >}}
    - {{< card rtl=true borders=true background="body" caption=true action=true >}} + {{< card rtl=true open=true caption=true metadata=true >}}
    -
    - -
    -

    بطاقات بيضاء

    -
    -
    - {{< card rtl=true background="body" open=true >}} + {{< card rtl=true open=true caption=true buttons=true >}}
    - {{< card rtl=true background="body" open=true metadata=true >}} -
    - -
    - {{< card rtl=true background="body" open=true caption=true >}} -
    - -
    - {{< card rtl=true background="body" open=true caption=true metadata=true >}} -
    - -
    - {{< card rtl=true background="body" open=true caption=true buttons=true >}} -
    - -
    - {{< card rtl=true background="body" open=true caption=true action=true >}} -
    -
    -
    - -
    -
    -
    -

    بطاقات مملوءة باللون الأبيض

    -
    -
    -
    - {{< card rtl=true background="body" >}} -
    - -
    - {{< card rtl=true background="body" metadata=true >}} -
    - -
    - {{< card rtl=true background="body" caption=true >}} -
    - -
    - {{< card rtl=true background="body" caption=true metadata=true >}} -
    - -
    - {{< card rtl=true background="body" caption=true buttons=true >}} -
    - -
    - {{< card rtl=true background="body" caption=true action=true >}} -
    -
    - - -
    -

    بطاقات موضحة باللون الأسود

    -
    -
    -
    - {{< card rtl=true borders=true >}} -
    - -
    - {{< card rtl=true borders=true metadata=true >}} -
    - -
    - {{< card rtl=true borders=true caption=true >}} -
    - -
    - {{< card rtl=true borders=true caption=true metadata=true >}} -
    - -
    - {{< card rtl=true borders=true caption=true buttons=true >}} -
    - -
    - {{< card rtl=true borders=true caption=true action=true >}} -
    -
    - - -
    -

    بطاقات على الأسود

    -
    -
    -
    - {{< card rtl=true open=true >}} -
    - -
    - {{< card rtl=true open=true metadata=true >}} -
    - -
    - {{< card rtl=true open=true caption=true >}} -
    - -
    - {{< card rtl=true open=true caption=true metadata=true >}} -
    - -
    - {{< card rtl=true open=true caption=true buttons=true >}} -
    - -
    - {{< card rtl=true open=true caption=true action=true >}} -
    + {{< card rtl=true open=true caption=true action=true >}}
    diff --git a/site/content/docs/5.3/examples/cards/index.html b/site/content/docs/5.3/examples/cards/index.html index bf21db5737..833282ea6c 100644 --- a/site/content/docs/5.3/examples/cards/index.html +++ b/site/content/docs/5.3/examples/cards/index.html @@ -19,185 +19,55 @@

    Card examples

    -
    -

    Cards filled black

    -
    - {{< card >}} + {{< card borders=true >}}
    - {{< card metadata=true >}} + {{< card borders=true metadata=true >}}
    - {{< card caption=true >}} + {{< card borders=true caption=true >}}
    - {{< card caption=true metadata=true >}} + {{< card borders=true caption=true metadata=true >}}
    - {{< card caption=true buttons=true >}} + {{< card borders=true caption=true buttons=true >}}
    - {{< card caption=true action=true >}} + {{< card borders=true caption=true action=true >}}
    - -
    -

    Cards outlined on white

    -
    - {{< card borders=true background="body" >}} -
    - -
    - {{< card borders=true background="body" metadata=true >}} -
    - -
    - {{< card borders=true background="body" caption=true >}} + {{< card open=true >}}
    - {{< card borders=true background="body" caption=true metadata=true >}} + {{< card open=true metadata=true >}}
    - {{< card borders=true background="body" caption=true buttons=true >}} + {{< card open=true caption=true >}}
    - {{< card borders=true background="body" caption=true action=true >}} + {{< card open=true caption=true metadata=true >}}
    -
    - -
    -

    Cards on white

    -
    -
    - {{< card background="body" open=true >}} + {{< card open=true caption=true buttons=true >}}
    - {{< card background="body" open=true metadata=true >}} -
    - -
    - {{< card background="body" open=true caption=true >}} -
    - -
    - {{< card background="body" open=true caption=true metadata=true >}} -
    - -
    - {{< card background="body" open=true caption=true buttons=true >}} -
    - -
    - {{< card background="body" open=true caption=true action=true >}} -
    -
    -
    - -
    -
    -
    -

    Cards filled white

    -
    -
    -
    - {{< card background="body" >}} -
    - -
    - {{< card background="body" metadata=true >}} -
    - -
    - {{< card background="body" caption=true >}} -
    - -
    - {{< card background="body" caption=true metadata=true >}} -
    - -
    - {{< card background="body" caption=true buttons=true >}} -
    - -
    - {{< card background="body" caption=true action=true >}} -
    -
    - - -
    -

    Cards outlined on black

    -
    -
    -
    - {{< card borders=true >}} -
    - -
    - {{< card borders=true metadata=true >}} -
    - -
    - {{< card borders=true caption=true >}} -
    - -
    - {{< card borders=true caption=true metadata=true >}} -
    - -
    - {{< card borders=true caption=true buttons=true >}} -
    - -
    - {{< card borders=true caption=true action=true >}} -
    -
    - - -
    -

    Cards on black

    -
    -
    -
    - {{< card open=true >}} -
    - -
    - {{< card open=true metadata=true >}} -
    - -
    - {{< card open=true caption=true >}} -
    - -
    - {{< card open=true caption=true metadata=true >}} -
    - -
    - {{< card open=true caption=true buttons=true >}} -
    - -
    - {{< card open=true caption=true action=true >}} -
    + {{< card open=true caption=true action=true >}}
    diff --git a/site/content/docs/5.3/examples/masonry/index.html b/site/content/docs/5.3/examples/masonry/index.html index de4f7cc098..8d4e5d393c 100644 --- a/site/content/docs/5.3/examples/masonry/index.html +++ b/site/content/docs/5.3/examples/masonry/index.html @@ -79,7 +79,7 @@
    Card title
    - {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}} + {{< placeholder width="100%" height="260" class="card-img" text="Card image" color="#999" >}}
    diff --git a/site/content/docs/5.3/layout/columns.md b/site/content/docs/5.3/layout/columns.md index 8eb1151ad5..6b76e1a726 100644 --- a/site/content/docs/5.3/layout/columns.md +++ b/site/content/docs/5.3/layout/columns.md @@ -319,7 +319,7 @@ The classes can be used together with utilities to create responsive floated ima {{< example >}}
    - {{< placeholder width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" text="Responsive floated image" >}} + {{< placeholder width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" text="Responsive floated image" color="#999" >}}

    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image. diff --git a/site/content/docs/5.3/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md index 8c7afff098..8d874ce442 100644 --- a/site/content/docs/5.3/utilities/borders.md +++ b/site/content/docs/5.3/utilities/borders.md @@ -151,13 +151,13 @@ These border variants with **a radius CSS class different than `.rounded-circle` {{< /design-callout-alert >}} {{< example >}} -{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}} -{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}} +{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" color="#999" >}} +{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" color="#999" >}} {{< /example >}} ### Sizes @@ -171,20 +171,20 @@ These border variants with **a size CSS class different than `.rounded-0`** shou {{< /design-callout-alert >}} {{< example class="bd-example-rounded-utils" >}} -{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}} +{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" color="#999" >}} {{< /example >}} {{< example class="bd-example-rounded-utils" >}} -{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" >}} -{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" >}} -{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" >}} +{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" color="#999" >}} {{< /example >}} ## Dividers diff --git a/site/content/docs/5.3/utilities/object-fit.md b/site/content/docs/5.3/utilities/object-fit.md index 2cece77df0..b306f5e209 100644 --- a/site/content/docs/5.3/utilities/object-fit.md +++ b/site/content/docs/5.3/utilities/object-fit.md @@ -25,11 +25,11 @@ Classes for the value of `object-fit` are named using the format `.object-fit-{v Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element): {{< example class="d-flex overflow-auto" >}} -{{< placeholder width="140" height="120" class="object-fit-contain border" text="Object fit contain" markup="img" color="#666" background="#ddd" >}} -{{< placeholder width="140" height="120" class="object-fit-cover border" text="Object fit cover" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="120" class="object-fit-fill border" text="Object fit fill" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="120" class="object-fit-scale border" text="Object fit scale down" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="120" class="object-fit-none border" text="Object fit none" markup="img" color="666" background="#ddd" >}} +{{< placeholder width="140" height="120" class="object-fit-contain border" text="Object fit contain" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="120" class="object-fit-cover border" text="Object fit cover" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="120" class="object-fit-fill border" text="Object fit fill" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="120" class="object-fit-scale border" text="Object fit scale down" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="120" class="object-fit-none border" text="Object fit none" markup="img" color="#333" background="#bbb" >}} {{< /example >}} ## Responsive @@ -37,11 +37,11 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need. {{< example class="d-flex overflow-auto" >}} -{{< placeholder width="140" height="80" class="object-fit-sm-contain border" text="Contain on sm" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="80" class="object-fit-md-contain border" text="Contain on md" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="80" class="object-fit-lg-contain border" text="Contain on lg" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="80" class="object-fit-xl-contain border" text="Contain on xl" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="80" class="object-fit-xxl-contain border" text="Contain on xxl" markup="img" color="666" background="#ddd" >}} +{{< placeholder width="140" height="80" class="object-fit-sm-contain border" text="Contain on sm" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="80" class="object-fit-md-contain border" text="Contain on md" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="80" class="object-fit-lg-contain border" text="Contain on lg" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="80" class="object-fit-xl-contain border" text="Contain on xl" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="80" class="object-fit-xxl-contain border" text="Contain on xxl" markup="img" color="#333" background="#bbb" >}} {{< /example >}} ## Video diff --git a/site/layouts/shortcodes/card.html b/site/layouts/shortcodes/card.html index c95af1aedd..a2ebcec9d2 100644 --- a/site/layouts/shortcodes/card.html +++ b/site/layouts/shortcodes/card.html @@ -3,7 +3,6 @@ `args` are all optional and can be one of the following: * action: Display action button - default = false - * background: Define the card background - default = "dark" * borders: Add some borders to the card - default = false * buttons: Display share and favorite buttons - default = false * caption: Display caption - default = false @@ -13,7 +12,6 @@ */ -}} {{- $action := .Get "action" | default false -}} -{{- $background := .Get "background" | default "dark" -}} {{- $borders := .Get "borders" | default false -}} {{- $buttons := .Get "buttons" | default false -}} {{- $caption := .Get "caption" | default false -}} @@ -21,20 +19,20 @@ {{- $open := .Get "open" | default false -}} {{- $rtl := .Get "rtl" | default false -}} -

    +
    - - -
    +

    {{ if $rtl }}عنوان{{ else }}Title{{ end }}

    {{- if $caption -}}

    {{ if $rtl }}شرح{{ else }}Caption{{ end }}

    {{- end -}} {{- if $metadata -}} -

    {{ if $rtl }}البيانات الوصفية{{ else }}Meta data{{ end }}

    +

    {{ if $rtl }}البيانات الوصفية{{ else }}Meta data{{ end }}

    {{- end -}} {{- if $buttons -}}
      diff --git a/site/layouts/shortcodes/placeholder.html b/site/layouts/shortcodes/placeholder.html index a62878f7aa..41eb8a9a3b 100644 --- a/site/layouts/shortcodes/placeholder.html +++ b/site/layouts/shortcodes/placeholder.html @@ -5,16 +5,16 @@ * title: Used in the SVG `title` tag - default: "Placeholder" * text: The text to show in the image - default: "width x height" * class: Class to add to the `svg` or `img` - default: "bd-placeholder-img" - * color: The text color (foreground) - default: "#dee2e6" - * background: The background color - default: "#868e96" + * color: The text color (foreground) - default: "var(--bs-border-color-translucent)" + * background: The background color - default: "var(--bs-secondary-bg)" * width: default: "100%" * height: default: "180px" * markup: If it should render `svg` or `img` tags - default: "svg" */ -}} {{- $grays := $.Site.Data.grays -}} -{{- $default_color := (index $grays 5).hex -}} -{{- $default_background := (index $grays 3).hex -}} +{{- $default_color := "var(--bs-border-color-translucent)" -}} +{{- $default_background := "var(--bs-secondary-bg)" -}} {{- $title := .Get "title" | default "Placeholder" -}} {{- $class := .Get "class" -}} @@ -25,26 +25,28 @@ {{- $text := .Get "text" | default (printf "%sx%s" $width $height) -}} {{- $show_title := not (eq $title "false") -}} -{{- $show_text := not (or (eq $text "false") (eq $text "icon")) -}} -{{- $show_icon := eq $text "icon" -}} +{{- $show_text := not (or (eq $text "false") (eq $text "icon")) -}} +{{- $show_icon := eq $text "icon" -}} {{- $markup := .Get "markup" | default "svg" -}} {{- if eq $markup "img" -}} - {{ $title }} : {{ $text }} + %3C/svg%3E"> {{- else -}}