mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-13 13:29:25 +01:00
Contrast colors added to theme-colors (#30044)
* Contrast colors added to theme-colors * redundant colors removed froms docs, theme-colors refactor * Add spaces for consistency * Adapt to the recent changes Co-authored-by: Sead Memic <sead.memic@intracto.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
parent
241f910dc5
commit
9cedf5b81e
@ -45,7 +45,7 @@ Use our background utility classes to quickly change the appearance of a badge.
|
||||
{{< example >}}
|
||||
{{< badge.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<span class="badge bg-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
|
||||
<span class="badge bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}}
|
||||
{{< /badge.inline >}}
|
||||
{{< /example >}}
|
||||
|
||||
@ -60,6 +60,6 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
|
||||
{{< example >}}
|
||||
{{< badge.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<span class="badge rounded-pill bg-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
|
||||
<span class="badge rounded-pill bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}}
|
||||
{{< /badge.inline >}}
|
||||
{{< /example >}}
|
||||
|
@ -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 (eq .name "info") }} text-body{{ else if not (or (eq .name "light") (eq .name "warning") (eq .name "info")) }} text-white{{ end }} bg-{{ .name }} mb-3" style="max-width: 18rem;">
|
||||
<div class="card{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} 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 (or (eq .name "light") (eq .name "warning") (eq .name "info")) }} text-{{ .name }}{{ end }}">
|
||||
<div class="card-body{{ if not .contrast_color }} 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>
|
||||
|
@ -14,7 +14,7 @@ We use a subset of all colors to create a smaller color palette for generating c
|
||||
{{< theme-colors.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-{{ .name }} {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-dark{{ else if (eq .name "info")}}text-body{{ else }}text-white{{ end }}">{{ .name | title }}</div>
|
||||
<div class="p-3 mb-3 bg-{{ .name }} {{ if .contrast_color }}text-{{ .contrast_color }}{{ else }}text-white{{ end }}">{{ .name | title }}</div>
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{< /theme-colors.inline >}}
|
||||
|
@ -23,7 +23,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 or (eq .name "light") (eq .name "warning") (eq .name "info") }} bg-dark{{ end }}">.text-{{ .name }}</p>
|
||||
<p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p>
|
||||
{{- end -}}
|
||||
{{< /colors.inline >}}
|
||||
<p class="text-body">.text-body</p>
|
||||
@ -40,7 +40,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") (eq .name "info") }}text-dark{{ else if (eq .name "info") }}text-body{{ else }}text-white{{ end }}">.bg-{{ .name }}</div>
|
||||
<div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
|
||||
{{- end -}}
|
||||
{{< /colors.inline >}}
|
||||
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
|
||||
@ -56,7 +56,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
|
||||
{{< markdown >}}
|
||||
{{< colors.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<div class="p-3 mb-2 bg-{{ .name }} bg-gradient {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-dark{{ else }}text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div>
|
||||
<div class="p-3 mb-2 bg-{{ .name }} bg-gradient{{ with .contrast_color }} text-{{ . }}{{ else }} text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div>
|
||||
{{- end -}}
|
||||
{{< /colors.inline >}}
|
||||
{{< /markdown >}}
|
||||
|
@ -8,9 +8,12 @@
|
||||
hex: "#dc3545"
|
||||
- name: warning
|
||||
hex: "#ffc107"
|
||||
contrast_color: dark
|
||||
- name: info
|
||||
hex: "#17a2b8"
|
||||
contrast_color: dark
|
||||
- name: light
|
||||
hex: "#f8f9fa"
|
||||
contrast_color: dark
|
||||
- name: dark
|
||||
hex: "#343a40"
|
||||
|
Loading…
x
Reference in New Issue
Block a user