From f21b44d4067c4ebc0a8eb0309ca91d5e5959eeba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jan 2021 21:07:41 -0800 Subject: [PATCH] WIP: Mention variables, mixins, and loops in docs --- scss/_variables.scss | 24 +++++++++++----------- scss/mixins/_alert.scss | 2 ++ site/content/docs/5.0/components/alerts.md | 18 ++++++++++++++++ 3 files changed, 32 insertions(+), 12 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 3d677728a..01b59d999 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1184,18 +1184,18 @@ $modal-scale-transform: scale(1.02) !default; // // Define alert colors, border radius, and padding. -$alert-padding-y: $spacer !default; -$alert-padding-x: $spacer !default; -$alert-margin-bottom: 1rem !default; -$alert-border-radius: $border-radius !default; -$alert-link-font-weight: $font-weight-bold !default; -$alert-border-width: $border-width !default; - -$alert-bg-scale: -80% !default; -$alert-border-scale: -70% !default; -$alert-color-scale: 40% !default; - -$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side +// scss-docs-start alert-variables +$alert-padding-y: $spacer !default; +$alert-padding-x: $spacer !default; +$alert-margin-bottom: 1rem !default; +$alert-border-radius: $border-radius !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width: $border-width !default; +$alert-bg-scale: -80% !default; +$alert-border-scale: -70% !default; +$alert-color-scale: 40% !default; +$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side +// scss-docs-end alert-variables // Progress bars diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss index 99ebbc305..f3eb59511 100644 --- a/scss/mixins/_alert.scss +++ b/scss/mixins/_alert.scss @@ -1,3 +1,4 @@ +// scss-docs-start alert-variant-mixin @mixin alert-variant($background, $border, $color) { color: $color; @include gradient-bg($background); @@ -7,3 +8,4 @@ color: shade-color($color, 20%); } } +// scss-docs-end alert-variant-mixin diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index f35a044ae..4d4359c72 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -71,6 +71,24 @@ You can see this in action with a live demo: When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element. {{< /callout >}} +## Sass + +### Variables + +{{< scss-docs name="alert-variables" file="scss/_variables.scss" >}} + +### Variant mixin + +Used to create modifier classes for our alerts. + +{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} + +### Loop + +Loop that generates the modifier classes with the `alert-variant()` mixin. + +{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} + ## JavaScript behavior ### Triggers