rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Add hex values to colors (#32411)

Browse Source
This commit is contained in:
Mark Otto 2020-12-10 01:01:13 -08:00 committed by GitHub
parent fbfaba5bb8
commit 17bb67dd5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
site/content/docs/4.5/getting-started/theming.md
View File

@ -301,7 +301,10 @@ All colors available in Bootstrap 4, are available as Sass variables and a Sass
{{- range $.Site.Data.colors }}
{{- if (and (not (eq .name "white")) (not (eq .name "gray")) (not (eq .name "gray-dark"))) }}
<div class="col-md-4">
<div class="p-3 mb-3 swatch-{{ .name }}">{{ .name | title }}</div>
<div class="p-3 mb-3 text-monospace swatch-{{ .name }}">
<strong class="d-block">${{ .name }}</strong>
<small>{{ .hex }}</small>
</div>
</div>
{{ end -}}
{{ end -}}
@ -332,7 +335,10 @@ 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")) }}text-dark{{ else }}text-white{{ end }}">{{ .name | title }}</div>
<div class="p-3 mb-3 text-monospace bg-{{ .name }} {{ if (or (eq .name "light") (eq .name "warning")) }}text-dark{{ else }}text-white{{ end }}">
<strong class="d-block">${{ .name }}</strong>
<small>{{ .hex }}</small>
</div>
</div>
{{ end -}}
{{< /theme-colors.inline >}}
@ -346,7 +352,10 @@ An expansive set of gray variables and a Sass map in `scss/_variables.scss` for
<div class="col-md-4">
{{< theme-colors.inline >}}
{{- range $.Site.Data.grays }}
<div class="p-3 swatch-{{ .name }}">{{ .name | title }}</div>
<div class="p-3 text-monospace swatch-{{ .name }}">
<strong class="d-block">$gray-{{ .name }}</strong>
<small>{{ .hex }}</small>
</div>
{{ end -}}
{{< /theme-colors.inline >}}
</div>