j1-template 2023.2.6 → 2023.3.0

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/forms.asciidoc

@@ -0,0 +1,270 @@
+[source, sass]
+----
+// 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:                       var(--#{$prefix}secondary-color) !default;
+
+
+// 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;
+
+// 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;
+$input-font-size:                       $input-btn-font-size !default;
+$input-font-weight:                     $font-weight-base !default;
+$input-line-height:                     $input-btn-line-height !default;
+
+$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
+$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
+$input-font-size-sm:                    $input-btn-font-size-sm !default;
+
+$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
+$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
+$input-font-size-lg:                    $input-btn-font-size-lg !default;
+
+$input-bg:                              var(--#{$prefix}body-bg) !default;
+$input-disabled-color:                  null !default;
+$input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
+$input-disabled-border-color:           null !default;
+
+$input-color:                           var(--#{$prefix}body-color) !default;
+$input-border-color:                    var(--#{$prefix}border-color) !default;
+$input-border-width:                    $input-btn-border-width !default;
+$input-box-shadow:                      $box-shadow-inset !default;
+
+$input-border-radius:                   var(--#{$prefix}border-radius) !default;
+$input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
+$input-border-radius-lg:                var(--#{$prefix}border-radius-lg) !default;
+
+$input-focus-bg:                        $input-bg !default;
+$input-focus-border-color:              tint-color($component-active-bg, 50%) !default;
+$input-focus-color:                     $input-color !default;
+$input-focus-width:                     $input-btn-focus-width !default;
+$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
+$input-plaintext-color:                 var(--#{$prefix}body-color) !default;
+
+$input-height-border:                   calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
+
+$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
+$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
+$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;
+
+$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
+$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+$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;
+
+$form-color-width:                      3rem !default;
+
+
+// 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;
+$form-check-margin-bottom:              .125rem !default;
+$form-check-label-color:                null !default;
+$form-check-label-cursor:               null !default;
+$form-check-transition:                 null !default;
+
+$form-check-input-active-filter:        brightness(90%) !default;
+
+$form-check-input-bg:                   $input-bg !default;
+$form-check-input-border:               var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
+$form-check-input-border-radius:        .25em !default;
+$form-check-radio-border-radius:        50% !default;
+$form-check-input-focus-border:         $input-focus-border-color !default;
+$form-check-input-focus-box-shadow:     $focus-ring-box-shadow !default;
+
+$form-check-input-checked-color:        $component-active-color !default;
+$form-check-input-checked-bg-color:     $component-active-bg !default;
+$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
+$form-check-input-checked-bg-image:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
+$form-check-radio-checked-bg-image:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
+
+$form-check-input-indeterminate-color:  $component-active-color !default;
+$form-check-input-indeterminate-bg-color: $component-active-bg !default;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
+
+$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;
+
+
+// form-switch variables
+//
+$form-switch-color:                     rgba($black, .25) !default;
+$form-switch-width:                     2em !default;
+$form-switch-padding-start:             $form-switch-width + .5em !default;
+$form-switch-bg-image:                  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
+$form-switch-border-radius:             $form-switch-width !default;
+$form-switch-transition:                background-position .15s ease-in-out !default;
+
+$form-switch-focus-color:               $input-focus-border-color !default;
+$form-switch-focus-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
+
+$form-switch-checked-color:             $component-active-color !default;
+$form-switch-checked-bg-image:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
+$form-switch-checked-bg-position:       right center !default;
+
+
+// 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:                  var(--#{$prefix}tertiary-bg) !default;
+$input-group-addon-border-color:        $input-border-color !default;
+
+
+// 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;
+$form-select-font-size:                 $input-font-size !default;
+$form-select-indicator-padding:         $form-select-padding-x * 3 !default; // Extra padding for background-image
+$form-select-font-weight:               $input-font-weight !default;
+$form-select-line-height:               $input-line-height !default;
+$form-select-color:                     $input-color !default;
+$form-select-bg:                        $input-bg !default;
+$form-select-disabled-color:            null !default;
+$form-select-disabled-bg:               $input-disabled-bg !default;
+$form-select-disabled-border-color:     $input-disabled-border-color !default;
+$form-select-bg-position:               right $form-select-padding-x center !default;
+$form-select-bg-size:                   16px 12px !default; // In pixels because image dimensions
+$form-select-indicator-color:           $gray-800 !default;
+$form-select-indicator:                 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
+$form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;
+$form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half !default;
+
+$form-select-border-width:              $input-border-width !default;
+$form-select-border-color:              $input-border-color !default;
+$form-select-border-radius:             $input-border-radius !default;
+$form-select-box-shadow:                $box-shadow-inset !default;
+
+$form-select-focus-border-color:        $input-focus-border-color !default;
+$form-select-focus-width:               $input-focus-width !default;
+$form-select-focus-box-shadow:          0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+
+$form-select-padding-y-sm:              $input-padding-y-sm !default;
+$form-select-padding-x-sm:              $input-padding-x-sm !default;
+$form-select-font-size-sm:              $input-font-size-sm !default;
+$form-select-border-radius-sm:          $input-border-radius-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;
+$form-select-border-radius-lg:          $input-border-radius-lg !default;
+
+$form-select-transition:                $input-transition !default;
+
+
+// form-range variables
+//
+$form-range-track-width:                100% !default;
+$form-range-track-height:               .5rem !default;
+$form-range-track-cursor:               pointer !default;
+$form-range-track-bg:                   var(--#{$prefix}tertiary-bg) !default;
+$form-range-track-border-radius:        1rem !default;
+$form-range-track-box-shadow:           $box-shadow-inset !default;
+
+$form-range-thumb-width:                1rem !default;
+$form-range-thumb-height:               $form-range-thumb-width !default;
+$form-range-thumb-bg:                   $component-active-bg !default;
+$form-range-thumb-border:               0 !default;
+$form-range-thumb-border-radius:        1rem !default;
+$form-range-thumb-box-shadow:           0 .1rem .25rem rgba($black, .1) !default;
+$form-range-thumb-focus-box-shadow:     0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
+$form-range-thumb-active-bg:            tint-color($component-active-bg, 70%) !default;
+$form-range-thumb-disabled-bg:          var(--#{$prefix}secondary-color) !default;
+$form-range-thumb-transition:           background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+
+// form-file variables
+//
+$form-file-button-color:                $input-color !default;
+$form-file-button-bg:                   var(--#{$prefix}tertiary-bg) !default;
+$form-file-button-hover-bg:             var(--#{$prefix}secondary-bg) !default;
+
+
+// form-floating variables
+//
+$form-floating-height:                  add(3.5rem, $input-height-border) !default;
+$form-floating-line-height:             1.25 !default;
+$form-floating-padding-x:               $input-padding-x !default;
+$form-floating-padding-y:               1rem !default;
+$form-floating-input-padding-t:         1.625rem !default;
+$form-floating-input-padding-b:         .625rem !default;
+$form-floating-label-height:            1.5em !default;
+$form-floating-label-opacity:           .65 !default;
+$form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;
+$form-floating-label-disabled-color:    $gray-600 !default;
+$form-floating-transition:              opacity .1s ease-in-out, transform .1s ease-in-out !default;
+
+// Form validation
+
+// 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;
+$form-feedback-valid-color:             $success !default;
+$form-feedback-invalid-color:           $danger !default;
+
+$form-feedback-icon-valid-color:        $form-feedback-valid-color !default;
+$form-feedback-icon-valid:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-invalid-color:      $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+
+
+// form-validation colors
+//
+$form-valid-color:                      $form-feedback-valid-color !default;
+$form-valid-border-color:               $form-feedback-valid-color !default;
+$form-invalid-color:                    $form-feedback-invalid-color !default;
+$form-invalid-border-color:             $form-feedback-invalid-color !default;
+
+// form-validation states
+//
+$form-validation-states: (
+  "valid": (
+    "color":                            var(--#{$prefix}form-valid-color),
+    "icon":                             $form-feedback-icon-valid,
+    "tooltip-color":                    #fff,
+    "tooltip-bg-color":                 var(--#{$prefix}success),
+    "focus-box-shadow":                 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
+    "border-color":                     var(--#{$prefix}form-valid-border-color),
+  ),
+  "invalid": (
+    "color":                            var(--#{$prefix}form-invalid-color),
+    "icon":                             $form-feedback-icon-invalid,
+    "tooltip-color":                    #fff,
+    "tooltip-bg-color":                 var(--#{$prefix}danger),
+    "focus-box-shadow":                 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
+    "border-color":                     var(--#{$prefix}form-invalid-border-color),
+  )
+) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/grid.asciidoc

@@ -0,0 +1,49 @@
+[source, sass]
+----
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+  xs:                                   0,
+  sm:                                   576px,
+  md:                                   768px,
+  lg:                                   992px,
+  xl:                                   1200px,
+  xxl:                                  1400px
+) !default;
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+// container-max-widths
+//
+$container-max-widths: (
+  sm:                                   540px,
+  md:                                   720px,
+  lg:                                   960px,
+  xl:                                   1140px,
+  xxl:                                  1320px
+) !default;
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns:                          12 !default;
+$grid-gutter-width:                     1.5rem !default;
+$grid-row-columns:                      6 !default;
+
+// Container padding
+
+$container-padding-x:                   $grid-gutter-width !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/links.asciidoc

@@ -0,0 +1,21 @@
+[source, sass]
+----
+// Style anchor elements
+//
+$link-color:                            $primary !default;
+$link-decoration:                       underline !default;
+$link-shade-percentage:                 20% !default;
+$link-hover-color:                      shift-color($link-color, $link-shade-percentage) !default;
+$link-hover-decoration:                 null !default;
+
+$stretched-link-pseudo-element:         after !default;
+$stretched-link-z-index:                1 !default;
+
+// Icon links
+//
+$icon-link-gap:                         .375rem !default;
+$icon-link-underline-offset:            .25em !default;
+$icon-link-icon-size:                   1em !default;
+$icon-link-icon-transition:             .2s ease-in-out transform !default;
+$icon-link-icon-transform:              translate3d(.25em, 0, 0) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/list_groups.asciidoc

@@ -0,0 +1,28 @@
+[source, sass]
+----
+$list-group-color:                      var(--#{$prefix}body-color) !default;
+$list-group-bg:                         var(--#{$prefix}body-bg) !default;
+$list-group-border-color:               var(--#{$prefix}border-color) !default;
+$list-group-border-width:               var(--#{$prefix}border-width) !default;
+$list-group-border-radius:              var(--#{$prefix}border-radius) !default;
+
+$list-group-item-padding-y:             $spacer * .5 !default;
+$list-group-item-padding-x:             $spacer !default;
+
+$list-group-item-bg-scale:              -80% !default; // Deprecated in v5.3.0
+$list-group-item-color-scale:           40% !default; // Deprecated in v5.3.0
+
+$list-group-hover-bg:                   var(--#{$prefix}tertiary-bg) !default;
+$list-group-active-color:               $component-active-color !default;
+$list-group-active-bg:                  $component-active-bg !default;
+$list-group-active-border-color:        $list-group-active-bg !default;
+
+$list-group-disabled-color:             var(--#{$prefix}secondary-color) !default;
+$list-group-disabled-bg:                $list-group-bg !default;
+
+$list-group-action-color:               var(--#{$prefix}secondary-color) !default;
+$list-group-action-hover-color:         var(--#{$prefix}emphasis-color) !default;
+
+$list-group-action-active-color:        var(--#{$prefix}body-color) !default;
+$list-group-action-active-bg:           var(--#{$prefix}secondary-bg) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/modals.asciidoc

@@ -0,0 +1,43 @@
+[source, sass]
+----
+$modal-inner-padding:                   $spacer !default;
+
+$modal-footer-margin-between:           .5rem !default;
+
+$modal-dialog-margin:                   .5rem !default;
+$modal-dialog-margin-y-sm-up:           1.75rem !default;
+
+$modal-title-line-height:               $line-height-base !default;
+
+$modal-content-color:                   null !default;
+$modal-content-bg:                      var(--#{$prefix}body-bg) !default;
+$modal-content-border-color:            var(--#{$prefix}border-color-translucent) !default;
+$modal-content-border-width:            var(--#{$prefix}border-width) !default;
+$modal-content-border-radius:           var(--#{$prefix}border-radius-lg) !default;
+$modal-content-inner-border-radius:     subtract($modal-content-border-radius, $modal-content-border-width) !default;
+$modal-content-box-shadow-xs:           $box-shadow-sm !default;
+$modal-content-box-shadow-sm-up:        $box-shadow !default;
+
+$modal-backdrop-bg:                     $black !default;
+$modal-backdrop-opacity:                .5 !default;
+
+$modal-header-border-color:             var(--#{$prefix}border-color) !default;
+$modal-header-border-width:             $modal-content-border-width !default;
+$modal-header-padding-y:                $modal-inner-padding !default;
+$modal-header-padding-x:                $modal-inner-padding !default;
+$modal-header-padding:                  $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-footer-bg:                       null !default;
+$modal-footer-border-color:             $modal-header-border-color !default;
+$modal-footer-border-width:             $modal-header-border-width !default;
+
+$modal-sm:                              300px !default;
+$modal-md:                              500px !default;
+$modal-lg:                              800px !default;
+$modal-xl:                              1140px !default;
+
+$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;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/navbar.asciidoc

@@ -0,0 +1,45 @@
+[source, sass]
+----
+// navbar variables
+//
+$navbar-padding-y:                      $spacer * .5 !default;
+$navbar-padding-x:                      null !default;
+
+$navbar-nav-link-padding-x:             .5rem !default;
+
+$navbar-brand-font-size:                $font-size-lg !default;
+
+$nav-link-height:                       $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$navbar-brand-height:                   $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y:                ($nav-link-height - $navbar-brand-height) * .5 !default;
+$navbar-brand-margin-end:               1rem !default;
+
+$navbar-toggler-padding-y:              .25rem !default;
+$navbar-toggler-padding-x:              .75rem !default;
+$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;
+
+$navbar-light-color:                    rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
+$navbar-light-hover-color:              rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
+$navbar-light-active-color:             rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
+$navbar-light-disabled-color:           rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
+$navbar-light-icon-color:               rgba($body-color, .75) !default;
+$navbar-light-toggler-icon-bg:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-light-toggler-border-color:     rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
+$navbar-light-brand-color:              $navbar-light-active-color !default;
+$navbar-light-brand-hover-color:        $navbar-light-active-color !default;
+
+// navbar-dark variables
+//
+$navbar-dark-color:                     rgba($white, .55) !default;
+$navbar-dark-hover-color:               rgba($white, .75) !default;
+$navbar-dark-active-color:              $white !default;
+$navbar-dark-disabled-color:            rgba($white, .25) !default;
+$navbar-dark-icon-color:                $navbar-dark-color !default;
+$navbar-dark-toggler-icon-bg:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-toggler-border-color:      rgba($white, .1) !default;
+$navbar-dark-brand-color:               $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color:         $navbar-dark-active-color !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/navs.asciidoc

@@ -0,0 +1,28 @@
+[source, sass]
+----
+$nav-link-padding-y:                    .5rem !default;
+$nav-link-padding-x:                    1rem !default;
+$nav-link-font-size:                    null !default;
+$nav-link-font-weight:                  null !default;
+$nav-link-color:                        var(--#{$prefix}link-color) !default;
+$nav-link-hover-color:                  var(--#{$prefix}link-hover-color) !default;
+$nav-link-transition:                   color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
+$nav-link-disabled-color:               var(--#{$prefix}secondary-color) !default;
+$nav-link-focus-box-shadow:             $focus-ring-box-shadow !default;
+
+$nav-tabs-border-color:                 var(--#{$prefix}border-color) !default;
+$nav-tabs-border-width:                 var(--#{$prefix}border-width) !default;
+$nav-tabs-border-radius:                var(--#{$prefix}border-radius) !default;
+$nav-tabs-link-hover-border-color:      var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:            var(--#{$prefix}emphasis-color) !default;
+$nav-tabs-link-active-bg:               var(--#{$prefix}body-bg) !default;
+$nav-tabs-link-active-border-color:     var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius:               var(--#{$prefix}border-radius) !default;
+$nav-pills-link-active-color:           $component-active-color !default;
+$nav-pills-link-active-bg:              $component-active-bg !default;
+
+$nav-underline-gap:                     1rem !default;
+$nav-underline-border-width:            .125rem !default;
+$nav-underline-link-active-color:       var(--#{$prefix}emphasis-color) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/offcanvas.asciidoc

@@ -0,0 +1,16 @@
+[source, sass]
+----
+$offcanvas-padding-y:                   $modal-inner-padding !default;
+$offcanvas-padding-x:                   $modal-inner-padding !default;
+$offcanvas-horizontal-width:            400px !default;
+$offcanvas-vertical-height:             30vh !default;
+$offcanvas-transition-duration:         .3s !default;
+$offcanvas-border-color:                $modal-content-border-color !default;
+$offcanvas-border-width:                $modal-content-border-width !default;
+$offcanvas-title-line-height:           $modal-title-line-height !default;
+$offcanvas-bg-color:                    var(--#{$prefix}body-bg) !default;
+$offcanvas-color:                       var(--#{$prefix}body-color) !default;
+$offcanvas-box-shadow:                  $modal-content-box-shadow-xs !default;
+$offcanvas-backdrop-bg:                 $modal-backdrop-bg !default;
+$offcanvas-backdrop-opacity:            $modal-backdrop-opacity !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/options.asciidoc

@@ -0,0 +1,30 @@
+[source, sass]
+----
+$enable-caret:                          true !default;
+$enable-rounded:                        true !default;
+$enable-shadows:                        false !default;
+$enable-gradients:                      false !default;
+$enable-transitions:                    true !default;
+$enable-reduced-motion:                 true !default;
+$enable-smooth-scroll:                  true !default;
+$enable-grid-classes:                   true !default;
+$enable-container-classes:              true !default;
+$enable-cssgrid:                        false !default;
+$enable-button-pointers:                true !default;
+$enable-rfs:                            true !default;
+$enable-validation-icons:               true !default;
+$enable-negative-margins:               false !default;
+$enable-deprecation-messages:           true !default;
+$enable-important-utilities:            true !default;
+
+$enable-dark-mode:                      true !default;
+// `data` or `media-query`
+$color-mode-type:                       data !default;
+
+// Prefix for :root CSS variables
+//
+$prefix:                                $variable-prefix !default;
+
+// Deprecated in v5.2.0 for the shorter `$prefix`
+$variable-prefix:                     bs- !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/pagination.asciidoc

@@ -0,0 +1,40 @@
+[source, sass]
+----
+$pagination-padding-y:                  .375rem !default;
+$pagination-padding-x:                  .75rem !default;
+$pagination-padding-y-sm:               .25rem !default;
+$pagination-padding-x-sm:               .5rem !default;
+$pagination-padding-y-lg:               .75rem !default;
+$pagination-padding-x-lg:               1.5rem !default;
+
+$pagination-font-size:                  $font-size-base !default;
+
+$pagination-color:                      var(--#{$prefix}link-color) !default;
+$pagination-bg:                         var(--#{$prefix}body-bg) !default;
+$pagination-border-radius:              var(--#{$prefix}border-radius) !default;
+$pagination-border-width:               var(--#{$prefix}border-width) !default;
+$pagination-margin-start:               calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
+$pagination-border-color:               var(--#{$prefix}border-color) !default;
+
+$pagination-focus-color:                var(--#{$prefix}link-hover-color) !default;
+$pagination-focus-bg:                   var(--#{$prefix}secondary-bg) !default;
+$pagination-focus-box-shadow:           $focus-ring-box-shadow !default;
+$pagination-focus-outline:              0 !default;
+
+$pagination-hover-color:                var(--#{$prefix}link-hover-color) !default;
+$pagination-hover-bg:                   var(--#{$prefix}tertiary-bg) !default;
+$pagination-hover-border-color:         var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
+
+$pagination-active-color:               $component-active-color !default;
+$pagination-active-bg:                  $component-active-bg !default;
+$pagination-active-border-color:        $component-active-bg !default;
+
+$pagination-disabled-color:             var(--#{$prefix}secondary-color) !default;
+$pagination-disabled-bg:                var(--#{$prefix}secondary-bg) !default;
+$pagination-disabled-border-color:      var(--#{$prefix}border-color) !default;
+
+$pagination-transition:                 color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$pagination-border-radius-sm:           var(--#{$prefix}border-radius-sm) !default;
+$pagination-border-radius-lg:           var(--#{$prefix}border-radius-lg) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/paragraph.asciidoc

@@ -0,0 +1,5 @@
+[source, sass]
+----
+// Style of the p element
+$paragraph-margin-bottom:               1rem !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/placeholders.asciidoc

@@ -0,0 +1,5 @@
+[source, sass]
+----
+  $placeholder-opacity-max:             .5 !default;
+  $placeholder-opacity-min:             .2 !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/popovers.asciidoc

@@ -0,0 +1,28 @@
+[source, sass]
+----
+$popover-font-size:                     $font-size-sm !default;
+$popover-bg:                            var(--#{$prefix}body-bg) !default;
+$popover-max-width:                     276px !default;
+$popover-border-width:                  var(--#{$prefix}border-width) !default;
+$popover-border-color:                  var(--#{$prefix}border-color-translucent) !default;
+$popover-border-radius:                 var(--#{$prefix}border-radius-lg) !default;
+$popover-inner-border-radius:           calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$popover-box-shadow:                    $box-shadow !default;
+
+$popover-header-font-size:              $font-size-base !default;
+$popover-header-bg:                     var(--#{$prefix}secondary-bg) !default;
+$popover-header-color:                  $headings-color !default;
+$popover-header-padding-y:              .5rem !default;
+$popover-header-padding-x:              $spacer !default;
+
+$popover-body-color:                    var(--#{$prefix}body-color) !default;
+$popover-body-padding-y:                $spacer !default;
+$popover-body-padding-x:                $spacer !default;
+
+$popover-arrow-width:                   1rem !default;
+$popover-arrow-height:                  .5rem !default;
+
+// Deprecated in Bootstrap 5.2.0 for CSS variables
+$popover-arrow-color:                   $popover-bg !default;
+$popover-arrow-outer-color:             var(--#{$prefix}border-color-translucent) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/position.asciidoc

@@ -0,0 +1,8 @@
+[source, sass]
+----
+$position-values: (
+  0:                                    0,
+  50:                                   50%,
+  100:                                  100%
+) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/progress_bars.asciidoc

@@ -0,0 +1,12 @@
+[source, sass]
+----
+$progress-height:                       1rem !default;
+$progress-font-size:                    $font-size-base * .75 !default;
+$progress-bg:                           var(--#{$prefix}secondary-bg) !default;
+$progress-border-radius:                var(--#{$prefix}border-radius) !default;
+$progress-box-shadow:                   var(--#{$prefix}box-shadow-inset) !default;
+$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;
+----