Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 30e11ca

Browse files
louismaximepitonjulien-deramond
louismaximepiton
and
julien-deramond
committedNov 27, 2023
Dark mode: Cards (#2318)
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
1 parent 4a87d8a commit 30e11ca

File tree

13 files changed

+405
-348
lines changed

13 files changed

+405
-348
lines changed
 

‎scss/_variables.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1710,15 +1710,15 @@ $card-box-shadow: null !default;
17101710
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
17111711
$card-cap-padding-y: $card-spacer-bottom * .5 !default; // Boosted mod
17121712
$card-cap-padding-x: $card-spacer-x !default;
1713-
$card-cap-bg: $black !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)`
1714-
$card-cap-color: $white !default; // Boosted mod: instead of `null`
1713+
$card-cap-bg: var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)`
1714+
$card-cap-color: var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `null`
17151715
$card-cap-font-weight: $font-weight-bold !default; // Boosted mod
17161716
$card-height: null !default;
17171717
$card-color: null !default;
17181718
$card-bg: var(--#{$prefix}body-bg) !default;
17191719
$card-img-overlay-padding: $spacer !default;
17201720
$card-group-margin: $grid-gutter-width * .5 !default;
1721-
$card-footer-color: $gray-700 !default; // Boosted mod
1721+
$card-footer-color: var(--#{$prefix}placeholder-color) !default; // Boosted mod
17221722
// scss-docs-end card-variables
17231723

17241724
// Accordion

‎site/content/docs/5.3/components/card.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components
302302

303303
{{< example >}}
304304
<div class="card text-center">
305-
<div class="card-header bg-white">
305+
<div class="card-header bg-body">
306306
<ul class="nav nav-tabs card-header-tabs">
307307
<li class="nav-item">
308308
<a class="nav-link active" aria-current="true" href="#">Active</a>
@@ -325,7 +325,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components
325325

326326
{{< example >}}
327327
<div class="card text-center">
328-
<div class="card-header bg-white">
328+
<div class="card-header bg-body">
329329
<ul class="nav nav-pills card-header-pills">
330330
<li class="nav-item">
331331
<a class="nav-link active" href="#">Active</a>

‎site/content/docs/5.3/content/figures.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Use the included `.figure`, `.figure-img` and `.figure-caption` classes to provi
1414

1515
{{< example >}}
1616
<figure class="figure">
17-
{{< placeholder width="400" height="300" class="figure-img img-fluid" >}}
17+
{{< placeholder width="400" height="300" class="figure-img img-fluid" color="#999" >}}
1818
<figcaption class="figure-caption">A caption for the above image.</figcaption>
1919
</figure>
2020
{{< /example >}}
@@ -23,7 +23,7 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
2323

2424
{{< example >}}
2525
<figure class="figure">
26-
{{< placeholder width="400" height="300" class="figure-img img-fluid" >}}
26+
{{< placeholder width="400" height="300" class="figure-img img-fluid" color="#999" >}}
2727
<figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
2828
</figure>
2929
{{< /example >}}

‎site/content/docs/5.3/content/images.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -13,34 +13,34 @@ toc: true
1313
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.
1414

1515
{{< example >}}
16-
{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
16+
{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" color="#999" >}}
1717
{{< /example >}}
1818

1919
## Image thumbnails
2020

2121
In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a 2px border appearance.
2222

2323
{{< example >}}
24-
{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a gray border around it" >}}
24+
{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a gray border around it" color="#999" >}}
2525
{{< /example >}}
2626

2727
## Aligning images
2828

2929
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" >}}).
3030

3131
{{< example >}}
32-
{{< placeholder width="200" height="200" class="float-start" >}}
33-
{{< placeholder width="200" height="200" class="float-end" >}}
32+
{{< placeholder width="200" height="200" class="float-start" color="#999" >}}
33+
{{< placeholder width="200" height="200" class="float-end" color="#999" >}}
3434
{{< /example >}}
3535

3636

3737
{{< example >}}
38-
{{< placeholder width="200" height="200" class="mx-auto d-block" >}}
38+
{{< placeholder width="200" height="200" class="mx-auto d-block" color="#999" >}}
3939
{{< /example >}}
4040

4141
{{< example >}}
4242
<div class="text-center">
43-
{{< placeholder width="200" height="200" >}}
43+
{{< placeholder width="200" height="200" color="#999" >}}
4444
</div>
4545
{{< /example >}}
4646

‎site/content/docs/5.3/dark-mode.md

+322-5
Large diffs are not rendered by default.

‎site/content/docs/5.3/examples/cards-rtl/index.html

+12-142
Original file line numberDiff line numberDiff line change
@@ -20,185 +20,55 @@ <h1 class="visually-hidden">أمثلة على البطاقة</h1>
2020
</svg>
2121

2222
<div class="container-xxl pt-5">
23-
<div class="row mx-0">
24-
<h2>بطاقات ممتلئة باللون الأسود</h2>
25-
</div>
2623
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
2724
<div class="col">
28-
{{< card rtl=true >}}
25+
{{< card rtl=true borders=true >}}
2926
</div>
3027

3128
<div class="col">
32-
{{< card rtl=true metadata=true >}}
29+
{{< card rtl=true borders=true metadata=true >}}
3330
</div>
3431

3532
<div class="col">
36-
{{< card rtl=true caption=true >}}
33+
{{< card rtl=true borders=true caption=true >}}
3734
</div>
3835

3936
<div class="col">
40-
{{< card rtl=true caption=true metadata="true" >}}
37+
{{< card rtl=true borders=true caption=true metadata=true >}}
4138
</div>
4239

4340
<div class="col">
44-
{{< card rtl=true caption=true buttons="true" >}}
41+
{{< card rtl=true borders=true caption=true buttons=true >}}
4542
</div>
4643

4744
<div class="col">
48-
{{< card rtl=true caption=true action="true" >}}
45+
{{< card rtl=true borders=true caption=true action=true >}}
4946
</div>
5047
</div>
5148

52-
53-
<div class="row mx-0 mt-4">
54-
<h2>بطاقات موضحة باللون الأبيض</h2>
55-
</div>
5649
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
5750
<div class="col">
58-
{{< card rtl=true borders=true background="body" >}}
59-
</div>
60-
61-
<div class="col">
62-
{{< card rtl=true borders=true background="body" metadata=true >}}
63-
</div>
64-
65-
<div class="col">
66-
{{< card rtl=true borders=true background="body" caption=true >}}
51+
{{< card rtl=true open=true >}}
6752
</div>
6853

6954
<div class="col">
70-
{{< card rtl=true borders=true background="body" caption=true metadata=true >}}
55+
{{< card rtl=true open=true metadata=true >}}
7156
</div>
7257

7358
<div class="col">
74-
{{< card rtl=true borders=true background="body" caption=true buttons=true >}}
59+
{{< card rtl=true open=true caption=true >}}
7560
</div>
7661

7762
<div class="col">
78-
{{< card rtl=true borders=true background="body" caption=true action=true >}}
63+
{{< card rtl=true open=true caption=true metadata=true >}}
7964
</div>
80-
</div>
81-
8265

83-
<div class="row mx-0 mt-4">
84-
<h2>بطاقات بيضاء</h2>
85-
</div>
86-
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
8766
<div class="col">
88-
{{< card rtl=true background="body" open=true >}}
67+
{{< card rtl=true open=true caption=true buttons=true >}}
8968
</div>
9069

9170
<div class="col">
92-
{{< card rtl=true background="body" open=true metadata=true >}}
93-
</div>
94-
95-
<div class="col">
96-
{{< card rtl=true background="body" open=true caption=true >}}
97-
</div>
98-
99-
<div class="col">
100-
{{< card rtl=true background="body" open=true caption=true metadata=true >}}
101-
</div>
102-
103-
<div class="col">
104-
{{< card rtl=true background="body" open=true caption=true buttons=true >}}
105-
</div>
106-
107-
<div class="col">
108-
{{< card rtl=true background="body" open=true caption=true action=true >}}
109-
</div>
110-
</div>
111-
</div>
112-
113-
<div class="bg-dark pt-5">
114-
<div class="container-xxl">
115-
<div class="row mx-0 mt-4">
116-
<h2>بطاقات مملوءة باللون الأبيض</h2>
117-
</div>
118-
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
119-
<div class="col">
120-
{{< card rtl=true background="body" >}}
121-
</div>
122-
123-
<div class="col">
124-
{{< card rtl=true background="body" metadata=true >}}
125-
</div>
126-
127-
<div class="col">
128-
{{< card rtl=true background="body" caption=true >}}
129-
</div>
130-
131-
<div class="col">
132-
{{< card rtl=true background="body" caption=true metadata=true >}}
133-
</div>
134-
135-
<div class="col">
136-
{{< card rtl=true background="body" caption=true buttons=true >}}
137-
</div>
138-
139-
<div class="col">
140-
{{< card rtl=true background="body" caption=true action=true >}}
141-
</div>
142-
</div>
143-
144-
145-
<div class="row mx-0 mt-4">
146-
<h2>بطاقات موضحة باللون الأسود</h2>
147-
</div>
148-
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
149-
<div class="col">
150-
{{< card rtl=true borders=true >}}
151-
</div>
152-
153-
<div class="col">
154-
{{< card rtl=true borders=true metadata=true >}}
155-
</div>
156-
157-
<div class="col">
158-
{{< card rtl=true borders=true caption=true >}}
159-
</div>
160-
161-
<div class="col">
162-
{{< card rtl=true borders=true caption=true metadata=true >}}
163-
</div>
164-
165-
<div class="col">
166-
{{< card rtl=true borders=true caption=true buttons=true >}}
167-
</div>
168-
169-
<div class="col">
170-
{{< card rtl=true borders=true caption=true action=true >}}
171-
</div>
172-
</div>
173-
174-
175-
<div class="row mx-0 mt-4">
176-
<h2>بطاقات على الأسود</h2>
177-
</div>
178-
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
179-
<div class="col">
180-
{{< card rtl=true open=true >}}
181-
</div>
182-
183-
<div class="col">
184-
{{< card rtl=true open=true metadata=true >}}
185-
</div>
186-
187-
<div class="col">
188-
{{< card rtl=true open=true caption=true >}}
189-
</div>
190-
191-
<div class="col">
192-
{{< card rtl=true open=true caption=true metadata=true >}}
193-
</div>
194-
195-
<div class="col">
196-
{{< card rtl=true open=true caption=true buttons=true >}}
197-
</div>
198-
199-
<div class="col">
200-
{{< card rtl=true open=true caption=true action=true >}}
201-
</div>
71+
{{< card rtl=true open=true caption=true action=true >}}
20272
</div>
20373
</div>
20474
</div>

‎site/content/docs/5.3/examples/cards/index.html

+12-142
Original file line numberDiff line numberDiff line change
@@ -19,185 +19,55 @@ <h1 class="visually-hidden">Card examples</h1>
1919
</svg>
2020

2121
<div class="container-xxl pt-5">
22-
<div class="row mx-0">
23-
<h2>Cards filled black</h2>
24-
</div>
2522
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
2623
<div class="col">
27-
{{< card >}}
24+
{{< card borders=true >}}
2825
</div>
2926

3027
<div class="col">
31-
{{< card metadata=true >}}
28+
{{< card borders=true metadata=true >}}
3229
</div>
3330

3431
<div class="col">
35-
{{< card caption=true >}}
32+
{{< card borders=true caption=true >}}
3633
</div>
3734

3835
<div class="col">
39-
{{< card caption=true metadata=true >}}
36+
{{< card borders=true caption=true metadata=true >}}
4037
</div>
4138

4239
<div class="col">
43-
{{< card caption=true buttons=true >}}
40+
{{< card borders=true caption=true buttons=true >}}
4441
</div>
4542

4643
<div class="col">
47-
{{< card caption=true action=true >}}
44+
{{< card borders=true caption=true action=true >}}
4845
</div>
4946
</div>
5047

51-
52-
<div class="row mx-0 mt-4">
53-
<h2>Cards outlined on white</h2>
54-
</div>
5548
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
5649
<div class="col">
57-
{{< card borders=true background="body" >}}
58-
</div>
59-
60-
<div class="col">
61-
{{< card borders=true background="body" metadata=true >}}
62-
</div>
63-
64-
<div class="col">
65-
{{< card borders=true background="body" caption=true >}}
50+
{{< card open=true >}}
6651
</div>
6752

6853
<div class="col">
69-
{{< card borders=true background="body" caption=true metadata=true >}}
54+
{{< card open=true metadata=true >}}
7055
</div>
7156

7257
<div class="col">
73-
{{< card borders=true background="body" caption=true buttons=true >}}
58+
{{< card open=true caption=true >}}
7459
</div>
7560

7661
<div class="col">
77-
{{< card borders=true background="body" caption=true action=true >}}
62+
{{< card open=true caption=true metadata=true >}}
7863
</div>
79-
</div>
80-
8164

82-
<div class="row mx-0 mt-4">
83-
<h2>Cards on white</h2>
84-
</div>
85-
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
8665
<div class="col">
87-
{{< card background="body" open=true >}}
66+
{{< card open=true caption=true buttons=true >}}
8867
</div>
8968

9069
<div class="col">
91-
{{< card background="body" open=true metadata=true >}}
92-
</div>
93-
94-
<div class="col">
95-
{{< card background="body" open=true caption=true >}}
96-
</div>
97-
98-
<div class="col">
99-
{{< card background="body" open=true caption=true metadata=true >}}
100-
</div>
101-
102-
<div class="col">
103-
{{< card background="body" open=true caption=true buttons=true >}}
104-
</div>
105-
106-
<div class="col">
107-
{{< card background="body" open=true caption=true action=true >}}
108-
</div>
109-
</div>
110-
</div>
111-
112-
<div class="bg-dark pt-5">
113-
<div class="container-xxl">
114-
<div class="row mx-0 mt-4">
115-
<h2>Cards filled white</h2>
116-
</div>
117-
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
118-
<div class="col">
119-
{{< card background="body" >}}
120-
</div>
121-
122-
<div class="col">
123-
{{< card background="body" metadata=true >}}
124-
</div>
125-
126-
<div class="col">
127-
{{< card background="body" caption=true >}}
128-
</div>
129-
130-
<div class="col">
131-
{{< card background="body" caption=true metadata=true >}}
132-
</div>
133-
134-
<div class="col">
135-
{{< card background="body" caption=true buttons=true >}}
136-
</div>
137-
138-
<div class="col">
139-
{{< card background="body" caption=true action=true >}}
140-
</div>
141-
</div>
142-
143-
144-
<div class="row mx-0 mt-4">
145-
<h2>Cards outlined on black</h2>
146-
</div>
147-
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
148-
<div class="col">
149-
{{< card borders=true >}}
150-
</div>
151-
152-
<div class="col">
153-
{{< card borders=true metadata=true >}}
154-
</div>
155-
156-
<div class="col">
157-
{{< card borders=true caption=true >}}
158-
</div>
159-
160-
<div class="col">
161-
{{< card borders=true caption=true metadata=true >}}
162-
</div>
163-
164-
<div class="col">
165-
{{< card borders=true caption=true buttons=true >}}
166-
</div>
167-
168-
<div class="col">
169-
{{< card borders=true caption=true action=true >}}
170-
</div>
171-
</div>
172-
173-
174-
<div class="row mx-0 mt-4">
175-
<h2>Cards on black</h2>
176-
</div>
177-
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
178-
<div class="col">
179-
{{< card open=true >}}
180-
</div>
181-
182-
<div class="col">
183-
{{< card open=true metadata=true >}}
184-
</div>
185-
186-
<div class="col">
187-
{{< card open=true caption=true >}}
188-
</div>
189-
190-
<div class="col">
191-
{{< card open=true caption=true metadata=true >}}
192-
</div>
193-
194-
<div class="col">
195-
{{< card open=true caption=true buttons=true >}}
196-
</div>
197-
198-
<div class="col">
199-
{{< card open=true caption=true action=true >}}
200-
</div>
70+
{{< card open=true caption=true action=true >}}
20171
</div>
20272
</div>
20373
</div>

‎site/content/docs/5.3/examples/masonry/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ <h5 class="card-title">Card title</h5>
7979
</div>
8080
<div class="col-sm-6 col-lg-4 mb-4">
8181
<div class="card">
82-
{{< placeholder width="100%" height="260" class="card-img" text="Card image" >}}
82+
{{< placeholder width="100%" height="260" class="card-img" text="Card image" color="#999" >}}
8383
</div>
8484
</div>
8585
<div class="col-sm-6 col-lg-4 mb-4">

‎site/content/docs/5.3/layout/columns.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -319,7 +319,7 @@ The classes can be used together with utilities to create responsive floated ima
319319

320320
{{< example >}}
321321
<div class="clearfix">
322-
{{< placeholder width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" text="Responsive floated image" >}}
322+
{{< placeholder width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" text="Responsive floated image" color="#999" >}}
323323

324324
<p>
325325
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.

‎site/content/docs/5.3/utilities/borders.md

+18-18
Original file line numberDiff line numberDiff line change
@@ -151,13 +151,13 @@ These border variants with **a radius CSS class different than `.rounded-circle`
151151
{{< /design-callout-alert >}}
152152

153153
{{< example >}}
154-
{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
155-
{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
156-
{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" >}}
157-
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
158-
{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" >}}
159-
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
160-
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
154+
{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" color="#999" >}}
155+
{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" color="#999" >}}
156+
{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" color="#999" >}}
157+
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" color="#999" >}}
158+
{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" color="#999" >}}
159+
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" color="#999" >}}
160+
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" color="#999" >}}
161161
{{< /example >}}
162162

163163
### Sizes
@@ -171,20 +171,20 @@ These border variants with **a size CSS class different than `.rounded-0`** shou
171171
{{< /design-callout-alert >}}
172172

173173
{{< example class="bd-example-rounded-utils" >}}
174-
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}}
175-
{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" >}}
176-
{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}}
177-
{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
178-
{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" >}}
179-
{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}}
174+
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" color="#999" >}}
175+
{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" color="#999" >}}
176+
{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" color="#999" >}}
177+
{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" color="#999" >}}
178+
{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" color="#999" >}}
179+
{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" color="#999" >}}
180180
{{< /example >}}
181181

182182
{{< example class="bd-example-rounded-utils" >}}
183-
{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" >}}
184-
{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" >}}
185-
{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" >}}
186-
{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" >}}
187-
{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" >}}
183+
{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" color="#999" >}}
184+
{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" color="#999" >}}
185+
{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" color="#999" >}}
186+
{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" color="#999" >}}
187+
{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" color="#999" >}}
188188
{{< /example >}}
189189

190190
## Dividers

‎site/content/docs/5.3/utilities/object-fit.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,23 @@ Classes for the value of `object-fit` are named using the format `.object-fit-{v
2525
Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element):
2626

2727
{{< example class="d-flex overflow-auto" >}}
28-
{{< placeholder width="140" height="120" class="object-fit-contain border" text="Object fit contain" markup="img" color="#666" background="#ddd" >}}
29-
{{< placeholder width="140" height="120" class="object-fit-cover border" text="Object fit cover" markup="img" color="666" background="#ddd" >}}
30-
{{< placeholder width="140" height="120" class="object-fit-fill border" text="Object fit fill" markup="img" color="666" background="#ddd" >}}
31-
{{< placeholder width="140" height="120" class="object-fit-scale border" text="Object fit scale down" markup="img" color="666" background="#ddd" >}}
32-
{{< placeholder width="140" height="120" class="object-fit-none border" text="Object fit none" markup="img" color="666" background="#ddd" >}}
28+
{{< placeholder width="140" height="120" class="object-fit-contain border" text="Object fit contain" markup="img" color="#333" background="#bbb" >}}
29+
{{< placeholder width="140" height="120" class="object-fit-cover border" text="Object fit cover" markup="img" color="#333" background="#bbb" >}}
30+
{{< placeholder width="140" height="120" class="object-fit-fill border" text="Object fit fill" markup="img" color="#333" background="#bbb" >}}
31+
{{< placeholder width="140" height="120" class="object-fit-scale border" text="Object fit scale down" markup="img" color="#333" background="#bbb" >}}
32+
{{< placeholder width="140" height="120" class="object-fit-none border" text="Object fit none" markup="img" color="#333" background="#bbb" >}}
3333
{{< /example >}}
3434

3535
## Responsive
3636

3737
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.
3838

3939
{{< example class="d-flex overflow-auto" >}}
40-
{{< placeholder width="140" height="80" class="object-fit-sm-contain border" text="Contain on sm" markup="img" color="666" background="#ddd" >}}
41-
{{< placeholder width="140" height="80" class="object-fit-md-contain border" text="Contain on md" markup="img" color="666" background="#ddd" >}}
42-
{{< placeholder width="140" height="80" class="object-fit-lg-contain border" text="Contain on lg" markup="img" color="666" background="#ddd" >}}
43-
{{< placeholder width="140" height="80" class="object-fit-xl-contain border" text="Contain on xl" markup="img" color="666" background="#ddd" >}}
44-
{{< placeholder width="140" height="80" class="object-fit-xxl-contain border" text="Contain on xxl" markup="img" color="666" background="#ddd" >}}
40+
{{< placeholder width="140" height="80" class="object-fit-sm-contain border" text="Contain on sm" markup="img" color="#333" background="#bbb" >}}
41+
{{< placeholder width="140" height="80" class="object-fit-md-contain border" text="Contain on md" markup="img" color="#333" background="#bbb" >}}
42+
{{< placeholder width="140" height="80" class="object-fit-lg-contain border" text="Contain on lg" markup="img" color="#333" background="#bbb" >}}
43+
{{< placeholder width="140" height="80" class="object-fit-xl-contain border" text="Contain on xl" markup="img" color="#333" background="#bbb" >}}
44+
{{< placeholder width="140" height="80" class="object-fit-xxl-contain border" text="Contain on xxl" markup="img" color="#333" background="#bbb" >}}
4545
{{< /example >}}
4646

4747
## Video

‎site/layouts/shortcodes/card.html

+5-7
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33

44
`args` are all optional and can be one of the following:
55
* action: Display action button - default = false
6-
* background: Define the card background - default = "dark"
76
* borders: Add some borders to the card - default = false
87
* buttons: Display share and favorite buttons - default = false
98
* caption: Display caption - default = false
@@ -13,28 +12,27 @@
1312
*/ -}}
1413

1514
{{- $action := .Get "action" | default false -}}
16-
{{- $background := .Get "background" | default "dark" -}}
1715
{{- $borders := .Get "borders" | default false -}}
1816
{{- $buttons := .Get "buttons" | default false -}}
1917
{{- $caption := .Get "caption" | default false -}}
2018
{{- $metadata := .Get "metadata" | default false -}}
2119
{{- $open := .Get "open" | default false -}}
2220
{{- $rtl := .Get "rtl" | default false -}}
2321

24-
<div class="card{{ if eq $borders false }} border-0{{ end }}{{ if and $borders (eq $background "dark") }} border-dark{{ end }}">
22+
<div class="card{{ if eq $borders false }} border-0{{ end }}">
2523
<svg class="bd-placeholder-img card-img-top" width="100%" height="169" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="{{ if $rtl }}العنصر النائب: شرح الصورة{{ else }}Placeholder: Image caption{{ end }}" preserveAspectRatio="xMidYMid slice" focusable="false">
26-
<rect width="100%" height="100%" fill="{{ (index $.Site.Data.grays 3).hex }}"/>
27-
<svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#00000014" aria-hidden="true" focusable="false">
24+
<rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/>
25+
<svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="var(--bs-border-color-translucent)" aria-hidden="true" focusable="false">
2826
<path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
2927
</svg>
3028
</svg>
31-
<div class="card-body text-{{ if eq $background "dark" }}white{{ else }}black{{ end }} bg-{{ $background }}{{ if $open }} px-0{{ end }}">
29+
<div class="card-body{{ if $open }} px-0{{ end }}">
3230
<h3 class="card-title{{ if and $metadata (not $caption) }} mb-3{{ end }}">{{ if $rtl }}عنوان{{ else }}Title{{ end }}</h3>
3331
{{- if $caption -}}
3432
<p class="card-text fw-bold mb-{{ if or (or $metadata $buttons) $action }}4{{ else }}2{{ end }}">{{ if $rtl }}شرح{{ else }}Caption{{ end }}</p>
3533
{{- end -}}
3634
{{- if $metadata -}}
37-
<p class="card-text fw-bold text-{{ if eq $background "dark" }}light{{ else }}muted{{ end }}">{{ if $rtl }}البيانات الوصفية{{ else }}Meta data{{ end }}</p>
35+
<p class="card-text fw-bold text-body-secondary">{{ if $rtl }}البيانات الوصفية{{ else }}Meta data{{ end }}</p>
3836
{{- end -}}
3937
{{- if $buttons -}}
4038
<ul class="nav flex-row gap-3 lh-1">

‎site/layouts/shortcodes/placeholder.html

+11-9
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
* title: Used in the SVG `title` tag - default: "Placeholder"
66
* text: The text to show in the image - default: "width x height"
77
* class: Class to add to the `svg` or `img` - default: "bd-placeholder-img"
8-
* color: The text color (foreground) - default: "#dee2e6"
9-
* background: The background color - default: "#868e96"
8+
* color: The text color (foreground) - default: "var(--bs-border-color-translucent)"
9+
* background: The background color - default: "var(--bs-secondary-bg)"
1010
* width: default: "100%"
1111
* height: default: "180px"
1212
* markup: If it should render `svg` or `img` tags - default: "svg"
1313
*/ -}}
1414

1515
{{- $grays := $.Site.Data.grays -}}
16-
{{- $default_color := (index $grays 5).hex -}} <!--Boosted mod: 5 instead of 2-->
17-
{{- $default_background := (index $grays 3).hex -}} <!--Boosted mod: 3 instead of 5-->
16+
{{- $default_color := "var(--bs-border-color-translucent)" -}} <!--Boosted mod: instead of `(index $grays 2).hex`-->
17+
{{- $default_background := "var(--bs-secondary-bg)" -}} <!--Boosted mod: instead of `(index $grays 5).hex`-->
1818

1919
{{- $title := .Get "title" | default "Placeholder" -}}
2020
{{- $class := .Get "class" -}}
@@ -25,26 +25,28 @@
2525
{{- $text := .Get "text" | default (printf "%sx%s" $width $height) -}}
2626

2727
{{- $show_title := not (eq $title "false") -}}
28-
{{- $show_text := not (or (eq $text "false") (eq $text "icon")) -}}
29-
{{- $show_icon := eq $text "icon" -}}
28+
{{- $show_text := not (or (eq $text "false") (eq $text "icon")) -}} <!--Boosted mod: handle "icon" text-->
29+
{{- $show_icon := eq $text "icon" -}} <!--Boosted mod-->
3030

3131
{{- $markup := .Get "markup" | default "svg" -}}
3232

3333
{{- if eq $markup "img" -}}
34-
<img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg%20style='font-size:%201.125rem;%20font-family:system-ui,-apple-system,%22Segoe%20UI%22,Roboto,%22Helvetica%20Neue%22,%22Noto%20Sans%22,%22Liberation%20Sans%22,Arial,sans-serif,%22Apple%20Color%20Emoji%22,%22Segoe%20UI%20Emoji%22,%22Segoe%20UI%20Symbol%22,%22Noto%20Color%20Emoji%22;%20-webkit-user-select:%20none;%20-moz-user-select:%20none;%20user-select:%20none;%20text-anchor:%20middle;'%20width='200'%20height='200'%20xmlns='http://www.w3.org/2000/svg'%3E
34+
<img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" style="filter:var(--bs-icon-filter)" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg%20style='font-size:%201.125rem;%20font-family:system-ui,-apple-system,%22Segoe%20UI%22,Roboto,%22Helvetica%20Neue%22,%22Noto%20Sans%22,%22Liberation%20Sans%22,Arial,sans-serif,%22Apple%20Color%20Emoji%22,%22Segoe%20UI%20Emoji%22,%22Segoe%20UI%20Symbol%22,%22Noto%20Color%20Emoji%22;%20-webkit-user-select:%20none;%20-moz-user-select:%20none;%20user-select:%20none;%20text-anchor:%20middle;'%20width='200'%20height='200'%20xmlns='http://www.w3.org/2000/svg'%3E
3535
{{- if $show_title }}%3Ctitle%3E{{ $title }}%3C/title%3E{{ end -}}
3636
%3Crect%20width='100%25'%20height='100%25'%20fill='{{ replace $background "#" "%23" }}'%3E%3C/rect%3E
3737
{{- if $show_text }}%3Ctext%20x='50%25'%20y='50%25'%20fill='{{ replace $color "#" "%23" }}'%20dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}}
38-
%3C/svg%3E">
38+
%3C/svg%3E"> <!-- Boosted mod: filter used to handle light/dark mode switch -->
3939
{{- else -}}
4040
<svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
4141
{{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
4242
<rect width="100%" height="100%" fill="{{ $background }}"/>
4343
{{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
44+
<!-- Boosted mod -->
4445
{{- if $show_icon }}
45-
<svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#{{ if eq $background "#000" }}ffffff30{{ else }}00000014{{ end }}">
46+
<svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="{{ if in $background "var(--" }}{{$color}}{{ else if eq $background "#000" }}#ffffff30{{ else }}#00000014{{ end }}">
4647
<path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
4748
</svg>
4849
{{ end -}}
50+
<!-- End mod -->
4951
</svg>
5052
{{- end -}}

0 commit comments

Comments
 (0)
Please sign in to comment.