mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-24 06:03:10 +02:00
Code Issues Releases Wiki Activity

Update snippet examples for dark mode (#37834)

Browse Source 
* Update snippet examples for dark mode

* Fix markup

* Review comments

* undo colored links docs from this PR
This commit is contained in:
Mark Otto
2023-01-10 16:33:33 -08:00
committed by GitHub
parent 3fc305b2de
commit f40e76d1f7
15 changed files with 468 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
site/content/docs/5.3/examples/sidebars/index.html
View File

@@ -127,7 +127,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-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 pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span>
</a>
@@ -140,25 +140,25 @@ body_class: ""
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
Customers
</a>
@@ -166,7 +166,7 @@ body_class: ""
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<a href="#" class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>mdo</strong>
</a>
@@ -183,7 +183,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
<a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="visually-hidden">Icon-only</span>
</a>
@@ -215,7 +215,7 @@ body_class: ""
</li>
</ul>
<div class="dropdown border-top">
<a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<a href="#" class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small shadow">
@@ -230,8 +230,8 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
<div class="flex-shrink-0 p-3" style="width: 280px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">Collapsible</span>
</a>
@@ -242,9 +242,9 @@ body_class: ""
</button>
<div class="collapse show" id="home-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Updates</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Reports</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Reports</a></li>
</ul>
</div>
</li>
@@ -254,10 +254,10 @@ body_class: ""
</button>
<div class="collapse" id="dashboard-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Weekly</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Monthly</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Annually</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Weekly</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Monthly</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Annually</a></li>
</ul>
</div>
</li>
@@ -267,10 +267,10 @@ body_class: ""
</button>
<div class="collapse" id="orders-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">New</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Processed</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Shipped</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Returned</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Processed</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Shipped</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Returned</a></li>
</ul>
</div>
</li>
@@ -294,7 +294,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">List group</span>
</a>

14
site/content/docs/5.3/examples/sidebars/sidebars.css
View File

@@ -20,13 +20,13 @@ main {
.btn-toggle {
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
color: var(--bs-emphasis-color);
background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
color: rgba(0, 0, 0, .85);
background-color: #d2f4ea;
color: rgba(var(--bs-emphasis-color-rgb), .85);
background-color: var(--bs-tertiary-bg);
}
.btn-toggle::before {
@@ -37,8 +37,12 @@ main {
transform-origin: .5em 50%;
}
[data-bs-theme="dark"] .btn-toggle::before {
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}
.btn-toggle[aria-expanded="true"] {
color: rgba(0, 0, 0, .85);
color: rgba(var(--bs-emphasis-color-rgb), .85);
}
.btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg);
@@ -51,7 +55,7 @@ main {
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
background-color: #d2f4ea;
background-color: var(--bs-tertiary-bg);
}
.scrollarea {