diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/utilities/borders.md (renamed from site/content/docs/5.2/utilities/borders.md) | 30 |
1 files changed, 29 insertions, 1 deletions
diff --git a/site/content/docs/5.2/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md index 8d850a2..b4fa2f4 100644 --- a/site/content/docs/5.2/utilities/borders.md +++ b/site/content/docs/5.3/utilities/borders.md @@ -36,14 +36,20 @@ Or remove borders: ## Color +{{< callout info >}} +Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.border-*-subtle` utility will. This will be resolved in v6. +{{< /callout >}} + Change the border color using utilities built on our theme colors. {{< example class="bd-example-border-utils" >}} {{< border.inline >}} {{- range (index $.Site.Data "theme-colors") }} <span class="border border-{{ .name }}"></span> +<span class="border border-{{ .name }}-subtle"></span> {{- end -}} {{< /border.inline >}} +<span class="border border-black"></span> <span class="border border-white"></span> {{< /example >}} @@ -139,6 +145,14 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from {{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}} {{< /example >}} +{{< example class="bd-example-rounded-utils" >}} +{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" >}} +{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" >}} +{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" >}} +{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" >}} +{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" >}} +{{< /example >}} + ## CSS ### Variables @@ -153,11 +167,25 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from {{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}} +Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode: + +{{< scss-docs name="theme-border-subtle-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" >}} + +### Sass maps + +Color mode adaptive border colors are also available as a Sass map: + +{{< scss-docs name="theme-border-subtle-map" file="scss/_maps.scss" >}} + +{{< scss-docs name="theme-border-subtle-dark-map" file="scss/_maps.scss" >}} + ### Sass mixins {{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}} -### Utilities API +### Sass utilities API Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) |