├── src ├── scss │ ├── standard │ │ ├── free │ │ │ ├── _shadows.scss │ │ │ ├── _mixins.scss │ │ │ ├── _colors.scss │ │ │ ├── mixins │ │ │ │ ├── _table-variants.scss │ │ │ │ ├── _color-mode.scss │ │ │ │ └── _ripple.scss │ │ │ ├── _modal.scss │ │ │ ├── _tooltip.scss │ │ │ ├── _close.scss │ │ │ ├── forms │ │ │ │ ├── _form-select.scss │ │ │ │ ├── _form-file.scss │ │ │ │ └── _form-range.scss │ │ │ ├── _popover.scss │ │ │ ├── _functions.scss │ │ │ ├── _deprecated.scss │ │ │ ├── _type.scss │ │ │ ├── _alert.scss │ │ │ ├── _breadcrumb.scss │ │ │ ├── _tables.scss │ │ │ ├── _carousel.scss │ │ │ ├── _toasts.scss │ │ │ ├── _accordion.scss │ │ │ ├── _ripple.scss │ │ │ ├── _card.scss │ │ │ ├── _progress.scss │ │ │ ├── _navbar.scss │ │ │ └── _badge.scss │ │ ├── custom │ │ │ ├── _skin.scss │ │ │ ├── _styles.scss │ │ │ └── _variables.scss │ │ ├── bootstrap │ │ │ ├── helpers │ │ │ │ ├── _clearfix.scss │ │ │ │ ├── _text-truncation.scss │ │ │ │ ├── _visually-hidden.scss │ │ │ │ ├── _vr.scss │ │ │ │ ├── _stretched-link.scss │ │ │ │ ├── _stacks.scss │ │ │ │ ├── _focus-ring.scss │ │ │ │ ├── _color-bg.scss │ │ │ │ ├── _ratio.scss │ │ │ │ ├── _icon-link.scss │ │ │ │ └── _position.scss │ │ │ ├── mixins │ │ │ │ ├── _clearfix.scss │ │ │ │ ├── _lists.scss │ │ │ │ ├── _color-scheme.scss │ │ │ │ ├── _text-truncate.scss │ │ │ │ ├── _resize.scss │ │ │ │ ├── _banner.scss │ │ │ │ ├── _backdrop.scss │ │ │ │ ├── _pagination.scss │ │ │ │ ├── _image.scss │ │ │ │ ├── _box-shadow.scss │ │ │ │ ├── _container.scss │ │ │ │ ├── _color-mode.scss │ │ │ │ ├── _reset-text.scss │ │ │ │ ├── _alert.scss │ │ │ │ ├── _deprecate.scss │ │ │ │ ├── _list-group.scss │ │ │ │ ├── _transition.scss │ │ │ │ ├── _table-variants.scss │ │ │ │ ├── _visually-hidden.scss │ │ │ │ └── _caret.scss │ │ │ ├── bootstrap-reboot.scss │ │ │ ├── forms │ │ │ │ ├── _form-text.scss │ │ │ │ ├── _validation.scss │ │ │ │ └── _labels.scss │ │ │ ├── _forms.scss │ │ │ ├── _helpers.scss │ │ │ ├── bootstrap-utilities.scss │ │ │ ├── _transitions.scss │ │ │ ├── _grid.scss │ │ │ ├── _mixins.scss │ │ │ ├── _placeholders.scss │ │ │ ├── bootstrap.scss │ │ │ ├── _badge.scss │ │ │ ├── _images.scss │ │ │ ├── _containers.scss │ │ │ ├── bootstrap-grid.scss │ │ │ └── _breadcrumb.scss │ │ └── bootstrap-rtl-fix │ │ │ ├── helpers │ │ │ ├── _clearfix.scss │ │ │ ├── _text-truncation.scss │ │ │ ├── _visually-hidden.scss │ │ │ ├── _vr.scss │ │ │ ├── _stretched-link.scss │ │ │ ├── _stacks.scss │ │ │ ├── _focus-ring.scss │ │ │ ├── _color-bg.scss │ │ │ ├── _ratio.scss │ │ │ ├── _icon-link.scss │ │ │ └── _position.scss │ │ │ ├── mixins │ │ │ ├── _clearfix.scss │ │ │ ├── _lists.scss │ │ │ ├── _color-scheme.scss │ │ │ ├── _text-truncate.scss │ │ │ ├── _resize.scss │ │ │ ├── _banner.scss │ │ │ ├── _backdrop.scss │ │ │ ├── _pagination.scss │ │ │ ├── _image.scss │ │ │ ├── _box-shadow.scss │ │ │ ├── _container.scss │ │ │ ├── _color-mode.scss │ │ │ ├── _reset-text.scss │ │ │ ├── _alert.scss │ │ │ ├── _deprecate.scss │ │ │ ├── _list-group.scss │ │ │ ├── _transition.scss │ │ │ ├── _table-variants.scss │ │ │ ├── _visually-hidden.scss │ │ │ └── _caret.scss │ │ │ ├── bootstrap-reboot.scss │ │ │ ├── forms │ │ │ ├── _form-text.scss │ │ │ ├── _validation.scss │ │ │ └── _labels.scss │ │ │ ├── _forms.scss │ │ │ ├── _helpers.scss │ │ │ ├── bootstrap-utilities.scss │ │ │ ├── _transitions.scss │ │ │ ├── _grid.scss │ │ │ ├── _mixins.scss │ │ │ ├── _placeholders.scss │ │ │ ├── bootstrap.scss │ │ │ ├── _badge.scss │ │ │ ├── _images.scss │ │ │ ├── _containers.scss │ │ │ └── bootstrap-grid.scss │ ├── free │ │ ├── _variables.scss │ │ ├── _badges.scss │ │ ├── _button-group.scss │ │ ├── _buttons.scss │ │ ├── _scrollspy.scss │ │ ├── _dropdown.scss │ │ ├── _checkboxes.scss │ │ ├── _tabs.scss │ │ ├── _modal.scss │ │ ├── _carousel.scss │ │ ├── _navbar.scss │ │ ├── _input-group.scss │ │ └── _tooltips.scss │ └── index.free.scss ├── assets │ └── logo.png ├── components │ ├── utils │ │ ├── getUID.ts │ │ ├── MDBPrismEditor.vue │ │ ├── formatPre.ts │ │ ├── MDBKeycodes.ts │ │ └── useScrollbarWidth.ts │ └── free │ │ ├── components │ │ ├── MDBCardGroup.vue │ │ ├── MDBCardLink.vue │ │ ├── MDBCardText.vue │ │ ├── MDBModalBody.vue │ │ ├── MDBModalFooter.vue │ │ ├── MDBBtnClose.vue │ │ ├── MDBModalTitle.vue │ │ ├── MDBCardFooter.vue │ │ ├── MDBCardHeader.vue │ │ ├── MDBBtnGroup.vue │ │ ├── MDBProgress.vue │ │ ├── MDBCardTitle.vue │ │ ├── MDBCardBody.vue │ │ ├── MDBBadge.vue │ │ ├── MDBModalHeader.vue │ │ ├── MDBSpinner.vue │ │ ├── MDBCard.vue │ │ ├── MDBListGroup.vue │ │ ├── MDBCardImg.vue │ │ ├── MDBAccordion.vue │ │ ├── MDBListGroupItem.vue │ │ └── MDBProgressBar.vue │ │ ├── navigation │ │ ├── MDBBreadcrumb.vue │ │ ├── MDBNavbarBrand.vue │ │ ├── MDBBreadcrumbItem.vue │ │ ├── MDBPagination.vue │ │ ├── MDBFooter.vue │ │ ├── MDBTabContent.vue │ │ ├── MDBNavbarNav.vue │ │ ├── MDBTabNav.vue │ │ ├── MDBNavbarToggler.vue │ │ ├── MDBPageItem.vue │ │ ├── MDBNavbarItem.vue │ │ └── MDBPageNav.vue │ │ ├── content-styles │ │ └── MDBIcon.vue │ │ ├── layout │ │ ├── MDBContainer.vue │ │ ├── MDBCol.vue │ │ └── MDBRow.vue │ │ └── forms │ │ └── MDBSwitch.vue ├── composables │ └── free │ │ └── useMotionReduced.ts └── directives │ └── free │ └── mdbClickOutside.ts ├── types ├── components │ ├── utils │ │ ├── formatPre.d.ts │ │ ├── getUID.d.ts │ │ ├── MDBBreakpointHandler.d.ts │ │ ├── useScrollbarWidth.d.ts │ │ ├── MDBFocusTrap.d.ts │ │ ├── MDBPopper.d.ts │ │ ├── MDBStackableElements.d.ts │ │ ├── MDBSnippet.vue.d.ts │ │ ├── MDBEventHandlers.d.ts │ │ ├── MDBPrismEditor.vue.d.ts │ │ └── MDBKeycodes.d.ts │ └── free │ │ ├── components │ │ ├── MDBDropdownToggle.vue.d.ts │ │ ├── MDBBtnClose.vue.d.ts │ │ ├── MDBCardGroup.vue.d.ts │ │ ├── MDBCardLink.vue.d.ts │ │ ├── MDBCardText.vue.d.ts │ │ ├── MDBModalBody.vue.d.ts │ │ ├── MDBModalFooter.vue.d.ts │ │ ├── MDBCardFooter.vue.d.ts │ │ ├── MDBCardHeader.vue.d.ts │ │ ├── MDBProgress.vue.d.ts │ │ ├── MDBCardBody.vue.d.ts │ │ ├── MDBModalTitle.vue.d.ts │ │ ├── MDBCardTitle.vue.d.ts │ │ ├── MDBCard.vue.d.ts │ │ ├── MDBSpinner.vue.d.ts │ │ ├── MDBBtnGroup.vue.d.ts │ │ ├── MDBBadge.vue.d.ts │ │ ├── MDBModalHeader.vue.d.ts │ │ ├── MDBAccordionItem.vue.d.ts │ │ ├── MDBAccordion.vue.d.ts │ │ ├── MDBListGroup.vue.d.ts │ │ ├── MDBCardImg.vue.d.ts │ │ └── MDBCollapse.vue.d.ts │ │ ├── navigation │ │ ├── MDBBreadcrumb.vue.d.ts │ │ ├── MDBNavbarBrand.vue.d.ts │ │ ├── MDBTabPane.vue.d.ts │ │ ├── MDBTabItem.vue.d.ts │ │ ├── MDBFooter.vue.d.ts │ │ ├── MDBTabContent.vue.d.ts │ │ ├── MDBBreadcrumbItem.vue.d.ts │ │ ├── MDBTabNav.vue.d.ts │ │ ├── MDBPagination.vue.d.ts │ │ ├── MDBNavbarToggler.vue.d.ts │ │ ├── MDBPageItem.vue.d.ts │ │ ├── MDBPageNav.vue.d.ts │ │ ├── MDBTabs.vue.d.ts │ │ └── MDBNavbarItem.vue.d.ts │ │ ├── content-styles │ │ └── MDBIcon.vue.d.ts │ │ ├── forms │ │ └── MDBSwitch.vue.d.ts │ │ └── layout │ │ └── MDBCol.vue.d.ts ├── composables │ └── free │ │ └── useMotionReduced.d.ts └── directives │ └── free │ ├── mdbRipple.d.ts │ ├── mdbOnScroll.d.ts │ ├── mdbScrollspy.d.ts │ ├── mdbClickOutside.d.ts │ └── mdbFocusTrap.d.ts ├── README.txt ├── package.json └── license.txt /src/scss/standard/free/_shadows.scss: -------------------------------------------------------------------------------- 1 | // Shadows 2 | -------------------------------------------------------------------------------- /src/scss/standard/custom/_skin.scss: -------------------------------------------------------------------------------- 1 | // Your custom skin 2 | -------------------------------------------------------------------------------- /src/scss/standard/custom/_styles.scss: -------------------------------------------------------------------------------- 1 | // Your custom styles 2 | -------------------------------------------------------------------------------- /src/scss/standard/custom/_variables.scss: -------------------------------------------------------------------------------- 1 | // Your custom variables 2 | -------------------------------------------------------------------------------- /src/scss/free/_variables.scss: -------------------------------------------------------------------------------- 1 | $valid-color: #00b74a; 2 | $invalid-color: #f93154; 3 | -------------------------------------------------------------------------------- /types/components/utils/formatPre.d.ts: -------------------------------------------------------------------------------- 1 | export declare const formatPre: () => void; 2 | -------------------------------------------------------------------------------- /types/components/utils/getUID.d.ts: -------------------------------------------------------------------------------- 1 | export declare const getUID: (prefix: string) => string; 2 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdbootstrap/mdb-vue-ui-kit/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/scss/standard/bootstrap/helpers/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix(); 3 | } 4 | -------------------------------------------------------------------------------- /types/composables/free/useMotionReduced.d.ts: -------------------------------------------------------------------------------- 1 | export declare const useMotionReduced: () => boolean; 2 | -------------------------------------------------------------------------------- /src/scss/free/_badges.scss: -------------------------------------------------------------------------------- 1 | .badge:not(.badge-dot):not(.badge-notification) { 2 | margin: 0 0.12rem; 3 | } -------------------------------------------------------------------------------- /src/scss/standard/bootstrap-rtl-fix/helpers/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix(); 3 | } 4 | -------------------------------------------------------------------------------- /src/scss/free/_button-group.scss: -------------------------------------------------------------------------------- 1 | .btn-group, 2 | .btn-group-vertical { 3 | > .btn { 4 | margin: 0; 5 | } 6 | } -------------------------------------------------------------------------------- /src/scss/free/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | margin: 0 0.12rem; 3 | } 4 | 5 | .input-group .btn { 6 | margin: 0; 7 | } -------------------------------------------------------------------------------- /src/scss/free/_scrollspy.scss: -------------------------------------------------------------------------------- 1 | .nav-pills.menu-sidebar .nav-link { 2 | border-left: 0 solid transparent; 3 | } 4 | -------------------------------------------------------------------------------- /types/components/utils/MDBBreakpointHandler.d.ts: -------------------------------------------------------------------------------- 1 | export declare const handleBreakpoints: (windowWidth: number, breakpointValues: any[]) => string; 2 | -------------------------------------------------------------------------------- /src/scss/standard/bootstrap/helpers/_text-truncation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Text truncation 3 | // 4 | 5 | .text-truncate { 6 | @include text-truncate(); 7 | } 8 | -------------------------------------------------------------------------------- /types/directives/free/mdbRipple.d.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from "vue"; 2 | declare const RippleDirective: Directive; 3 | export default RippleDirective; 4 | -------------------------------------------------------------------------------- /types/directives/free/mdbOnScroll.d.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from "vue"; 2 | declare const OnScrollDirective: Directive; 3 | export default OnScrollDirective; 4 | -------------------------------------------------------------------------------- /src/scss/free/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown-menu { 2 | margin-top: auto; 3 | } 4 | 5 | .dropdown-item:not(.disabled):not([disabled]) { 6 | cursor: pointer; 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/standard/bootstrap-rtl-fix/helpers/_text-truncation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Text truncation 3 | // 4 | 5 | .text-truncate { 6 | @include text-truncate(); 7 | } 8 | -------------------------------------------------------------------------------- /types/directives/free/mdbScrollspy.d.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from "vue"; 2 | declare const ScrollSpyDirective: Directive; 3 | export default ScrollSpyDirective; 4 | -------------------------------------------------------------------------------- /types/components/utils/useScrollbarWidth.d.ts: -------------------------------------------------------------------------------- 1 | export declare const useScrollbarWidth: () => { 2 | beforeEnter: () => void; 3 | afterLeave: () => void; 4 | }; 5 | -------------------------------------------------------------------------------- /src/scss/free/_checkboxes.scss: -------------------------------------------------------------------------------- 1 | .form-check { 2 | &-input[type=checkbox] { 3 | margin-right: 0px; 4 | } 5 | &-label { 6 | padding-left: 0.15rem; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/free/_tabs.scss: -------------------------------------------------------------------------------- 1 | .nav-tabs { 2 | .nav-link { 3 | cursor: pointer; 4 | } 5 | } 6 | .nav-pills { 7 | .nav-link { 8 | cursor: pointer; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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/standard/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/standard/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/standard/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/standard/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/standard/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/standard/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/standard/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/standard/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/standard/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/standard/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/components/utils/getUID.ts: -------------------------------------------------------------------------------- 1 | const MAX_UID = 1000000; 2 | 3 | export const getUID = (prefix: string) => { 4 | do { 5 | prefix += Math.floor(Math.random() * MAX_UID); 6 | } while (document.getElementById(prefix)); 7 | 8 | return prefix; 9 | }; 10 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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/standard/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/standard/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/standard/bootstrap/mixins/_banner.scss: -------------------------------------------------------------------------------- 1 | @mixin bsBanner($file) { 2 | /*! 3 | * Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/) 4 | * Copyright 2011-2024 The Bootstrap Authors 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/standard/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 | -------------------------------------------------------------------------------- /src/composables/free/useMotionReduced.ts: -------------------------------------------------------------------------------- 1 | export const useMotionReduced = (): boolean => { 2 | if (typeof window !== "undefined" && window.matchMedia) { 3 | return window.matchMedia("(prefers-reduced-motion: reduce)").matches; 4 | } 5 | return false; // default to false if not supported 6 | }; 7 | -------------------------------------------------------------------------------- /src/scss/standard/bootstrap-rtl-fix/mixins/_banner.scss: -------------------------------------------------------------------------------- 1 | @mixin bsBanner($file) { 2 | /*! 3 | * Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/) 4 | * Copyright 2011-2024 The Bootstrap Authors 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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 | -------------------------------------------------------------------------------- /types/components/utils/MDBFocusTrap.d.ts: -------------------------------------------------------------------------------- 1 | type TrapElement = HTMLElement | HTMLBodyElement; 2 | export interface FocusTrapInstance { 3 | initFocusTrap: (element: TrapElement) => boolean; 4 | removeFocusTrap: () => void; 5 | } 6 | declare function MDBFocusTrap(): FocusTrapInstance; 7 | export default MDBFocusTrap; 8 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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/standard/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/standard/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 | -------------------------------------------------------------------------------- /README.txt: -------------------------------------------------------------------------------- 1 | MDB 5 Vue 2 | 3 | Version: FREE 7.0.0 4 | 5 | Documentation: 6 | https://mdbootstrap.com/docs/vue/ 7 | 8 | Installation: 9 | https://mdbootstrap.com/docs/vue/getting-started/installation/ 10 | 11 | CLI & hosting: 12 | https://mdbootstrap.com/docs/standard/cli/ 13 | 14 | Support: 15 | https://mdbootstrap.com/support/cat/vue/ -------------------------------------------------------------------------------- /src/scss/standard/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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mdb-vue-ui-kit", 3 | "version": "7.0.0", 4 | "type": "module", 5 | "main": "js/mdb.umd.min.js", 6 | "module": "js/mdb.es.min.js", 7 | "repository": "https://github.com/mdbootstrap/mdb-vue-ui-kit.git", 8 | "author": "MDBootstrap", 9 | "license": "MIT", 10 | "types": "types/index.free.d.ts" 11 | } 12 | -------------------------------------------------------------------------------- /src/components/utils/MDBPrismEditor.vue: -------------------------------------------------------------------------------- 1 | 4 | 15 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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 | -------------------------------------------------------------------------------- /types/directives/free/mdbClickOutside.d.ts: -------------------------------------------------------------------------------- 1 | import type { DirectiveBinding } from "vue"; 2 | interface Element extends HTMLElement { 3 | clickOutside?: (e: Event) => void; 4 | } 5 | declare const _default: { 6 | stopProp(e: Event): void; 7 | mounted(el: Element, binding: DirectiveBinding): void; 8 | unmounted(el: Element, binding: DirectiveBinding): void; 9 | }; 10 | export default _default; 11 | -------------------------------------------------------------------------------- /src/scss/free/_modal.scss: -------------------------------------------------------------------------------- 1 | // Measure scrollbar width for padding body during modal show/hide 2 | .modal-scrollbar-measure { 3 | position: absolute; 4 | top: -9999px; 5 | width: 50px; 6 | height: 50px; 7 | overflow: scroll; 8 | } 9 | 10 | .modal-open { 11 | // Kill the scroll on the body 12 | overflow: hidden; 13 | 14 | .modal { 15 | overflow-x: hidden; 16 | overflow-y: auto; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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/standard/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/standard/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/components/utils/formatPre.ts: -------------------------------------------------------------------------------- 1 | export const formatPre = () => { 2 | const pre = document.querySelectorAll("pre"); 3 | 4 | pre.forEach((el) => (el.innerText = el.innerHTML)); 5 | 6 | pre.forEach( 7 | (el) => 8 | (el.innerText = el.innerText 9 | .replace(/data-v-(.*?)=""/g, "") 10 | .replace(/=""/g, "") 11 | .replace(/" {2}>/g, '">') 12 | .replace(/ {2}>/g, ">") 13 | .trimEnd()) 14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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/standard/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/standard/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/standard/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/standard/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/standard/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/standard/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/components/free/components/MDBCardGroup.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 23 | -------------------------------------------------------------------------------- /src/scss/standard/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/components/free/components/MDBCardLink.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 25 | -------------------------------------------------------------------------------- /src/components/free/components/MDBCardText.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 25 | -------------------------------------------------------------------------------- /src/scss/standard/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 | -------------------------------------------------------------------------------- /types/directives/free/mdbFocusTrap.d.ts: -------------------------------------------------------------------------------- 1 | interface FocusElement extends HTMLElement { 2 | initFocusTrap: () => void; 3 | calculateFocusTrap: () => void; 4 | focusFirstElement: (e?: KeyboardEvent, trap?: boolean) => void; 5 | focusTrap: () => void; 6 | removeFocusTrap: () => void; 7 | handleLastElementKeydown: () => void; 8 | } 9 | declare const _default: { 10 | mounted(el: FocusElement): void; 11 | unmounted(el: FocusElement): void; 12 | }; 13 | export default _default; 14 | -------------------------------------------------------------------------------- /src/components/free/components/MDBModalBody.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 25 | -------------------------------------------------------------------------------- /src/components/free/navigation/MDBBreadcrumb.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 25 | -------------------------------------------------------------------------------- /src/scss/standard/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/components/free/components/MDBModalFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 25 | -------------------------------------------------------------------------------- /types/components/utils/MDBPopper.d.ts: -------------------------------------------------------------------------------- 1 | declare function MDBPopper(): { 2 | setPopper: (trigger: HTMLElement, popper: HTMLElement, config: object) => void; 3 | togglePopper: () => void; 4 | isPopperActive: import("vue").Ref; 5 | openPopper: () => void; 6 | closePopper: () => void; 7 | updatePopper: (option: string, value: any) => void; 8 | destroyPopper: () => void; 9 | getPopperOffset: (offset: unknown, element: HTMLElement) => unknown; 10 | }; 11 | export default MDBPopper; 12 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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/standard/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/components/free/components/MDBBtnClose.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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/components/free/navigation/MDBNavbarBrand.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 25 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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 | -------------------------------------------------------------------------------- /types/components/free/components/MDBDropdownToggle.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots, {} | { 2 | [x: string]: any; 3 | }, {}>, { 4 | default?(_: {}): any; 5 | }>; 6 | export default _default; 7 | type __VLS_WithTemplateSlots = T & { 8 | new (): { 9 | $slots: S; 10 | }; 11 | }; 12 | -------------------------------------------------------------------------------- /types/components/utils/MDBStackableElements.d.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from "vue"; 2 | interface StackOptions { 3 | [props: string]: any; 4 | } 5 | declare function MDBStackable(): { 6 | setStack: (proxy: Ref, element: HTMLElement, selector: string, options: StackOptions) => void; 7 | nextStackElements: () => HTMLElement[]; 8 | calculateStackingOffset: () => number; 9 | resetStackingOffset: () => void; 10 | stackableElements: () => { 11 | el: HTMLElement; 12 | rect: DOMRect; 13 | }[]; 14 | }; 15 | export default MDBStackable; 16 | -------------------------------------------------------------------------------- /src/scss/free/_carousel.scss: -------------------------------------------------------------------------------- 1 | .carousel-indicators button { 2 | box-sizing: content-box; 3 | flex: 0 1 auto; 4 | width: 30px; 5 | height: 3px; 6 | padding: 0; 7 | margin-right: 3px; 8 | margin-left: 3px; 9 | text-indent: -999px; 10 | cursor: pointer; 11 | background-color: #fff; 12 | background-clip: padding-box; 13 | border: 0; 14 | border-top: 10px solid transparent; 15 | border-bottom: 10px solid transparent; 16 | opacity: .5; 17 | transition: opacity .6s ease; 18 | } 19 | 20 | .carousel-dark .carousel-indicators button { 21 | background-color: #000; 22 | } -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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/standard/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/index.free.scss: -------------------------------------------------------------------------------- 1 | // MDB Standard Free 2 | @import "./standard/mdb.free"; 3 | 4 | // MDB Vue core utils 5 | @import "./free/variables"; 6 | 7 | // MDB Vue Free 8 | @import "./free/checkboxes"; 9 | @import "./free/badges"; 10 | @import "./free/buttons"; 11 | @import "./free/button-group"; 12 | @import "./free/carousel"; 13 | @import "./free/dropdown"; 14 | @import "./free/navbar"; 15 | @import "./free/tooltips"; 16 | @import "./free/popovers"; 17 | @import "./free/scrollspy"; 18 | @import "./free/validation"; 19 | @import "./free/tabs"; 20 | @import "./free/input-group"; 21 | @import "./free/modal"; 22 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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 | -------------------------------------------------------------------------------- /types/components/free/components/MDBBtnClose.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: import("vue").DefineComponent<{ 2 | white: { 3 | type: BooleanConstructor; 4 | default: boolean; 5 | }; 6 | }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly>, { 12 | white: boolean; 13 | }, {}>; 14 | export default _default; 15 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/components/free/components/MDBModalTitle.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 31 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/components/free/components/MDBCardFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 33 | -------------------------------------------------------------------------------- /src/components/free/components/MDBCardHeader.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 33 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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/standard/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 | -------------------------------------------------------------------------------- /types/components/utils/MDBSnippet.vue.d.ts: -------------------------------------------------------------------------------- 1 | import "prismjs/components/prism-clike"; 2 | import "prismjs/components/prism-javascript"; 3 | import "prismjs/themes/prism-tomorrow.css"; 4 | declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { 5 | template?(_: {}): any; 6 | script?(_: {}): any; 7 | style?(_: {}): any; 8 | }>; 9 | export default _default; 10 | type __VLS_WithTemplateSlots = T & { 11 | new (): { 12 | $slots: S; 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/components/free/components/MDBBtnGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 36 | -------------------------------------------------------------------------------- /src/components/free/components/MDBProgress.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 36 | -------------------------------------------------------------------------------- /src/scss/standard/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 | -------------------------------------------------------------------------------- /types/components/free/components/MDBCardGroup.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 12 | tag: string; 13 | }, {}>, { 14 | default?(_: {}): any; 15 | }>; 16 | export default _default; 17 | type __VLS_WithTemplateSlots = T & { 18 | new (): { 19 | $slots: S; 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /types/components/free/components/MDBCardLink.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 12 | tag: string; 13 | }, {}>, { 14 | default?(_: {}): any; 15 | }>; 16 | export default _default; 17 | type __VLS_WithTemplateSlots = T & { 18 | new (): { 19 | $slots: S; 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /types/components/free/components/MDBCardText.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 12 | tag: string; 13 | }, {}>, { 14 | default?(_: {}): any; 15 | }>; 16 | export default _default; 17 | type __VLS_WithTemplateSlots = T & { 18 | new (): { 19 | $slots: S; 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /types/components/free/components/MDBModalBody.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 12 | tag: string; 13 | }, {}>, { 14 | default?(_: {}): any; 15 | }>; 16 | export default _default; 17 | type __VLS_WithTemplateSlots = T & { 18 | new (): { 19 | $slots: S; 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /types/components/free/components/MDBModalFooter.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 12 | tag: string; 13 | }, {}>, { 14 | default?(_: {}): any; 15 | }>; 16 | export default _default; 17 | type __VLS_WithTemplateSlots = T & { 18 | new (): { 19 | $slots: S; 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBBreadcrumb.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 12 | tag: string; 13 | }, {}>, { 14 | default?(_: {}): any; 15 | }>; 16 | export default _default; 17 | type __VLS_WithTemplateSlots = T & { 18 | new (): { 19 | $slots: S; 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBNavbarBrand.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 12 | tag: string; 13 | }, {}>, { 14 | default?(_: {}): any; 15 | }>; 16 | export default _default; 17 | type __VLS_WithTemplateSlots = T & { 18 | new (): { 19 | $slots: S; 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/free/navigation/MDBBreadcrumbItem.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 34 | -------------------------------------------------------------------------------- /src/scss/standard/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/components/free/components/MDBCardTitle.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 38 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/components/free/content-styles/MDBIcon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 38 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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/components/free/components/MDBCardBody.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 37 | -------------------------------------------------------------------------------- /src/scss/standard/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/components/free/navigation/MDBPagination.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 44 | -------------------------------------------------------------------------------- /src/scss/standard/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 | -------------------------------------------------------------------------------- /types/components/free/components/MDBCardFooter.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 16 | tag: string; 17 | }, {}>, { 18 | default?(_: {}): any; 19 | }>; 20 | export default _default; 21 | type __VLS_WithTemplateSlots = T & { 22 | new (): { 23 | $slots: S; 24 | }; 25 | }; 26 | -------------------------------------------------------------------------------- /types/components/free/components/MDBCardHeader.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 16 | tag: string; 17 | }, {}>, { 18 | default?(_: {}): any; 19 | }>; 20 | export default _default; 21 | type __VLS_WithTemplateSlots = T & { 22 | new (): { 23 | $slots: S; 24 | }; 25 | }; 26 | -------------------------------------------------------------------------------- /types/components/utils/MDBEventHandlers.d.ts: -------------------------------------------------------------------------------- 1 | type EventHandler = ((...args: any) => void) | undefined; 2 | export declare const on: (element: HTMLElement | Document | HTMLBodyElement | Window, event: string, handler: EventHandler, delegationFn?: EventHandler) => void; 3 | export declare const one: (element: HTMLElement | Document | HTMLBodyElement | Window, event: string, handler: EventHandler, delegationFn?: EventHandler) => void; 4 | export declare const off: (element: HTMLElement | Document | HTMLBodyElement | Window, event: string, handler: EventHandler, delegationFn?: EventHandler) => void; 5 | export declare const onMulti: (element: HTMLElement | Document | HTMLBodyElement | Window, eventArray: string, handler: EventHandler, delegationFn?: EventHandler) => void; 6 | export declare const offMulti: (element: HTMLElement | Document | HTMLBodyElement | Window, eventArray: string, handler: EventHandler, delegationFn?: EventHandler) => void; 7 | export {}; 8 | -------------------------------------------------------------------------------- /src/components/free/components/MDBBadge.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 42 | -------------------------------------------------------------------------------- /src/components/free/components/MDBModalHeader.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 40 | -------------------------------------------------------------------------------- /src/scss/free/_navbar.scss: -------------------------------------------------------------------------------- 1 | .navbar-expand { 2 | @each $breakpoint in map-keys($grid-breakpoints) { 3 | $next: breakpoint-next($breakpoint, $grid-breakpoints); 4 | $infix: breakpoint-infix($next, $grid-breakpoints); 5 | 6 | // stylelint-disable-next-line scss/selector-no-union-class-name 7 | &#{$infix} { 8 | @include media-breakpoint-down($next) { 9 | .navbar-collapse { 10 | display: none !important; // stylelint-disable-line declaration-no-important 11 | } 12 | 13 | .navbar-collapse.show { 14 | display: block !important; // stylelint-disable-line declaration-no-important 15 | } 16 | } 17 | } 18 | &#{$infix} { 19 | @include media-breakpoint-up($next) { 20 | .collapse.navbar-collapse { 21 | &:not(.show) { 22 | display: flex !important; 23 | height: auto !important; 24 | } 25 | } 26 | } 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /types/components/free/components/MDBProgress.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 16 | tag: string; 17 | circular: boolean; 18 | }, {}>, { 19 | default?(_: {}): any; 20 | }>; 21 | export default _default; 22 | type __VLS_WithTemplateSlots = T & { 23 | new (): { 24 | $slots: S; 25 | }; 26 | }; 27 | -------------------------------------------------------------------------------- /types/components/utils/MDBPrismEditor.vue.d.ts: -------------------------------------------------------------------------------- 1 | import { PropType } from "vue"; 2 | declare const _default: __VLS_WithTemplateSlots any>; 6 | }; 7 | lineNumbers: BooleanConstructor; 8 | }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly any>; 12 | }; 13 | lineNumbers: BooleanConstructor; 14 | }>>, { 15 | lineNumbers: boolean; 16 | }, {}>, { 17 | default?(_: {}): any; 18 | }>; 19 | export default _default; 20 | type __VLS_WithTemplateSlots = T & { 21 | new (): { 22 | $slots: S; 23 | }; 24 | }; 25 | -------------------------------------------------------------------------------- /types/components/free/components/MDBCardBody.vue.d.ts: -------------------------------------------------------------------------------- 1 | import { PropType } from "vue"; 2 | declare const _default: __VLS_WithTemplateSlots; 9 | }; 10 | }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly; 17 | }; 18 | }>>, { 19 | tag: string; 20 | }, {}>, { 21 | default?(_: {}): any; 22 | }>; 23 | export default _default; 24 | type __VLS_WithTemplateSlots = T & { 25 | new (): { 26 | $slots: S; 27 | }; 28 | }; 29 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBTabPane.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 20 | tag: string; 21 | }, {}>, { 22 | default?(_: {}): any; 23 | }>; 24 | export default _default; 25 | type __VLS_WithTemplateSlots = T & { 26 | new (): { 27 | $slots: S; 28 | }; 29 | }; 30 | -------------------------------------------------------------------------------- /src/components/free/components/MDBSpinner.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 44 | -------------------------------------------------------------------------------- /types/components/free/components/MDBModalTitle.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 20 | tag: string; 21 | bold: boolean; 22 | }, {}>, { 23 | default?(_: {}): any; 24 | }>; 25 | export default _default; 26 | type __VLS_WithTemplateSlots = T & { 27 | new (): { 28 | $slots: S; 29 | }; 30 | }; 31 | -------------------------------------------------------------------------------- /types/components/free/components/MDBCardTitle.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 20 | tag: string; 21 | subtitle: boolean; 22 | }, {}>, { 23 | default?(_: {}): any; 24 | }>; 25 | export default _default; 26 | type __VLS_WithTemplateSlots = T & { 27 | new (): { 28 | $slots: S; 29 | }; 30 | }; 31 | -------------------------------------------------------------------------------- /src/components/free/navigation/MDBFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 44 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBTabItem.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 22 | tag: string; 23 | }, {}>, { 24 | default?(_: {}): any; 25 | default?(_: {}): any; 26 | }>; 27 | export default _default; 28 | type __VLS_WithTemplateSlots = T & { 29 | new (): { 30 | $slots: S; 31 | }; 32 | }; 33 | -------------------------------------------------------------------------------- /src/scss/standard/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/components/free/components/MDBCard.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 44 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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 | -------------------------------------------------------------------------------- /types/components/free/components/MDBCard.vue.d.ts: -------------------------------------------------------------------------------- 1 | import { PropType } from "vue"; 2 | declare const _default: __VLS_WithTemplateSlots; 10 | shadow: StringConstructor; 11 | }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly; 19 | shadow: StringConstructor; 20 | }>>, { 21 | tag: string; 22 | }, {}>, { 23 | default?(_: {}): any; 24 | }>; 25 | export default _default; 26 | type __VLS_WithTemplateSlots = T & { 27 | new (): { 28 | $slots: S; 29 | }; 30 | }; 31 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBFooter.vue.d.ts: -------------------------------------------------------------------------------- 1 | import { PropType } from "vue"; 2 | declare const _default: __VLS_WithTemplateSlots; 12 | }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly; 22 | }>>, { 23 | tag: string; 24 | bg: string; 25 | }, {}>, { 26 | default?(_: {}): any; 27 | }>; 28 | export default _default; 29 | type __VLS_WithTemplateSlots = T & { 30 | new (): { 31 | $slots: S; 32 | }; 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/utils/MDBKeycodes.ts: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBTabContent.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 22 | tag: string; 23 | col: string; 24 | }, {}>, { 25 | default?(_: {}): any; 26 | default?(_: {}): any; 27 | }>; 28 | export default _default; 29 | type __VLS_WithTemplateSlots = T & { 30 | new (): { 31 | $slots: S; 32 | }; 33 | }; 34 | -------------------------------------------------------------------------------- /src/scss/standard/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 | -------------------------------------------------------------------------------- /types/components/free/components/MDBSpinner.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 24 | tag: string; 25 | grow: boolean; 26 | }, {}>, { 27 | default?(_: {}): any; 28 | }>; 29 | export default _default; 30 | type __VLS_WithTemplateSlots = T & { 31 | new (): { 32 | $slots: S; 33 | }; 34 | }; 35 | -------------------------------------------------------------------------------- /src/scss/standard/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/components/free/navigation/MDBTabContent.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 20 | 21 | 45 | -------------------------------------------------------------------------------- /types/components/free/components/MDBBtnGroup.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 24 | tag: string; 25 | role: string; 26 | vertical: boolean; 27 | }, {}>, { 28 | default?(_: {}): any; 29 | }>; 30 | export default _default; 31 | type __VLS_WithTemplateSlots = T & { 32 | new (): { 33 | $slots: S; 34 | }; 35 | }; 36 | -------------------------------------------------------------------------------- /src/scss/standard/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 | -------------------------------------------------------------------------------- /types/components/free/content-styles/MDBIcon.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 22 | iconStyle: string; 23 | fw: boolean; 24 | solid: boolean; 25 | }, {}>, { 26 | default?(_: {}): any; 27 | }>; 28 | export default _default; 29 | type __VLS_WithTemplateSlots = T & { 30 | new (): { 31 | $slots: S; 32 | }; 33 | }; 34 | -------------------------------------------------------------------------------- /src/directives/free/mdbClickOutside.ts: -------------------------------------------------------------------------------- 1 | import type { DirectiveBinding } from "vue"; 2 | 3 | interface Element extends HTMLElement { 4 | clickOutside?: (e: Event) => void; 5 | } 6 | 7 | export default { 8 | stopProp(e: Event) { 9 | e.stopPropagation(); 10 | }, 11 | 12 | mounted(el: Element, binding: DirectiveBinding) { 13 | const handler = (e: Event) => { 14 | const target = e.target as HTMLElement; 15 | if (!el.contains(target) && el !== target) { 16 | binding.value(e); 17 | } 18 | }; 19 | el.clickOutside = handler; 20 | 21 | const event = binding.modifiers.mousedown ? "mousedown" : "click"; 22 | 23 | document.addEventListener(event, (e) => el.clickOutside?.(e)); 24 | document.addEventListener("touchstart", (e) => el.clickOutside?.(e)); 25 | }, 26 | 27 | unmounted(el: Element, binding: DirectiveBinding) { 28 | if (!el.clickOutside) return; 29 | 30 | const event = binding.modifiers.mousedown ? "mousedown" : "click"; 31 | 32 | document.removeEventListener(event, (e) => el.clickOutside?.(e)); 33 | document.removeEventListener("touchstart", (e) => el.clickOutside?.(e)); 34 | delete el.clickOutside; 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBBreadcrumbItem.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 28 | tag: string; 29 | active: boolean; 30 | current: string; 31 | }, {}>, { 32 | default?(_: {}): any; 33 | }>; 34 | export default _default; 35 | type __VLS_WithTemplateSlots = T & { 36 | new (): { 37 | $slots: S; 38 | }; 39 | }; 40 | -------------------------------------------------------------------------------- /src/scss/standard/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/components/free/components/MDBListGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 53 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | MIT license for MDB Free 2 | 3 | Free packages are available under the MIT License. 4 | 5 | -- Highlights 6 | 7 | ● Free for personal use 8 | ● Free for commercial use 9 | ● No attribution required 10 | 11 | -- Copyright notice 12 | 13 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions. 14 | 15 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | The software is provided "As is", without warranty of any kind, express or implied, including but not limited To the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall The authors or copyright holders be liable for any claim, damages or other liability, whether in an action of Contract, tort or otherwise, arising from, out of or in connection with the software or the use or other Dealings in the software. -------------------------------------------------------------------------------- /src/components/free/navigation/MDBNavbarNav.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 60 | -------------------------------------------------------------------------------- /src/components/free/navigation/MDBTabNav.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | 18 | 52 | -------------------------------------------------------------------------------- /src/scss/standard/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 | -------------------------------------------------------------------------------- /types/components/free/components/MDBBadge.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 26 | pill: boolean; 27 | dot: boolean; 28 | notification: boolean; 29 | tag: string; 30 | }, {}>, { 31 | default?(_: {}): any; 32 | }>; 33 | export default _default; 34 | type __VLS_WithTemplateSlots = T & { 35 | new (): { 36 | $slots: S; 37 | }; 38 | }; 39 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/components/free/components/MDBCardImg.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 19 | 20 | 61 | -------------------------------------------------------------------------------- /src/scss/standard/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 | -------------------------------------------------------------------------------- /types/components/free/components/MDBModalHeader.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 30 | tag: string; 31 | close: boolean; 32 | closeWhite: boolean; 33 | }, {}>, { 34 | default?(_: {}): any; 35 | }>; 36 | export default _default; 37 | type __VLS_WithTemplateSlots = T & { 38 | new (): { 39 | $slots: S; 40 | }; 41 | }; 42 | -------------------------------------------------------------------------------- /src/components/free/navigation/MDBNavbarToggler.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 20 | 21 | 53 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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/components/free/components/MDBAccordion.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 51 | -------------------------------------------------------------------------------- /types/components/free/forms/MDBSwitch.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: import("vue").DefineComponent<{ 2 | id: StringConstructor; 3 | inputClass: StringConstructor; 4 | label: StringConstructor; 5 | labelClass: StringConstructor; 6 | modelValue: { 7 | type: BooleanConstructor; 8 | default: boolean; 9 | }; 10 | tag: { 11 | type: StringConstructor; 12 | default: string; 13 | }; 14 | wrapperClass: StringConstructor; 15 | }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { 16 | "update:modelValue": (...args: any[]) => void; 17 | }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly> & { 32 | "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; 33 | }, { 34 | tag: string; 35 | modelValue: boolean; 36 | }, {}>; 37 | export default _default; 38 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/components/free/layout/MDBContainer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 66 | -------------------------------------------------------------------------------- /types/components/free/components/MDBAccordionItem.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 30 | tag: string; 31 | }, {}>, { 32 | default?(_: {}): any; 33 | }>; 34 | export default _default; 35 | type __VLS_WithTemplateSlots = T & { 36 | new (): { 37 | $slots: S; 38 | }; 39 | }; 40 | -------------------------------------------------------------------------------- /types/components/free/components/MDBAccordion.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots void; 13 | }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly> & { 24 | "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; 25 | }, { 26 | tag: string; 27 | flush: boolean; 28 | stayOpen: boolean; 29 | borderless: boolean; 30 | }, {}>, { 31 | default?(_: {}): any; 32 | }>; 33 | export default _default; 34 | type __VLS_WithTemplateSlots = T & { 35 | new (): { 36 | $slots: S; 37 | }; 38 | }; 39 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBTabNav.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 28 | fill: boolean; 29 | tag: string; 30 | col: string; 31 | pills: boolean; 32 | justify: boolean; 33 | }, {}>, { 34 | default?(_: {}): any; 35 | default?(_: {}): any; 36 | }>; 37 | export default _default; 38 | type __VLS_WithTemplateSlots = T & { 39 | new (): { 40 | $slots: S; 41 | }; 42 | }; 43 | -------------------------------------------------------------------------------- /src/scss/free/_input-group.scss: -------------------------------------------------------------------------------- 1 | .input-group { 2 | .btn-group { 3 | box-shadow: none; 4 | } 5 | 6 | &:not(.has-validation) > .btn-group:not(:last-child) { 7 | > :not(:last-child):not(.dropdown-menu), 8 | > .dropdown-toggle:last-child, 9 | .dropdown-toggle:nth-last-child(n + 1) { 10 | @include border-end-radius(0); 11 | } 12 | } 13 | 14 | &.has-validation > .btn-group { 15 | > :last-child:not(.dropdown-toggle):not(.dropdown-menu), 16 | > .dropdown-toggle:last-child { 17 | @include border-end-radius(0); 18 | } 19 | } 20 | 21 | > .btn-group:last-child { 22 | > :first-child:not(.dropdown-menu) { 23 | @include border-start-radius(0); 24 | } 25 | } 26 | } 27 | 28 | .input-group-text { 29 | min-height: $input-group-min-height; 30 | height: $input-group-height; 31 | } 32 | 33 | .input-group-lg { 34 | .input-group-text { 35 | height: $input-group-lg-height; 36 | font-size: $input-group-lg-text-font-size; 37 | } 38 | } 39 | 40 | .input-group-sm { 41 | .input-group-text { 42 | min-height: $input-group-sm-min-height; 43 | height: $input-group-sm-height; 44 | font-size: $input-group-sm-text-font-size; 45 | line-height: $input-group-sm-text-line-height; 46 | } 47 | } 48 | 49 | .form-outline .form-control:focus ~ .form-label ~ .form-label { 50 | transform: none; 51 | color: rgba(0, 0, 0, 0.6); 52 | } 53 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBPagination.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 36 | tag: string; 37 | circle: boolean; 38 | sm: boolean; 39 | lg: boolean; 40 | }, {}>, { 41 | default?(_: {}): any; 42 | }>; 43 | export default _default; 44 | type __VLS_WithTemplateSlots = T & { 45 | new (): { 46 | $slots: S; 47 | }; 48 | }; 49 | -------------------------------------------------------------------------------- /types/components/utils/MDBKeycodes.d.ts: -------------------------------------------------------------------------------- 1 | export declare const LEFT_ARROW = 37; 2 | export declare const UP_ARROW = 38; 3 | export declare const RIGHT_ARROW = 39; 4 | export declare const DOWN_ARROW = 40; 5 | export declare const HOME = 36; 6 | export declare const END = 35; 7 | export declare const PAGE_UP = 33; 8 | export declare const PAGE_DOWN = 34; 9 | export declare const ENTER = 13; 10 | export declare const SPACE = 32; 11 | export declare const ESCAPE = 27; 12 | export declare const TAB = 9; 13 | export declare const BACKSPACE = 8; 14 | export declare const DELETE = 46; 15 | export declare const A = 65; 16 | export declare const B = 66; 17 | export declare const C = 67; 18 | export declare const D = 68; 19 | export declare const E = 69; 20 | export declare const F = 70; 21 | export declare const G = 71; 22 | export declare const H = 72; 23 | export declare const I = 73; 24 | export declare const J = 74; 25 | export declare const K = 75; 26 | export declare const L = 76; 27 | export declare const M = 77; 28 | export declare const N = 78; 29 | export declare const O = 79; 30 | export declare const P = 80; 31 | export declare const Q = 81; 32 | export declare const R = 82; 33 | export declare const S = 83; 34 | export declare const T = 84; 35 | export declare const U = 85; 36 | export declare const V = 86; 37 | export declare const W = 87; 38 | export declare const X = 88; 39 | export declare const Y = 89; 40 | export declare const Z = 90; 41 | -------------------------------------------------------------------------------- /src/components/free/layout/MDBCol.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 54 | -------------------------------------------------------------------------------- /src/components/free/navigation/MDBPageItem.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 24 | 25 | 61 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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/standard/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/standard/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/components/free/layout/MDBRow.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 65 | -------------------------------------------------------------------------------- /src/scss/free/_tooltips.scss: -------------------------------------------------------------------------------- 1 | .tooltip .tooltip_arrow { 2 | width: 0; 3 | height: 0; 4 | border-style: solid; 5 | position: absolute; 6 | margin: 5px; 7 | } 8 | 9 | .tooltip[data-popper-placement^="top"] .tooltip_arrow { 10 | border-width: 5px 5px 0 5px; 11 | border-color: $tooltip-bg transparent transparent transparent; 12 | bottom: -5px; 13 | left: calc(50% - 5px); 14 | margin-top: 0; 15 | margin-bottom: 0; 16 | left: -5px !important; 17 | } 18 | 19 | .tooltip[data-popper-placement^="bottom"] .tooltip_arrow { 20 | border-width: 0 5px 5px 5px; 21 | border-color: transparent transparent $tooltip-bg transparent; 22 | top: -5px; 23 | left: calc(50% - 5px); 24 | margin-top: 0; 25 | margin-bottom: 0; 26 | left: -5px !important; 27 | } 28 | 29 | .tooltip[data-popper-placement^="right"] .tooltip_arrow { 30 | border-width: 5px 5px 5px 0; 31 | border-color: transparent $tooltip-bg transparent transparent; 32 | left: -5px; 33 | top: calc(50% - 5px); 34 | margin-left: 0; 35 | margin-right: 0; 36 | top: -5px !important; 37 | } 38 | 39 | .tooltip[data-popper-placement^="left"] .tooltip_arrow { 40 | border-width: 5px 0 5px 5px; 41 | border-color: transparent transparent transparent $tooltip-bg; 42 | right: -5px; 43 | top: calc(50% - 5px); 44 | margin-left: 0; 45 | margin-right: 0; 46 | top: -5px !important; 47 | } 48 | 49 | .fade-leave-active, 50 | .fade-enter-active { 51 | transition: opacity 0.2s linear; 52 | } 53 | 54 | .fade-enter-to, 55 | .fade-leave-from { 56 | opacity: 1; 57 | } 58 | 59 | .tooltip { 60 | position: absolute; 61 | } 62 | -------------------------------------------------------------------------------- /types/components/free/components/MDBListGroup.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 34 | tag: string; 35 | light: boolean; 36 | small: boolean; 37 | flush: boolean; 38 | horizontal: string | boolean; 39 | numbered: boolean; 40 | }, {}>, { 41 | default?(_: {}): any; 42 | }>; 43 | export default _default; 44 | type __VLS_WithTemplateSlots = T & { 45 | new (): { 46 | $slots: S; 47 | }; 48 | }; 49 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBNavbarToggler.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: import("vue").DefineComponent<{ 2 | tag: { 3 | type: StringConstructor; 4 | default: string; 5 | }; 6 | target: { 7 | type: StringConstructor; 8 | default: string; 9 | }; 10 | togglerClass: StringConstructor; 11 | togglerIcon: { 12 | type: StringConstructor; 13 | default: string; 14 | }; 15 | togglerSize: { 16 | type: StringConstructor; 17 | default: string; 18 | }; 19 | iconStyle: { 20 | type: StringConstructor; 21 | default: string; 22 | }; 23 | }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly>, { 46 | tag: string; 47 | target: string; 48 | iconStyle: string; 49 | togglerIcon: string; 50 | togglerSize: string; 51 | }, {}>; 52 | export default _default; 53 | -------------------------------------------------------------------------------- /src/components/free/navigation/MDBNavbarItem.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 24 | 25 | 69 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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 | -------------------------------------------------------------------------------- /types/components/free/layout/MDBCol.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 40 | tag: string; 41 | auto: boolean; 42 | }, {}>, { 43 | default?(_: {}): any; 44 | }>; 45 | export default _default; 46 | type __VLS_WithTemplateSlots = T & { 47 | new (): { 48 | $slots: S; 49 | }; 50 | }; 51 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBPageItem.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 44 | tag: string; 45 | disabled: boolean; 46 | active: boolean; 47 | icon: boolean; 48 | }, {}>, { 49 | default?(_: {}): any; 50 | default?(_: {}): any; 51 | }>; 52 | export default _default; 53 | type __VLS_WithTemplateSlots = T & { 54 | new (): { 55 | $slots: S; 56 | }; 57 | }; 58 | -------------------------------------------------------------------------------- /src/components/utils/useScrollbarWidth.ts: -------------------------------------------------------------------------------- 1 | import { ref } from "vue"; 2 | 3 | const debounce = ref(false); 4 | 5 | const onlyModal = ref(); 6 | 7 | const isOnlyModal = () => { 8 | onlyModal.value = !document.body.classList.contains("modal-open"); 9 | }; 10 | 11 | export const useScrollbarWidth = () => { 12 | // Animation 13 | const defaultPaddingRight = document.body.style.paddingRight; 14 | const getScrollbarWidth = () => { 15 | const scrollDiv = document.createElement("div"); 16 | scrollDiv.className = "modal-scrollbar-measure"; 17 | document.body.appendChild(scrollDiv); 18 | const scrollbarWidth = 19 | scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth; 20 | document.body.removeChild(scrollDiv); 21 | return scrollbarWidth; 22 | }; 23 | const beforeEnter = () => { 24 | if (document.body.scrollHeight > window.innerHeight) { 25 | !onlyModal.value && isOnlyModal(); 26 | debounce.value = true; 27 | document.body.classList.add("modal-open"); 28 | if (onlyModal.value) { 29 | const paddingRightWhenActive = Number(getScrollbarWidth().toFixed(2)); 30 | if (paddingRightWhenActive > 0) { 31 | document.body.style.paddingRight = `${paddingRightWhenActive}px`; 32 | } 33 | setTimeout(() => (debounce.value = false), 500); 34 | } 35 | } 36 | }; 37 | const afterLeave = () => { 38 | if (debounce.value) return; 39 | if (onlyModal.value) { 40 | document.body.classList.remove("modal-open"); 41 | document.body.style.paddingRight = defaultPaddingRight; 42 | } 43 | }; 44 | 45 | return { 46 | beforeEnter, 47 | afterLeave, 48 | }; 49 | }; 50 | -------------------------------------------------------------------------------- /src/components/free/components/MDBListGroupItem.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 19 | 20 | 72 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBPageNav.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: import("vue").DefineComponent<{ 2 | tag: { 3 | type: StringConstructor; 4 | default: string; 5 | }; 6 | disabled: { 7 | type: BooleanConstructor; 8 | default: boolean; 9 | }; 10 | href: { 11 | type: StringConstructor; 12 | default: string; 13 | }; 14 | prev: { 15 | type: BooleanConstructor; 16 | default: boolean; 17 | }; 18 | next: { 19 | type: BooleanConstructor; 20 | default: boolean; 21 | }; 22 | icon: { 23 | type: BooleanConstructor; 24 | default: boolean; 25 | }; 26 | }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly>, { 52 | tag: string; 53 | disabled: boolean; 54 | next: boolean; 55 | prev: boolean; 56 | href: string; 57 | icon: boolean; 58 | }, {}>; 59 | export default _default; 60 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBTabs.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots void; 13 | show: (...args: any[]) => void; 14 | hide: (...args: any[]) => void; 15 | hidden: (...args: any[]) => void; 16 | shown: (...args: any[]) => void; 17 | }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly> & { 28 | "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; 29 | onShow?: ((...args: any[]) => any) | undefined; 30 | onHide?: ((...args: any[]) => any) | undefined; 31 | onHidden?: ((...args: any[]) => any) | undefined; 32 | onShown?: ((...args: any[]) => any) | undefined; 33 | }, { 34 | tag: string; 35 | vertical: string | boolean; 36 | }, {}>, { 37 | default?(_: {}): any; 38 | default?(_: {}): any; 39 | }>; 40 | export default _default; 41 | type __VLS_WithTemplateSlots = T & { 42 | new (): { 43 | $slots: S; 44 | }; 45 | }; 46 | -------------------------------------------------------------------------------- /src/components/free/forms/MDBSwitch.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 21 | 22 | 66 | -------------------------------------------------------------------------------- /src/components/free/navigation/MDBPageNav.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 33 | 34 | 69 | -------------------------------------------------------------------------------- /src/scss/standard/free/_progress.scss: -------------------------------------------------------------------------------- 1 | // Progress 2 | 3 | .progress { 4 | border-radius: 0; 5 | box-shadow: none; 6 | } 7 | 8 | .progress-circular { 9 | --#{$prefix}progress-circular-size: #{$progress-circular-size}; 10 | --#{$prefix}progress-circular-bar-width: #{$progress-circular-bar-width}; 11 | --#{$prefix}progress-circular-color: var(--#{$prefix}emphasis-color); 12 | 13 | position: relative; 14 | width: var(--#{$prefix}progress-circular-size); 15 | height: var(--#{$prefix}progress-circular-size); 16 | background-color: transparent; 17 | display: inline-block; 18 | 19 | .progress-bar { 20 | background-color: var(--#{$prefix}progress-bar-bg); 21 | } 22 | 23 | .progress-bar::before { 24 | content: ''; 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 100%; 30 | border-radius: 50%; 31 | box-sizing: border-box; 32 | 33 | background: conic-gradient( 34 | transparent calc(var(--percentage) * 1%), 35 | var(--#{$prefix}progress-bg) 0% 36 | ); 37 | -webkit-mask: radial-gradient( 38 | farthest-side, 39 | transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)), 40 | black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px) 41 | ); 42 | mask: radial-gradient( 43 | farthest-side, 44 | transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)), 45 | black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px) 46 | ); 47 | background-color: inherit; 48 | } 49 | 50 | .progress-label { 51 | position: absolute; 52 | top: 50%; 53 | left: 50%; 54 | transform: translate(-50%, -50%); 55 | color: var(--#{$prefix}progress-circular-color); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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 | -------------------------------------------------------------------------------- /types/components/free/components/MDBCardImg.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 54 | tag: string; 55 | top: boolean; 56 | bottom: boolean; 57 | fluid: boolean; 58 | overlay: boolean; 59 | }, {}>, { 60 | default?(_: {}): any; 61 | }>; 62 | export default _default; 63 | type __VLS_WithTemplateSlots = T & { 64 | new (): { 65 | $slots: S; 66 | }; 67 | }; 68 | -------------------------------------------------------------------------------- /src/scss/standard/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/standard/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 | -------------------------------------------------------------------------------- /types/components/free/navigation/MDBNavbarItem.vue.d.ts: -------------------------------------------------------------------------------- 1 | import { PropType } from "vue"; 2 | declare const _default: __VLS_WithTemplateSlots; 23 | href: StringConstructor; 24 | linkClass: StringConstructor; 25 | }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly; 46 | href: StringConstructor; 47 | linkClass: StringConstructor; 48 | }>>, { 49 | tag: string; 50 | disabled: boolean; 51 | active: boolean; 52 | exact: boolean; 53 | newTab: boolean; 54 | }, {}>, { 55 | default?(_: {}): any; 56 | default?(_: {}): any; 57 | default?(_: {}): any; 58 | }>; 59 | export default _default; 60 | type __VLS_WithTemplateSlots = T & { 61 | new (): { 62 | $slots: S; 63 | }; 64 | }; 65 | -------------------------------------------------------------------------------- /types/components/free/components/MDBCollapse.vue.d.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from "vue"; 2 | declare const _default: __VLS_WithTemplateSlots; 24 | }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { 25 | "update:modelValue": (...args: any[]) => void; 26 | }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly> & { 47 | "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; 48 | }, { 49 | tag: string; 50 | modelValue: boolean; 51 | horizontal: boolean; 52 | duration: number; 53 | sidenav: boolean; 54 | }, {}>, { 55 | default?(_: {}): any; 56 | }>; 57 | export default _default; 58 | type __VLS_WithTemplateSlots = T & { 59 | new (): { 60 | $slots: S; 61 | }; 62 | }; 63 | -------------------------------------------------------------------------------- /src/components/free/components/MDBProgressBar.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | 24 | 90 | -------------------------------------------------------------------------------- /src/scss/standard/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 | --------------------------------------------------------------------------------