├── LICENSE ├── README.md ├── blog-template.html ├── css ├── mdb.dark.min.css ├── mdb.dark.min.css.map ├── mdb.dark.rtl.min.css ├── mdb.min.css ├── mdb.min.css.map └── mdb.rtl.min.css ├── img └── mdb-favicon.ico ├── js ├── mdb.es.min.js ├── mdb.es.min.js.map ├── mdb.umd.min.js └── mdb.umd.min.js.map └── src ├── js ├── autoinit │ ├── callbacks │ │ └── free.js │ ├── index.free.js │ ├── init.js │ └── initSelectors │ │ └── free.js ├── bootstrap │ ├── dist │ │ ├── alert.js │ │ ├── alert.js.map │ │ ├── base-component.js │ │ ├── base-component.js.map │ │ ├── button.js │ │ ├── button.js.map │ │ ├── carousel.js │ │ ├── carousel.js.map │ │ ├── collapse.js │ │ ├── collapse.js.map │ │ ├── dom │ │ │ ├── data.js │ │ │ ├── data.js.map │ │ │ ├── event-handler.js │ │ │ ├── event-handler.js.map │ │ │ ├── manipulator.js │ │ │ ├── manipulator.js.map │ │ │ ├── selector-engine.js │ │ │ └── selector-engine.js.map │ │ ├── dropdown.js │ │ ├── dropdown.js.map │ │ ├── modal.js │ │ ├── modal.js.map │ │ ├── offcanvas.js │ │ ├── offcanvas.js.map │ │ ├── popover.js │ │ ├── popover.js.map │ │ ├── scrollspy.js │ │ ├── scrollspy.js.map │ │ ├── tab.js │ │ ├── tab.js.map │ │ ├── toast.js │ │ ├── toast.js.map │ │ ├── tooltip.js │ │ ├── tooltip.js.map │ │ └── util │ │ │ ├── backdrop.js │ │ │ ├── backdrop.js.map │ │ │ ├── component-functions.js │ │ │ ├── component-functions.js.map │ │ │ ├── config.js │ │ │ ├── config.js.map │ │ │ ├── focustrap.js │ │ │ ├── focustrap.js.map │ │ │ ├── index.js │ │ │ ├── index.js.map │ │ │ ├── sanitizer.js │ │ │ ├── sanitizer.js.map │ │ │ ├── scrollbar.js │ │ │ ├── scrollbar.js.map │ │ │ ├── swipe.js │ │ │ ├── swipe.js.map │ │ │ ├── template-factory.js │ │ │ └── template-factory.js.map │ ├── mdb-prefix │ │ ├── alert.js │ │ ├── base-component.js │ │ ├── button.js │ │ ├── carousel.js │ │ ├── collapse.js │ │ ├── dom │ │ │ ├── data.js │ │ │ ├── event-handler.js │ │ │ ├── manipulator.js │ │ │ └── selector-engine.js │ │ ├── dropdown.js │ │ ├── modal.js │ │ ├── offcanvas.js │ │ ├── popover.js │ │ ├── scrollspy.js │ │ ├── tab.js │ │ ├── toast.js │ │ ├── tooltip.js │ │ └── util │ │ │ ├── backdrop.js │ │ │ ├── component-functions.js │ │ │ ├── config.js │ │ │ ├── focustrap.js │ │ │ ├── index.js │ │ │ ├── sanitizer.js │ │ │ ├── scrollbar.js │ │ │ ├── swipe.js │ │ │ └── template-factory.js │ └── src │ │ ├── alert.js │ │ ├── base-component.js │ │ ├── button.js │ │ ├── carousel.js │ │ ├── collapse.js │ │ ├── dom │ │ ├── data.js │ │ ├── event-handler.js │ │ ├── manipulator.js │ │ └── selector-engine.js │ │ ├── dropdown.js │ │ ├── modal.js │ │ ├── offcanvas.js │ │ ├── popover.js │ │ ├── scrollspy.js │ │ ├── tab.js │ │ ├── toast.js │ │ ├── tooltip.js │ │ └── util │ │ ├── backdrop.js │ │ ├── component-functions.js │ │ ├── config.js │ │ ├── focustrap.js │ │ ├── index.js │ │ ├── sanitizer.js │ │ ├── scrollbar.js │ │ ├── swipe.js │ │ └── template-factory.js ├── free │ ├── alert.js │ ├── base-component.js │ ├── button.js │ ├── carousel.js │ ├── collapse.js │ ├── dropdown.js │ ├── input.js │ ├── modal.js │ ├── popover.js │ ├── range.js │ ├── ripple.js │ ├── scrollspy.js │ ├── tab.js │ ├── toast.js │ └── tooltip.js ├── mdb.free.es.js ├── mdb.free.umd.js └── mdb │ ├── dom │ ├── data.js │ ├── event-handler.js │ ├── manipulator.js │ └── selector-engine.js │ ├── perfect-scrollbar │ ├── handlers │ │ ├── click-rail.js │ │ ├── drag-thumb.js │ │ ├── keyboard.js │ │ ├── mouse-wheel.js │ │ └── touch.js │ ├── index.js │ ├── lib │ │ ├── class-names.js │ │ ├── css.js │ │ ├── dom.js │ │ ├── event-manager.js │ │ └── util.js │ ├── process-scroll-diff.js │ └── update-geometry.js │ └── util │ ├── focusTrap.js │ ├── index.js │ ├── keycodes.js │ ├── sanitizer.js │ ├── scrollbar.js │ ├── stack.js │ └── touch │ ├── index.js │ ├── swipe.js │ └── touchUtil.js └── scss ├── bootstrap-rtl-fix ├── _accordion.scss ├── _alert.scss ├── _badge.scss ├── _breadcrumb.scss ├── _button-group.scss ├── _buttons.scss ├── _card.scss ├── _carousel.scss ├── _close.scss ├── _containers.scss ├── _dropdown.scss ├── _forms.scss ├── _functions.scss ├── _grid.scss ├── _helpers.scss ├── _images.scss ├── _list-group.scss ├── _maps.scss ├── _mixins.scss ├── _modal.scss ├── _nav.scss ├── _navbar.scss ├── _offcanvas.scss ├── _pagination.scss ├── _placeholders.scss ├── _popover.scss ├── _progress.scss ├── _reboot.scss ├── _root.scss ├── _spinners.scss ├── _tables.scss ├── _toasts.scss ├── _tooltip.scss ├── _transitions.scss ├── _type.scss ├── _utilities.scss ├── _variables-dark.scss ├── _variables.scss ├── bootstrap-grid.scss ├── bootstrap-reboot.scss ├── bootstrap-utilities.scss ├── bootstrap.scss ├── forms │ ├── _floating-labels.scss │ ├── _form-check.scss │ ├── _form-control.scss │ ├── _form-range.scss │ ├── _form-select.scss │ ├── _form-text.scss │ ├── _input-group.scss │ ├── _labels.scss │ └── _validation.scss ├── helpers │ ├── _clearfix.scss │ ├── _color-bg.scss │ ├── _colored-links.scss │ ├── _focus-ring.scss │ ├── _icon-link.scss │ ├── _position.scss │ ├── _ratio.scss │ ├── _stacks.scss │ ├── _stretched-link.scss │ ├── _text-truncation.scss │ ├── _visually-hidden.scss │ └── _vr.scss ├── mixins │ ├── _alert.scss │ ├── _backdrop.scss │ ├── _banner.scss │ ├── _border-radius.scss │ ├── _box-shadow.scss │ ├── _breakpoints.scss │ ├── _buttons.scss │ ├── _caret.scss │ ├── _clearfix.scss │ ├── _color-mode.scss │ ├── _color-scheme.scss │ ├── _container.scss │ ├── _deprecate.scss │ ├── _forms.scss │ ├── _gradients.scss │ ├── _grid.scss │ ├── _image.scss │ ├── _list-group.scss │ ├── _lists.scss │ ├── _pagination.scss │ ├── _reset-text.scss │ ├── _resize.scss │ ├── _table-variants.scss │ ├── _text-truncate.scss │ ├── _transition.scss │ ├── _utilities.scss │ └── _visually-hidden.scss ├── utilities │ └── _api.scss └── vendor │ └── _rfs.scss ├── bootstrap ├── _accordion.scss ├── _alert.scss ├── _badge.scss ├── _breadcrumb.scss ├── _button-group.scss ├── _buttons.scss ├── _card.scss ├── _carousel.scss ├── _close.scss ├── _containers.scss ├── _dropdown.scss ├── _forms.scss ├── _functions.scss ├── _grid.scss ├── _helpers.scss ├── _images.scss ├── _list-group.scss ├── _maps.scss ├── _mixins.scss ├── _modal.scss ├── _nav.scss ├── _navbar.scss ├── _offcanvas.scss ├── _pagination.scss ├── _placeholders.scss ├── _popover.scss ├── _progress.scss ├── _reboot.scss ├── _root.scss ├── _spinners.scss ├── _tables.scss ├── _toasts.scss ├── _tooltip.scss ├── _transitions.scss ├── _type.scss ├── _utilities.scss ├── _variables-dark.scss ├── _variables.scss ├── bootstrap-grid.scss ├── bootstrap-reboot.scss ├── bootstrap-utilities.scss ├── bootstrap.scss ├── forms │ ├── _floating-labels.scss │ ├── _form-check.scss │ ├── _form-control.scss │ ├── _form-range.scss │ ├── _form-select.scss │ ├── _form-text.scss │ ├── _input-group.scss │ ├── _labels.scss │ └── _validation.scss ├── helpers │ ├── _clearfix.scss │ ├── _color-bg.scss │ ├── _colored-links.scss │ ├── _focus-ring.scss │ ├── _icon-link.scss │ ├── _position.scss │ ├── _ratio.scss │ ├── _stacks.scss │ ├── _stretched-link.scss │ ├── _text-truncation.scss │ ├── _visually-hidden.scss │ └── _vr.scss ├── mixins │ ├── _alert.scss │ ├── _backdrop.scss │ ├── _banner.scss │ ├── _border-radius.scss │ ├── _box-shadow.scss │ ├── _breakpoints.scss │ ├── _buttons.scss │ ├── _caret.scss │ ├── _clearfix.scss │ ├── _color-mode.scss │ ├── _color-scheme.scss │ ├── _container.scss │ ├── _deprecate.scss │ ├── _forms.scss │ ├── _gradients.scss │ ├── _grid.scss │ ├── _image.scss │ ├── _list-group.scss │ ├── _lists.scss │ ├── _pagination.scss │ ├── _reset-text.scss │ ├── _resize.scss │ ├── _table-variants.scss │ ├── _text-truncate.scss │ ├── _transition.scss │ ├── _utilities.scss │ └── _visually-hidden.scss ├── utilities │ └── _api.scss └── vendor │ └── _rfs.scss ├── custom ├── _styles.scss └── _variables.scss ├── free ├── _accordion.scss ├── _alert.scss ├── _badge.scss ├── _breadcrumb.scss ├── _button-group.scss ├── _buttons.scss ├── _card.scss ├── _carousel.scss ├── _close.scss ├── _colors.scss ├── _deprecated.scss ├── _dropdown.scss ├── _flag.scss ├── _functions.scss ├── _images.scss ├── _list-group.scss ├── _mixins.scss ├── _modal.scss ├── _nav.scss ├── _navbar.scss ├── _pagination.scss ├── _popover.scss ├── _progress.scss ├── _range.scss ├── _reboot.scss ├── _ripple.scss ├── _root.scss ├── _scrollspy.scss ├── _shadows.scss ├── _tables.scss ├── _toasts.scss ├── _tooltip.scss ├── _type.scss ├── _utilities.scss ├── _variables-dark.scss ├── _variables.scss ├── forms │ ├── _form-check.scss │ ├── _form-control.scss │ ├── _form-file.scss │ ├── _form-range.scss │ ├── _form-select.scss │ ├── _input-group.scss │ └── _validation.scss └── mixins │ ├── _buttons.scss │ ├── _color-mode.scss │ ├── _ripple.scss │ └── _table-variants.scss └── mdb.free.scss /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 MDBootstrap 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /img/mdb-favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdbootstrap/bootstrap-5-blog-template/a427872ed52335df4a20fdb75e24418e9aa5d532/img/mdb-favicon.ico -------------------------------------------------------------------------------- /src/js/autoinit/index.free.js: -------------------------------------------------------------------------------- 1 | import defaultInitSelectors from './initSelectors/free'; 2 | import { InitMDB } from './init'; 3 | 4 | const initMDBInstance = new InitMDB(defaultInitSelectors); 5 | const initMDB = initMDBInstance.initMDB; 6 | 7 | export default initMDB; 8 | -------------------------------------------------------------------------------- /src/js/bootstrap/dist/util/component-functions.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap component-functions.js v5.3.2 (https://getbootstrap.com/) 3 | * Copyright 2011-2023 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors) 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | */ 6 | (function (global, factory) { 7 | typeof exports === 'object' && typeof module !== 'undefined' 8 | ? factory( 9 | exports, 10 | require('../dom/event-handler.js'), 11 | require('../dom/selector-engine.js'), 12 | require('./index.js') 13 | ) 14 | : typeof define === 'function' && define.amd 15 | ? define(['exports', '../dom/event-handler', '../dom/selector-engine', './index'], factory) 16 | : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), 17 | factory( 18 | (global.ComponentFunctions = {}), 19 | global.EventHandler, 20 | global.SelectorEngine, 21 | global.Index 22 | )); 23 | })(this, function (exports, EventHandler, SelectorEngine, index_js) { 24 | 'use strict'; 25 | 26 | /** 27 | * -------------------------------------------------------------------------- 28 | * Bootstrap util/component-functions.js 29 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 30 | * -------------------------------------------------------------------------- 31 | */ 32 | 33 | const enableDismissTrigger = (component, method = 'hide') => { 34 | const clickEvent = `click.dismiss${component.EVENT_KEY}`; 35 | const name = component.NAME; 36 | EventHandler.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) { 37 | if (['A', 'AREA'].includes(this.tagName)) { 38 | event.preventDefault(); 39 | } 40 | if (index_js.isDisabled(this)) { 41 | return; 42 | } 43 | const target = SelectorEngine.getElementFromSelector(this) || this.closest(`.${name}`); 44 | const instance = component.getOrCreateInstance(target); 45 | 46 | // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method 47 | instance[method](); 48 | }); 49 | }; 50 | 51 | exports.enableDismissTrigger = enableDismissTrigger; 52 | 53 | Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 54 | }); 55 | //# sourceMappingURL=component-functions.js.map 56 | -------------------------------------------------------------------------------- /src/js/bootstrap/dist/util/component-functions.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"component-functions.js","sources":["../../src/util/component-functions.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap util/component-functions.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport EventHandler from '../dom/event-handler.js'\nimport SelectorEngine from '../dom/selector-engine.js'\nimport { isDisabled } from './index.js'\n\nconst enableDismissTrigger = (component, method = 'hide') => {\n const clickEvent = `click.dismiss${component.EVENT_KEY}`\n const name = component.NAME\n\n EventHandler.on(document, clickEvent, `[data-bs-dismiss=\"${name}\"]`, function (event) {\n if (['A', 'AREA'].includes(this.tagName)) {\n event.preventDefault()\n }\n\n if (isDisabled(this)) {\n return\n }\n\n const target = SelectorEngine.getElementFromSelector(this) || this.closest(`.${name}`)\n const instance = component.getOrCreateInstance(target)\n\n // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method\n instance[method]()\n })\n}\n\nexport {\n enableDismissTrigger\n}\n"],"names":["enableDismissTrigger","component","method","clickEvent","EVENT_KEY","name","NAME","EventHandler","on","document","event","includes","tagName","preventDefault","isDisabled","target","SelectorEngine","getElementFromSelector","closest","instance","getOrCreateInstance"],"mappings":";;;;;;;;;;;EAAA;EACA;EACA;EACA;EACA;EACA;;AAMMA,QAAAA,oBAAoB,GAAGA,CAACC,SAAS,EAAEC,MAAM,GAAG,MAAM,KAAK;EAC3D,EAAA,MAAMC,UAAU,GAAI,CAAA,aAAA,EAAeF,SAAS,CAACG,SAAU,CAAC,CAAA,CAAA;EACxD,EAAA,MAAMC,IAAI,GAAGJ,SAAS,CAACK,IAAI,CAAA;EAE3BC,EAAAA,YAAY,CAACC,EAAE,CAACC,QAAQ,EAAEN,UAAU,EAAG,CAAA,kBAAA,EAAoBE,IAAK,CAAA,EAAA,CAAG,EAAE,UAAUK,KAAK,EAAE;EACpF,IAAA,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,CAACC,QAAQ,CAAC,IAAI,CAACC,OAAO,CAAC,EAAE;QACxCF,KAAK,CAACG,cAAc,EAAE,CAAA;EACxB,KAAA;EAEA,IAAA,IAAIC,mBAAU,CAAC,IAAI,CAAC,EAAE;EACpB,MAAA,OAAA;EACF,KAAA;EAEA,IAAA,MAAMC,MAAM,GAAGC,cAAc,CAACC,sBAAsB,CAAC,IAAI,CAAC,IAAI,IAAI,CAACC,OAAO,CAAE,CAAGb,CAAAA,EAAAA,IAAK,EAAC,CAAC,CAAA;EACtF,IAAA,MAAMc,QAAQ,GAAGlB,SAAS,CAACmB,mBAAmB,CAACL,MAAM,CAAC,CAAA;;EAEtD;EACAI,IAAAA,QAAQ,CAACjB,MAAM,CAAC,EAAE,CAAA;EACpB,GAAC,CAAC,CAAA;EACJ;;;;;;;;;;"} -------------------------------------------------------------------------------- /src/js/bootstrap/mdb-prefix/alert.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap alert.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import BaseComponent from './base-component.js'; 9 | import EventHandler from './dom/event-handler.js'; 10 | import { enableDismissTrigger } from './util/component-functions.js'; 11 | import { defineJQueryPlugin } from './util/index.js'; 12 | 13 | /** 14 | * Constants 15 | */ 16 | 17 | const NAME = 'alert'; 18 | const DATA_KEY = 'bs.alert'; 19 | const EVENT_KEY = `.${DATA_KEY}`; 20 | 21 | const EVENT_CLOSE = `close${EVENT_KEY}`; 22 | const EVENT_CLOSED = `closed${EVENT_KEY}`; 23 | const CLASS_NAME_FADE = 'fade'; 24 | const CLASS_NAME_SHOW = 'show'; 25 | 26 | /** 27 | * Class definition 28 | */ 29 | 30 | class Alert extends BaseComponent { 31 | // Getters 32 | static get NAME() { 33 | return NAME; 34 | } 35 | 36 | // Public 37 | close() { 38 | const closeEvent = EventHandler.trigger(this._element, EVENT_CLOSE); 39 | 40 | if (closeEvent.defaultPrevented) { 41 | return; 42 | } 43 | 44 | this._element.classList.remove(CLASS_NAME_SHOW); 45 | 46 | const isAnimated = this._element.classList.contains(CLASS_NAME_FADE); 47 | this._queueCallback(() => this._destroyElement(), this._element, isAnimated); 48 | } 49 | 50 | // Private 51 | _destroyElement() { 52 | this._element.remove(); 53 | EventHandler.trigger(this._element, EVENT_CLOSED); 54 | this.dispose(); 55 | } 56 | 57 | // Static 58 | static jQueryInterface(config) { 59 | return this.each(function () { 60 | const data = Alert.getOrCreateInstance(this); 61 | 62 | if (typeof config !== 'string') { 63 | return; 64 | } 65 | 66 | if (data[config] === undefined || config.startsWith('_') || config === 'constructor') { 67 | throw new TypeError(`No method named "${config}"`); 68 | } 69 | 70 | data[config](this); 71 | }); 72 | } 73 | } 74 | 75 | /** 76 | * Data API implementation 77 | */ 78 | 79 | // enableDismissTrigger(Alert, 'close'); 80 | 81 | /** 82 | * jQuery 83 | */ 84 | 85 | // defineJQueryPlugin(Alert); 86 | 87 | export default Alert; 88 | -------------------------------------------------------------------------------- /src/js/bootstrap/mdb-prefix/base-component.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap base-component.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import Data from './dom/data.js'; 9 | import EventHandler from './dom/event-handler.js'; 10 | import Config from './util/config.js'; 11 | import { executeAfterTransition, getElement } from './util/index.js'; 12 | 13 | /** 14 | * Constants 15 | */ 16 | 17 | const VERSION = '5.3.2'; 18 | 19 | /** 20 | * Class definition 21 | */ 22 | 23 | class BaseComponent extends Config { 24 | constructor(element, config) { 25 | super(); 26 | 27 | element = getElement(element); 28 | if (!element) { 29 | return; 30 | } 31 | 32 | this._element = element; 33 | this._config = this._getConfig(config); 34 | 35 | Data.set(this._element, this.constructor.DATA_KEY, this); 36 | } 37 | 38 | // Public 39 | dispose() { 40 | Data.remove(this._element, this.constructor.DATA_KEY); 41 | EventHandler.off(this._element, this.constructor.EVENT_KEY); 42 | 43 | for (const propertyName of Object.getOwnPropertyNames(this)) { 44 | this[propertyName] = null; 45 | } 46 | } 47 | 48 | _queueCallback(callback, element, isAnimated = true) { 49 | executeAfterTransition(callback, element, isAnimated); 50 | } 51 | 52 | _getConfig(config) { 53 | config = this._mergeConfigObj(config, this._element); 54 | config = this._configAfterMerge(config); 55 | this._typeCheckConfig(config); 56 | return config; 57 | } 58 | 59 | // Static 60 | static getInstance(element) { 61 | return Data.get(getElement(element), this.DATA_KEY); 62 | } 63 | 64 | static getOrCreateInstance(element, config = {}) { 65 | return ( 66 | this.getInstance(element) || new this(element, typeof config === 'object' ? config : null) 67 | ); 68 | } 69 | 70 | static get VERSION() { 71 | return VERSION; 72 | } 73 | 74 | static get DATA_KEY() { 75 | return `bs.${this.NAME}`; 76 | } 77 | 78 | static get EVENT_KEY() { 79 | return `.${this.DATA_KEY}`; 80 | } 81 | 82 | static eventName(name) { 83 | return `${name}${this.EVENT_KEY}`; 84 | } 85 | } 86 | 87 | export default BaseComponent; 88 | -------------------------------------------------------------------------------- /src/js/bootstrap/mdb-prefix/button.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap button.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import BaseComponent from './base-component.js'; 9 | import EventHandler from './dom/event-handler.js'; 10 | import { defineJQueryPlugin } from './util/index.js'; 11 | 12 | /** 13 | * Constants 14 | */ 15 | 16 | const NAME = 'button'; 17 | const DATA_KEY = 'bs.button'; 18 | const EVENT_KEY = `.${DATA_KEY}`; 19 | const DATA_API_KEY = '.data-api'; 20 | 21 | const CLASS_NAME_ACTIVE = 'active'; 22 | const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="button"]'; 23 | const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`; 24 | 25 | /** 26 | * Class definition 27 | */ 28 | 29 | class Button extends BaseComponent { 30 | // Getters 31 | static get NAME() { 32 | return NAME; 33 | } 34 | 35 | // Public 36 | toggle() { 37 | // Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method 38 | this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE)); 39 | } 40 | 41 | // Static 42 | static jQueryInterface(config) { 43 | return this.each(function () { 44 | const data = Button.getOrCreateInstance(this); 45 | 46 | if (config === 'toggle') { 47 | data[config](); 48 | } 49 | }); 50 | } 51 | } 52 | 53 | /** 54 | * Data API implementation 55 | */ 56 | 57 | // EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, (event) => { 58 | // event.preventDefault(); 59 | 60 | // const button = event.target.closest(SELECTOR_DATA_TOGGLE); 61 | // const data = Button.getOrCreateInstance(button); 62 | 63 | // data.toggle(); 64 | // }); 65 | 66 | /** 67 | * jQuery 68 | */ 69 | 70 | // defineJQueryPlugin(Button); 71 | 72 | export default Button; 73 | -------------------------------------------------------------------------------- /src/js/bootstrap/mdb-prefix/dom/data.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap dom/data.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | /** 9 | * Constants 10 | */ 11 | 12 | const elementMap = new Map(); 13 | 14 | export default { 15 | set(element, key, instance) { 16 | if (!elementMap.has(element)) { 17 | elementMap.set(element, new Map()); 18 | } 19 | 20 | const instanceMap = elementMap.get(element); 21 | 22 | // make it clear we only want one instance per element 23 | // can be removed later when multiple key/instances are fine to be used 24 | if (!instanceMap.has(key) && instanceMap.size !== 0) { 25 | // eslint-disable-next-line no-console 26 | console.error( 27 | `Bootstrap doesn't allow more than one instance per element. Bound instance: ${ 28 | Array.from(instanceMap.keys())[0] 29 | }.` 30 | ); 31 | return; 32 | } 33 | 34 | instanceMap.set(key, instance); 35 | }, 36 | 37 | get(element, key) { 38 | if (elementMap.has(element)) { 39 | return elementMap.get(element).get(key) || null; 40 | } 41 | 42 | return null; 43 | }, 44 | 45 | remove(element, key) { 46 | if (!elementMap.has(element)) { 47 | return; 48 | } 49 | 50 | const instanceMap = elementMap.get(element); 51 | 52 | instanceMap.delete(key); 53 | 54 | // free up element references if there are no instances left for an element 55 | if (instanceMap.size === 0) { 56 | elementMap.delete(element); 57 | } 58 | }, 59 | }; 60 | -------------------------------------------------------------------------------- /src/js/bootstrap/mdb-prefix/dom/manipulator.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap dom/manipulator.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | function normalizeData(value) { 9 | if (value === 'true') { 10 | return true; 11 | } 12 | 13 | if (value === 'false') { 14 | return false; 15 | } 16 | 17 | if (value === Number(value).toString()) { 18 | return Number(value); 19 | } 20 | 21 | if (value === '' || value === 'null') { 22 | return null; 23 | } 24 | 25 | if (typeof value !== 'string') { 26 | return value; 27 | } 28 | 29 | try { 30 | return JSON.parse(decodeURIComponent(value)); 31 | } catch { 32 | return value; 33 | } 34 | } 35 | 36 | function normalizeDataKey(key) { 37 | return key.replace(/[A-Z]/g, (chr) => `-${chr.toLowerCase()}`); 38 | } 39 | 40 | const Manipulator = { 41 | setDataAttribute(element, key, value) { 42 | element.setAttribute(`data-mdb-${normalizeDataKey(key)}`, value); 43 | }, 44 | 45 | removeDataAttribute(element, key) { 46 | element.removeAttribute(`data-mdb-${normalizeDataKey(key)}`); 47 | }, 48 | 49 | getDataAttributes(element) { 50 | if (!element) { 51 | return {}; 52 | } 53 | 54 | const attributes = {}; 55 | const mdbKeys = Object.keys(element.dataset).filter( 56 | (key) => key.startsWith('mdb') && !key.startsWith('mdbConfig') 57 | ); 58 | 59 | for (const key of mdbKeys) { 60 | let pureKey = key.replace(/^mdb/, ''); 61 | pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length); 62 | attributes[pureKey] = normalizeData(element.dataset[key]); 63 | } 64 | 65 | return attributes; 66 | }, 67 | 68 | getDataAttribute(element, key) { 69 | return normalizeData(element.getAttribute(`data-mdb-${normalizeDataKey(key)}`)); 70 | }, 71 | }; 72 | 73 | export default Manipulator; 74 | -------------------------------------------------------------------------------- /src/js/bootstrap/mdb-prefix/popover.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap popover.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import Tooltip from './tooltip.js'; 9 | import { defineJQueryPlugin } from './util/index.js'; 10 | 11 | /** 12 | * Constants 13 | */ 14 | 15 | const NAME = 'popover'; 16 | 17 | const SELECTOR_TITLE = '.popover-header'; 18 | const SELECTOR_CONTENT = '.popover-body'; 19 | 20 | const Default = { 21 | ...Tooltip.Default, 22 | content: '', 23 | offset: [0, 8], 24 | placement: 'right', 25 | template: 26 | '', 31 | trigger: 'click', 32 | }; 33 | 34 | const DefaultType = { 35 | ...Tooltip.DefaultType, 36 | content: '(null|string|element|function)', 37 | }; 38 | 39 | /** 40 | * Class definition 41 | */ 42 | 43 | class Popover extends Tooltip { 44 | // Getters 45 | static get Default() { 46 | return Default; 47 | } 48 | 49 | static get DefaultType() { 50 | return DefaultType; 51 | } 52 | 53 | static get NAME() { 54 | return NAME; 55 | } 56 | 57 | // Overrides 58 | _isWithContent() { 59 | return this._getTitle() || this._getContent(); 60 | } 61 | 62 | // Private 63 | _getContentForTemplate() { 64 | return { 65 | [SELECTOR_TITLE]: this._getTitle(), 66 | [SELECTOR_CONTENT]: this._getContent(), 67 | }; 68 | } 69 | 70 | _getContent() { 71 | return this._resolvePossibleFunction(this._config.content); 72 | } 73 | 74 | // Static 75 | static jQueryInterface(config) { 76 | return this.each(function () { 77 | const data = Popover.getOrCreateInstance(this, config); 78 | 79 | if (typeof config !== 'string') { 80 | return; 81 | } 82 | 83 | if (typeof data[config] === 'undefined') { 84 | throw new TypeError(`No method named "${config}"`); 85 | } 86 | 87 | data[config](); 88 | }); 89 | } 90 | } 91 | 92 | /** 93 | * jQuery 94 | */ 95 | 96 | // defineJQueryPlugin(Popover); 97 | 98 | export default Popover; 99 | -------------------------------------------------------------------------------- /src/js/bootstrap/mdb-prefix/util/component-functions.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap util/component-functions.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import EventHandler from '../dom/event-handler.js'; 9 | import SelectorEngine from '../dom/selector-engine.js'; 10 | import { isDisabled } from './index.js'; 11 | 12 | const enableDismissTrigger = (component, method = 'hide') => { 13 | const clickEvent = `click.dismiss${component.EVENT_KEY}`; 14 | const name = component.NAME; 15 | 16 | EventHandler.on(document, clickEvent, `[data-mdb-dismiss="${name}"]`, function (event) { 17 | if (['A', 'AREA'].includes(this.tagName)) { 18 | event.preventDefault(); 19 | } 20 | 21 | if (isDisabled(this)) { 22 | return; 23 | } 24 | 25 | const target = SelectorEngine.getElementFromSelector(this) || this.closest(`.${name}`); 26 | const instance = component.getOrCreateInstance(target); 27 | 28 | // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method 29 | instance[method](); 30 | }); 31 | }; 32 | 33 | export { enableDismissTrigger }; 34 | -------------------------------------------------------------------------------- /src/js/bootstrap/mdb-prefix/util/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap util/config.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import Manipulator from '../dom/manipulator.js'; 9 | import { isElement, toType } from './index.js'; 10 | 11 | /** 12 | * Class definition 13 | */ 14 | 15 | class Config { 16 | // Getters 17 | static get Default() { 18 | return {}; 19 | } 20 | 21 | static get DefaultType() { 22 | return {}; 23 | } 24 | 25 | static get NAME() { 26 | throw new Error('You have to implement the static method "NAME", for each component!'); 27 | } 28 | 29 | _getConfig(config) { 30 | config = this._mergeConfigObj(config); 31 | config = this._configAfterMerge(config); 32 | this._typeCheckConfig(config); 33 | return config; 34 | } 35 | 36 | _configAfterMerge(config) { 37 | return config; 38 | } 39 | 40 | _mergeConfigObj(config, element) { 41 | const jsonConfig = isElement(element) ? Manipulator.getDataAttribute(element, 'config') : {}; // try to parse 42 | 43 | return { 44 | ...this.constructor.Default, 45 | ...(typeof jsonConfig === 'object' ? jsonConfig : {}), 46 | ...(isElement(element) ? Manipulator.getDataAttributes(element) : {}), 47 | ...(typeof config === 'object' ? config : {}), 48 | }; 49 | } 50 | 51 | _typeCheckConfig(config, configTypes = this.constructor.DefaultType) { 52 | for (const [property, expectedTypes] of Object.entries(configTypes)) { 53 | const value = config[property]; 54 | const valueType = isElement(value) ? 'element' : toType(value); 55 | 56 | if (!new RegExp(expectedTypes).test(valueType)) { 57 | throw new TypeError( 58 | `${this.constructor.NAME.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".` 59 | ); 60 | } 61 | } 62 | } 63 | } 64 | 65 | export default Config; 66 | -------------------------------------------------------------------------------- /src/js/bootstrap/src/alert.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap alert.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import BaseComponent from './base-component.js'; 9 | import EventHandler from './dom/event-handler.js'; 10 | import { enableDismissTrigger } from './util/component-functions.js'; 11 | import { defineJQueryPlugin } from './util/index.js'; 12 | 13 | /** 14 | * Constants 15 | */ 16 | 17 | const NAME = 'alert'; 18 | const DATA_KEY = 'bs.alert'; 19 | const EVENT_KEY = `.${DATA_KEY}`; 20 | 21 | const EVENT_CLOSE = `close${EVENT_KEY}`; 22 | const EVENT_CLOSED = `closed${EVENT_KEY}`; 23 | const CLASS_NAME_FADE = 'fade'; 24 | const CLASS_NAME_SHOW = 'show'; 25 | 26 | /** 27 | * Class definition 28 | */ 29 | 30 | class Alert extends BaseComponent { 31 | // Getters 32 | static get NAME() { 33 | return NAME; 34 | } 35 | 36 | // Public 37 | close() { 38 | const closeEvent = EventHandler.trigger(this._element, EVENT_CLOSE); 39 | 40 | if (closeEvent.defaultPrevented) { 41 | return; 42 | } 43 | 44 | this._element.classList.remove(CLASS_NAME_SHOW); 45 | 46 | const isAnimated = this._element.classList.contains(CLASS_NAME_FADE); 47 | this._queueCallback(() => this._destroyElement(), this._element, isAnimated); 48 | } 49 | 50 | // Private 51 | _destroyElement() { 52 | this._element.remove(); 53 | EventHandler.trigger(this._element, EVENT_CLOSED); 54 | this.dispose(); 55 | } 56 | 57 | // Static 58 | static jQueryInterface(config) { 59 | return this.each(function () { 60 | const data = Alert.getOrCreateInstance(this); 61 | 62 | if (typeof config !== 'string') { 63 | return; 64 | } 65 | 66 | if (data[config] === undefined || config.startsWith('_') || config === 'constructor') { 67 | throw new TypeError(`No method named "${config}"`); 68 | } 69 | 70 | data[config](this); 71 | }); 72 | } 73 | } 74 | 75 | /** 76 | * Data API implementation 77 | */ 78 | 79 | enableDismissTrigger(Alert, 'close'); 80 | 81 | /** 82 | * jQuery 83 | */ 84 | 85 | defineJQueryPlugin(Alert); 86 | 87 | export default Alert; 88 | -------------------------------------------------------------------------------- /src/js/bootstrap/src/base-component.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap base-component.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import Data from './dom/data.js'; 9 | import EventHandler from './dom/event-handler.js'; 10 | import Config from './util/config.js'; 11 | import { executeAfterTransition, getElement } from './util/index.js'; 12 | 13 | /** 14 | * Constants 15 | */ 16 | 17 | const VERSION = '5.3.2'; 18 | 19 | /** 20 | * Class definition 21 | */ 22 | 23 | class BaseComponent extends Config { 24 | constructor(element, config) { 25 | super(); 26 | 27 | element = getElement(element); 28 | if (!element) { 29 | return; 30 | } 31 | 32 | this._element = element; 33 | this._config = this._getConfig(config); 34 | 35 | Data.set(this._element, this.constructor.DATA_KEY, this); 36 | } 37 | 38 | // Public 39 | dispose() { 40 | Data.remove(this._element, this.constructor.DATA_KEY); 41 | EventHandler.off(this._element, this.constructor.EVENT_KEY); 42 | 43 | for (const propertyName of Object.getOwnPropertyNames(this)) { 44 | this[propertyName] = null; 45 | } 46 | } 47 | 48 | _queueCallback(callback, element, isAnimated = true) { 49 | executeAfterTransition(callback, element, isAnimated); 50 | } 51 | 52 | _getConfig(config) { 53 | config = this._mergeConfigObj(config, this._element); 54 | config = this._configAfterMerge(config); 55 | this._typeCheckConfig(config); 56 | return config; 57 | } 58 | 59 | // Static 60 | static getInstance(element) { 61 | return Data.get(getElement(element), this.DATA_KEY); 62 | } 63 | 64 | static getOrCreateInstance(element, config = {}) { 65 | return ( 66 | this.getInstance(element) || new this(element, typeof config === 'object' ? config : null) 67 | ); 68 | } 69 | 70 | static get VERSION() { 71 | return VERSION; 72 | } 73 | 74 | static get DATA_KEY() { 75 | return `bs.${this.NAME}`; 76 | } 77 | 78 | static get EVENT_KEY() { 79 | return `.${this.DATA_KEY}`; 80 | } 81 | 82 | static eventName(name) { 83 | return `${name}${this.EVENT_KEY}`; 84 | } 85 | } 86 | 87 | export default BaseComponent; 88 | -------------------------------------------------------------------------------- /src/js/bootstrap/src/button.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap button.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import BaseComponent from './base-component.js'; 9 | import EventHandler from './dom/event-handler.js'; 10 | import { defineJQueryPlugin } from './util/index.js'; 11 | 12 | /** 13 | * Constants 14 | */ 15 | 16 | const NAME = 'button'; 17 | const DATA_KEY = 'bs.button'; 18 | const EVENT_KEY = `.${DATA_KEY}`; 19 | const DATA_API_KEY = '.data-api'; 20 | 21 | const CLASS_NAME_ACTIVE = 'active'; 22 | const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="button"]'; 23 | const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`; 24 | 25 | /** 26 | * Class definition 27 | */ 28 | 29 | class Button extends BaseComponent { 30 | // Getters 31 | static get NAME() { 32 | return NAME; 33 | } 34 | 35 | // Public 36 | toggle() { 37 | // Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method 38 | this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE)); 39 | } 40 | 41 | // Static 42 | static jQueryInterface(config) { 43 | return this.each(function () { 44 | const data = Button.getOrCreateInstance(this); 45 | 46 | if (config === 'toggle') { 47 | data[config](); 48 | } 49 | }); 50 | } 51 | } 52 | 53 | /** 54 | * Data API implementation 55 | */ 56 | 57 | EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, (event) => { 58 | event.preventDefault(); 59 | 60 | const button = event.target.closest(SELECTOR_DATA_TOGGLE); 61 | const data = Button.getOrCreateInstance(button); 62 | 63 | data.toggle(); 64 | }); 65 | 66 | /** 67 | * jQuery 68 | */ 69 | 70 | defineJQueryPlugin(Button); 71 | 72 | export default Button; 73 | -------------------------------------------------------------------------------- /src/js/bootstrap/src/dom/data.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap dom/data.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | /** 9 | * Constants 10 | */ 11 | 12 | const elementMap = new Map(); 13 | 14 | export default { 15 | set(element, key, instance) { 16 | if (!elementMap.has(element)) { 17 | elementMap.set(element, new Map()); 18 | } 19 | 20 | const instanceMap = elementMap.get(element); 21 | 22 | // make it clear we only want one instance per element 23 | // can be removed later when multiple key/instances are fine to be used 24 | if (!instanceMap.has(key) && instanceMap.size !== 0) { 25 | // eslint-disable-next-line no-console 26 | console.error( 27 | `Bootstrap doesn't allow more than one instance per element. Bound instance: ${ 28 | Array.from(instanceMap.keys())[0] 29 | }.` 30 | ); 31 | return; 32 | } 33 | 34 | instanceMap.set(key, instance); 35 | }, 36 | 37 | get(element, key) { 38 | if (elementMap.has(element)) { 39 | return elementMap.get(element).get(key) || null; 40 | } 41 | 42 | return null; 43 | }, 44 | 45 | remove(element, key) { 46 | if (!elementMap.has(element)) { 47 | return; 48 | } 49 | 50 | const instanceMap = elementMap.get(element); 51 | 52 | instanceMap.delete(key); 53 | 54 | // free up element references if there are no instances left for an element 55 | if (instanceMap.size === 0) { 56 | elementMap.delete(element); 57 | } 58 | }, 59 | }; 60 | -------------------------------------------------------------------------------- /src/js/bootstrap/src/dom/manipulator.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap dom/manipulator.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | function normalizeData(value) { 9 | if (value === 'true') { 10 | return true; 11 | } 12 | 13 | if (value === 'false') { 14 | return false; 15 | } 16 | 17 | if (value === Number(value).toString()) { 18 | return Number(value); 19 | } 20 | 21 | if (value === '' || value === 'null') { 22 | return null; 23 | } 24 | 25 | if (typeof value !== 'string') { 26 | return value; 27 | } 28 | 29 | try { 30 | return JSON.parse(decodeURIComponent(value)); 31 | } catch { 32 | return value; 33 | } 34 | } 35 | 36 | function normalizeDataKey(key) { 37 | return key.replace(/[A-Z]/g, (chr) => `-${chr.toLowerCase()}`); 38 | } 39 | 40 | const Manipulator = { 41 | setDataAttribute(element, key, value) { 42 | element.setAttribute(`data-bs-${normalizeDataKey(key)}`, value); 43 | }, 44 | 45 | removeDataAttribute(element, key) { 46 | element.removeAttribute(`data-bs-${normalizeDataKey(key)}`); 47 | }, 48 | 49 | getDataAttributes(element) { 50 | if (!element) { 51 | return {}; 52 | } 53 | 54 | const attributes = {}; 55 | const bsKeys = Object.keys(element.dataset).filter( 56 | (key) => key.startsWith('bs') && !key.startsWith('bsConfig') 57 | ); 58 | 59 | for (const key of bsKeys) { 60 | let pureKey = key.replace(/^bs/, ''); 61 | pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length); 62 | attributes[pureKey] = normalizeData(element.dataset[key]); 63 | } 64 | 65 | return attributes; 66 | }, 67 | 68 | getDataAttribute(element, key) { 69 | return normalizeData(element.getAttribute(`data-bs-${normalizeDataKey(key)}`)); 70 | }, 71 | }; 72 | 73 | export default Manipulator; 74 | -------------------------------------------------------------------------------- /src/js/bootstrap/src/popover.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap popover.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import Tooltip from './tooltip.js'; 9 | import { defineJQueryPlugin } from './util/index.js'; 10 | 11 | /** 12 | * Constants 13 | */ 14 | 15 | const NAME = 'popover'; 16 | 17 | const SELECTOR_TITLE = '.popover-header'; 18 | const SELECTOR_CONTENT = '.popover-body'; 19 | 20 | const Default = { 21 | ...Tooltip.Default, 22 | content: '', 23 | offset: [0, 8], 24 | placement: 'right', 25 | template: 26 | '', 31 | trigger: 'click', 32 | }; 33 | 34 | const DefaultType = { 35 | ...Tooltip.DefaultType, 36 | content: '(null|string|element|function)', 37 | }; 38 | 39 | /** 40 | * Class definition 41 | */ 42 | 43 | class Popover extends Tooltip { 44 | // Getters 45 | static get Default() { 46 | return Default; 47 | } 48 | 49 | static get DefaultType() { 50 | return DefaultType; 51 | } 52 | 53 | static get NAME() { 54 | return NAME; 55 | } 56 | 57 | // Overrides 58 | _isWithContent() { 59 | return this._getTitle() || this._getContent(); 60 | } 61 | 62 | // Private 63 | _getContentForTemplate() { 64 | return { 65 | [SELECTOR_TITLE]: this._getTitle(), 66 | [SELECTOR_CONTENT]: this._getContent(), 67 | }; 68 | } 69 | 70 | _getContent() { 71 | return this._resolvePossibleFunction(this._config.content); 72 | } 73 | 74 | // Static 75 | static jQueryInterface(config) { 76 | return this.each(function () { 77 | const data = Popover.getOrCreateInstance(this, config); 78 | 79 | if (typeof config !== 'string') { 80 | return; 81 | } 82 | 83 | if (typeof data[config] === 'undefined') { 84 | throw new TypeError(`No method named "${config}"`); 85 | } 86 | 87 | data[config](); 88 | }); 89 | } 90 | } 91 | 92 | /** 93 | * jQuery 94 | */ 95 | 96 | defineJQueryPlugin(Popover); 97 | 98 | export default Popover; 99 | -------------------------------------------------------------------------------- /src/js/bootstrap/src/util/component-functions.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap util/component-functions.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import EventHandler from '../dom/event-handler.js'; 9 | import SelectorEngine from '../dom/selector-engine.js'; 10 | import { isDisabled } from './index.js'; 11 | 12 | const enableDismissTrigger = (component, method = 'hide') => { 13 | const clickEvent = `click.dismiss${component.EVENT_KEY}`; 14 | const name = component.NAME; 15 | 16 | EventHandler.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) { 17 | if (['A', 'AREA'].includes(this.tagName)) { 18 | event.preventDefault(); 19 | } 20 | 21 | if (isDisabled(this)) { 22 | return; 23 | } 24 | 25 | const target = SelectorEngine.getElementFromSelector(this) || this.closest(`.${name}`); 26 | const instance = component.getOrCreateInstance(target); 27 | 28 | // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method 29 | instance[method](); 30 | }); 31 | }; 32 | 33 | export { enableDismissTrigger }; 34 | -------------------------------------------------------------------------------- /src/js/bootstrap/src/util/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap util/config.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import Manipulator from '../dom/manipulator.js'; 9 | import { isElement, toType } from './index.js'; 10 | 11 | /** 12 | * Class definition 13 | */ 14 | 15 | class Config { 16 | // Getters 17 | static get Default() { 18 | return {}; 19 | } 20 | 21 | static get DefaultType() { 22 | return {}; 23 | } 24 | 25 | static get NAME() { 26 | throw new Error('You have to implement the static method "NAME", for each component!'); 27 | } 28 | 29 | _getConfig(config) { 30 | config = this._mergeConfigObj(config); 31 | config = this._configAfterMerge(config); 32 | this._typeCheckConfig(config); 33 | return config; 34 | } 35 | 36 | _configAfterMerge(config) { 37 | return config; 38 | } 39 | 40 | _mergeConfigObj(config, element) { 41 | const jsonConfig = isElement(element) ? Manipulator.getDataAttribute(element, 'config') : {}; // try to parse 42 | 43 | return { 44 | ...this.constructor.Default, 45 | ...(typeof jsonConfig === 'object' ? jsonConfig : {}), 46 | ...(isElement(element) ? Manipulator.getDataAttributes(element) : {}), 47 | ...(typeof config === 'object' ? config : {}), 48 | }; 49 | } 50 | 51 | _typeCheckConfig(config, configTypes = this.constructor.DefaultType) { 52 | for (const [property, expectedTypes] of Object.entries(configTypes)) { 53 | const value = config[property]; 54 | const valueType = isElement(value) ? 'element' : toType(value); 55 | 56 | if (!new RegExp(expectedTypes).test(valueType)) { 57 | throw new TypeError( 58 | `${this.constructor.NAME.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".` 59 | ); 60 | } 61 | } 62 | } 63 | } 64 | 65 | export default Config; 66 | -------------------------------------------------------------------------------- /src/js/free/alert.js: -------------------------------------------------------------------------------- 1 | import EventHandler from '../mdb/dom/event-handler'; 2 | import BSAlert from '../bootstrap/mdb-prefix/alert'; 3 | import Manipulator from '../mdb/dom/manipulator'; 4 | import { bindCallbackEventsIfNeeded } from '../autoinit/init'; 5 | 6 | /** 7 | * ------------------------------------------------------------------------ 8 | * Constants 9 | * ------------------------------------------------------------------------ 10 | */ 11 | 12 | const NAME = 'alert'; 13 | 14 | const EVENT_CLOSE_BS = 'close.bs.alert'; 15 | const EVENT_CLOSED_BS = 'closed.bs.alert'; 16 | 17 | const EXTENDED_EVENTS = [{ name: 'close' }, { name: 'closed' }]; 18 | 19 | class Alert extends BSAlert { 20 | constructor(element, data = {}) { 21 | super(element, data); 22 | 23 | this._init(); 24 | Manipulator.setDataAttribute(this._element, `${this.constructor.NAME}-initialized`, true); 25 | bindCallbackEventsIfNeeded(this.constructor); 26 | } 27 | 28 | dispose() { 29 | EventHandler.off(this._element, EVENT_CLOSE_BS); 30 | EventHandler.off(this._element, EVENT_CLOSED_BS); 31 | Manipulator.removeDataAttribute(this._element, `${this.constructor.NAME}-initialized`); 32 | 33 | super.dispose(); 34 | } 35 | 36 | // Getters 37 | static get NAME() { 38 | return NAME; 39 | } 40 | 41 | // Private 42 | _init() { 43 | this._bindMdbEvents(); 44 | } 45 | 46 | _bindMdbEvents() { 47 | EventHandler.extend(this._element, EXTENDED_EVENTS, NAME); 48 | } 49 | } 50 | 51 | export default Alert; 52 | -------------------------------------------------------------------------------- /src/js/free/base-component.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap (v5.1.3): base-component.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | import Data from '../mdb/dom/data'; 9 | import { getElement } from '../mdb/util/index'; 10 | import EventHandler from '../mdb/dom/event-handler'; 11 | 12 | /** 13 | * ------------------------------------------------------------------------ 14 | * Constants 15 | * ------------------------------------------------------------------------ 16 | */ 17 | 18 | // const VERSION = '5.1.3'; 19 | 20 | class BaseComponent { 21 | constructor(element) { 22 | element = getElement(element); 23 | 24 | if (!element) { 25 | return; 26 | } 27 | 28 | this._element = element; 29 | Data.setData(this._element, this.constructor.DATA_KEY, this); 30 | } 31 | 32 | dispose() { 33 | Data.removeData(this._element, this.constructor.DATA_KEY); 34 | EventHandler.off(this._element, this.constructor.EVENT_KEY); 35 | 36 | Object.getOwnPropertyNames(this).forEach((propertyName) => { 37 | this[propertyName] = null; 38 | }); 39 | } 40 | 41 | /** Static */ 42 | 43 | static getInstance(element) { 44 | return Data.getData(getElement(element), this.DATA_KEY); 45 | } 46 | 47 | static getOrCreateInstance(element, config = {}) { 48 | return ( 49 | this.getInstance(element) || new this(element, typeof config === 'object' ? config : null) 50 | ); 51 | } 52 | 53 | static get NAME() { 54 | throw new Error('You have to implement the static method "NAME", for each component!'); 55 | } 56 | 57 | static get DATA_KEY() { 58 | return `mdb.${this.NAME}`; 59 | } 60 | 61 | static get EVENT_KEY() { 62 | return `.${this.DATA_KEY}`; 63 | } 64 | } 65 | 66 | export default BaseComponent; 67 | -------------------------------------------------------------------------------- /src/js/free/carousel.js: -------------------------------------------------------------------------------- 1 | import EventHandler from '../mdb/dom/event-handler'; 2 | import BSCarousel from '../bootstrap/mdb-prefix/carousel'; 3 | import Manipulator from '../mdb/dom/manipulator'; 4 | import { bindCallbackEventsIfNeeded } from '../autoinit/init'; 5 | 6 | /** 7 | * ------------------------------------------------------------------------ 8 | * Constants 9 | * ------------------------------------------------------------------------ 10 | */ 11 | 12 | const NAME = 'carousel'; 13 | 14 | const EVENT_SLIDE_BS = 'slide.bs.carousel'; 15 | const EVENT_SLID_BS = 'slid.bs.carousel'; 16 | 17 | const EXTENDED_EVENTS = [ 18 | { name: 'slide', parametersToCopy: ['relatedTarget', 'direction', 'from', 'to'] }, 19 | { name: 'slid', parametersToCopy: ['relatedTarget', 'direction', 'from', 'to'] }, 20 | ]; 21 | 22 | class Carousel extends BSCarousel { 23 | constructor(element, data) { 24 | super(element, data); 25 | 26 | this._init(); 27 | Manipulator.setDataAttribute(this._element, `${this.constructor.NAME}-initialized`, true); 28 | bindCallbackEventsIfNeeded(this.constructor); 29 | } 30 | 31 | dispose() { 32 | EventHandler.off(this._element, EVENT_SLIDE_BS); 33 | EventHandler.off(this._element, EVENT_SLID_BS); 34 | Manipulator.removeDataAttribute(this._element, `${this.constructor.NAME}-initialized`); 35 | 36 | super.dispose(); 37 | } 38 | 39 | // Getters 40 | static get NAME() { 41 | return NAME; 42 | } 43 | 44 | // Private 45 | _init() { 46 | this._bindMdbEvents(); 47 | } 48 | 49 | _bindMdbEvents() { 50 | EventHandler.extend(this._element, EXTENDED_EVENTS, NAME); 51 | } 52 | } 53 | 54 | export default Carousel; 55 | -------------------------------------------------------------------------------- /src/js/free/collapse.js: -------------------------------------------------------------------------------- 1 | import EventHandler from '../mdb/dom/event-handler'; 2 | import BSCollapse from '../bootstrap/mdb-prefix/collapse'; 3 | import Manipulator from '../mdb/dom/manipulator'; 4 | import { bindCallbackEventsIfNeeded } from '../autoinit/init'; 5 | 6 | /** 7 | * ------------------------------------------------------------------------ 8 | * Constants 9 | * ------------------------------------------------------------------------ 10 | */ 11 | 12 | const NAME = 'collapse'; 13 | 14 | const EVENT_SHOW_BS = 'show.bs.collapse'; 15 | const EVENT_SHOWN_BS = 'shown.bs.collapse'; 16 | const EVENT_HIDE_BS = 'hide.bs.collapse'; 17 | const EVENT_HIDDEN_BS = 'hidden.bs.collapse'; 18 | 19 | const EXTENDED_EVENTS = [{ name: 'show' }, { name: 'shown' }, { name: 'hide' }, { name: 'hidden' }]; 20 | 21 | class Collapse extends BSCollapse { 22 | constructor(element, data = {}) { 23 | super(element, data); 24 | 25 | this._init(); 26 | Manipulator.setDataAttribute(this._element, `${this.constructor.NAME}-initialized`, true); 27 | bindCallbackEventsIfNeeded(this.constructor); 28 | } 29 | 30 | dispose() { 31 | EventHandler.off(this._element, EVENT_SHOW_BS); 32 | EventHandler.off(this._element, EVENT_SHOWN_BS); 33 | EventHandler.off(this._element, EVENT_HIDE_BS); 34 | EventHandler.off(this._element, EVENT_HIDDEN_BS); 35 | Manipulator.removeDataAttribute(this._element, `${this.constructor.NAME}-initialized`); 36 | 37 | super.dispose(); 38 | } 39 | 40 | // Getters 41 | static get NAME() { 42 | return NAME; 43 | } 44 | 45 | // Private 46 | _init() { 47 | this._bindMdbEvents(); 48 | } 49 | 50 | _bindMdbEvents() { 51 | EventHandler.extend(this._element, EXTENDED_EVENTS, NAME); 52 | } 53 | } 54 | 55 | export default Collapse; 56 | -------------------------------------------------------------------------------- /src/js/free/modal.js: -------------------------------------------------------------------------------- 1 | import EventHandler from '../mdb/dom/event-handler'; 2 | import BSModal from '../bootstrap/mdb-prefix/modal'; 3 | import Manipulator from '../mdb/dom/manipulator'; 4 | import { bindCallbackEventsIfNeeded } from '../autoinit/init'; 5 | 6 | /** 7 | * ------------------------------------------------------------------------ 8 | * Constants 9 | * ------------------------------------------------------------------------ 10 | */ 11 | 12 | const NAME = 'modal'; 13 | 14 | const EVENT_HIDE_BS = 'hide.bs.modal'; 15 | const EVENT_HIDE_PREVENTED_BS = 'hidePrevented.bs.modal'; 16 | const EVENT_HIDDEN_BS = 'hidden.bs.modal'; 17 | const EVENT_SHOW_BS = 'show.bs.modal'; 18 | const EVENT_SHOWN_BS = 'shown.bs.modal'; 19 | 20 | const EXTENDED_EVENTS = [ 21 | { name: 'show', parametersToCopy: ['relatedTarget'] }, 22 | { name: 'shown', parametersToCopy: ['relatedTarget'] }, 23 | { name: 'hide' }, 24 | { name: 'hidePrevented' }, 25 | { name: 'hidden' }, 26 | ]; 27 | 28 | class Modal extends BSModal { 29 | constructor(element, data) { 30 | super(element, data); 31 | 32 | this._init(); 33 | Manipulator.setDataAttribute(this._element, `${this.constructor.NAME}-initialized`, true); 34 | bindCallbackEventsIfNeeded(this.constructor); 35 | } 36 | 37 | dispose() { 38 | EventHandler.off(this._element, EVENT_SHOW_BS); 39 | EventHandler.off(this._element, EVENT_SHOWN_BS); 40 | EventHandler.off(this._element, EVENT_HIDE_BS); 41 | EventHandler.off(this._element, EVENT_HIDDEN_BS); 42 | EventHandler.off(this._element, EVENT_HIDE_PREVENTED_BS); 43 | Manipulator.removeDataAttribute(this._element, `${this.constructor.NAME}-initialized`); 44 | 45 | super.dispose(); 46 | } 47 | 48 | // Getters 49 | static get NAME() { 50 | return NAME; 51 | } 52 | 53 | // Private 54 | _init() { 55 | this._bindMdbEvents(); 56 | } 57 | 58 | _bindMdbEvents() { 59 | EventHandler.extend(this._element, EXTENDED_EVENTS, NAME); 60 | } 61 | } 62 | 63 | export default Modal; 64 | -------------------------------------------------------------------------------- /src/js/free/popover.js: -------------------------------------------------------------------------------- 1 | import EventHandler from '../mdb/dom/event-handler'; 2 | import BSPopover from '../bootstrap/mdb-prefix/popover'; 3 | import Manipulator from '../mdb/dom/manipulator'; 4 | import { bindCallbackEventsIfNeeded } from '../autoinit/init'; 5 | 6 | /** 7 | * ------------------------------------------------------------------------ 8 | * Constants 9 | * ------------------------------------------------------------------------ 10 | */ 11 | 12 | const NAME = 'popover'; 13 | 14 | const EVENT_SHOW_BS = 'show.bs.popover'; 15 | const EVENT_SHOWN_BS = 'shown.bs.popover'; 16 | const EVENT_HIDE_BS = 'hide.bs.popover'; 17 | const EVENT_HIDDEN_BS = 'hidden.bs.popover'; 18 | const EVENT_INSERTED_BS = 'inserted.bs.popover'; 19 | 20 | const EXTENDED_EVENTS = [ 21 | { name: 'show' }, 22 | { name: 'shown' }, 23 | { name: 'hide' }, 24 | { name: 'hidden' }, 25 | { name: 'inserted' }, 26 | ]; 27 | 28 | class Popover extends BSPopover { 29 | constructor(element, data) { 30 | super(element, data); 31 | 32 | this._init(); 33 | Manipulator.setDataAttribute(this._element, `${this.constructor.NAME}-initialized`, true); 34 | bindCallbackEventsIfNeeded(this.constructor); 35 | } 36 | 37 | dispose() { 38 | EventHandler.off(this.element, EVENT_SHOW_BS); 39 | EventHandler.off(this.element, EVENT_SHOWN_BS); 40 | EventHandler.off(this.element, EVENT_HIDE_BS); 41 | EventHandler.off(this.element, EVENT_HIDDEN_BS); 42 | EventHandler.off(this.element, EVENT_INSERTED_BS); 43 | Manipulator.removeDataAttribute(this._element, `${this.constructor.NAME}-initialized`); 44 | 45 | super.dispose(); 46 | } 47 | 48 | // Getters 49 | static get NAME() { 50 | return NAME; 51 | } 52 | 53 | // Private 54 | _init() { 55 | this._bindMdbEvents(); 56 | } 57 | 58 | _bindMdbEvents() { 59 | EventHandler.extend(this._element, EXTENDED_EVENTS, NAME); 60 | } 61 | } 62 | 63 | export default Popover; 64 | -------------------------------------------------------------------------------- /src/js/free/toast.js: -------------------------------------------------------------------------------- 1 | import EventHandler from '../mdb/dom/event-handler'; 2 | import BSToast from '../bootstrap/mdb-prefix/toast'; 3 | import Manipulator from '../mdb/dom/manipulator'; 4 | import { bindCallbackEventsIfNeeded } from '../autoinit/init'; 5 | 6 | /** 7 | * ------------------------------------------------------------------------ 8 | * Constants 9 | * ------------------------------------------------------------------------ 10 | */ 11 | 12 | const NAME = 'toast'; 13 | 14 | const EVENT_SHOW_BS = 'show.bs.toast'; 15 | const EVENT_SHOWN_BS = 'shown.bs.toast'; 16 | const EVENT_HIDE_BS = 'hide.bs.toast'; 17 | const EVENT_HIDDEN_BS = 'hidden.bs.toast'; 18 | 19 | const EXTENDED_EVENTS = [{ name: 'show' }, { name: 'shown' }, { name: 'hide' }, { name: 'hidden' }]; 20 | 21 | class Toast extends BSToast { 22 | constructor(element, data) { 23 | super(element, data); 24 | 25 | this._init(); 26 | Manipulator.setDataAttribute(this._element, `${this.constructor.NAME}-initialized`, true); 27 | bindCallbackEventsIfNeeded(this.constructor); 28 | } 29 | 30 | dispose() { 31 | EventHandler.off(this._element, EVENT_SHOW_BS); 32 | EventHandler.off(this._element, EVENT_SHOWN_BS); 33 | EventHandler.off(this._element, EVENT_HIDE_BS); 34 | EventHandler.off(this._element, EVENT_HIDDEN_BS); 35 | Manipulator.removeDataAttribute(this._element, `${this.constructor.NAME}-initialized`); 36 | 37 | super.dispose(); 38 | } 39 | 40 | // Getters 41 | static get NAME() { 42 | return NAME; 43 | } 44 | 45 | // Private 46 | _init() { 47 | this._bindMdbEvents(); 48 | } 49 | 50 | _bindMdbEvents() { 51 | EventHandler.extend(this._element, EXTENDED_EVENTS, NAME); 52 | } 53 | } 54 | 55 | export default Toast; 56 | -------------------------------------------------------------------------------- /src/js/free/tooltip.js: -------------------------------------------------------------------------------- 1 | import EventHandler from '../mdb/dom/event-handler'; 2 | import BSTooltip from '../bootstrap/mdb-prefix/tooltip'; 3 | import Manipulator from '../mdb/dom/manipulator'; 4 | import { bindCallbackEventsIfNeeded } from '../autoinit/init'; 5 | 6 | /** 7 | * ------------------------------------------------------------------------ 8 | * Constants 9 | * ------------------------------------------------------------------------ 10 | */ 11 | 12 | const NAME = 'tooltip'; 13 | 14 | const EVENT_HIDE_BS = 'hide.bs.tooltip'; 15 | const EVENT_HIDDEN_BS = 'hidden.bs.tooltip'; 16 | const EVENT_SHOW_BS = 'show.bs.tooltip'; 17 | const EVENT_SHOWN_BS = 'shown.bs.tooltip'; 18 | const EVENT_INSERTED_BS = 'inserted.bs.tooltip'; 19 | 20 | const EXTENDED_EVENTS = [ 21 | { name: 'show' }, 22 | { name: 'shown' }, 23 | { name: 'hide' }, 24 | { name: 'hidden' }, 25 | { name: 'inserted' }, 26 | ]; 27 | 28 | class Tooltip extends BSTooltip { 29 | constructor(element, data) { 30 | super(element, data); 31 | 32 | this._init(); 33 | Manipulator.setDataAttribute(this._element, `${this.constructor.NAME}-initialized`, true); 34 | bindCallbackEventsIfNeeded(this.constructor); 35 | } 36 | 37 | dispose() { 38 | EventHandler.off(this._element, EVENT_SHOW_BS); 39 | EventHandler.off(this._element, EVENT_SHOWN_BS); 40 | EventHandler.off(this._element, EVENT_HIDE_BS); 41 | EventHandler.off(this._element, EVENT_HIDDEN_BS); 42 | EventHandler.off(this._element, EVENT_INSERTED_BS); 43 | Manipulator.removeDataAttribute(this._element, `${this.constructor.NAME}-initialized`); 44 | 45 | super.dispose(); 46 | } 47 | 48 | // Getters 49 | static get NAME() { 50 | return NAME; 51 | } 52 | 53 | // Private 54 | _init() { 55 | this._bindMdbEvents(); 56 | } 57 | 58 | _bindMdbEvents() { 59 | EventHandler.extend(this._element, EXTENDED_EVENTS, NAME); 60 | } 61 | } 62 | 63 | export default Tooltip; 64 | -------------------------------------------------------------------------------- /src/js/mdb.free.es.js: -------------------------------------------------------------------------------- 1 | // BOOTSTRAP CORE COMPONENTS 2 | import Button from './free/button'; 3 | import Offcanvas from './bootstrap/mdb-prefix/offcanvas'; 4 | import Alert from './free/alert'; 5 | import Carousel from './free/carousel'; 6 | import Modal from './free/modal'; 7 | import Popover from './free/popover'; 8 | import ScrollSpy from './free/scrollspy'; 9 | import Tab from './free/tab'; 10 | import Tooltip from './free/tooltip'; 11 | import Toast from './free/toast'; 12 | 13 | // MDB FREE COMPONENTS 14 | import Input from './free/input'; 15 | import Collapse from './free/collapse'; 16 | import Dropdown from './free/dropdown'; 17 | import Ripple from './free/ripple'; 18 | import Range from './free/range'; 19 | 20 | import initMDB from './autoinit/index.free'; 21 | 22 | export { 23 | Alert, 24 | Button, 25 | Carousel, 26 | Collapse, 27 | Offcanvas, 28 | Dropdown, 29 | Input, 30 | Modal, 31 | Popover, 32 | Ripple, 33 | ScrollSpy, 34 | Tab, 35 | Toast, 36 | Tooltip, 37 | Range, 38 | initMDB, 39 | }; 40 | -------------------------------------------------------------------------------- /src/js/mdb.free.umd.js: -------------------------------------------------------------------------------- 1 | // BOOTSTRAP CORE COMPONENTS 2 | import Button from './free/button'; 3 | import Offcanvas from './bootstrap/mdb-prefix/offcanvas'; 4 | import Alert from './free/alert'; 5 | import Carousel from './free/carousel'; 6 | import Modal from './free/modal'; 7 | import Popover from './free/popover'; 8 | import ScrollSpy from './free/scrollspy'; 9 | import Tab from './free/tab'; 10 | import Tooltip from './free/tooltip'; 11 | import Toast from './free/toast'; 12 | 13 | // MDB FREE COMPONENTS 14 | import Input from './free/input'; 15 | import Collapse from './free/collapse'; 16 | import Dropdown from './free/dropdown'; 17 | import Ripple from './free/ripple'; 18 | import Range from './free/range'; 19 | import initMDB from './autoinit/index.free'; 20 | 21 | const mdb = { 22 | Alert, 23 | Button, 24 | Carousel, 25 | Collapse, 26 | Offcanvas, 27 | Dropdown, 28 | Input, 29 | Modal, 30 | Popover, 31 | Ripple, 32 | ScrollSpy, 33 | Tab, 34 | Toast, 35 | Tooltip, 36 | Range, 37 | }; 38 | 39 | initMDB(mdb); 40 | 41 | export { 42 | Alert, 43 | Button, 44 | Carousel, 45 | Collapse, 46 | Offcanvas, 47 | Dropdown, 48 | Input, 49 | Modal, 50 | Popover, 51 | Ripple, 52 | ScrollSpy, 53 | Tab, 54 | Toast, 55 | Tooltip, 56 | Range, 57 | initMDB, 58 | }; 59 | -------------------------------------------------------------------------------- /src/js/mdb/dom/data.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap (v5.0.0-beta2): dom/data.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | /** 9 | * ------------------------------------------------------------------------ 10 | * Constants 11 | * ------------------------------------------------------------------------ 12 | */ 13 | 14 | const mapData = (() => { 15 | const storeData = {}; 16 | let id = 1; 17 | return { 18 | set(element, key, data) { 19 | if (typeof element[key] === 'undefined') { 20 | element[key] = { 21 | key, 22 | id, 23 | }; 24 | id++; 25 | } 26 | 27 | storeData[element[key].id] = data; 28 | }, 29 | get(element, key) { 30 | if (!element || typeof element[key] === 'undefined') { 31 | return null; 32 | } 33 | 34 | const keyProperties = element[key]; 35 | if (keyProperties.key === key) { 36 | return storeData[keyProperties.id]; 37 | } 38 | 39 | return null; 40 | }, 41 | delete(element, key) { 42 | if (typeof element[key] === 'undefined') { 43 | return; 44 | } 45 | 46 | const keyProperties = element[key]; 47 | if (keyProperties.key === key) { 48 | delete storeData[keyProperties.id]; 49 | delete element[key]; 50 | } 51 | }, 52 | }; 53 | })(); 54 | 55 | const Data = { 56 | setData(instance, key, data) { 57 | mapData.set(instance, key, data); 58 | }, 59 | getData(instance, key) { 60 | return mapData.get(instance, key); 61 | }, 62 | removeData(instance, key) { 63 | mapData.delete(instance, key); 64 | }, 65 | }; 66 | 67 | export default Data; 68 | -------------------------------------------------------------------------------- /src/js/mdb/dom/selector-engine.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * Bootstrap (v5.0.0-beta2): dom/selector-engine.js 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | * -------------------------------------------------------------------------- 6 | */ 7 | 8 | /** 9 | * ------------------------------------------------------------------------ 10 | * Constants 11 | * ------------------------------------------------------------------------ 12 | */ 13 | 14 | const NODE_TEXT = 3; 15 | 16 | const SelectorEngine = { 17 | closest(element, selector) { 18 | return element.closest(selector); 19 | }, 20 | 21 | matches(element, selector) { 22 | return element.matches(selector); 23 | }, 24 | 25 | find(selector, element = document.documentElement) { 26 | return [].concat(...Element.prototype.querySelectorAll.call(element, selector)); 27 | }, 28 | 29 | findOne(selector, element = document.documentElement) { 30 | return Element.prototype.querySelector.call(element, selector); 31 | }, 32 | 33 | children(element, selector) { 34 | const children = [].concat(...element.children); 35 | 36 | return children.filter((child) => child.matches(selector)); 37 | }, 38 | 39 | parents(element, selector) { 40 | const parents = []; 41 | 42 | let ancestor = element.parentNode; 43 | 44 | while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE && ancestor.nodeType !== NODE_TEXT) { 45 | if (this.matches(ancestor, selector)) { 46 | parents.push(ancestor); 47 | } 48 | 49 | ancestor = ancestor.parentNode; 50 | } 51 | 52 | return parents; 53 | }, 54 | 55 | prev(element, selector) { 56 | let previous = element.previousElementSibling; 57 | 58 | while (previous) { 59 | if (previous.matches(selector)) { 60 | return [previous]; 61 | } 62 | 63 | previous = previous.previousElementSibling; 64 | } 65 | 66 | return []; 67 | }, 68 | 69 | next(element, selector) { 70 | let next = element.nextElementSibling; 71 | 72 | while (next) { 73 | if (this.matches(next, selector)) { 74 | return [next]; 75 | } 76 | 77 | next = next.nextElementSibling; 78 | } 79 | 80 | return []; 81 | }, 82 | }; 83 | 84 | export default SelectorEngine; 85 | -------------------------------------------------------------------------------- /src/js/mdb/perfect-scrollbar/handlers/click-rail.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import updateGeometry from '../update-geometry'; 4 | 5 | export default function (i) { 6 | // const element = i.element; 7 | 8 | i.event.bind(i.scrollbarY, 'mousedown', (e) => e.stopPropagation()); 9 | i.event.bind(i.scrollbarYRail, 'mousedown', (e) => { 10 | const positionTop = e.pageY - window.pageYOffset - i.scrollbarYRail.getBoundingClientRect().top; 11 | const direction = positionTop > i.scrollbarYTop ? 1 : -1; 12 | 13 | i.element.scrollTop += direction * i.containerHeight; 14 | updateGeometry(i); 15 | 16 | e.stopPropagation(); 17 | }); 18 | 19 | i.event.bind(i.scrollbarX, 'mousedown', (e) => e.stopPropagation()); 20 | i.event.bind(i.scrollbarXRail, 'mousedown', (e) => { 21 | const positionLeft = 22 | e.pageX - window.pageXOffset - i.scrollbarXRail.getBoundingClientRect().left; 23 | const direction = positionLeft > i.scrollbarXLeft ? 1 : -1; 24 | 25 | i.element.scrollLeft += direction * i.containerWidth; 26 | updateGeometry(i); 27 | 28 | e.stopPropagation(); 29 | }); 30 | } 31 | -------------------------------------------------------------------------------- /src/js/mdb/perfect-scrollbar/lib/class-names.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | const cls = { 4 | main: 'ps', 5 | rtl: 'ps__rtl', 6 | element: { 7 | thumb: (x) => `ps__thumb-${x}`, 8 | rail: (x) => `ps__rail-${x}`, 9 | consuming: 'ps__child--consume', 10 | }, 11 | state: { 12 | focus: 'ps--focus', 13 | clicking: 'ps--clicking', 14 | active: (x) => `ps--active-${x}`, 15 | scrolling: (x) => `ps--scrolling-${x}`, 16 | }, 17 | }; 18 | 19 | export default cls; 20 | 21 | /* 22 | * Helper methods 23 | */ 24 | const scrollingClassTimeout = { x: null, y: null }; 25 | 26 | export function addScrollingClass(i, x) { 27 | const classList = i.element.classList; 28 | const className = cls.state.scrolling(x); 29 | 30 | if (classList.contains(className)) { 31 | clearTimeout(scrollingClassTimeout[x]); 32 | } else { 33 | classList.add(className); 34 | } 35 | } 36 | 37 | export function removeScrollingClass(i, x) { 38 | scrollingClassTimeout[x] = setTimeout( 39 | () => i.isAlive && i.element.classList.remove(cls.state.scrolling(x)), 40 | i.settings.scrollingThreshold 41 | ); 42 | } 43 | 44 | export function setScrollingClassInstantly(i, x) { 45 | addScrollingClass(i, x); 46 | removeScrollingClass(i, x); 47 | } 48 | -------------------------------------------------------------------------------- /src/js/mdb/perfect-scrollbar/lib/css.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | export function get(element) { 4 | return getComputedStyle(element); 5 | } 6 | 7 | export function set(element, obj) { 8 | for (const key in obj) { 9 | let val = obj[key]; 10 | if (typeof val === 'number') { 11 | val = `${val}px`; 12 | } 13 | element.style[key] = val; 14 | } 15 | return element; 16 | } 17 | -------------------------------------------------------------------------------- /src/js/mdb/perfect-scrollbar/lib/dom.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | export function div(className) { 4 | const div = document.createElement('div'); 5 | div.className = className; 6 | return div; 7 | } 8 | 9 | const elMatches = 10 | typeof Element !== 'undefined' && 11 | (Element.prototype.matches || 12 | Element.prototype.webkitMatchesSelector || 13 | Element.prototype.mozMatchesSelector || 14 | Element.prototype.msMatchesSelector); 15 | 16 | export function matches(element, query) { 17 | if (!elMatches) { 18 | throw new Error('No element matching method supported'); 19 | } 20 | 21 | return elMatches.call(element, query); 22 | } 23 | 24 | export function remove(element) { 25 | if (element.remove) { 26 | element.remove(); 27 | } else { 28 | if (element.parentNode) { 29 | element.parentNode.removeChild(element); 30 | } 31 | } 32 | } 33 | 34 | export function queryChildren(element, selector) { 35 | return Array.prototype.filter.call(element.children, (child) => matches(child, selector)); 36 | } 37 | -------------------------------------------------------------------------------- /src/js/mdb/perfect-scrollbar/lib/event-manager.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | class EventElement { 3 | constructor(element) { 4 | this.element = element; 5 | this.handlers = {}; 6 | } 7 | 8 | bind(eventName, handler) { 9 | if (typeof this.handlers[eventName] === 'undefined') { 10 | this.handlers[eventName] = []; 11 | } 12 | this.handlers[eventName].push(handler); 13 | this.element.addEventListener(eventName, handler, false); 14 | } 15 | 16 | unbind(eventName, target) { 17 | this.handlers[eventName] = this.handlers[eventName].filter((handler) => { 18 | if (target && handler !== target) { 19 | return true; 20 | } 21 | this.element.removeEventListener(eventName, handler, false); 22 | return false; 23 | }); 24 | } 25 | 26 | unbindAll() { 27 | for (const name in this.handlers) { 28 | this.unbind(name); 29 | } 30 | } 31 | 32 | get isEmpty() { 33 | return Object.keys(this.handlers).every((key) => this.handlers[key].length === 0); 34 | } 35 | } 36 | 37 | export default class EventManager { 38 | constructor() { 39 | this.eventElements = []; 40 | } 41 | 42 | eventElement(element) { 43 | let ee = this.eventElements.filter((ee) => ee.element === element)[0]; 44 | if (!ee) { 45 | ee = new EventElement(element); 46 | this.eventElements.push(ee); 47 | } 48 | return ee; 49 | } 50 | 51 | bind(element, eventName, handler) { 52 | this.eventElement(element).bind(eventName, handler); 53 | } 54 | 55 | unbind(element, eventName, handler) { 56 | const ee = this.eventElement(element); 57 | ee.unbind(eventName, handler); 58 | 59 | if (ee.isEmpty) { 60 | // remove 61 | this.eventElements.splice(this.eventElements.indexOf(ee), 1); 62 | } 63 | } 64 | 65 | unbindAll() { 66 | this.eventElements.forEach((e) => e.unbindAll()); 67 | this.eventElements = []; 68 | } 69 | 70 | once(element, eventName, handler) { 71 | const ee = this.eventElement(element); 72 | const onceHandler = (evt) => { 73 | ee.unbind(eventName, onceHandler); 74 | handler(evt); 75 | }; 76 | ee.bind(eventName, onceHandler); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/js/mdb/perfect-scrollbar/lib/util.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import * as CSS from './css'; 4 | import * as DOM from './dom'; 5 | 6 | export function toInt(x) { 7 | return parseInt(x, 10) || 0; 8 | } 9 | 10 | export function isEditable(el) { 11 | return ( 12 | DOM.matches(el, 'input,[contenteditable]') || 13 | DOM.matches(el, 'select,[contenteditable]') || 14 | DOM.matches(el, 'textarea,[contenteditable]') || 15 | DOM.matches(el, 'button,[contenteditable]') 16 | ); 17 | } 18 | 19 | export function outerWidth(element) { 20 | const styles = CSS.get(element); 21 | return ( 22 | toInt(styles.width) + 23 | toInt(styles.paddingLeft) + 24 | toInt(styles.paddingRight) + 25 | toInt(styles.borderLeftWidth) + 26 | toInt(styles.borderRightWidth) 27 | ); 28 | } 29 | 30 | export const env = { 31 | isWebKit: typeof document !== 'undefined' && 'WebkitAppearance' in document.documentElement.style, 32 | supportsTouch: 33 | typeof window !== 'undefined' && 34 | ('ontouchstart' in window || 35 | ('maxTouchPoints' in window.navigator && window.navigator.maxTouchPoints > 0) || 36 | (window.DocumentTouch && document instanceof window.DocumentTouch)), 37 | supportsIePointer: typeof navigator !== 'undefined' && navigator.msMaxTouchPoints, 38 | isChrome: typeof navigator !== 'undefined' && /Chrome/i.test(navigator && navigator.userAgent), 39 | }; 40 | -------------------------------------------------------------------------------- /src/js/mdb/perfect-scrollbar/process-scroll-diff.js: -------------------------------------------------------------------------------- 1 | import { setScrollingClassInstantly } from './lib/class-names'; 2 | 3 | function createEvent(name) { 4 | if (typeof window.CustomEvent === 'function') { 5 | return new CustomEvent(name); 6 | } 7 | 8 | const evt = document.createEvent('CustomEvent'); 9 | evt.initCustomEvent(name, false, false, undefined); 10 | return evt; 11 | } 12 | 13 | export default function (i, axis, diff, useScrollingClass = true, forceFireReachEvent = false) { 14 | let fields; 15 | if (axis === 'top') { 16 | fields = ['contentHeight', 'containerHeight', 'scrollTop', 'y', 'up', 'down']; 17 | } else if (axis === 'left') { 18 | fields = ['contentWidth', 'containerWidth', 'scrollLeft', 'x', 'left', 'right']; 19 | } else { 20 | throw new Error('A proper axis should be provided'); 21 | } 22 | 23 | processScrollDiff(i, diff, fields, useScrollingClass, forceFireReachEvent); 24 | } 25 | 26 | function processScrollDiff( 27 | i, 28 | diff, 29 | [contentHeight, containerHeight, scrollTop, y, up, down], 30 | useScrollingClass = true, 31 | forceFireReachEvent = false 32 | ) { 33 | const element = i.element; 34 | 35 | // reset reach 36 | i.reach[y] = null; 37 | 38 | // 1 for subpixel rounding 39 | if (element[scrollTop] < 1) { 40 | i.reach[y] = 'start'; 41 | } 42 | 43 | // 1 for subpixel rounding 44 | if (element[scrollTop] > i[contentHeight] - i[containerHeight] - 1) { 45 | i.reach[y] = 'end'; 46 | } 47 | 48 | if (diff) { 49 | element.dispatchEvent(createEvent(`ps-scroll-${y}`)); 50 | 51 | if (diff < 0) { 52 | element.dispatchEvent(createEvent(`ps-scroll-${up}`)); 53 | } else if (diff > 0) { 54 | element.dispatchEvent(createEvent(`ps-scroll-${down}`)); 55 | } 56 | 57 | if (useScrollingClass) { 58 | setScrollingClassInstantly(i, y); 59 | } 60 | } 61 | 62 | if (i.reach[y] && (diff || forceFireReachEvent)) { 63 | element.dispatchEvent(createEvent(`ps-${y}-reach-${i.reach[y]}`)); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/js/mdb/util/keycodes.js: -------------------------------------------------------------------------------- 1 | export const LEFT_ARROW = 37; 2 | export const UP_ARROW = 38; 3 | export const RIGHT_ARROW = 39; 4 | export const DOWN_ARROW = 40; 5 | export const HOME = 36; 6 | export const END = 35; 7 | export const PAGE_UP = 33; 8 | export const PAGE_DOWN = 34; 9 | export const ENTER = 13; 10 | export const SPACE = 32; 11 | export const ESCAPE = 27; 12 | export const TAB = 9; 13 | export const BACKSPACE = 8; 14 | export const DELETE = 46; 15 | export const A = 65; 16 | export const B = 66; 17 | export const C = 67; 18 | export const D = 68; 19 | export const E = 69; 20 | export const F = 70; 21 | export const G = 71; 22 | export const H = 72; 23 | export const I = 73; 24 | export const J = 74; 25 | export const K = 75; 26 | export const L = 76; 27 | export const M = 77; 28 | export const N = 78; 29 | export const O = 79; 30 | export const P = 80; 31 | export const Q = 81; 32 | export const R = 82; 33 | export const S = 83; 34 | export const T = 84; 35 | export const U = 85; 36 | export const V = 86; 37 | export const W = 87; 38 | export const X = 88; 39 | export const Y = 89; 40 | export const Z = 90; 41 | -------------------------------------------------------------------------------- /src/js/mdb/util/touch/index.js: -------------------------------------------------------------------------------- 1 | import Swipe from './swipe'; 2 | 3 | class Touch { 4 | constructor(element, event = 'swipe', options = {}) { 5 | this._element = element; 6 | this._event = event; 7 | 8 | // events 9 | 10 | this.swipe = new Swipe(element, options); 11 | 12 | // handlers 13 | 14 | this._touchStartHandler = this._handleTouchStart.bind(this); 15 | this._touchMoveHandler = this._handleTouchMove.bind(this); 16 | this._touchEndHandler = this._handleTouchEnd.bind(this); 17 | } 18 | 19 | dispose() { 20 | this._element.removeEventListener('touchstart', this._touchStartHandler); 21 | this._element.removeEventListener('touchmove', this._touchMoveHandler); 22 | window.removeEventListener('touchend', this._touchEndHandler); 23 | } 24 | 25 | init() { 26 | // istanbul ignore next 27 | this._element.addEventListener('touchstart', (e) => this._handleTouchStart(e)); 28 | // istanbul ignore next 29 | this._element.addEventListener('touchmove', (e) => this._handleTouchMove(e)); 30 | // istanbul ignore next 31 | window.addEventListener('touchend', (e) => this._handleTouchEnd(e)); 32 | } 33 | 34 | _handleTouchStart(e) { 35 | this[this._event].handleTouchStart(e); 36 | } 37 | 38 | _handleTouchMove(e) { 39 | this[this._event].handleTouchMove(e); 40 | } 41 | 42 | _handleTouchEnd(e) { 43 | this[this._event].handleTouchEnd(e); 44 | } 45 | } 46 | 47 | export default Touch; 48 | -------------------------------------------------------------------------------- /src/js/mdb/util/touch/swipe.js: -------------------------------------------------------------------------------- 1 | import EventHandler from '../../dom/event-handler'; 2 | 3 | const DEFAULT_OPTIONS = { 4 | threshold: 10, 5 | direction: 'all', 6 | }; 7 | 8 | class Swipe { 9 | constructor(element, options) { 10 | this._element = element; 11 | this._startPosition = null; 12 | this._options = { 13 | ...DEFAULT_OPTIONS, 14 | ...options, 15 | }; 16 | } 17 | 18 | handleTouchStart(e) { 19 | this._startPosition = this._getCoordinates(e); 20 | } 21 | 22 | handleTouchMove(e) { 23 | if (!this._startPosition) return; 24 | 25 | const position = this._getCoordinates(e); 26 | const displacement = { 27 | x: position.x - this._startPosition.x, 28 | y: position.y - this._startPosition.y, 29 | }; 30 | 31 | const swipe = this._getDirection(displacement); 32 | 33 | if (this._options.direction === 'all') { 34 | if (swipe.y.value < this._options.threshold && swipe.x.value < this._options.threshold) { 35 | return; 36 | } 37 | const direction = swipe.y.value > swipe.x.value ? swipe.y.direction : swipe.x.direction; 38 | EventHandler.trigger(this._element, `swipe${direction}`); 39 | EventHandler.trigger(this._element, 'swipe', { direction }); 40 | this._startPosition = null; 41 | return; 42 | } 43 | 44 | const axis = this._options.direction === 'left' || this._options === 'right' ? 'x' : 'y'; 45 | 46 | if ( 47 | swipe[axis].direction === this._options.direction && 48 | swipe[axis].value > this._options.threshold 49 | ) { 50 | EventHandler.trigger(this._element, `swipe${swipe[axis].direction}`); 51 | this._startPosition = null; 52 | } 53 | } 54 | 55 | handleTouchEnd() { 56 | this._startPosition = null; 57 | } 58 | 59 | _getCoordinates(e) { 60 | const [touch] = e.touches; 61 | return { 62 | x: touch.clientX, 63 | y: touch.clientY, 64 | }; 65 | } 66 | 67 | _getDirection(displacement) { 68 | return { 69 | x: { 70 | direction: displacement.x < 0 ? 'left' : 'right', 71 | value: Math.abs(displacement.x), 72 | }, 73 | y: { 74 | direction: displacement.y < 0 ? 'up' : 'down', 75 | value: Math.abs(displacement.y), 76 | }, 77 | }; 78 | } 79 | } 80 | 81 | export default Swipe; 82 | -------------------------------------------------------------------------------- /src/js/mdb/util/touch/touchUtil.js: -------------------------------------------------------------------------------- 1 | class TouchUtil { 2 | _getCoordinates(e) { 3 | const [touch] = e.touches; 4 | return { 5 | x: touch.clientX, 6 | y: touch.clientY, 7 | }; 8 | } 9 | 10 | _getDirection(displacement) { 11 | return { 12 | x: { 13 | direction: displacement.x < 0 ? 'left' : 'right', 14 | value: Math.abs(displacement.x), 15 | }, 16 | y: { 17 | direction: displacement.y < 0 ? 'up' : 'down', 18 | value: Math.abs(displacement.y), 19 | }, 20 | }; 21 | } 22 | } 23 | 24 | export default TouchUtil; 25 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | // scss-docs-start alert-css-vars 7 | --#{$prefix}alert-bg: transparent; 8 | --#{$prefix}alert-padding-x: #{$alert-padding-x}; 9 | --#{$prefix}alert-padding-y: #{$alert-padding-y}; 10 | --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; 11 | --#{$prefix}alert-color: inherit; 12 | --#{$prefix}alert-border-color: transparent; 13 | --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); 14 | --#{$prefix}alert-border-radius: #{$alert-border-radius}; 15 | --#{$prefix}alert-link-color: inherit; 16 | // scss-docs-end alert-css-vars 17 | 18 | position: relative; 19 | padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); 20 | margin-bottom: var(--#{$prefix}alert-margin-bottom); 21 | color: var(--#{$prefix}alert-color); 22 | background-color: var(--#{$prefix}alert-bg); 23 | border: var(--#{$prefix}alert-border); 24 | @include border-radius(var(--#{$prefix}alert-border-radius)); 25 | } 26 | 27 | // Headings for larger alerts 28 | .alert-heading { 29 | // Specified to prevent conflicts of changing $headings-color 30 | color: inherit; 31 | } 32 | 33 | // Provide class for links that match alerts 34 | .alert-link { 35 | font-weight: $alert-link-font-weight; 36 | color: var(--#{$prefix}alert-link-color); 37 | } 38 | 39 | // Dismissible alerts 40 | // 41 | // Expand the right padding and account for the close button's positioning. 42 | 43 | .alert-dismissible { 44 | padding-right: $alert-dismissible-padding-r; 45 | 46 | // Adjust close link position 47 | .btn-close { 48 | position: absolute; 49 | top: 0; 50 | right: 0; 51 | z-index: $stretched-link-z-index + 1; 52 | padding: $alert-padding-y * 1.25 $alert-padding-x; 53 | } 54 | } 55 | 56 | // scss-docs-start alert-modifiers 57 | // Generate contextual modifier classes for colorizing the alert 58 | @each $state in map-keys($theme-colors) { 59 | .alert-#{$state} { 60 | --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); 61 | --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); 62 | --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); 63 | --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); 64 | } 65 | } 66 | // scss-docs-end alert-modifiers 67 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | // scss-docs-start badge-css-vars 8 | --#{$prefix}badge-padding-x: #{$badge-padding-x}; 9 | --#{$prefix}badge-padding-y: #{$badge-padding-y}; 10 | @include rfs($badge-font-size, --#{$prefix}badge-font-size); 11 | --#{$prefix}badge-font-weight: #{$badge-font-weight}; 12 | --#{$prefix}badge-color: #{$badge-color}; 13 | --#{$prefix}badge-border-radius: #{$badge-border-radius}; 14 | // scss-docs-end badge-css-vars 15 | 16 | display: inline-block; 17 | padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); 18 | @include font-size(var(--#{$prefix}badge-font-size)); 19 | font-weight: var(--#{$prefix}badge-font-weight); 20 | line-height: 1; 21 | color: var(--#{$prefix}badge-color); 22 | text-align: center; 23 | white-space: nowrap; 24 | vertical-align: baseline; 25 | @include border-radius(var(--#{$prefix}badge-border-radius)); 26 | @include gradient-bg(); 27 | 28 | // Empty badges collapse automatically 29 | &:empty { 30 | display: none; 31 | } 32 | } 33 | 34 | // Quick fix for badges in buttons 35 | .btn .badge { 36 | position: relative; 37 | top: -1px; 38 | } 39 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | // scss-docs-start breadcrumb-css-vars 3 | --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; 4 | --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; 5 | --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; 6 | @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); 7 | --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; 8 | --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; 9 | --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; 10 | --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; 11 | --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; 12 | // scss-docs-end breadcrumb-css-vars 13 | 14 | display: flex; 15 | flex-wrap: wrap; 16 | padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); 17 | margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); 18 | @include font-size(var(--#{$prefix}breadcrumb-font-size)); 19 | list-style: none; 20 | background-color: var(--#{$prefix}breadcrumb-bg); 21 | @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); 22 | } 23 | 24 | .breadcrumb-item { 25 | // The separator between breadcrumbs (by default, a forward-slash: "/") 26 | + .breadcrumb-item { 27 | padding-left: var(--#{$prefix}breadcrumb-item-padding-x); 28 | 29 | &::before { 30 | float: left; // Suppress inline spacings and underlining of the separator 31 | padding-right: var(--#{$prefix}breadcrumb-item-padding-x); 32 | color: var(--#{$prefix}breadcrumb-divider-color); 33 | content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{'/* rtl:'} var( 34 | --#{$prefix}breadcrumb-divider, 35 | escape-svg($breadcrumb-divider-flipped) 36 | ) #{'*/'}; 37 | } 38 | } 39 | 40 | &.active { 41 | color: var(--#{$prefix}breadcrumb-item-active-color); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_close.scss: -------------------------------------------------------------------------------- 1 | // Transparent background and border properties included for button version. 2 | // iOS requires the button element instead of an anchor tag. 3 | // If you want the anchor version, it requires `href="#"`. 4 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 5 | 6 | .btn-close { 7 | // scss-docs-start close-css-vars 8 | --#{$prefix}btn-close-color: #{$btn-close-color}; 9 | --#{$prefix}btn-close-bg: #{escape-svg($btn-close-bg)}; 10 | --#{$prefix}btn-close-opacity: #{$btn-close-opacity}; 11 | --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity}; 12 | --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; 13 | --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; 14 | --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; 15 | --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter}; 16 | // scss-docs-end close-css-vars 17 | 18 | box-sizing: content-box; 19 | width: $btn-close-width; 20 | height: $btn-close-height; 21 | padding: $btn-close-padding-y $btn-close-padding-x; 22 | color: var(--#{$prefix}btn-close-color); 23 | background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements 24 | border: 0; // for button elements 25 | @include border-radius(); 26 | opacity: var(--#{$prefix}btn-close-opacity); 27 | 28 | // Override 's hover style 29 | &:hover { 30 | color: var(--#{$prefix}btn-close-color); 31 | text-decoration: none; 32 | opacity: var(--#{$prefix}btn-close-hover-opacity); 33 | } 34 | 35 | &:focus { 36 | outline: 0; 37 | box-shadow: var(--#{$prefix}btn-close-focus-shadow); 38 | opacity: var(--#{$prefix}btn-close-focus-opacity); 39 | } 40 | 41 | &:disabled, 42 | &.disabled { 43 | pointer-events: none; 44 | user-select: none; 45 | opacity: var(--#{$prefix}btn-close-disabled-opacity); 46 | } 47 | } 48 | 49 | @mixin btn-close-white() { 50 | filter: var(--#{$prefix}btn-close-white-filter); 51 | } 52 | 53 | .btn-close-white { 54 | @include btn-close-white(); 55 | } 56 | 57 | @if $enable-dark-mode { 58 | @include color-mode(dark) { 59 | .btn-close { 60 | @include btn-close-white(); 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_containers.scss: -------------------------------------------------------------------------------- 1 | // Container widths 2 | // 3 | // Set the container width, and override it for fixed navbars in media queries. 4 | 5 | @if $enable-container-classes { 6 | // Single container class with breakpoint max-widths 7 | .container, 8 | // 100% wide container at all breakpoints 9 | .container-fluid { 10 | @include make-container(); 11 | } 12 | 13 | // Responsive containers that are 100% wide until a breakpoint 14 | @each $breakpoint, $container-max-width in $container-max-widths { 15 | .container-#{$breakpoint} { 16 | @extend .container-fluid; 17 | } 18 | 19 | @include media-breakpoint-up($breakpoint, $grid-breakpoints) { 20 | %responsive-container-#{$breakpoint} { 21 | max-width: $container-max-width; 22 | } 23 | 24 | // Extend each breakpoint which is smaller or equal to the current breakpoint 25 | $extend-breakpoint: true; 26 | 27 | @each $name, $width in $grid-breakpoints { 28 | @if ($extend-breakpoint) { 29 | .container#{breakpoint-infix($name, $grid-breakpoints)} { 30 | @extend %responsive-container-#{$breakpoint}; 31 | } 32 | 33 | // Once the current breakpoint is reached, stop extending 34 | @if ($breakpoint == $name) { 35 | $extend-breakpoint: false; 36 | } 37 | } 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_forms.scss: -------------------------------------------------------------------------------- 1 | @import 'forms/labels'; 2 | @import 'forms/form-text'; 3 | @import 'forms/form-control'; 4 | @import 'forms/form-select'; 5 | @import 'forms/form-check'; 6 | @import 'forms/form-range'; 7 | @import 'forms/floating-labels'; 8 | @import 'forms/input-group'; 9 | @import 'forms/validation'; 10 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_grid.scss: -------------------------------------------------------------------------------- 1 | // Row 2 | // 3 | // Rows contain your columns. 4 | 5 | :root { 6 | @each $name, $value in $grid-breakpoints { 7 | --#{$prefix}breakpoint-#{$name}: #{$value}; 8 | } 9 | } 10 | 11 | @if $enable-grid-classes { 12 | .row { 13 | @include make-row(); 14 | 15 | > * { 16 | @include make-col-ready(); 17 | } 18 | } 19 | } 20 | 21 | @if $enable-cssgrid { 22 | .grid { 23 | display: grid; 24 | grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr); 25 | grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr); 26 | gap: var(--#{$prefix}gap, #{$grid-gutter-width}); 27 | 28 | @include make-cssgrid(); 29 | } 30 | } 31 | 32 | // Columns 33 | // 34 | // Common styles for small and large grid columns 35 | 36 | @if $enable-grid-classes { 37 | @include make-grid-columns(); 38 | } 39 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_helpers.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers/clearfix'; 2 | @import 'helpers/color-bg'; 3 | @import 'helpers/colored-links'; 4 | @import 'helpers/focus-ring'; 5 | @import 'helpers/icon-link'; 6 | @import 'helpers/ratio'; 7 | @import 'helpers/position'; 8 | @import 'helpers/stacks'; 9 | @import 'helpers/visually-hidden'; 10 | @import 'helpers/stretched-link'; 11 | @import 'helpers/text-truncation'; 12 | @import 'helpers/vr'; 13 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_images.scss: -------------------------------------------------------------------------------- 1 | // Responsive images (ensure images don't scale beyond their parents) 2 | // 3 | // This is purposefully opt-in via an explicit class rather than being the default for all ``s. 4 | // We previously tried the "images are responsive by default" approach in Bootstrap v2, 5 | // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps) 6 | // which weren't expecting the images within themselves to be involuntarily resized. 7 | // See also https://github.com/twbs/bootstrap/issues/18178 8 | .img-fluid { 9 | @include img-fluid(); 10 | } 11 | 12 | // Image thumbnails 13 | .img-thumbnail { 14 | padding: $thumbnail-padding; 15 | background-color: $thumbnail-bg; 16 | border: $thumbnail-border-width solid $thumbnail-border-color; 17 | @include border-radius($thumbnail-border-radius); 18 | @include box-shadow($thumbnail-box-shadow); 19 | 20 | // Keep them at most 100% wide 21 | @include img-fluid(); 22 | } 23 | 24 | // 25 | // Figures 26 | // 27 | 28 | .figure { 29 | // Ensures the caption's text aligns with the image. 30 | display: inline-block; 31 | } 32 | 33 | .figure-img { 34 | margin-bottom: $spacer * 0.5; 35 | line-height: 1; 36 | } 37 | 38 | .figure-caption { 39 | @include font-size($figure-caption-font-size); 40 | color: $figure-caption-color; 41 | } 42 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Toggles 2 | // 3 | // Used in conjunction with global variables to enable certain theme features. 4 | 5 | // Vendor 6 | @import 'vendor/rfs'; 7 | 8 | // Deprecate 9 | @import 'mixins/deprecate'; 10 | 11 | // Helpers 12 | @import 'mixins/breakpoints'; 13 | @import 'mixins/color-mode'; 14 | @import 'mixins/color-scheme'; 15 | @import 'mixins/image'; 16 | @import 'mixins/resize'; 17 | @import 'mixins/visually-hidden'; 18 | @import 'mixins/reset-text'; 19 | @import 'mixins/text-truncate'; 20 | 21 | // Utilities 22 | @import 'mixins/utilities'; 23 | 24 | // Components 25 | @import 'mixins/backdrop'; 26 | @import 'mixins/buttons'; 27 | @import 'mixins/caret'; 28 | @import 'mixins/pagination'; 29 | @import 'mixins/lists'; 30 | @import 'mixins/forms'; 31 | @import 'mixins/table-variants'; 32 | 33 | // Skins 34 | @import 'mixins/border-radius'; 35 | @import 'mixins/box-shadow'; 36 | @import 'mixins/gradients'; 37 | @import 'mixins/transition'; 38 | 39 | // Layout 40 | @import 'mixins/clearfix'; 41 | @import 'mixins/container'; 42 | @import 'mixins/grid'; 43 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_placeholders.scss: -------------------------------------------------------------------------------- 1 | .placeholder { 2 | display: inline-block; 3 | min-height: 1em; 4 | vertical-align: middle; 5 | cursor: wait; 6 | background-color: currentcolor; 7 | opacity: $placeholder-opacity-max; 8 | 9 | &.btn::before { 10 | display: inline-block; 11 | content: ''; 12 | } 13 | } 14 | 15 | // Sizing 16 | .placeholder-xs { 17 | min-height: 0.6em; 18 | } 19 | 20 | .placeholder-sm { 21 | min-height: 0.8em; 22 | } 23 | 24 | .placeholder-lg { 25 | min-height: 1.2em; 26 | } 27 | 28 | // Animation 29 | .placeholder-glow { 30 | .placeholder { 31 | animation: placeholder-glow 2s ease-in-out infinite; 32 | } 33 | } 34 | 35 | @keyframes placeholder-glow { 36 | 50% { 37 | opacity: $placeholder-opacity-min; 38 | } 39 | } 40 | 41 | .placeholder-wave { 42 | mask-image: linear-gradient( 43 | 130deg, 44 | $black 55%, 45 | rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, 46 | $black 95% 47 | ); 48 | mask-size: 200% 100%; 49 | animation: placeholder-wave 2s linear infinite; 50 | } 51 | 52 | @keyframes placeholder-wave { 53 | 100% { 54 | mask-position: -200% 0%; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_progress.scss: -------------------------------------------------------------------------------- 1 | // Disable animation if transitions are disabled 2 | 3 | // scss-docs-start progress-keyframes 4 | @if $enable-transitions { 5 | @keyframes progress-bar-stripes { 6 | 0% { 7 | background-position-x: $progress-height; 8 | } 9 | } 10 | } 11 | // scss-docs-end progress-keyframes 12 | 13 | .progress, 14 | .progress-stacked { 15 | // scss-docs-start progress-css-vars 16 | --#{$prefix}progress-height: #{$progress-height}; 17 | @include rfs($progress-font-size, --#{$prefix}progress-font-size); 18 | --#{$prefix}progress-bg: #{$progress-bg}; 19 | --#{$prefix}progress-border-radius: #{$progress-border-radius}; 20 | --#{$prefix}progress-box-shadow: #{$progress-box-shadow}; 21 | --#{$prefix}progress-bar-color: #{$progress-bar-color}; 22 | --#{$prefix}progress-bar-bg: #{$progress-bar-bg}; 23 | --#{$prefix}progress-bar-transition: #{$progress-bar-transition}; 24 | // scss-docs-end progress-css-vars 25 | 26 | display: flex; 27 | height: var(--#{$prefix}progress-height); 28 | overflow: hidden; // force rounded corners by cropping it 29 | @include font-size(var(--#{$prefix}progress-font-size)); 30 | background-color: var(--#{$prefix}progress-bg); 31 | @include border-radius(var(--#{$prefix}progress-border-radius)); 32 | @include box-shadow(var(--#{$prefix}progress-box-shadow)); 33 | } 34 | 35 | .progress-bar { 36 | display: flex; 37 | flex-direction: column; 38 | justify-content: center; 39 | overflow: hidden; 40 | color: var(--#{$prefix}progress-bar-color); 41 | text-align: center; 42 | white-space: nowrap; 43 | background-color: var(--#{$prefix}progress-bar-bg); 44 | @include transition(var(--#{$prefix}progress-bar-transition)); 45 | } 46 | 47 | .progress-bar-striped { 48 | @include gradient-striped(); 49 | background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height); 50 | } 51 | 52 | .progress-stacked > .progress { 53 | overflow: visible; 54 | } 55 | 56 | .progress-stacked > .progress > .progress-bar { 57 | width: 100%; 58 | } 59 | 60 | @if $enable-transitions { 61 | .progress-bar-animated { 62 | animation: $progress-bar-animation-timing progress-bar-stripes; 63 | 64 | @if $enable-reduced-motion { 65 | @media (prefers-reduced-motion: reduce) { 66 | animation: none; 67 | } 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_transitions.scss: -------------------------------------------------------------------------------- 1 | .fade { 2 | @include transition($transition-fade); 3 | 4 | &:not(.show) { 5 | opacity: 0; 6 | } 7 | } 8 | 9 | // scss-docs-start collapse-classes 10 | .collapse { 11 | &:not(.show) { 12 | display: none; 13 | } 14 | } 15 | 16 | .collapsing { 17 | height: 0; 18 | overflow: hidden; 19 | @include transition($transition-collapse); 20 | 21 | &.collapse-horizontal { 22 | width: 0; 23 | height: auto; 24 | @include transition($transition-collapse-width); 25 | } 26 | } 27 | // scss-docs-end collapse-classes 28 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/_type.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Headings 3 | // 4 | .h1 { 5 | @extend h1; 6 | } 7 | 8 | .h2 { 9 | @extend h2; 10 | } 11 | 12 | .h3 { 13 | @extend h3; 14 | } 15 | 16 | .h4 { 17 | @extend h4; 18 | } 19 | 20 | .h5 { 21 | @extend h5; 22 | } 23 | 24 | .h6 { 25 | @extend h6; 26 | } 27 | 28 | .lead { 29 | @include font-size($lead-font-size); 30 | font-weight: $lead-font-weight; 31 | } 32 | 33 | // Type display classes 34 | @each $display, $font-size in $display-font-sizes { 35 | .display-#{$display} { 36 | @include font-size($font-size); 37 | font-family: $display-font-family; 38 | font-style: $display-font-style; 39 | font-weight: $display-font-weight; 40 | line-height: $display-line-height; 41 | } 42 | } 43 | 44 | // 45 | // Emphasis 46 | // 47 | .small { 48 | @extend small; 49 | } 50 | 51 | .mark { 52 | @extend mark; 53 | } 54 | 55 | // 56 | // Lists 57 | // 58 | 59 | .list-unstyled { 60 | @include list-unstyled(); 61 | } 62 | 63 | // Inline turns list items into inline-block 64 | .list-inline { 65 | @include list-unstyled(); 66 | } 67 | .list-inline-item { 68 | display: inline-block; 69 | 70 | &:not(:last-child) { 71 | margin-right: $list-inline-padding; 72 | } 73 | } 74 | 75 | // 76 | // Misc 77 | // 78 | 79 | // Builds on `abbr` 80 | .initialism { 81 | @include font-size($initialism-font-size); 82 | text-transform: uppercase; 83 | } 84 | 85 | // Blockquotes 86 | .blockquote { 87 | margin-bottom: $blockquote-margin-y; 88 | @include font-size($blockquote-font-size); 89 | 90 | > :last-child { 91 | margin-bottom: 0; 92 | } 93 | } 94 | 95 | .blockquote-footer { 96 | margin-top: -$blockquote-margin-y; 97 | margin-bottom: $blockquote-margin-y; 98 | @include font-size($blockquote-footer-font-size); 99 | color: $blockquote-footer-color; 100 | 101 | &::before { 102 | content: '\2014\00A0'; // em dash, nbsp 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/bootstrap-grid.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins/banner'; 2 | @include bsBanner(Grid); 3 | 4 | $include-column-box-sizing: true !default; 5 | 6 | @import 'functions'; 7 | @import 'variables'; 8 | @import 'variables-dark'; 9 | @import 'maps'; 10 | 11 | @import 'mixins/breakpoints'; 12 | @import 'mixins/container'; 13 | @import 'mixins/grid'; 14 | @import 'mixins/utilities'; 15 | 16 | @import 'vendor/rfs'; 17 | 18 | @import 'containers'; 19 | @import 'grid'; 20 | 21 | @import 'utilities'; 22 | // Only use the utilities we need 23 | // stylelint-disable-next-line scss/dollar-variable-default 24 | $utilities: map-get-multiple( 25 | $utilities, 26 | ( 27 | 'display', 28 | 'order', 29 | 'flex', 30 | 'flex-direction', 31 | 'flex-grow', 32 | 'flex-shrink', 33 | 'flex-wrap', 34 | 'justify-content', 35 | 'align-items', 36 | 'align-content', 37 | 'align-self', 38 | 'margin', 39 | 'margin-x', 40 | 'margin-y', 41 | 'margin-top', 42 | 'margin-end', 43 | 'margin-bottom', 44 | 'margin-start', 45 | 'negative-margin', 46 | 'negative-margin-x', 47 | 'negative-margin-y', 48 | 'negative-margin-top', 49 | 'negative-margin-end', 50 | 'negative-margin-bottom', 51 | 'negative-margin-start', 52 | 'padding', 53 | 'padding-x', 54 | 'padding-y', 55 | 'padding-top', 56 | 'padding-end', 57 | 'padding-bottom', 58 | 'padding-start' 59 | ) 60 | ); 61 | 62 | @import 'utilities/api'; 63 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/bootstrap-reboot.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins/banner'; 2 | @include bsBanner(Reboot); 3 | 4 | @import 'functions'; 5 | @import 'variables'; 6 | @import 'variables-dark'; 7 | @import 'maps'; 8 | @import 'mixins'; 9 | @import 'root'; 10 | @import 'reboot'; 11 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/bootstrap-utilities.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins/banner'; 2 | @include bsBanner(Utilities); 3 | 4 | // Configuration 5 | @import 'functions'; 6 | @import 'variables'; 7 | @import 'variables-dark'; 8 | @import 'maps'; 9 | @import 'mixins'; 10 | @import 'utilities'; 11 | 12 | // Layout & components 13 | @import 'root'; 14 | 15 | // Helpers 16 | @import 'helpers'; 17 | 18 | // Utilities 19 | @import 'utilities/api'; 20 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins/banner'; 2 | @include bsBanner(''); 3 | 4 | // scss-docs-start import-stack 5 | // Configuration 6 | @import 'functions'; 7 | @import 'variables'; 8 | @import 'variables-dark'; 9 | @import 'maps'; 10 | @import 'mixins'; 11 | @import 'utilities'; 12 | 13 | // Layout & components 14 | @import 'root'; 15 | @import 'reboot'; 16 | @import 'type'; 17 | @import 'images'; 18 | @import 'containers'; 19 | @import 'grid'; 20 | @import 'tables'; 21 | @import 'forms'; 22 | @import 'buttons'; 23 | @import 'transitions'; 24 | @import 'dropdown'; 25 | @import 'button-group'; 26 | @import 'nav'; 27 | @import 'navbar'; 28 | @import 'card'; 29 | @import 'accordion'; 30 | @import 'breadcrumb'; 31 | @import 'pagination'; 32 | @import 'badge'; 33 | @import 'alert'; 34 | @import 'progress'; 35 | @import 'list-group'; 36 | @import 'close'; 37 | @import 'toasts'; 38 | @import 'modal'; 39 | @import 'tooltip'; 40 | @import 'popover'; 41 | @import 'carousel'; 42 | @import 'spinners'; 43 | @import 'offcanvas'; 44 | @import 'placeholders'; 45 | 46 | // Helpers 47 | @import 'helpers'; 48 | 49 | // Utilities 50 | @import 'utilities/api'; 51 | // scss-docs-end import-stack 52 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/forms/_form-text.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Form text 3 | // 4 | 5 | .form-text { 6 | margin-top: $form-text-margin-top; 7 | @include font-size($form-text-font-size); 8 | font-style: $form-text-font-style; 9 | font-weight: $form-text-font-weight; 10 | color: $form-text-color; 11 | } 12 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/forms/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // 4 | 5 | .form-label { 6 | margin-bottom: $form-label-margin-bottom; 7 | @include font-size($form-label-font-size); 8 | font-style: $form-label-font-style; 9 | font-weight: $form-label-font-weight; 10 | color: $form-label-color; 11 | } 12 | 13 | // For use with horizontal and inline forms, when you need the label (or legend) 14 | // text to align with the form controls. 15 | .col-form-label { 16 | padding-top: add($input-padding-y, $input-border-width); 17 | padding-bottom: add($input-padding-y, $input-border-width); 18 | margin-bottom: 0; // Override the `` default 19 | @include font-size(inherit); // Override the `` default 20 | font-style: $form-label-font-style; 21 | font-weight: $form-label-font-weight; 22 | line-height: $input-line-height; 23 | color: $form-label-color; 24 | } 25 | 26 | .col-form-label-lg { 27 | padding-top: add($input-padding-y-lg, $input-border-width); 28 | padding-bottom: add($input-padding-y-lg, $input-border-width); 29 | @include font-size($input-font-size-lg); 30 | } 31 | 32 | .col-form-label-sm { 33 | padding-top: add($input-padding-y-sm, $input-border-width); 34 | padding-bottom: add($input-padding-y-sm, $input-border-width); 35 | @include font-size($input-font-size-sm); 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/forms/_validation.scss: -------------------------------------------------------------------------------- 1 | // Form validation 2 | // 3 | // Provide feedback to users when form field values are valid or invalid. Works 4 | // primarily for client-side validation via scoped `:invalid` and `:valid` 5 | // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for 6 | // server-side validation. 7 | 8 | // scss-docs-start form-validation-states-loop 9 | @each $state, $data in $form-validation-states { 10 | @include form-validation-state($state, $data...); 11 | } 12 | // scss-docs-end form-validation-states-loop 13 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/helpers/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix(); 3 | } 4 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/helpers/_color-bg.scss: -------------------------------------------------------------------------------- 1 | // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 2 | @each $color, $value in $theme-colors { 3 | .text-bg-#{$color} { 4 | color: color-contrast($value) if($enable-important-utilities, !important, null); 5 | background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) 6 | if($enable-important-utilities, !important, null); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/helpers/_colored-links.scss: -------------------------------------------------------------------------------- 1 | // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 2 | @each $color, $value in $theme-colors { 3 | .link-#{$color} { 4 | color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) 5 | if($enable-important-utilities, !important, null); 6 | text-decoration-color: RGBA( 7 | var(--#{$prefix}#{$color}-rgb), 8 | var(--#{$prefix}link-underline-opacity, 1) 9 | ) 10 | if($enable-important-utilities, !important, null); 11 | 12 | @if $link-shade-percentage != 0 { 13 | &:hover, 14 | &:focus { 15 | $hover-color: if( 16 | color-contrast($value) == $color-contrast-light, 17 | shade-color($value, $link-shade-percentage), 18 | tint-color($value, $link-shade-percentage) 19 | ); 20 | color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) 21 | if($enable-important-utilities, !important, null); 22 | text-decoration-color: RGBA( 23 | to-rgb($hover-color), 24 | var(--#{$prefix}link-underline-opacity, 1) 25 | ) 26 | if($enable-important-utilities, !important, null); 27 | } 28 | } 29 | } 30 | } 31 | 32 | // One-off special link helper as a bridge until v6 33 | .link-body-emphasis { 34 | color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) 35 | if($enable-important-utilities, !important, null); 36 | text-decoration-color: RGBA( 37 | var(--#{$prefix}emphasis-color-rgb), 38 | var(--#{$prefix}link-underline-opacity, 1) 39 | ) 40 | if($enable-important-utilities, !important, null); 41 | 42 | @if $link-shade-percentage != 0 { 43 | &:hover, 44 | &:focus { 45 | color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 0.75)) 46 | if($enable-important-utilities, !important, null); 47 | text-decoration-color: RGBA( 48 | var(--#{$prefix}emphasis-color-rgb), 49 | var(--#{$prefix}link-underline-opacity, 0.75) 50 | ) 51 | if($enable-important-utilities, !important, null); 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/helpers/_focus-ring.scss: -------------------------------------------------------------------------------- 1 | .focus-ring:focus { 2 | outline: 0; 3 | // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values 4 | box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) 5 | var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) 6 | var(--#{$prefix}focus-ring-color); 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/helpers/_icon-link.scss: -------------------------------------------------------------------------------- 1 | .icon-link { 2 | display: inline-flex; 3 | gap: $icon-link-gap; 4 | align-items: center; 5 | text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 0.5)); 6 | text-underline-offset: $icon-link-underline-offset; 7 | backface-visibility: hidden; 8 | 9 | > .bi { 10 | flex-shrink: 0; 11 | width: $icon-link-icon-size; 12 | height: $icon-link-icon-size; 13 | fill: currentcolor; 14 | @include transition($icon-link-icon-transition); 15 | } 16 | } 17 | 18 | .icon-link-hover { 19 | &:hover, 20 | &:focus-visible { 21 | > .bi { 22 | transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/helpers/_position.scss: -------------------------------------------------------------------------------- 1 | // Shorthand 2 | 3 | .fixed-top { 4 | position: fixed; 5 | top: 0; 6 | right: 0; 7 | left: 0; 8 | z-index: $zindex-fixed; 9 | } 10 | 11 | .fixed-bottom { 12 | position: fixed; 13 | right: 0; 14 | bottom: 0; 15 | left: 0; 16 | z-index: $zindex-fixed; 17 | } 18 | 19 | // Responsive sticky top and bottom 20 | @each $breakpoint in map-keys($grid-breakpoints) { 21 | @include media-breakpoint-up($breakpoint) { 22 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 23 | 24 | .sticky#{$infix}-top { 25 | position: sticky; 26 | top: 0; 27 | z-index: $zindex-sticky; 28 | } 29 | 30 | .sticky#{$infix}-bottom { 31 | position: sticky; 32 | bottom: 0; 33 | z-index: $zindex-sticky; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/helpers/_ratio.scss: -------------------------------------------------------------------------------- 1 | // Credit: Nicolas Gallagher and SUIT CSS. 2 | 3 | .ratio { 4 | position: relative; 5 | width: 100%; 6 | 7 | &::before { 8 | display: block; 9 | padding-top: var(--#{$prefix}aspect-ratio); 10 | content: ''; 11 | } 12 | 13 | > * { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | width: 100%; 18 | height: 100%; 19 | } 20 | } 21 | 22 | @each $key, $ratio in $aspect-ratios { 23 | .ratio-#{$key} { 24 | --#{$prefix}aspect-ratio: #{$ratio}; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/helpers/_stacks.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start stacks 2 | .hstack { 3 | display: flex; 4 | flex-direction: row; 5 | align-items: center; 6 | align-self: stretch; 7 | } 8 | 9 | .vstack { 10 | display: flex; 11 | flex: 1 1 auto; 12 | flex-direction: column; 13 | align-self: stretch; 14 | } 15 | // scss-docs-end stacks 16 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/helpers/_stretched-link.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Stretched link 3 | // 4 | 5 | .stretched-link { 6 | &::#{$stretched-link-pseudo-element} { 7 | position: absolute; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | left: 0; 12 | z-index: $stretched-link-z-index; 13 | content: ''; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/helpers/_text-truncation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Text truncation 3 | // 4 | 5 | .text-truncate { 6 | @include text-truncate(); 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/helpers/_visually-hidden.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Visually hidden 3 | // 4 | 5 | .visually-hidden, 6 | .visually-hidden-focusable:not(:focus):not(:focus-within) { 7 | @include visually-hidden(); 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/helpers/_vr.scss: -------------------------------------------------------------------------------- 1 | .vr { 2 | display: inline-block; 3 | align-self: stretch; 4 | width: $vr-border-width; 5 | min-height: 1em; 6 | background-color: currentcolor; 7 | opacity: $hr-opacity; 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @include deprecate('`alert-variant()`', 'v5.3.0', 'v6.0.0'); 2 | 3 | // scss-docs-start alert-variant-mixin 4 | @mixin alert-variant($background, $border, $color) { 5 | --#{$prefix}alert-color: #{$color}; 6 | --#{$prefix}alert-bg: #{$background}; 7 | --#{$prefix}alert-border-color: #{$border}; 8 | --#{$prefix}alert-link-color: #{shade-color($color, 20%)}; 9 | 10 | @if $enable-gradients { 11 | background-image: var(--#{$prefix}gradient); 12 | } 13 | 14 | .alert-link { 15 | color: var(--#{$prefix}alert-link-color); 16 | } 17 | } 18 | // scss-docs-end alert-variant-mixin 19 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_backdrop.scss: -------------------------------------------------------------------------------- 1 | // Shared between modals and offcanvases 2 | @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) { 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | z-index: $zindex; 7 | width: 100vw; 8 | height: 100vh; 9 | background-color: $backdrop-bg; 10 | 11 | // Fade for backdrop 12 | &.fade { 13 | opacity: 0; 14 | } 15 | &.show { 16 | opacity: $backdrop-opacity; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_banner.scss: -------------------------------------------------------------------------------- 1 | @mixin bsBanner($file) { 2 | /*! 3 | * Bootstrap #{$file} v5.3.2 (https://getbootstrap.com/) 4 | * Copyright 2011-2023 The Bootstrap Authors 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | // Single side border-radius 3 | 4 | // Helper function to replace negative values with 0 5 | @function valid-radius($radius) { 6 | $return: (); 7 | @each $value in $radius { 8 | @if type-of($value) == number { 9 | $return: append($return, max($value, 0)); 10 | } @else { 11 | $return: append($return, $value); 12 | } 13 | } 14 | @return $return; 15 | } 16 | 17 | // scss-docs-start border-radius-mixins 18 | @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { 19 | @if $enable-rounded { 20 | border-radius: valid-radius($radius); 21 | } @else if $fallback-border-radius != false { 22 | border-radius: $fallback-border-radius; 23 | } 24 | } 25 | 26 | @mixin border-top-radius($radius: $border-radius) { 27 | @if $enable-rounded { 28 | border-top-left-radius: valid-radius($radius); 29 | border-top-right-radius: valid-radius($radius); 30 | } 31 | } 32 | 33 | @mixin border-end-radius($radius: $border-radius) { 34 | @if $enable-rounded { 35 | border-top-right-radius: valid-radius($radius); 36 | border-bottom-right-radius: valid-radius($radius); 37 | } 38 | } 39 | 40 | @mixin border-bottom-radius($radius: $border-radius) { 41 | @if $enable-rounded { 42 | border-bottom-right-radius: valid-radius($radius); 43 | border-bottom-left-radius: valid-radius($radius); 44 | } 45 | } 46 | 47 | @mixin border-start-radius($radius: $border-radius) { 48 | @if $enable-rounded { 49 | border-top-left-radius: valid-radius($radius); 50 | border-bottom-left-radius: valid-radius($radius); 51 | } 52 | } 53 | 54 | @mixin border-top-start-radius($radius: $border-radius) { 55 | @if $enable-rounded { 56 | border-top-left-radius: valid-radius($radius); 57 | } 58 | } 59 | 60 | @mixin border-top-end-radius($radius: $border-radius) { 61 | @if $enable-rounded { 62 | border-top-right-radius: valid-radius($radius); 63 | } 64 | } 65 | 66 | @mixin border-bottom-end-radius($radius: $border-radius) { 67 | @if $enable-rounded { 68 | border-bottom-right-radius: valid-radius($radius); 69 | } 70 | } 71 | 72 | @mixin border-bottom-start-radius($radius: $border-radius) { 73 | @if $enable-rounded { 74 | border-bottom-left-radius: valid-radius($radius); 75 | } 76 | } 77 | // scss-docs-end border-radius-mixins 78 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | @if $enable-shadows { 3 | $result: (); 4 | 5 | @each $value in $shadow { 6 | @if $value != null { 7 | $result: append($result, $value, 'comma'); 8 | } 9 | @if $value == none and length($shadow) > 1 { 10 | @warn "The keyword 'none' must be used as a single argument."; 11 | } 12 | } 13 | 14 | @if (length($result) > 0) { 15 | box-shadow: $result; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_caret.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start caret-mixins 2 | @mixin caret-down($width: $caret-width) { 3 | border-top: $width solid; 4 | border-right: $width solid transparent; 5 | border-bottom: 0; 6 | border-left: $width solid transparent; 7 | } 8 | 9 | @mixin caret-up($width: $caret-width) { 10 | border-top: 0; 11 | border-right: $width solid transparent; 12 | border-bottom: $width solid; 13 | border-left: $width solid transparent; 14 | } 15 | 16 | @mixin caret-end($width: $caret-width) { 17 | border-top: $width solid transparent; 18 | border-right: 0; 19 | border-bottom: $width solid transparent; 20 | border-left: $width solid; 21 | } 22 | 23 | @mixin caret-start($width: $caret-width) { 24 | border-top: $width solid transparent; 25 | border-right: $width solid; 26 | border-bottom: $width solid transparent; 27 | } 28 | 29 | @mixin caret( 30 | $direction: down, 31 | $width: $caret-width, 32 | $spacing: $caret-spacing, 33 | $vertical-align: $caret-vertical-align 34 | ) { 35 | @if $enable-caret { 36 | &::after { 37 | display: inline-block; 38 | margin-left: $spacing; 39 | vertical-align: $vertical-align; 40 | content: ''; 41 | @if $direction == down { 42 | @include caret-down($width); 43 | } @else if $direction == up { 44 | @include caret-up($width); 45 | } @else if $direction == end { 46 | @include caret-end($width); 47 | } 48 | } 49 | 50 | @if $direction == start { 51 | &::after { 52 | display: none; 53 | } 54 | 55 | &::before { 56 | display: inline-block; 57 | margin-right: $spacing; 58 | vertical-align: $vertical-align; 59 | content: ''; 60 | @include caret-start($width); 61 | } 62 | } 63 | 64 | &:empty::after { 65 | margin-left: 0; 66 | } 67 | } 68 | } 69 | // scss-docs-end caret-mixins 70 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start clearfix 2 | @mixin clearfix() { 3 | &::after { 4 | display: block; 5 | clear: both; 6 | content: ''; 7 | } 8 | } 9 | // scss-docs-end clearfix 10 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_color-mode.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start color-mode-mixin 2 | @mixin color-mode($mode: light, $root: false) { 3 | @if $color-mode-type == 'media-query' { 4 | @if $root == true { 5 | @media (prefers-color-scheme: $mode) { 6 | :root { 7 | @content; 8 | } 9 | } 10 | } @else { 11 | @media (prefers-color-scheme: $mode) { 12 | @content; 13 | } 14 | } 15 | } @else { 16 | [data-mdb-theme='#{$mode}'] { 17 | @content; 18 | } 19 | } 20 | } 21 | // scss-docs-end color-mode-mixin 22 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_color-scheme.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start mixin-color-scheme 2 | @mixin color-scheme($name) { 3 | @media (prefers-color-scheme: #{$name}) { 4 | @content; 5 | } 6 | } 7 | // scss-docs-end mixin-color-scheme 8 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_container.scss: -------------------------------------------------------------------------------- 1 | // Container mixins 2 | 3 | @mixin make-container($gutter: $container-padding-x) { 4 | --#{$prefix}gutter-x: #{$gutter}; 5 | --#{$prefix}gutter-y: 0; 6 | width: 100%; 7 | padding-right: calc( 8 | var(--#{$prefix}gutter-x) * 0.5 9 | ); // stylelint-disable-line function-disallowed-list 10 | padding-left: calc( 11 | var(--#{$prefix}gutter-x) * 0.5 12 | ); // stylelint-disable-line function-disallowed-list 13 | margin-right: auto; 14 | margin-left: auto; 15 | } 16 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Deprecate mixin 2 | // 3 | // This mixin can be used to deprecate mixins or functions. 4 | // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to 5 | // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) 6 | @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { 7 | @if ($enable-deprecation-messages != false and $ignore-warning != true) { 8 | @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_gradients.scss: -------------------------------------------------------------------------------- 1 | // Gradients 2 | 3 | // scss-docs-start gradient-bg-mixin 4 | @mixin gradient-bg($color: null) { 5 | background-color: $color; 6 | 7 | @if $enable-gradients { 8 | background-image: var(--#{$prefix}gradient); 9 | } 10 | } 11 | // scss-docs-end gradient-bg-mixin 12 | 13 | // scss-docs-start gradient-mixins 14 | // Horizontal gradient, from left to right 15 | // 16 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 17 | @mixin gradient-x( 18 | $start-color: $gray-700, 19 | $end-color: $gray-800, 20 | $start-percent: 0%, 21 | $end-percent: 100% 22 | ) { 23 | background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); 24 | } 25 | 26 | // Vertical gradient, from top to bottom 27 | // 28 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 29 | @mixin gradient-y( 30 | $start-color: $gray-700, 31 | $end-color: $gray-800, 32 | $start-percent: null, 33 | $end-percent: null 34 | ) { 35 | background-image: linear-gradient( 36 | to bottom, 37 | $start-color $start-percent, 38 | $end-color $end-percent 39 | ); 40 | } 41 | 42 | @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { 43 | background-image: linear-gradient($deg, $start-color, $end-color); 44 | } 45 | 46 | @mixin gradient-x-three-colors( 47 | $start-color: $blue, 48 | $mid-color: $purple, 49 | $color-stop: 50%, 50 | $end-color: $red 51 | ) { 52 | background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); 53 | } 54 | 55 | @mixin gradient-y-three-colors( 56 | $start-color: $blue, 57 | $mid-color: $purple, 58 | $color-stop: 50%, 59 | $end-color: $red 60 | ) { 61 | background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); 62 | } 63 | 64 | @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { 65 | background-image: radial-gradient(circle, $inner-color, $outer-color); 66 | } 67 | 68 | @mixin gradient-striped($color: rgba($white, 0.15), $angle: 45deg) { 69 | background-image: linear-gradient( 70 | $angle, 71 | $color 25%, 72 | transparent 25%, 73 | transparent 50%, 74 | $color 50%, 75 | $color 75%, 76 | transparent 75%, 77 | transparent 78 | ); 79 | } 80 | // scss-docs-end gradient-mixins 81 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | // Responsive image 6 | // 7 | // Keep images from scaling beyond the width of their parents. 8 | 9 | @mixin img-fluid { 10 | // Part 1: Set a maximum relative to the parent 11 | max-width: 100%; 12 | // Part 2: Override the height to auto, otherwise images will be stretched 13 | // when setting a width and height attribute on the img element. 14 | height: auto; 15 | } 16 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | @include deprecate('`list-group-item-variant()`', 'v5.3.0', 'v6.0.0'); 2 | 3 | // List Groups 4 | 5 | // scss-docs-start list-group-mixin 6 | @mixin list-group-item-variant($state, $background, $color) { 7 | .list-group-item-#{$state} { 8 | color: $color; 9 | background-color: $background; 10 | 11 | &.list-group-item-action { 12 | &:hover, 13 | &:focus { 14 | color: $color; 15 | background-color: shade-color($background, 10%); 16 | } 17 | 18 | &.active { 19 | color: $white; 20 | background-color: $color; 21 | border-color: $color; 22 | } 23 | } 24 | } 25 | } 26 | // scss-docs-end list-group-mixin 27 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_lists.scss: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | // Unstyled keeps list items block level, just removes default browser padding and list-style 4 | @mixin list-unstyled { 5 | padding-left: 0; 6 | list-style: none; 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | // scss-docs-start pagination-mixin 4 | @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { 5 | --#{$prefix}pagination-padding-x: #{$padding-x}; 6 | --#{$prefix}pagination-padding-y: #{$padding-y}; 7 | @include rfs($font-size, --#{$prefix}pagination-font-size); 8 | --#{$prefix}pagination-border-radius: #{$border-radius}; 9 | } 10 | // scss-docs-end pagination-mixin 11 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-text { 2 | font-family: $font-family-base; 3 | // We deliberately do NOT reset font-size or overflow-wrap / word-wrap. 4 | font-style: normal; 5 | font-weight: $font-weight-normal; 6 | line-height: $line-height-base; 7 | text-align: left; // Fallback for where `start` is not supported 8 | text-align: start; 9 | text-decoration: none; 10 | text-shadow: none; 11 | text-transform: none; 12 | letter-spacing: normal; 13 | word-break: normal; 14 | white-space: normal; 15 | word-spacing: normal; 16 | line-break: auto; 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 5 | resize: $direction; // Options: horizontal, vertical, both 6 | } 7 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_table-variants.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start table-variant 2 | @mixin table-variant($state, $background) { 3 | .table-#{$state} { 4 | $color: color-contrast(opaque($body-bg, $background)); 5 | $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); 6 | $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); 7 | $active-bg: mix($color, $background, percentage($table-active-bg-factor)); 8 | $table-border-color: mix($color, $background, percentage($table-border-factor)); 9 | 10 | --#{$prefix}table-color: #{$color}; 11 | --#{$prefix}table-bg: #{$background}; 12 | --#{$prefix}table-border-color: #{$table-border-color}; 13 | --#{$prefix}table-striped-bg: #{$striped-bg}; 14 | --#{$prefix}table-striped-color: #{color-contrast($striped-bg)}; 15 | --#{$prefix}table-active-bg: #{$active-bg}; 16 | --#{$prefix}table-active-color: #{color-contrast($active-bg)}; 17 | --#{$prefix}table-hover-bg: #{$hover-bg}; 18 | --#{$prefix}table-hover-color: #{color-contrast($hover-bg)}; 19 | 20 | color: var(--#{$prefix}table-color); 21 | border-color: var(--#{$prefix}table-border-color); 22 | } 23 | } 24 | // scss-docs-end table-variant 25 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_text-truncate.scss: -------------------------------------------------------------------------------- 1 | // Text truncate 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-truncate() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_transition.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | @mixin transition($transition...) { 3 | @if length($transition) == 0 { 4 | $transition: $transition-base; 5 | } 6 | 7 | @if length($transition) > 1 { 8 | @each $value in $transition { 9 | @if $value == null or $value == none { 10 | @warn "The keyword 'none' or 'null' must be used as a single argument."; 11 | } 12 | } 13 | } 14 | 15 | @if $enable-transitions { 16 | @if nth($transition, 1) != null { 17 | transition: $transition; 18 | } 19 | 20 | @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none { 21 | @media (prefers-reduced-motion: reduce) { 22 | transition: none; 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/mixins/_visually-hidden.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Hide content visually while keeping it accessible to assistive technologies 4 | // 5 | // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ 6 | // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/ 7 | 8 | @mixin visually-hidden() { 9 | width: 1px !important; 10 | height: 1px !important; 11 | padding: 0 !important; 12 | margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686 13 | overflow: hidden !important; 14 | clip: rect(0, 0, 0, 0) !important; 15 | white-space: nowrap !important; 16 | border: 0 !important; 17 | 18 | // Fix for positioned table caption that could become anonymous cells 19 | &:not(caption) { 20 | position: absolute !important; 21 | } 22 | } 23 | 24 | // Use to only display content when it's focused, or one of its child elements is focused 25 | // (i.e. when focus is within the element/container that the class was applied to) 26 | // 27 | // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 28 | 29 | @mixin visually-hidden-focusable() { 30 | &:not(:focus):not(:focus-within) { 31 | @include visually-hidden(); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/scss/bootstrap-rtl-fix/utilities/_api.scss: -------------------------------------------------------------------------------- 1 | // Loop over each breakpoint 2 | @each $breakpoint in map-keys($grid-breakpoints) { 3 | // Generate media query if needed 4 | @include media-breakpoint-up($breakpoint) { 5 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 6 | 7 | // Loop over each utility property 8 | @each $key, $utility in $utilities { 9 | // The utility can be disabled with `false`, thus check if the utility is a map first 10 | // Only proceed if responsive media queries are enabled or if it's the base media query 11 | @if type-of($utility) == 'map' and (map-get($utility, responsive) or $infix == '') { 12 | @include generate-utility($utility, $infix); 13 | } 14 | } 15 | } 16 | } 17 | 18 | // RFS rescaling 19 | @media (min-width: $rfs-mq-value) { 20 | @each $breakpoint in map-keys($grid-breakpoints) { 21 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 22 | 23 | @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) { 24 | // Loop over each utility property 25 | @each $key, $utility in $utilities { 26 | // The utility can be disabled with `false`, thus check if the utility is a map first 27 | // Only proceed if responsive media queries are enabled or if it's the base media query 28 | @if type-of($utility) == 29 | 'map' and 30 | map-get($utility, rfs) and 31 | (map-get($utility, responsive) or $infix == '') 32 | { 33 | @include generate-utility($utility, $infix, true); 34 | } 35 | } 36 | } 37 | } 38 | } 39 | 40 | // Print utilities 41 | @media print { 42 | @each $key, $utility in $utilities { 43 | // The utility can be disabled with `false`, thus check if the utility is a map first 44 | // Then check if the utility needs print styles 45 | @if type-of($utility) == 'map' and map-get($utility, print) == true { 46 | @include generate-utility($utility, '-print'); 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | // scss-docs-start alert-css-vars 7 | --#{$prefix}alert-bg: transparent; 8 | --#{$prefix}alert-padding-x: #{$alert-padding-x}; 9 | --#{$prefix}alert-padding-y: #{$alert-padding-y}; 10 | --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; 11 | --#{$prefix}alert-color: inherit; 12 | --#{$prefix}alert-border-color: transparent; 13 | --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); 14 | --#{$prefix}alert-border-radius: #{$alert-border-radius}; 15 | --#{$prefix}alert-link-color: inherit; 16 | // scss-docs-end alert-css-vars 17 | 18 | position: relative; 19 | padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); 20 | margin-bottom: var(--#{$prefix}alert-margin-bottom); 21 | color: var(--#{$prefix}alert-color); 22 | background-color: var(--#{$prefix}alert-bg); 23 | border: var(--#{$prefix}alert-border); 24 | @include border-radius(var(--#{$prefix}alert-border-radius)); 25 | } 26 | 27 | // Headings for larger alerts 28 | .alert-heading { 29 | // Specified to prevent conflicts of changing $headings-color 30 | color: inherit; 31 | } 32 | 33 | // Provide class for links that match alerts 34 | .alert-link { 35 | font-weight: $alert-link-font-weight; 36 | color: var(--#{$prefix}alert-link-color); 37 | } 38 | 39 | // Dismissible alerts 40 | // 41 | // Expand the right padding and account for the close button's positioning. 42 | 43 | .alert-dismissible { 44 | padding-right: $alert-dismissible-padding-r; 45 | 46 | // Adjust close link position 47 | .btn-close { 48 | position: absolute; 49 | top: 0; 50 | right: 0; 51 | z-index: $stretched-link-z-index + 1; 52 | padding: $alert-padding-y * 1.25 $alert-padding-x; 53 | } 54 | } 55 | 56 | // scss-docs-start alert-modifiers 57 | // Generate contextual modifier classes for colorizing the alert 58 | @each $state in map-keys($theme-colors) { 59 | .alert-#{$state} { 60 | --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); 61 | --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); 62 | --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); 63 | --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); 64 | } 65 | } 66 | // scss-docs-end alert-modifiers 67 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | // scss-docs-start badge-css-vars 8 | --#{$prefix}badge-padding-x: #{$badge-padding-x}; 9 | --#{$prefix}badge-padding-y: #{$badge-padding-y}; 10 | @include rfs($badge-font-size, --#{$prefix}badge-font-size); 11 | --#{$prefix}badge-font-weight: #{$badge-font-weight}; 12 | --#{$prefix}badge-color: #{$badge-color}; 13 | --#{$prefix}badge-border-radius: #{$badge-border-radius}; 14 | // scss-docs-end badge-css-vars 15 | 16 | display: inline-block; 17 | padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); 18 | @include font-size(var(--#{$prefix}badge-font-size)); 19 | font-weight: var(--#{$prefix}badge-font-weight); 20 | line-height: 1; 21 | color: var(--#{$prefix}badge-color); 22 | text-align: center; 23 | white-space: nowrap; 24 | vertical-align: baseline; 25 | @include border-radius(var(--#{$prefix}badge-border-radius)); 26 | @include gradient-bg(); 27 | 28 | // Empty badges collapse automatically 29 | &:empty { 30 | display: none; 31 | } 32 | } 33 | 34 | // Quick fix for badges in buttons 35 | .btn .badge { 36 | position: relative; 37 | top: -1px; 38 | } 39 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | // scss-docs-start breadcrumb-css-vars 3 | --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; 4 | --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; 5 | --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; 6 | @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); 7 | --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; 8 | --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; 9 | --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; 10 | --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; 11 | --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; 12 | // scss-docs-end breadcrumb-css-vars 13 | 14 | display: flex; 15 | flex-wrap: wrap; 16 | padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); 17 | margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); 18 | @include font-size(var(--#{$prefix}breadcrumb-font-size)); 19 | list-style: none; 20 | background-color: var(--#{$prefix}breadcrumb-bg); 21 | @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); 22 | } 23 | 24 | .breadcrumb-item { 25 | // The separator between breadcrumbs (by default, a forward-slash: "/") 26 | + .breadcrumb-item { 27 | padding-left: var(--#{$prefix}breadcrumb-item-padding-x); 28 | 29 | &::before { 30 | float: left; // Suppress inline spacings and underlining of the separator 31 | padding-right: var(--#{$prefix}breadcrumb-item-padding-x); 32 | color: var(--#{$prefix}breadcrumb-divider-color); 33 | content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{'/* rtl:'} var( 34 | --#{$prefix}breadcrumb-divider, 35 | escape-svg($breadcrumb-divider-flipped) 36 | ) #{'*/'}; 37 | } 38 | } 39 | 40 | &.active { 41 | color: var(--#{$prefix}breadcrumb-item-active-color); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_close.scss: -------------------------------------------------------------------------------- 1 | // Transparent background and border properties included for button version. 2 | // iOS requires the button element instead of an anchor tag. 3 | // If you want the anchor version, it requires `href="#"`. 4 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 5 | 6 | .btn-close { 7 | // scss-docs-start close-css-vars 8 | --#{$prefix}btn-close-color: #{$btn-close-color}; 9 | --#{$prefix}btn-close-bg: #{escape-svg($btn-close-bg)}; 10 | --#{$prefix}btn-close-opacity: #{$btn-close-opacity}; 11 | --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity}; 12 | --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; 13 | --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; 14 | --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; 15 | --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter}; 16 | // scss-docs-end close-css-vars 17 | 18 | box-sizing: content-box; 19 | width: $btn-close-width; 20 | height: $btn-close-height; 21 | padding: $btn-close-padding-y $btn-close-padding-x; 22 | color: var(--#{$prefix}btn-close-color); 23 | background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements 24 | border: 0; // for button elements 25 | @include border-radius(); 26 | opacity: var(--#{$prefix}btn-close-opacity); 27 | 28 | // Override 's hover style 29 | &:hover { 30 | color: var(--#{$prefix}btn-close-color); 31 | text-decoration: none; 32 | opacity: var(--#{$prefix}btn-close-hover-opacity); 33 | } 34 | 35 | &:focus { 36 | outline: 0; 37 | box-shadow: var(--#{$prefix}btn-close-focus-shadow); 38 | opacity: var(--#{$prefix}btn-close-focus-opacity); 39 | } 40 | 41 | &:disabled, 42 | &.disabled { 43 | pointer-events: none; 44 | user-select: none; 45 | opacity: var(--#{$prefix}btn-close-disabled-opacity); 46 | } 47 | } 48 | 49 | @mixin btn-close-white() { 50 | filter: var(--#{$prefix}btn-close-white-filter); 51 | } 52 | 53 | .btn-close-white { 54 | @include btn-close-white(); 55 | } 56 | 57 | @if $enable-dark-mode { 58 | @include color-mode(dark) { 59 | .btn-close { 60 | @include btn-close-white(); 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_containers.scss: -------------------------------------------------------------------------------- 1 | // Container widths 2 | // 3 | // Set the container width, and override it for fixed navbars in media queries. 4 | 5 | @if $enable-container-classes { 6 | // Single container class with breakpoint max-widths 7 | .container, 8 | // 100% wide container at all breakpoints 9 | .container-fluid { 10 | @include make-container(); 11 | } 12 | 13 | // Responsive containers that are 100% wide until a breakpoint 14 | @each $breakpoint, $container-max-width in $container-max-widths { 15 | .container-#{$breakpoint} { 16 | @extend .container-fluid; 17 | } 18 | 19 | @include media-breakpoint-up($breakpoint, $grid-breakpoints) { 20 | %responsive-container-#{$breakpoint} { 21 | max-width: $container-max-width; 22 | } 23 | 24 | // Extend each breakpoint which is smaller or equal to the current breakpoint 25 | $extend-breakpoint: true; 26 | 27 | @each $name, $width in $grid-breakpoints { 28 | @if ($extend-breakpoint) { 29 | .container#{breakpoint-infix($name, $grid-breakpoints)} { 30 | @extend %responsive-container-#{$breakpoint}; 31 | } 32 | 33 | // Once the current breakpoint is reached, stop extending 34 | @if ($breakpoint == $name) { 35 | $extend-breakpoint: false; 36 | } 37 | } 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_forms.scss: -------------------------------------------------------------------------------- 1 | @import 'forms/labels'; 2 | @import 'forms/form-text'; 3 | @import 'forms/form-control'; 4 | @import 'forms/form-select'; 5 | @import 'forms/form-check'; 6 | @import 'forms/form-range'; 7 | @import 'forms/floating-labels'; 8 | @import 'forms/input-group'; 9 | @import 'forms/validation'; 10 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_grid.scss: -------------------------------------------------------------------------------- 1 | // Row 2 | // 3 | // Rows contain your columns. 4 | 5 | :root { 6 | @each $name, $value in $grid-breakpoints { 7 | --#{$prefix}breakpoint-#{$name}: #{$value}; 8 | } 9 | } 10 | 11 | @if $enable-grid-classes { 12 | .row { 13 | @include make-row(); 14 | 15 | > * { 16 | @include make-col-ready(); 17 | } 18 | } 19 | } 20 | 21 | @if $enable-cssgrid { 22 | .grid { 23 | display: grid; 24 | grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr); 25 | grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr); 26 | gap: var(--#{$prefix}gap, #{$grid-gutter-width}); 27 | 28 | @include make-cssgrid(); 29 | } 30 | } 31 | 32 | // Columns 33 | // 34 | // Common styles for small and large grid columns 35 | 36 | @if $enable-grid-classes { 37 | @include make-grid-columns(); 38 | } 39 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_helpers.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers/clearfix'; 2 | @import 'helpers/color-bg'; 3 | @import 'helpers/colored-links'; 4 | @import 'helpers/focus-ring'; 5 | @import 'helpers/icon-link'; 6 | @import 'helpers/ratio'; 7 | @import 'helpers/position'; 8 | @import 'helpers/stacks'; 9 | @import 'helpers/visually-hidden'; 10 | @import 'helpers/stretched-link'; 11 | @import 'helpers/text-truncation'; 12 | @import 'helpers/vr'; 13 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_images.scss: -------------------------------------------------------------------------------- 1 | // Responsive images (ensure images don't scale beyond their parents) 2 | // 3 | // This is purposefully opt-in via an explicit class rather than being the default for all ``s. 4 | // We previously tried the "images are responsive by default" approach in Bootstrap v2, 5 | // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps) 6 | // which weren't expecting the images within themselves to be involuntarily resized. 7 | // See also https://github.com/twbs/bootstrap/issues/18178 8 | .img-fluid { 9 | @include img-fluid(); 10 | } 11 | 12 | // Image thumbnails 13 | .img-thumbnail { 14 | padding: $thumbnail-padding; 15 | background-color: $thumbnail-bg; 16 | border: $thumbnail-border-width solid $thumbnail-border-color; 17 | @include border-radius($thumbnail-border-radius); 18 | @include box-shadow($thumbnail-box-shadow); 19 | 20 | // Keep them at most 100% wide 21 | @include img-fluid(); 22 | } 23 | 24 | // 25 | // Figures 26 | // 27 | 28 | .figure { 29 | // Ensures the caption's text aligns with the image. 30 | display: inline-block; 31 | } 32 | 33 | .figure-img { 34 | margin-bottom: $spacer * 0.5; 35 | line-height: 1; 36 | } 37 | 38 | .figure-caption { 39 | @include font-size($figure-caption-font-size); 40 | color: $figure-caption-color; 41 | } 42 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Toggles 2 | // 3 | // Used in conjunction with global variables to enable certain theme features. 4 | 5 | // Vendor 6 | @import 'vendor/rfs'; 7 | 8 | // Deprecate 9 | @import 'mixins/deprecate'; 10 | 11 | // Helpers 12 | @import 'mixins/breakpoints'; 13 | @import 'mixins/color-mode'; 14 | @import 'mixins/color-scheme'; 15 | @import 'mixins/image'; 16 | @import 'mixins/resize'; 17 | @import 'mixins/visually-hidden'; 18 | @import 'mixins/reset-text'; 19 | @import 'mixins/text-truncate'; 20 | 21 | // Utilities 22 | @import 'mixins/utilities'; 23 | 24 | // Components 25 | @import 'mixins/backdrop'; 26 | @import 'mixins/buttons'; 27 | @import 'mixins/caret'; 28 | @import 'mixins/pagination'; 29 | @import 'mixins/lists'; 30 | @import 'mixins/forms'; 31 | @import 'mixins/table-variants'; 32 | 33 | // Skins 34 | @import 'mixins/border-radius'; 35 | @import 'mixins/box-shadow'; 36 | @import 'mixins/gradients'; 37 | @import 'mixins/transition'; 38 | 39 | // Layout 40 | @import 'mixins/clearfix'; 41 | @import 'mixins/container'; 42 | @import 'mixins/grid'; 43 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_placeholders.scss: -------------------------------------------------------------------------------- 1 | .placeholder { 2 | display: inline-block; 3 | min-height: 1em; 4 | vertical-align: middle; 5 | cursor: wait; 6 | background-color: currentcolor; 7 | opacity: $placeholder-opacity-max; 8 | 9 | &.btn::before { 10 | display: inline-block; 11 | content: ''; 12 | } 13 | } 14 | 15 | // Sizing 16 | .placeholder-xs { 17 | min-height: 0.6em; 18 | } 19 | 20 | .placeholder-sm { 21 | min-height: 0.8em; 22 | } 23 | 24 | .placeholder-lg { 25 | min-height: 1.2em; 26 | } 27 | 28 | // Animation 29 | .placeholder-glow { 30 | .placeholder { 31 | animation: placeholder-glow 2s ease-in-out infinite; 32 | } 33 | } 34 | 35 | @keyframes placeholder-glow { 36 | 50% { 37 | opacity: $placeholder-opacity-min; 38 | } 39 | } 40 | 41 | .placeholder-wave { 42 | mask-image: linear-gradient( 43 | 130deg, 44 | $black 55%, 45 | rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, 46 | $black 95% 47 | ); 48 | mask-size: 200% 100%; 49 | animation: placeholder-wave 2s linear infinite; 50 | } 51 | 52 | @keyframes placeholder-wave { 53 | 100% { 54 | mask-position: -200% 0%; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_progress.scss: -------------------------------------------------------------------------------- 1 | // Disable animation if transitions are disabled 2 | 3 | // scss-docs-start progress-keyframes 4 | @if $enable-transitions { 5 | @keyframes progress-bar-stripes { 6 | 0% { 7 | background-position-x: $progress-height; 8 | } 9 | } 10 | } 11 | // scss-docs-end progress-keyframes 12 | 13 | .progress, 14 | .progress-stacked { 15 | // scss-docs-start progress-css-vars 16 | --#{$prefix}progress-height: #{$progress-height}; 17 | @include rfs($progress-font-size, --#{$prefix}progress-font-size); 18 | --#{$prefix}progress-bg: #{$progress-bg}; 19 | --#{$prefix}progress-border-radius: #{$progress-border-radius}; 20 | --#{$prefix}progress-box-shadow: #{$progress-box-shadow}; 21 | --#{$prefix}progress-bar-color: #{$progress-bar-color}; 22 | --#{$prefix}progress-bar-bg: #{$progress-bar-bg}; 23 | --#{$prefix}progress-bar-transition: #{$progress-bar-transition}; 24 | // scss-docs-end progress-css-vars 25 | 26 | display: flex; 27 | height: var(--#{$prefix}progress-height); 28 | overflow: hidden; // force rounded corners by cropping it 29 | @include font-size(var(--#{$prefix}progress-font-size)); 30 | background-color: var(--#{$prefix}progress-bg); 31 | @include border-radius(var(--#{$prefix}progress-border-radius)); 32 | @include box-shadow(var(--#{$prefix}progress-box-shadow)); 33 | } 34 | 35 | .progress-bar { 36 | display: flex; 37 | flex-direction: column; 38 | justify-content: center; 39 | overflow: hidden; 40 | color: var(--#{$prefix}progress-bar-color); 41 | text-align: center; 42 | white-space: nowrap; 43 | background-color: var(--#{$prefix}progress-bar-bg); 44 | @include transition(var(--#{$prefix}progress-bar-transition)); 45 | } 46 | 47 | .progress-bar-striped { 48 | @include gradient-striped(); 49 | background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height); 50 | } 51 | 52 | .progress-stacked > .progress { 53 | overflow: visible; 54 | } 55 | 56 | .progress-stacked > .progress > .progress-bar { 57 | width: 100%; 58 | } 59 | 60 | @if $enable-transitions { 61 | .progress-bar-animated { 62 | animation: $progress-bar-animation-timing progress-bar-stripes; 63 | 64 | @if $enable-reduced-motion { 65 | @media (prefers-reduced-motion: reduce) { 66 | animation: none; 67 | } 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_transitions.scss: -------------------------------------------------------------------------------- 1 | .fade { 2 | @include transition($transition-fade); 3 | 4 | &:not(.show) { 5 | opacity: 0; 6 | } 7 | } 8 | 9 | // scss-docs-start collapse-classes 10 | .collapse { 11 | &:not(.show) { 12 | display: none; 13 | } 14 | } 15 | 16 | .collapsing { 17 | height: 0; 18 | overflow: hidden; 19 | @include transition($transition-collapse); 20 | 21 | &.collapse-horizontal { 22 | width: 0; 23 | height: auto; 24 | @include transition($transition-collapse-width); 25 | } 26 | } 27 | // scss-docs-end collapse-classes 28 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_type.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Headings 3 | // 4 | .h1 { 5 | @extend h1; 6 | } 7 | 8 | .h2 { 9 | @extend h2; 10 | } 11 | 12 | .h3 { 13 | @extend h3; 14 | } 15 | 16 | .h4 { 17 | @extend h4; 18 | } 19 | 20 | .h5 { 21 | @extend h5; 22 | } 23 | 24 | .h6 { 25 | @extend h6; 26 | } 27 | 28 | .lead { 29 | @include font-size($lead-font-size); 30 | font-weight: $lead-font-weight; 31 | } 32 | 33 | // Type display classes 34 | @each $display, $font-size in $display-font-sizes { 35 | .display-#{$display} { 36 | @include font-size($font-size); 37 | font-family: $display-font-family; 38 | font-style: $display-font-style; 39 | font-weight: $display-font-weight; 40 | line-height: $display-line-height; 41 | } 42 | } 43 | 44 | // 45 | // Emphasis 46 | // 47 | .small { 48 | @extend small; 49 | } 50 | 51 | .mark { 52 | @extend mark; 53 | } 54 | 55 | // 56 | // Lists 57 | // 58 | 59 | .list-unstyled { 60 | @include list-unstyled(); 61 | } 62 | 63 | // Inline turns list items into inline-block 64 | .list-inline { 65 | @include list-unstyled(); 66 | } 67 | .list-inline-item { 68 | display: inline-block; 69 | 70 | &:not(:last-child) { 71 | margin-right: $list-inline-padding; 72 | } 73 | } 74 | 75 | // 76 | // Misc 77 | // 78 | 79 | // Builds on `abbr` 80 | .initialism { 81 | @include font-size($initialism-font-size); 82 | text-transform: uppercase; 83 | } 84 | 85 | // Blockquotes 86 | .blockquote { 87 | margin-bottom: $blockquote-margin-y; 88 | @include font-size($blockquote-font-size); 89 | 90 | > :last-child { 91 | margin-bottom: 0; 92 | } 93 | } 94 | 95 | .blockquote-footer { 96 | margin-top: -$blockquote-margin-y; 97 | margin-bottom: $blockquote-margin-y; 98 | @include font-size($blockquote-footer-font-size); 99 | color: $blockquote-footer-color; 100 | 101 | &::before { 102 | content: '\2014\00A0'; // em dash, nbsp 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /src/scss/bootstrap/bootstrap-grid.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins/banner'; 2 | @include bsBanner(Grid); 3 | 4 | $include-column-box-sizing: true !default; 5 | 6 | @import 'functions'; 7 | @import 'variables'; 8 | @import 'variables-dark'; 9 | @import 'maps'; 10 | 11 | @import 'mixins/breakpoints'; 12 | @import 'mixins/container'; 13 | @import 'mixins/grid'; 14 | @import 'mixins/utilities'; 15 | 16 | @import 'vendor/rfs'; 17 | 18 | @import 'containers'; 19 | @import 'grid'; 20 | 21 | @import 'utilities'; 22 | // Only use the utilities we need 23 | // stylelint-disable-next-line scss/dollar-variable-default 24 | $utilities: map-get-multiple( 25 | $utilities, 26 | ( 27 | 'display', 28 | 'order', 29 | 'flex', 30 | 'flex-direction', 31 | 'flex-grow', 32 | 'flex-shrink', 33 | 'flex-wrap', 34 | 'justify-content', 35 | 'align-items', 36 | 'align-content', 37 | 'align-self', 38 | 'margin', 39 | 'margin-x', 40 | 'margin-y', 41 | 'margin-top', 42 | 'margin-end', 43 | 'margin-bottom', 44 | 'margin-start', 45 | 'negative-margin', 46 | 'negative-margin-x', 47 | 'negative-margin-y', 48 | 'negative-margin-top', 49 | 'negative-margin-end', 50 | 'negative-margin-bottom', 51 | 'negative-margin-start', 52 | 'padding', 53 | 'padding-x', 54 | 'padding-y', 55 | 'padding-top', 56 | 'padding-end', 57 | 'padding-bottom', 58 | 'padding-start' 59 | ) 60 | ); 61 | 62 | @import 'utilities/api'; 63 | -------------------------------------------------------------------------------- /src/scss/bootstrap/bootstrap-reboot.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins/banner'; 2 | @include bsBanner(Reboot); 3 | 4 | @import 'functions'; 5 | @import 'variables'; 6 | @import 'variables-dark'; 7 | @import 'maps'; 8 | @import 'mixins'; 9 | @import 'root'; 10 | @import 'reboot'; 11 | -------------------------------------------------------------------------------- /src/scss/bootstrap/bootstrap-utilities.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins/banner'; 2 | @include bsBanner(Utilities); 3 | 4 | // Configuration 5 | @import 'functions'; 6 | @import 'variables'; 7 | @import 'variables-dark'; 8 | @import 'maps'; 9 | @import 'mixins'; 10 | @import 'utilities'; 11 | 12 | // Layout & components 13 | @import 'root'; 14 | 15 | // Helpers 16 | @import 'helpers'; 17 | 18 | // Utilities 19 | @import 'utilities/api'; 20 | -------------------------------------------------------------------------------- /src/scss/bootstrap/bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins/banner'; 2 | @include bsBanner(''); 3 | 4 | // scss-docs-start import-stack 5 | // Configuration 6 | @import 'functions'; 7 | @import 'variables'; 8 | @import 'variables-dark'; 9 | @import 'maps'; 10 | @import 'mixins'; 11 | @import 'utilities'; 12 | 13 | // Layout & components 14 | @import 'root'; 15 | @import 'reboot'; 16 | @import 'type'; 17 | @import 'images'; 18 | @import 'containers'; 19 | @import 'grid'; 20 | @import 'tables'; 21 | @import 'forms'; 22 | @import 'buttons'; 23 | @import 'transitions'; 24 | @import 'dropdown'; 25 | @import 'button-group'; 26 | @import 'nav'; 27 | @import 'navbar'; 28 | @import 'card'; 29 | @import 'accordion'; 30 | @import 'breadcrumb'; 31 | @import 'pagination'; 32 | @import 'badge'; 33 | @import 'alert'; 34 | @import 'progress'; 35 | @import 'list-group'; 36 | @import 'close'; 37 | @import 'toasts'; 38 | @import 'modal'; 39 | @import 'tooltip'; 40 | @import 'popover'; 41 | @import 'carousel'; 42 | @import 'spinners'; 43 | @import 'offcanvas'; 44 | @import 'placeholders'; 45 | 46 | // Helpers 47 | @import 'helpers'; 48 | 49 | // Utilities 50 | @import 'utilities/api'; 51 | // scss-docs-end import-stack 52 | -------------------------------------------------------------------------------- /src/scss/bootstrap/forms/_form-text.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Form text 3 | // 4 | 5 | .form-text { 6 | margin-top: $form-text-margin-top; 7 | @include font-size($form-text-font-size); 8 | font-style: $form-text-font-style; 9 | font-weight: $form-text-font-weight; 10 | color: $form-text-color; 11 | } 12 | -------------------------------------------------------------------------------- /src/scss/bootstrap/forms/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // 4 | 5 | .form-label { 6 | margin-bottom: $form-label-margin-bottom; 7 | @include font-size($form-label-font-size); 8 | font-style: $form-label-font-style; 9 | font-weight: $form-label-font-weight; 10 | color: $form-label-color; 11 | } 12 | 13 | // For use with horizontal and inline forms, when you need the label (or legend) 14 | // text to align with the form controls. 15 | .col-form-label { 16 | padding-top: add($input-padding-y, $input-border-width); 17 | padding-bottom: add($input-padding-y, $input-border-width); 18 | margin-bottom: 0; // Override the `` default 19 | @include font-size(inherit); // Override the `` default 20 | font-style: $form-label-font-style; 21 | font-weight: $form-label-font-weight; 22 | line-height: $input-line-height; 23 | color: $form-label-color; 24 | } 25 | 26 | .col-form-label-lg { 27 | padding-top: add($input-padding-y-lg, $input-border-width); 28 | padding-bottom: add($input-padding-y-lg, $input-border-width); 29 | @include font-size($input-font-size-lg); 30 | } 31 | 32 | .col-form-label-sm { 33 | padding-top: add($input-padding-y-sm, $input-border-width); 34 | padding-bottom: add($input-padding-y-sm, $input-border-width); 35 | @include font-size($input-font-size-sm); 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/bootstrap/forms/_validation.scss: -------------------------------------------------------------------------------- 1 | // Form validation 2 | // 3 | // Provide feedback to users when form field values are valid or invalid. Works 4 | // primarily for client-side validation via scoped `:invalid` and `:valid` 5 | // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for 6 | // server-side validation. 7 | 8 | // scss-docs-start form-validation-states-loop 9 | @each $state, $data in $form-validation-states { 10 | @include form-validation-state($state, $data...); 11 | } 12 | // scss-docs-end form-validation-states-loop 13 | -------------------------------------------------------------------------------- /src/scss/bootstrap/helpers/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix(); 3 | } 4 | -------------------------------------------------------------------------------- /src/scss/bootstrap/helpers/_color-bg.scss: -------------------------------------------------------------------------------- 1 | // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 2 | @each $color, $value in $theme-colors { 3 | .text-bg-#{$color} { 4 | color: color-contrast($value) if($enable-important-utilities, !important, null); 5 | background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) 6 | if($enable-important-utilities, !important, null); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/bootstrap/helpers/_colored-links.scss: -------------------------------------------------------------------------------- 1 | // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 2 | @each $color, $value in $theme-colors { 3 | .link-#{$color} { 4 | color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) 5 | if($enable-important-utilities, !important, null); 6 | text-decoration-color: RGBA( 7 | var(--#{$prefix}#{$color}-rgb), 8 | var(--#{$prefix}link-underline-opacity, 1) 9 | ) 10 | if($enable-important-utilities, !important, null); 11 | 12 | @if $link-shade-percentage != 0 { 13 | &:hover, 14 | &:focus { 15 | $hover-color: if( 16 | color-contrast($value) == $color-contrast-light, 17 | shade-color($value, $link-shade-percentage), 18 | tint-color($value, $link-shade-percentage) 19 | ); 20 | color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) 21 | if($enable-important-utilities, !important, null); 22 | text-decoration-color: RGBA( 23 | to-rgb($hover-color), 24 | var(--#{$prefix}link-underline-opacity, 1) 25 | ) 26 | if($enable-important-utilities, !important, null); 27 | } 28 | } 29 | } 30 | } 31 | 32 | // One-off special link helper as a bridge until v6 33 | .link-body-emphasis { 34 | color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) 35 | if($enable-important-utilities, !important, null); 36 | text-decoration-color: RGBA( 37 | var(--#{$prefix}emphasis-color-rgb), 38 | var(--#{$prefix}link-underline-opacity, 1) 39 | ) 40 | if($enable-important-utilities, !important, null); 41 | 42 | @if $link-shade-percentage != 0 { 43 | &:hover, 44 | &:focus { 45 | color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 0.75)) 46 | if($enable-important-utilities, !important, null); 47 | text-decoration-color: RGBA( 48 | var(--#{$prefix}emphasis-color-rgb), 49 | var(--#{$prefix}link-underline-opacity, 0.75) 50 | ) 51 | if($enable-important-utilities, !important, null); 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/scss/bootstrap/helpers/_focus-ring.scss: -------------------------------------------------------------------------------- 1 | .focus-ring:focus { 2 | outline: 0; 3 | // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values 4 | box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) 5 | var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) 6 | var(--#{$prefix}focus-ring-color); 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/bootstrap/helpers/_icon-link.scss: -------------------------------------------------------------------------------- 1 | .icon-link { 2 | display: inline-flex; 3 | gap: $icon-link-gap; 4 | align-items: center; 5 | text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 0.5)); 6 | text-underline-offset: $icon-link-underline-offset; 7 | backface-visibility: hidden; 8 | 9 | > .bi { 10 | flex-shrink: 0; 11 | width: $icon-link-icon-size; 12 | height: $icon-link-icon-size; 13 | fill: currentcolor; 14 | @include transition($icon-link-icon-transition); 15 | } 16 | } 17 | 18 | .icon-link-hover { 19 | &:hover, 20 | &:focus-visible { 21 | > .bi { 22 | transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/scss/bootstrap/helpers/_position.scss: -------------------------------------------------------------------------------- 1 | // Shorthand 2 | 3 | .fixed-top { 4 | position: fixed; 5 | top: 0; 6 | right: 0; 7 | left: 0; 8 | z-index: $zindex-fixed; 9 | } 10 | 11 | .fixed-bottom { 12 | position: fixed; 13 | right: 0; 14 | bottom: 0; 15 | left: 0; 16 | z-index: $zindex-fixed; 17 | } 18 | 19 | // Responsive sticky top and bottom 20 | @each $breakpoint in map-keys($grid-breakpoints) { 21 | @include media-breakpoint-up($breakpoint) { 22 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 23 | 24 | .sticky#{$infix}-top { 25 | position: sticky; 26 | top: 0; 27 | z-index: $zindex-sticky; 28 | } 29 | 30 | .sticky#{$infix}-bottom { 31 | position: sticky; 32 | bottom: 0; 33 | z-index: $zindex-sticky; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/bootstrap/helpers/_ratio.scss: -------------------------------------------------------------------------------- 1 | // Credit: Nicolas Gallagher and SUIT CSS. 2 | 3 | .ratio { 4 | position: relative; 5 | width: 100%; 6 | 7 | &::before { 8 | display: block; 9 | padding-top: var(--#{$prefix}aspect-ratio); 10 | content: ''; 11 | } 12 | 13 | > * { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | width: 100%; 18 | height: 100%; 19 | } 20 | } 21 | 22 | @each $key, $ratio in $aspect-ratios { 23 | .ratio-#{$key} { 24 | --#{$prefix}aspect-ratio: #{$ratio}; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/bootstrap/helpers/_stacks.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start stacks 2 | .hstack { 3 | display: flex; 4 | flex-direction: row; 5 | align-items: center; 6 | align-self: stretch; 7 | } 8 | 9 | .vstack { 10 | display: flex; 11 | flex: 1 1 auto; 12 | flex-direction: column; 13 | align-self: stretch; 14 | } 15 | // scss-docs-end stacks 16 | -------------------------------------------------------------------------------- /src/scss/bootstrap/helpers/_stretched-link.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Stretched link 3 | // 4 | 5 | .stretched-link { 6 | &::#{$stretched-link-pseudo-element} { 7 | position: absolute; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | left: 0; 12 | z-index: $stretched-link-z-index; 13 | content: ""; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/scss/bootstrap/helpers/_text-truncation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Text truncation 3 | // 4 | 5 | .text-truncate { 6 | @include text-truncate(); 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/bootstrap/helpers/_visually-hidden.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Visually hidden 3 | // 4 | 5 | .visually-hidden, 6 | .visually-hidden-focusable:not(:focus):not(:focus-within) { 7 | @include visually-hidden(); 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/bootstrap/helpers/_vr.scss: -------------------------------------------------------------------------------- 1 | .vr { 2 | display: inline-block; 3 | align-self: stretch; 4 | width: $vr-border-width; 5 | min-height: 1em; 6 | background-color: currentcolor; 7 | opacity: $hr-opacity; 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @include deprecate('`alert-variant()`', 'v5.3.0', 'v6.0.0'); 2 | 3 | // scss-docs-start alert-variant-mixin 4 | @mixin alert-variant($background, $border, $color) { 5 | --#{$prefix}alert-color: #{$color}; 6 | --#{$prefix}alert-bg: #{$background}; 7 | --#{$prefix}alert-border-color: #{$border}; 8 | --#{$prefix}alert-link-color: #{shade-color($color, 20%)}; 9 | 10 | @if $enable-gradients { 11 | background-image: var(--#{$prefix}gradient); 12 | } 13 | 14 | .alert-link { 15 | color: var(--#{$prefix}alert-link-color); 16 | } 17 | } 18 | // scss-docs-end alert-variant-mixin 19 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_backdrop.scss: -------------------------------------------------------------------------------- 1 | // Shared between modals and offcanvases 2 | @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) { 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | z-index: $zindex; 7 | width: 100vw; 8 | height: 100vh; 9 | background-color: $backdrop-bg; 10 | 11 | // Fade for backdrop 12 | &.fade { 13 | opacity: 0; 14 | } 15 | &.show { 16 | opacity: $backdrop-opacity; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_banner.scss: -------------------------------------------------------------------------------- 1 | @mixin bsBanner($file) { 2 | /*! 3 | * Bootstrap #{$file} v5.3.2 (https://getbootstrap.com/) 4 | * Copyright 2011-2023 The Bootstrap Authors 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | // Single side border-radius 3 | 4 | // Helper function to replace negative values with 0 5 | @function valid-radius($radius) { 6 | $return: (); 7 | @each $value in $radius { 8 | @if type-of($value) == number { 9 | $return: append($return, max($value, 0)); 10 | } @else { 11 | $return: append($return, $value); 12 | } 13 | } 14 | @return $return; 15 | } 16 | 17 | // scss-docs-start border-radius-mixins 18 | @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { 19 | @if $enable-rounded { 20 | border-radius: valid-radius($radius); 21 | } @else if $fallback-border-radius != false { 22 | border-radius: $fallback-border-radius; 23 | } 24 | } 25 | 26 | @mixin border-top-radius($radius: $border-radius) { 27 | @if $enable-rounded { 28 | border-top-left-radius: valid-radius($radius); 29 | border-top-right-radius: valid-radius($radius); 30 | } 31 | } 32 | 33 | @mixin border-end-radius($radius: $border-radius) { 34 | @if $enable-rounded { 35 | border-top-right-radius: valid-radius($radius); 36 | border-bottom-right-radius: valid-radius($radius); 37 | } 38 | } 39 | 40 | @mixin border-bottom-radius($radius: $border-radius) { 41 | @if $enable-rounded { 42 | border-bottom-right-radius: valid-radius($radius); 43 | border-bottom-left-radius: valid-radius($radius); 44 | } 45 | } 46 | 47 | @mixin border-start-radius($radius: $border-radius) { 48 | @if $enable-rounded { 49 | border-top-left-radius: valid-radius($radius); 50 | border-bottom-left-radius: valid-radius($radius); 51 | } 52 | } 53 | 54 | @mixin border-top-start-radius($radius: $border-radius) { 55 | @if $enable-rounded { 56 | border-top-left-radius: valid-radius($radius); 57 | } 58 | } 59 | 60 | @mixin border-top-end-radius($radius: $border-radius) { 61 | @if $enable-rounded { 62 | border-top-right-radius: valid-radius($radius); 63 | } 64 | } 65 | 66 | @mixin border-bottom-end-radius($radius: $border-radius) { 67 | @if $enable-rounded { 68 | border-bottom-right-radius: valid-radius($radius); 69 | } 70 | } 71 | 72 | @mixin border-bottom-start-radius($radius: $border-radius) { 73 | @if $enable-rounded { 74 | border-bottom-left-radius: valid-radius($radius); 75 | } 76 | } 77 | // scss-docs-end border-radius-mixins 78 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | @if $enable-shadows { 3 | $result: (); 4 | 5 | @each $value in $shadow { 6 | @if $value != null { 7 | $result: append($result, $value, 'comma'); 8 | } 9 | @if $value == none and length($shadow) > 1 { 10 | @warn "The keyword 'none' must be used as a single argument."; 11 | } 12 | } 13 | 14 | @if (length($result) > 0) { 15 | box-shadow: $result; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_caret.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start caret-mixins 2 | @mixin caret-down($width: $caret-width) { 3 | border-top: $width solid; 4 | border-right: $width solid transparent; 5 | border-bottom: 0; 6 | border-left: $width solid transparent; 7 | } 8 | 9 | @mixin caret-up($width: $caret-width) { 10 | border-top: 0; 11 | border-right: $width solid transparent; 12 | border-bottom: $width solid; 13 | border-left: $width solid transparent; 14 | } 15 | 16 | @mixin caret-end($width: $caret-width) { 17 | border-top: $width solid transparent; 18 | border-right: 0; 19 | border-bottom: $width solid transparent; 20 | border-left: $width solid; 21 | } 22 | 23 | @mixin caret-start($width: $caret-width) { 24 | border-top: $width solid transparent; 25 | border-right: $width solid; 26 | border-bottom: $width solid transparent; 27 | } 28 | 29 | @mixin caret( 30 | $direction: down, 31 | $width: $caret-width, 32 | $spacing: $caret-spacing, 33 | $vertical-align: $caret-vertical-align 34 | ) { 35 | @if $enable-caret { 36 | &::after { 37 | display: inline-block; 38 | margin-left: $spacing; 39 | vertical-align: $vertical-align; 40 | content: ''; 41 | @if $direction == down { 42 | @include caret-down($width); 43 | } @else if $direction == up { 44 | @include caret-up($width); 45 | } @else if $direction == end { 46 | @include caret-end($width); 47 | } 48 | } 49 | 50 | @if $direction == start { 51 | &::after { 52 | display: none; 53 | } 54 | 55 | &::before { 56 | display: inline-block; 57 | margin-right: $spacing; 58 | vertical-align: $vertical-align; 59 | content: ''; 60 | @include caret-start($width); 61 | } 62 | } 63 | 64 | &:empty::after { 65 | margin-left: 0; 66 | } 67 | } 68 | } 69 | // scss-docs-end caret-mixins 70 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start clearfix 2 | @mixin clearfix() { 3 | &::after { 4 | display: block; 5 | clear: both; 6 | content: ""; 7 | } 8 | } 9 | // scss-docs-end clearfix 10 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_color-mode.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start color-mode-mixin 2 | @mixin color-mode($mode: light, $root: false) { 3 | @if $color-mode-type == 'media-query' { 4 | @if $root == true { 5 | @media (prefers-color-scheme: $mode) { 6 | :root { 7 | @content; 8 | } 9 | } 10 | } @else { 11 | @media (prefers-color-scheme: $mode) { 12 | @content; 13 | } 14 | } 15 | } @else { 16 | [data-bs-theme='#{$mode}'] { 17 | @content; 18 | } 19 | } 20 | } 21 | // scss-docs-end color-mode-mixin 22 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_color-scheme.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start mixin-color-scheme 2 | @mixin color-scheme($name) { 3 | @media (prefers-color-scheme: #{$name}) { 4 | @content; 5 | } 6 | } 7 | // scss-docs-end mixin-color-scheme 8 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_container.scss: -------------------------------------------------------------------------------- 1 | // Container mixins 2 | 3 | @mixin make-container($gutter: $container-padding-x) { 4 | --#{$prefix}gutter-x: #{$gutter}; 5 | --#{$prefix}gutter-y: 0; 6 | width: 100%; 7 | padding-right: calc( 8 | var(--#{$prefix}gutter-x) * 0.5 9 | ); // stylelint-disable-line function-disallowed-list 10 | padding-left: calc( 11 | var(--#{$prefix}gutter-x) * 0.5 12 | ); // stylelint-disable-line function-disallowed-list 13 | margin-right: auto; 14 | margin-left: auto; 15 | } 16 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Deprecate mixin 2 | // 3 | // This mixin can be used to deprecate mixins or functions. 4 | // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to 5 | // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) 6 | @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { 7 | @if ($enable-deprecation-messages != false and $ignore-warning != true) { 8 | @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_gradients.scss: -------------------------------------------------------------------------------- 1 | // Gradients 2 | 3 | // scss-docs-start gradient-bg-mixin 4 | @mixin gradient-bg($color: null) { 5 | background-color: $color; 6 | 7 | @if $enable-gradients { 8 | background-image: var(--#{$prefix}gradient); 9 | } 10 | } 11 | // scss-docs-end gradient-bg-mixin 12 | 13 | // scss-docs-start gradient-mixins 14 | // Horizontal gradient, from left to right 15 | // 16 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 17 | @mixin gradient-x( 18 | $start-color: $gray-700, 19 | $end-color: $gray-800, 20 | $start-percent: 0%, 21 | $end-percent: 100% 22 | ) { 23 | background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); 24 | } 25 | 26 | // Vertical gradient, from top to bottom 27 | // 28 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 29 | @mixin gradient-y( 30 | $start-color: $gray-700, 31 | $end-color: $gray-800, 32 | $start-percent: null, 33 | $end-percent: null 34 | ) { 35 | background-image: linear-gradient( 36 | to bottom, 37 | $start-color $start-percent, 38 | $end-color $end-percent 39 | ); 40 | } 41 | 42 | @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { 43 | background-image: linear-gradient($deg, $start-color, $end-color); 44 | } 45 | 46 | @mixin gradient-x-three-colors( 47 | $start-color: $blue, 48 | $mid-color: $purple, 49 | $color-stop: 50%, 50 | $end-color: $red 51 | ) { 52 | background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); 53 | } 54 | 55 | @mixin gradient-y-three-colors( 56 | $start-color: $blue, 57 | $mid-color: $purple, 58 | $color-stop: 50%, 59 | $end-color: $red 60 | ) { 61 | background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); 62 | } 63 | 64 | @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { 65 | background-image: radial-gradient(circle, $inner-color, $outer-color); 66 | } 67 | 68 | @mixin gradient-striped($color: rgba($white, 0.15), $angle: 45deg) { 69 | background-image: linear-gradient( 70 | $angle, 71 | $color 25%, 72 | transparent 25%, 73 | transparent 50%, 74 | $color 50%, 75 | $color 75%, 76 | transparent 75%, 77 | transparent 78 | ); 79 | } 80 | // scss-docs-end gradient-mixins 81 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | 10 | @mixin img-fluid { 11 | // Part 1: Set a maximum relative to the parent 12 | max-width: 100%; 13 | // Part 2: Override the height to auto, otherwise images will be stretched 14 | // when setting a width and height attribute on the img element. 15 | height: auto; 16 | } 17 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | @include deprecate('`list-group-item-variant()`', 'v5.3.0', 'v6.0.0'); 2 | 3 | // List Groups 4 | 5 | // scss-docs-start list-group-mixin 6 | @mixin list-group-item-variant($state, $background, $color) { 7 | .list-group-item-#{$state} { 8 | color: $color; 9 | background-color: $background; 10 | 11 | &.list-group-item-action { 12 | &:hover, 13 | &:focus { 14 | color: $color; 15 | background-color: shade-color($background, 10%); 16 | } 17 | 18 | &.active { 19 | color: $white; 20 | background-color: $color; 21 | border-color: $color; 22 | } 23 | } 24 | } 25 | } 26 | // scss-docs-end list-group-mixin 27 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_lists.scss: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | // Unstyled keeps list items block level, just removes default browser padding and list-style 4 | @mixin list-unstyled { 5 | padding-left: 0; 6 | list-style: none; 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | // scss-docs-start pagination-mixin 4 | @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { 5 | --#{$prefix}pagination-padding-x: #{$padding-x}; 6 | --#{$prefix}pagination-padding-y: #{$padding-y}; 7 | @include rfs($font-size, --#{$prefix}pagination-font-size); 8 | --#{$prefix}pagination-border-radius: #{$border-radius}; 9 | } 10 | // scss-docs-end pagination-mixin 11 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-text { 2 | font-family: $font-family-base; 3 | // We deliberately do NOT reset font-size or overflow-wrap / word-wrap. 4 | font-style: normal; 5 | font-weight: $font-weight-normal; 6 | line-height: $line-height-base; 7 | text-align: left; // Fallback for where `start` is not supported 8 | text-align: start; 9 | text-decoration: none; 10 | text-shadow: none; 11 | text-transform: none; 12 | letter-spacing: normal; 13 | word-break: normal; 14 | white-space: normal; 15 | word-spacing: normal; 16 | line-break: auto; 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 5 | resize: $direction; // Options: horizontal, vertical, both 6 | } 7 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_table-variants.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start table-variant 2 | @mixin table-variant($state, $background) { 3 | .table-#{$state} { 4 | $color: color-contrast(opaque($body-bg, $background)); 5 | $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); 6 | $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); 7 | $active-bg: mix($color, $background, percentage($table-active-bg-factor)); 8 | $table-border-color: mix($color, $background, percentage($table-border-factor)); 9 | 10 | --#{$prefix}table-color: #{$color}; 11 | --#{$prefix}table-bg: #{$background}; 12 | --#{$prefix}table-border-color: #{$table-border-color}; 13 | --#{$prefix}table-striped-bg: #{$striped-bg}; 14 | --#{$prefix}table-striped-color: #{color-contrast($striped-bg)}; 15 | --#{$prefix}table-active-bg: #{$active-bg}; 16 | --#{$prefix}table-active-color: #{color-contrast($active-bg)}; 17 | --#{$prefix}table-hover-bg: #{$hover-bg}; 18 | --#{$prefix}table-hover-color: #{color-contrast($hover-bg)}; 19 | 20 | color: var(--#{$prefix}table-color); 21 | border-color: var(--#{$prefix}table-border-color); 22 | } 23 | } 24 | // scss-docs-end table-variant 25 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_text-truncate.scss: -------------------------------------------------------------------------------- 1 | // Text truncate 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-truncate() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_transition.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | @mixin transition($transition...) { 3 | @if length($transition) == 0 { 4 | $transition: $transition-base; 5 | } 6 | 7 | @if length($transition) > 1 { 8 | @each $value in $transition { 9 | @if $value == null or $value == none { 10 | @warn "The keyword 'none' or 'null' must be used as a single argument."; 11 | } 12 | } 13 | } 14 | 15 | @if $enable-transitions { 16 | @if nth($transition, 1) != null { 17 | transition: $transition; 18 | } 19 | 20 | @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none { 21 | @media (prefers-reduced-motion: reduce) { 22 | transition: none; 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_visually-hidden.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Hide content visually while keeping it accessible to assistive technologies 4 | // 5 | // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ 6 | // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/ 7 | 8 | @mixin visually-hidden() { 9 | width: 1px !important; 10 | height: 1px !important; 11 | padding: 0 !important; 12 | margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686 13 | overflow: hidden !important; 14 | clip: rect(0, 0, 0, 0) !important; 15 | white-space: nowrap !important; 16 | border: 0 !important; 17 | 18 | // Fix for positioned table caption that could become anonymous cells 19 | &:not(caption) { 20 | position: absolute !important; 21 | } 22 | } 23 | 24 | // Use to only display content when it's focused, or one of its child elements is focused 25 | // (i.e. when focus is within the element/container that the class was applied to) 26 | // 27 | // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 28 | 29 | @mixin visually-hidden-focusable() { 30 | &:not(:focus):not(:focus-within) { 31 | @include visually-hidden(); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/scss/bootstrap/utilities/_api.scss: -------------------------------------------------------------------------------- 1 | // Loop over each breakpoint 2 | @each $breakpoint in map-keys($grid-breakpoints) { 3 | // Generate media query if needed 4 | @include media-breakpoint-up($breakpoint) { 5 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 6 | 7 | // Loop over each utility property 8 | @each $key, $utility in $utilities { 9 | // The utility can be disabled with `false`, thus check if the utility is a map first 10 | // Only proceed if responsive media queries are enabled or if it's the base media query 11 | @if type-of($utility) == 'map' and (map-get($utility, responsive) or $infix == '') { 12 | @include generate-utility($utility, $infix); 13 | } 14 | } 15 | } 16 | } 17 | 18 | // RFS rescaling 19 | @media (min-width: $rfs-mq-value) { 20 | @each $breakpoint in map-keys($grid-breakpoints) { 21 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 22 | 23 | @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) { 24 | // Loop over each utility property 25 | @each $key, $utility in $utilities { 26 | // The utility can be disabled with `false`, thus check if the utility is a map first 27 | // Only proceed if responsive media queries are enabled or if it's the base media query 28 | @if type-of($utility) == 29 | 'map' and 30 | map-get($utility, rfs) and 31 | (map-get($utility, responsive) or $infix == '') 32 | { 33 | @include generate-utility($utility, $infix, true); 34 | } 35 | } 36 | } 37 | } 38 | } 39 | 40 | // Print utilities 41 | @media print { 42 | @each $key, $utility in $utilities { 43 | // The utility can be disabled with `false`, thus check if the utility is a map first 44 | // Then check if the utility needs print styles 45 | @if type-of($utility) == 'map' and map-get($utility, print) == true { 46 | @include generate-utility($utility, '-print'); 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/scss/custom/_styles.scss: -------------------------------------------------------------------------------- 1 | // Your custom styles 2 | -------------------------------------------------------------------------------- /src/scss/custom/_variables.scss: -------------------------------------------------------------------------------- 1 | // Your custom variables 2 | -------------------------------------------------------------------------------- /src/scss/free/_accordion.scss: -------------------------------------------------------------------------------- 1 | // Accordion 2 | 3 | .accordion-button { 4 | &:not(.collapsed) { 5 | &:focus { 6 | box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow); 7 | } 8 | } 9 | 10 | &:focus { 11 | border-color: var(--#{$prefix}accordion-btn-focus-border-color); 12 | outline: 0; 13 | box-shadow: none; 14 | } 15 | } 16 | 17 | .accordion-flush { 18 | --#{$prefix}accordion-flush-btn-box-shadow: #{$accordion-flush-button-box-shadow}; 19 | --#{$prefix}accordion-flush-border-bottom: #{$accordion-flush-item-border-bottom}; 20 | 21 | .accordion-button:not(.collapsed) { 22 | box-shadow: var(--#{$prefix}accordion-flush-btn-box-shadow); 23 | } 24 | .accordion-item { 25 | border-bottom: var(--#{$prefix}accordion-flush-border-bottom); 26 | } 27 | } 28 | 29 | .accordion-borderless { 30 | --#{$prefix}accordion-borderless-btn-border-radius: #{$accordion-borderless-button-border-radius}; 31 | --#{$prefix}accordion-borderless-btn-bg: #{$accordion-borderless-button-bgc}; 32 | --#{$prefix}accordion-borderless-btn-color: #{$accordion-borderless-button-color}; 33 | 34 | .accordion-item { 35 | border: 0; 36 | .accordion-button { 37 | border-radius: var(--#{$prefix}accordion-borderless-btn-border-radius); 38 | &:not(.collapsed) { 39 | background-color: var(--#{$prefix}accordion-borderless-btn-bg); 40 | color: var(--#{$prefix}accordion-borderless-btn-color); 41 | box-shadow: none; 42 | } 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/scss/free/_alert.scss: -------------------------------------------------------------------------------- 1 | // Alert 2 | 3 | .alert { 4 | border: 0; 5 | } 6 | 7 | .alert-absolute { 8 | position: absolute; 9 | } 10 | 11 | .alert-fixed { 12 | --#{$prefix}alert-fixed-z-index: #{$alert-zindex}; 13 | 14 | position: fixed; 15 | z-index: var(--#{$prefix}alert-fixed-z-index); 16 | } 17 | 18 | .parent-alert-relative { 19 | position: relative; 20 | } 21 | 22 | @each $color, $value in $theme-colors { 23 | .alert-#{$color} { 24 | background-color: var(--#{$prefix}#{$color}-bg-subtle); 25 | color: var(--#{$prefix}#{$color}-text-emphasis); 26 | 27 | i { 28 | color: var(--#{$prefix}#{$color}-text-emphasis); 29 | } 30 | 31 | .alert-link { 32 | color: var(--#{$prefix}#{$color}-text-emphasis); 33 | 34 | &:hover { 35 | color: rgba(var(--#{$prefix}#{$color}-text-emphasis), var(--#{$prefix}text-hover-opacity)); 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/scss/free/_badge.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Badge styles 3 | // 4 | // Additional badge options tailored to the MDB style 5 | 6 | // A "dot" badge, which is useful, for example, for icons 7 | .badge-dot { 8 | --#{$prefix}badge-border-radius: #{$badge-dot-border-radius}; 9 | --#{$prefix}badge-height: #{$badge-dot-height}; 10 | --#{$prefix}badge-width: #{$badge-dot-width}; 11 | --#{$prefix}badge-margin-left: #{$badge-dot-margin-left}; 12 | 13 | position: absolute; 14 | min-width: 0; 15 | width: var(--#{$prefix}badge-width); 16 | height: var(--#{$prefix}badge-height); 17 | border-radius: var(--#{$prefix}badge-border-radius); 18 | padding: 0; 19 | margin-left: var(--#{$prefix}badge-margin-left); 20 | 21 | &:empty { 22 | display: inline-block; 23 | } 24 | } 25 | 26 | // "Notification" badge that shows the number of notifications, e.g. the number of unread messages 27 | .badge-notification { 28 | --#{$prefix}badge-font-size: #{$badge-notification-font-size}; 29 | --#{$prefix}badge-padding-x: #{$badge-notification-padding-x}; 30 | --#{$prefix}badge-padding-y: #{$badge-notification-padding-y}; 31 | --#{$prefix}badge-margin-top: #{$badge-notification-margin-top}; 32 | --#{$prefix}badge-margin-left: #{$badge-notification-margin-left}; 33 | 34 | position: absolute; 35 | font-size: var(--#{$prefix}badge-font-size); 36 | padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); 37 | margin-top: var(--#{$prefix}badge-margin-top); 38 | margin-left: var(--#{$prefix}badge-margin-left); 39 | } 40 | 41 | // Contextual colors options 42 | @each $color, $value in $theme-colors { 43 | .badge-#{$color} { 44 | background-color: var(--#{$prefix}#{$color}-bg-subtle); 45 | color: var(--#{$prefix}#{$color}-text-emphasis); 46 | 47 | i { 48 | color: var(--#{$prefix}#{$color}-text-emphasis); 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/scss/free/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumb styles 3 | // 4 | 5 | .navbar { 6 | .breadcrumb { 7 | // scss-docs-start breadcrumb-css-vars 8 | --#{$prefix}breadcrumb-item-color: #{$breadcrumb-item-color}; 9 | --#{$prefix}breadcrumb-item-hover-color: #{$breadcrumb-item-hover-color}; 10 | --#{$prefix}breadcrumb-item-before-color: #{$breadcrumb-item-before-color}; 11 | --#{$prefix}breadcrumb-item-transition: #{$breadcrumb-item-transition}; 12 | // scss-docs-end breadcrumb-css-vars 13 | 14 | background-color: transparent; 15 | margin-bottom: 0; 16 | 17 | .breadcrumb-item { 18 | a { 19 | color: var(--#{$prefix}breadcrumb-item-color); 20 | transition: var(--#{$prefix}breadcrumb-item-transition); 21 | 22 | &:hover, 23 | &:focus { 24 | color: var(--#{$prefix}breadcrumb-item-hover-color); 25 | } 26 | } 27 | 28 | + .breadcrumb-item { 29 | &:before { 30 | color: var(--#{$prefix}breadcrumb-item-before-color); 31 | } 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/scss/free/_card.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Card styles 3 | // 4 | 5 | .card { 6 | border: 0; 7 | 8 | .bg-image { 9 | border-top-left-radius: var(--#{$prefix}card-border-radius); 10 | border-top-right-radius: var(--#{$prefix}card-border-radius); 11 | } 12 | 13 | &[class*='bg-'] { 14 | .card-header { 15 | --#{$prefix}card-header-border-bottom-color: #{$card-border-color}; 16 | 17 | border-bottom-color: var(--#{$prefix}card-header-border-bottom-color); 18 | } 19 | .card-footer { 20 | --#{$prefix}card-footer-border-top-color: #{$card-border-color}; 21 | 22 | border-top-color: var(--#{$prefix}card-footer-border-top-color); 23 | } 24 | } 25 | } 26 | 27 | .card-header { 28 | --#{$prefix}card-header-border-width: #{$card-header-border-width}; 29 | --#{$prefix}card-header-border-color: #{$card-header-border-color}; 30 | 31 | border-bottom: var(--#{$prefix}card-header-border-width) solid 32 | var(--#{$prefix}card-header-border-color); 33 | } 34 | 35 | .card-body { 36 | &[class*='bg-'] { 37 | border-bottom-left-radius: var(--#{$prefix}card-border-radius); 38 | border-bottom-right-radius: var(--#{$prefix}card-border-radius); 39 | } 40 | } 41 | 42 | .card-footer { 43 | --#{$prefix}card-footer-border-color: #{$card-footer-border-color}; 44 | --#{$prefix}card-footer-border-width: #{$card-footer-border-width}; 45 | 46 | border-top: var(--#{$prefix}card-footer-border-width) solid 47 | var(--#{$prefix}card-footer-border-color); 48 | } 49 | 50 | .card-img-left { 51 | border-top-left-radius: var(--#{$prefix}card-border-radius); 52 | border-bottom-left-radius: var(--#{$prefix}card-border-radius); 53 | } 54 | -------------------------------------------------------------------------------- /src/scss/free/_carousel.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Carousel styles 3 | // 4 | 5 | .carousel-control-prev-icon { 6 | &::after { 7 | content: '\f053'; 8 | --#{$prefix}carousel-control-icon-font-size: #{$carousel-control-icon-font-size}; 9 | --#{$prefix}carousel-control-icon-font-weight: #{$font-weight-bold}; 10 | 11 | font-weight: var(--#{$prefix}carousel-control-icon-font-weight); 12 | font-size: var(--#{$prefix}carousel-control-icon-font-size); 13 | font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free'; 14 | } 15 | } 16 | .carousel-control-next-icon { 17 | &::after { 18 | content: '\f054'; 19 | --#{$prefix}carousel-control-icon-font-size: #{$carousel-control-icon-font-size}; 20 | --#{$prefix}carousel-control-icon-font-weight: #{$font-weight-bold}; 21 | 22 | font-weight: var(--#{$prefix}carousel-control-icon-font-weight); 23 | font-size: var(--#{$prefix}carousel-control-icon-font-size); 24 | font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free'; 25 | } 26 | } 27 | .carousel-indicators { 28 | [data-mdb-target] { 29 | @extend [data-bs-target] !optional; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/scss/free/_close.scss: -------------------------------------------------------------------------------- 1 | // transparent background and border properties included for button version. 2 | // iOS requires the button element instead of an anchor tag. 3 | // If you want the anchor version, it requires `href="#"`. 4 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 5 | 6 | .btn-close { 7 | &:focus { 8 | box-shadow: none; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/scss/free/_colors.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Color styles 3 | // 4 | 5 | @each $color, $value in $theme-colors { 6 | .bg-#{$color} { 7 | --#{$prefix}-bg-opacity: 1; 8 | 9 | background-color: rgba($value, var(--#{$prefix}-bg-opacity)); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/scss/free/_deprecated.scss: -------------------------------------------------------------------------------- 1 | // To be removed 2 | 3 | hr.divider-horizontal:not([size]) { 4 | height: 2px; 5 | } 6 | 7 | .divider-horizontal { 8 | opacity: 1; 9 | background-color: #f5f5f5; 10 | height: 2px; 11 | } 12 | 13 | .divider-vertical { 14 | opacity: 1; 15 | background-color: #f5f5f5; 16 | display: inline-block; 17 | width: 2px; 18 | margin: 0 1rem; 19 | } 20 | 21 | hr.divider-horizontal-blurry { 22 | background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 40%), transparent); 23 | background-color: transparent; 24 | } 25 | 26 | hr.divider-vertical-blurry { 27 | background-image: linear-gradient(180deg, transparent, hsl(0, 0%, 40%), transparent); 28 | background-color: transparent; 29 | width: 1px; 30 | top: 0; 31 | right: 0; 32 | } 33 | -------------------------------------------------------------------------------- /src/scss/free/_functions.scss: -------------------------------------------------------------------------------- 1 | // Functions 2 | 3 | // Dynamically change text color based on background color 4 | 5 | @function set-notification-text-color($color) { 6 | @if (lightness($color) > 70) { 7 | @return $gray-800; 8 | } @else { 9 | @return $white; 10 | } 11 | } 12 | 13 | @function color-level($color: $primary, $level: 0) { 14 | $color-base: if($level > 0, $black, $white); 15 | $level: abs($level); 16 | 17 | @return mix($color-base, $color, $level); 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/free/_images.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Image styles 3 | // 4 | 5 | .bg-fixed { 6 | background-attachment: fixed; 7 | } 8 | 9 | .bg-image { 10 | position: relative; 11 | overflow: hidden; 12 | background-repeat: no-repeat; 13 | background-size: cover; 14 | background-position: center center; 15 | } 16 | 17 | .mask { 18 | position: absolute; 19 | top: 0; 20 | right: 0; 21 | bottom: 0; 22 | left: 0; 23 | width: 100%; 24 | height: 100%; 25 | overflow: hidden; 26 | background-attachment: fixed; 27 | } 28 | 29 | .hover-overlay { 30 | .mask { 31 | --#{$prefix}image-hover-transition: #{$image-hover-overlay-transition}; 32 | 33 | opacity: 0; 34 | transition: var(--#{$prefix}image-hover-transition); 35 | &:hover { 36 | opacity: 1; 37 | } 38 | } 39 | } 40 | 41 | .hover-zoom { 42 | --#{$prefix}image-hover-zoom-transition: #{$image-hover-zoom-transition}; 43 | --#{$prefix}image-hover-zoom-transform: #{$image-hover-zoom-transform}; 44 | 45 | img, 46 | video { 47 | transition: var(--#{$prefix}image-hover-zoom-transition); 48 | } 49 | &:hover { 50 | img, 51 | video { 52 | transform: var(--#{$prefix}image-hover-zoom-transform); 53 | } 54 | } 55 | } 56 | 57 | .hover-shadow, 58 | .card.hover-shadow, 59 | .hover-shadow-soft, 60 | .card.hover-shadow-soft { 61 | --#{$prefix}image-hover-shadow-transition: #{$image-hover-shadow-transition}; 62 | 63 | transition: var(--#{$prefix}image-hover-shadow-transition); 64 | &:hover { 65 | transition: var(--#{$prefix}image-hover-shadow-transition); 66 | } 67 | } 68 | 69 | .hover-shadow, 70 | .card.hover-shadow { 71 | --#{$prefix}image-hover-shadow-box-shadow: #{$image-hover-shadow-box-shadow}; 72 | 73 | box-shadow: none; 74 | &:hover { 75 | box-shadow: var(--#{$prefix}image-hover-shadow-box-shadow); 76 | } 77 | } 78 | 79 | .hover-shadow-soft, 80 | .card.hover-shadow-soft { 81 | --#{$prefix}image-hover-shadow-box-shadow-soft: #{$image-hover-shadow-box-shadow-soft}; 82 | 83 | box-shadow: none; 84 | &:hover { 85 | box-shadow: var(--#{$prefix}image-hover-shadow-box-shadow-soft); 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/scss/free/_list-group.scss: -------------------------------------------------------------------------------- 1 | // 2 | // List group styles 3 | // 4 | 5 | .list-group { 6 | --#{$prefix}list-group-item-transition-time: #{$list-group-item-transition-time}; 7 | } 8 | 9 | .list-group-item-action { 10 | transition: var(--#{$prefix}list-group-item-transition-time); 11 | 12 | // Hover state 13 | &:hover { 14 | transition: var(--#{$prefix}list-group-item-transition-time); 15 | } 16 | } 17 | 18 | .list-group-light { 19 | --#{$prefix}list-group-light-item-py: #{$list-group-light-item-py}; 20 | --#{$prefix}list-group-light-item-border: #{$list-group-light-item-border}; 21 | --#{$prefix}list-group-light-item-border-width: #{$list-group-light-item-border-width}; 22 | --#{$prefix}list-group-light-active-border-radius: #{$list-group-light-active-border-radius}; 23 | --#{$prefix}list-group-light-active-bg: #{$list-group-light-active-bg}; 24 | --#{$prefix}list-group-light-active-color: #{$list-group-light-active-color}; 25 | 26 | .list-group-item { 27 | padding: var(--#{$prefix}list-group-light-item-py) 0; 28 | border: var(--#{$prefix}list-group-light-item-border); 29 | } 30 | > .list-group-item { 31 | border-width: 0 0 var(--#{$prefix}list-group-light-item-border-width); 32 | &:last-of-type { 33 | border: none; 34 | } 35 | } 36 | .active { 37 | border: none; 38 | border-radius: var(--#{$prefix}list-group-light-active-border-radius); 39 | background-color: var(--#{$prefix}list-group-light-active-bg); 40 | color: var(--#{$prefix}list-group-light-active-color); 41 | } 42 | .list-group-item-action { 43 | &:hover { 44 | border-radius: var(--#{$prefix}list-group-light-active-border-radius); 45 | } 46 | &:focus { 47 | border-radius: var(--#{$prefix}list-group-light-active-border-radius); 48 | } 49 | } 50 | } 51 | 52 | .list-group-small { 53 | --#{$prefix}list-group-small-item-py: #{$list-group-small-item-py}; 54 | .list-group-item { 55 | padding: var(--#{$prefix}list-group-small-item-py) 0; 56 | } 57 | } 58 | 59 | @each $color, $value in $theme-colors { 60 | .list-group-item-#{$color} { 61 | background-color: var(--#{$prefix}#{$color}-bg-subtle); 62 | color: var(--#{$prefix}#{$color}-text-emphasis); 63 | 64 | i { 65 | color: var(--#{$prefix}#{$color}-link-emphasis); 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/scss/free/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Toggles 2 | // 3 | // Used in conjunction with global variables to enable certain theme features. 4 | 5 | // Components 6 | @import './mixins/buttons'; 7 | @import './mixins/ripple'; 8 | @import './mixins/table-variants'; 9 | -------------------------------------------------------------------------------- /src/scss/free/_modal.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Modal styles 3 | // 4 | 5 | .modal-content { 6 | // scss-docs-start modal-css-vars 7 | --#{$prefix}modal-box-shadow: #{$modal-box-shadow}; 8 | // scss-docs-end modal-css-vars 9 | 10 | border: 0; 11 | box-shadow: var(--#{$prefix}modal-box-shadow); 12 | } 13 | -------------------------------------------------------------------------------- /src/scss/free/_navbar.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Navbar styles 3 | // 4 | 5 | .navbar { 6 | --#{$prefix}navbar-box-shadow: #{$navbar-box-shadow}; 7 | --#{$prefix}navbar-padding-top: #{$navbar-padding-top}; 8 | --#{$prefix}navbar-brand-img-margin-right: #{$navbar-brand-img-margin-right}; 9 | 10 | box-shadow: var(--#{$prefix}navbar-box-shadow); 11 | padding-top: var(--#{$prefix}navbar-padding-top); 12 | } 13 | 14 | .navbar-toggler { 15 | border: 0; 16 | 17 | &:focus { 18 | box-shadow: none; 19 | } 20 | } 21 | 22 | .navbar-dark .navbar-toggler, 23 | .navbar-light .navbar-toggler { 24 | border: 0; 25 | } 26 | 27 | .navbar-brand { 28 | display: flex; 29 | align-items: center; 30 | img { 31 | margin-right: var(--#{$prefix}navbar-brand-img-margin-right); 32 | } 33 | } 34 | 35 | .navbar-nav .dropdown-menu { 36 | position: absolute; 37 | } 38 | 39 | // Navbar themes 40 | .navbar-light { 41 | .navbar-toggler-icon { 42 | background-image: none; 43 | } 44 | } 45 | 46 | .navbar-dark { 47 | .navbar-toggler-icon { 48 | background-image: none; 49 | } 50 | } 51 | 52 | .navbar-dark, 53 | .navbar[data-mdb-theme='dark'] { 54 | // scss-docs-start navbar-dark-css-vars 55 | --#{$prefix}navbar-color: #{$navbar-dark-color}; 56 | --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color}; 57 | --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color}; 58 | --#{$prefix}navbar-active-color: #{$navbar-dark-active-color}; 59 | --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color}; 60 | --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color}; 61 | --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color}; 62 | --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; 63 | // scss-docs-end navbar-dark-css-vars 64 | } 65 | -------------------------------------------------------------------------------- /src/scss/free/_popover.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Popover styles 3 | // 4 | 5 | .popover { 6 | // scss-docs-start popover-css-vars 7 | --#{$prefix}popover-border-bottom-width: #{$popover-border-bottom-width}; 8 | // scss-docs-end popover-css-vars 9 | 10 | .popover-arrow { 11 | display: none; 12 | } 13 | } 14 | 15 | .popover-header { 16 | border-bottom: var(--#{$prefix}popover-border-bottom-width) solid 17 | var(--#{$prefix}popover-border-color); 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/free/_progress.scss: -------------------------------------------------------------------------------- 1 | // Progress 2 | 3 | .progress { 4 | border-radius: 0; 5 | box-shadow: none; 6 | } 7 | -------------------------------------------------------------------------------- /src/scss/free/_range.scss: -------------------------------------------------------------------------------- 1 | // range 2 | .range { 3 | --#{$prefix}range-thumb-height: #{$range-thumb-height}; 4 | --#{$prefix}range-thumb-width: #{$range-thumb-width}; 5 | --#{$prefix}range-thumb-top: #{$range-thumb-top}; 6 | --#{$prefix}range-thumb-margin-left: #{$range-thumb-margin-left}; 7 | --#{$prefix}range-thumb-border-radius: #{$range-thumb-border-radius}; 8 | --#{$prefix}range-thumb-transform: #{$range-thumb-transform}; 9 | --#{$prefix}range-thumb-transition: #{$range-thumb-transition}; 10 | --#{$prefix}range-thumb-value-font-size: #{$range-thumb-value-font-size}; 11 | --#{$prefix}range-thumb-value-line-height: #{$range-thumb-value-line-height}; 12 | --#{$prefix}range-thumb-value-color: #{$range-thumb-value-color}; 13 | --#{$prefix}range-thumb-value-font-weight: #{$range-thumb-value-font-weight}; 14 | --#{$prefix}range-thumb-background: #{$range-thumb-background}; 15 | 16 | position: relative; 17 | 18 | .thumb { 19 | position: absolute; 20 | display: block; 21 | height: var(--#{$prefix}range-thumb-height); 22 | width: var(--#{$prefix}range-thumb-width); 23 | top: var(--#{$prefix}range-thumb-top); 24 | margin-left: var(--#{$prefix}range-thumb-margin-left); 25 | text-align: center; 26 | border-radius: var(--#{$prefix}range-thumb-border-radius); 27 | transform: var(--#{$prefix}range-thumb-transform); 28 | transform-origin: bottom; 29 | transition: var(--#{$prefix}range-thumb-transition); 30 | 31 | &:after { 32 | position: absolute; 33 | display: block; 34 | content: ''; 35 | transform: translateX(-50%); 36 | width: 100%; 37 | height: 100%; 38 | top: 0; 39 | border-radius: var(--#{$prefix}range-thumb-border-radius); 40 | transform: rotate(-45deg); 41 | background: var(--#{$prefix}range-thumb-background); 42 | z-index: -1; 43 | } 44 | 45 | .thumb-value { 46 | display: block; 47 | font-size: var(--#{$prefix}range-thumb-value-font-size); 48 | line-height: var(--#{$prefix}range-thumb-value-line-height); 49 | color: var(--#{$prefix}range-thumb-value-color); 50 | font-weight: var(--#{$prefix}range-thumb-value-font-weight); 51 | z-index: 2; 52 | } 53 | 54 | &.thumb-active { 55 | transform: scale(1); 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/scss/free/_reboot.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix 2 | 3 | // Reboot 4 | // 5 | // Normalization of HTML elements, manually forked from Normalize.css to remove 6 | // styles targeting irrelevant browsers while applying new styles. 7 | 8 | // Dividers 9 | 10 | hr:not([size]) { 11 | &.hr { 12 | --#{$prefix}divider-height: #{$divider-height}; 13 | --#{$prefix}divider-bg: #{$divider-bg}; 14 | --#{$prefix}divider-opacity: #{$divider-opacity}; 15 | --#{$prefix}divider-blurry-bg: transparent; 16 | --#{$prefix}divider-blurry-bg-image: #{$divider-blurry-bg-image}; 17 | --#{$prefix}divider-blurry-height: #{$divider-blurry-height}; 18 | --#{$prefix}divider-blurry-opacity: #{$divider-blurry-opacity}; 19 | 20 | height: var(--#{$prefix}divider-height); 21 | background-color: var(--#{$prefix}divider-bg); 22 | opacity: var(--#{$prefix}divider-opacity); 23 | 24 | &.hr-blurry { 25 | background-color: var(--#{$prefix}divider-blurry-bg); 26 | background-image: var(--#{$prefix}divider-blurry-bg-image); 27 | height: var(--#{$prefix}divider-blurry-height); 28 | opacity: var(--#{$prefix}divider-blurry-opacity); 29 | } 30 | } 31 | 32 | &.vr { 33 | height: auto; 34 | } 35 | } 36 | 37 | hr.hr, 38 | hr.vr { 39 | border-top: none !important; 40 | } 41 | 42 | .vr { 43 | --#{$prefix}divider-width: #{$divider-width}; 44 | --#{$prefix}divider-bg: #{$divider-bg}; 45 | --#{$prefix}divider-opacity: #{$divider-opacity}; 46 | 47 | width: var(--#{$prefix}divider-width); 48 | background-color: var(--#{$prefix}divider-bg); 49 | opacity: var(--#{$prefix}divider-opacity); 50 | } 51 | 52 | .vr-blurry { 53 | --#{$prefix}divider-blurry-vr-bg-image: #{$divider-blurry-vr-bg-image}; 54 | --#{$prefix}divider-blurry-vr-width: #{$divider-blurry-vr-width}; 55 | --#{$prefix}divider-blurry-opacity: #{$divider-blurry-opacity}; 56 | 57 | background-image: var(--#{$prefix}divider-blurry-vr-bg-image); 58 | width: var(--#{$prefix}divider-blurry-vr-width); 59 | opacity: var(--#{$prefix}divider-blurry-opacity); 60 | } 61 | 62 | // Links 63 | 64 | a { 65 | --#{$prefix}link-decoration: #{$link-decoration}; 66 | 67 | text-decoration: var(--#{$prefix}link-decoration); 68 | } 69 | -------------------------------------------------------------------------------- /src/scss/free/_ripple.scss: -------------------------------------------------------------------------------- 1 | .ripple-surface { 2 | position: relative; 3 | overflow: hidden; 4 | display: inline-block; 5 | vertical-align: bottom; 6 | } 7 | 8 | .ripple-surface-unbound { 9 | overflow: visible; 10 | } 11 | 12 | .ripple-wave { 13 | --#{$prefix}ripple-wave-cubicBezier: #{$ripple-wave-cubicBezier}; 14 | --#{$prefix}ripple-wave-border-radius: #{$ripple-wave-border-radius}; 15 | --#{$prefix}ripple-wave-opacity: #{$ripple-wave-opacity}; 16 | --#{$prefix}ripple-wave-transform: #{$ripple-wave-transform}; 17 | --#{$prefix}ripple-wave-z-index: #{$ripple-wave-z-index}; 18 | --#{$prefix}ripple-wave-active-transform: #{$ripple-wave-active-transform}; 19 | 20 | @include ripple-variant(black); 21 | border-radius: var(--#{$prefix}ripple-wave-border-radius); 22 | opacity: var(--#{$prefix}ripple-wave-opacity); 23 | pointer-events: none; 24 | position: absolute; 25 | touch-action: none; 26 | transform: var(--#{$prefix}ripple-wave-transform); 27 | transition-property: transform, opacity; 28 | transition-timing-function: var(--#{$prefix}ripple-wave-cubicBezier), 29 | var(--#{$prefix}ripple-wave-cubicBezier); 30 | z-index: var(--#{$prefix}ripple-wave-z-index); 31 | &.active { 32 | transform: var(--#{$prefix}ripple-wave-active-transform); 33 | opacity: 0; 34 | } 35 | } 36 | 37 | .btn .ripple-wave { 38 | @include ripple-variant(white); 39 | } 40 | 41 | .input-wrapper .ripple-wave { 42 | @include ripple-variant(white); 43 | } 44 | 45 | @each $color, $value in $ripple { 46 | .ripple-surface-#{$color} { 47 | .ripple-wave { 48 | @include ripple-variant($value); 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/scss/free/_shadows.scss: -------------------------------------------------------------------------------- 1 | // Shadows 2 | -------------------------------------------------------------------------------- /src/scss/free/_tables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Basic MDB table 3 | // 4 | 5 | .table { 6 | --#{$prefix}table-font-size: #{$table-font-size}; 7 | --#{$prefix}table-divider-color: #{$table-divider-color}; 8 | 9 | font-size: var(--#{$prefix}table-font-size); 10 | 11 | th { 12 | font-weight: $font-weight-medium; 13 | } 14 | 15 | tbody { 16 | font-weight: $font-weight-normal; 17 | } 18 | 19 | > :not(:last-child) > :last-child > * { 20 | border-bottom-color: $table-group-separator-color; 21 | } 22 | } 23 | 24 | @each $color, $value in $table-variants { 25 | @include table-variant($color, $value); 26 | } 27 | 28 | .table-hover { 29 | > tbody > tr { 30 | transition: $table-hover-transition; 31 | } 32 | > tbody > tr:hover { 33 | --#{$prefix}table-accent-bg: transparent; 34 | background-color: var(--#{$prefix}table-hover-bg); 35 | } 36 | } 37 | 38 | .table-group-divider { 39 | border-top: calc(2 * $table-border-width) solid; 40 | border-top-color: inherit; 41 | } 42 | 43 | .table-divider-color { 44 | border-top-color: var(--#{$prefix}table-divider-color); 45 | } 46 | -------------------------------------------------------------------------------- /src/scss/free/_toasts.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Toast styles 3 | // 4 | 5 | .toast { 6 | // scss-docs-start toast-css-vars 7 | --#{$prefix}toast-border-bottom-width: #{$toast-border-bottom-width}; 8 | --#{$prefix}toast-btn-close-width: #{$toast-btn-close-width}; 9 | --#{$prefix}toast-btn-close-mr: #{$toast-btn-close-mr}; 10 | --#{$prefix}toast-btn-close-ml: #{$toast-btn-close-ml}; 11 | --#{$prefix}toast-bg: #{$toast-background-color}; 12 | --#{$prefix}toast-header-bg: #{$toast-header-background-color}; 13 | // scss-docs-end toast-css-vars 14 | 15 | border: 0; 16 | 17 | .btn-close { 18 | width: var(--#{$prefix}toast-btn-close-width); 19 | } 20 | } 21 | 22 | .toast-header { 23 | border-bottom-width: var(--#{$prefix}toast-border-bottom-width); 24 | 25 | .btn-close { 26 | margin-right: var(--#{$prefix}toast-btn-close-mr); 27 | margin-left: var(--#{$prefix}toast-btn-close-ml); 28 | } 29 | } 30 | 31 | .parent-toast-relative { 32 | position: relative; 33 | } 34 | 35 | .toast-absolute { 36 | position: absolute; 37 | } 38 | 39 | .toast-fixed { 40 | position: fixed; 41 | z-index: var(--#{$prefix}toast-zindex); 42 | } 43 | 44 | @each $color, $value in $theme-colors { 45 | .toast-#{$color} { 46 | background-color: var(--#{$prefix}#{$color}-bg-subtle); 47 | color: var(--#{$prefix}#{$color}-text-emphasis); 48 | border-color: var(--#{$prefix}#{$color}-border-subtle); 49 | 50 | i { 51 | color: var(--#{$prefix}#{$color}-text-emphasis); 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/scss/free/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // Tooltip 2 | 3 | .tooltip { 4 | --#{$prefix}tooltip-font-size: #{$tooltip-font-size}; 5 | 6 | &.show { 7 | opacity: 1; 8 | } 9 | 10 | .tooltip-arrow { 11 | display: none; 12 | } 13 | } 14 | 15 | .tooltip-inner { 16 | font-size: var(--#{$prefix}tooltip-font-size); 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/free/_type.scss: -------------------------------------------------------------------------------- 1 | // Type 2 | .note { 3 | --#{$prefix}note-padding: #{$note-padding}; 4 | --#{$prefix}note-border-width: #{$note-border-width}; 5 | --#{$prefix}note-border-radius: #{$note-border-radius}; 6 | --#{$prefix}note-strong-font-weight: #{$note-strong-font-weight}; 7 | 8 | padding: var(--#{$prefix}note-padding); 9 | border-left: var(--#{$prefix}note-border-width) solid; 10 | border-radius: var(--#{$prefix}note-border-radius); 11 | strong { 12 | font-weight: var(--#{$prefix}note-strong-font-weight); 13 | } 14 | } 15 | 16 | @each $color, $value in $theme-colors { 17 | .note-#{$color} { 18 | background-color: var(--#{$prefix}#{$color}-bg-subtle); 19 | color: var(--#{$prefix}#{$color}-text-emphasis); 20 | } 21 | } 22 | 23 | .w-responsive { 24 | @media (min-width: 1199px) { 25 | width: 75%; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/scss/free/forms/_form-file.scss: -------------------------------------------------------------------------------- 1 | .form-control { 2 | &[type='file'] { 3 | border-color: var(--#{$prefix}form-control-border-color); 4 | &::-webkit-file-upload-button { 5 | background-color: transparent; 6 | } 7 | &:disabled { 8 | background-color: var(--#{$prefix}form-control-disabled-bg); 9 | color: rgba(var(--#{$prefix}surface-color-rgb), 0.5); 10 | 11 | &::file-selector-button { 12 | color: rgba(var(--#{$prefix}surface-color-rgb), 0.5); 13 | } 14 | } 15 | } 16 | &:hover { 17 | &:not(:disabled):not([readonly])::-webkit-file-upload-button { 18 | background-color: transparent; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/scss/free/forms/_form-range.scss: -------------------------------------------------------------------------------- 1 | // Range 2 | // 3 | // Style range inputs the same across browsers. Vendor-specific rules for pseudo 4 | // elements cannot be mixed. As such, there are no shared styles for focus or 5 | // active states on prefixed selectors. 6 | 7 | .form-range { 8 | &:focus { 9 | box-shadow: none; 10 | 11 | // Pseudo-elements must be split across multiple rulesets to have an effect. 12 | // No box-shadow() mixin for focus accessibility. 13 | &::-webkit-slider-thumb { 14 | box-shadow: none; 15 | } 16 | &::-moz-range-thumb { 17 | box-shadow: none; 18 | } 19 | &::-ms-thumb { 20 | box-shadow: none; 21 | } 22 | } 23 | 24 | &::-moz-focus-outer { 25 | border: 0; 26 | } 27 | 28 | &::-webkit-slider-thumb { 29 | margin-top: $form-range-webkit-slider-thumb-margin-top; // Webkit specific 30 | box-shadow: none; 31 | appearance: none; 32 | } 33 | 34 | &::-webkit-slider-runnable-track { 35 | height: $form-range-webkit-slider-runnable-track-height; 36 | border-radius: 0; 37 | box-shadow: none; 38 | background-color: var(--#{$prefix}secondary-bg); 39 | } 40 | 41 | &::-moz-range-thumb { 42 | box-shadow: none; 43 | appearance: none; 44 | } 45 | 46 | &::-moz-range-track { 47 | box-shadow: none; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/scss/free/forms/_form-select.scss: -------------------------------------------------------------------------------- 1 | // Select 2 | 3 | .select-input { 4 | &.form-control { 5 | &[readonly]:not([disabled]) { 6 | background-color: transparent; 7 | } 8 | } 9 | } 10 | 11 | .form-select { 12 | transition: $form-select-transition; 13 | } 14 | 15 | .form-select:focus { 16 | border-color: $form-select-focus-border-color; 17 | outline: 0; 18 | box-shadow: $form-select-focus-border-box-shadow; 19 | } 20 | -------------------------------------------------------------------------------- /src/scss/free/mixins/_color-mode.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start color-mode-mixin 2 | @mixin color-mode($mode: light, $root: false) { 3 | @if $color-mode-type == 'media-query' { 4 | @if $root == true { 5 | @media (prefers-color-scheme: $mode) { 6 | :root { 7 | @content; 8 | } 9 | } 10 | } @else { 11 | @media (prefers-color-scheme: $mode) { 12 | @content; 13 | } 14 | } 15 | } @else { 16 | [data-mdb-theme='#{$mode}'] { 17 | @content; 18 | } 19 | } 20 | } 21 | // scss-docs-end color-mode-mixin 22 | -------------------------------------------------------------------------------- /src/scss/free/mixins/_ripple.scss: -------------------------------------------------------------------------------- 1 | @mixin ripple-variant($color_value) { 2 | $gradient: rgba( 3 | $color: $color_value, 4 | $alpha: 0.2, 5 | ) 6 | 0, 7 | rgba( 8 | $color: $color_value, 9 | $alpha: 0.3, 10 | ) 11 | 40%, 12 | rgba( 13 | $color: $color_value, 14 | $alpha: 0.4, 15 | ) 16 | 50%, 17 | rgba( 18 | $color: $color_value, 19 | $alpha: 0.5, 20 | ) 21 | 60%, 22 | rgba( 23 | $color: $color_value, 24 | $alpha: 0, 25 | ) 26 | 70%; 27 | background-image: radial-gradient(circle, $gradient); 28 | } 29 | -------------------------------------------------------------------------------- /src/scss/free/mixins/_table-variants.scss: -------------------------------------------------------------------------------- 1 | // Deprecated 2 | 3 | // scss-docs-start table-variant 4 | // @mixin table-variant-mdb($state, $background) { 5 | // .table-#{$state} { 6 | // background-color: $background; 7 | // } 8 | // } 9 | // scss-docs-end table-variant 10 | --------------------------------------------------------------------------------