From 671c95bc8cf4e1046a66fb800258d8a9bed9867b Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 25 Jun 2020 15:34:03 +0300 Subject: [PATCH] Backport #31135 * 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. * Change heading level otherwise the assistive technology callout looks like it's hierarchically under the "Dealing with specificity" heading --- site/docs/4.5/utilities/colors.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/site/docs/4.5/utilities/colors.md b/site/docs/4.5/utilities/colors.md index 55699adb8c72..bbe22d10bafa 100644 --- a/site/docs/4.5/utilities/colors.md +++ b/site/docs/4.5/utilities/colors.md @@ -6,6 +6,15 @@ group: utilities toc: true --- +{% capture callout %} +#### 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. +{% endcapture %} +{% include callout.html content=callout type="info" %} + +{% include callout-warning-color-assistive-technologies.md %} + ## Color {% capture example %} @@ -47,12 +56,3 @@ When `$enable-gradients` is set to `true` (default is `false`), you can use `.bg {% for color in site.data.theme-colors %} - `.bg-gradient-{{ color.name }}`{% endfor %} - -{% capture callout %} -#### 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. -{% endcapture %} -{% include callout.html content=callout type="info" %} - -{% include callout-warning-color-assistive-technologies.md %}