Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update snippet examples for dark mode #37834

Merged
merged 4 commits into from Jan 11, 2023
Merged

Update snippet examples for dark mode #37834

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b89f6b6
Update snippet examples for dark mode
mdo Jan 4, 2023
85332f0
Fix markup
mdo Jan 8, 2023
3583d2d
Review comments
mdo Jan 11, 2023
a251928
undo colored links docs from this PR
mdo Jan 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/content/docs/5.3/examples/blog/index.html
View file
Open in desktop
Expand Up @@ -14,7 +14,7 @@
<a class="link-secondary" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">Large</a>
<a class="blog-header-logo text-body-emphasis" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="link-secondary" href="#" aria-label="Search">
Expand Down
24 changes: 8 additions & 16 deletions site/content/docs/5.3/examples/dropdowns/dropdowns.css
View file
Open in desktop
@@ -1,7 +1,3 @@
.dropdown-menu {
margin: 4rem auto;
}

.dropdown-item-danger {
color: var(--bs-red);
}
Expand All @@ -15,12 +11,13 @@
}

.btn-hover-light {
background-color: var(--bs-white);
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
}
.btn-hover-light:hover,
.btn-hover-light:focus {
color: var(--bs-blue);
background-color: var(--bs-light);
color: var(--bs-link-hover-color);
background-color: var(--bs-tertiary-bg);
}

.cal-month,
Expand All @@ -46,22 +43,17 @@
}
.cal-btn:not([disabled]) {
font-weight: 500;
color: var(--bs-emphasis-color);
}
.cal-btn:hover,
.cal-btn:focus {
background-color: rgba(0, 0, 0, .05);
background-color: var(--bs-secondary-bg);
}
.cal-btn[disabled] {
border: 0;
opacity: .5;
}

.form-control-dark {
background-color: rgba(255, 255, 255, .05);
border-color: rgba(255, 255, 255, .15);
}


.w-220px {
width: 220px;
}
Expand All @@ -74,6 +66,6 @@
width: 340px;
}

.w-600px {
width: 600px;
.opacity-10 {
opacity: .1;
}
349 changes: 252 additions & 97 deletions site/content/docs/5.3/examples/dropdowns/index.html
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions site/content/docs/5.3/examples/features/index.html
View file
Open in desktop
Expand Up @@ -112,7 +112,7 @@ <h3 class="fs-2">Featured title</h3>
<h2 class="pb-2 border-bottom">Hanging icons</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start">
<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div>
<div>
Expand All @@ -124,7 +124,7 @@ <h3 class="fs-2">Featured title</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
</div>
<div>
Expand All @@ -136,7 +136,7 @@ <h3 class="fs-2">Featured title</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
</div>
<div>
Expand Down
10 changes: 5 additions & 5 deletions site/content/docs/5.3/examples/footers/index.html
View file
Open in desktop
Expand Up @@ -24,7 +24,7 @@
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-muted">&copy; {{< year >}} Company, Inc</p>

<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>

Expand Down Expand Up @@ -77,7 +77,7 @@
<div class="container">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
<div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-dark text-decoration-none">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>
<p class="text-muted">&copy; {{< year >}}</p>
Expand Down Expand Up @@ -177,9 +177,9 @@ <h5>Subscribe to our newsletter</h5>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>&copy; {{< year >}} Company, Inc. All rights reserved.</p>
<ul class="list-unstyled d-flex">
<li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
</ul>
</div>
</footer>
Expand Down
24 changes: 12 additions & 12 deletions site/content/docs/5.3/examples/headers/index.html
View file
Open in desktop
Expand Up @@ -35,7 +35,7 @@ <h1 class="visually-hidden">Headers examples</h1>

<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Simple header</span>
</a>
Expand Down Expand Up @@ -68,16 +68,16 @@ <h1 class="visually-hidden">Headers examples</h1>

<div class="container">
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a>

<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li>
<li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
<li><a href="#" class="nav-link px-2 link-dark">About</a></li>
<li><a href="#" class="nav-link px-2">Features</a></li>
<li><a href="#" class="nav-link px-2">Pricing</a></li>
<li><a href="#" class="nav-link px-2">FAQs</a></li>
<li><a href="#" class="nav-link px-2">About</a></li>
</ul>

<div class="col-md-3 text-end">
Expand Down Expand Up @@ -121,15 +121,15 @@ <h1 class="visually-hidden">Headers examples</h1>
<header class="p-3 mb-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a>

<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Customers</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Products</a></li>
<li><a href="#" class="nav-link px-2 link-body-emphasis">Inventory</a></li>
<li><a href="#" class="nav-link px-2 link-body-emphasis">Customers</a></li>
<li><a href="#" class="nav-link px-2 link-body-emphasis">Products</a></li>
</ul>

<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
Expand Down Expand Up @@ -157,7 +157,7 @@ <h1 class="visually-hidden">Headers examples</h1>
<header class="py-3 mb-3 border-bottom">
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
<div class="dropdown">
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="dropdown-menu text-small shadow">
Expand Down Expand Up @@ -222,7 +222,7 @@ <h1 class="visually-hidden">Headers examples</h1>
</nav>
<header class="py-3 mb-4 border-bottom">
<div class="container d-flex flex-wrap justify-content-center">
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none">
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Double header</span>
</a>
Expand Down
12 changes: 6 additions & 6 deletions site/content/docs/5.3/examples/heroes/index.html
View file
Open in desktop
Expand Up @@ -11,7 +11,7 @@ <h1 class="visually-hidden">Heroes examples</h1>

<div class="px-4 py-5 my-5 text-center">
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
<h1 class="display-5 fw-bold">Centered hero</h1>
<h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
Expand All @@ -24,7 +24,7 @@ <h1 class="display-5 fw-bold">Centered hero</h1>
<div class="b-example-divider"></div>

<div class="px-4 pt-5 my-5 text-center border-bottom">
<h1 class="display-4 fw-bold">Centered screenshot</h1>
<h1 class="display-4 fw-bold text-body-emphasis">Centered screenshot</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
Expand All @@ -47,7 +47,7 @@ <h1 class="display-4 fw-bold">Centered screenshot</h1>
<img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
</div>
<div class="col-lg-6">
<h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
<h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Responsive left-aligned hero with image</h1>
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
Expand All @@ -62,7 +62,7 @@ <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image<
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
<div class="row align-items-center g-lg-5 py-5">
<div class="col-lg-7 text-center text-lg-start">
<h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1>
<h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1>
<p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
</div>
<div class="col-md-10 mx-auto col-lg-5">
Expand Down Expand Up @@ -93,7 +93,7 @@ <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h
<div class="container my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
<h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1>
<h1 class="display-4 fw-bold lh-1 text-body-emphasis">Border hero with cropped image and shadows</h1>
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button>
Expand All @@ -110,7 +110,7 @@ <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h

<div class="bg-dark text-secondary px-4 py-5 text-center">
<div class="py-5">
<h1 class="display-5 fw-bold text-white">Dark mode hero</h1>
<h1 class="display-5 fw-bold text-white">Dark color hero</h1>
<div class="col-lg-6 mx-auto">
<p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
Expand Down