From 7275e3b2cb179b253bb01d800f32e272b516eb6b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jan 2021 21:07:41 -0800 Subject: [PATCH 1/6] 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 3f8014497825..6e0a3da3257a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1195,18 +1195,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 99ebbc30551e..f3eb59511da6 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 f35a044ae5e5..4d4359c72170 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 From b29d3d7e773ecc47e76982f7336c8e5b3c7fac23 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 12 Jan 2021 13:47:34 -0800 Subject: [PATCH 2/6] Add Sass sections to component pages --- scss/_buttons.scss | 2 + scss/_modal.scss | 2 + scss/_navbar.scss | 2 + scss/_progress.scss | 3 + scss/_spinners.scss | 4 ++ scss/_variables.scss | 55 +++++++++++++++++-- scss/mixins/_border-radius.scss | 2 + scss/mixins/_buttons.scss | 7 ++- scss/mixins/_list-group.scss | 2 + scss/mixins/_pagination.scss | 2 + site/content/docs/5.0/components/accordion.md | 10 ++++ site/content/docs/5.0/components/alerts.md | 2 +- site/content/docs/5.0/components/badge.md | 10 ++++ .../content/docs/5.0/components/breadcrumb.md | 10 ++++ site/content/docs/5.0/components/buttons.md | 22 ++++++++ site/content/docs/5.0/components/card.md | 10 ++++ site/content/docs/5.0/components/carousel.md | 10 ++++ .../docs/5.0/components/close-button.md | 10 ++++ site/content/docs/5.0/components/dropdowns.md | 16 ++++++ .../content/docs/5.0/components/list-group.md | 18 ++++++ site/content/docs/5.0/components/modal.md | 16 ++++++ site/content/docs/5.0/components/navbar.md | 18 ++++++ site/content/docs/5.0/components/navs-tabs.md | 10 ++++ .../content/docs/5.0/components/pagination.md | 10 ++++ site/content/docs/5.0/components/popovers.md | 10 ++++ site/content/docs/5.0/components/progress.md | 16 ++++++ site/content/docs/5.0/components/spinners.md | 18 ++++++ site/content/docs/5.0/components/toasts.md | 10 ++++ site/content/docs/5.0/components/tooltips.md | 10 ++++ site/content/docs/5.0/utilities/borders.md | 16 ++++++ 30 files changed, 327 insertions(+), 6 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 8f28d02773bb..ee4287c9201d 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -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 // diff --git a/scss/_modal.scss b/scss/_modal.scss index 06ab5644d21c..6dd4dd32941f 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -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 diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 21126b4ede51..2ccef11b7c27 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -154,6 +154,7 @@ overflow-y: auto; } +// scss-docs-start navbar-expand-loop // Generate series of `.navbar-expand-*` responsive classes for configuring // where your navbar collapses. .navbar-expand { @@ -196,6 +197,7 @@ } } } +// scss-docs-end navbar-expand-loop // Navbar themes diff --git a/scss/_progress.scss b/scss/_progress.scss index b48ffc4b8b85..5715ab00cedf 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -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; diff --git a/scss/_spinners.scss b/scss/_spinners.scss index 7444ed1d12fa..8e19bae514b8 100644 --- a/scss/_spinners.scss +++ b/scss/_spinners.scss @@ -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; diff --git a/scss/_variables.scss b/scss/_variables.scss index 6e0a3da3257a..7ddbb1cf950a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -354,6 +354,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, @@ -365,11 +366,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; @@ -587,6 +591,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; @@ -630,6 +635,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 @@ -865,6 +871,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; @@ -885,10 +892,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; @@ -907,7 +916,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; @@ -926,12 +937,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; @@ -961,7 +974,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; @@ -974,10 +989,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; @@ -1013,9 +1030,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; @@ -1030,12 +1050,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; @@ -1066,9 +1087,11 @@ $accordion-icon-transform: rotate(180deg) !default; $accordion-button-icon: url("data:image/svg+xml,") !default; $accordion-button-active-icon: url("data:image/svg+xml,") !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; @@ -1082,18 +1105,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; @@ -1117,10 +1144,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; @@ -1136,24 +1165,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; @@ -1189,6 +1220,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 @@ -1211,6 +1243,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; @@ -1220,10 +1253,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; @@ -1248,16 +1283,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 @@ -1268,6 +1306,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; @@ -1279,9 +1318,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; @@ -1313,10 +1354,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; @@ -1325,10 +1368,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; @@ -1341,6 +1386,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 diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss index 819b8abd4c99..616decbce315 100644 --- a/scss/mixins/_border-radius.scss +++ b/scss/mixins/_border-radius.scss @@ -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 diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 3fbd7089696a..c06fa4a9802a 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -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 diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss index 351e9109ec06..e55415f2b818 100644 --- a/scss/mixins/_list-group.scss +++ b/scss/mixins/_list-group.scss @@ -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 diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss index 9cb7fd8bcd36..3101b380da04 100644 --- a/scss/mixins/_pagination.scss +++ b/scss/mixins/_pagination.scss @@ -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 diff --git a/site/content/docs/5.0/components/accordion.md b/site/content/docs/5.0/components/accordion.md index 298b0697a0d0..51e21a31431c 100644 --- a/site/content/docs/5.0/components/accordion.md +++ b/site/content/docs/5.0/components/accordion.md @@ -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. diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index 4d4359c72170..3ef2e62cf8bd 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -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" >}} diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md index 44c85d7179cc..6dd959983325 100644 --- a/site/content/docs/5.0/components/badge.md +++ b/site/content/docs/5.0/components/badge.md @@ -63,3 +63,13 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger {{ .name | title }}{{- end -}} {{< /badge.inline >}} {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="badge-variables" file="scss/_variables.scss" >}} + +### Mixins + +There are no mixins for badges. diff --git a/site/content/docs/5.0/components/breadcrumb.md b/site/content/docs/5.0/components/breadcrumb.md index 3395fbf67d09..d5c1a1a98681 100644 --- a/site/content/docs/5.0/components/breadcrumb.md +++ b/site/content/docs/5.0/components/breadcrumb.md @@ -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 ` {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}} + +### Mixins + +{{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}} diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md index 8a2efa0a2a83..90c6fe206780 100644 --- a/site/content/docs/5.0/components/popovers.md +++ b/site/content/docs/5.0/components/popovers.md @@ -426,3 +426,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. diff --git a/site/content/docs/5.0/components/progress.md b/site/content/docs/5.0/components/progress.md index 92834bebf31c..ca512b15072e 100644 --- a/site/content/docs/5.0/components/progress.md +++ b/site/content/docs/5.0/components/progress.md @@ -137,3 +137,19 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
``` + +## 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" >}} diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.0/components/spinners.md index d2495b42063d..f6cad58dccf6 100644 --- a/site/content/docs/5.0/components/spinners.md +++ b/site/content/docs/5.0/components/spinners.md @@ -171,6 +171,24 @@ Use spinners within buttons to indicate an action is currently processing or tak {{< /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" >}} diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index 5f7a59db6e8e..413fdd76ba00 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -420,3 +420,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. diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index ee6d06e9e9ba..48bd4185577a 100644 --- a/site/content/docs/5.0/components/tooltips.md +++ b/site/content/docs/5.0/components/tooltips.md @@ -454,3 +454,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. diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md index 459ca4e72d04..47beafe43aa2 100644 --- a/site/content/docs/5.0/utilities/borders.md +++ b/site/content/docs/5.0/utilities/borders.md @@ -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... From a0eb1ba73d166ee9962a9f38c3662f58af9698e6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 12 Jan 2021 15:55:29 -0800 Subject: [PATCH 3/6] add sass docs for forms and content --- scss/_variables.scss | 39 +++++++++++++++++-- scss/mixins/_forms.scss | 3 ++ site/content/docs/5.0/content/figures.md | 6 +++ site/content/docs/5.0/content/images.md | 8 ++++ site/content/docs/5.0/content/tables.md | 14 +++++-- site/content/docs/5.0/content/typography.md | 16 ++++++++ site/content/docs/5.0/forms/checks-radios.md | 10 +++++ .../content/docs/5.0/forms/floating-labels.md | 10 +++++ site/content/docs/5.0/forms/form-control.md | 18 +++++++++ site/content/docs/5.0/forms/input-group.md | 10 +++++ site/content/docs/5.0/forms/overview.md | 12 ++++++ site/content/docs/5.0/forms/range.md | 10 +++++ site/content/docs/5.0/forms/select.md | 10 +++++ site/content/docs/5.0/forms/validation.md | 26 ++++++++++--- 14 files changed, 180 insertions(+), 12 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 7ddbb1cf950a..792d6f9736d2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -450,12 +450,14 @@ $font-sizes: ( ) !default; // scss-docs-end font-sizes +// scss-docs-start headings-variables $headings-margin-bottom: $spacer / 2 !default; $headings-font-family: null !default; $headings-font-style: null !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; $headings-color: null !default; +// scss-docs-end headings-variables // scss-docs-start display-headings $display-font-sizes: ( @@ -471,6 +473,7 @@ $display-font-weight: 300 !default; $display-line-height: $headings-line-height !default; // scss-docs-end display-headings +// scss-docs-start type-variables $lead-font-size: $font-size-base * 1.25 !default; $lead-font-weight: 300 !default; @@ -505,6 +508,7 @@ $nested-kbd-font-weight: $font-weight-bold !default; $list-inline-padding: .5rem !default; $mark-bg: #fcf8e3 !default; +// scss-docs-end type-variables // Tables @@ -547,7 +551,9 @@ $table-group-separator-color: currentColor !default; $table-caption-color: $text-muted !default; $table-bg-scale: -80% !default; +// scss-docs-end table-variables +// scss-docs-start table-loop $table-variants: ( "primary": shift-color($primary, $table-bg-scale), "secondary": shift-color($secondary, $table-bg-scale), @@ -558,13 +564,14 @@ $table-variants: ( "light": $light, "dark": $dark, ) !default; -// scss-docs-end table-variables +// scss-docs-end table-loop // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. +// scss-docs-start input-btn-variables $input-btn-padding-y: .375rem !default; $input-btn-padding-x: .75rem !default; $input-btn-font-family: null !default; @@ -585,6 +592,7 @@ $input-btn-padding-x-lg: 1rem !default; $input-btn-font-size-lg: $font-size-lg !default; $input-btn-border-width: $border-width !default; +// scss-docs-end input-btn-variables // Buttons @@ -640,18 +648,23 @@ $btn-active-border-tint-amount: 10% !default; // Forms +// scss-docs-start form-text-variables $form-text-margin-top: .25rem !default; $form-text-font-size: $small-font-size !default; $form-text-font-style: null !default; $form-text-font-weight: null !default; $form-text-color: $text-muted !default; +// scss-docs-end form-text-variables +// scss-docs-start form-label-variables $form-label-margin-bottom: .5rem !default; $form-label-font-size: null !default; $form-label-font-style: null !default; $form-label-font-weight: null !default; $form-label-color: null !default; +// scss-docs-end form-label-variables +// scss-docs-start form-input-variables $input-padding-y: $input-btn-padding-y !default; $input-padding-x: $input-btn-padding-x !default; $input-font-family: $input-btn-font-family !default; @@ -700,8 +713,9 @@ $input-height-sm: add($input-line-height * 1em, add($input $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default; $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +// scss-docs-end form-input-variables - +// scss-docs-start form-check-variables $form-check-input-width: 1em !default; $form-check-min-height: $font-size-base * $line-height-base !default; $form-check-padding-start: $form-check-input-width + .5em !default; @@ -734,6 +748,10 @@ $form-check-input-disabled-opacity: .5 !default; $form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default; $form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default; +$form-check-inline-margin-end: 1rem !default; +// scss-docs-end form-check-variables + +// scss-docs-start form-switch-variables $form-switch-color: rgba(0, 0, 0, .25) !default; $form-switch-width: 2em !default; $form-switch-padding-start: $form-switch-width + .5em !default; @@ -747,16 +765,18 @@ $form-switch-focus-bg-image: url("data:image/svg+xml,") !default; $form-switch-checked-bg-position: right center !default; +// scss-docs-end form-switch-variables -$form-check-inline-margin-end: 1rem !default; - +// scss-docs-start input-group-variables $input-group-addon-padding-y: $input-padding-y !default; $input-group-addon-padding-x: $input-padding-x !default; $input-group-addon-font-weight: $input-font-weight !default; $input-group-addon-color: $input-color !default; $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; +// scss-docs-end input-group-variables +// scss-docs-start form-select-variables $form-select-padding-y: $input-padding-y !default; $form-select-padding-x: $input-padding-x !default; $form-select-font-family: $input-font-family !default; @@ -794,7 +814,9 @@ $form-select-font-size-sm: $input-font-size-sm !default; $form-select-padding-y-lg: $input-padding-y-lg !default; $form-select-padding-x-lg: $input-padding-x-lg !default; $form-select-font-size-lg: $input-font-size-lg !default; +// scss-docs-end form-select-variables +// scss-docs-start form-range-variables $form-range-track-width: 100% !default; $form-range-track-height: .5rem !default; $form-range-track-cursor: pointer !default; @@ -813,11 +835,15 @@ $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For f $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default; $form-range-thumb-disabled-bg: $gray-500 !default; $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +// scss-docs-end form-range-variables +// scss-docs-start form-file-variables $form-file-button-color: $input-color !default; $form-file-button-bg: $input-group-addon-bg !default; $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default; +// scss-docs-end form-file-variables +// scss-docs-start form-floating-variables $form-floating-height: add(3.5rem, $input-height-border) !default; $form-floating-padding-x: $input-padding-x !default; $form-floating-padding-y: 1rem !default; @@ -826,9 +852,11 @@ $form-floating-input-padding-b: .625rem !default; $form-floating-label-opacity: .65 !default; $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default; $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default; +// scss-docs-end form-floating-variables // Form validation +// scss-docs-start form-feedback-variables $form-feedback-margin-top: $form-text-margin-top !default; $form-feedback-font-size: $form-text-font-size !default; $form-feedback-font-style: $form-text-font-style !default; @@ -839,6 +867,7 @@ $form-feedback-icon-valid-color: $form-feedback-valid-color !default; $form-feedback-icon-valid: url("data:image/svg+xml,") !default; $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; $form-feedback-icon-invalid: url("data:image/svg+xml,") !default; +// scss-docs-end form-feedback-variables // scss-docs-start form-validation-states $form-validation-states: ( @@ -1300,8 +1329,10 @@ $thumbnail-box-shadow: $box-shadow-sm !default; // Figures +// scss-docs-start figure-variables $figure-caption-font-size: $small-font-size !default; $figure-caption-color: $gray-600 !default; +// scss-docs-end figure-variables // Breadcrumbs diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 8be4d2ee9132..9db92bb906fd 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -1,5 +1,7 @@ // This mixin uses an `if()` technique to be compatible with Dart Sass // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details + +// scss-docs-start form-validation-mixins @mixin form-validation-state-selector($state) { @if ($state == "valid" or $state == "invalid") { .was-validated #{if(&, "&", "")}:#{$state}, @@ -122,3 +124,4 @@ } } } +// scss-docs-end form-validation-mixins diff --git a/site/content/docs/5.0/content/figures.md b/site/content/docs/5.0/content/figures.md index f5956614fe42..e859aa5b130e 100644 --- a/site/content/docs/5.0/content/figures.md +++ b/site/content/docs/5.0/content/figures.md @@ -24,3 +24,9 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
A caption for the above image.
{{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="figure-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/content/images.md b/site/content/docs/5.0/content/images.md index 271b08e30d22..f1012efbf557 100644 --- a/site/content/docs/5.0/content/images.md +++ b/site/content/docs/5.0/content/images.md @@ -53,3 +53,11 @@ If you are using the `` element to specify multiple `` elements ... ``` + +## Sass + +### Variables + +Variables are available for image thumbnails. + +{{< scss-docs name="thumbnail-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/content/tables.md b/site/content/docs/5.0/content/tables.md index dde90b997a0f..3681e186ac0b 100644 --- a/site/content/docs/5.0/content/tables.md +++ b/site/content/docs/5.0/content/tables.md @@ -775,9 +775,17 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< /tables.inline >}} {{< /highlight >}} -## Customizing in Sass +## Sass -- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants. -- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable. +### Variables {{< scss-docs name="table-variables" file="scss/_variables.scss" >}} + +### Loop + +{{< scss-docs name="table-loop" file="scss/_variables.scss" >}} + +### Customizing + +- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants. +- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable. diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md index cf9c83636816..7d41f04dee7e 100644 --- a/site/content/docs/5.0/content/typography.md +++ b/site/content/docs/5.0/content/typography.md @@ -302,3 +302,19 @@ Align terms and descriptions horizontally by using our grid system's predefined ## Responsive font sizes In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works. + +## Sass + +### Variables + +Headings have some dedicated variables for sizing and spacing. + +{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}} + +Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/content/reboot" >}}) also have dedicated variables. + +{{< scss-docs name="type-variables" file="scss/_variables.scss" >}} + +### Mixins + +There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}). diff --git a/site/content/docs/5.0/forms/checks-radios.md b/site/content/docs/5.0/forms/checks-radios.md index ae89f5ee34d2..d82c60a2541d 100644 --- a/site/content/docs/5.0/forms/checks-radios.md +++ b/site/content/docs/5.0/forms/checks-radios.md @@ -269,3 +269,13 @@ Different variants of `.btn`, such at the various outlined styles, are supported {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}} + +### Mixins + +There are no mixins for checkboxes and radios. diff --git a/site/content/docs/5.0/forms/floating-labels.md b/site/content/docs/5.0/forms/floating-labels.md index 2012a4e824c3..1d1adaa98641 100644 --- a/site/content/docs/5.0/forms/floating-labels.md +++ b/site/content/docs/5.0/forms/floating-labels.md @@ -100,3 +100,13 @@ When working with the Bootstrap grid system, be sure to place form elements with {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}} + +### Mixins + +There are no mixins for floating label forms. diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md index e35f099674d3..a28293569d73 100644 --- a/site/content/docs/5.0/forms/form-control.md +++ b/site/content/docs/5.0/forms/form-control.md @@ -130,3 +130,21 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).