Merge pull request #20938 from JPeer264/feature/sass-doc

Docs: Sass Variables Table of Contents

diff --cc scss/_variables.scss
index 75142079561ffbf47185472898ca0f579c9649cc,1dd3a1bfa071b2f0c78fef5fb482f18fed67f064..ecb79d1ba51bec216946646ccf3ec2c4cf2c28e7
--- 1/scss/_variables.scss
--- 2/scss/_variables.scss
+++ b/scss/_variables.scss
@@@ -457,16 -463,16 +482,16 @@@ $custom-file-text: 
  
  // Form validation icons
  $form-icon-success-color: $brand-success !default;
 -$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.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'/%3E%3C/svg%3E") !default;
 +$form-icon-success: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.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'/%3E%3C/svg%3E"), "#", "%23") !default;
  
  $form-icon-warning-color: $brand-warning !default;
 -$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
 +$form-icon-warning: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"), "#", "%23") !default;
  
  $form-icon-danger-color: $brand-danger !default;
 -$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
 +$form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;
  
  
- // Dropdowns
+ // 14. Dropdowns
  //
  // Dropdown menu container and contents.
  
@@@ -535,10 -543,10 +560,10 @@@ $navbar-light-color:                rgb
  $navbar-light-hover-color:          rgba(0,0,0,.7) !default;
  $navbar-light-active-color:         rgba(0,0,0,.9) !default;
  $navbar-light-disabled-color:       rgba(0,0,0,.3) !default;
 -$navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
 +$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
  $navbar-light-toggler-border:       rgba(0,0,0,.1) !default;
  
- // Navs
+ // 17. Navs
  
  $nav-item-margin:               .2rem !default;
  $nav-item-inline-spacer:        1rem !default;
@@@ -675,28 -683,29 +700,29 @@@ $popover-arrow-outer-width:           (
  $popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
  
  
- // Tags
+ // 24. Tags
  
 -$tag-default-bg:            $gray-light !default;
 -$tag-primary-bg:            $brand-primary !default;
 -$tag-success-bg:            $brand-success !default;
 -$tag-info-bg:               $brand-info !default;
 -$tag-warning-bg:            $brand-warning !default;
 -$tag-danger-bg:             $brand-danger !default;
 -
 -$tag-color:                 #fff !default;
 -$tag-link-hover-color:      #fff !default;
 -$tag-font-size:             75% !default;
 -$tag-font-weight:           bold !default;
 -$tag-padding-x:             .4em !default;
 -$tag-padding-y:             .25em !default;
 -
 -$tag-pill-padding-x:        .6em !default;
 +$badge-default-bg:            $gray-light !default;
 +$badge-primary-bg:            $brand-primary !default;
 +$badge-success-bg:            $brand-success !default;
 +$badge-info-bg:               $brand-info !default;
 +$badge-warning-bg:            $brand-warning !default;
 +$badge-danger-bg:             $brand-danger !default;
 +
 +$badge-color:                 #fff !default;
 +$badge-link-hover-color:      #fff !default;
 +$badge-font-size:             75% !default;
 +$badge-font-weight:           $font-weight-bold !default;
 +$badge-padding-x:             .4em !default;
 +$badge-padding-y:             .25em !default;
 +
 +$badge-pill-padding-x:        .6em !default;
  // Use a higher than normal value to ensure completely rounded edges when
  // customizing padding or font-size on labels.
 -$tag-pill-border-radius:    10rem !default;
 +$badge-pill-border-radius:    10rem !default;
  
- // Modals
+ 
+ // 25. Modals
  
  // Padding applied to the modal body
  $modal-inner-padding:         15px !default;
@@@ -850,9 -859,9 +876,9 @@@ $carousel-caption-color
  $carousel-icon-width:                         20px !default;
  
  
- // Close
+ // 34. Close
  
 -$close-font-weight:           bold !default;
 +$close-font-weight:           $font-weight-bold !default;
  $close-color:                 #000 !default;
  $close-text-shadow:           0 1px 0 #fff !default;