rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP: Mention variables, mixins, and loops in docs

Browse source
This commit is contained in:
Mark Otto 2021-01-09 21:07:41 -08:00 • committed by XhmikosR
parent 69afafe811
commit f21b44d406
3 changed files with 32 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

24
scss/_variables.scss
View file

@ -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

2
scss/mixins/_alert.scss
View file

@ -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

18
site/content/docs/5.0/components/alerts.md
View file

@ -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