diff options
| author | Gaël Poupard <[email protected]> | 2020-03-30 14:07:09 +0200 |
|---|---|---|
| committer | Gaël Poupard <[email protected]> | 2020-05-20 09:49:18 +0200 |
| commit | a7e1b914ef43fee0d309b9463f7f5bc5442845ba (patch) | |
| tree | 5a54f5ac3949059a0a68ea27d46aee5dd7bd7802 | |
| parent | 1b8bf5b56c77a60aab4c228aada7565f77db17ce (diff) | |
| download | bootstrap-a7e1b914ef43fee0d309b9463f7f5bc5442845ba.tar.xz bootstrap-a7e1b914ef43fee0d309b9463f7f5bc5442845ba.zip | |
docs(colors): better color utilities pairing to ensure sufficient contrast
| -rw-r--r-- | site/content/docs/5.0/components/card.md | 4 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/navbar.md | 2 | ||||
| -rw-r--r-- | site/content/docs/5.0/utilities/colors.md | 4 |
3 files changed, 5 insertions, 5 deletions
diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md index 3b250db73..015b5d936 100644 --- a/site/content/docs/5.0/components/card.md +++ b/site/content/docs/5.0/components/card.md @@ -422,7 +422,7 @@ Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to chan {{< example >}} {{< card.inline >}} {{- 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-body"> <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") }} <div class="card border-{{ .name }} mb-3" style="max-width: 18rem;"> <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> <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> diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index e50821b8c..e47833e8b 100644 --- a/site/content/docs/5.0/components/navbar.md +++ b/site/content/docs/5.0/components/navbar.md @@ -338,7 +338,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </ul> <form class="d-flex"> <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> </div> </div> diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md index 86f474146..76788034b 100644 --- a/site/content/docs/5.0/utilities/colors.md +++ b/site/content/docs/5.0/utilities/colors.md @@ -13,7 +13,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t {{< example >}} {{< colors.inline >}} {{- 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 -}} {{< /colors.inline >}} <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 >}} {{< colors.inline >}} {{- 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 -}} {{< /colors.inline >}} <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> |