From 31214ca03cf5a5b644cb02fe427422041efcc2c3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 12 Jan 2021 13:47:34 -0800 Subject: [PATCH] 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 8f28d0277..ee4287c92 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 06ab5644d..6dd4dd329 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 852328aca..2b4d09385 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -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 diff --git a/scss/_progress.scss b/scss/_progress.scss index b48ffc4b8..5715ab00c 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 7444ed1d1..8e19bae51 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 01b59d999..c5f09d80b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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,") !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; @@ -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 diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss index 819b8abd4..616decbce 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 3fbd70896..c06fa4a98 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 351e9109e..e55415f2b 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 9cb7fd8bc..3101b380d 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 298b0697a..51e21a314 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 4d4359c72..3ef2e62cf 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 44c85d717..6dd959983 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 3395fbf67..d5c1a1a98 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 ccaf1f63f..d60665e85 100644 --- a/site/content/docs/5.0/components/popovers.md +++ b/site/content/docs/5.0/components/popovers.md @@ -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. diff --git a/site/content/docs/5.0/components/progress.md b/site/content/docs/5.0/components/progress.md index 92834bebf..ca512b150 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 d2495b420..f6cad58dc 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 b6f7e3893..55b82aef0 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -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. diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index 8f5aac533..d347c78c4 100644 --- a/site/content/docs/5.0/components/tooltips.md +++ b/site/content/docs/5.0/components/tooltips.md @@ -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. diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md index 459ca4e72..47beafe43 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...