rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-13 13:29:25 +01:00
Code Issues Actions Packages Releases Activity

Add Sass docs (variables, mixins, and loops) to most pages (#32747)

Browse Source 
* WIP: Mention variables, mixins, and loops in docs

* Add Sass sections to component pages

* add sass docs for forms and content

* Update buttons.md

* Remove empty mixins sections

* Massive update to utilities and some consistency changes

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto 2021-02-10 19:29:59 -08:00 committed by GitHub
parent e50c11b8c6
commit 4c7a3e8adf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
100 changed files with 942 additions and 480 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/bootstrap-grid.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap-grid.rtl.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap-reboot.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap-reboot.rtl.css.map vendored
View File

File diff suppressed because one or more lines are too long

106
dist/css/bootstrap-utilities.css vendored
View File

@ -1130,6 +1130,10 @@
padding-left: 3rem !important;
}
.font-monospace {
font-family: var(--bs-font-monospace) !important;
}
.fs-1 {
font-size: calc(1.375rem + 1.5vw) !important;
}
@ -1182,16 +1186,20 @@
font-weight: bolder !important;
}
.text-lowercase {
text-transform: lowercase !important;
.lh-1 {
line-height: 1 !important;
}
.text-uppercase {
text-transform: uppercase !important;
.lh-sm {
line-height: 1.25 !important;
}
.text-capitalize {
text-transform: capitalize !important;
.lh-base {
line-height: 1.5 !important;
}
.lh-lg {
line-height: 2 !important;
}
.text-start {
@ -1206,6 +1214,45 @@
text-align: center !important;
}
.text-decoration-none {
text-decoration: none !important;
}
.text-decoration-underline {
text-decoration: underline !important;
}
.text-decoration-line-through {
text-decoration: line-through !important;
}
.text-lowercase {
text-transform: lowercase !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-capitalize {
text-transform: capitalize !important;
}
.text-wrap {
white-space: normal !important;
}
.text-nowrap {
white-space: nowrap !important;
}
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
.text-primary {
color: #0d6efd !important;
}
@ -1262,22 +1309,6 @@
color: inherit !important;
}
.lh-1 {
line-height: 1 !important;
}
.lh-sm {
line-height: 1.25 !important;
}
.lh-base {
line-height: 1.5 !important;
}
.lh-lg {
line-height: 2 !important;
}
.bg-primary {
background-color: #0d6efd !important;
}
@ -1326,37 +1357,6 @@
background-image: var(--bs-gradient) !important;
}
.text-wrap {
white-space: normal !important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-decoration-none {
text-decoration: none !important;
}
.text-decoration-underline {
text-decoration: underline !important;
}
.text-decoration-line-through {
text-decoration: line-through !important;
}
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
.font-monospace {
font-family: var(--bs-font-monospace) !important;
}
.user-select-all {
-webkit-user-select: all !important;
-moz-user-select: all !important;

2
dist/css/bootstrap-utilities.css.map vendored
View File

File diff suppressed because one or more lines are too long

90
dist/css/bootstrap-utilities.rtl.css vendored
View File

@ -1130,6 +1130,10 @@
padding-right: 3rem !important;
}
.font-monospace {
font-family: var(--bs-font-monospace) !important;
}
.fs-1 {
font-size: calc(1.375rem + 1.5vw) !important;
}
@ -1182,16 +1186,20 @@
font-weight: bolder !important;
}
.text-lowercase {
text-transform: lowercase !important;
.lh-1 {
line-height: 1 !important;
}
.text-uppercase {
text-transform: uppercase !important;
.lh-sm {
line-height: 1.25 !important;
}
.text-capitalize {
text-transform: capitalize !important;
.lh-base {
line-height: 1.5 !important;
}
.lh-lg {
line-height: 2 !important;
}
.text-start {
@ -1206,6 +1214,37 @@
text-align: center !important;
}
.text-decoration-none {
text-decoration: none !important;
}
.text-decoration-underline {
text-decoration: underline !important;
}
.text-decoration-line-through {
text-decoration: line-through !important;
}
.text-lowercase {
text-transform: lowercase !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-capitalize {
text-transform: capitalize !important;
}
.text-wrap {
white-space: normal !important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-primary {
color: #0d6efd !important;
}
@ -1262,22 +1301,6 @@
color: inherit !important;
}
.lh-1 {
line-height: 1 !important;
}
.lh-sm {
line-height: 1.25 !important;
}
.lh-base {
line-height: 1.5 !important;
}
.lh-lg {
line-height: 2 !important;
}
.bg-primary {
background-color: #0d6efd !important;
}
@ -1326,29 +1349,6 @@
background-image: var(--bs-gradient) !important;
}
.text-wrap {
white-space: normal !important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-decoration-none {
text-decoration: none !important;
}
.text-decoration-underline {
text-decoration: underline !important;
}
.text-decoration-line-through {
text-decoration: line-through !important;
}
.font-monospace {
font-family: var(--bs-font-monospace) !important;
}
.user-select-all {
-webkit-user-select: all !important;
-moz-user-select: all !important;

2
dist/css/bootstrap-utilities.rtl.css.map vendored
View File

File diff suppressed because one or more lines are too long

106
dist/css/bootstrap.css
View File

@ -7098,6 +7098,10 @@ textarea.form-control-lg {
padding-left: 3rem !important;
}
.font-monospace {
font-family: var(--bs-font-monospace) !important;
}
.fs-1 {
font-size: calc(1.375rem + 1.5vw) !important;
}
@ -7150,16 +7154,20 @@ textarea.form-control-lg {
font-weight: bolder !important;
}
.text-lowercase {
text-transform: lowercase !important;
.lh-1 {
line-height: 1 !important;
}
.text-uppercase {
text-transform: uppercase !important;
.lh-sm {
line-height: 1.25 !important;
}
.text-capitalize {
text-transform: capitalize !important;
.lh-base {
line-height: 1.5 !important;
}
.lh-lg {
line-height: 2 !important;
}
.text-start {
@ -7174,6 +7182,45 @@ textarea.form-control-lg {
text-align: center !important;
}
.text-decoration-none {
text-decoration: none !important;
}
.text-decoration-underline {
text-decoration: underline !important;
}
.text-decoration-line-through {
text-decoration: line-through !important;
}
.text-lowercase {
text-transform: lowercase !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-capitalize {
text-transform: capitalize !important;
}
.text-wrap {
white-space: normal !important;
}
.text-nowrap {
white-space: nowrap !important;
}
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
.text-primary {
color: #0d6efd !important;
}
@ -7230,22 +7277,6 @@ textarea.form-control-lg {
color: inherit !important;
}
.lh-1 {
line-height: 1 !important;
}
.lh-sm {
line-height: 1.25 !important;
}
.lh-base {
line-height: 1.5 !important;
}
.lh-lg {
line-height: 2 !important;
}
.bg-primary {
background-color: #0d6efd !important;
}
@ -7294,37 +7325,6 @@ textarea.form-control-lg {
background-image: var(--bs-gradient) !important;
}
.text-wrap {
white-space: normal !important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-decoration-none {
text-decoration: none !important;
}
.text-decoration-underline {
text-decoration: underline !important;
}
.text-decoration-line-through {
text-decoration: line-through !important;
}
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
.font-monospace {
font-family: var(--bs-font-monospace) !important;
}
.user-select-all {
-webkit-user-select: all !important;
-moz-user-select: all !important;

2
dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

90
dist/css/bootstrap.rtl.css vendored
View File

@ -7083,6 +7083,10 @@ textarea.form-control-lg {
padding-right: 3rem !important;
}
.font-monospace {
font-family: var(--bs-font-monospace) !important;
}
.fs-1 {
font-size: calc(1.375rem + 1.5vw) !important;
}
@ -7135,16 +7139,20 @@ textarea.form-control-lg {
font-weight: bolder !important;
}
.text-lowercase {
text-transform: lowercase !important;
.lh-1 {
line-height: 1 !important;
}
.text-uppercase {
text-transform: uppercase !important;
.lh-sm {
line-height: 1.25 !important;
}
.text-capitalize {
text-transform: capitalize !important;
.lh-base {
line-height: 1.5 !important;
}
.lh-lg {
line-height: 2 !important;
}
.text-start {
@ -7159,6 +7167,37 @@ textarea.form-control-lg {
text-align: center !important;
}
.text-decoration-none {
text-decoration: none !important;
}
.text-decoration-underline {
text-decoration: underline !important;
}
.text-decoration-line-through {
text-decoration: line-through !important;
}
.text-lowercase {
text-transform: lowercase !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-capitalize {
text-transform: capitalize !important;
}
.text-wrap {
white-space: normal !important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-primary {
color: #0d6efd !important;
}
@ -7215,22 +7254,6 @@ textarea.form-control-lg {
color: inherit !important;
}
.lh-1 {
line-height: 1 !important;
}
.lh-sm {
line-height: 1.25 !important;
}
.lh-base {
line-height: 1.5 !important;
}
.lh-lg {
line-height: 2 !important;
}
.bg-primary {
background-color: #0d6efd !important;
}
@ -7279,29 +7302,6 @@ textarea.form-control-lg {
background-image: var(--bs-gradient) !important;
}
.text-wrap {
white-space: normal !important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-decoration-none {
text-decoration: none !important;
}
.text-decoration-underline {
text-decoration: underline !important;
}
.text-decoration-line-through {
text-decoration: line-through !important;
}
.font-monospace {
font-family: var(--bs-font-monospace) !important;
}
.user-select-all {
-webkit-user-select: all !important;
-moz-user-select: all !important;

2
dist/css/bootstrap.rtl.css.map vendored
View File

File diff suppressed because one or more lines are too long

28
dist/js/bootstrap.bundle.js vendored
View File

@ -46,17 +46,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**
@ -766,8 +756,8 @@
_createClass(Alert, null, [{
key: "DATA_KEY",
get: // Getters
function get() {
// Getters
get: function get() {
return DATA_KEY;
}
}]);
@ -842,8 +832,8 @@
_createClass(Button, null, [{
key: "DATA_KEY",
get: // Getters
function get() {
// Getters
get: function get() {
return DATA_KEY$1;
}
}]);
@ -5882,8 +5872,8 @@
_createClass(Popover, null, [{
key: "Default",
get: // Getters
function get() {
// Getters
get: function get() {
return Default$5;
}
}, {
@ -6383,8 +6373,8 @@
_createClass(Tab, null, [{
key: "DATA_KEY",
get: // Getters
function get() {
// Getters
get: function get() {
return DATA_KEY$9;
}
}]);

2
dist/js/bootstrap.bundle.js.map vendored
View File

File diff suppressed because one or more lines are too long

28
dist/js/bootstrap.esm.js vendored
View File

@ -43,17 +43,7 @@ function _extends() {
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**
@ -763,8 +753,8 @@ var Alert = /*#__PURE__*/function (_BaseComponent) {
_createClass(Alert, null, [{
key: "DATA_KEY",
get: // Getters
function get() {
// Getters
get: function get() {
return DATA_KEY;
}
}]);
@ -839,8 +829,8 @@ var Button = /*#__PURE__*/function (_BaseComponent) {
_createClass(Button, null, [{
key: "DATA_KEY",
get: // Getters
function get() {
// Getters
get: function get() {
return DATA_KEY$1;
}
}]);
@ -4158,8 +4148,8 @@ var Popover = /*#__PURE__*/function (_Tooltip) {
_createClass(Popover, null, [{
key: "Default",
get: // Getters
function get() {
// Getters
get: function get() {
return Default$5;
}
}, {
@ -4659,8 +4649,8 @@ var Tab = /*#__PURE__*/function (_BaseComponent) {
_createClass(Tab, null, [{
key: "DATA_KEY",
get: // Getters
function get() {
// Getters
get: function get() {
return DATA_KEY$9;
}
}]);

2
dist/js/bootstrap.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

28
dist/js/bootstrap.js
View File

@ -68,17 +68,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**
@ -788,8 +778,8 @@
_createClass(Alert, null, [{
key: "DATA_KEY",
get: // Getters
function get() {
// Getters
get: function get() {
return DATA_KEY;
}
}]);
@ -864,8 +854,8 @@
_createClass(Button, null, [{
key: "DATA_KEY",
get: // Getters
function get() {
// Getters
get: function get() {
return DATA_KEY$1;
}
}]);
@ -4183,8 +4173,8 @@
_createClass(Popover, null, [{
key: "Default",
get: // Getters
function get() {
// Getters
get: function get() {
return Default$5;
}
}, {
@ -4684,8 +4674,8 @@
_createClass(Tab, null, [{
key: "DATA_KEY",
get: // Getters
function get() {
// Getters
get: function get() {
return DATA_KEY$9;
}
}]);

2
dist/js/bootstrap.js.map vendored
View File

File diff suppressed because one or more lines are too long

16
js/dist/alert.js vendored
View File

@ -34,17 +34,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**
@ -276,8 +266,8 @@
_createClass(Alert, null, [{
key: "DATA_KEY",
get: // Getters
function get() {
// Getters
get: function get() {
return DATA_KEY;
}
}]);

2
js/dist/alert.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
js/dist/base-component.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"base-component.js","sources":["../src/base-component.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-beta2): base-component.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport Data from './dom/data'\n\n/**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\nconst VERSION = '5.0.0-beta2'\n\nclass BaseComponent {\n constructor(element) {\n if (!element) {\n return\n }\n\n this._element = element\n Data.setData(element, this.constructor.DATA_KEY, this)\n }\n\n dispose() {\n Data.removeData(this._element, this.constructor.DATA_KEY)\n this._element = null\n }\n\n /** Static */\n\n static getInstance(element) {\n return Data.getData(element, this.DATA_KEY)\n }\n\n static get VERSION() {\n return VERSION\n }\n}\n\nexport default BaseComponent\n"],"names":["VERSION","BaseComponent","element","_element","Data","setData","constructor","DATA_KEY","dispose","removeData","getInstance","getData"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA;EACA;EACA;EACA;EACA;;EAEA,IAAMA,OAAO,GAAG,aAAhB;;MAEMC;EACJ,yBAAYC,OAAZ,EAAqB;EACnB,QAAI,CAACA,OAAL,EAAc;EACZ;EACD;;EAED,SAAKC,QAAL,GAAgBD,OAAhB;EACAE,IAAAA,wBAAI,CAACC,OAAL,CAAaH,OAAb,EAAsB,KAAKI,WAAL,CAAiBC,QAAvC,EAAiD,IAAjD;EACD;;;;WAEDC,UAAA,mBAAU;EACRJ,IAAAA,wBAAI,CAACK,UAAL,CAAgB,KAAKN,QAArB,EAA+B,KAAKG,WAAL,CAAiBC,QAAhD;EACA,SAAKJ,QAAL,GAAgB,IAAhB;EACD;EAED;;;kBAEOO,cAAP,qBAAmBR,OAAnB,EAA4B;EAC1B,WAAOE,wBAAI,CAACO,OAAL,CAAaT,OAAb,EAAsB,KAAKK,QAA3B,CAAP;EACD;;;;WAED,eAAqB;EACnB,aAAOP,OAAP;EACD;;;;;;;;;;;;"}
{"version":3,"file":"base-component.js","sources":["../src/base-component.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-beta2): base-component.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport Data from './dom/data'\n\n/**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\nconst VERSION = '5.0.0-beta2'\n\nclass BaseComponent {\n constructor(element) {\n if (!element) {\n return\n }\n\n this._element = element\n Data.setData(element, this.constructor.DATA_KEY, this)\n }\n\n dispose() {\n Data.removeData(this._element, this.constructor.DATA_KEY)\n this._element = null\n }\n\n /** Static */\n\n static getInstance(element) {\n return Data.getData(element, this.DATA_KEY)\n }\n\n static get VERSION() {\n return VERSION\n }\n}\n\nexport default BaseComponent\n"],"names":["VERSION","BaseComponent","element","_element","Data","setData","constructor","DATA_KEY","dispose","removeData","getInstance","getData"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA;EACA;EACA;EACA;EACA;;EAEA,IAAMA,OAAO,GAAG,aAAhB;;MAEMC;EACJ,yBAAYC,OAAZ,EAAqB;EACnB,QAAI,CAACA,OAAL,EAAc;EACZ;EACD;;EAED,SAAKC,QAAL,GAAgBD,OAAhB;EACAE,IAAAA,wBAAI,CAACC,OAAL,CAAaH,OAAb,EAAsB,KAAKI,WAAL,CAAiBC,QAAvC,EAAiD,IAAjD;EACD;;;;WAEDC,UAAA,mBAAU;EACRJ,IAAAA,wBAAI,CAACK,UAAL,CAAgB,KAAKN,QAArB,EAA+B,KAAKG,WAAL,CAAiBC,QAAhD;EACA,SAAKJ,QAAL,GAAgB,IAAhB;EACD;EAED;;;kBAEOO,cAAP,qBAAmBR,OAAnB,EAA4B;EAC1B,WAAOE,wBAAI,CAACO,OAAL,CAAaT,OAAb,EAAsB,KAAKK,QAA3B,CAAP;EACD;;;;0BAEoB;EACnB,aAAOP,OAAP;EACD;;;;;;;;;;;;"}

16
js/dist/button.js vendored
View File

@ -34,17 +34,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**
@ -144,8 +134,8 @@
_createClass(Button, null, [{
key: "DATA_KEY",
get: // Getters
function get() {
// Getters
get: function get() {
return DATA_KEY;
}
}]);

2
js/dist/button.js.map vendored
View File

File diff suppressed because one or more lines are too long

12
js/dist/carousel.js vendored
View File

@ -54,17 +54,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**

2
js/dist/carousel.js.map vendored
View File

File diff suppressed because one or more lines are too long

12
js/dist/collapse.js vendored
View File

@ -54,17 +54,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**

2
js/dist/collapse.js.map vendored
View File

File diff suppressed because one or more lines are too long

12
js/dist/dropdown.js vendored
View File

@ -75,17 +75,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**

2
js/dist/dropdown.js.map vendored
View File

File diff suppressed because one or more lines are too long

12
js/dist/modal.js vendored
View File

@ -54,17 +54,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**

2
js/dist/modal.js.map vendored
View File

File diff suppressed because one or more lines are too long

16
js/dist/popover.js vendored
View File

@ -52,17 +52,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**
@ -236,8 +226,8 @@
_createClass(Popover, null, [{
key: "Default",
get: // Getters
function get() {
// Getters
get: function get() {
return Default;
}
}, {

2
js/dist/popover.js.map vendored
View File

File diff suppressed because one or more lines are too long

12
js/dist/scrollspy.js vendored
View File

@ -54,17 +54,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**

2
js/dist/scrollspy.js.map vendored
View File

File diff suppressed because one or more lines are too long

16
js/dist/tab.js vendored
View File

@ -35,17 +35,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**
@ -346,8 +336,8 @@
_createClass(Tab, null, [{
key: "DATA_KEY",
get: // Getters
function get() {
// Getters
get: function get() {
return DATA_KEY;
}
}]);

2
js/dist/tab.js.map vendored
View File

File diff suppressed because one or more lines are too long

12
js/dist/toast.js vendored
View File

@ -53,17 +53,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**

2
js/dist/toast.js.map vendored
View File

File diff suppressed because one or more lines are too long

12
js/dist/tooltip.js vendored
View File

@ -75,17 +75,7 @@
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
subClass.__proto__ = superClass;
}
/**

2
js/dist/tooltip.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
scss/_buttons.scss
View File

@ -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
//

2
scss/_modal.scss
View File

@ -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

2
scss/_navbar.scss
View File

@ -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

3
scss/_progress.scss
View File

@ -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;

4
scss/_spinners.scss
View File

@ -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;

2
scss/_transitions.scss
View File

@ -6,6 +6,7 @@
}
}
// scss-docs-start collapse-classes
.collapse {
&:not(.show) {
display: none;
@ -17,3 +18,4 @@
overflow: hidden;
@include transition($transition-collapse);
}
// scss-docs-end collapse-classes

102
scss/_utilities.scss
View File

@ -1,14 +1,19 @@
// stylelint-disable indentation
// Utilities
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
(
// scss-docs-start utils-vertical-align
"align": (
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top
),
// scss-docs-end utils-vertical-align
// scss-docs-start utils-float
"float": (
responsive: true,
property: float,
@ -18,10 +23,13 @@ $utilities: map-merge(
none: none,
)
),
// scss-docs-end utils-float
// scss-docs-start utils-overflow
"overflow": (
property: overflow,
values: auto hidden visible scroll,
),
// scss-docs-end utils-overflow
// scss-docs-start utils-display
"display": (
responsive: true,
@ -31,6 +39,7 @@ $utilities: map-merge(
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),
// scss-docs-end utils-display
// scss-docs-start utils-shadow
"shadow": (
property: box-shadow,
class: shadow,
@ -41,6 +50,8 @@ $utilities: map-merge(
none: none,
)
),
// scss-docs-end utils-shadow
// scss-docs-start utils-position
"position": (
property: position,
values: static relative absolute fixed sticky
@ -72,6 +83,8 @@ $utilities: map-merge(
y: translateY(-50%),
)
),
// scss-docs-end utils-position
// scss-docs-start utils-borders
"border": (
property: border,
values: (
@ -119,7 +132,9 @@ $utilities: map-merge(
class: border,
values: $border-widths
),
// scss-docs-end utils-borders
// Sizing utilities
// scss-docs-start utils-sizing
"width": (
property: width,
class: w,
@ -172,7 +187,9 @@ $utilities: map-merge(
class: min-vh,
values: (100: 100vh)
),
// scss-docs-end utils-sizing
// Flex utilities
// scss-docs-start utils-flex
"flex": (
responsive: true,
property: flex,
@ -275,7 +292,9 @@ $utilities: map-merge(
last: 6,
),
),
// scss-docs-end utils-flex
// Margin utilities
// scss-docs-start utils-spacing
"margin": (
responsive: true,
property: margin,
@ -404,7 +423,14 @@ $utilities: map-merge(
class: ps,
values: $spacers
),
// scss-docs-end utils-spacing
// Text
// scss-docs-start utils-text
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$variable-prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
@ -427,10 +453,15 @@ $utilities: map-merge(
bolder: $font-weight-bolder
)
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
),
"text-align": (
responsive: true,
@ -442,6 +473,30 @@ $utilities: map-merge(
center: center,
)
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
// scss-docs-end utils-text
// scss-docs-start utils-color
"color": (
property: color,
@ -459,16 +514,6 @@ $utilities: map-merge(
)
),
// scss-docs-end utils-color
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
),
// scss-docs-start utils-bg-color
"background-color": (
property: background-color,
@ -488,29 +533,7 @@ $utilities: map-merge(
class: bg,
values: (gradient: var(--#{$variable-prefix}gradient))
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$variable-prefix}font-monospace))
),
// scss-docs-start utils-interaction
"user-select": (
property: user-select,
values: all auto none
@ -520,6 +543,8 @@ $utilities: map-merge(
class: pe,
values: none auto,
),
// scss-docs-end utils-interaction
// scss-docs-start utils-border-radius
"rounded": (
property: border-radius,
class: rounded,
@ -553,6 +578,8 @@ $utilities: map-merge(
class: rounded-start,
values: (null: $border-radius)
),
// scss-docs-end utils-border-radius
// scss-docs-start utils-visibility
"visibility": (
property: visibility,
class: null,
@ -561,6 +588,7 @@ $utilities: map-merge(
invisible: hidden,
)
)
// scss-docs-end utils-visibility
),
$utilities
);

131
scss/_variables.scss
View File

@ -246,6 +246,7 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
// scss-docs-start spacer-variables-maps
$spacer: 1rem !default;
$spacers: (
0: 0,
@ -257,17 +258,19 @@ $spacers: (
) !default;
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
// scss-docs-end spacer-variables-maps
// Position
//
// Define the edge positioning anchors of the position utilities.
// scss-docs-start position-map
$position-values: (
0: 0,
50: 50%,
100: 100%
) !default;
// scss-docs-end position-map
// Body
//
@ -354,6 +357,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,27 +369,36 @@ $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
// scss-docs-start box-shadow-variables
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
// scss-docs-end box-shadow-variables
$component-active-color: $white !default;
$component-active-bg: $primary !default;
// scss-docs-start caret-variables
$caret-width: .3em !default;
$caret-vertical-align: $caret-width * .85 !default;
$caret-spacing: $caret-width * .85 !default;
// scss-docs-end caret-variables
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
// scss-docs-start collapse-transition
$transition-collapse: height .35s ease !default;
// scss-docs-end collapse-transition
// stylelint-disable function-disallowed-list
// scss-docs-start aspect-ratios
@ -402,6 +415,7 @@ $aspect-ratios: (
//
// Font, line-height, and color for body text, headings, and more.
// scss-docs-start font-variables
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
@ -434,6 +448,7 @@ $h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
// scss-docs-end font-variables
// scss-docs-start font-sizes
$font-sizes: (
@ -446,12 +461,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: (
@ -467,6 +484,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;
@ -501,6 +519,7 @@ $nested-kbd-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default;
$mark-bg: #fcf8e3 !default;
// scss-docs-end type-variables
// Tables
@ -543,7 +562,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),
@ -554,13 +575,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;
@ -581,12 +603,14 @@ $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
//
// 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,22 +654,28 @@ $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
// 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;
@ -694,8 +724,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;
@ -728,6 +759,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;
@ -741,16 +776,18 @@ $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www
$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;
// 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;
@ -788,7 +825,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;
@ -807,11 +846,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;
@ -820,9 +863,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;
@ -833,6 +878,7 @@ $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.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'/></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;
// scss-docs-end form-feedback-variables
// scss-docs-start form-validation-states
$form-validation-states: (
@ -865,6 +911,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 +932,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 +956,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 +977,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 +1014,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 +1029,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 +1070,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 +1090,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 +1127,11 @@ $accordion-icon-transform: rotate(180deg) !default;
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
// scss-docs-end accordion-variables
// Tooltips
// scss-docs-start tooltip-variables
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: $white !default;
@ -1082,18 +1145,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 +1184,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 +1205,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,28 +1260,30 @@ $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
//
// 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
// scss-docs-start progress-variables
$progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default;
$progress-bg: $gray-200 !default;
@ -1220,10 +1293,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,26 +1323,32 @@ $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
// 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
// scss-docs-start breadcrumb-variables
$breadcrumb-font-size: null !default;
$breadcrumb-padding-y: 0 !default;
$breadcrumb-padding-x: 0 !default;
@ -1279,9 +1360,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 +1396,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 +1410,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 +1428,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

2
scss/mixins/_alert.scss
View File

@ -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

2
scss/mixins/_border-radius.scss
View File

@ -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

7
scss/mixins/_buttons.scss
View File

@ -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

2
scss/mixins/_caret.scss
View File

@ -1,3 +1,4 @@
// scss-docs-start caret-mixins
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
@ -60,3 +61,4 @@
}
}
}
// scss-docs-end caret-mixins

3
scss/mixins/_forms.scss
View File

@ -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

2
scss/mixins/_list-group.scss
View File

@ -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

2
scss/mixins/_pagination.scss
View File

@ -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

6
site/content/docs/5.0/components/accordion.md
View File

@ -104,3 +104,9 @@ 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" >}}

18
site/content/docs/5.0/components/alerts.md
View File

@ -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 in combination with `$theme-colors` to create contextual 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

6
site/content/docs/5.0/components/badge.md
View File

@ -63,3 +63,9 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
<span class="badge rounded-pill bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}}
{{< /badge.inline >}}
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="badge-variables" file="scss/_variables.scss" >}}

6
site/content/docs/5.0/components/breadcrumb.md
View File

@ -88,3 +88,9 @@ $breadcrumb-divider: none;
Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
## Sass
### Variables
{{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}}

22
site/content/docs/5.0/components/buttons.md
View File

@ -205,3 +205,25 @@ buttons.forEach(function (button) {
button.toggle()
})
```
## Sass
### Variables
{{< scss-docs name="btn-variables" file="scss/_variables.scss" >}}
### Mixins
There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin.
{{< scss-docs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" >}}
{{< scss-docs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" >}}
{{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}}
### Loops
Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`.
{{< scss-docs name="btn-variant-loops" file="scss/_buttons.scss" >}}

6
site/content/docs/5.0/components/card.md
View File

@ -721,3 +721,9 @@ Just like with card groups, card footers will automatically line up.
### Masonry
In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.
## Sass
### Variables
{{< scss-docs name="card-variables" file="scss/_variables.scss" >}}

14
site/content/docs/5.0/components/carousel.md
View File

@ -279,6 +279,16 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
</div>
{{< /example >}}
## Custom transition
The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`).
## Sass
### Variables
{{< scss-docs name="carousel-variables" file="scss/_variables.scss" >}}
## Usage
### Via data attributes
@ -446,7 +456,3 @@ myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})
```
### Change transition duration
The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`).

6
site/content/docs/5.0/components/close-button.md
View File

@ -30,3 +30,9 @@ Change the default `.btn-close` to be white with the `.btn-close-white` class. T
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="close-variables" file="scss/_variables.scss" >}}

12
site/content/docs/5.0/components/collapse.md
View File

@ -77,6 +77,18 @@ If your control element is targeting a single collapsible element – i.e. the `
Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript.
## Sass
### Variables
{{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}}
### Classes
Collapse transition classes can be found in `scss/_transitions.scss` as these are shared across multiple components (collapse and accordion).
{{< scss-docs name="collapse-classes" file="scss/_transitions.scss" >}}
## Usage
The collapse plugin utilizes a few classes to handle the heavy lifting:

22
site/content/docs/5.0/components/dropdowns.md
View File

@ -903,6 +903,28 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
</div>
{{< /example >}}
## Sass
### Variables
Variables for all dropdowns:
{{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}}
Variables for the [dark dropdown](#dark-dropdowns):
{{< scss-docs name="dropdown-dark-variables" file="scss/_variables.scss" >}}
Variables for the CSS-based carets that indicate a dropdown's interactivity:
{{< scss-docs name="caret-variables" file="scss/_variables.scss" >}}
### Mixins
Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`.
{{< scss-docs name="caret-mixins" file="scss/mixins/_caret.scss" >}}
## Usage
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-bs-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.

17
site/content/docs/5.0/components/list-group.md
View File

@ -254,6 +254,23 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
</div>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
### Mixins
Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
{{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
### Loop
Loop that generates the modifier classes with the `list-group-item-variant()` mixin.
{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
## JavaScript behavior

12
site/content/docs/5.0/components/modal.md
View File

@ -793,6 +793,18 @@ Another override is the option to pop up a modal that covers the user viewport,
</div>
</div>
## Sass
### Variables
{{< scss-docs name="modal-variables" file="scss/_variables.scss" >}}
### Loop
[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
{{< scss-docs name="modal-fullscreen-loop" file="scss/_modal.scss" >}}
## Usage
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.

14
site/content/docs/5.0/components/navbar.md
View File

@ -646,3 +646,17 @@ Sometimes you want to use the collapse plugin to trigger a container element for
{{< /example >}}
When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
## Sass
### Variables
{{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
{{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}}
### Loop
[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
{{< scss-docs name="navbar-expand-loop" file="scss/_navbar.scss" >}}

6
site/content/docs/5.0/components/navs-tabs.md
View File

@ -304,6 +304,12 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</ul>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="nav-variables" file="scss/_variables.scss" >}}
## JavaScript behavior
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content.

10
site/content/docs/5.0/components/pagination.md
View File

@ -155,3 +155,13 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
</ul>
</nav>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}
### Mixins
{{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}

6
site/content/docs/5.0/components/popovers.md
View File

@ -109,6 +109,12 @@ For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus
</span>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="popover-variables" file="scss/_variables.scss" >}}
## Usage
Enable popovers via JavaScript:

12
site/content/docs/5.0/components/progress.md
View File

@ -137,3 +137,15 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
```
## Sass
### Variables
{{< scss-docs name="progress-variables" file="scss/_variables.scss" >}}
### Keyframes
Used for creating the CSS animations for `.progress-bar-animated`. Included in `scss/_progress-bar.scss`.
{{< scss-docs name="progress-keyframes" file="scss/_progress.scss" >}}

14
site/content/docs/5.0/components/spinners.md
View File

@ -171,6 +171,20 @@ Use spinners within buttons to indicate an action is currently processing or tak
</button>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="spinner-variables" file="scss/_variables.scss" >}}
### Keyframes
Used for creating the CSS animations for our spinners. Included in `scss/_spinners.scss`.
{{< 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" >}}

8
site/content/docs/5.0/components/toasts.md
View File

@ -304,9 +304,13 @@ When using `autohide: false`, you must add a close button to allow users to dism
</div>
{{< /example >}}
## JavaScript behavior
## Sass
### Usage
### Variables
{{< scss-docs name="toast-variables" file="scss/_variables.scss" >}}
## Usage
Initialize toasts via JavaScript:

6
site/content/docs/5.0/components/tooltips.md
View File

@ -96,6 +96,12 @@ With an SVG:
</a>
</div>
## Sass
### Variables
{{< scss-docs name="tooltip-variables" file="scss/_variables.scss" >}}
## Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.

7
site/content/docs/5.0/content/figures.md
View File

@ -3,6 +3,7 @@ layout: docs
title: Figures
description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
group: content
toc: true
---
Anytime you need to display a piece of content—like an image with an optional caption, consider using a `<figure>`.
@ -24,3 +25,9 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
<figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="figure-variables" file="scss/_variables.scss" >}}

8
site/content/docs/5.0/content/images.md
View File

@ -53,3 +53,11 @@ If you are using the `<picture>` element to specify multiple `<source>` elements
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
```
## Sass
### Variables
Variables are available for image thumbnails.
{{< scss-docs name="thumbnail-variables" file="scss/_variables.scss" >}}

14
site/content/docs/5.0/content/tables.md
View File

@ -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
### 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.
{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}

16
site/content/docs/5.0/content/typography.md
View File

@ -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" >}}).

6
site/content/docs/5.0/forms/checks-radios.md
View File

@ -269,3 +269,9 @@ Different variants of `.btn`, such at the various outlined styles, are supported
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}}

6
site/content/docs/5.0/forms/floating-labels.md
View File

@ -100,3 +100,9 @@ When working with the Bootstrap grid system, be sure to place form elements with
</div>
</div>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}

14
site/content/docs/5.0/forms/form-control.md
View File

@ -130,3 +130,17 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
<option value="Chicago">
</datalist>
{{< /example >}}
## Sass
### Variables
`$input-*` are shared across most of our form controls (and not buttons).
{{< scss-docs name="form-input-variables" file="scss/_variables.scss" >}}
`$form-label-*` and `$form-text-*` are for our `<label>`s and `.form-text` component.
{{< scss-docs name="form-label-variables" file="scss/_variables.scss" >}}
{{< scss-docs name="form-text-variables" file="scss/_variables.scss" >}}

6
site/content/docs/5.0/forms/input-group.md
View File

@ -308,3 +308,9 @@ Input groups include support for custom selects and custom file inputs. Browser
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}

10
site/content/docs/5.0/forms/overview.md
View File

@ -142,3 +142,13 @@ For situations where it's not possible to include a visible `<label>` or appropr
If none of these are present, assistive technologies may resort to using the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches.
While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.
## Sass
Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$btn-input-*` and `$input-*` variables.
### Variables
`$btn-input-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables.
{{< scss-docs name="input-btn-variables" file="scss/_variables.scss" >}}

6
site/content/docs/5.0/forms/range.md
View File

@ -41,3 +41,9 @@ By default, range inputs "snap" to integer values. To change this, you can speci
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}}

6
site/content/docs/5.0/forms/select.md
View File

@ -73,3 +73,9 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara
<option value="3">Three</option>
</select>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}

26
site/content/docs/5.0/forms/validation.md
View File

@ -349,18 +349,34 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
</form>
{{< /example >}}
## Customizing
## Sass
Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
### Variables
Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin.
{{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}}
This is the Sass map from `_variables.scss`. Override this and recompile your Sass to generate different states:
### Mixins
Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles.
{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
### Map
This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
{{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}}
Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
This is the loop from `forms/_validation.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop:
### Loop
Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.
{{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}}
### Customizing
Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
Please note that **we do not recommend customizing `$form-validation-states` values without also modifying the `form-validation-state` mixin**.

20
site/content/docs/5.0/utilities/borders.md
View File

@ -77,3 +77,23 @@ 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
Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-borders" file="scss/_utilities.scss" >}}
{{< scss-docs name="utils-border-radius" file="scss/_utilities.scss" >}}

8
site/content/docs/5.0/utilities/flex.md
View File

@ -627,3 +627,11 @@ Responsive variations also exist for `align-content`.
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
## Sass
### Utilities API
Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-flex" file="scss/_utilities.scss" >}}

8
site/content/docs/5.0/utilities/float.md
View File

@ -38,3 +38,11 @@ Here are all the support classes:
{{- end -}}
{{< /float.inline >}}
{{< /markdown >}}
## Sass
### Utilities API
Float utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-float" file="scss/_utilities.scss" >}}

8
site/content/docs/5.0/utilities/interactions.md
View File

@ -29,3 +29,11 @@ Bootstrap provides `.pe-none` and `.pe-auto` classes to prevent or add element i
{{< callout warning >}}
The `.pe-none` class (and the `pointer-events` CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with `.pe-none` are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as `tabindex="-1"` (to prevent them from receiving keyboard focus) and `aria-disabled="true"` (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable. For form controls, consider using the `disabled` HTML attribute instead.
{{< /callout >}}
## Sass
### Utilities API
Interaction utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-interaction" file="scss/_utilities.scss" >}}

8
site/content/docs/5.0/utilities/overflow.md
View File

@ -30,3 +30,11 @@ Adjust the `overflow` property on the fly with four default values and classes.
```
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
## Sass
### Utilities API
Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}}

13
site/content/docs/5.0/utilities/position.md
View File

@ -115,3 +115,16 @@ You can use these classes with existing components to create new ones. Remember
</div>
{{< /example >}}
## Sass
### Maps
Default position utility values are declared in a Sass map, then used to generate our utilities.
{{< scss-docs name="position-map" file="scss/_variables.scss" >}}
### Utilities API
Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-position" file="scss/_utilities.scss" >}}

13
site/content/docs/5.0/utilities/shadows.md
View File

@ -3,6 +3,7 @@ layout: docs
title: Shadows
description: Add or remove shadows to elements with box-shadow utilities.
group: utilities
toc: true
---
## Examples
@ -15,3 +16,15 @@ While shadows on components are disabled by default in Bootstrap and can be enab
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}}
### Utilities API
Shadow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-shadow" file="scss/_utilities.scss" >}}

8
site/content/docs/5.0/utilities/sizing.md
View File

@ -50,3 +50,11 @@ You can also use utilities to set the width and height relative to the viewport.
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>
```
## Sass
### Utilities API
Sizing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-sizing" file="scss/_utilities.scss" >}}

14
site/content/docs/5.0/utilities/spacing.md
View File

@ -109,3 +109,17 @@ When using `display: grid`, you can make use of `gap` utilities on the parent gr
{{< /example >}}
Support includes responsive options for all of Bootstrap's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`.
## Sass
### Maps
Spacing utilities are declared via Sass map and then generated with our utilities API.
{{< scss-docs name="spacer-variables-maps" file="scss/_variables.scss" >}}
### Utilities API
Spacing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-spacing" file="scss/_utilities.scss" >}}

20
site/content/docs/5.0/utilities/text.md
View File

@ -82,8 +82,6 @@ Quickly change the `font-size` of text. While our heading classes (e.g., `.h1`
Customize your available `font-size`s by modifying the `$font-sizes` Sass map.
{{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
## Font weight and italics
Quickly change the `font-weight` or `font-style` of text with these utilities. `font-style` utilities are abbreviated as `.fst-*` and `font-weight` utilities are abbreviated as `.fw-*`.
@ -136,3 +134,21 @@ Decorate text in components with text decoration classes.
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="font-variables" file="scss/_variables.scss" >}}
### Maps
Font-size utilities are generated from this map, in combination with our utilities API.
{{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
### Utilities API
Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-text" file="scss/_utilities.scss" >}}

8
site/content/docs/5.0/utilities/vertical-align.md
View File

@ -38,3 +38,11 @@ With table cells:
</tbody>
</table>
{{< /example >}}
## Sass
### Utilities API
Vertical align utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-vertical-align" file="scss/_utilities.scss" >}}

8
site/content/docs/5.0/utilities/visibility.md
View File

@ -27,3 +27,11 @@ Apply `.visible` or `.invisible` as needed.
visibility: hidden !important;
}
```
## Sass
### Utilities API
Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-visibility" file="scss/_utilities.scss" >}}