From ddcbf7a51b068150dce47b6db29abff91ca6a446 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sun, 21 Jun 2020 13:20:21 +0100 Subject: [PATCH 1/2] Move color utility callouts to start of page Hierarchically/structurally, in the position they are currently at, the two callouts seem like they "belong" just to the "background color" section. Moving them to the start makes it clearer that those two callouts relate to everything in the page (both "Color" and "Background color" classes. --- site/content/docs/5.0/utilities/colors.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md index 76788034bef1..8b377190d760 100644 --- a/site/content/docs/5.0/utilities/colors.md +++ b/site/content/docs/5.0/utilities/colors.md @@ -6,6 +6,16 @@ group: utilities toc: true --- +{{< callout info >}} +#### Dealing with specificity + +Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class. +{{< /callout >}} + +{{< callout info >}} +{{< partial "callout-warning-color-assistive-technologies.md" >}} +{{< /callout >}} + ## Color Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states. @@ -50,13 +60,3 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs- {{- end -}} {{< /colors.inline >}} {{< /markdown >}} - -{{< callout info >}} -#### Dealing with specificity - -Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class. -{{< /callout >}} - -{{< callout info >}} -{{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} From 54ff2d285ca7d0f2d035b6acf110815677fb045b Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sun, 21 Jun 2020 13:26:48 +0100 Subject: [PATCH 2/2] Change heading level otherwise the assistive technology callout looks like it's hierarchically under the "Dealing with specificity" heading --- site/content/docs/5.0/utilities/colors.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md index 8b377190d760..6ca7a7d1235c 100644 --- a/site/content/docs/5.0/utilities/colors.md +++ b/site/content/docs/5.0/utilities/colors.md @@ -7,7 +7,7 @@ toc: true --- {{< callout info >}} -#### Dealing with specificity +##### Dealing with specificity Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class. {{< /callout >}}