Add Sass sections to component pages
This commit is contained in:
Mark Otto
XhmikosR
parent
f21b44d406
commit
31214ca03c
30 changed files with 327 additions and 6 deletions
|
|
@ -55,6 +55,7 @@
|
|||
// Alternate buttons
|
||||
//
|
||||
|
||||
// scss-docs-start btn-variant-loops
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-variant($value, $value);
|
||||
|
|
@ -66,6 +67,7 @@
|
|||
@include button-outline-variant($value);
|
||||
}
|
||||
}
|
||||
// scss-docs-end btn-variant-loops
|
||||
|
||||
|
||||
//
|
||||
|
|
|
|||
|
|
@ -202,6 +202,7 @@
|
|||
.modal-xl { max-width: $modal-xl; }
|
||||
}
|
||||
|
||||
// scss-docs-start modal-fullscreen-loop
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
$postfix: if($infix != "", $infix + "-down", "");
|
||||
|
|
@ -233,3 +234,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end modal-fullscreen-loop
|
||||
|
|
|
|||
|
|
@ -148,6 +148,7 @@
|
|||
background-size: 100%;
|
||||
}
|
||||
|
||||
// scss-docs-start navbar-expand-loop
|
||||
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||
// where your navbar collapses.
|
||||
.navbar-expand {
|
||||
|
|
@ -185,6 +186,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end navbar-expand-loop
|
||||
|
||||
|
||||
// Navbar themes
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
// Disable animation if transitions are disabled
|
||||
|
||||
// scss-docs-start progress-keyframes
|
||||
@if $enable-transitions {
|
||||
@keyframes progress-bar-stripes {
|
||||
0% { background-position-x: $progress-height; }
|
||||
}
|
||||
}
|
||||
// scss-docs-end progress-keyframes
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@
|
|||
// Rotating border
|
||||
//
|
||||
|
||||
// scss-docs-start spinner-border-keyframes
|
||||
@keyframes spinner-border {
|
||||
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
|
||||
}
|
||||
// scss-docs-end spinner-border-keyframes
|
||||
|
||||
.spinner-border {
|
||||
display: inline-block;
|
||||
|
|
@ -28,6 +30,7 @@
|
|||
// Growing circle
|
||||
//
|
||||
|
||||
// scss-docs-start spinner-grow-keyframes
|
||||
@keyframes spinner-grow {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
|
|
@ -37,6 +40,7 @@
|
|||
transform: none;
|
||||
}
|
||||
}
|
||||
// scss-docs-end spinner-grow-keyframes
|
||||
|
||||
.spinner-grow {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -344,6 +344,7 @@ $container-padding-x: $grid-gutter-width / 2 !default;
|
|||
//
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
// scss-docs-start border-variables
|
||||
$border-width: 1px !default;
|
||||
$border-widths: (
|
||||
0: 0,
|
||||
|
|
@ -355,11 +356,14 @@ $border-widths: (
|
|||
) !default;
|
||||
|
||||
$border-color: $gray-300 !default;
|
||||
// scss-docs-end border-variables
|
||||
|
||||
// scss-docs-start border-radius-variables
|
||||
$border-radius: .25rem !default;
|
||||
$border-radius-sm: .2rem !default;
|
||||
$border-radius-lg: .3rem !default;
|
||||
$border-radius-pill: 50rem !default;
|
||||
// scss-docs-end border-radius-variables
|
||||
|
||||
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
|
||||
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
|
||||
|
|
@ -577,6 +581,7 @@ $input-btn-border-width: $border-width !default;
|
|||
//
|
||||
// For each of Bootstrap's buttons, define text, background, and border color.
|
||||
|
||||
// scss-docs-start btn-variables
|
||||
$btn-padding-y: $input-btn-padding-y !default;
|
||||
$btn-padding-x: $input-btn-padding-x !default;
|
||||
$btn-font-family: $input-btn-font-family !default;
|
||||
|
|
@ -620,6 +625,7 @@ $btn-active-bg-shade-amount: 20% !default;
|
|||
$btn-active-bg-tint-amount: 20% !default;
|
||||
$btn-active-border-shade-amount: 25% !default;
|
||||
$btn-active-border-tint-amount: 10% !default;
|
||||
// scss-docs-end btn-variables
|
||||
|
||||
|
||||
// Forms
|
||||
|
|
@ -854,6 +860,7 @@ $zindex-tooltip: 1070 !default;
|
|||
|
||||
// Navs
|
||||
|
||||
// scss-docs-start nav-variables
|
||||
$nav-link-padding-y: .5rem !default;
|
||||
$nav-link-padding-x: 1rem !default;
|
||||
$nav-link-font-size: null !default;
|
||||
|
|
@ -874,10 +881,12 @@ $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg
|
|||
$nav-pills-border-radius: $border-radius !default;
|
||||
$nav-pills-link-active-color: $component-active-color !default;
|
||||
$nav-pills-link-active-bg: $component-active-bg !default;
|
||||
// scss-docs-end nav-variables
|
||||
|
||||
|
||||
// Navbar
|
||||
|
||||
// scss-docs-start navbar-variables
|
||||
$navbar-padding-y: $spacer / 2 !default;
|
||||
$navbar-padding-x: null !default;
|
||||
|
||||
|
|
@ -896,7 +905,9 @@ $navbar-toggler-font-size: $font-size-lg !default;
|
|||
$navbar-toggler-border-radius: $btn-border-radius !default;
|
||||
$navbar-toggler-focus-width: $btn-focus-width !default;
|
||||
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
|
||||
// scss-docs-end navbar-variables
|
||||
|
||||
// scss-docs-start navbar-theme-variables
|
||||
$navbar-dark-color: rgba($white, .55) !default;
|
||||
$navbar-dark-hover-color: rgba($white, .75) !default;
|
||||
$navbar-dark-active-color: $white !default;
|
||||
|
|
@ -915,12 +926,14 @@ $navbar-light-brand-color: $navbar-light-active-color !default;
|
|||
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
|
||||
$navbar-dark-brand-color: $navbar-dark-active-color !default;
|
||||
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
|
||||
// scss-docs-end navbar-theme-variables
|
||||
|
||||
|
||||
// Dropdowns
|
||||
//
|
||||
// Dropdown menu container and contents.
|
||||
|
||||
// scss-docs-start dropdown-variables
|
||||
$dropdown-min-width: 10rem !default;
|
||||
$dropdown-padding-x: 0 !default;
|
||||
$dropdown-padding-y: .5rem !default;
|
||||
|
|
@ -950,7 +963,9 @@ $dropdown-item-padding-x: $spacer !default;
|
|||
|
||||
$dropdown-header-color: $gray-600 !default;
|
||||
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
|
||||
// scss-docs-end dropdown-variables
|
||||
|
||||
// scss-docs-start dropdown-dark-variables
|
||||
$dropdown-dark-color: $gray-300 !default;
|
||||
$dropdown-dark-bg: $gray-800 !default;
|
||||
$dropdown-dark-border-color: $dropdown-border-color !default;
|
||||
|
|
@ -963,10 +978,12 @@ $dropdown-dark-link-active-color: $dropdown-link-active-color !default;
|
|||
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
|
||||
$dropdown-dark-link-disabled-color: $gray-500 !default;
|
||||
$dropdown-dark-header-color: $gray-500 !default;
|
||||
// scss-docs-end dropdown-dark-variables
|
||||
|
||||
|
||||
// Pagination
|
||||
|
||||
// scss-docs-start pagination-variables
|
||||
$pagination-padding-y: .375rem !default;
|
||||
$pagination-padding-x: .75rem !default;
|
||||
$pagination-padding-y-sm: .25rem !default;
|
||||
|
|
@ -1002,9 +1019,12 @@ $pagination-transition: color .15s ease-in-out, background-color .1
|
|||
|
||||
$pagination-border-radius-sm: $border-radius-sm !default;
|
||||
$pagination-border-radius-lg: $border-radius-lg !default;
|
||||
// scss-docs-end pagination-variables
|
||||
|
||||
|
||||
// Cards
|
||||
|
||||
// scss-docs-start card-variables
|
||||
$card-spacer-y: $spacer !default;
|
||||
$card-spacer-x: $spacer !default;
|
||||
$card-title-spacer-y: $spacer / 2 !default;
|
||||
|
|
@ -1019,12 +1039,13 @@ $card-cap-color: null !default;
|
|||
$card-height: null !default;
|
||||
$card-color: null !default;
|
||||
$card-bg: $white !default;
|
||||
|
||||
$card-img-overlay-padding: $spacer !default;
|
||||
|
||||
$card-group-margin: $grid-gutter-width / 2 !default;
|
||||
// scss-docs-end card-variables
|
||||
|
||||
// Accordion
|
||||
|
||||
// scss-docs-start accordion-variables
|
||||
$accordion-padding-y: 1rem !default;
|
||||
$accordion-padding-x: 1.25rem !default;
|
||||
$accordion-color: $body-color !default;
|
||||
|
|
@ -1055,9 +1076,11 @@ $accordion-icon-transform: rotate(180deg) !default;
|
|||
|
||||
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
||||
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
||||
// scss-docs-end accordion-variables
|
||||
|
||||
// Tooltips
|
||||
|
||||
// scss-docs-start tooltip-variables
|
||||
$tooltip-font-size: $font-size-sm !default;
|
||||
$tooltip-max-width: 200px !default;
|
||||
$tooltip-color: $white !default;
|
||||
|
|
@ -1071,18 +1094,22 @@ $tooltip-margin: 0 !default;
|
|||
$tooltip-arrow-width: .8rem !default;
|
||||
$tooltip-arrow-height: .4rem !default;
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
// scss-docs-end tooltip-variables
|
||||
|
||||
// Form tooltips must come after regular tooltips
|
||||
// scss-docs-start tooltip-feedback-variables
|
||||
$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
|
||||
$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
|
||||
$form-feedback-tooltip-font-size: $tooltip-font-size !default;
|
||||
$form-feedback-tooltip-line-height: null !default;
|
||||
$form-feedback-tooltip-opacity: $tooltip-opacity !default;
|
||||
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
|
||||
// scss-docs-start tooltip-feedback-variables
|
||||
|
||||
|
||||
// Popovers
|
||||
|
||||
// scss-docs-start popover-variables
|
||||
$popover-font-size: $font-size-sm !default;
|
||||
$popover-bg: $white !default;
|
||||
$popover-max-width: 276px !default;
|
||||
|
|
@ -1106,10 +1133,12 @@ $popover-arrow-height: .5rem !default;
|
|||
$popover-arrow-color: $popover-bg !default;
|
||||
|
||||
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
|
||||
// scss-docs-end popover-variables
|
||||
|
||||
|
||||
// Toasts
|
||||
|
||||
// scss-docs-start toast-variables
|
||||
$toast-max-width: 350px !default;
|
||||
$toast-padding-x: .75rem !default;
|
||||
$toast-padding-y: .5rem !default;
|
||||
|
|
@ -1125,24 +1154,26 @@ $toast-spacing: $container-padding-x !default;
|
|||
$toast-header-color: $gray-600 !default;
|
||||
$toast-header-background-color: rgba($white, .85) !default;
|
||||
$toast-header-border-color: rgba(0, 0, 0, .05) !default;
|
||||
// scss-docs-end toast-variables
|
||||
|
||||
|
||||
// Badges
|
||||
|
||||
// scss-docs-start badge-variables
|
||||
$badge-font-size: .75em !default;
|
||||
$badge-font-weight: $font-weight-bold !default;
|
||||
$badge-color: $white !default;
|
||||
$badge-padding-y: .35em !default;
|
||||
$badge-padding-x: .65em !default;
|
||||
$badge-border-radius: $border-radius !default;
|
||||
// scss-docs-end badge-variables
|
||||
|
||||
|
||||
// Modals
|
||||
|
||||
// Padding applied to the modal body
|
||||
// scss-docs-start modal-variables
|
||||
$modal-inner-padding: $spacer !default;
|
||||
|
||||
// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
|
||||
$modal-footer-margin-between: .5rem !default;
|
||||
|
||||
$modal-dialog-margin: .5rem !default;
|
||||
|
|
@ -1178,6 +1209,7 @@ $modal-fade-transform: translate(0, -50px) !default;
|
|||
$modal-show-transform: none !default;
|
||||
$modal-transition: transform .3s ease-out !default;
|
||||
$modal-scale-transform: scale(1.02) !default;
|
||||
// scss-docs-end modal-variables
|
||||
|
||||
|
||||
// Alerts
|
||||
|
|
@ -1200,6 +1232,7 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers widt
|
|||
|
||||
// Progress bars
|
||||
|
||||
// scss-docs-start progress-variables
|
||||
$progress-height: 1rem !default;
|
||||
$progress-font-size: $font-size-base * .75 !default;
|
||||
$progress-bg: $gray-200 !default;
|
||||
|
|
@ -1209,10 +1242,12 @@ $progress-bar-color: $white !default;
|
|||
$progress-bar-bg: $primary !default;
|
||||
$progress-bar-animation-timing: 1s linear infinite !default;
|
||||
$progress-bar-transition: width .6s ease !default;
|
||||
// scss-docs-end progress-variables
|
||||
|
||||
|
||||
// List group
|
||||
|
||||
// scss-docs-start list-group-variables
|
||||
$list-group-color: null !default;
|
||||
$list-group-bg: $white !default;
|
||||
$list-group-border-color: rgba($black, .125) !default;
|
||||
|
|
@ -1237,16 +1272,19 @@ $list-group-action-hover-color: $list-group-action-color !default;
|
|||
|
||||
$list-group-action-active-color: $body-color !default;
|
||||
$list-group-action-active-bg: $gray-200 !default;
|
||||
// scss-docs-end list-group-variables
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
|
||||
// scss-docs-start thumbnail-variables
|
||||
$thumbnail-padding: .25rem !default;
|
||||
$thumbnail-bg: $body-bg !default;
|
||||
$thumbnail-border-width: $border-width !default;
|
||||
$thumbnail-border-color: $gray-300 !default;
|
||||
$thumbnail-border-radius: $border-radius !default;
|
||||
$thumbnail-box-shadow: $box-shadow-sm !default;
|
||||
// scss-docs-end thumbnail-variables
|
||||
|
||||
|
||||
// Figures
|
||||
|
|
@ -1257,6 +1295,7 @@ $figure-caption-color: $gray-600 !default;
|
|||
|
||||
// Breadcrumbs
|
||||
|
||||
// scss-docs-start breadcrumb-variables
|
||||
$breadcrumb-font-size: null !default;
|
||||
$breadcrumb-padding-y: 0 !default;
|
||||
$breadcrumb-padding-x: 0 !default;
|
||||
|
|
@ -1268,9 +1307,11 @@ $breadcrumb-active-color: $gray-600 !default;
|
|||
$breadcrumb-divider: quote("/") !default;
|
||||
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
|
||||
$breadcrumb-border-radius: null !default;
|
||||
// scss-docs-end breadcrumb-variables
|
||||
|
||||
// Carousel
|
||||
|
||||
// scss-docs-start carousel-variables
|
||||
$carousel-control-color: $white !default;
|
||||
$carousel-control-width: 15% !default;
|
||||
$carousel-control-opacity: .5 !default;
|
||||
|
|
@ -1302,10 +1343,12 @@ $carousel-transition: transform $carousel-transition-duration eas
|
|||
$carousel-dark-indicator-active-bg: $black !default;
|
||||
$carousel-dark-caption-color: $black !default;
|
||||
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
|
||||
// scss-docs-end carousel-variables
|
||||
|
||||
|
||||
// Spinners
|
||||
|
||||
// scss-docs-start spinner-variables
|
||||
$spinner-width: 2rem !default;
|
||||
$spinner-height: $spinner-width !default;
|
||||
$spinner-border-width: .25em !default;
|
||||
|
|
@ -1314,10 +1357,12 @@ $spinner-animation-speed: .75s !default;
|
|||
$spinner-width-sm: 1rem !default;
|
||||
$spinner-height-sm: $spinner-width-sm !default;
|
||||
$spinner-border-width-sm: .2em !default;
|
||||
// scss-docs-end spinner-variables
|
||||
|
||||
|
||||
// Close
|
||||
|
||||
// scss-docs-start close-variables
|
||||
$btn-close-width: 1em !default;
|
||||
$btn-close-height: $btn-close-width !default;
|
||||
$btn-close-padding-x: .25em !default;
|
||||
|
|
@ -1330,6 +1375,8 @@ $btn-close-hover-opacity: .75 !default;
|
|||
$btn-close-focus-opacity: 1 !default;
|
||||
$btn-close-disabled-opacity: .25 !default;
|
||||
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
|
||||
// scss-docs-end close-variables
|
||||
|
||||
|
||||
// Code
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
@return $return;
|
||||
}
|
||||
|
||||
// scss-docs-start border-radius-mixins
|
||||
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
|
||||
@if $enable-rounded {
|
||||
border-radius: valid-radius($radius);
|
||||
|
|
@ -74,3 +75,4 @@
|
|||
border-bottom-left-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
// scss-docs-end border-radius-mixins
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
|
||||
// scss-docs-start btn-variant-mixin
|
||||
@mixin button-variant(
|
||||
$background,
|
||||
$border,
|
||||
|
|
@ -71,7 +72,9 @@
|
|||
border-color: $disabled-border;
|
||||
}
|
||||
}
|
||||
// scss-docs-end btn-variant-mixin
|
||||
|
||||
// scss-docs-start btn-outline-variant-mixin
|
||||
@mixin button-outline-variant(
|
||||
$color,
|
||||
$color-hover: color-contrast($color),
|
||||
|
|
@ -118,11 +121,13 @@
|
|||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
// scss-docs-end btn-outline-variant-mixin
|
||||
|
||||
// Button sizes
|
||||
// scss-docs-start btn-size-mixin
|
||||
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||
padding: $padding-y $padding-x;
|
||||
@include font-size($font-size);
|
||||
// Manually declare to provide an override to the browser default
|
||||
@include border-radius($border-radius, 0);
|
||||
}
|
||||
// scss-docs-end btn-size-mixin
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// List Groups
|
||||
|
||||
// scss-docs-start list-group-mixin
|
||||
@mixin list-group-item-variant($state, $background, $color) {
|
||||
.list-group-item-#{$state} {
|
||||
color: $color;
|
||||
|
|
@ -20,3 +21,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end list-group-mixin
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// Pagination
|
||||
|
||||
// scss-docs-start pagination-mixin
|
||||
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||
.page-link {
|
||||
padding: $padding-y $padding-x;
|
||||
|
|
@ -27,3 +28,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end pagination-mixin
|
||||
|
|
|
|||
|
|
@ -104,3 +104,13 @@ Add `.accordion-flush` to remove the default `background-color`, some borders, a
|
|||
## Accessibility
|
||||
|
||||
Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information.
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for accordions.
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ When an alert is dismissed, the element is completely removed from the page stru
|
|||
|
||||
### Variant mixin
|
||||
|
||||
Used to create modifier classes for our alerts.
|
||||
Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.
|
||||
|
||||
{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,3 +63,13 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
|
|||
<span class="badge rounded-pill bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}}
|
||||
{{< /badge.inline >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="badge-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for badges.
|
||||
|
|
|
|||
|
|
@ -88,3 +88,13 @@ $breadcrumb-divider: none;
|
|||
Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
|
||||
|
||||
For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for breadcrumbs.
|
||||
|
|
|
|||
|
|
@ -205,3 +205,25 @@ buttons.forEach(function (button) {
|
|||
button.toggle()
|
||||
})
|
||||
```
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="btn-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors), plus a button size mixin.
|
||||
|
||||
{{< scss-docs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" >}}
|
||||
|
||||
{{< scss-docs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" >}}
|
||||
|
||||
{{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}}
|
||||
|
||||
### Loops
|
||||
|
||||
Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`.
|
||||
|
||||
{{< scss-docs name="btn-variant-loops" file="scss/_buttons.scss" >}}
|
||||
|
|
|
|||
|
|
@ -721,3 +721,13 @@ Just like with card groups, card footers will automatically line up.
|
|||
### Masonry
|
||||
|
||||
In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="card-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for cards.
|
||||
|
|
|
|||
|
|
@ -450,3 +450,13 @@ myCarousel.addEventListener('slide.bs.carousel', function () {
|
|||
### Change transition duration
|
||||
|
||||
The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`).
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="carousel-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for carousels.
|
||||
|
|
|
|||
|
|
@ -30,3 +30,13 @@ Change the default `.btn-close` to be white with the `.btn-close-white` class. T
|
|||
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
|
||||
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
|
||||
{{< /example >}}
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="close-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for close buttons.
|
||||
|
|
|
|||
|
|
@ -1010,3 +1010,19 @@ myDropdown.addEventListener('show.bs.dropdown', function () {
|
|||
// do something...
|
||||
})
|
||||
```
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
Variables for all dropdowns:
|
||||
|
||||
{{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
Variables for the [dark dropdown](#dark-dropdowns):
|
||||
|
||||
{{< scss-docs name="dropdown-dark-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for dropdowns.
|
||||
|
|
|
|||
|
|
@ -470,3 +470,21 @@ tabEl.addEventListener('shown.bs.tab', function (event) {
|
|||
event.relatedTarget // previous active tab
|
||||
})
|
||||
```
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
|
||||
|
||||
{{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
|
||||
|
||||
### Loop
|
||||
|
||||
Loop that generates the modifier classes with the `list-group-item-variant()` mixin.
|
||||
|
||||
{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
|
||||
|
|
|
|||
|
|
@ -954,3 +954,19 @@ myModalEl.addEventListener('hidden.bs.modal', function (event) {
|
|||
// do something...
|
||||
})
|
||||
```
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="modal-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for modals.
|
||||
|
||||
### Loop
|
||||
|
||||
[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
|
||||
|
||||
{{< scss-docs name="modal-fullscreen-loop" file="scss/_modal.scss" >}}
|
||||
|
|
|
|||
|
|
@ -598,3 +598,21 @@ Sometimes you want to use the collapse plugin to trigger a container element for
|
|||
{{< /example >}}
|
||||
|
||||
When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
{{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for navbars.
|
||||
|
||||
### Loop
|
||||
|
||||
[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
|
||||
|
||||
{{< scss-docs name="navbar-expand-loop" file="scss/_navbar.scss" >}}
|
||||
|
|
|
|||
|
|
@ -663,3 +663,13 @@ tabEl.addEventListener('shown.bs.tab', function (event) {
|
|||
event.relatedTarget // previous active tab
|
||||
})
|
||||
```
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="nav-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for navigations and tabs.
|
||||
|
|
|
|||
|
|
@ -155,3 +155,13 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
|
|||
</ul>
|
||||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
{{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}
|
||||
|
|
|
|||
|
|
@ -401,3 +401,13 @@ myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
|
|||
// do something...
|
||||
})
|
||||
```
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="popover-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for popovers.
|
||||
|
|
|
|||
|
|
@ -137,3 +137,19 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
|
|||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="progress-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for progress bars.
|
||||
|
||||
### Keyframes
|
||||
|
||||
Used for creating the CSS animations for `.progress-bar-animated`. Included in the `scss/_progress-bar.scss` stylesheet.
|
||||
|
||||
{{< scss-docs name="progress-keyframes" file="scss/_progress.scss" >}}
|
||||
|
|
|
|||
|
|
@ -171,6 +171,24 @@ Use spinners within buttons to indicate an action is currently processing or tak
|
|||
</button>
|
||||
{{< /example >}}
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="spinner-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for spinners.
|
||||
|
||||
### Keyframes
|
||||
|
||||
Used for creating the CSS animations for our spinners. Included in the `scss/_spinners.scss` stylesheet.
|
||||
|
||||
{{< scss-docs name="spinner-border-keyframes" file="scss/_spinners.scss" >}}
|
||||
|
||||
{{< scss-docs name="spinner-grow-keyframes" file="scss/_spinners.scss" >}}
|
||||
|
||||
|
||||
[color]: {{< docsref "/utilities/colors" >}}
|
||||
[display]: {{< docsref "/utilities/display" >}}
|
||||
|
|
|
|||
|
|
@ -376,3 +376,13 @@ myToastEl.addEventListener('hidden.bs.toast', function () {
|
|||
// do something...
|
||||
})
|
||||
```
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="toast-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for toasts.
|
||||
|
|
|
|||
|
|
@ -429,3 +429,13 @@ myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
|
|||
|
||||
tooltip.hide()
|
||||
```
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="tooltip-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
There are no mixins for tooltips.
|
||||
|
|
|
|||
|
|
@ -77,3 +77,19 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
|
|||
{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="border-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}
|
||||
|
||||
### Utilities
|
||||
|
||||
TODO: this errored out earlier, unclear why...
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue