diff options
| author | Mark Otto <[email protected]> | 2020-12-10 01:01:13 -0800 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-12-10 11:01:13 +0200 |
| commit | 17bb67dd5b9776ec08cd838dee9fb2203c8b8da1 (patch) | |
| tree | 1ed593bd929014e3f62f14773afc7a1fffbf307b | |
| parent | fbfaba5bb8de1abf5d30bd9df84fa35dd1bec589 (diff) | |
| download | bootstrap-17bb67dd5b9776ec08cd838dee9fb2203c8b8da1.tar.xz bootstrap-17bb67dd5b9776ec08cd838dee9fb2203c8b8da1.zip | |
Add hex values to colors (#32411)
| -rw-r--r-- | site/content/docs/4.5/getting-started/theming.md | 15 |
1 files changed, 12 insertions, 3 deletions
diff --git a/site/content/docs/4.5/getting-started/theming.md b/site/content/docs/4.5/getting-started/theming.md index 7e9420017..51e852cca 100644 --- a/site/content/docs/4.5/getting-started/theming.md +++ b/site/content/docs/4.5/getting-started/theming.md @@ -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> |