diff options
Diffstat (limited to 'docs/5.2/customize/color/index.html')
| -rw-r--r-- | docs/5.2/customize/color/index.html | 283 |
1 files changed, 138 insertions, 145 deletions
diff --git a/docs/5.2/customize/color/index.html b/docs/5.2/customize/color/index.html index acd4ecbddc..5e8a198ac6 100644 --- a/docs/5.2/customize/color/index.html +++ b/docs/5.2/customize/color/index.html @@ -189,11 +189,11 @@ <hr class="d-lg-none text-white-50"> - + <div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div> <hr class="d-lg-none text-white-50"> - + <ul class="navbar-nav flex-row flex-wrap ms-md-auto"> <li class="nav-item col-6 col-lg-auto"> @@ -209,12 +209,6 @@ </a> </li> <li class="nav-item col-6 col-lg-auto"> - <a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener"> - <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg> - <small class="d-lg-none ms-2">Slack</small> - </a> - </li> - <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg> <small class="d-lg-none ms-2">Open Collective</small> @@ -224,7 +218,7 @@ <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div> <hr class="d-lg-none text-white-50"> </li> - + <li class="nav-item dropdown"> <button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static"> @@ -260,7 +254,7 @@ </header> - + <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout"> <aside class="bd-sidebar"> <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel"> @@ -486,7 +480,7 @@ </div> - + <div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted"> <button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents"> On this page @@ -513,47 +507,47 @@ </nav> </div> </div> - + <div class="bd-content ps-lg-2"> - + <h2 id="theme-colors">Theme colors <a class="anchor-link" href="#theme-colors" aria-label="Link to this section: Theme colors"></a></h2> <p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s <code>scss/_variables.scss</code> file.</p> <div class="row"> - + <div class="col-md-4"> <div class="p-3 mb-3 bg-primary text-white">Primary</div> </div> - + <div class="col-md-4"> <div class="p-3 mb-3 bg-secondary text-white">Secondary</div> </div> - + <div class="col-md-4"> <div class="p-3 mb-3 bg-success text-white">Success</div> </div> - + <div class="col-md-4"> <div class="p-3 mb-3 bg-danger text-white">Danger</div> </div> - + <div class="col-md-4"> <div class="p-3 mb-3 bg-warning text-dark">Warning</div> </div> - + <div class="col-md-4"> <div class="p-3 mb-3 bg-info text-dark">Info</div> </div> - + <div class="col-md-4"> <div class="p-3 mb-3 bg-light text-dark">Light</div> </div> - + <div class="col-md-4"> <div class="p-3 mb-3 bg-dark text-white">Dark</div> </div> - + </div> <p>All these colors are available as a Sass map, <code>$theme-colors</code>.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span> @@ -572,265 +566,265 @@ <p>All Bootstrap colors are available as Sass variables and a Sass map in <code>scss/_variables.scss</code> file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a <a href="#theme-colors">theme palette</a>.</p> <p>Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.</p> <div class="row font-monospace"> - + <div class="col-md-4 mb-3"> <div class="p-3 mb-2 position-relative swatch-blue"> <strong class="d-block">$blue</strong> #0d6efd </div> - + <div class="p-3 bd-blue-100">$blue-100</div> - + <div class="p-3 bd-blue-200">$blue-200</div> - + <div class="p-3 bd-blue-300">$blue-300</div> - + <div class="p-3 bd-blue-400">$blue-400</div> - + <div class="p-3 bd-blue-500">$blue-500</div> - + <div class="p-3 bd-blue-600">$blue-600</div> - + <div class="p-3 bd-blue-700">$blue-700</div> - + <div class="p-3 bd-blue-800">$blue-800</div> - + <div class="p-3 bd-blue-900">$blue-900</div> - + </div> - + <div class="col-md-4 mb-3"> <div class="p-3 mb-2 position-relative swatch-indigo"> <strong class="d-block">$indigo</strong> #6610f2 </div> - + <div class="p-3 bd-indigo-100">$indigo-100</div> - + <div class="p-3 bd-indigo-200">$indigo-200</div> - + <div class="p-3 bd-indigo-300">$indigo-300</div> - + <div class="p-3 bd-indigo-400">$indigo-400</div> - + <div class="p-3 bd-indigo-500">$indigo-500</div> - + <div class="p-3 bd-indigo-600">$indigo-600</div> - + <div class="p-3 bd-indigo-700">$indigo-700</div> - + <div class="p-3 bd-indigo-800">$indigo-800</div> - + <div class="p-3 bd-indigo-900">$indigo-900</div> - + </div> - + <div class="col-md-4 mb-3"> <div class="p-3 mb-2 position-relative swatch-purple"> <strong class="d-block">$purple</strong> #6f42c1 </div> - + <div class="p-3 bd-purple-100">$purple-100</div> - + <div class="p-3 bd-purple-200">$purple-200</div> - + <div class="p-3 bd-purple-300">$purple-300</div> - + <div class="p-3 bd-purple-400">$purple-400</div> - + <div class="p-3 bd-purple-500">$purple-500</div> - + <div class="p-3 bd-purple-600">$purple-600</div> - + <div class="p-3 bd-purple-700">$purple-700</div> - + <div class="p-3 bd-purple-800">$purple-800</div> - + <div class="p-3 bd-purple-900">$purple-900</div> - + </div> - + <div class="col-md-4 mb-3"> <div class="p-3 mb-2 position-relative swatch-pink"> <strong class="d-block">$pink</strong> #d63384 </div> - + <div class="p-3 bd-pink-100">$pink-100</div> - + <div class="p-3 bd-pink-200">$pink-200</div> - + <div class="p-3 bd-pink-300">$pink-300</div> - + <div class="p-3 bd-pink-400">$pink-400</div> - + <div class="p-3 bd-pink-500">$pink-500</div> - + <div class="p-3 bd-pink-600">$pink-600</div> - + <div class="p-3 bd-pink-700">$pink-700</div> - + <div class="p-3 bd-pink-800">$pink-800</div> - + <div class="p-3 bd-pink-900">$pink-900</div> - + </div> - + <div class="col-md-4 mb-3"> <div class="p-3 mb-2 position-relative swatch-red"> <strong class="d-block">$red</strong> #dc3545 </div> - + <div class="p-3 bd-red-100">$red-100</div> - + <div class="p-3 bd-red-200">$red-200</div> - + <div class="p-3 bd-red-300">$red-300</div> - + <div class="p-3 bd-red-400">$red-400</div> - + <div class="p-3 bd-red-500">$red-500</div> - + <div class="p-3 bd-red-600">$red-600</div> - + <div class="p-3 bd-red-700">$red-700</div> - + <div class="p-3 bd-red-800">$red-800</div> - + <div class="p-3 bd-red-900">$red-900</div> - + </div> - + <div class="col-md-4 mb-3"> <div class="p-3 mb-2 position-relative swatch-orange"> <strong class="d-block">$orange</strong> #fd7e14 </div> - + <div class="p-3 bd-orange-100">$orange-100</div> - + <div class="p-3 bd-orange-200">$orange-200</div> - + <div class="p-3 bd-orange-300">$orange-300</div> - + <div class="p-3 bd-orange-400">$orange-400</div> - + <div class="p-3 bd-orange-500">$orange-500</div> - + <div class="p-3 bd-orange-600">$orange-600</div> - + <div class="p-3 bd-orange-700">$orange-700</div> - + <div class="p-3 bd-orange-800">$orange-800</div> - + <div class="p-3 bd-orange-900">$orange-900</div> - + </div> - + <div class="col-md-4 mb-3"> <div class="p-3 mb-2 position-relative swatch-yellow"> <strong class="d-block">$yellow</strong> #ffc107 </div> - + <div class="p-3 bd-yellow-100">$yellow-100</div> - + <div class="p-3 bd-yellow-200">$yellow-200</div> - + <div class="p-3 bd-yellow-300">$yellow-300</div> - + <div class="p-3 bd-yellow-400">$yellow-400</div> - + <div class="p-3 bd-yellow-500">$yellow-500</div> - + <div class="p-3 bd-yellow-600">$yellow-600</div> - + <div class="p-3 bd-yellow-700">$yellow-700</div> - + <div class="p-3 bd-yellow-800">$yellow-800</div> - + <div class="p-3 bd-yellow-900">$yellow-900</div> - + </div> - + <div class="col-md-4 mb-3"> <div class="p-3 mb-2 position-relative swatch-green"> <strong class="d-block">$green</strong> #198754 </div> - + <div class="p-3 bd-green-100">$green-100</div> - + <div class="p-3 bd-green-200">$green-200</div> - + <div class="p-3 bd-green-300">$green-300</div> - + <div class="p-3 bd-green-400">$green-400</div> - + <div class="p-3 bd-green-500">$green-500</div> - + <div class="p-3 bd-green-600">$green-600</div> - + <div class="p-3 bd-green-700">$green-700</div> - + <div class="p-3 bd-green-800">$green-800</div> - + <div class="p-3 bd-green-900">$green-900</div> - + </div> - + <div class="col-md-4 mb-3"> <div class="p-3 mb-2 position-relative swatch-teal"> <strong class="d-block">$teal</strong> #20c997 </div> - + <div class="p-3 bd-teal-100">$teal-100</div> - + <div class="p-3 bd-teal-200">$teal-200</div> - + <div class="p-3 bd-teal-300">$teal-300</div> - + <div class="p-3 bd-teal-400">$teal-400</div> - + <div class="p-3 bd-teal-500">$teal-500</div> - + <div class="p-3 bd-teal-600">$teal-600</div> - + <div class="p-3 bd-teal-700">$teal-700</div> - + <div class="p-3 bd-teal-800">$teal-800</div> - + <div class="p-3 bd-teal-900">$teal-900</div> - + </div> - + <div class="col-md-4 mb-3"> <div class="p-3 mb-2 position-relative swatch-cyan"> <strong class="d-block">$cyan</strong> #0dcaf0 </div> - + <div class="p-3 bd-cyan-100">$cyan-100</div> - + <div class="p-3 bd-cyan-200">$cyan-200</div> - + <div class="p-3 bd-cyan-300">$cyan-300</div> - + <div class="p-3 bd-cyan-400">$cyan-400</div> - + <div class="p-3 bd-cyan-500">$cyan-500</div> - + <div class="p-3 bd-cyan-600">$cyan-600</div> - + <div class="p-3 bd-cyan-700">$cyan-700</div> - + <div class="p-3 bd-cyan-800">$cyan-800</div> - + <div class="p-3 bd-cyan-900">$cyan-900</div> - + </div> <div class="col-md-4 mb-3"> <div class="p-3 mb-2 position-relative swatch-gray-500"> @@ -838,24 +832,24 @@ #adb5bd </div> <div class="p-3 bd-gray-100">$gray-100</div> - + <div class="p-3 bd-gray-200">$gray-200</div> - + <div class="p-3 bd-gray-300">$gray-300</div> - + <div class="p-3 bd-gray-400">$gray-400</div> - + <div class="p-3 bd-gray-500">$gray-500</div> - + <div class="p-3 bd-gray-600">$gray-600</div> - + <div class="p-3 bd-gray-700">$gray-700</div> - + <div class="p-3 bd-gray-800">$gray-800</div> - + <div class="p-3 bd-gray-900">$gray-900</div> </div> - + <div class="col-md-4 mb-3"> <div class="p-3 mb-2 bd-black text-white"> <strong class="d-block">$black</strong> @@ -1001,7 +995,6 @@ <li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li> <li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li> <li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li> - <li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li> <li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li> </ul> </div> @@ -1018,12 +1011,12 @@ <script src="/docs/5.2/assets/js/docs.min.js"></script> <script> - + document.querySelectorAll('.btn-edit').forEach(btn => { btn.addEventListener('click', event => { const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML - + const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ') const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet') @@ -1067,7 +1060,7 @@ ${htmlSnippet.replace(/^/gm, ' ')} </script> - + <div class="position-fixed"><input type="text" tabindex="-1"></div> </body> |