Skip to content

Commit 360bc9d

Browse files
julien-deramondjulien-deramond
committed
Make .bg-{color}-subtle work with .bg-opacity-{value} 
1 parent 05a1c1d commit 360bc9d

File tree

4 files changed

+85
-214
lines changed

4 files changed

+85
-214
lines changed

‎scss/_maps.scss

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ $theme-colors-bg-subtle: (
3232
) !default;
3333
// scss-docs-end theme-bg-subtle-map
3434

35+
$theme-colors-bg-subtle-rgb: map-loop($theme-colors-bg-subtle, to-rgb, "$value") !default;
36+
3537
// scss-docs-start theme-border-subtle-map
3638
$theme-colors-border-subtle: (
3739
"primary": $primary-border-subtle,
@@ -48,6 +50,7 @@ $theme-colors-border-subtle: (
4850
$theme-colors-text-dark: null !default;
4951
$theme-colors-bg-subtle-dark: null !default;
5052
$theme-colors-border-subtle-dark: null !default;
53+
$theme-colors-bg-subtle-dark-rgb: null !default;
5154

5255
@if $enable-dark-mode {
5356
// scss-docs-start theme-text-dark-map
@@ -134,15 +137,16 @@ $utilities-bg: map-merge(
134137
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
135138

136139
$utilities-bg-subtle: (
137-
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
138-
"secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
139-
"success-subtle": var(--#{$prefix}success-bg-subtle),
140-
"info-subtle": var(--#{$prefix}info-bg-subtle),
141-
"warning-subtle": var(--#{$prefix}warning-bg-subtle),
142-
"danger-subtle": var(--#{$prefix}danger-bg-subtle),
143-
"light-subtle": var(--#{$prefix}light-bg-subtle),
144-
"dark-subtle": var(--#{$prefix}dark-bg-subtle)
140+
"primary-subtle": rgba(var(--#{$prefix}primary-bg-subtle), var(--#{$prefix}bg-opacity)),
141+
"secondary-subtle": rgba(var(--#{$prefix}secondary-bg-subtle), var(--#{$prefix}bg-opacity)),
142+
"success-subtle": rgba(var(--#{$prefix}success-bg-subtle), var(--#{$prefix}bg-opacity)),
143+
"info-subtle": rgba(var(--#{$prefix}info-bg-subtle), var(--#{$prefix}bg-opacity)),
144+
"warning-subtle": rgba(var(--#{$prefix}warning-bg-subtle), var(--#{$prefix}bg-opacity)),
145+
"danger-subtle": rgba(var(--#{$prefix}danger-bg-subtle), var(--#{$prefix}bg-opacity)),
146+
"light-subtle": rgba(var(--#{$prefix}light-bg-subtle), var(--#{$prefix}bg-opacity)),
147+
"dark-subtle": rgba(var(--#{$prefix}dark-bg-subtle), var(--#{$prefix}bg-opacity))
145148
) !default;
149+
$theme-colors-bg-subtle-dark-rgb: map-loop($theme-colors-bg-subtle-dark, to-rgb, "$value") !default;
146150
// scss-docs-end utilities-bg-colors
147151

148152
// scss-docs-start utilities-border-colors

‎scss/_root.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
--#{$prefix}#{$color}-text-emphasis: #{$value};
2727
}
2828

29-
@each $color, $value in $theme-colors-bg-subtle {
29+
@each $color, $value in $theme-colors-bg-subtle-rgb {
3030
--#{$prefix}#{$color}-bg-subtle: #{$value};
3131
}
3232

@@ -156,7 +156,7 @@
156156
--#{$prefix}#{$color}-text-emphasis: #{$value};
157157
}
158158

159-
@each $color, $value in $theme-colors-bg-subtle-dark {
159+
@each $color, $value in $theme-colors-bg-subtle-dark-rgb {
160160
--#{$prefix}#{$color}-bg-subtle: #{$value};
161161
}
162162

‎scss/_utilities.scss

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -674,6 +674,14 @@ $utilities: map-merge(
674674
)
675675
)
676676
),
677+
"subtle-background-color": (
678+
property: background-color,
679+
class: bg,
680+
local-vars: (
681+
"bg-opacity": 1
682+
),
683+
values: $utilities-bg-subtle
684+
),
677685
"bg-opacity": (
678686
css-var: true,
679687
class: bg-opacity,
@@ -685,11 +693,6 @@ $utilities: map-merge(
685693
100: 1
686694
)
687695
),
688-
"subtle-background-color": (
689-
property: background-color,
690-
class: bg,
691-
values: $utilities-bg-subtle
692-
),
693696
// scss-docs-end utils-bg-color
694697
"gradient": (
695698
property: background-image,

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

Lines changed: 63 additions & 199 deletions
Original file line numberDiff line numberDiff line change
@@ -3,206 +3,70 @@
33
title: Album example
44
---
55

6-
<header data-bs-theme="dark">
7-
<div class="collapse text-bg-dark" id="navbarHeader">
8-
<div class="container">
9-
<div class="row">
10-
<div class="col-sm-8 col-md-7 py-4">
11-
<h4>About</h4>
12-
<p class="text-body-secondary">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
13-
</div>
14-
<div class="col-sm-4 offset-md-1 py-4">
15-
<h4>Contact</h4>
16-
<ul class="list-unstyled">
17-
<li><a href="#" class="text-white">Follow on Twitter</a></li>
18-
<li><a href="#" class="text-white">Like on Facebook</a></li>
19-
<li><a href="#" class="text-white">Email me</a></li>
20-
</ul>
21-
</div>
22-
</div>
23-
</div>
24-
</div>
25-
<div class="navbar navbar-dark bg-dark shadow-sm">
26-
<div class="container">
27-
<a href="#" class="navbar-brand d-flex align-items-center">
28-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
29-
<strong>Album</strong>
30-
</a>
31-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
32-
<span class="navbar-toggler-icon"></span>
33-
</button>
34-
</div>
35-
</div>
36-
</header>
37-
38-
<main>
39-
40-
<section class="py-5 text-center container">
41-
<div class="row py-lg-5">
42-
<div class="col-lg-6 col-md-8 mx-auto">
43-
<h1 class="fw-light">Album example</h1>
44-
<p class="lead text-body-secondary">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
45-
<p>
46-
<a href="#" class="btn btn-primary my-2">Main call to action</a>
47-
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
48-
</p>
49-
</div>
50-
</div>
51-
</section>
52-
53-
<div class="album py-5 bg-body-tertiary">
54-
<div class="container">
55-
56-
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
57-
<div class="col">
58-
<div class="card shadow-sm">
59-
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
60-
<div class="card-body">
61-
<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>
62-
<div class="d-flex justify-content-between align-items-center">
63-
<div class="btn-group">
64-
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
65-
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
66-
</div>
67-
<small class="text-body-secondary">9 mins</small>
68-
</div>
69-
</div>
70-
</div>
71-
</div>
72-
<div class="col">
73-
<div class="card shadow-sm">
74-
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
75-
<div class="card-body">
76-
<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>
77-
<div class="d-flex justify-content-between align-items-center">
78-
<div class="btn-group">
79-
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
80-
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
81-
</div>
82-
<small class="text-body-secondary">9 mins</small>
83-
</div>
84-
</div>
85-
</div>
86-
</div>
87-
<div class="col">
88-
<div class="card shadow-sm">
89-
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
90-
<div class="card-body">
91-
<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>
92-
<div class="d-flex justify-content-between align-items-center">
93-
<div class="btn-group">
94-
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
95-
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
96-
</div>
97-
<small class="text-body-secondary">9 mins</small>
98-
</div>
99-
</div>
100-
</div>
101-
</div>
102-
103-
<div class="col">
104-
<div class="card shadow-sm">
105-
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
106-
<div class="card-body">
107-
<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>
108-
<div class="d-flex justify-content-between align-items-center">
109-
<div class="btn-group">
110-
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
111-
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
112-
</div>
113-
<small class="text-body-secondary">9 mins</small>
114-
</div>
115-
</div>
116-
</div>
117-
</div>
118-
<div class="col">
119-
<div class="card shadow-sm">
120-
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
121-
<div class="card-body">
122-
<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>
123-
<div class="d-flex justify-content-between align-items-center">
124-
<div class="btn-group">
125-
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
126-
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
127-
</div>
128-
<small class="text-body-secondary">9 mins</small>
129-
</div>
130-
</div>
131-
</div>
132-
</div>
133-
<div class="col">
134-
<div class="card shadow-sm">
135-
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
136-
<div class="card-body">
137-
<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>
138-
<div class="d-flex justify-content-between align-items-center">
139-
<div class="btn-group">
140-
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
141-
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
142-
</div>
143-
<small class="text-body-secondary">9 mins</small>
144-
</div>
145-
</div>
146-
</div>
147-
</div>
6+
<div data-bs-theme="light" class="bg-white">
7+
<div class="bg-secondary p-2 text-white">
8+
This is default secondary background
9+
</div>
10+
<div class="bg-secondary p-2 text-white bg-opacity-75">
11+
This is 75% opacity secondary background
12+
</div>
13+
<div class="bg-secondary p-2 text-dark bg-opacity-50">
14+
This is 50% opacity secondary background
15+
</div>
16+
<div class="bg-secondary p-2 text-dark bg-opacity-25">
17+
This is 25% opacity secondary background
18+
</div>
19+
<div class="bg-secondary p-2 text-dark bg-opacity-10">
20+
This is 10% opacity secondary background
21+
</div>
14822

149-
<div class="col">
150-
<div class="card shadow-sm">
151-
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
152-
<div class="card-body">
153-
<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>
154-
<div class="d-flex justify-content-between align-items-center">
155-
<div class="btn-group">
156-
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
157-
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
158-
</div>
159-
<small class="text-body-secondary">9 mins</small>
160-
</div>
161-
</div>
162-
</div>
163-
</div>
164-
<div class="col">
165-
<div class="card shadow-sm">
166-
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
167-
<div class="card-body">
168-
<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>
169-
<div class="d-flex justify-content-between align-items-center">
170-
<div class="btn-group">
171-
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
172-
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
173-
</div>
174-
<small class="text-body-secondary">9 mins</small>
175-
</div>
176-
</div>
177-
</div>
178-
</div>
179-
<div class="col">
180-
<div class="card shadow-sm">
181-
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
182-
<div class="card-body">
183-
<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>
184-
<div class="d-flex justify-content-between align-items-center">
185-
<div class="btn-group">
186-
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
187-
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
188-
</div>
189-
<small class="text-body-secondary">9 mins</small>
190-
</div>
191-
</div>
192-
</div>
193-
</div>
194-
</div>
195-
</div>
23+
<div class="bg-secondary-subtle p-2 text-dark">
24+
This is default secondary-subtle background
25+
</div>
26+
<div class="bg-secondary-subtle p-2 text-dark bg-opacity-75">
27+
This is 75% opacity secondary-subtle background
28+
</div>
29+
<div class="bg-secondary-subtle p-2 text-dark bg-opacity-50">
30+
This is 50% opacity secondary-subtle background
19631
</div>
32+
<div class="bg-secondary-subtle p-2 text-dark bg-opacity-25">
33+
This is 25% opacity secondary-subtle background
34+
</div>
35+
<div class="bg-secondary-subtle p-2 text-dark bg-opacity-10">
36+
This is 10% opacity secondary-subtle background
37+
</div>
38+
</div>
19739

198-
</main>
40+
<div data-bs-theme="dark" class="bg-dark">
41+
<div class="bg-secondary p-2 text-white">
42+
This is default secondary background
43+
</div>
44+
<div class="bg-secondary p-2 text-white bg-opacity-75">
45+
This is 75% opacity secondary background
46+
</div>
47+
<div class="bg-secondary p-2 text-dark bg-opacity-50">
48+
This is 50% opacity secondary background
49+
</div>
50+
<div class="bg-secondary p-2 text-dark bg-opacity-25">
51+
This is 25% opacity secondary background
52+
</div>
53+
<div class="bg-secondary p-2 text-dark bg-opacity-10">
54+
This is 10% opacity secondary background
55+
</div>
19956

200-
<footer class="text-body-secondary py-5">
201-
<div class="container">
202-
<p class="float-end mb-1">
203-
<a href="#">Back to top</a>
204-
</p>
205-
<p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
206-
<p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="{{< docsref "/getting-started/introduction" >}}">getting started guide</a>.</p>
207-
</div>
208-
</footer>
57+
<div class="bg-secondary-subtle p-2 text-white">
58+
This is default secondary-subtle background
59+
</div>
60+
<div class="bg-secondary-subtle p-2 text-white bg-opacity-75">
61+
This is 75% opacity secondary-subtle background
62+
</div>
63+
<div class="bg-secondary-subtle p-2 text-white bg-opacity-50">
64+
This is 50% opacity secondary-subtle background
65+
</div>
66+
<div class="bg-secondary-subtle p-2 text-white bg-opacity-25">
67+
This is 25% opacity secondary-subtle background
68+
</div>
69+
<div class="bg-secondary-subtle p-2 text-white bg-opacity-10">
70+
This is 10% opacity secondary-subtle background
71+
</div>
72+
</div>

0 commit comments

Comments
 (0)