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

docs(colors): better color utilities pairing to ensure sufficient contrast

Browse Source
This commit is contained in:
Gaël Poupard
2020-03-30 14:07:09 +02:00
committed by Gaël Poupard
parent 1b8bf5b56c
commit a7e1b914ef
3 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
site/content/docs/5.0/components/card.md
View File

@@ -422,7 +422,7 @@ Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to chan
{{< example >}} {{< example >}}
{{< card.inline >}} {{< card.inline >}}
{{- range (index $.Site.Data "theme-colors") }} {{- range (index $.Site.Data "theme-colors") }}
<div class="card{{ if not (or (eq .name "light") (eq .name "warning")) }} text-white{{ end }} bg-{{ .name }} mb-3" style="max-width: 18rem;"> <div class="card{{ if (eq .name "info") }} text-body {{ else if not (or (eq .name "light") (eq .name "warning")) }} text-white{{ end }} bg-{{ .name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div> <div class="card-header">Header</div>
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ .name | title }} card title</h5> <h5 class="card-title">{{ .name | title }} card title</h5>
@@ -446,7 +446,7 @@ Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the
{{- range (index $.Site.Data "theme-colors") }} {{- range (index $.Site.Data "theme-colors") }}
<div class="card border-{{ .name }} mb-3" style="max-width: 18rem;"> <div class="card border-{{ .name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div> <div class="card-header">Header</div>
<div class="card-body{{ if not (eq .name "light") }} text-{{ .name }}{{ end }}"> <div class="card-body{{ if not (or (eq .name "light") (eq .name "warning") (eq .name "info")) }} text-{{ .name }}{{ end }}">
<h5 class="card-title">{{ .name | title }} card title</h5> <h5 class="card-title">{{ .name | title }} card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div> </div>

2
site/content/docs/5.0/components/navbar.md
View File

@@ -338,7 +338,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</ul> </ul>
<form class="d-flex"> <form class="d-flex">
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-info" type="submit">Search</button> <button class="btn btn-outline-light" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>

4
site/content/docs/5.0/utilities/colors.md
View File

@@ -13,7 +13,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
{{< example >}} {{< example >}}
{{< colors.inline >}} {{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }} {{- range (index $.Site.Data "theme-colors") }}
<p class="text-{{ .name }}{{ if eq .name "light" }} bg-dark{{ end }}">.text-{{ .name }}</p> <p class="text-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }} bg-dark{{ end }}">.text-{{ .name }}</p>
{{- end -}} {{- end -}}
{{< /colors.inline >}} {{< /colors.inline >}}
<p class="text-body">.text-body</p> <p class="text-body">.text-body</p>
@@ -30,7 +30,7 @@ Similar to the contextual text color classes, easily set the background of an el
{{< example >}} {{< example >}}
{{< colors.inline >}} {{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }} {{- range (index $.Site.Data "theme-colors") }}
<div class="p-3 mb-2 bg-{{ .name }} {{ if or (eq .name "light") (eq .name "warning") }}text-dark{{ else }}text-white{{ end }}">.bg-{{ .name }}</div> <div class="p-3 mb-2 bg-{{ .name }} {{ if or (eq .name "light") (eq .name "warning") }}text-dark{{ else if (eq .name "info") }}text-body{{ else }}text-white{{ end }}">.bg-{{ .name }}</div>
{{- end -}} {{- end -}}
{{< /colors.inline >}} {{< /colors.inline >}}
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>