diff options
| -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> |