mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 17:14:04 +02:00
Code Issues Releases Wiki Activity

Fix some utils

Browse Source
This commit is contained in:
Mark Otto
2025-05-30 21:03:40 -07:00
parent 6359cb7d0f
commit 058a270338
3 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
site/src/components/DocsSidebar.astro
View File

@@ -17,15 +17,15 @@ const sidebar = getData('sidebar')
return ( return (
<li class="bd-links-group py-2"> <li class="bd-links-group py-2">
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold"> <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
{/* {group.icon && ( {group.icon && (
<svg <svg
class="bi me-2" class="bi me-2"
style={group.icon_color && `color: var(--bs-${group.icon_color});`} style={group.icon_color && `color: var(--bs-${group.icon_color}-400);`}
aria-hidden="true" aria-hidden="true"
> >
<use xlink:href={`#${group.icon}`} /> <use xlink:href={`#${group.icon}`} />
</svg> </svg>
)} */} )}
{group.title} {group.title}
</strong> </strong>
<ul class="list-unstyled fw-normal pb-2"> <ul class="list-unstyled fw-normal pb-2">

2
site/src/components/home/MastHead.astro
View File

@@ -10,7 +10,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
<div class="container-2xl bd-gutter"> <div class="container-2xl bd-gutter">
<div class="col-md-8 mx-auto text-center"> <div class="col-md-8 mx-auto text-center">
<a <a
class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 color-fg lh-sm text-decoration-none"
href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol" href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol"
rel="noopener" rel="noopener"
target="_blank" target="_blank"

12
site/src/content/docs/customize/color.mdx
View File

@@ -70,7 +70,7 @@ We use a subset of all colors to create a smaller color palette for generating c
<div class="d-flex flex-column gap-2 mb-4"> <div class="d-flex flex-column gap-2 mb-4">
<h4>Background</h4> <h4>Background</h4>
<div class="grid grid-cols-5 gap-3 text-lowercase"> <div class="grid grid-cols-5 gap-3 text-lowercase">
<ThemeColorSwatch variable="bg-0" /> <ThemeColorSwatch variable="bg" />
<ThemeColorSwatch variable="bg-1" /> <ThemeColorSwatch variable="bg-1" />
<ThemeColorSwatch variable="bg-2" /> <ThemeColorSwatch variable="bg-2" />
<ThemeColorSwatch variable="bg-3" /> <ThemeColorSwatch variable="bg-3" />
@@ -80,7 +80,7 @@ We use a subset of all colors to create a smaller color palette for generating c
<div class="d-flex flex-column gap-2 mb-4"> <div class="d-flex flex-column gap-2 mb-4">
<h4>Foreground</h4> <h4>Foreground</h4>
<div class="grid grid-cols-5 gap-3 text-lowercase"> <div class="grid grid-cols-5 gap-3 text-lowercase">
<ThemeColorSwatch variable="fg-0" /> <ThemeColorSwatch variable="fg" />
<ThemeColorSwatch variable="fg-1" /> <ThemeColorSwatch variable="fg-1" />
<ThemeColorSwatch variable="fg-2" /> <ThemeColorSwatch variable="fg-2" />
<ThemeColorSwatch variable="fg-3" /> <ThemeColorSwatch variable="fg-3" />
@@ -113,10 +113,10 @@ Here are some examples of the new colors in action:
Here's a little guidance on pairing the background and border colors together. Essentially, the default `.border` utility and `border-color` value should work great 90% of the time. Here's a little guidance on pairing the background and border colors together. Essentially, the default `.border` utility and `border-color` value should work great 90% of the time.
<Example code={`<div class="p-3 mb-3 bg-0" style="border: 1px solid var(--bs-border-emphasized)">.bg-0.border-emphasized</div> <Example code={`<div class="p-3 mb-3 bg" style="border: 1px solid var(--bs-border-emphasized)">.bg.border-emphasized</div>
<div class="p-3 mb-3 bg-0" style="border: 1px solid var(--bs-border)">.bg-0.border</div> <div class="p-3 mb-3 bg" style="border: 1px solid var(--bs-border)">.bg.border</div>
<div class="p-3 mb-3 bg-0" style="border: 1px solid var(--bs-border-muted)">.bg-0.border-muted</div> <div class="p-3 mb-3 bg" style="border: 1px solid var(--bs-border-muted)">.bg.border-muted</div>
<div class="p-3 mb-3 bg-0" style="border: 1px solid var(--bs-border-subtle)">.bg-0.border-subtle</div>`} /> <div class="p-3 mb-3 bg" style="border: 1px solid var(--bs-border-subtle)">.bg.border-subtle</div>`} />
For other situations, where you have a tinted background color like `.bg-1`, `.bg-2`, or `.bg-3`, consider using the emphsized border variant to maintiain a little contrast between the background and border. For other situations, where you have a tinted background color like `.bg-1`, `.bg-2`, or `.bg-3`, consider using the emphsized border variant to maintiain a little contrast between the background and border.