├── .babelrc.js ├── .browserslistrc ├── .bundlewatch.config.json ├── .cspell.json ├── .editorconfig ├── .gitattributes ├── .github ├── CONTRIBUTING.md ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── config.yml │ └── feature_request.md ├── SUPPORT.md ├── codeql │ └── codeql-config.yml ├── dependabot.yml └── workflows │ ├── bundlewatch.yml │ ├── codeql.yml │ ├── css.yml │ ├── docs.yml │ ├── js.yml │ └── lint.yml ├── .gitignore ├── .hugo_build.lock ├── .stylelintignore ├── .stylelintrc ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── SECURITY.md ├── build ├── banner.mjs ├── build-plugins.mjs ├── change-version.mjs ├── generate-sri.mjs ├── llm.mjs ├── postcss.config.mjs ├── rollup.config.mjs └── vnu-jar.mjs ├── composer.json ├── dist ├── css │ ├── coreui-grid.css │ ├── coreui-grid.css.map │ ├── coreui-grid.min.css │ ├── coreui-grid.min.css.map │ ├── coreui-grid.rtl.css │ ├── coreui-grid.rtl.css.map │ ├── coreui-grid.rtl.min.css │ ├── coreui-grid.rtl.min.css.map │ ├── coreui-reboot.css │ ├── coreui-reboot.css.map │ ├── coreui-reboot.min.css │ ├── coreui-reboot.min.css.map │ ├── coreui-reboot.rtl.css │ ├── coreui-reboot.rtl.css.map │ ├── coreui-reboot.rtl.min.css │ ├── coreui-reboot.rtl.min.css.map │ ├── coreui-utilities.css │ ├── coreui-utilities.css.map │ ├── coreui-utilities.min.css │ ├── coreui-utilities.min.css.map │ ├── coreui-utilities.rtl.css │ ├── coreui-utilities.rtl.css.map │ ├── coreui-utilities.rtl.min.css │ ├── coreui-utilities.rtl.min.css.map │ ├── coreui.css │ ├── coreui.css.map │ ├── coreui.min.css │ ├── coreui.min.css.map │ ├── coreui.rtl.css │ ├── coreui.rtl.css.map │ ├── coreui.rtl.min.css │ ├── coreui.rtl.min.css.map │ └── themes │ │ └── bootstrap │ │ ├── bootstrap.css │ │ ├── bootstrap.css.map │ │ ├── bootstrap.min.css │ │ ├── bootstrap.min.css.map │ │ ├── bootstrap.rtl.css │ │ ├── bootstrap.rtl.css.map │ │ ├── bootstrap.rtl.min.css │ │ └── bootstrap.rtl.min.css.map └── js │ ├── bootstrap.bundle.js │ ├── bootstrap.bundle.js.map │ ├── bootstrap.bundle.min.js │ ├── bootstrap.bundle.min.js.map │ ├── bootstrap.esm.js │ ├── bootstrap.esm.js.map │ ├── bootstrap.esm.min.js │ ├── bootstrap.esm.min.js.map │ ├── bootstrap.js │ ├── bootstrap.js.map │ ├── bootstrap.min.js │ ├── bootstrap.min.js.map │ ├── coreui.bundle.js │ ├── coreui.bundle.js.map │ ├── coreui.bundle.min.js │ ├── coreui.bundle.min.js.map │ ├── coreui.esm.js │ ├── coreui.esm.js.map │ ├── coreui.esm.min.js │ ├── coreui.esm.min.js.map │ ├── coreui.js │ ├── coreui.js.map │ ├── coreui.min.js │ └── coreui.min.js.map ├── docs ├── assets │ ├── css │ │ └── all-icons.css │ ├── js │ │ ├── application.js │ │ ├── partials │ │ │ ├── code-examples.js │ │ │ ├── sidebar.js │ │ │ └── snippets.js │ │ ├── search.js │ │ ├── snippets.js │ │ ├── snowflakes.js │ │ ├── stackblitz.js │ │ └── vendor │ │ │ └── anchor.min.js │ └── scss │ │ ├── _ads.scss │ │ ├── _anchor.scss │ │ ├── _banner.scss │ │ ├── _buttons.scss │ │ ├── _callouts.scss │ │ ├── _clipboard-js.scss │ │ ├── _colors.scss │ │ ├── _component-examples.scss │ │ ├── _content.scss │ │ ├── _footer.scss │ │ ├── _header.scss │ │ ├── _layout.scss │ │ ├── _placeholder-img.scss │ │ ├── _pricing.scss │ │ ├── _root.scss │ │ ├── _scrolling.scss │ │ ├── _sidebar.scss │ │ ├── _skippy.scss │ │ ├── _syntax.scss │ │ ├── _toc.scss │ │ ├── _variables.scss │ │ ├── docs-pickers.scss │ │ ├── docs.scss │ │ └── search.scss ├── content │ ├── 3.4 │ │ ├── browser-bugs.md │ │ ├── components │ │ │ ├── jumbotron.md │ │ │ ├── masked-input.md │ │ │ └── media-object.md │ │ └── utilities │ │ │ ├── embed.md │ │ │ └── screen-readers.md │ ├── 404.md │ ├── _index.html │ ├── components │ │ ├── accordion.md │ │ ├── alerts.md │ │ ├── avatar.md │ │ ├── badge.md │ │ ├── breadcrumb.md │ │ ├── button-group.md │ │ ├── buttons.md │ │ ├── calendar.md │ │ ├── callout.md │ │ ├── card.md │ │ ├── carousel.md │ │ ├── close-button.md │ │ ├── collapse.md │ │ ├── dropdowns.md │ │ ├── footer.md │ │ ├── header.md │ │ ├── jumbotron.md │ │ ├── list-group.md │ │ ├── loading-buttons.md │ │ ├── modal.md │ │ ├── navbar.md │ │ ├── navs-tabs.md │ │ ├── offcanvas.md │ │ ├── pagination.md │ │ ├── placeholders.md │ │ ├── popovers.md │ │ ├── progress.md │ │ ├── scrollspy.md │ │ ├── sidebar.md │ │ ├── spinners.md │ │ ├── toasts.md │ │ └── tooltips.md │ ├── content │ │ ├── figures.md │ │ ├── images.md │ │ ├── reboot.md │ │ ├── tables.md │ │ └── typography.md │ ├── customize │ │ ├── color-modes.md │ │ ├── color.md │ │ ├── components.md │ │ ├── css-variables.md │ │ ├── optimize.md │ │ ├── options.md │ │ ├── overview.md │ │ └── sass.md │ ├── forms │ │ ├── checks-radios.md │ │ ├── date-picker.md │ │ ├── date-range-picker.md │ │ ├── floating-labels.md │ │ ├── form-control.md │ │ ├── input-group.md │ │ ├── layout.md │ │ ├── multi-select.md │ │ ├── overview.md │ │ ├── password-input.md │ │ ├── range-slider.md │ │ ├── range.md │ │ ├── rating.md │ │ ├── select.md │ │ ├── stepper.md │ │ ├── time-picker.md │ │ └── validation.md │ ├── getting-started │ │ ├── accessibility.md │ │ ├── browsers-devices.md │ │ ├── build-tools.md │ │ ├── contents.md │ │ ├── download.md │ │ ├── introduction.md │ │ ├── javascript.md │ │ ├── parcel.md │ │ ├── rfs.md │ │ ├── rtl.md │ │ ├── vite.md │ │ └── webpack.md │ ├── helpers │ │ ├── clearfix.md │ │ ├── color-background.md │ │ ├── colored-links.md │ │ ├── focus-ring.md │ │ ├── icon-link.md │ │ ├── position.md │ │ ├── ratio.md │ │ ├── stacks.md │ │ ├── stretched-link.md │ │ ├── text-truncation.md │ │ ├── vertical-rule.md │ │ └── visually-hidden.md │ ├── icons.md │ ├── integration-guides │ │ └── laravel.md │ ├── layout │ │ ├── breakpoints.md │ │ ├── columns.md │ │ ├── container-queries-grid.md │ │ ├── containers.md │ │ ├── css-grid.md │ │ ├── grid.md │ │ ├── gutters.md │ │ ├── utilities.md │ │ └── z-index.md │ ├── migration │ │ ├── v4.md │ │ └── v5.md │ ├── pricing │ │ └── _index.md │ ├── templates │ │ ├── admin-dashboard.md │ │ ├── contents.md │ │ ├── customize.md │ │ ├── download.md │ │ └── installation.md │ └── utilities │ │ ├── api.md │ │ ├── background.md │ │ ├── borders.md │ │ ├── colors.md │ │ ├── display.md │ │ ├── flex.md │ │ ├── float.md │ │ ├── interactions.md │ │ ├── link.md │ │ ├── object-fit.md │ │ ├── opacity.md │ │ ├── overflow.md │ │ ├── position.md │ │ ├── shadows.md │ │ ├── sizing.md │ │ ├── spacing.md │ │ ├── text.md │ │ ├── vertical-align.md │ │ ├── visibility.md │ │ └── z-index.md ├── data │ ├── breakpoints.yml │ ├── colors.yml │ ├── grays.yml │ ├── other_frameworks.json │ ├── plugins.yml │ ├── sidebar.yml │ └── theme-colors.yml ├── layouts │ ├── _default │ │ ├── 404.html │ │ ├── _markup │ │ │ └── render-heading.html │ │ ├── baseof.html │ │ ├── docs.html │ │ ├── docs.markdown.md │ │ ├── pricing.html │ │ ├── redirect.html │ │ └── section.html │ ├── alias.html │ ├── partials │ │ ├── ads.html │ │ ├── analytics.html │ │ ├── banner-black-friday.html │ │ ├── banner-new-year.html │ │ ├── banner-xmas.html │ │ ├── banner.html │ │ ├── breadcrumb.html │ │ ├── callouts │ │ │ ├── danger-async-methods.md │ │ │ ├── info-mediaqueries-breakpoints.md │ │ │ ├── info-prefersreducedmotion.md │ │ │ ├── info-sanitizer.md │ │ │ ├── warning-color-assistive-technologies.md │ │ │ ├── warning-data-bs-title-vs-title.md │ │ │ └── warning-input-support.md │ │ ├── favicons.html │ │ ├── footer.html │ │ ├── head.html │ │ ├── header.html │ │ ├── icons │ │ │ ├── check.svg │ │ │ ├── cloud-download.svg │ │ │ ├── color-fill.svg │ │ │ ├── color-palette.svg │ │ │ ├── contrast.svg │ │ │ ├── coreui-base.svg │ │ │ ├── devices.svg │ │ │ ├── energy.svg │ │ │ ├── github.svg │ │ │ ├── hamburger.svg │ │ │ ├── handshake.svg │ │ │ ├── healing.svg │ │ │ ├── input-power.svg │ │ │ ├── list-rich.svg │ │ │ ├── moon.svg │ │ │ ├── opencollective.svg │ │ │ ├── pen-alt.svg │ │ │ ├── pen-nib.svg │ │ │ ├── sun.svg │ │ │ ├── twitter.svg │ │ │ ├── update.svg │ │ │ └── view-quilt.svg │ │ ├── js-data-attributes.md │ │ ├── redirect.html │ │ ├── scripts.html │ │ ├── sidebar.html │ │ ├── social.html │ │ ├── stylesheet.html │ │ └── table-content.html │ ├── robots.txt │ ├── shortcodes │ │ ├── added-in.html │ │ ├── bootstrap-compatibility.html │ │ ├── bs-table.html │ │ ├── callout-canary-releases.html │ │ ├── callout-dart-sass-deprecations.html │ │ ├── callout-dart-sass-modules.html │ │ ├── callout-deprecated-dark-variants.html │ │ ├── callout.html │ │ ├── canary-version.html │ │ ├── deprecated-in.html │ │ ├── docsref.html │ │ ├── example.html │ │ ├── js-dismiss.html │ │ ├── js-docs.html │ │ ├── markdown.html │ │ ├── param.html │ │ ├── partial.html │ │ ├── placeholder.html │ │ ├── scss-docs.html │ │ ├── tab.html │ │ ├── table.html │ │ └── tabs.html │ └── sitemap.xml └── static │ ├── CNAME │ ├── assets │ ├── brand │ │ ├── coreui-logo-white.svg │ │ ├── coreui-logo.svg │ │ ├── coreui-signet.svg │ │ ├── coreui-social.jpg │ │ └── signet-social-logo.png │ ├── img │ │ ├── avatars │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── 4.jpg │ │ │ ├── 5.jpg │ │ │ ├── 6.jpg │ │ │ ├── 7.jpg │ │ │ ├── 8.jpg │ │ │ └── 9.jpg │ │ ├── black-hexagon400h.webp │ │ ├── christmas-tree.svg │ │ ├── core_blue_full_960px.png │ │ ├── coreui_alt_400px_cyber.webp │ │ ├── cyber-bg.png │ │ ├── favicons │ │ │ ├── android-icon-144x144.png │ │ │ ├── android-icon-192x192.png │ │ │ ├── android-icon-36x36.png │ │ │ ├── android-icon-48x48.png │ │ │ ├── android-icon-72x72.png │ │ │ ├── android-icon-96x96.png │ │ │ ├── apple-icon-114x114.png │ │ │ ├── apple-icon-120x120.png │ │ │ ├── apple-icon-144x144.png │ │ │ ├── apple-icon-152x152.png │ │ │ ├── apple-icon-180x180.png │ │ │ ├── apple-icon-57x57.png │ │ │ ├── apple-icon-60x60.png │ │ │ ├── apple-icon-72x72.png │ │ │ ├── apple-icon-76x76.png │ │ │ ├── apple-icon-precomposed.png │ │ │ ├── apple-icon.png │ │ │ ├── browserconfig.xml │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-32x32.png │ │ │ ├── favicon-96x96.png │ │ │ ├── favicon.ico │ │ │ ├── manifest.json │ │ │ ├── ms-icon-144x144.png │ │ │ ├── ms-icon-150x150.png │ │ │ ├── ms-icon-310x310.png │ │ │ ├── ms-icon-70x70.png │ │ │ └── safari-pinned-tab.svg │ │ ├── percents-bg.png │ │ └── rocket.svg │ └── js │ │ ├── color-modes.js │ │ └── validate-forms.js │ ├── fonts │ ├── CoreUI-Icons-Brand.eot │ ├── CoreUI-Icons-Brand.svg │ ├── CoreUI-Icons-Brand.ttf │ ├── CoreUI-Icons-Brand.woff │ ├── CoreUI-Icons-Brand.woff2 │ ├── CoreUI-Icons-Linear.eot │ ├── CoreUI-Icons-Linear.svg │ ├── CoreUI-Icons-Linear.ttf │ ├── CoreUI-Icons-Linear.woff │ ├── CoreUI-Icons-Linear.woff2 │ ├── CoreUI-Icons-Solid.eot │ ├── CoreUI-Icons-Solid.svg │ ├── CoreUI-Icons-Solid.ttf │ ├── CoreUI-Icons-Solid.woff │ └── CoreUI-Icons-Solid.woff2 │ └── sw.js ├── eslint.config.mjs ├── hugo.yml ├── js ├── dist │ ├── alert.js │ ├── alert.js.map │ ├── base-component.js │ ├── base-component.js.map │ ├── button.js │ ├── button.js.map │ ├── calendar.js │ ├── calendar.js.map │ ├── carousel.js │ ├── carousel.js.map │ ├── collapse.js │ ├── collapse.js.map │ ├── date-picker.js │ ├── date-picker.js.map │ ├── date-range-picker.js │ ├── date-range-picker.js.map │ ├── dom │ │ ├── data.js │ │ ├── data.js.map │ │ ├── event-handler.js │ │ ├── event-handler.js.map │ │ ├── manipulator.js │ │ ├── manipulator.js.map │ │ ├── selector-engine.js │ │ └── selector-engine.js.map │ ├── dropdown.js │ ├── dropdown.js.map │ ├── input-password.js │ ├── input-password.js.map │ ├── loading-button.js │ ├── loading-button.js.map │ ├── modal.js │ ├── modal.js.map │ ├── multi-select.js │ ├── multi-select.js.map │ ├── navigation.js │ ├── navigation.js.map │ ├── offcanvas.js │ ├── offcanvas.js.map │ ├── password-input.js │ ├── password-input.js.map │ ├── popover.js │ ├── popover.js.map │ ├── range-slider.js │ ├── range-slider.js.map │ ├── rating.js │ ├── rating.js.map │ ├── scrollspy.js │ ├── scrollspy.js.map │ ├── sidebar.js │ ├── sidebar.js.map │ ├── stepper.js │ ├── stepper.js.map │ ├── tab.js │ ├── tab.js.map │ ├── time-picker.js │ ├── time-picker.js.map │ ├── toast.js │ ├── toast.js.map │ ├── tooltip.js │ ├── tooltip.js.map │ └── util │ │ ├── backdrop.js │ │ ├── backdrop.js.map │ │ ├── calendar.js │ │ ├── calendar.js.map │ │ ├── component-functions.js │ │ ├── component-functions.js.map │ │ ├── config.js │ │ ├── config.js.map │ │ ├── date-range-picker.js │ │ ├── date-range-picker.js.map │ │ ├── focustrap.js │ │ ├── focustrap.js.map │ │ ├── index.js │ │ ├── index.js.map │ │ ├── sanitizer.js │ │ ├── sanitizer.js.map │ │ ├── scrollbar.js │ │ ├── scrollbar.js.map │ │ ├── swipe.js │ │ ├── swipe.js.map │ │ ├── template-factory.js │ │ ├── template-factory.js.map │ │ ├── time.js │ │ └── time.js.map ├── index.esm.js ├── index.umd.js ├── src │ ├── alert.js │ ├── base-component.js │ ├── button.js │ ├── calendar.js │ ├── carousel.js │ ├── collapse.js │ ├── date-picker.js │ ├── date-range-picker.js │ ├── dom │ │ ├── data.js │ │ ├── event-handler.js │ │ ├── manipulator.js │ │ └── selector-engine.js │ ├── dropdown.js │ ├── loading-button.js │ ├── modal.js │ ├── multi-select.js │ ├── navigation.js │ ├── offcanvas.js │ ├── password-input.js │ ├── popover.js │ ├── range-slider.js │ ├── rating.js │ ├── scrollspy.js │ ├── sidebar.js │ ├── stepper.js │ ├── tab.js │ ├── time-picker.js │ ├── toast.js │ ├── tooltip.js │ └── util │ │ ├── backdrop.js │ │ ├── calendar.js │ │ ├── component-functions.js │ │ ├── config.js │ │ ├── date-range-picker.js │ │ ├── focustrap.js │ │ ├── index.js │ │ ├── sanitizer.js │ │ ├── scrollbar.js │ │ ├── swipe.js │ │ ├── template-factory.js │ │ └── time.js └── tests │ ├── README.md │ ├── browsers.js │ ├── helpers │ └── fixture.js │ ├── integration │ ├── bundle-modularity.js │ ├── bundle.js │ ├── index.html │ ├── rollup.bundle-modularity.js │ └── rollup.bundle.js │ ├── karma.conf.js │ ├── unit │ ├── alert.spec.js │ ├── base-component.spec.js │ ├── button.spec.js │ ├── calendar.spec.js │ ├── carousel.spec.js │ ├── collapse.spec.js │ ├── dom │ │ ├── data.spec.js │ │ ├── event-handler.spec.js │ │ ├── manipulator.spec.js │ │ └── selector-engine.spec.js │ ├── dropdown.spec.js │ ├── jquery.spec.js │ ├── modal.spec.js │ ├── offcanvas.spec.js │ ├── popover.spec.js │ ├── range-slider.spec.js │ ├── rating.spec.js │ ├── scrollspy.spec.js │ ├── stepper.spec.js │ ├── tab.spec.js │ ├── time-picker.spec.js │ ├── toast.spec.js │ ├── tooltip.spec.js │ └── util │ │ ├── backdrop.spec.js │ │ ├── calendar.spec.js │ │ ├── component-functions.spec.js │ │ ├── config.spec.js │ │ ├── focustrap.spec.js │ │ ├── index.spec.js │ │ ├── sanitizer.spec.js │ │ ├── scrollbar.spec.js │ │ ├── swipe.spec.js │ │ ├── template-factory.spec.js │ │ └── time.spec.js │ └── visual │ ├── alert.html │ ├── button.html │ ├── carousel.html │ ├── collapse.html │ ├── dropdown.html │ ├── floating-label.html │ ├── input.html │ ├── modal.html │ ├── popover.html │ ├── scrollspy.html │ ├── tab.html │ ├── toast.html │ └── tooltip.html ├── nuget ├── coreui.nuspec ├── coreui.png └── coreui.sass.nuspec ├── package-lock.json ├── package.js ├── package.json └── scss ├── _accordion.import.scss ├── _accordion.scss ├── _alert.import.scss ├── _alert.scss ├── _avatar.import.scss ├── _avatar.scss ├── _badge.import.scss ├── _badge.scss ├── _banner.scss ├── _breadcrumb.import.scss ├── _breadcrumb.scss ├── _button-group.import.scss ├── _button-group.scss ├── _buttons.import.scss ├── _buttons.scss ├── _calendar.import.scss ├── _calendar.scss ├── _callout.import.scss ├── _callout.scss ├── _card.import.scss ├── _card.scss ├── _carousel.import.scss ├── _carousel.scss ├── _close.import.scss ├── _close.scss ├── _containers.import.scss ├── _containers.scss ├── _date-picker.import.scss ├── _date-picker.scss ├── _dropdown.import.scss ├── _dropdown.scss ├── _footer.import.scss ├── _footer.scss ├── _forms.import.scss ├── _forms.scss ├── _functions.import.scss ├── _functions.scss ├── _grid.import.scss ├── _grid.scss ├── _header.import.scss ├── _header.scss ├── _helpers.import.scss ├── _helpers.scss ├── _icon.import.scss ├── _icon.scss ├── _images.import.scss ├── _images.scss ├── _list-group.import.scss ├── _list-group.scss ├── _loading-button.import.scss ├── _loading-button.scss ├── _maps.import.scss ├── _maps.scss ├── _mixins.import.scss ├── _mixins.scss ├── _modal.import.scss ├── _modal.scss ├── _nav.import.scss ├── _nav.scss ├── _navbar.import.scss ├── _navbar.scss ├── _offcanvas.import.scss ├── _offcanvas.scss ├── _pagination.import.scss ├── _pagination.scss ├── _placeholders.import.scss ├── _placeholders.scss ├── _popover.import.scss ├── _popover.scss ├── _progress.import.scss ├── _progress.scss ├── _range-slider.import.scss ├── _range-slider.scss ├── _rating.import.scss ├── _rating.scss ├── _reboot.import.scss ├── _reboot.scss ├── _root.import.scss ├── _root.scss ├── _sidebar.import.scss ├── _sidebar.scss ├── _spinners.import.scss ├── _spinners.scss ├── _stepper.import.scss ├── _stepper.scss ├── _tables.import.scss ├── _tables.scss ├── _time-picker.import.scss ├── _time-picker.scss ├── _toasts.import.scss ├── _toasts.scss ├── _tooltip.import.scss ├── _tooltip.scss ├── _transitions.import.scss ├── _transitions.scss ├── _type.import.scss ├── _type.scss ├── _utilities.import.scss ├── _utilities.scss ├── _variables-dark.import.scss ├── _variables-dark.scss ├── _variables.import.scss ├── _variables.scss ├── coreui-grid.rtl.scss ├── coreui-grid.scss ├── coreui-reboot.rtl.scss ├── coreui-reboot.scss ├── coreui-utilities.rtl.scss ├── coreui-utilities.scss ├── coreui.rtl.scss ├── coreui.scss ├── forms ├── _floating-labels.import.scss ├── _floating-labels.scss ├── _form-check.import.scss ├── _form-check.scss ├── _form-control.import.scss ├── _form-control.scss ├── _form-multi-select.import.scss ├── _form-multi-select.scss ├── _form-password.import.scss ├── _form-password.scss ├── _form-range.import.scss ├── _form-range.scss ├── _form-select.import.scss ├── _form-select.scss ├── _form-text.import.scss ├── _form-text.scss ├── _input-group.import.scss ├── _input-group.scss ├── _labels.import.scss ├── _labels.scss ├── _validation.import.scss └── _validation.scss ├── functions ├── _assert-ascending.scss ├── _assert-starts-at-zero.scss ├── _color-contrast-variables.scss ├── _color-contrast.scss ├── _color.scss ├── _contrast-ratio.scss ├── _escape-svg.scss ├── _maps.scss ├── _math.scss ├── _rgba-css-var.scss ├── _str-replace.scss └── _to-rgb.scss ├── helpers ├── _clearfix.scss ├── _color-bg.scss ├── _colored-links.scss ├── _focus-ring.scss ├── _icon-link.scss ├── _position.scss ├── _ratio.scss ├── _stacks.scss ├── _stretched-link.scss ├── _text-truncation.scss ├── _visually-hidden.scss └── _vr.scss ├── mixins ├── _alert.scss ├── _avatar.scss ├── _backdrop.scss ├── _border-radius.scss ├── _box-shadow.scss ├── _breakpoints.scss ├── _buttons.scss ├── _caret.scss ├── _clearfix.scss ├── _color-mode.scss ├── _color-scheme.scss ├── _container.scss ├── _deprecate.scss ├── _elevation.scss ├── _forms.scss ├── _gradients.scss ├── _grid.scss ├── _icon.scss ├── _image.scss ├── _list-group.scss ├── _lists.scss ├── _ltr-rtl.scss ├── _pagination.scss ├── _reset-text.scss ├── _resize.scss ├── _table-variants.scss ├── _text-truncate.scss ├── _transition.scss ├── _utilities.import.scss ├── _utilities.scss └── _visually-hidden.scss ├── sidebar ├── _sidebar-narrow.scss ├── _sidebar-nav.scss └── _sidebar.scss ├── tests ├── jasmine.js ├── mixins │ ├── _color-modes.test.scss │ ├── _media-query-color-mode-full.test.scss │ └── _utilities.test.scss ├── sass-true │ ├── register.js │ └── runner.js └── utilities │ └── _api.test.scss ├── themes └── bootstrap │ ├── bootstrap.rtl.scss │ └── bootstrap.scss ├── utilities ├── _api.import.scss ├── _api.scss ├── _bg-gradients.import.scss └── _bg-gradients.scss └── vendor └── _rfs.scss /.babelrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@babel/preset-env', 5 | { 6 | loose: true, 7 | bugfixes: true, 8 | modules: false 9 | } 10 | ] 11 | ] 12 | }; 13 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # https://github.com/browserslist/browserslist#readme 2 | 3 | >= 0.5% 4 | last 2 major versions 5 | not dead 6 | Chrome >= 60 7 | Firefox >= 60 8 | Firefox ESR 9 | iOS >= 12 10 | Safari >= 12 11 | not Explorer <= 11 12 | not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533) 13 | -------------------------------------------------------------------------------- /.bundlewatch.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | { 4 | "path": "./dist/css/coreui-grid.css", 5 | "maxSize": "7.50 kB" 6 | }, 7 | { 8 | "path": "./dist/css/coreui-grid.min.css", 9 | "maxSize": "6.55 kB" 10 | }, 11 | { 12 | "path": "./dist/css/coreui-reboot.css", 13 | "maxSize": "3.75 kB" 14 | }, 15 | { 16 | "path": "./dist/css/coreui-reboot.min.css", 17 | "maxSize": "3.60 kB" 18 | }, 19 | { 20 | "path": "./dist/css/coreui-utilities.css", 21 | "maxSize": "13.85 kB" 22 | }, 23 | { 24 | "path": "./dist/css/coreui-utilities.min.css", 25 | "maxSize": "13.25 kB" 26 | }, 27 | { 28 | "path": "./dist/css/coreui.css", 29 | "maxSize": "50.00 kB" 30 | }, 31 | { 32 | "path": "./dist/css/coreui.min.css", 33 | "maxSize": "47.20 kB" 34 | }, 35 | { 36 | "path": "./dist/js/coreui.bundle.js", 37 | "maxSize": "76.05 kB" 38 | }, 39 | { 40 | "path": "./dist/js/coreui.bundle.min.js", 41 | "maxSize": "44.00 kB" 42 | }, 43 | { 44 | "path": "./dist/js/coreui.esm.js", 45 | "maxSize": "60.80 kB" 46 | }, 47 | { 48 | "path": "./dist/js/coreui.esm.min.js", 49 | "maxSize": "41.10 kB" 50 | }, 51 | { 52 | "path": "./dist/js/coreui.js", 53 | "maxSize": "62.00 kB" 54 | }, 55 | { 56 | "path": "./dist/js/coreui.min.js", 57 | "maxSize": "37.00 kB" 58 | } 59 | ], 60 | "ci": { 61 | "trackBranches": [ 62 | "main" 63 | ] 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Enforce Unix newlines 2 | * text=auto eol=lf 3 | 4 | # Don't diff or textually merge source maps 5 | *.map binary 6 | 7 | coreui.css linguist-vendored=false 8 | coreui.js linguist-vendored=false 9 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | custom: "https://coreui.io/pricing/?support=true" 4 | open_collective: coreui 5 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Tell us about a bug you may have identified in CoreUI. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | Before opening: 11 | 12 | - [Search for duplicate or closed issues](https://github.com/coreui/coreui/issues?utf8=%E2%9C%93&q=is%3Aissue) 13 | - [Validate](https://html5.validator.nu/) any HTML to avoid common problems 14 | - Read the [contributing guidelines](https://github.com/coreui/coreui/blob/main/.github/CONTRIBUTING.md) 15 | 16 | Bug reports must include: 17 | 18 | - Operating system and version (Windows, macOS, Android, iOS) 19 | - Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser) 20 | - A [reduced test case](https://css-tricks.com/reduced-test-cases/) or suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/) 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | contact_links: 2 | - name: Ask a question 3 | url: https://github.com/coreui/coreui/discussions 4 | about: Ask and discuss questions with other CoreUI community members 5 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for a new feature in CoreUI. 4 | title: '' 5 | labels: feature 6 | assignees: '' 7 | 8 | --- 9 | 10 | Before opening: 11 | 12 | - [Search for duplicate or closed issues](https://github.com/coreui/coreui/issues?utf8=%E2%9C%93&q=is%3Aissue) 13 | - Read the [contributing guidelines](https://github.com/coreui/coreui/blob/main/.github/CONTRIBUTING.md) 14 | 15 | Feature requests must include: 16 | 17 | - As much detail as possible for what we should add and why it's important to Bootstrap 18 | - Relevant links to prior art, screenshots, or live demos whenever possible 19 | -------------------------------------------------------------------------------- /.github/SUPPORT.md: -------------------------------------------------------------------------------- 1 | ### Bug reports 2 | 3 | See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports. 4 | 5 | ### How-to 6 | 7 | For general troubleshooting or help getting started: 8 | 9 | - Join [the official community](https://community.coreui.io/). 10 | - Ask and explore Stack Overflow with the [`coreui`](https://stackoverflow.com/questions/tagged/coreui) tag. 11 | -------------------------------------------------------------------------------- /.github/codeql/codeql-config.yml: -------------------------------------------------------------------------------- 1 | name: "CodeQL config" 2 | paths-ignore: 3 | - dist -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: weekly 7 | day: tuesday 8 | time: "12:00" 9 | timezone: Europe/Athens 10 | open-pull-requests-limit: 10 11 | reviewers: 12 | - mrholek 13 | labels: 14 | - dependencies 15 | - v4 16 | versioning-strategy: increase 17 | rebase-strategy: disabled 18 | - package-ecosystem: "github-actions" 19 | directory: "/" 20 | schedule: 21 | interval: weekly 22 | day: tuesday 23 | time: "12:00" 24 | timezone: Europe/Athens 25 | -------------------------------------------------------------------------------- /.github/workflows/bundlewatch.yml: -------------------------------------------------------------------------------- 1 | name: Bundlewatch 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | workflow_dispatch: 9 | 10 | env: 11 | FORCE_COLOR: 2 12 | NODE: 20 13 | 14 | permissions: 15 | contents: read 16 | 17 | jobs: 18 | bundlewatch: 19 | runs-on: ubuntu-latest 20 | 21 | steps: 22 | - name: Clone repository 23 | uses: actions/checkout@v4 24 | with: 25 | persist-credentials: false 26 | 27 | - name: Set up Node.js 28 | uses: actions/setup-node@v4 29 | with: 30 | node-version: "${{ env.NODE }}" 31 | cache: npm 32 | 33 | - name: Install npm dependencies 34 | run: npm ci 35 | 36 | - name: Run dist 37 | run: npm run dist 38 | 39 | - name: Run bundlewatch 40 | run: npm run bundlewatch 41 | env: 42 | BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}" 43 | CI_BRANCH_BASE: main -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | name: "CodeQL" 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - "!dependabot/**" 8 | pull_request: 9 | branches: 10 | - main 11 | - "!dependabot/**" 12 | schedule: 13 | - cron: "0 2 * * 4" 14 | workflow_dispatch: 15 | 16 | jobs: 17 | analyze: 18 | name: Analyze 19 | runs-on: ubuntu-latest 20 | permissions: 21 | security-events: write 22 | 23 | steps: 24 | - name: Checkout repository 25 | uses: actions/checkout@v4 26 | with: 27 | persist-credentials: false 28 | 29 | - name: Initialize CodeQL 30 | uses: github/codeql-action/init@v3 31 | with: 32 | config-file: ./.github/codeql/codeql-config.yml 33 | languages: "javascript" 34 | queries: +security-and-quality 35 | 36 | - name: Autobuild 37 | uses: github/codeql-action/autobuild@v3 38 | 39 | - name: Perform CodeQL Analysis 40 | uses: github/codeql-action/analyze@v3 41 | with: 42 | category: "/language:javascript" -------------------------------------------------------------------------------- /.github/workflows/css.yml: -------------------------------------------------------------------------------- 1 | name: CSS 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | workflow_dispatch: 11 | 12 | env: 13 | FORCE_COLOR: 2 14 | NODE: 20 15 | 16 | permissions: 17 | contents: read 18 | 19 | jobs: 20 | css: 21 | runs-on: ubuntu-latest 22 | 23 | steps: 24 | - name: Clone repository 25 | uses: actions/checkout@v4 26 | with: 27 | persist-credentials: false 28 | 29 | - name: Set up Node.js 30 | uses: actions/setup-node@v4 31 | with: 32 | node-version: "${{ env.NODE }}" 33 | cache: npm 34 | 35 | - name: Install npm dependencies 36 | run: npm ci 37 | 38 | - name: Build CSS 39 | run: npm run css 40 | 41 | - name: Run CSS tests 42 | run: npm run css-test -------------------------------------------------------------------------------- /.github/workflows/docs.yml: -------------------------------------------------------------------------------- 1 | name: Docs 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | workflow_dispatch: 11 | 12 | env: 13 | FORCE_COLOR: 2 14 | NODE: 20 15 | 16 | permissions: 17 | contents: read 18 | 19 | jobs: 20 | docs: 21 | runs-on: ubuntu-latest 22 | 23 | steps: 24 | - name: Clone repository 25 | uses: actions/checkout@v4 26 | with: 27 | persist-credentials: false 28 | 29 | - name: Set up Node.js 30 | uses: actions/setup-node@v4 31 | with: 32 | node-version: "${{ env.NODE }}" 33 | cache: npm 34 | 35 | - run: java -version 36 | 37 | - name: Install npm dependencies 38 | run: npm ci 39 | 40 | - name: Build docs 41 | run: npm run docs-build 42 | 43 | - name: Validate HTML 44 | run: npm run docs-vnu 45 | 46 | - name: Run linkinator 47 | uses: JustinBeckwith/linkinator-action@v1 48 | with: 49 | paths: _gh_pages 50 | recurse: true 51 | verbosity: error 52 | skip: "^(?!http://localhost)" -------------------------------------------------------------------------------- /.github/workflows/js.yml: -------------------------------------------------------------------------------- 1 | name: JS Tests 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | workflow_dispatch: 11 | 12 | env: 13 | FORCE_COLOR: 2 14 | NODE: 20 15 | 16 | permissions: 17 | contents: read 18 | 19 | jobs: 20 | run: 21 | permissions: 22 | # allow coverallsapp/github-action to create new checks issues and fetch code 23 | checks: write 24 | contents: read 25 | name: JS Tests 26 | runs-on: ubuntu-latest 27 | 28 | steps: 29 | - name: Clone repository 30 | uses: actions/checkout@v4 31 | with: 32 | persist-credentials: false 33 | 34 | - name: Set up Node.js 35 | uses: actions/setup-node@v4 36 | with: 37 | node-version: ${{ env.NODE }} 38 | cache: npm 39 | 40 | - name: Install npm dependencies 41 | run: npm ci 42 | 43 | - name: Run dist 44 | run: npm run js 45 | 46 | - name: Run JS tests 47 | run: npm run js-test 48 | 49 | - name: Run Coveralls 50 | uses: coverallsapp/github-action@v2 51 | if: ${{ !github.event.repository.fork }} 52 | with: 53 | github-token: "${{ secrets.GITHUB_TOKEN }}" 54 | path-to-lcov: "./js/coverage/lcov.info" -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | workflow_dispatch: 11 | 12 | env: 13 | FORCE_COLOR: 2 14 | NODE: 20 15 | 16 | permissions: 17 | contents: read 18 | 19 | jobs: 20 | lint: 21 | runs-on: ubuntu-latest 22 | 23 | steps: 24 | - name: Clone repository 25 | uses: actions/checkout@v4 26 | with: 27 | persist-credentials: false 28 | 29 | - name: Set up Node.js 30 | uses: actions/setup-node@v4 31 | with: 32 | node-version: "${{ env.NODE }}" 33 | cache: npm 34 | 35 | - name: Install npm dependencies 36 | run: npm ci 37 | 38 | - name: Lint 39 | run: npm run lint -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore docs files 2 | /_gh_pages/ 3 | # Hugo resources folder 4 | /resources/ 5 | /.hugo_build.lock 6 | 7 | # Numerous always-ignore extensions 8 | *.diff 9 | *.err 10 | *.log 11 | *.orig 12 | *.rej 13 | *.swo 14 | *.swp 15 | *.vi 16 | *.zip 17 | *~ 18 | 19 | # OS or Editor folders 20 | ._* 21 | .cache 22 | .DS_Store 23 | .idea 24 | .project 25 | .settings 26 | .tmproj 27 | *.esproj 28 | *.sublime-project 29 | *.sublime-workspace 30 | nbproject 31 | Thumbs.db 32 | /.vscode/ 33 | # Local Netlify folder 34 | .netlify 35 | 36 | # Komodo 37 | .komodotools 38 | *.komodoproject 39 | 40 | # Folders to ignore 41 | /dist-sass/ 42 | /js/coverage/ 43 | /node_modules/ 44 | -------------------------------------------------------------------------------- /.hugo_build.lock: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/.hugo_build.lock -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | **/*.min.css 2 | **/dist/ 3 | **/vendor/ 4 | /_gh_pages/ 5 | /docs/assets/css/all-icons.css 6 | /js/coverage/ -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-twbs-bootstrap" 4 | ], 5 | "reportInvalidScopeDisables": true, 6 | "reportNeedlessDisables": true, 7 | "overrides": [ 8 | { 9 | "files": "**/*.scss", 10 | "rules": { 11 | "declaration-property-value-disallowed-list": { 12 | "border": "none", 13 | "outline": "none" 14 | }, 15 | "function-disallowed-list": [ 16 | "calc", 17 | "lighten", 18 | "darken" 19 | ], 20 | "property-disallowed-list": [ 21 | "border-radius", 22 | "border-top-left-radius", 23 | "border-top-right-radius", 24 | "border-bottom-right-radius", 25 | "border-bottom-left-radius", 26 | "transition" 27 | ], 28 | "scss/dollar-variable-default": [ 29 | true, 30 | { 31 | "ignore": "local" 32 | } 33 | ], 34 | "scss/selector-no-union-class-name": true 35 | } 36 | }, 37 | { 38 | "files": "scss/**/*.{test,spec}.scss", 39 | "rules": { 40 | "scss/dollar-variable-default": null, 41 | "declaration-no-important": null 42 | } 43 | }, 44 | { 45 | "files": "docs/**/*.scss", 46 | "rules": { 47 | "scss/dollar-variable-default": null 48 | } 49 | }, 50 | { 51 | "files": "docs/**/examples/**/*.css", 52 | "rules": { 53 | "comment-empty-line-before": null, 54 | "property-no-vendor-prefix": null, 55 | "selector-no-qualifying-type": null, 56 | "value-no-vendor-prefix": null 57 | } 58 | } 59 | ] 60 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2025 creativeLabs Łukasz Holeczek 2 | 3 | This is commercial software. To use it, you have to own a commercial license. 4 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Reporting Security Issues 2 | 3 | The CoreUI team and community take security issues in CoreUI seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions. 4 | 5 | To report a security issue, email [support@coreui.io](mailto:support@coreui.io) and include the word "SECURITY" in the subject line. 6 | 7 | We'll endeavor to respond quickly, and will keep you updated throughout the process. 8 | -------------------------------------------------------------------------------- /build/banner.mjs: -------------------------------------------------------------------------------- 1 | import fs from 'node:fs/promises' 2 | import path from 'node:path' 3 | import { fileURLToPath } from 'node:url' 4 | 5 | const __dirname = path.dirname(fileURLToPath(import.meta.url)) 6 | 7 | const pkgJson = path.join(__dirname, '../package.json') 8 | const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8')) 9 | 10 | const year = new Date().getFullYear() 11 | 12 | function getBanner(pluginFilename) { 13 | return `/*! 14 | * CoreUI${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage}) 15 | * Copyright ${year} ${pkg.author} 16 | * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE) 17 | */` 18 | } 19 | 20 | export default getBanner 21 | -------------------------------------------------------------------------------- /build/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const mapConfig = { 2 | inline: false, 3 | annotation: true, 4 | sourcesContent: true 5 | } 6 | 7 | export default context => { 8 | return { 9 | map: context.file.dirname.includes('examples') ? false : mapConfig, 10 | plugins: { 11 | autoprefixer: { 12 | cascade: false 13 | }, 14 | 'postcss-combine-duplicated-selectors': {} 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coreui/coreui-pro", 3 | "description": "The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintain by the CoreUI Team", 4 | "keywords": [ 5 | "css", 6 | "js", 7 | "sass", 8 | "mobile-first", 9 | "responsive", 10 | "front-end", 11 | "framework", 12 | "web" 13 | ], 14 | "homepage": "https://coreui.io/", 15 | "authors": [ 16 | { 17 | "name": "The CoreUI Team", 18 | "homepage": "https://github.com/orgs/coreui/people" 19 | } 20 | ], 21 | "support": { 22 | "issues": "https://github.com/coreui/coreui/issues" 23 | }, 24 | "license": "SEE LICENSE IN LICENSE" 25 | } 26 | -------------------------------------------------------------------------------- /docs/assets/js/application.js: -------------------------------------------------------------------------------- 1 | // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT 2 | // IT'S ALL JUST JUNK FOR OUR DOCS! 3 | // ++++++++++++++++++++++++++++++++++++++++++ 4 | 5 | /*! 6 | * JavaScript for Bootstrap's docs (https://getbootstrap.com/) 7 | * Copyright 2011-2025 The Bootstrap Authors 8 | * Licensed under the Creative Commons Attribution 3.0 Unported License. 9 | * For details, see https://creativecommons.org/licenses/by/3.0/. 10 | */ 11 | 12 | /* eslint-disable import/no-unresolved */ 13 | import sidebarScroll from 'js/partials/sidebar.js' 14 | import codeExamples from 'js/partials/code-examples.js' 15 | import snippets from 'js/partials/snippets.js' 16 | /* eslint-enable import/no-unresolved */ 17 | 18 | sidebarScroll() 19 | codeExamples() 20 | snippets() 21 | -------------------------------------------------------------------------------- /docs/assets/js/partials/sidebar.js: -------------------------------------------------------------------------------- 1 | // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT 2 | // IT'S ALL JUST JUNK FOR OUR DOCS! 3 | // ++++++++++++++++++++++++++++++++++++++++++ 4 | 5 | /* 6 | * JavaScript for Bootstrap's docs (https://getbootstrap.com/) 7 | * Copyright 2011-2025 The Bootstrap Authors 8 | * Licensed under the Creative Commons Attribution 3.0 Unported License. 9 | * For details, see https://creativecommons.org/licenses/by/3.0/. 10 | */ 11 | 12 | export default () => { 13 | // Scroll the active sidebar link into view 14 | const sidebar = document.querySelector('.sidebar') 15 | const sidenav = document.querySelector('.sidebar-nav') 16 | const sidenavActiveLink = document.querySelector('.nav-item .active') 17 | 18 | if (!sidenav || !sidenavActiveLink) { 19 | return 20 | } 21 | 22 | const sidenavHeight = sidenav.clientHeight 23 | const sidenavActiveLinkTop = sidenavActiveLink.offsetTop + (sidebar.clientHeight - sidenavHeight) 24 | const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight 25 | const viewportTop = sidenavActiveLinkTop 26 | const viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight 27 | 28 | if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) { 29 | sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2) 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /docs/assets/js/search.js: -------------------------------------------------------------------------------- 1 | // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT 2 | // IT'S ALL JUST JUNK FOR OUR DOCS! 3 | // ++++++++++++++++++++++++++++++++++++++++++ 4 | 5 | import docsearch from '@docsearch/js' 6 | // https://gohugo.io/hugo-pipes/js/#options 7 | // eslint-disable-next-line import/no-unresolved 8 | import { appId, apiKey, indexName } from '@params'; 9 | 10 | (() => { 11 | const searchElement = document.getElementById('docsearch') 12 | 13 | if (!searchElement) { 14 | return 15 | } 16 | 17 | docsearch({ 18 | apiKey, 19 | indexName, 20 | appId, 21 | container: searchElement 22 | }) 23 | })() 24 | -------------------------------------------------------------------------------- /docs/assets/js/snippets.js: -------------------------------------------------------------------------------- 1 | /* 2 | * JavaScript for Bootstrap's docs (https://getbootstrap.com/) 3 | * Copyright 2011-2025 The Bootstrap Authors 4 | * Licensed under the Creative Commons Attribution 3.0 Unported License. 5 | * For details, see https://creativecommons.org/licenses/by/3.0/. 6 | */ 7 | 8 | // Note that this file is not published; we only include it in scripts.html 9 | // for StackBlitz to work 10 | 11 | /* eslint-disable import/no-unresolved */ 12 | import snippets from 'js/partials/snippets.js' 13 | /* eslint-enable import/no-unresolved */ 14 | 15 | snippets() 16 | -------------------------------------------------------------------------------- /docs/assets/scss/_ads.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important, selector-max-id 2 | @use "../../../scss/mixins/border-radius" as *; 3 | @use "../../../scss/mixins/breakpoints" as *; 4 | @use "../../../scss/vendor/rfs" as *; 5 | 6 | // 7 | // Carbon ads 8 | // 9 | 10 | #carbonads { 11 | position: static; 12 | display: block; 13 | max-width: 400px; 14 | padding: 15px 15px 15px 160px; 15 | margin: 2rem 0; 16 | overflow: hidden; 17 | @include font-size(.8125rem); 18 | line-height: 1.4; 19 | text-align: left; 20 | background-color: var(--cui-tertiary-bg); 21 | 22 | a { 23 | color: var(--cui-body-color); 24 | text-decoration: none; 25 | } 26 | 27 | @include media-breakpoint-up(sm) { 28 | @include border-radius(.5rem); 29 | } 30 | } 31 | 32 | .carbon-img { 33 | float: left; 34 | margin-left: -145px; 35 | } 36 | 37 | .carbon-poweredby { 38 | display: block; 39 | margin-top: .75rem; 40 | color: var(--cui-body-color) !important; 41 | } 42 | -------------------------------------------------------------------------------- /docs/assets/scss/_anchor.scss: -------------------------------------------------------------------------------- 1 | @use "../../../scss/mixins/transition" as *; 2 | @use "../../../scss/variables" as *; 3 | 4 | .anchor-link { 5 | padding: 0 .175rem; 6 | font-weight: 400; 7 | color: rgba($link-color, .5); 8 | text-decoration: none; 9 | opacity: 0; 10 | @include transition(color .15s ease-in-out, opacity .15s ease-in-out); 11 | 12 | &::after { 13 | content: "#"; 14 | } 15 | 16 | &:focus, 17 | &:hover, 18 | :hover > &, 19 | :target > & { 20 | color: $link-color; 21 | text-decoration: none; 22 | opacity: 1; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /docs/assets/scss/_banner.scss: -------------------------------------------------------------------------------- 1 | .banner-black-friday { 2 | padding: 2rem; 3 | background: url("./../img/percents-bg.png") no-repeat, linear-gradient(222deg, #2c384a, #000); 4 | 5 | .black-friday-img { 6 | width: 100%; 7 | max-width: 360px; 8 | 9 | @include media-breakpoint-up(xxl) { 10 | max-width: 160px; 11 | transform: scale(1.35) translateX(-15px); 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /docs/assets/scss/_buttons.scss: -------------------------------------------------------------------------------- 1 | @use "../../../scss/functions/color" as *; 2 | @use "variables" as *; 3 | 4 | // Buttons 5 | // 6 | // Custom buttons for the docs. 7 | 8 | // scss-docs-start btn-css-vars-example 9 | .btn-cd-primary { 10 | --cui-btn-font-weight: 600; 11 | --cui-btn-color: var(--cui-white); 12 | --cui-btn-bg: var(--cd-violet-bg); 13 | --cui-btn-border-color: var(--cd-violet-bg); 14 | --cui-btn-hover-color: var(--cui-white); 15 | --cui-btn-hover-bg: #{shade-color($cd-violet, 10%)}; 16 | --cui-btn-hover-border-color: #{shade-color($cd-violet, 10%)}; 17 | --cui-btn-focus-shadow-rgb: var(--cd-violet-rgb); 18 | --cui-btn-active-color: var(--cui-btn-hover-color); 19 | --cui-btn-active-bg: #{shade-color($cd-violet, 20%)}; 20 | --cui-btn-active-border-color: #{shade-color($cd-violet, 20%)}; 21 | } 22 | // scss-docs-end btn-css-vars-example 23 | -------------------------------------------------------------------------------- /docs/assets/scss/_callouts.scss: -------------------------------------------------------------------------------- 1 | @use "../../../scss/variables" as *; 2 | @use "variables" as *; 3 | 4 | // 5 | // Callouts 6 | // 7 | 8 | .docs-callout { 9 | --#{$prefix}link-color-rgb: var(--cd-callout-link); 10 | --#{$prefix}code-color: var(--cd-callout-code-color); 11 | 12 | padding: 1.25rem; 13 | margin-top: 1.25rem; 14 | margin-bottom: 1.25rem; 15 | background-color: var(--cd-callout-bg, var(--cui-gray-100)); 16 | border-left: .25rem solid var(--cd-callout-border, var(--cui-gray-300)); 17 | 18 | h4 { 19 | margin-bottom: .25rem; 20 | } 21 | 22 | > :last-child { 23 | margin-bottom: 0; 24 | } 25 | 26 | + .docs-callout { 27 | margin-top: -.25rem; 28 | } 29 | 30 | .highlight { 31 | background-color: rgba($black, .05); 32 | } 33 | } 34 | 35 | // Variations 36 | @each $variant in $cd-callout-variants { 37 | .docs-callout-#{$variant} { 38 | --cd-callout-color: var(--cui-#{$variant}-text-emphasis); 39 | --cd-callout-bg: rgba(var(--cui-#{$variant}-rgb), .1); 40 | --cd-callout-border: var(--cui-#{$variant}); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /docs/assets/scss/_clipboard-js.scss: -------------------------------------------------------------------------------- 1 | @use "../../../scss/mixins/border-radius" as *; 2 | @use "../../../scss/mixins/breakpoints" as *; 3 | 4 | // clipboard.js 5 | // 6 | // JS-based `Copy` buttons for code snippets. 7 | 8 | .docs-clipboard, 9 | .docs-edit { 10 | position: relative; 11 | display: none; 12 | float: right; 13 | 14 | + .highlight { 15 | margin-top: 0; 16 | } 17 | 18 | @include media-breakpoint-up(md) { 19 | display: block; 20 | } 21 | } 22 | 23 | .btn-clipboard, 24 | .btn-edit { 25 | display: block; 26 | padding: .5em; 27 | line-height: 1; 28 | color: var(--cui-body-color); 29 | background-color: var(--cd-pre-bg); 30 | border: 0; 31 | @include border-radius(.25rem); 32 | 33 | &:hover { 34 | color: var(--cui-link-hover-color); 35 | } 36 | 37 | &:focus { 38 | z-index: 3; 39 | } 40 | } 41 | 42 | .btn-clipboard { 43 | position: relative; 44 | z-index: 2; 45 | margin-top: 1.25rem; 46 | margin-right: .75rem; 47 | } 48 | -------------------------------------------------------------------------------- /docs/assets/scss/_footer.scss: -------------------------------------------------------------------------------- 1 | @use "../../../scss/vendor/rfs" as *; 2 | @use "../../../scss/variables" as *; 3 | 4 | // 5 | // Footer 6 | // 7 | 8 | .footer { 9 | --cui-footer-bg: var(--cui-tertiary-bg); 10 | @include font-size(.875rem); 11 | 12 | a { 13 | color: var(--#{$prefix}tertiary-color); 14 | text-decoration: none; 15 | 16 | &:hover, 17 | &:focus { 18 | color: var(--cui-link-hover-color); 19 | text-decoration: underline; 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /docs/assets/scss/_header.scss: -------------------------------------------------------------------------------- 1 | @use "../../../scss/variables" as *; 2 | 3 | .docs-header { 4 | --#{$prefix}header-bg: #{var(--cui-body-bg)}; 5 | } 6 | -------------------------------------------------------------------------------- /docs/assets/scss/_layout.scss: -------------------------------------------------------------------------------- 1 | @use "../../../scss/mixins/breakpoints" as *; 2 | @use "../../../scss/mixins/transition" as *; 3 | @use "../../../scss/variables" as *; 4 | 5 | .wrapper { 6 | width: 100%; 7 | padding-inline-start: var(--cui-sidebar-occupy-start, 0); 8 | will-change: auto; 9 | @include transition(padding .15s); 10 | 11 | > .container-lg { 12 | --cui-gutter-x: 3rem; 13 | } 14 | } 15 | 16 | .docs-sidebar { 17 | grid-area: sidebar; 18 | } 19 | 20 | .docs-main { 21 | grid-area: main; 22 | 23 | @include media-breakpoint-down(lg) { 24 | max-width: 760px; 25 | margin-inline: auto; 26 | } 27 | 28 | @include media-breakpoint-up(md) { 29 | display: grid; 30 | grid-template-areas: 31 | "intro" 32 | "toc" 33 | "content"; 34 | grid-template-rows: auto auto 1fr; 35 | gap: $grid-gutter-width; 36 | } 37 | 38 | @include media-breakpoint-up(lg) { 39 | grid-template-areas: 40 | "intro toc" 41 | "content toc"; 42 | grid-template-rows: auto 1fr; 43 | grid-template-columns: 4fr 1fr; 44 | } 45 | } 46 | 47 | .docs-intro { 48 | grid-area: intro; 49 | } 50 | 51 | .docs-toc { 52 | grid-area: toc; 53 | } 54 | 55 | .docs-content { 56 | grid-area: content; 57 | min-width: 1px; // Fix width when bd-content contains a `
` https://github.com/twbs/bootstrap/issues/25410
58 | }
59 | 


--------------------------------------------------------------------------------
/docs/assets/scss/_placeholder-img.scss:
--------------------------------------------------------------------------------
 1 | @use "../../../scss/vendor/rfs" as *;
 2 | 
 3 | //
 4 | // Placeholder svg used in the docs.
 5 | //
 6 | 
 7 | // Remember to update `docs/_layouts/examples.html` too if this changes!
 8 | 
 9 | .docs-placeholder-img {
10 |   @include font-size(1.125rem);
11 |   user-select: none;
12 |   text-anchor: middle;
13 | }
14 | 
15 | .docs-placeholder-img-lg {
16 |   @include font-size(3.5rem);
17 | }
18 | 


--------------------------------------------------------------------------------
/docs/assets/scss/_pricing.scss:
--------------------------------------------------------------------------------
 1 | .pricing-table {
 2 |   th {
 3 |     padding: 0 .75rem !important; // stylelint-disable-line declaration-no-important
 4 |     vertical-align: top;
 5 |     border: 0;
 6 |   }
 7 | 
 8 |   td:nth-child(n+2):nth-child(-n+4),
 9 |   th:nth-child(n+2):nth-child(-n+4) {
10 |     text-align: center;
11 |   }
12 | 
13 |   tbody {
14 |     font-size: .875rem;
15 |   }
16 | 
17 |   td:first-child:not([colspan]) {
18 |     color: var(--cui-secondary-color);
19 |     white-space: nowrap;
20 |   }
21 | 
22 |   // stylelint-disable-next-line selector-max-universal
23 |   > :not(caption) > * > * {
24 |     padding: .75rem;
25 |   }
26 | }
27 | 
28 | .pricing-customers-grid {
29 |   svg {
30 |     max-width: 100%;
31 |     max-height: 32px;
32 |     fill: var(--cui-tertiary-color);
33 |   }
34 | 
35 |   svg [class*="-"],
36 |   svg g,
37 |   svg path {
38 |     fill: var(--cui-tertiary-color);
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/docs/assets/scss/_root.scss:
--------------------------------------------------------------------------------
 1 | @use "../../../scss/functions/to-rgb" as *;
 2 | @use "../../../scss/variables" as *;
 3 | @use "variables" as *;
 4 | 
 5 | :root {
 6 |   --cd-purple: #{$cd-purple};
 7 |   --cd-violet: #{$cd-violet};
 8 |   --cd-accent: #{$cd-accent};
 9 |   --cd-violet-rgb: #{to-rgb($cd-violet)};
10 |   --cd-accent-rgb: #{to-rgb($cd-accent)};
11 |   --cd-pink-rgb: #{to-rgb($pink-500)};
12 |   --cd-teal-rgb: #{to-rgb($teal-500)};
13 |   --cd-violet-bg: var(--cd-violet);
14 |   --cd-toc-color: var(--cd-violet);
15 |   --cd-sidebar-link-bg: rgba(var(--cd-violet-rgb), .1);
16 |   --cd-callout-link: #{to-rgb($blue-600)};
17 |   --cd-callout-code-color: #{$pink-600};
18 |   --cd-pre-bg: var(--cui-tertiary-bg);
19 | }
20 | 


--------------------------------------------------------------------------------
/docs/assets/scss/_scrolling.scss:
--------------------------------------------------------------------------------
 1 | // When navigating with the keyboard, prevent focus from landing behind the sticky header
 2 | 
 3 | main {
 4 |   a,
 5 |   button,
 6 |   input,
 7 |   select,
 8 |   textarea,
 9 |   h2,
10 |   h3,
11 |   h4,
12 |   [tabindex="0"] {
13 |     scroll-margin-top: 80px;
14 |     scroll-margin-bottom: 100px;
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/docs/assets/scss/_sidebar.scss:
--------------------------------------------------------------------------------
 1 | @use "../../../scss/mixins/color-mode" as *;
 2 | 
 3 | .docs-sidebar {
 4 |   --cui-sidebar-bg: var(--cui-tertiary-bg);
 5 |   --cui-sidebar-brand-bg: transparent;
 6 |   --cui-sidebar-brand-color: var(--cui-body-color);
 7 | 
 8 |   .sidebar-nav {
 9 |     --cui-sidebar-nav-link-color: var(--cui-body-color);
10 |     --cui-sidebar-nav-link-active-bg: transparent;
11 |     --cui-sidebar-nav-link-active-color: var(--cui-primary);
12 |     --cui-sidebar-nav-link-hover-bg: transparent;
13 |     --cui-sidebar-nav-link-hover-color: var(--cui-primary);
14 |     --cui-sidebar-nav-link-icon-margin: 1rem;
15 |     --cui-sidebar-nav-group-bg: transparent;
16 |     --cui-sidebar-nav-group-toggle-show-color: var(--cui-primary);
17 | 
18 |     .compact .nav-link {
19 |       --cui-sidebar-nav-link-padding-y: .375rem;
20 |     }
21 | 
22 |     .nav-group-items {
23 |       --cui-sidebar-nav-link-color: var(--cui-body-color);
24 |     }
25 |   }
26 | }
27 | 
28 | @include color-mode(dark) {
29 |   .docs-sidebar {
30 |     --cui-sidebar-bg: var(--cui-body-bg);
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/docs/assets/scss/_skippy.scss:
--------------------------------------------------------------------------------
 1 | @use "../../../scss/variables" as *;
 2 | @use "variables" as *;
 3 | 
 4 | .skippy {
 5 |   background-color: $cd-purple;
 6 | 
 7 |   a {
 8 |     color: $white;
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/docs/assets/scss/_variables.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:color";
 2 | @use "../../../scss/variables" as *;
 3 | // Local docs variables
 4 | 
 5 | $cd-purple:       #4c0bce;
 6 | $cd-violet:        color.scale($cd-purple, $saturation: 10%, $lightness: 25%); // stylelint-disable-line scss/at-function-named-arguments
 7 | $cd-accent:       #ffe484;
 8 | 
 9 | $cd-gutter-x: 3rem;
10 | $cd-callout-variants: info, warning, danger !default;
11 | 


--------------------------------------------------------------------------------
/docs/assets/scss/docs-pickers.scss:
--------------------------------------------------------------------------------
 1 | // fusv-disable
 2 | $enable-ltr: false;
 3 | $enable-rtl: true;
 4 | // fusv-enable
 5 | 
 6 | @import "../../../scss/functions";
 7 | @import "../../../scss/variables";
 8 | @import "../../../scss/variables-dark";
 9 | @import "../../../scss/maps";
10 | @import "../../../scss/mixins";
11 | @import "../../../scss/utilities";
12 | 
13 | // stylelint-disable selector-no-qualifying-type
14 | div[dir="rtl"] {
15 |   @import "../../../scss/calendar";
16 | }
17 | // stylelint-enable selector-no-qualifying-type
18 | 


--------------------------------------------------------------------------------
/docs/assets/scss/docs.scss:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * CoreUI Docs (https://coreui.io/bootstrap/docs/)
 3 |  * Copyright 2025 creativeLabs Łukasz Holeczek
 4 |  * Licensed under the Creative Commons Attribution 3.0 Unported License.
 5 |  * For details, see https://creativecommons.org/licenses/by/3.0/.
 6 |  */
 7 | 
 8 | // Dev notes
 9 | //
10 | // Background information on nomenclature and architecture decisions here.
11 | //
12 | // - CoreUI's **docs variables** are prefixed with `$cd-`.
13 | //   These custom colors avoid collision with the components Bootstrap provides.
14 | //
15 | // - Classes are prefixed with `.docs-`.
16 | //   These classes indicate custom-built or modified components for the design
17 | //   and layout of the CoreUI docs. They are not included in our builds.
18 | //
19 | // Happy Bootstrapping!
20 | 
21 | @use "../../../scss/variables" with (
22 |   $enable-cssgrid: true,
23 |   $enable-container-queries: true,
24 |   $enable-grid-classes: false
25 | );
26 | 
27 | @use "../../../scss/grid";
28 | 
29 | // Load docs components
30 | @forward "root";
31 | @forward "ads";
32 | @forward "content";
33 | @forward "skippy";
34 | @forward "header";
35 | @forward "sidebar";
36 | @forward "layout";
37 | @forward "toc";
38 | @forward "footer";
39 | @forward "component-examples";
40 | @forward "buttons";
41 | @forward "callouts";
42 | @forward "colors";
43 | @forward "clipboard-js";
44 | @forward "placeholder-img";
45 | @forward "scrolling";
46 | 
47 | // Load docs dependencies
48 | @forward "syntax";
49 | @forward "anchor";
50 | 
51 | // Pricing
52 | @forward "pricing";
53 | 


--------------------------------------------------------------------------------
/docs/content/3.4/browser-bugs.md:
--------------------------------------------------------------------------------
1 | ---
2 | aliases: "/browser-bugs/"
3 | ---
4 | 


--------------------------------------------------------------------------------
/docs/content/3.4/components/jumbotron.md:
--------------------------------------------------------------------------------
1 | ---
2 | aliases:
3 |   - "/components/bootstrap/jumbotron/"
4 |   - "/components/jumbotron/"
5 | ---
6 | 


--------------------------------------------------------------------------------
/docs/content/3.4/components/masked-input.md:
--------------------------------------------------------------------------------
1 | ---
2 | aliases: "/components/masked-input/"
3 | ---
4 | 


--------------------------------------------------------------------------------
/docs/content/3.4/components/media-object.md:
--------------------------------------------------------------------------------
1 | ---
2 | aliases:
3 |   - "/components/bootstrap/media-object/"
4 |   - "/components/media-object/"
5 | ---
6 | 


--------------------------------------------------------------------------------
/docs/content/3.4/utilities/embed.md:
--------------------------------------------------------------------------------
1 | ---
2 | aliases: "/utilities/embed/"
3 | ---
4 | 


--------------------------------------------------------------------------------
/docs/content/3.4/utilities/screen-readers.md:
--------------------------------------------------------------------------------
1 | ---
2 | aliases: "/utilities/screen-readers/"
3 | ---
4 | 


--------------------------------------------------------------------------------
/docs/content/404.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "404 - File not found"
 3 | layout: 404
 4 | description: ""
 5 | url: /404.html
 6 | robots: noindex,follow
 7 | sitemap_exclude: true
 8 | ---
 9 | 
10 | 

11 |   
404

12 |   
File not found

13 | 

14 | 


--------------------------------------------------------------------------------
/docs/content/_index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: redirect
3 | sitemap_exclude: true
4 | redirect: "/bootstrap/docs/getting-started/introduction/"
5 | ---
6 | 


--------------------------------------------------------------------------------
/docs/content/components/footer.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: docs
 3 | title: Footer
 4 | description: Bootstrap Footer is an additional navigation used for displaying general information that a user might want to access from any page within your site. It is a place to display boilerplate text about the site, company info, copyrights, links to a contact form, sitemap, FAQ and other such resources.
 5 | group: components
 6 | aliases:
 7 |   - "/4.0/components/footer/"
 8 |   - "/4.1/components/footer/"
 9 | toc: true
10 | bootstrap: true
11 | other_frameworks: footer
12 | ---
13 | 
14 | 
20 | 
21 | ## How it works
22 | 
23 | Here's what you need to know before getting started with the aside menu:
24 | 
25 | - Bootstrap footer requires a wrapping `.footer`.
26 | 
27 | ## Examples
28 | 
29 | {{< example >}}
30 | 
40 | {{< /example >}}
41 | 
42 | ## Customizing
43 | 
44 | ### CSS variables
45 | 
46 | Sidebars use local CSS variables on `.footer` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
47 | 
48 | {{< scss-docs name="footer-css-vars" file="scss/_footer.scss" >}}
49 | 
50 | ### SASS variables
51 | 
52 | {{< scss-docs name="footer-variables" file="scss/_variables.scss" >}}
53 | 


--------------------------------------------------------------------------------
/docs/content/content/figures.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: docs
 3 | title: Figures
 4 | description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
 5 | group: content
 6 | aliases:
 7 |   - "/4.0/content/figures/"
 8 |   - "/4.1/content/figures/"
 9 | toc: true
10 | bootstrap: true
11 | ---
12 | 
13 | Anytime you need to display a piece of content—like an image with an optional caption, consider using a `
`.
14 | 
15 | Use the included `.figure`, `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `
` and `
` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `` to make it responsive.
16 | 
17 | {{< example >}}
18 | 

19 |   {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
20 |   
A caption for the above image.

21 | 

22 | {{< /example >}}
23 | 
24 | Aligning the figure's caption is easy with our [text utilities]({{< docsref "/utilities/text#text-alignment" >}}).
25 | 
26 | {{< example >}}
27 | 

28 |   {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
29 |   
A caption for the above image.

30 | 

31 | {{< /example >}}
32 | 
33 | ## Customization
34 | 
35 | ### SASS variables
36 | 
37 | {{< scss-docs name="figure-variables" file="scss/_variables.scss" >}}
38 | 


--------------------------------------------------------------------------------
/docs/content/helpers/clearfix.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: docs
 3 | title: Clearfix
 4 | description: Quickly and easily clear floated content within a container by adding a clearfix utility.
 5 | group: helpers
 6 | bootstrap: true
 7 | aliases:
 8 |   - "/helpers/"
 9 |   - "/4.1/helpers/"
10 | ---
11 | 
12 | Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin.
13 | 
14 | Use in HTML:
15 | 
16 | ```html
17 | 
...

18 | ```
19 | 
20 | The mixin source code:
21 | 
22 | {{< scss-docs name="clearfix" file="scss/mixins/_clearfix.scss" >}}
23 | 
24 | Use the mixin in SCSS:
25 | 
26 | ```scss
27 | .element {
28 |   @include clearfix;
29 | }
30 | ```
31 | 
32 | The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
33 | 
34 | {{< example >}}
35 | 

36 |   
37 |   
38 | 

39 | {{< /example >}}
40 | 


--------------------------------------------------------------------------------
/docs/content/helpers/colored-links.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: docs
 3 | title: Colored links
 4 | description: Colored links with hover states
 5 | group: helpers
 6 | aliases:
 7 |   - "/4.0/helpers/colored-links/"
 8 | toc: false
 9 | bootstrap: true
10 | ---
11 | 
12 | You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state.
13 | 
14 | {{< example >}}
15 | {{< colored-links.inline >}}
16 | {{- range (index $.Site.Data "theme-colors") }}
17 | {{ .name | title }} link
18 | {{- end -}}
19 | {{< /colored-links.inline >}}
20 | {{< /example >}}
21 | 
22 | {{< callout info >}}
23 | Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
24 | {{< /callout >}}
25 | 


--------------------------------------------------------------------------------
/docs/content/helpers/text-truncation.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: docs
 3 | title: Text truncation
 4 | description: Truncate long strings of text with an ellipsis.
 5 | group: helpers
 6 | aliases:
 7 |   - "/4.0/helpers/text-truncation/"
 8 | toc: false
 9 | bootstrap: true
10 | ---
11 | 
12 | For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.**
13 | 
14 | {{< example >}}
15 | 
16 | 

17 |   

18 |     This text is quite long, and will be truncated once displayed.
19 |   

20 | 

21 | 
22 | 
23 | 
24 |   This text is quite long, and will be truncated once displayed.
25 | 
26 | {{< /example >}}
27 | 


--------------------------------------------------------------------------------
/docs/content/helpers/vertical-rule.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: docs
 3 | title: Vertical rule
 4 | description: Use the custom vertical rule helper to create vertical dividers like the `
` element.
 5 | group: helpers
 6 | toc: true
 7 | bootstrap: true
 8 | added: "5.1"
 9 | ---
10 | 
11 | ## How it works
12 | 
13 | Vertical rules are inspired by the `
` element, allowing you to create vertical dividers in common layouts. They're styled just like `
` elements:
14 | 
15 | - They're `1px` wide
16 | - They have `min-height` of `1em`
17 | - Their color is set via `currentColor` and `opacity`
18 | 
19 | Customize them with additional styles as needed.
20 | 
21 | ## Example
22 | 
23 | {{< example >}}
24 | 

25 | {{< /example >}}
26 | 
27 | Vertical rules scale their height in flex layouts:
28 | 
29 | {{< example >}}
30 | 

31 |   

32 | 

33 | {{< /example >}}
34 | 
35 | ## With stacks
36 | 
37 | They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
38 | 
39 | {{< example >}}
40 | 

41 |   
First item

42 |   
Second item

43 |   

44 |   
Third item

45 | 

46 | {{< /example >}}
47 | 
48 | ## Customizing
49 | 
50 | ### SASS variables
51 | 
52 | Customize the vertical rule Sass variable to change its width.
53 | 
54 | {{< scss-docs name="vr-variables" file="scss/_variables.scss" >}}


--------------------------------------------------------------------------------
/docs/content/helpers/visually-hidden.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: docs
 3 | title: Visually hidden
 4 | description: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
 5 | group: helpers
 6 | bootstrap: true
 7 | aliases:
 8 |   - "/helpers/text-truncation/"
 9 |   - "/4.0/helpers/screen-readers/"
10 |   - "/4.0/helpers/text-truncation/"
11 |   - "/4.1/helpers/screen-readers/"
12 | ---
13 | 
14 | Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.
15 | 
16 | {{< example >}}
17 | 
18 | Skip to main content
19 | 
A container with a focusable element.

20 | {{< /example >}}
21 | 
22 | Both `visually-hidden` and `visually-hidden-focusable` can also be used as mixins.
23 | 
24 | ```scss
25 | // Usage as a mixin
26 | 
27 | .visually-hidden-title {
28 |   @include visually-hidden;
29 | }
30 | 
31 | .skip-navigation {
32 |   @include visually-hidden-focusable;
33 | }
34 | ```
35 | 


--------------------------------------------------------------------------------
/docs/content/layout/z-index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: docs
 3 | title: Z-index
 4 | description: While not a part of CoreUI for Bootstrap's grid system, z-indexes play an important part in how our components overlay and interact with one another.
 5 | group: layout
 6 | bootstrap: true
 7 | aliases:
 8 |   - "/4.0/layout/z-index/"
 9 | ---
10 | 
11 | Several CoreUI for Bootstrap components utilize `z-index`, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in CoreUI for Bootstrap that's been designed to properly layer navigation, tooltips and popovers, modals, and more.
12 | 
13 | These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There's no reason we couldn't have used `100`+ or `500`+.
14 | 
15 | We don't encourage customization of these individual values; should you change one, you likely need to change them all.
16 | 
17 | {{< scss-docs name="zindex-stack" file="scss/_variables.scss" >}}
18 | 
19 | To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements.
20 | 


--------------------------------------------------------------------------------
/docs/content/pricing/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: pricing
3 | title: Start using CoreUI's products for free!
4 | description: Compare CoreUI plans for developers — choose from Free, Pro, or Enterprise licenses. Start for free and upgrade anytime for advanced features and premium support.
5 | group: components
6 | ---


--------------------------------------------------------------------------------
/docs/content/templates/contents.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: docs
 3 | title: Contents
 4 | description: Discover what's included in CoreUI Bootstrap Admin Template, including our precompiled and source code flavors.
 5 | group: templates
 6 | toc: true
 7 | ---
 8 | 
 9 | ## Project structure
10 | 
11 | Once downloaded, unzip the compressed folder and you'll see something like this:
12 | 
13 | ```text
14 | coreui-bootstrap-admin-template/
15 | ├── build/
16 | ├── dist/
17 | ├── src/
18 | │   ├── assets/
19 | │   │   ├── brand/
20 | │   │   ├── favicon/
21 | │   │   ├── icons/
22 | │   │   ├── img/
23 | │   ├── js/
24 | │   ├── pug/
25 | │   │   ├── _layout/
26 | │   │   ├── _partial/
27 | │   │   ├── base/
28 | │   │   ├── buttons/
29 | │   │   ├── icons/
30 | │   │   ├── notifications/
31 | │   │   ├── ...
32 | │   │   ├── index.pug
33 | │   │   └── ...
34 | │   ├── scss/
35 | │   ├── vendors/
36 | │   └── views/
37 | │       ├── base/
38 | │       ├── buttons/
39 | │       ├── css/
40 | │       ├── icons/
41 | │       ├── notifications/
42 | │       ├── ...
43 | │       ├── index.html
44 | │       └── ...
45 | └── package.json
46 | ```
47 | 
48 | This is the most basic form of CoreUI Admin Templates. The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes precompiled files for quick drop-in usage in nearly any web project. Beyond that, any other included file provides support for packages, license information, and development.
49 | 


--------------------------------------------------------------------------------
/docs/content/utilities/opacity.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: docs
 3 | title: Opacity
 4 | description: Control the opacity of elements.
 5 | group: utilities
 6 | aliases:
 7 |   - "/4.0/utilities/opacity/"
 8 | added: "5.1"
 9 | bootstrap: true
10 | ---
11 | 
12 | The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
13 | 
14 | Set the `opacity` of an element using `.opacity-{value}` utilities.
15 | 
16 | 

17 |   
100%

18 |   
75%

19 |   
50%

20 |   
25%

21 |   
0%

22 | 

23 | 
24 | ```html
25 | 
...

26 | 
...

27 | 
...

28 | 
...

29 | 
...

30 | ```
31 | 
32 | ### Utilities API
33 | 
34 | Opacity utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
35 | 
36 | {{< scss-docs name="utils-opacity" file="scss/_utilities.scss" >}}
37 | 


--------------------------------------------------------------------------------
/docs/content/utilities/shadows.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: docs
 3 | title: Shadows
 4 | description: Add or remove shadows to elements with box-shadow utilities.
 5 | group: utilities
 6 | aliases:
 7 |   - "/4.0/utilities/shadows/"
 8 | toc: true
 9 | bootstrap: true
10 | ---
11 | 
12 | ## Examples
13 | 
14 | While shadows on components are disabled by default in CoreUI for Bootstrap and can be enabled via `$enable-shadows`, you can also quickly add or remove a shadow with our `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match).
15 | 
16 | {{< example >}}
17 | 
No shadow

18 | 
Small shadow

19 | 
Regular shadow

20 | 
Larger shadow

21 | {{< /example >}}
22 | 
23 | ## Sass
24 | 
25 | ### Variables
26 | 
27 | {{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}}
28 | 
29 | ### Utilities API
30 | 
31 | Shadow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
32 | 
33 | {{< scss-docs name="utils-shadow" file="scss/_utilities.scss" >}}
34 | 


--------------------------------------------------------------------------------
/docs/content/utilities/visibility.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: docs
 3 | title: Visibility
 4 | description: Control the visibility of elements, without modifying their display, with visibility utilities.
 5 | group: utilities
 6 | bootstrap: true
 7 | aliases:
 8 |   - "/4.0/utilities/visibility/"
 9 | ---
10 | 
11 | Set the `visibility` of elements with our visibility utilities. These utility classes do not modify the `display` value at all and do not affect layout – `.invisible` elements still take up space in the page.
12 | 
13 | {{< callout warning >}}
14 | Elements with the `.invisible` class will be hidden *both* visually and for assistive technology/screen reader users.
15 | {{< /callout >}}
16 | 
17 | Apply `.visible` or `.invisible` as needed.
18 | 
19 | ```html
20 | 
...

21 | 
22 | ```
23 | 
24 | ```scss
25 | // Class
26 | .visible {
27 |   visibility: visible !important;
28 | }
29 | .invisible {
30 |   visibility: hidden !important;
31 | }
32 | ```
33 | 
34 | ## Sass
35 | 
36 | ### Utilities API
37 | 
38 | Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
39 | 
40 | {{< scss-docs name="utils-visibility" file="scss/_utilities.scss" >}}
41 | 


--------------------------------------------------------------------------------
/docs/data/breakpoints.yml:
--------------------------------------------------------------------------------
 1 | - breakpoint: xs
 2 |   abbr: ""
 3 |   name: X-Small
 4 |   min-width: 0px
 5 |   container: ""
 6 | 
 7 | - breakpoint: sm
 8 |   abbr: -sm
 9 |   name: Small
10 |   min-width: 576px
11 |   container: 540px
12 | 
13 | - breakpoint: md
14 |   abbr: -md
15 |   name: Medium
16 |   min-width: 768px
17 |   container: 720px
18 | 
19 | - breakpoint: lg
20 |   abbr: -lg
21 |   name: Large
22 |   min-width: 992px
23 |   container: 960px
24 | 
25 | - breakpoint: xl
26 |   abbr: -xl
27 |   name: X-Large
28 |   min-width: 1200px
29 |   container: 1140px
30 | 
31 | - breakpoint: xxl
32 |   abbr: -xxl
33 |   name: XX-Large
34 |   min-width: 1400px
35 |   container: 1320px
36 | 


--------------------------------------------------------------------------------
/docs/data/colors.yml:
--------------------------------------------------------------------------------
 1 | - name: blue
 2 |   hex: "#0d6efd"
 3 | - name: indigo
 4 |   hex: "#6610f2"
 5 | - name: purple
 6 |   hex: "#6f42c1"
 7 | - name: pink
 8 |   hex: "#d63384"
 9 | - name: red
10 |   hex: "#dc3545"
11 | - name: orange
12 |   hex: "#fd7e14"
13 | - name: yellow
14 |   hex: "#ffc107"
15 | - name: green
16 |   hex: "#198754"
17 | - name: teal
18 |   hex: "#20c997"
19 | - name: cyan
20 |   hex: "#0dcaf0"
21 | - name: white
22 |   hex: "#fff"
23 | - name: gray
24 |   hex: "#9da5b1"
25 | - name: gray-dark
26 |   hex: "#343a40"
27 | 


--------------------------------------------------------------------------------
/docs/data/grays.yml:
--------------------------------------------------------------------------------
 1 | - name: 100
 2 |   hex: "#f8f9fa"
 3 | - name: 200
 4 |   hex: "#e9ecef"
 5 | - name: 300
 6 |   hex: "#dee2e6"
 7 | - name: 400
 8 |   hex: "#ced4da"
 9 | - name: 500
10 |   hex: "#adb5bd"
11 | - name: 600
12 |   hex: "#868e96"
13 | - name: 700
14 |   hex: "#495057"
15 | - name: 800
16 |   hex: "#343a40"
17 | - name: 900
18 |   hex: "#212529"
19 | 


--------------------------------------------------------------------------------
/docs/data/plugins.yml:
--------------------------------------------------------------------------------
 1 | - name: Alert
 2 |   description: Show and hide alert messages to your users.
 3 |   link: components/alerts/#javascript-behavior
 4 | 
 5 | - name: Button
 6 |   description: Programmatically control the active state for buttons.
 7 |   link: components/buttons/#button-plugin
 8 | 
 9 | - name: Carousel
10 |   description: Add slideshows to any page, including support for crossfade.
11 |   link: components/carousel/
12 | 
13 | - name: Collapse
14 |   description: Expand and collapse areas of content, or create accordions.
15 |   link: components/collapse/
16 | 
17 | - name: Dropdown
18 |   description: Create menus of links, actions, forms, and more.
19 |   link: components/dropdowns/
20 | 
21 | - name: Modal
22 |   description: Add flexible and responsive dialogs to your project.
23 |   link: components/modal/
24 | 
25 | - name: Offcanvas
26 |   description: Build and toggle hidden sidebars into any page.
27 |   link: components/offcanvas/
28 | 
29 | - name: Popover
30 |   description: Create custom overlays. Built on Popper.
31 |   link: components/popovers/
32 | 
33 | - name: Scrollspy
34 |   description: Automatically update active nav links based on page scroll.
35 |   link: components/scrollspy/
36 | 
37 | - name: Tab
38 |   description: Allow Bootstrap nav components to toggle contents.
39 |   link: components/navs-tabs/
40 | 
41 | - name: Toast
42 |   description: Show and hide notifications to your visitors.
43 |   link: components/toasts/
44 | 
45 | - name: Tooltip
46 |   description: Replace browser tooltips with custom ones. Built on Popper.
47 |   link: components/tooltips/
48 | 


--------------------------------------------------------------------------------
/docs/data/theme-colors.yml:
--------------------------------------------------------------------------------
 1 | - name: primary
 2 |   hex: "#0d6efd"
 3 | - name: secondary
 4 |   hex: "#6c757d"
 5 | - name: success
 6 |   hex: "#28a745"
 7 | - name: danger
 8 |   hex: "#dc3545"
 9 | - name: warning
10 |   hex: "#ffc107"
11 |   contrast_color: dark
12 | - name: info
13 |   hex: "#17a2b8"
14 |   contrast_color: dark
15 | - name: light
16 |   hex: "#f8f9fa"
17 |   contrast_color: dark
18 | - name: dark
19 |   hex: "#343a40"
20 | 


--------------------------------------------------------------------------------
/docs/layouts/_default/404.html:
--------------------------------------------------------------------------------
1 | {{ define "body_override" }}{{ end }}
2 | {{ define "main" }}
3 |   

4 |     {{ .Content }}
5 |   

6 | {{ end }}
7 | 


--------------------------------------------------------------------------------
/docs/layouts/_default/_markup/render-heading.html:
--------------------------------------------------------------------------------
1 | {{ .Text | safeHTML }}
2 | {{- if and (ge .Level .Page.Site.Params.anchors.min) (le .Level .Page.Site.Params.anchors.max) }}{{" " -}}
3 | 
4 | {{- end -}}
5 | 
6 | 


--------------------------------------------------------------------------------
/docs/layouts/_default/baseof.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     {{ partial "head" . }}
 5 |   
 6 |   {{ block "body_override" . }}{{ end }}
 7 |     {{/*  {{ partial "skippy" . }}  */}}
 8 |     {{ partial "sidebar" . }}
 9 |     

10 |       {{ partial "header" . }}
11 |       {{ block "main" . }}
12 |       {{ end }}
13 | 
14 |       {{ partial "footer" . }}
15 | 
16 |       {{ block "footer" . }}
17 |       {{ end }}
18 |     

19 |     {{ partial "scripts" . }}
20 |   
21 | 
22 | 


--------------------------------------------------------------------------------
/docs/layouts/_default/docs.markdown.md:
--------------------------------------------------------------------------------
1 | # {{ .Title }}
2 | 
3 | {{ .Description }}
4 | {{ .RenderShortcodes | safeHTML }}


--------------------------------------------------------------------------------
/docs/layouts/_default/redirect.html:
--------------------------------------------------------------------------------
1 | {{ partial "redirect" (.Page.Params.redirect | absURL) }}
2 | 


--------------------------------------------------------------------------------
/docs/layouts/_default/section.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/layouts/_default/section.html


--------------------------------------------------------------------------------
/docs/layouts/alias.html:
--------------------------------------------------------------------------------
1 | {{ partial "redirect" .Permalink }}
2 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/ads.html:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/analytics.html:
--------------------------------------------------------------------------------
 1 | {{- if hugo.IsProduction -}}
 2 | 
 3 | 
 8 | 
 9 | {{- end -}}
10 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/banner-black-friday.html:
--------------------------------------------------------------------------------
 1 | 
29 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/banner-new-year.html:
--------------------------------------------------------------------------------
 1 | 

 4 |   

 5 |     

 6 |       

 7 |         Christmas Tree
13 |       

14 |       

15 |         

16 |           New Year sale. Skyrocket your business in 2025!
17 |         

18 |         

19 |           Extra 25% off for all sale items + Free CoreUI Icons PRO with every
20 |           order!
Limited-time offer for the first 100 customers in 2025.
21 |           Use code 2025SKY25 at checkout.
22 |         

23 |       

24 |       

25 |         Get offer!
30 |       

31 |     

32 |   

33 |   
38 | 

39 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/banner-xmas.html:
--------------------------------------------------------------------------------
 1 | 
39 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/banner.html:
--------------------------------------------------------------------------------
 1 | {{ if .Page.Params.pro_component }}
 2 | 

 3 |   

 4 |     

 5 |       CoreUI PRO hexagon
 6 |     

 7 |     
This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.

 8 |     
Get CoreUI PRO

 9 |   

10 | 

11 | {{ end }}
12 | {{ if .Page.Params.preview_component }}
13 |   

14 |     
Alpha release

15 |     

16 |       This component is in the Alpha phase and has an experimental API, which can be changed in the final release. If you want to use this component, please install @coreui/coreui-pro {{ .Page.Params.preview_component }}
17 |     

18 |   

19 | {{ end }}
20 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/breadcrumb.html:
--------------------------------------------------------------------------------
 1 | {{ $url := .Permalink | relURL }}
 2 | 
16 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/callouts/danger-async-methods.md:
--------------------------------------------------------------------------------
1 | #### Asynchronous methods and transitions
2 | 
3 | All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
4 | 
5 | [See our JavaScript documentation for more information](/getting-started/javascript/#asynchronous-functions-and-transitions).
6 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/callouts/info-mediaqueries-breakpoints.md:
--------------------------------------------------------------------------------
1 | **Why subtract .02px?** Browsers don't currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
2 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/callouts/info-prefersreducedmotion.md:
--------------------------------------------------------------------------------
1 | The animation effect of this component is dependent on the `prefers-reduced-motion` media query. See the [reduced motion section of our accessibility documentation](/getting-started/accessibility/#reduced-motion).
2 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/callouts/info-sanitizer.md:
--------------------------------------------------------------------------------
1 | By default, this component uses the built-in content sanitizer, which strips out any HTML elements that are not explicitly allowed. See the [sanitizer section in our JavaScript documentation](/getting-started/javascript/#sanitizer) for more details.
2 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/callouts/warning-color-assistive-technologies.md:
--------------------------------------------------------------------------------
1 | ##### Conveying meaning to assistive technologies
2 | 
3 | Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/callouts/warning-data-bs-title-vs-title.md:
--------------------------------------------------------------------------------
1 | Feel free to use either `title` or `data-coreui-title` in your HTML. When `title` is used, Popper will replace it automatically with `data-coreui-title` when the element is rendered.
2 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/callouts/warning-input-support.md:
--------------------------------------------------------------------------------
1 | ##### Date & color input support
2 | 
3 | Keep in mind date inputs are [not fully supported](https://caniuse.com/input-datetime) by all browsers, namely Safari.
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/footer.html:
--------------------------------------------------------------------------------
 1 | 
14 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/head.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | {{ if .Page.Params.bootstrap }}
11 | Bootstrap {{ .Title | markdownify | title }} - extended examples and tutorials
12 | {{ else }}
13 | {{ .Title | markdownify  }} · {{ .Site.Title | markdownify }}
14 | {{ end }}
15 | 
16 | 
17 | 
18 | {{- if eq .Page.Layout "docs" -}}
19 | 
20 | {{- end }}
21 | 
22 | {{ with .Params.robots -}}
23 | 
24 | {{- end }}
25 | 
26 | {{- $colorModeJS := printf "/assets/js/color-modes.js" -}}
27 | 
28 | 
29 | {{ partial "stylesheet" . }}
30 | {{ partial "favicons" . }}
31 | {{ partial "social" . }}
32 | {{ partial "analytics" . }}
33 | 
34 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/check.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 | 
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/cloud-download.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 |   
4 | 
5 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/color-fill.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 |   
4 |   
5 | 
6 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/color-palette.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 |   
4 |   
5 |   
6 |   
7 | 
8 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/contrast.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 | 
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/devices.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 | 
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/energy.svg:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | energy
4 | 
5 | 
6 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/github.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 | 
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/hamburger.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 | 
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/handshake.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 | 
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/input-power.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 | 
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/list-rich.svg:
--------------------------------------------------------------------------------
 1 | 
 2 |   
 3 |   
 4 |   
 5 |   
 6 |   
 7 |   
 8 |   
 9 |   
10 |   
11 | 
12 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/moon.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 | 
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/opencollective.svg:
--------------------------------------------------------------------------------
1 | {{ with .title }}{{ . }}{{ else }}Open Collective{{ end }}


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/pen-alt.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 | 
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/pen-nib.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 | 
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/sun.svg:
--------------------------------------------------------------------------------
 1 | 
 2 |   
 3 |   
 4 |   
 5 |   
 6 |   
 7 |   
 8 |   
 9 |   
10 |   
11 | 
12 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/twitter.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 | 
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/update.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 |   
4 | 
5 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/icons/view-quilt.svg:
--------------------------------------------------------------------------------
1 | 
2 |   
3 | 
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/js-data-attributes.md:
--------------------------------------------------------------------------------
1 | As options can be passed via data attributes or JavaScript, you can append an option name to `data-coreui-`, as in `data-coreui-animation="{value}"`. Make sure to change the case type of the option name from "_camelCase_" to "_kebab-case_" when passing the options via data attributes. For example, use `data-coreui-custom-class="beautifier"` instead of `data-coreui-customClass="beautifier"`.
2 | 
3 | As of CoreUI 4.2.0, all components support an **experimental** reserved data attribute `data-coreui-config` that can house simple component configuration as a JSON string. When an element has `data-coreui-config='{"delay":0, "title":123}'` and `data-coreui-title="456"` attributes, the final `title` value will be `456` and the separate data attributes will override values given on `data-coreui-config`. In addition, existing data attributes are able to house JSON values like `data-coreui-delay='{"show":0,"hide":150}'`.
4 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/redirect.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     {{ . }}
 7 |     
 8 |     
 9 |     
10 |   
11 | 
12 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/social.html:
--------------------------------------------------------------------------------
 1 | {{ "" | safeHTML }}
 2 | 
 3 | 
 4 | 
 5 | 
 6 | 
 7 | 
 8 | 
 9 | {{ "" | safeHTML }}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/stylesheet.html:
--------------------------------------------------------------------------------
 1 | {{ if hugo.IsProduction -}}
 2 | {{ if eq .Page.Params.direction "rtl" -}}
 3 | 
 4 | {{- else -}}
 5 | 
 6 | {{- end -}}
 7 | 
 8 | {{- else -}}
 9 | 
10 | {{- end }}
11 | 
12 | {{- $sassOptions := dict "transpiler" "dartsass" "outputStyle" "expanded" "precision" 6 -}}
13 | {{- $postcssOptions := dict "use" "autoprefixer" "noMap" true -}}
14 | 
15 | {{- $targetDocsCssPath := "/assets/css/docs.css" -}}
16 | {{- $targetSearchCssPath := "assets/css/search.css" -}}
17 | 
18 | {{ if hugo.IsProduction -}}
19 |   {{- $sassOptions = merge $sassOptions (dict "outputStyle" "compressed") -}}
20 | {{- end -}}
21 | 
22 | {{- $docsCss := resources.Get "scss/docs.scss" | toCSS (merge (dict "targetPath" $targetDocsCssPath) $sassOptions) | postCSS $postcssOptions -}}
23 | {{- $searchCss := resources.Get "scss/search.scss" | toCSS (merge (dict "targetPath" $targetSearchCssPath) $sassOptions) | postCSS $postcssOptions -}}
24 | {{- $stylePickers := resources.Get "scss/docs-pickers.scss" | toCSS | postCSS $postcssOptions }}
25 | 
26 | 
27 | 
28 | 
29 | 


--------------------------------------------------------------------------------
/docs/layouts/partials/table-content.html:
--------------------------------------------------------------------------------
 1 |   
 2 |     
 3 |       #
 4 |       First
 5 |       Last
 6 |       Handle
 7 |     
 8 |   
 9 |   
10 |     
11 |       1
12 |       Mark
13 |       Otto
14 |       @mdo
15 |     
16 |     
17 |       2
18 |       Jacob
19 |       Thornton
20 |       @fat
21 |     
22 |     
23 |       3
24 |       Larry the Bird
25 |       @twitter
26 |     
27 |   
28 | 


--------------------------------------------------------------------------------
/docs/layouts/robots.txt:
--------------------------------------------------------------------------------
 1 | # www.robotstxt.org
 2 | 
 3 | {{- $isProduction := eq hugo.Environment "production" -}}
 4 | {{- $isNetlify := eq (getenv "NETLIFY") "true" -}}
 5 | {{- $allowCrawling := and (not $isNetlify) $isProduction -}}
 6 | 
 7 | {{ if $allowCrawling }}
 8 | # Allow crawling of all content
 9 | {{- end }}
10 | User-agent: *
11 | Disallow:{{ if not $allowCrawling }} /{{ end }}
12 | Sitemap: {{ "/sitemap.xml" | absURL }}
13 | 


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/added-in.html:
--------------------------------------------------------------------------------
1 | {{- /* Outputs badge to identify the first version something was added */ -}}
2 | 
3 | {{- $version := .Get 0 -}}
4 | 
5 | Added in v{{ $version }}
6 | 


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/bootstrap-compatibility.html:
--------------------------------------------------------------------------------
 1 | 

 2 |   

 3 |     Heads up! In our documentation, all examples show standard CoreUI implementation. If you are using a Bootstrap-compatible version of CoreUI, remember to use the following changes:
 4 |     
    
 5 |       
  • In the constructor, please use bootstrap instead of coreui. For example, new bootstrap.Alert(...) instead of new coreui.Alert(...)
    • 
 6 |       
  • In events, please use bs instead of coreui, for example close.bs.alert instead of close.coreui.alert
    • 
 7 |       
  • In data attributes, please use bs instead of coreui. For example, data-bs-toggle="..." instead of data-coreui-toggle="..."
    • 
 8 |     

 9 |   

10 | 



--------------------------------------------------------------------------------
/docs/layouts/shortcodes/bs-table.html:
--------------------------------------------------------------------------------
 1 | {{- /*
 2 |   Usage: `bs-table "class class-foo"`, where class can be any string
 3 | */ -}}
 4 | 
 5 | {{- $format := (index (complement .Page.AlternativeOutputFormats .Page.OutputFormats) 0).Name -}}
 6 | {{- if eq $format "markdown" -}}
 7 | {{ .Inner }}
 8 | {{- else -}}
 9 | {{- $css_class := .Get 0 | default "table" -}}
10 | {{- $html_table := .Inner | markdownify -}}
11 | {{- $html_table = replace $html_table "" (printf `
` $css_class) -}}
12 | {{- $html_table = replace $html_table "
" "" -}}
13 | {{- $html_table | safeHTML -}}
14 | {{- end -}}
15 | 
16 | 


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/callout-canary-releases.html:
--------------------------------------------------------------------------------
 1 | 

 2 |   

 3 |     Canary Releases
 4 |   

 5 |   

 6 |     CoreUI provides canary releases, enabling you to test new, unreleased features as soon as our team determines that the latest version is ready to ship; however, we want to conduct additional tests before the final release.
 7 |   

 8 |     Canary versions provide early access to upcoming changes, enabling developers to experiment with new functionalities before they are officially released. This is a great way to provide feedback to maintainers and ensure that the latest improvements work as expected.
 9 |   

10 | 

11 | 


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/callout-dart-sass-deprecations.html:
--------------------------------------------------------------------------------
1 | 

2 |   

3 |     Sass @import are deprecated and will be removed in Dart Sass 3.0.0.! 
4 |   

5 |   
You can also use @import rules, but please be aware that they are deprecated and will be removed in Dart Sass 3.0.0, resulting in a compilation warning. You can learn more about this deprecation here.

6 | 



--------------------------------------------------------------------------------
/docs/layouts/shortcodes/callout-dart-sass-modules.html:
--------------------------------------------------------------------------------
1 | 

2 |   

3 |     Heads up! Since @coreui/coreui v5.3.0 and @coreui/coreui-pro v5.10.0, we support Sass modules.
4 |   

5 |   

6 |     You can now use the modern @use and @forward rules instead of @import, which is deprecated and will be removed in Dart Sass 3.0.0. Using @import will result in a compilation warning. You can learn more about this transition here.
7 |   

8 | 



--------------------------------------------------------------------------------
/docs/layouts/shortcodes/callout-deprecated-dark-variants.html:
--------------------------------------------------------------------------------
1 | {{- /* Outputs message about dark mode component variants being deprecated in v5.0. */ -}}
2 | 
3 | {{- $component := .Get 0 -}}
4 | 
5 | 

6 |   

7 |     Heads up! Dark variants for components were deprecated in v5.0.0 with the introduction of color modes. Instead of adding .{{ $component }}-dark, set data-coreui-theme="dark" on the root element, a parent wrapper, or the component itself.
8 |   

9 | 



--------------------------------------------------------------------------------
/docs/layouts/shortcodes/callout.html:
--------------------------------------------------------------------------------
 1 | {{- /*
 2 |   Usage: `callout "type"`, where `type` is one of info (default), danger, or warning
 3 | */ -}}
 4 | 
 5 | {{- $css_class := .Get 0 | default "info" -}}
 6 | 
 7 | {{- $format := (index (complement .Page.AlternativeOutputFormats .Page.OutputFormats) 0).Name -}}
 8 | 
 9 | {{- if eq $format "markdown" -}}
10 | {{ .Inner }}
11 | {{- else -}}
12 | 

13 | {{ .Inner | markdownify }}
14 | 

15 | {{- end -}}
16 | 


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/canary-version.html:
--------------------------------------------------------------------------------
1 | {{- if $.Site.Params.cdn.canary_css -}}
2 | {{- .Inner | markdownify -}}
3 | {{- end -}}


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/deprecated-in.html:
--------------------------------------------------------------------------------
1 | {{- /* Outputs badge to identify the version something was deprecated */ -}}
2 | 
3 | {{- $version := .Get 0 -}}
4 | 
5 | Deprecated in v{{ $version }}
6 | 


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/docsref.html:
--------------------------------------------------------------------------------
1 | {{- relref . ((printf "%s" (.Get 0)) | relURL) -}}
2 | 


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/js-dismiss.html:
--------------------------------------------------------------------------------
 1 | {{- /* Usage: js-dismiss "ComponentName" */ -}}
 2 | 
 3 | {{- $name := .Get 0 -}}
 4 | 
 5 | Dismissal can be achieved with the `data` attribute on a button **within the {{ $name }}** as demonstrated below:
 6 | 
 7 | ```html
 8 | 
 9 | ```
10 | 
11 | or on a button **outside the {{ $name }}** using the `data-coreui-target` as demonstrated below:
12 | 
13 | ```html
14 | 
15 | ```
16 | 


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/markdown.html:
--------------------------------------------------------------------------------
1 | {{- .Inner | markdownify -}}
2 | 


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/param.html:
--------------------------------------------------------------------------------
 1 | {{- /*
 2 |   Work around wrong escapes in integrity attributes.
 3 |   Original: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/param.html
 4 | */ -}}
 5 | 
 6 | {{- $name := .Get 0 -}}
 7 | {{- with $name -}}
 8 | {{- $value := $.Page.Param . -}}
 9 | {{- /* If any parameter ends with `_hash`, mark the string as safe HTML */ -}}
10 | {{- if (strings.HasSuffix $name "_hash") -}}
11 |   {{- $value = $value | safeHTML -}}
12 | {{- end -}}
13 | {{- with $value }}{{ . }}{{ else }}{{ errorf "Param %q not found: %s" $name $.Position }}{{ end -}}
14 | {{- else }}{{ errorf "Missing param key: %s" $.Position }}{{ end -}}
15 | 


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/partial.html:
--------------------------------------------------------------------------------
1 | {{ partial (.Get 0) . }}
2 | 


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/tab.html:
--------------------------------------------------------------------------------
 1 | {{ if .Parent }}
 2 | 	{{ $name := trim (.Get "name") " " }}
 3 | 	{{ if not (.Parent.Scratch.Get "tabs") }}
 4 | 	  {{ .Parent.Scratch.Set "tabs" slice }}
 5 | 	{{ end }}
 6 | 	{{ with .Inner }}
 7 |     {{ $.Parent.Scratch.Add "tabs" (dict "name" $name "content" . ) }}
 8 | 	{{ end }}
 9 | {{ else }}
10 | 	{{- errorf "[%s] %q: tab shortcode missing its parent" site.Language.Lang .Page.Path -}}
11 | {{ end}}


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/table.html:
--------------------------------------------------------------------------------
 1 | {{- /*
 2 |   Usage: `table [args]`
 3 | 
 4 |   `args` are optional and can be one of the following:
 5 |     * class: any class(es) to be added to the `table` - default ""
 6 |     * simplified: show a simplified version in the examples - default `true`
 7 | */ -}}
 8 | 
 9 | {{- $class := .Get "class" -}}
10 | {{- $simplified := .Get "simplified" | default true -}}
11 | 
12 | {{- $table_attributes := "" -}}
13 | {{- $table_content := "  ...\n" -}}
14 | 
15 | {{- with $class -}}
16 |   {{- $table_attributes = printf ` class="%s"` . -}}
17 | {{- end -}}
18 | 
19 | {{- if eq $simplified "false" -}}
20 |   {{- $table_content = partialCached "table-content" . -}}
21 | {{- end -}}
22 | 
23 | {{- $table := printf "\n%s" $table_attributes $table_content -}}
24 | 
25 | 

26 |   
27 |     {{ partialCached "table-content" . }}
28 |   
29 | 

30 | 
31 | {{- highlight $table "html" "" -}}
32 | 


--------------------------------------------------------------------------------
/docs/layouts/shortcodes/tabs.html:
--------------------------------------------------------------------------------
 1 | {{ with .Inner }}{{/* don't do anything, just call it */}}{{ end }}
 2 | {{ $groupId := default "default" (.Get "groupId") }}
 3 | 
    
 4 |   {{ range $idx, $tab := .Scratch.Get "tabs" }}
 5 |   
 8 |   {{ end }}
 9 | 

10 | 

11 |   {{ range $idx, $tab := .Scratch.Get "tabs" }}
12 |   

13 |     {{ .content }}
14 |   

15 |   {{ end }}
16 | 

17 | 


--------------------------------------------------------------------------------
/docs/layouts/sitemap.xml:
--------------------------------------------------------------------------------
 1 | {{ printf "" | safeHTML }}
 2 | 
 3 |   {{- range .Data.Pages -}}{{ if and .Permalink (ne .Params.sitemap_exclude true) }}
 4 |   
 5 |     {{ .Permalink }}{{ if not .Lastmod.IsZero }}
 6 |     {{ safeHTML (.Lastmod.Format "2006-01-02T15:04:05-07:00") }}{{ end }}{{ with .Sitemap.ChangeFreq }}
 7 |     {{ . }}{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
 8 |     {{ .Sitemap.Priority }}{{ end }}{{ if .IsTranslated }}{{ range .Translations }}
 9 |     {{ end }}
10 |     {{ end }}
11 |   {{ end }}{{ end }}
12 | 
13 | 


--------------------------------------------------------------------------------
/docs/static/CNAME:
--------------------------------------------------------------------------------
1 | coreui.io
2 | 


--------------------------------------------------------------------------------
/docs/static/assets/brand/coreui-social.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/brand/coreui-social.jpg


--------------------------------------------------------------------------------
/docs/static/assets/brand/signet-social-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/brand/signet-social-logo.png


--------------------------------------------------------------------------------
/docs/static/assets/img/avatars/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/avatars/1.jpg


--------------------------------------------------------------------------------
/docs/static/assets/img/avatars/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/avatars/2.jpg


--------------------------------------------------------------------------------
/docs/static/assets/img/avatars/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/avatars/3.jpg


--------------------------------------------------------------------------------
/docs/static/assets/img/avatars/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/avatars/4.jpg


--------------------------------------------------------------------------------
/docs/static/assets/img/avatars/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/avatars/5.jpg


--------------------------------------------------------------------------------
/docs/static/assets/img/avatars/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/avatars/6.jpg


--------------------------------------------------------------------------------
/docs/static/assets/img/avatars/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/avatars/7.jpg


--------------------------------------------------------------------------------
/docs/static/assets/img/avatars/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/avatars/8.jpg


--------------------------------------------------------------------------------
/docs/static/assets/img/avatars/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/avatars/9.jpg


--------------------------------------------------------------------------------
/docs/static/assets/img/black-hexagon400h.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/black-hexagon400h.webp


--------------------------------------------------------------------------------
/docs/static/assets/img/core_blue_full_960px.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/core_blue_full_960px.png


--------------------------------------------------------------------------------
/docs/static/assets/img/coreui_alt_400px_cyber.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/coreui_alt_400px_cyber.webp


--------------------------------------------------------------------------------
/docs/static/assets/img/cyber-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/cyber-bg.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/android-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/android-icon-144x144.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/android-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/android-icon-192x192.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/android-icon-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/android-icon-36x36.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/android-icon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/android-icon-48x48.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/android-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/android-icon-72x72.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/android-icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/android-icon-96x96.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/apple-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/apple-icon-114x114.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/apple-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/apple-icon-120x120.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/apple-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/apple-icon-144x144.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/apple-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/apple-icon-152x152.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/apple-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/apple-icon-180x180.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/apple-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/apple-icon-57x57.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/apple-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/apple-icon-60x60.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/apple-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/apple-icon-72x72.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/apple-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/apple-icon-76x76.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/apple-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/apple-icon-precomposed.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/apple-icon.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/browserconfig.xml:
--------------------------------------------------------------------------------
1 | 
2 | #ffffff


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/favicon-16x16.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/favicon-32x32.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/favicon-96x96.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/favicon.ico


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |  "name": "App",
 3 |  "icons": [
 4 |   {
 5 |    "src": "\/android-icon-36x36.png",
 6 |    "sizes": "36x36",
 7 |    "type": "image\/png",
 8 |    "density": "0.75"
 9 |   },
10 |   {
11 |    "src": "\/android-icon-48x48.png",
12 |    "sizes": "48x48",
13 |    "type": "image\/png",
14 |    "density": "1.0"
15 |   },
16 |   {
17 |    "src": "\/android-icon-72x72.png",
18 |    "sizes": "72x72",
19 |    "type": "image\/png",
20 |    "density": "1.5"
21 |   },
22 |   {
23 |    "src": "\/android-icon-96x96.png",
24 |    "sizes": "96x96",
25 |    "type": "image\/png",
26 |    "density": "2.0"
27 |   },
28 |   {
29 |    "src": "\/android-icon-144x144.png",
30 |    "sizes": "144x144",
31 |    "type": "image\/png",
32 |    "density": "3.0"
33 |   },
34 |   {
35 |    "src": "\/android-icon-192x192.png",
36 |    "sizes": "192x192",
37 |    "type": "image\/png",
38 |    "density": "4.0"
39 |   }
40 |  ]
41 | }


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/ms-icon-144x144.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/ms-icon-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/ms-icon-150x150.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/ms-icon-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/ms-icon-310x310.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/ms-icon-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/favicons/ms-icon-70x70.png


--------------------------------------------------------------------------------
/docs/static/assets/img/favicons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/docs/static/assets/img/percents-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/assets/img/percents-bg.png


--------------------------------------------------------------------------------
/docs/static/assets/js/validate-forms.js:
--------------------------------------------------------------------------------
 1 | // Example starter JavaScript for disabling form submissions if there are invalid fields
 2 | (function () {
 3 |   'use strict'
 4 | 
 5 |   // Fetch all the forms we want to apply custom Bootstrap validation styles to
 6 |   const forms = document.querySelectorAll('.needs-validation')
 7 | 
 8 |   // Loop over them and prevent submission
 9 |   Array.prototype.slice.call(forms)
10 |     .forEach(form => {
11 |       form.addEventListener('submit', event => {
12 |         if (!form.checkValidity()) {
13 |           event.preventDefault()
14 |           event.stopPropagation()
15 |         }
16 | 
17 |         form.classList.add('was-validated')
18 |       }, false)
19 |     })
20 | })()
21 | 


--------------------------------------------------------------------------------
/docs/static/fonts/CoreUI-Icons-Brand.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/fonts/CoreUI-Icons-Brand.eot


--------------------------------------------------------------------------------
/docs/static/fonts/CoreUI-Icons-Brand.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/fonts/CoreUI-Icons-Brand.ttf


--------------------------------------------------------------------------------
/docs/static/fonts/CoreUI-Icons-Brand.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/fonts/CoreUI-Icons-Brand.woff


--------------------------------------------------------------------------------
/docs/static/fonts/CoreUI-Icons-Brand.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/fonts/CoreUI-Icons-Brand.woff2


--------------------------------------------------------------------------------
/docs/static/fonts/CoreUI-Icons-Linear.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/fonts/CoreUI-Icons-Linear.eot


--------------------------------------------------------------------------------
/docs/static/fonts/CoreUI-Icons-Linear.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/fonts/CoreUI-Icons-Linear.ttf


--------------------------------------------------------------------------------
/docs/static/fonts/CoreUI-Icons-Linear.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/fonts/CoreUI-Icons-Linear.woff


--------------------------------------------------------------------------------
/docs/static/fonts/CoreUI-Icons-Linear.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/fonts/CoreUI-Icons-Linear.woff2


--------------------------------------------------------------------------------
/docs/static/fonts/CoreUI-Icons-Solid.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/fonts/CoreUI-Icons-Solid.eot


--------------------------------------------------------------------------------
/docs/static/fonts/CoreUI-Icons-Solid.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/fonts/CoreUI-Icons-Solid.ttf


--------------------------------------------------------------------------------
/docs/static/fonts/CoreUI-Icons-Solid.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/fonts/CoreUI-Icons-Solid.woff


--------------------------------------------------------------------------------
/docs/static/fonts/CoreUI-Icons-Solid.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/docs/static/fonts/CoreUI-Icons-Solid.woff2


--------------------------------------------------------------------------------
/docs/static/sw.js:
--------------------------------------------------------------------------------
 1 | // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
 2 | // IT'S ALL JUST JUNK FOR OUR DOCS!
 3 | // ++++++++++++++++++++++++++++++++++++++++++
 4 | 
 5 | (function () {
 6 |   'use strict'
 7 | 
 8 |   if ('serviceWorker' in navigator) {
 9 |     window.addEventListener('load', function () {
10 |       navigator.serviceWorker.getRegistrations().then(function (registrations) {
11 |         for (var registration of registrations) {
12 |           registration.unregister()
13 |             .then(function () {
14 |               return self.clients.matchAll()
15 |             })
16 |             .then(function (clients) {
17 |               clients.forEach(function (client) {
18 |                 if (client.url && 'navigate' in client) {
19 |                   client.navigate(client.url)
20 |                 }
21 |               })
22 |             })
23 |         }
24 |       })
25 |     })
26 |   }
27 | })()
28 | 


--------------------------------------------------------------------------------
/js/index.esm.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * --------------------------------------------------------------------------
 3 |  * CoreUI PRO index.esm.js
 4 |  * Licensed under MIT (https://coreui.io/pro/license/)
 5 |  * --------------------------------------------------------------------------
 6 |  */
 7 | 
 8 | export { default as Alert } from './src/alert.js'
 9 | export { default as Button } from './src/button.js'
10 | export { default as Calendar } from './src/calendar.js'
11 | export { default as Carousel } from './src/carousel.js'
12 | export { default as Collapse } from './src/collapse.js'
13 | export { default as DatePicker } from './src/date-picker.js'
14 | export { default as DateRangePicker } from './src/date-range-picker.js'
15 | export { default as Dropdown } from './src/dropdown.js'
16 | export { default as LoadingButton } from './src/loading-button.js'
17 | export { default as Modal } from './src/modal.js'
18 | export { default as MultiSelect } from './src/multi-select.js'
19 | export { default as Navigation } from './src/navigation.js'
20 | export { default as Offcanvas } from './src/offcanvas.js'
21 | export { default as PasswordInput } from './src/password-input.js'
22 | export { default as Popover } from './src/popover.js'
23 | export { default as RangeSlider } from './src/range-slider.js'
24 | export { default as Rating } from './src/rating.js'
25 | export { default as ScrollSpy } from './src/scrollspy.js'
26 | export { default as Sidebar } from './src/sidebar.js'
27 | export { default as Stepper } from './src/stepper.js'
28 | export { default as Tab } from './src/tab.js'
29 | export { default as TimePicker } from './src/time-picker.js'
30 | export { default as Toast } from './src/toast.js'
31 | export { default as Tooltip } from './src/tooltip.js'
32 | 


--------------------------------------------------------------------------------
/js/src/util/component-functions.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * --------------------------------------------------------------------------
 3 |  * CoreUI util/component-functions.js
 4 |  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
 5 |  *
 6 |  * This is a modified version of the Bootstrap's util/component-functions.js
 7 |  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 8 |  * --------------------------------------------------------------------------
 9 |  */
10 | 
11 | import EventHandler from '../dom/event-handler.js'
12 | import SelectorEngine from '../dom/selector-engine.js'
13 | import { isDisabled } from './index.js'
14 | 
15 | const enableDismissTrigger = (component, method = 'hide') => {
16 |   const clickEvent = `click.dismiss${component.EVENT_KEY}`
17 |   const name = component.NAME
18 | 
19 |   EventHandler.on(document, clickEvent, `[data-coreui-dismiss="${name}"]`, function (event) {
20 |     if (['A', 'AREA'].includes(this.tagName)) {
21 |       event.preventDefault()
22 |     }
23 | 
24 |     if (isDisabled(this)) {
25 |       return
26 |     }
27 | 
28 |     const target = SelectorEngine.getElementFromSelector(this) || this.closest(`.${name}`)
29 |     const instance = component.getOrCreateInstance(target)
30 | 
31 |     // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
32 |     instance[method]()
33 |   })
34 | }
35 | 
36 | export {
37 |   enableDismissTrigger
38 | }
39 | 


--------------------------------------------------------------------------------
/js/src/util/date-range-picker.js:
--------------------------------------------------------------------------------
 1 | export const getLocalDateFromString = (string, locale, time) => {
 2 |   const date = new Date(2013, 11, 31, 17, 19, 22)
 3 |   let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
 4 |   regex = regex
 5 |         .replace('2013', '(?[0-9]{2,4})')
 6 |         .replace('12', '(?[0-9]{1,2})')
 7 |         .replace('31', '(?[0-9]{1,2})')
 8 |   if (time) {
 9 |     regex = regex
10 |             .replace('5', '(?[0-9]{1,2})')
11 |             .replace('17', '(?[0-9]{1,2})')
12 |             .replace('19', '(?[0-9]{1,2})')
13 |             .replace('22', '(?[0-9]{1,2})')
14 |             .replace('PM', '(?[A-Z]{2})')
15 |   }
16 | 
17 |   const rgx = new RegExp(`${regex}`)
18 |   const partials = string.match(rgx)
19 |   if (partials === null) {
20 |     return
21 |   }
22 | 
23 |   const newDate = partials.groups &&
24 |         (time ?
25 |           new Date(Number(partials.groups.year, 10), Number(partials.groups.month, 10) - 1, Number(partials.groups.day), partials.groups.ampm ?
26 |             (partials.groups.ampm === 'PM' ?
27 |               Number(partials.groups.hour) + 12 :
28 |               Number(partials.groups.hour)) :
29 |             Number(partials.groups.hour), Number(partials.groups.minute), Number(partials.groups.second)) :
30 |           new Date(Number(partials.groups.year), Number(partials.groups.month) - 1, Number(partials.groups.day)))
31 |   return newDate
32 | }
33 | 


--------------------------------------------------------------------------------
/js/tests/helpers/fixture.js:
--------------------------------------------------------------------------------
 1 | const fixtureId = 'fixture'
 2 | 
 3 | export const getFixture = () => {
 4 |   let fixtureElement = document.getElementById(fixtureId)
 5 | 
 6 |   if (!fixtureElement) {
 7 |     fixtureElement = document.createElement('div')
 8 |     fixtureElement.setAttribute('id', fixtureId)
 9 |     fixtureElement.style.position = 'absolute'
10 |     fixtureElement.style.top = '-10000px'
11 |     fixtureElement.style.left = '-10000px'
12 |     fixtureElement.style.width = '10000px'
13 |     fixtureElement.style.height = '10000px'
14 |     document.body.append(fixtureElement)
15 |   }
16 | 
17 |   return fixtureElement
18 | }
19 | 
20 | export const clearFixture = () => {
21 |   const fixtureElement = getFixture()
22 | 
23 |   fixtureElement.innerHTML = ''
24 | }
25 | 
26 | export const createEvent = (eventName, parameters = {}) => {
27 |   return new Event(eventName, parameters)
28 | }
29 | 
30 | export const jQueryMock = {
31 |   elements: undefined,
32 |   fn: {},
33 |   each(fn) {
34 |     for (const element of this.elements) {
35 |       fn.call(element)
36 |     }
37 |   }
38 | }
39 | 
40 | export const clearBodyAndDocument = () => {
41 |   const attributes = ['data-coreui-padding-right', 'style']
42 | 
43 |   for (const attribute of attributes) {
44 |     document.documentElement.removeAttribute(attribute)
45 |     document.body.removeAttribute(attribute)
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/js/tests/integration/bundle-modularity.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable import/extensions, import/no-unassigned-import */
 2 | 
 3 | import Tooltip from '../../dist/tooltip'
 4 | import '../../dist/carousel'
 5 | 
 6 | window.addEventListener('load', () => {
 7 |   [].concat(...document.querySelectorAll('[data-coreui-toggle="tooltip"]'))
 8 |     .map(tooltipNode => new Tooltip(tooltipNode))
 9 | })
10 | 


--------------------------------------------------------------------------------
/js/tests/integration/bundle.js:
--------------------------------------------------------------------------------
1 | import { Tooltip } from '../../../dist/js/coreui.esm.js'
2 | 
3 | window.addEventListener('load', () => {
4 |   [].concat(...document.querySelectorAll('[data-coreui-toggle="tooltip"]'))
5 |     .map(tooltipNode => new Tooltip(tooltipNode))
6 | })
7 | 


--------------------------------------------------------------------------------
/js/tests/integration/rollup.bundle-modularity.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | const commonjs = require('@rollup/plugin-commonjs')
 4 | const configRollup = require('./rollup.bundle.js')
 5 | 
 6 | const config = {
 7 |   ...configRollup,
 8 |   input: 'js/tests/integration/bundle-modularity.js',
 9 |   output: {
10 |     file: 'js/coverage/bundle-modularity.js',
11 |     format: 'iife'
12 |   }
13 | }
14 | 
15 | config.plugins.unshift(commonjs())
16 | 
17 | module.exports = config
18 | 


--------------------------------------------------------------------------------
/js/tests/integration/rollup.bundle.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | const { babel } = require('@rollup/plugin-babel')
 4 | const { nodeResolve } = require('@rollup/plugin-node-resolve')
 5 | const replace = require('@rollup/plugin-replace')
 6 | 
 7 | module.exports = {
 8 |   input: 'js/tests/integration/bundle.js',
 9 |   output: {
10 |     file: 'js/coverage/bundle.js',
11 |     format: 'iife'
12 |   },
13 |   plugins: [
14 |     replace({
15 |       'process.env.NODE_ENV': '"production"',
16 |       preventAssignment: true
17 |     }),
18 |     nodeResolve(),
19 |     babel({
20 |       exclude: 'node_modules/**',
21 |       babelHelpers: 'bundled'
22 |     })
23 |   ]
24 | }
25 | 


--------------------------------------------------------------------------------
/nuget/coreui.nuspec:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     coreui
 5 |     
 6 |     5
 7 |     CoreUI CSS
 8 |     creativeLabs Lukasz Holeczek
 9 |     coreui
10 |     The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintained by the CoreUI Team
11 |     https://coreui.io
12 |     CoreUI framework in CSS. Includes JavaScript
13 |     en-us
14 |     https://coreui.io
15 |     coreui.png
16 |     LICENSE.txt
17 |     Copyright 2013-2025
18 |     false
19 |     css mobile-first responsive front-end framework web
20 |     
21 |       
22 |     
23 |   
24 |   
25 |     
26 |     
27 | 
28 |     
29 |     
30 |     
31 | 
32 |     
33 |     
34 |     
35 |   
36 | 
37 | 


--------------------------------------------------------------------------------
/nuget/coreui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-pro/f232e8fedcfabc391700162a41b74fc69b7a50ce/nuget/coreui.png


--------------------------------------------------------------------------------
/package.js:
--------------------------------------------------------------------------------
 1 | // package metadata file for Meteor.js
 2 | 
 3 | /* global Package */
 4 | 
 5 | Package.describe({
 6 |   name: 'coreui:coreui', // https://atmospherejs.com/coreui/coreui
 7 |   summary: 'The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintained by the CoreUI Team.',
 8 |   version: '5.14.0',
 9 |   git: 'https://github.com/coreui/coreui.git'
10 | })
11 | 
12 | Package.onUse(api => {
13 |   api.versionsFrom('METEOR@1.0')
14 |   api.addFiles([
15 |     'dist/css/coreui.css',
16 |     'dist/js/coreui.js'
17 |   ], 'client')
18 | })
19 | 


--------------------------------------------------------------------------------
/scss/_accordion.import.scss:
--------------------------------------------------------------------------------
1 | @forward "accordion";
2 | 


--------------------------------------------------------------------------------
/scss/_alert.import.scss:
--------------------------------------------------------------------------------
1 | @forward "alert";
2 | 


--------------------------------------------------------------------------------
/scss/_avatar.import.scss:
--------------------------------------------------------------------------------
1 | @forward "avatar";
2 | 


--------------------------------------------------------------------------------
/scss/_badge.import.scss:
--------------------------------------------------------------------------------
1 | @forward "badge";
2 | 


--------------------------------------------------------------------------------
/scss/_badge.scss:
--------------------------------------------------------------------------------
 1 | @use "mixins/gradients" as *;
 2 | @use "vendor/rfs" as *;
 3 | @use "variables" as *;
 4 | 
 5 | // Base class
 6 | //
 7 | // Requires one of the contextual, color modifier classes for `color` and
 8 | // `background-color`.
 9 | 
10 | .badge {
11 |   // scss-docs-start badge-css-vars
12 |   --#{$prefix}badge-padding-x: #{$badge-padding-x};
13 |   --#{$prefix}badge-padding-y: #{$badge-padding-y};
14 |   @include rfs($badge-font-size, --#{$prefix}badge-font-size);
15 |   --#{$prefix}badge-font-weight: #{$badge-font-weight};
16 |   --#{$prefix}badge-color: #{$badge-color};
17 |   --#{$prefix}badge-border-radius: #{$badge-border-radius};
18 |   // scss-docs-end badge-css-vars
19 | 
20 |   display: inline-block;
21 |   padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
22 |   @include font-size(var(--#{$prefix}badge-font-size));
23 |   font-weight: var(--#{$prefix}badge-font-weight);
24 |   line-height: 1;
25 |   color: var(--#{$prefix}badge-color);
26 |   text-align: center;
27 |   white-space: nowrap;
28 |   vertical-align: baseline;
29 |   border-radius: var(--#{$prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list
30 |   @include gradient-bg();
31 | 
32 |   // Empty badges collapse automatically
33 |   &:empty {
34 |     display: none;
35 |   }
36 | }
37 | 
38 | // Quick fix for badges in buttons
39 | .btn .badge {
40 |   position: relative;
41 |   top: -1px;
42 | }
43 | 
44 | //
45 | // Badge Sizes
46 | //
47 | 
48 | .badge-sm {
49 |   --#{$prefix}badge-padding-x: #{$badge-padding-x-sm};
50 |   --#{$prefix}badge-padding-y: #{$badge-padding-y-sm};
51 |   @include font-size($badge-font-size-sm);
52 | }
53 | 


--------------------------------------------------------------------------------
/scss/_banner.scss:
--------------------------------------------------------------------------------
1 | $file: "" !default;
2 | 
3 | /*!
4 |  * CoreUI PRO #{$file} v5.14.0 (https://coreui.io)
5 |  * Copyright (c) 2025 creativeLabs Łukasz Holeczek
6 |  * License (https://coreui.io/pro/license/)
7 |  */
8 | 


--------------------------------------------------------------------------------
/scss/_breadcrumb.import.scss:
--------------------------------------------------------------------------------
1 | @forward "breadcrumb";
2 | 


--------------------------------------------------------------------------------
/scss/_button-group.import.scss:
--------------------------------------------------------------------------------
1 | @forward "button-group";
2 | 


--------------------------------------------------------------------------------
/scss/_buttons.import.scss:
--------------------------------------------------------------------------------
1 | @forward "buttons";
2 | 


--------------------------------------------------------------------------------
/scss/_calendar.import.scss:
--------------------------------------------------------------------------------
1 | @forward "calendar";
2 | 


--------------------------------------------------------------------------------
/scss/_callout.import.scss:
--------------------------------------------------------------------------------
1 | @use "callout";
2 | 


--------------------------------------------------------------------------------
/scss/_callout.scss:
--------------------------------------------------------------------------------
 1 | @use "mixins/border-radius" as *;
 2 | @use "variables" as *;
 3 | 
 4 | .callout {
 5 |   // scss-docs-start callout-css-vars
 6 |   --#{$prefix}callout-padding-x: #{$callout-padding-x};
 7 |   --#{$prefix}callout-padding-y: #{$callout-padding-y};
 8 |   --#{$prefix}callout-margin-x: #{$callout-margin-x};
 9 |   --#{$prefix}callout-margin-y: #{$callout-margin-y};
10 |   --#{$prefix}callout-border-width: #{$callout-border-width};
11 |   --#{$prefix}callout-border-color: #{$callout-border-color};
12 |   --#{$prefix}callout-border-left-width: #{$callout-border-left-width};
13 |   --#{$prefix}callout-border-radius: #{$callout-border-radius};
14 |   // scss-docs-end callout-css-vars
15 | 
16 |   padding: var(--#{$prefix}callout-padding-y) var(--#{$prefix}callout-padding-x);
17 |   margin: var(--#{$prefix}callout-margin-y) var(--#{$prefix}callout-margin-x);
18 |   border: var(--#{$prefix}callout-border-width) solid var(--#{$prefix}callout-border-color);
19 |   border-inline-start-color: var(--#{$prefix}callout-border-left-color);
20 |   border-inline-start-width: var(--#{$prefix}callout-border-left-width);
21 |   @include border-radius(var(--#{$prefix}callout-border-radius));
22 | }
23 | 
24 | // scss-docs-start callout-modifiers
25 | // Generate contextual modifier classes for colorizing the collor.
26 | @each $state, $value in $callout-variants {
27 |   .callout-#{$state} {
28 |     --#{$prefix}callout-border-left-color: #{$value};
29 |   }
30 | }
31 | // scss-docs-end callout-modifiers
32 | 


--------------------------------------------------------------------------------
/scss/_card.import.scss:
--------------------------------------------------------------------------------
1 | @forward "card";
2 | 


--------------------------------------------------------------------------------
/scss/_carousel.import.scss:
--------------------------------------------------------------------------------
1 | @forward "carousel";
2 | 


--------------------------------------------------------------------------------
/scss/_close.import.scss:
--------------------------------------------------------------------------------
1 | @forward "close";
2 | 


--------------------------------------------------------------------------------
/scss/_containers.import.scss:
--------------------------------------------------------------------------------
1 | @forward "containers";
2 | 


--------------------------------------------------------------------------------
/scss/_containers.scss:
--------------------------------------------------------------------------------
 1 | @use "mixins/breakpoints" as *;
 2 | @use "mixins/container" as *;
 3 | @use "variables" as *;
 4 | 
 5 | // Container widths
 6 | //
 7 | // Set the container width, and override it for fixed navbars in media queries.
 8 | 
 9 | @if $enable-container-classes {
10 |   // Single container class with breakpoint max-widths
11 |   .container,
12 |   // 100% wide container at all breakpoints
13 |   .container-fluid {
14 |     @include make-container();
15 |   }
16 | 
17 |   // Responsive containers that are 100% wide until a breakpoint
18 |   @each $breakpoint, $container-max-width in $container-max-widths {
19 |     .container-#{$breakpoint} {
20 |       @extend .container-fluid;
21 |     }
22 | 
23 |     @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
24 |       %responsive-container-#{$breakpoint} {
25 |         max-width: $container-max-width;
26 |       }
27 | 
28 |       // Extend each breakpoint which is smaller or equal to the current breakpoint
29 |       $extend-breakpoint: true;
30 | 
31 |       @each $name, $width in $grid-breakpoints {
32 |         @if ($extend-breakpoint) {
33 |           .container#{breakpoint-infix($name, $grid-breakpoints)} {
34 |             @extend %responsive-container-#{$breakpoint};
35 |           }
36 | 
37 |           // Once the current breakpoint is reached, stop extending
38 |           @if ($breakpoint == $name) {
39 |             $extend-breakpoint: false;
40 |           }
41 |         }
42 |       }
43 |     }
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/scss/_date-picker.import.scss:
--------------------------------------------------------------------------------
1 | @forward "date-picker";
2 | 


--------------------------------------------------------------------------------
/scss/_dropdown.import.scss:
--------------------------------------------------------------------------------
1 | @forward "dropdown";
2 | 


--------------------------------------------------------------------------------
/scss/_footer.import.scss:
--------------------------------------------------------------------------------
1 | @forward "footer";
2 | 


--------------------------------------------------------------------------------
/scss/_footer.scss:
--------------------------------------------------------------------------------
 1 | @use "mixins/elevation" as *;
 2 | @use "variables" as *;
 3 | 
 4 | .footer {
 5 |   // scss-docs-start footer-css-vars
 6 |   --#{$prefix}footer-min-height: #{$footer-min-height};
 7 |   --#{$prefix}footer-padding-x: #{$footer-padding-x};
 8 |   --#{$prefix}footer-padding-y: #{$footer-padding-y};
 9 |   --#{$prefix}footer-color: #{$footer-color};
10 |   --#{$prefix}footer-bg: #{$footer-bg};
11 |   --#{$prefix}footer-border-color: #{$footer-border-color};
12 |   --#{$prefix}footer-border: #{$footer-border-width} solid var(--#{$prefix}footer-border-color);
13 |   // scss-docs-end footer-css-vars
14 | 
15 |   display: flex;
16 |   flex-wrap: wrap; // allow us to do the line break for collapsing content
17 |   align-items: center;
18 |   justify-content: space-between;
19 |   min-height: var(--#{$prefix}footer-min-height);
20 |   padding: var(--#{$prefix}footer-padding-y) var(--#{$prefix}footer-padding-x);
21 |   color: var(--#{$prefix}footer-color);
22 |   background: var(--#{$prefix}footer-bg);
23 |   border-top: var(--#{$prefix}footer-border);
24 | }
25 | 
26 | .footer-sticky {
27 |   position: sticky;
28 |   bottom: 0;
29 |   z-index: $zindex-fixed;
30 |   @include elevation(2, "top");
31 | }
32 | 


--------------------------------------------------------------------------------
/scss/_forms.import.scss:
--------------------------------------------------------------------------------
 1 | @forward "forms/labels";
 2 | @forward "forms/form-text";
 3 | @forward "forms/form-control";
 4 | @forward "forms/form-select";
 5 | @forward "forms/form-check";
 6 | @forward "forms/form-range";
 7 | @forward "forms/floating-labels";
 8 | @forward "forms/input-group";
 9 | @forward "forms/validation";
10 | 


--------------------------------------------------------------------------------
/scss/_forms.scss:
--------------------------------------------------------------------------------
 1 | @forward "forms/labels";
 2 | @forward "forms/form-text";
 3 | @forward "forms/form-control";
 4 | @forward "forms/form-password";
 5 | @forward "forms/form-select";
 6 | @forward "forms/form-multi-select";
 7 | @forward "forms/form-check";
 8 | @forward "forms/form-range";
 9 | @forward "forms/floating-labels";
10 | @forward "forms/input-group";
11 | @forward "forms/validation";
12 | 


--------------------------------------------------------------------------------
/scss/_functions.import.scss:
--------------------------------------------------------------------------------
1 | @forward "functions";
2 | 


--------------------------------------------------------------------------------
/scss/_functions.scss:
--------------------------------------------------------------------------------
 1 | @forward "functions/assert-ascending";
 2 | @forward "functions/assert-starts-at-zero";
 3 | @forward "functions/color";
 4 | @forward "functions/color-contrast";
 5 | @forward "functions/color-contrast-variables";
 6 | @forward "functions/contrast-ratio";
 7 | @forward "functions/escape-svg";
 8 | @forward "functions/maps";
 9 | @forward "functions/math";
10 | @forward "functions/rgba-css-var";
11 | @forward "functions/str-replace";
12 | @forward "functions/to-rgb";
13 | 


--------------------------------------------------------------------------------
/scss/_grid.import.scss:
--------------------------------------------------------------------------------
1 | @forward "grid";
2 | 


--------------------------------------------------------------------------------
/scss/_grid.scss:
--------------------------------------------------------------------------------
 1 | @use "mixins/grid" as *;
 2 | @use "variables" as *;
 3 | 
 4 | $include-column-box-sizing: false !default;
 5 | 
 6 | // Row
 7 | //
 8 | // Rows contain your columns.
 9 | 
10 | :root {
11 |   @each $name, $value in $grid-breakpoints {
12 |     --#{$prefix}breakpoint-#{$name}: #{$value};
13 |   }
14 | 
15 |   --#{$prefix}mobile-breakpoint: #{$mobile-breakpoint};
16 | }
17 | 
18 | @if $enable-grid-classes {
19 |   .row {
20 |     @include make-row();
21 | 
22 |     > * {
23 |       @include make-col-ready($include-column-box-sizing);
24 |     }
25 |   }
26 | }
27 | 
28 | @if $enable-cssgrid {
29 |   .grid {
30 |     display: grid;
31 |     grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
32 |     grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
33 |     gap: var(--#{$prefix}gap, #{$grid-gutter-width});
34 | 
35 |     @include make-cssgrid();
36 |   }
37 | }
38 | 
39 | 
40 | // Columns
41 | //
42 | // Common styles for small and large grid columns
43 | 
44 | @if $enable-grid-classes {
45 |   @include make-grid-columns();
46 | }
47 | 
48 | @if $enable-container-queries {
49 |   .cq-container {
50 |     container-type: inline-size;
51 |   }
52 | 
53 |   .cq-row {
54 |     container-type: inline-size;
55 |     @include make-row();
56 | 
57 |     > * {
58 |       @include make-col-ready($include-column-box-sizing);
59 |     }
60 |   }
61 | 
62 |   @include make-c-grid-columns();
63 | }
64 | 


--------------------------------------------------------------------------------
/scss/_header.import.scss:
--------------------------------------------------------------------------------
1 | @forward "header";
2 | 


--------------------------------------------------------------------------------
/scss/_helpers.import.scss:
--------------------------------------------------------------------------------
1 | @forward "helpers";
2 | 


--------------------------------------------------------------------------------
/scss/_helpers.scss:
--------------------------------------------------------------------------------
 1 | @forward "helpers/clearfix";
 2 | @forward "helpers/color-bg";
 3 | @forward "helpers/colored-links";
 4 | @forward "helpers/focus-ring";
 5 | @forward "helpers/icon-link";
 6 | @forward "helpers/ratio";
 7 | @forward "helpers/position";
 8 | @forward "helpers/stacks";
 9 | @forward "helpers/visually-hidden";
10 | @forward "helpers/stretched-link";
11 | @forward "helpers/text-truncation";
12 | @forward "helpers/vr";
13 | 


--------------------------------------------------------------------------------
/scss/_icon.import.scss:
--------------------------------------------------------------------------------
1 | @forward "icon";
2 | 


--------------------------------------------------------------------------------
/scss/_icon.scss:
--------------------------------------------------------------------------------
 1 | @use "mixins/icon" as *;
 2 | @use "variables" as *;
 3 | 
 4 | .icon {
 5 |   display: inline-block;
 6 |   color: inherit;
 7 |   text-align: center;
 8 |   vertical-align: -.125rem; // Fix the position of icon
 9 |   fill: currentcolor;
10 |   &:not(.icon-c-s):not(.icon-custom-size) {
11 |     @include icon-size($icon-size-base);
12 | 
13 |     &.icon-xxl {
14 |       @include icon-size($icon-size-xxl);
15 |     }
16 | 
17 |     &.icon-xl {
18 |       @include icon-size($icon-size-xl);
19 |     }
20 | 
21 |     &.icon-lg {
22 |       @include icon-size($icon-size-lg);
23 |     }
24 | 
25 |     &.icon-sm {
26 |       @include icon-size($icon-size-sm);
27 |     }
28 | 
29 |     @for $i from 3 through 9 {
30 |       &.icon-#{$i}xl {
31 |         @include icon-size($i * $icon-size-base);
32 |       }
33 |     }
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/scss/_images.import.scss:
--------------------------------------------------------------------------------
1 | @forward "images";
2 | 


--------------------------------------------------------------------------------
/scss/_images.scss:
--------------------------------------------------------------------------------
 1 | @use "mixins/border-radius" as *;
 2 | @use "mixins/box-shadow" as *;
 3 | @use "mixins/image" as *;
 4 | @use "vendor/rfs" as *;
 5 | @use "variables" as *;
 6 | 
 7 | // Responsive images (ensure images don't scale beyond their parents)
 8 | //
 9 | // This is purposefully opt-in via an explicit class rather than being the default for all ``s.
10 | // We previously tried the "images are responsive by default" approach in Bootstrap v2,
11 | // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
12 | // which weren't expecting the images within themselves to be involuntarily resized.
13 | // See also https://github.com/twbs/bootstrap/issues/18178
14 | .img-fluid {
15 |   @include img-fluid();
16 | }
17 | 
18 | 
19 | // Image thumbnails
20 | .img-thumbnail {
21 |   padding: $thumbnail-padding;
22 |   background-color: var(--#{$prefix}thumbnail-bg, $thumbnail-bg);
23 |   border: $thumbnail-border-width solid var(--#{$prefix}thumbnail-border-color, $thumbnail-border-color);
24 |   @include border-radius($thumbnail-border-radius);
25 |   @include box-shadow($thumbnail-box-shadow);
26 | 
27 |   // Keep them at most 100% wide
28 |   @include img-fluid();
29 | }
30 | 
31 | //
32 | // Figures
33 | //
34 | 
35 | .figure {
36 |   // Ensures the caption's text aligns with the image.
37 |   display: inline-block;
38 | }
39 | 
40 | .figure-img {
41 |   margin-bottom: $spacer * .5;
42 |   line-height: 1;
43 | }
44 | 
45 | .figure-caption {
46 |   @include font-size($figure-caption-font-size);
47 |   color: var(--#{$prefix}figure-caption-color, $figure-caption-color);
48 | }
49 | 


--------------------------------------------------------------------------------
/scss/_list-group.import.scss:
--------------------------------------------------------------------------------
1 | @forward "list-group";
2 | 


--------------------------------------------------------------------------------
/scss/_loading-button.import.scss:
--------------------------------------------------------------------------------
1 | @forward "loading-button";
2 | 


--------------------------------------------------------------------------------
/scss/_loading-button.scss:
--------------------------------------------------------------------------------
 1 | @use "mixins/transition" as *;
 2 | @use "variables" as *;
 3 | 
 4 | //
 5 | // Loading button
 6 | //
 7 | 
 8 | .btn-loading {
 9 |   position: relative;
10 |   overflow: hidden;
11 | }
12 | 
13 | .btn-loading-spinner {
14 |   margin-inline: ($spacer * -2) $spacer;
15 |   opacity: 0;
16 |   @include transition(margin .15s, opacity .15s, border .15s);
17 | }
18 | 
19 | .btn-loading.is-loading {
20 |   .btn-loading-spinner {
21 |     width: 1rem;
22 |     margin-inline-start: 0;
23 |     opacity: 1;
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/scss/_maps.import.scss:
--------------------------------------------------------------------------------
1 | @forward "maps";
2 | 


--------------------------------------------------------------------------------
/scss/_mixins.import.scss:
--------------------------------------------------------------------------------
1 | @forward "mixins";
2 | 


--------------------------------------------------------------------------------
/scss/_mixins.scss:
--------------------------------------------------------------------------------
 1 | // Toggles
 2 | //
 3 | // Used in conjunction with global variables to enable certain theme features.
 4 | 
 5 | // LTR & RTL
 6 | @forward "mixins/ltr-rtl";
 7 | 
 8 | // Vendor
 9 | @forward "vendor/rfs";
10 | 
11 | // Deprecate
12 | @forward "mixins/deprecate";
13 | 
14 | // Helpers
15 | @forward "mixins/breakpoints";
16 | @forward "mixins/color-mode";
17 | @forward "mixins/color-scheme";
18 | @forward "mixins/image";
19 | @forward "mixins/resize";
20 | @forward "mixins/visually-hidden";
21 | @forward "mixins/reset-text";
22 | @forward "mixins/text-truncate";
23 | 
24 | // Utilities
25 | @forward "mixins/utilities";
26 | 
27 | // Components
28 | @forward "mixins/alert";
29 | @forward "mixins/avatar";
30 | @forward "mixins/backdrop";
31 | @forward "mixins/buttons";
32 | @forward "mixins/caret";
33 | @forward "mixins/pagination";
34 | @forward "mixins/lists";
35 | @forward "mixins/forms";
36 | @forward "mixins/table-variants";
37 | @forward "mixins/icon";
38 | 
39 | // Skins
40 | @forward "mixins/border-radius";
41 | @forward "mixins/box-shadow";
42 | @forward "mixins/elevation";
43 | @forward "mixins/gradients";
44 | @forward "mixins/transition";
45 | 
46 | // Layout
47 | @forward "mixins/clearfix";
48 | @forward "mixins/container";
49 | @forward "mixins/grid";
50 | 


--------------------------------------------------------------------------------
/scss/_modal.import.scss:
--------------------------------------------------------------------------------
1 | @forward "modal";
2 | 


--------------------------------------------------------------------------------
/scss/_nav.import.scss:
--------------------------------------------------------------------------------
1 | @forward "nav";
2 | 


--------------------------------------------------------------------------------
/scss/_navbar.import.scss:
--------------------------------------------------------------------------------
1 | @forward "navbar";
2 | 


--------------------------------------------------------------------------------
/scss/_offcanvas.import.scss:
--------------------------------------------------------------------------------
1 | @forward "offcanvas";
2 | 


--------------------------------------------------------------------------------
/scss/_pagination.import.scss:
--------------------------------------------------------------------------------
1 | @forward "pagination";
2 | 


--------------------------------------------------------------------------------
/scss/_placeholders.import.scss:
--------------------------------------------------------------------------------
1 | @forward "placeholders";
2 | 


--------------------------------------------------------------------------------
/scss/_placeholders.scss:
--------------------------------------------------------------------------------
 1 | @use "variables" as *;
 2 | 
 3 | .placeholder {
 4 |   display: inline-block;
 5 |   min-height: 1em;
 6 |   vertical-align: middle;
 7 |   cursor: wait;
 8 |   background-color: currentcolor;
 9 |   opacity: $placeholder-opacity-max;
10 | 
11 |   &.btn::before {
12 |     display: inline-block;
13 |     content: "";
14 |   }
15 | }
16 | 
17 | // Sizing
18 | .placeholder-xs {
19 |   min-height: .6em;
20 | }
21 | 
22 | .placeholder-sm {
23 |   min-height: .8em;
24 | }
25 | 
26 | .placeholder-lg {
27 |   min-height: 1.2em;
28 | }
29 | 
30 | // Animation
31 | .placeholder-glow {
32 |   .placeholder {
33 |     animation: placeholder-glow 2s ease-in-out infinite;
34 |   }
35 | }
36 | 
37 | @keyframes placeholder-glow {
38 |   50% {
39 |     opacity: $placeholder-opacity-min;
40 |   }
41 | }
42 | 
43 | .placeholder-wave {
44 |   mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
45 |   mask-size: 200% 100%;
46 |   animation: placeholder-wave 2s linear infinite;
47 | }
48 | 
49 | @keyframes placeholder-wave {
50 |   100% {
51 |     mask-position: -200% 0%;
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/scss/_popover.import.scss:
--------------------------------------------------------------------------------
1 | @forward "popover";
2 | 


--------------------------------------------------------------------------------
/scss/_progress.import.scss:
--------------------------------------------------------------------------------
1 | @forward "progress";
2 | 


--------------------------------------------------------------------------------
/scss/_range-slider.import.scss:
--------------------------------------------------------------------------------
1 | @forward "range-slider";
2 | 


--------------------------------------------------------------------------------
/scss/_rating.import.scss:
--------------------------------------------------------------------------------
1 | @forward "rating";
2 | 


--------------------------------------------------------------------------------
/scss/_reboot.import.scss:
--------------------------------------------------------------------------------
1 | @forward "reboot";
2 | 


--------------------------------------------------------------------------------
/scss/_root.import.scss:
--------------------------------------------------------------------------------
1 | @use "root";
2 | 


--------------------------------------------------------------------------------
/scss/_sidebar.import.scss:
--------------------------------------------------------------------------------
1 | @forward "sidebar/sidebar";
2 | @forward "sidebar/sidebar-nav";
3 | @forward "sidebar/sidebar-narrow";
4 | 


--------------------------------------------------------------------------------
/scss/_sidebar.scss:
--------------------------------------------------------------------------------
1 | @forward "sidebar/sidebar";
2 | @forward "sidebar/sidebar-nav";
3 | @forward "sidebar/sidebar-narrow";
4 | 


--------------------------------------------------------------------------------
/scss/_spinners.import.scss:
--------------------------------------------------------------------------------
1 | @forward "spinners";
2 | 


--------------------------------------------------------------------------------
/scss/_stepper.import.scss:
--------------------------------------------------------------------------------
1 | @forward "stepper";
2 | 


--------------------------------------------------------------------------------
/scss/_tables.import.scss:
--------------------------------------------------------------------------------
1 | @forward "tables";
2 | 


--------------------------------------------------------------------------------
/scss/_time-picker.import.scss:
--------------------------------------------------------------------------------
1 | @forward "time-picker";
2 | 


--------------------------------------------------------------------------------
/scss/_toasts.import.scss:
--------------------------------------------------------------------------------
1 | @forward "toasts";
2 | 


--------------------------------------------------------------------------------
/scss/_tooltip.import.scss:
--------------------------------------------------------------------------------
1 | @forward "tooltip";
2 | 


--------------------------------------------------------------------------------
/scss/_transitions.import.scss:
--------------------------------------------------------------------------------
1 | @forward "transitions";
2 | 


--------------------------------------------------------------------------------
/scss/_transitions.scss:
--------------------------------------------------------------------------------
 1 | @use "mixins/transition" as *;
 2 | @use "variables" as *;
 3 | 
 4 | .fade {
 5 |   @include transition($transition-fade);
 6 | 
 7 |   &:not(.show) {
 8 |     opacity: 0;
 9 |   }
10 | }
11 | 
12 | // scss-docs-start collapse-classes
13 | .collapse {
14 |   &:not(.show) {
15 |     display: none;
16 |   }
17 | }
18 | 
19 | .collapsing {
20 |   height: 0;
21 |   overflow: hidden;
22 |   @include transition($transition-collapse);
23 | 
24 |   &.collapse-horizontal {
25 |     width: 0;
26 |     height: auto;
27 |     @include transition($transition-collapse-width);
28 |   }
29 | }
30 | // scss-docs-end collapse-classes
31 | 


--------------------------------------------------------------------------------
/scss/_type.import.scss:
--------------------------------------------------------------------------------
1 | @forward "type";
2 | 


--------------------------------------------------------------------------------
/scss/_utilities.import.scss:
--------------------------------------------------------------------------------
1 | @forward "utilities";
2 | 


--------------------------------------------------------------------------------
/scss/_variables-dark.import.scss:
--------------------------------------------------------------------------------
1 | @forward "variables-dark";
2 | 


--------------------------------------------------------------------------------
/scss/_variables.import.scss:
--------------------------------------------------------------------------------
1 | @forward "variables";
2 | 


--------------------------------------------------------------------------------
/scss/coreui-grid.rtl.scss:
--------------------------------------------------------------------------------
1 | @use "coreui-grid" with (
2 |   $enable-ltr: false,
3 |   $enable-rtl: true
4 | );
5 | 


--------------------------------------------------------------------------------
/scss/coreui-grid.scss:
--------------------------------------------------------------------------------
 1 | @forward "banner" with (
 2 |   $file: "Grid"
 3 | );
 4 | 
 5 | @forward "variables";
 6 | @forward "variables-dark";
 7 | @forward "containers";
 8 | @forward "grid" with (
 9 |   $include-column-box-sizing: true !default,
10 | );
11 | @use "utilities" as *;
12 | @use "functions/maps" as *;
13 | 
14 | // Only use the utilities we need
15 | // stylelint-disable-next-line scss/dollar-variable-default
16 | $utilities: map-get-multiple(
17 |   $utilities,
18 |   (
19 |     "display",
20 |     "order",
21 |     "flex",
22 |     "flex-direction",
23 |     "flex-grow",
24 |     "flex-shrink",
25 |     "flex-wrap",
26 |     "justify-content",
27 |     "align-items",
28 |     "align-content",
29 |     "align-self",
30 |     "margin",
31 |     "margin-x",
32 |     "margin-y",
33 |     "margin-top",
34 |     "margin-end",
35 |     "margin-bottom",
36 |     "margin-start",
37 |     "negative-margin",
38 |     "negative-margin-x",
39 |     "negative-margin-y",
40 |     "negative-margin-top",
41 |     "negative-margin-end",
42 |     "negative-margin-bottom",
43 |     "negative-margin-start",
44 |     "padding",
45 |     "padding-x",
46 |     "padding-y",
47 |     "padding-top",
48 |     "padding-end",
49 |     "padding-bottom",
50 |     "padding-start",
51 |   )
52 | );
53 | 
54 | @use "utilities/api";
55 | 


--------------------------------------------------------------------------------
/scss/coreui-reboot.rtl.scss:
--------------------------------------------------------------------------------
1 | @use "coreui-reboot" with (
2 |   $enable-ltr: false,
3 |   $enable-rtl: true
4 | );
5 | 


--------------------------------------------------------------------------------
/scss/coreui-reboot.scss:
--------------------------------------------------------------------------------
 1 | @use "banner" with (
 2 |   $file: "Reboot"
 3 | );
 4 | 
 5 | @forward "variables";
 6 | @forward "variables-dark";
 7 | 
 8 | @forward "root";
 9 | @forward "reboot";
10 | 


--------------------------------------------------------------------------------
/scss/coreui-utilities.rtl.scss:
--------------------------------------------------------------------------------
1 | @use "coreui-utilities" with (
2 |   $enable-ltr: false,
3 |   $enable-rtl: true
4 | );
5 | 


--------------------------------------------------------------------------------
/scss/coreui-utilities.scss:
--------------------------------------------------------------------------------
 1 | @use "banner" with (
 2 |   $file: "Utilities"
 3 | );
 4 | 
 5 | // Configuration
 6 | @forward "variables";
 7 | @forward "variables-dark";
 8 | 
 9 | // Layout & components
10 | @forward "root";
11 | 
12 | // Helpers
13 | @forward "helpers";
14 | 
15 | // Utilities
16 | @forward "utilities/api";
17 | 


--------------------------------------------------------------------------------
/scss/coreui.rtl.scss:
--------------------------------------------------------------------------------
1 | @use "coreui" with (
2 |   $enable-ltr: false,
3 |   $enable-rtl: true
4 | );
5 | 


--------------------------------------------------------------------------------
/scss/coreui.scss:
--------------------------------------------------------------------------------
 1 | @use "banner";
 2 | 
 3 | // scss-docs-start import-stack
 4 | // Configuration
 5 | @forward "variables";
 6 | @forward "variables-dark";
 7 | @forward "functions";
 8 | @forward "mixins";
 9 | 
10 | // Layout & components
11 | @forward "root";
12 | @forward "reboot";
13 | @forward "type";
14 | @forward "images";
15 | @forward "containers";
16 | @forward "grid";
17 | @forward "tables";
18 | @forward "forms";
19 | @forward "buttons";
20 | @forward "transitions";
21 | @forward "dropdown";
22 | @forward "button-group";
23 | @forward "nav";
24 | @forward "navbar";
25 | @forward "card";
26 | @forward "accordion";
27 | @forward "breadcrumb";
28 | @forward "pagination";
29 | @forward "badge";
30 | @forward "alert";
31 | @forward "progress";
32 | @forward "list-group";
33 | @forward "close";
34 | @forward "toasts";
35 | @forward "modal";
36 | @forward "tooltip";
37 | @forward "popover";
38 | @forward "carousel";
39 | @forward "spinners";
40 | @forward "offcanvas";
41 | @forward "placeholders";
42 | 
43 | @forward "avatar";
44 | @forward "calendar";
45 | @forward "callout";
46 | @forward "date-picker";
47 | @forward "footer";
48 | @forward "header";
49 | @forward "icon";
50 | @forward "loading-button";
51 | @forward "range-slider";
52 | @forward "rating";
53 | @forward "sidebar";
54 | @forward "stepper";
55 | @forward "time-picker";
56 | 
57 | // Helpers
58 | @forward "helpers";
59 | 
60 | // Utilities
61 | @forward "utilities/api";
62 | @forward "utilities/bg-gradients";
63 | // scss-docs-end import-stack
64 | 


--------------------------------------------------------------------------------
/scss/forms/_floating-labels.import.scss:
--------------------------------------------------------------------------------
1 | @forward "floating-labels";
2 | 


--------------------------------------------------------------------------------
/scss/forms/_form-check.import.scss:
--------------------------------------------------------------------------------
1 | @forward "form-check";
2 | 


--------------------------------------------------------------------------------
/scss/forms/_form-control.import.scss:
--------------------------------------------------------------------------------
1 | @forward "form-control";
2 | 


--------------------------------------------------------------------------------
/scss/forms/_form-multi-select.import.scss:
--------------------------------------------------------------------------------
1 | @forward "form-multi-select";
2 | 


--------------------------------------------------------------------------------
/scss/forms/_form-password.import.scss:
--------------------------------------------------------------------------------
1 | @forward "form-password";
2 | 


--------------------------------------------------------------------------------
/scss/forms/_form-range.import.scss:
--------------------------------------------------------------------------------
1 | @forward "form-range";
2 | 


--------------------------------------------------------------------------------
/scss/forms/_form-select.import.scss:
--------------------------------------------------------------------------------
1 | @forward "form-select";
2 | 


--------------------------------------------------------------------------------
/scss/forms/_form-text.import.scss:
--------------------------------------------------------------------------------
1 | @forward "form-text";
2 | 


--------------------------------------------------------------------------------
/scss/forms/_form-text.scss:
--------------------------------------------------------------------------------
 1 | @use "../vendor/rfs" as *;
 2 | @use "../variables" as *;
 3 | 
 4 | //
 5 | // Form text
 6 | //
 7 | 
 8 | .form-text {
 9 |   margin-top: $form-text-margin-top;
10 |   @include font-size($form-text-font-size);
11 |   font-style: $form-text-font-style;
12 |   font-weight: $form-text-font-weight;
13 |   color: $form-text-color;
14 | }
15 | 


--------------------------------------------------------------------------------
/scss/forms/_input-group.import.scss:
--------------------------------------------------------------------------------
1 | @forward "input-group";
2 | 


--------------------------------------------------------------------------------
/scss/forms/_labels.import.scss:
--------------------------------------------------------------------------------
1 | @forward "labels";
2 | 


--------------------------------------------------------------------------------
/scss/forms/_labels.scss:
--------------------------------------------------------------------------------
 1 | @use "../functions/math" as *;
 2 | @use "../vendor/rfs" as *;
 3 | @use "../variables" as *;
 4 | 
 5 | //
 6 | // Labels
 7 | //
 8 | 
 9 | .form-label {
10 |   margin-bottom: $form-label-margin-bottom;
11 |   @include font-size($form-label-font-size);
12 |   font-style: $form-label-font-style;
13 |   font-weight: $form-label-font-weight;
14 |   color: $form-label-color;
15 | }
16 | 
17 | // For use with horizontal and inline forms, when you need the label (or legend)
18 | // text to align with the form controls.
19 | .col-form-label {
20 |   padding-top: add($input-padding-y, $input-border-width);
21 |   padding-bottom: add($input-padding-y, $input-border-width);
22 |   margin-bottom: 0; // Override the `` default
23 |   @include font-size(inherit); // Override the `` default
24 |   font-style: $form-label-font-style;
25 |   font-weight: $form-label-font-weight;
26 |   line-height: $input-line-height;
27 |   color: $form-label-color;
28 | }
29 | 
30 | .col-form-label-lg {
31 |   padding-top: add($input-padding-y-lg, $input-border-width);
32 |   padding-bottom: add($input-padding-y-lg, $input-border-width);
33 |   @include font-size($input-font-size-lg);
34 | }
35 | 
36 | .col-form-label-sm {
37 |   padding-top: add($input-padding-y-sm, $input-border-width);
38 |   padding-bottom: add($input-padding-y-sm, $input-border-width);
39 |   @include font-size($input-font-size-sm);
40 | }
41 | 


--------------------------------------------------------------------------------
/scss/forms/_validation.import.scss:
--------------------------------------------------------------------------------
1 | @forward "validation";
2 | 


--------------------------------------------------------------------------------
/scss/forms/_validation.scss:
--------------------------------------------------------------------------------
 1 | @use "../mixins/forms" as *;
 2 | @use "../variables" as *;
 3 | 
 4 | // Form validation
 5 | //
 6 | // Provide feedback to users when form field values are valid or invalid. Works
 7 | // primarily for client-side validation via scoped `:invalid` and `:valid`
 8 | // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
 9 | // server-side validation.
10 | 
11 | // scss-docs-start form-validation-states-loop
12 | @each $state, $data in $form-validation-states {
13 |   @include form-validation-state($state, $data...);
14 | }
15 | // scss-docs-end form-validation-states-loop
16 | 


--------------------------------------------------------------------------------
/scss/functions/_assert-ascending.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:math";
 2 | 
 3 | // Ascending
 4 | // Used to evaluate Sass maps like our grid breakpoints.
 5 | @mixin assert-ascending($map, $map-name) {
 6 |   $prev-key: null;
 7 |   $prev-num: null;
 8 |   @each $key, $num in $map {
 9 |     @if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" {
10 |       // Do nothing
11 |     } @else if not math.compatible($prev-num, $num) {
12 |       @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
13 |     } @else if $prev-num >= $num {
14 |       @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
15 |     }
16 |     $prev-key: $key;
17 |     $prev-num: $num;
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/scss/functions/_assert-starts-at-zero.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:list";
 2 | @use "sass:map";
 3 | 
 4 | // Starts at zero
 5 | // Used to ensure the min-width of the lowest breakpoint starts at 0.
 6 | @mixin assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
 7 |   @if list.length($map) > 0 {
 8 |     $values: map.values($map);
 9 |     $first-value: list.nth($values, 1);
10 |     @if $first-value != 0 {
11 |       @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/scss/functions/_color-contrast-variables.scss:
--------------------------------------------------------------------------------
 1 | @use "contrast-ratio" as *;
 2 | 
 3 | // We use this function only in variables.scss because recursive imports are not allowed in Sass anymore.
 4 | 
 5 | @function color-contrast-variables($background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio) {
 6 |   $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
 7 |   $max-ratio: 0;
 8 |   $max-ratio-color: null;
 9 | 
10 |   @each $color in $foregrounds {
11 |     $contrast-ratio: contrast-ratio($background, $color);
12 |     @if $contrast-ratio > $min-contrast-ratio {
13 |       @return $color;
14 |     } @else if $contrast-ratio > $max-ratio {
15 |       $max-ratio: $contrast-ratio;
16 |       $max-ratio-color: $color;
17 |     }
18 |   }
19 | 
20 |   @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
21 | 
22 |   @return $max-ratio-color;
23 | }
24 | 


--------------------------------------------------------------------------------
/scss/functions/_color-contrast.scss:
--------------------------------------------------------------------------------
 1 | @use "contrast-ratio" as *;
 2 | @use "../variables" as *;
 3 | 
 4 | // Color contrast
 5 | // See https://github.com/twbs/bootstrap/pull/30168
 6 | 
 7 | // scss-docs-start color-contrast-function
 8 | @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
 9 |   $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
10 |   $max-ratio: 0;
11 |   $max-ratio-color: null;
12 | 
13 |   @each $color in $foregrounds {
14 |     $contrast-ratio: contrast-ratio($background, $color);
15 |     @if $contrast-ratio > $min-contrast-ratio {
16 |       @return $color;
17 |     } @else if $contrast-ratio > $max-ratio {
18 |       $max-ratio: $contrast-ratio;
19 |       $max-ratio-color: $color;
20 |     }
21 |   }
22 | 
23 |   @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
24 | 
25 |   @return $max-ratio-color;
26 | }
27 | // scss-docs-end color-contrast-function
28 | 


--------------------------------------------------------------------------------
/scss/functions/_color.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:color";
 2 | 
 3 | // scss-docs-start color-functions
 4 | // Tint a color: mix a color with white
 5 | @function tint-color($color, $weight) {
 6 |   @return color.mix(white, $color, $weight);
 7 | }
 8 | 
 9 | // Shade a color: mix a color with black
10 | @function shade-color($color, $weight) {
11 |   @return color.mix(black, $color, $weight);
12 | }
13 | 
14 | // Shade the color if the weight is positive, else tint it
15 | @function shift-color($color, $weight) {
16 |   @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
17 | }
18 | // scss-docs-end color-functions
19 | 


--------------------------------------------------------------------------------
/scss/functions/_contrast-ratio.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:color";
 2 | @use "sass:map";
 3 | @use "sass:math";
 4 | @use "math" as *;
 5 | 
 6 | @function contrast-ratio($background, $foreground) {
 7 |   $l1: luminance($background);
 8 |   $l2: luminance(opaque($background, $foreground));
 9 | 
10 |   @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
11 | }
12 | 
13 | // Return WCAG2.2 relative luminance
14 | // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
15 | // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
16 | @function luminance($color) {
17 |   $rgb: (
18 |     "r": color.channel($color, "red", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
19 |     "g": color.channel($color, "green", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
20 |     "b": color.channel($color, "blue", $space: rgb) // stylelint-disable-line scss/at-function-named-arguments
21 |   );
22 | 
23 |   @each $name, $value in $rgb {
24 |     $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), math.pow(divide((divide(math.round($value) + 1, 255) + .055), 1.055), 2.4));
25 |     $rgb: map.merge($rgb, ($name: $value));
26 |   }
27 | 
28 |   @return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
29 | }
30 | 
31 | // Return opaque color
32 | // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
33 | @function opaque($background, $foreground) {
34 |   @return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
35 | }
36 | 


--------------------------------------------------------------------------------
/scss/functions/_escape-svg.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:string";
 2 | @use "str-replace" as *;
 3 | @use "../variables" as *;
 4 | 
 5 | // See https://codepen.io/kevinweber/pen/dXWoRw
 6 | //
 7 | // Requires the use of quotes around data URIs.
 8 | 
 9 | @function escape-svg($string) {
10 |   @if string.index($string, "data:image/svg+xml") {
11 |     @each $char, $encoded in $escaped-characters {
12 |       // Do not escape the url brackets
13 |       @if string.index($string, "url(") == 1 {
14 |         $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
15 |       } @else {
16 |         $string: str-replace($string, $char, $encoded);
17 |       }
18 |     }
19 |   }
20 | 
21 |   @return $string;
22 | }
23 | 


--------------------------------------------------------------------------------
/scss/functions/_maps.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:list";
 2 | @use "sass:map";
 3 | @use "sass:meta";
 4 | @use "color" as *;
 5 | @use "rgba-css-var" as *;
 6 | @use "to-rgb" as *;
 7 | @use "../variables" as *;
 8 | 
 9 | // stylelint-disable scss/dollar-variable-pattern
10 | @function map-loop($map, $func, $args...) {
11 |   $_map: ();
12 | 
13 |   @each $key, $value in $map {
14 |     // allow to pass the $key and $value of the map as an function argument
15 |     $_args: ();
16 |     @each $arg in $args {
17 |       $_args: list.append($_args, if($arg == "$prefix", $prefix, if($arg == "$key", $key, if($arg == "$value", $value, $arg))));
18 |     }
19 | 
20 |     $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
21 |   }
22 |   @return $_map;
23 | }
24 | // stylelint-enable scss/dollar-variable-pattern
25 | 
26 | // Internal Bootstrap function to turn maps into its negative variant.
27 | // It prefixes the keys with `n` and makes the value negative.
28 | @function negativify-map($map) {
29 |   $result: ();
30 |   @each $key, $value in $map {
31 |     @if $key != 0 {
32 |       $result: map.merge($result, ("n" + $key: (-$value)));
33 |     }
34 |   }
35 |   @return $result;
36 | }
37 | 
38 | // Get multiple keys from a sass map
39 | @function map-get-multiple($map, $values) {
40 |   $result: ();
41 |   @each $key, $value in $map {
42 |     @if (list.index($values, $key) != null) {
43 |       $result: map.merge($result, ($key: $value));
44 |     }
45 |   }
46 |   @return $result;
47 | }
48 | 
49 | // Merge multiple maps
50 | @function map-merge-multiple($maps...) {
51 |   $merged-maps: ();
52 | 
53 |   @each $map in $maps {
54 |     $merged-maps: map.merge($merged-maps, $map);
55 |   }
56 |   @return $merged-maps;
57 | }
58 | 


--------------------------------------------------------------------------------
/scss/functions/_rgba-css-var.scss:
--------------------------------------------------------------------------------
 1 | @function rgba-css-var($prefix, $identifier, $target) {
 2 |   @if $identifier == "body" and $target == "bg" {
 3 |     @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
 4 |   } @if $identifier == "body" and $target == "text" {
 5 |     @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
 6 |   } @else {
 7 |     @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/scss/functions/_str-replace.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:string";
 2 | 
 3 | // Replace `$search` with `$replace` in `$string`
 4 | // Used on our SVG icon backgrounds for custom forms.
 5 | //
 6 | // @author Kitty Giraudel
 7 | // @param {String} $string - Initial string
 8 | // @param {String} $search - Substring to replace
 9 | // @param {String} $replace ('') - New value
10 | // @return {String} - Updated string
11 | @function str-replace($string, $search, $replace: "") {
12 |   $index: string.index($string, $search);
13 | 
14 |   @if $index {
15 |     @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
16 |   }
17 | 
18 |   @return $string;
19 | }
20 | 


--------------------------------------------------------------------------------
/scss/functions/_to-rgb.scss:
--------------------------------------------------------------------------------
1 | @use "sass:color";
2 | 
3 | @function to-rgb($value) {
4 |   @return color.channel($value, "red", $space: rgb), color.channel($value, "green", $space: rgb), color.channel($value, "blue", $space: rgb);
5 | }
6 | 


--------------------------------------------------------------------------------
/scss/helpers/_clearfix.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins/clearfix" as *;
2 | 
3 | .clearfix {
4 |   @include clearfix();
5 | }
6 | 


--------------------------------------------------------------------------------
/scss/helpers/_color-bg.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:map";
 2 | @use "../functions/color" as *;
 3 | @use "../functions/color-contrast" as *;
 4 | @use "../functions/to-rgb" as *;
 5 | @use "../mixins/color-mode" as *;
 6 | @use "../variables" as *;
 7 | @use "../variables-dark" as *;
 8 | 
 9 | @each $color, $value in $theme-colors {
10 |   .text-bg-#{$color} {
11 |     color: color-contrast($value) if($enable-important-utilities, !important, null);
12 |     background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
13 |   }
14 | }
15 | 
16 | @each $color, $value in $theme-gradients {
17 |   .text-bg-#{$color}-gradient {
18 |     color: color-contrast(map.get($value, "start")) if($enable-important-utilities, !important, null);
19 |     background-color: var(--#{$prefix}#{$color});
20 |     background-image: linear-gradient(45deg, var(--#{$prefix}#{$color}-start) 0%, var(--#{$prefix}#{$color}-stop) 100%);
21 |   }
22 | }
23 | 
24 | @if $enable-dark-mode {
25 |   @include color-mode(dark) {
26 |     @each $color, $value in $theme-colors-dark {
27 |       $color-rgb: to-rgb($value);
28 |       .text-bg-#{$color} {
29 |         color: color-contrast($value) if($enable-important-utilities, !important, null);
30 |         background-color: rgba($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
31 |       }
32 |     }
33 | 
34 |     @each $color, $value in $theme-gradients-dark {
35 |       .text-bg-#{$color}-gradient {
36 |         color: color-contrast(map.get($value, "start")) if($enable-important-utilities, !important, null);
37 |       }
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/scss/helpers/_focus-ring.scss:
--------------------------------------------------------------------------------
1 | @use "../variables" as *;
2 | 
3 | .focus-ring:focus {
4 |   outline: 0;
5 |   // By default, there is no `--cui-focus-ring-x`, `--cui-focus-ring-y`, or `--cui-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
6 |   box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
7 | }
8 | 


--------------------------------------------------------------------------------
/scss/helpers/_icon-link.scss:
--------------------------------------------------------------------------------
 1 | @use "../mixins/transition" as *;
 2 | @use "../variables" as *;
 3 | 
 4 | .icon-link {
 5 |   display: inline-flex;
 6 |   gap: $icon-link-gap;
 7 |   align-items: center;
 8 |   text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
 9 |   text-underline-offset: $icon-link-underline-offset;
10 |   backface-visibility: hidden;
11 | 
12 |   > .bi {
13 |     flex-shrink: 0;
14 |     width: $icon-link-icon-size;
15 |     height: $icon-link-icon-size;
16 |     fill: currentcolor;
17 |     @include transition($icon-link-icon-transition);
18 |   }
19 | }
20 | 
21 | .icon-link-hover {
22 |   &:hover,
23 |   &:focus-visible {
24 |     > .bi {
25 |       transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
26 |     }
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/scss/helpers/_position.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:map";
 2 | @use "../mixins/breakpoints" as *;
 3 | @use "../variables" as *;
 4 | 
 5 | // Shorthand
 6 | 
 7 | .fixed-top {
 8 |   position: fixed;
 9 |   top: 0;
10 |   right: 0;
11 |   left: 0;
12 |   z-index: $zindex-fixed;
13 | }
14 | 
15 | .fixed-bottom {
16 |   position: fixed;
17 |   right: 0;
18 |   bottom: 0;
19 |   left: 0;
20 |   z-index: $zindex-fixed;
21 | }
22 | 
23 | // Responsive sticky top and bottom
24 | @each $breakpoint in map.keys($grid-breakpoints) {
25 |   @include media-breakpoint-up($breakpoint) {
26 |     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
27 | 
28 |     .sticky#{$infix}-top {
29 |       position: sticky;
30 |       top: 0;
31 |       z-index: $zindex-sticky;
32 |     }
33 | 
34 |     .sticky#{$infix}-bottom {
35 |       position: sticky;
36 |       bottom: 0;
37 |       z-index: $zindex-sticky;
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/scss/helpers/_ratio.scss:
--------------------------------------------------------------------------------
 1 | @use "../variables" as *;
 2 | 
 3 | // Credit: Nicolas Gallagher and SUIT CSS.
 4 | 
 5 | .ratio {
 6 |   position: relative;
 7 |   width: 100%;
 8 | 
 9 |   &::before {
10 |     display: block;
11 |     padding-top: var(--#{$prefix}aspect-ratio);
12 |     content: "";
13 |   }
14 | 
15 |   > * {
16 |     position: absolute;
17 |     inset-inline-start: 0;
18 |     top: 0;
19 |     width: 100%;
20 |     height: 100%;
21 |   }
22 | }
23 | 
24 | @each $key, $ratio in $aspect-ratios {
25 |   .ratio-#{$key} {
26 |     --#{$prefix}aspect-ratio: #{$ratio};
27 |   }
28 | }
29 | 


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


--------------------------------------------------------------------------------
/scss/helpers/_stretched-link.scss:
--------------------------------------------------------------------------------
 1 | @use "../variables" as *;
 2 | 
 3 | //
 4 | // Stretched link
 5 | //
 6 | 
 7 | .stretched-link {
 8 |   &::#{$stretched-link-pseudo-element} {
 9 |     position: absolute;
10 |     top: 0;
11 |     right: 0;
12 |     bottom: 0;
13 |     left: 0;
14 |     z-index: $stretched-link-z-index;
15 |     content: "";
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/scss/helpers/_text-truncation.scss:
--------------------------------------------------------------------------------
 1 | @use "../mixins/text-truncate" as *;
 2 | 
 3 | //
 4 | // Text truncation
 5 | //
 6 | 
 7 | .text-truncate {
 8 |   @include text-truncate();
 9 | }
10 | 


--------------------------------------------------------------------------------
/scss/helpers/_visually-hidden.scss:
--------------------------------------------------------------------------------
 1 | @use "../mixins/visually-hidden" as *;
 2 | 
 3 | //
 4 | // Visually hidden
 5 | //
 6 | 
 7 | .visually-hidden,
 8 | .visually-hidden-focusable:not(:focus):not(:focus-within) {
 9 |   @include visually-hidden();
10 | }
11 | 


--------------------------------------------------------------------------------
/scss/helpers/_vr.scss:
--------------------------------------------------------------------------------
 1 | @use "../variables" as *;
 2 | 
 3 | .vr {
 4 |   display: inline-block;
 5 |   align-self: stretch;
 6 |   width: $vr-border-width;
 7 |   min-height: 1em;
 8 |   padding: 0;
 9 |   background-color: currentcolor;
10 |   opacity: $hr-opacity;
11 | }
12 | 


--------------------------------------------------------------------------------
/scss/mixins/_alert.scss:
--------------------------------------------------------------------------------
 1 | @use "../variables" as *;
 2 | @use "../mixins/deprecate" as *;
 3 | 
 4 | @include deprecate("`alert-variant()`", "v4.3.0", "v6.0.0");
 5 | 
 6 | // scss-docs-start alert-variant-mixin
 7 | @mixin alert-variant($background, $border, $color) {
 8 |   --#{$prefix}alert-color: #{$color};
 9 |   --#{$prefix}alert-bg: #{$background};
10 |   --#{$prefix}alert-border-color: #{$border};
11 |   --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
12 | 
13 |   @if $enable-gradients {
14 |     background-image: var(--#{$prefix}gradient);
15 |   }
16 | 
17 |   .alert-link {
18 |     color: var(--#{$prefix}alert-link-color);
19 |   }
20 | }
21 | // scss-docs-end alert-variant-mixin
22 | 


--------------------------------------------------------------------------------
/scss/mixins/_avatar.scss:
--------------------------------------------------------------------------------
 1 | @use "../variables" as *;
 2 | @use "../mixins/deprecate" as *;
 3 | 
 4 | @include deprecate("`avatar()`", "v5.1.0", "v6.0.0");
 5 | 
 6 | @mixin avatar($width) {
 7 |   --#{$prefix}avatar-width: #{$width};
 8 |   --#{$prefix}avatar-height: #{$width};
 9 |   --#{$prefix}avatar-font-size: #{$width * .4};
10 |   --#{$prefix}avatar-status-width: #{divide($width, 3.75)};
11 |   --#{$prefix}avatar-status-height: #{divide($width, 3.75)};
12 | }
13 | 


--------------------------------------------------------------------------------
/scss/mixins/_backdrop.scss:
--------------------------------------------------------------------------------
 1 | @use "../variables" as *;
 2 | 
 3 | // Shared between modals and offcanvases
 4 | @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
 5 |   position: fixed;
 6 |   top: 0;
 7 |   left: 0;
 8 |   z-index: $zindex;
 9 |   width: 100vw;
10 |   height: 100vh;
11 |   background-color: $backdrop-bg;
12 | 
13 |   // Fade for backdrop
14 |   &.fade { opacity: 0; }
15 |   &.show { opacity: $backdrop-opacity; }
16 | }
17 | 


--------------------------------------------------------------------------------
/scss/mixins/_box-shadow.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:list";
 2 | @use "../variables" as *;
 3 | 
 4 | @mixin box-shadow($shadow...) {
 5 |   @if $enable-shadows {
 6 |     $result: ();
 7 | 
 8 |     @each $value in $shadow {
 9 |       @if $value != null {
10 |         $result: list.append($result, $value, "comma");
11 |       }
12 |       @if $value == none and list.length($shadow) > 1 {
13 |         @warn "The keyword 'none' must be used as a single argument.";
14 |       }
15 |     }
16 | 
17 |     @if (length($result) > 0) {
18 |       box-shadow: $result;
19 |     }
20 |   }
21 | }
22 | 


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


--------------------------------------------------------------------------------
/scss/mixins/_color-mode.scss:
--------------------------------------------------------------------------------
 1 | @use "../variables" as *;
 2 | 
 3 | // scss-docs-start color-mode-mixin
 4 | @mixin color-mode($mode: light, $root: false) {
 5 |   @if $color-mode-type == "media-query" {
 6 |     @if $root == true {
 7 |       @media (prefers-color-scheme: $mode) {
 8 |         :root {
 9 |           @content;
10 |         }
11 |       }
12 |     } @else {
13 |       @media (prefers-color-scheme: $mode) {
14 |         @content;
15 |       }
16 |     }
17 |   } @else {
18 |     [data#{$data-infix}theme="#{$mode}"] {
19 |       @content;
20 |     }
21 |   }
22 | }
23 | // scss-docs-end color-mode-mixin
24 | 


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


--------------------------------------------------------------------------------
/scss/mixins/_container.scss:
--------------------------------------------------------------------------------
 1 | @use "../variables" as *;
 2 | 
 3 | // Container mixins
 4 | 
 5 | @mixin make-container($gutter: $container-padding-x) {
 6 |   --#{$prefix}gutter-x: #{$gutter};
 7 |   --#{$prefix}gutter-y: 0;
 8 |   width: 100%;
 9 |   padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
10 |   padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
11 |   margin-right: auto;
12 |   margin-left: auto;
13 | }
14 | 


--------------------------------------------------------------------------------
/scss/mixins/_deprecate.scss:
--------------------------------------------------------------------------------
 1 | @use "../variables" as *;
 2 | 
 3 | // Deprecate mixin
 4 | //
 5 | // This mixin can be used to deprecate mixins or functions.
 6 | // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
 7 | // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
 8 | @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
 9 |   @if ($enable-deprecation-messages != false and $ignore-warning != true) {
10 |     @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/scss/mixins/_elevation.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:map";
 2 | @use "../variables" as *;
 3 | 
 4 | @mixin elevation($value, $exclude: null) {
 5 |   @if $enable-elevations {
 6 |     box-shadow: map.get($elevations, $value);
 7 | 
 8 |     @if $enable-dark-mode {
 9 |       [data#{$data-infix}theme]:not([data#{$data-infix}theme="dark"]) & {
10 |         &:not([class*="border"]) {
11 |           border: 0;
12 |         }
13 |       }
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/scss/mixins/_icon.scss:
--------------------------------------------------------------------------------
1 | // Icon sizes
2 | @mixin icon-size($icon-size) {
3 |   width: $icon-size;
4 |   height: $icon-size;
5 |   font-size: $icon-size;
6 | }
7 | 


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


--------------------------------------------------------------------------------
/scss/mixins/_list-group.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:map";
 2 | @use "../mixins/deprecate" as *;
 3 | 
 4 | @include deprecate("`list-group-item-variant()`", "v4.3.0", "v6.0.0");
 5 | 
 6 | // List Groups
 7 | 
 8 | // scss-docs-start list-group-mixin
 9 | @mixin list-group-item-variant($state, $variant) {
10 |   $background: map.get($variant, "bg");
11 |   $background-hover: map.get($variant, "bg-hover");
12 |   $color: contrast-ratio-correction(map.get($variant, "color"), map.get($variant, "bg"), $alert-color-scale, $state);
13 | 
14 |   --#{$prefix}list-group-color: #{$color};
15 |   --#{$prefix}list-group-bg: #{$background};
16 |   --#{$prefix}list-group-hover-bg: #{$background-hover};
17 |   --#{$prefix}list-group-action-hover-color: #{$color};
18 |   --#{$prefix}list-group-action-active-color: #{$white};
19 |   --#{$prefix}list-group-action-active-bg: #{$color};
20 |   --#{$prefix}list-group-action-active-border-color: #{$color};
21 | }
22 | // scss-docs-end list-group-mixin
23 | 


--------------------------------------------------------------------------------
/scss/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-inline-start: 0;
6 |   list-style: none;
7 | }
8 | 


--------------------------------------------------------------------------------
/scss/mixins/_pagination.scss:
--------------------------------------------------------------------------------
 1 | @use "../vendor/rfs" as *;
 2 | @use "../variables" as *;
 3 | 
 4 | // Pagination
 5 | 
 6 | // scss-docs-start pagination-mixin
 7 | @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
 8 |   --#{$prefix}pagination-padding-x: #{$padding-x};
 9 |   --#{$prefix}pagination-padding-y: #{$padding-y};
10 |   @include rfs($font-size, --#{$prefix}pagination-font-size);
11 |   --#{$prefix}pagination-border-radius: #{$border-radius};
12 | }
13 | // scss-docs-end pagination-mixin
14 | 


--------------------------------------------------------------------------------
/scss/mixins/_reset-text.scss:
--------------------------------------------------------------------------------
 1 | @use "../variables" as *;
 2 | 
 3 | @mixin reset-text {
 4 |   font-family: $font-family-base;
 5 |   // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
 6 |   font-style: normal;
 7 |   font-weight: $font-weight-normal;
 8 |   line-height: $line-height-base;
 9 |   text-align: start;
10 |   text-decoration: none;
11 |   text-shadow: none;
12 |   text-transform: none;
13 |   letter-spacing: normal;
14 |   word-break: normal;
15 |   white-space: normal;
16 |   word-spacing: normal;
17 |   line-break: auto;
18 | }
19 | 


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


--------------------------------------------------------------------------------
/scss/mixins/_table-variants.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:color";
 2 | @use "sass:math";
 3 | @use "../functions/color-contrast" as *;
 4 | @use "../functions/contrast-ratio" as *;
 5 | @use "../variables" as *;
 6 | 
 7 | // scss-docs-start table-variant
 8 | @mixin table-variant($state, $background) {
 9 |   .table-#{$state} {
10 |     $color: color-contrast(opaque($body-bg, $background));
11 |     $hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
12 |     $striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
13 |     $active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
14 |     $table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
15 | 
16 |     --#{$prefix}table-color: #{$color};
17 |     --#{$prefix}table-bg: #{$background};
18 |     --#{$prefix}table-border-color: #{$table-border-color};
19 |     --#{$prefix}table-striped-bg: #{$striped-bg};
20 |     --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
21 |     --#{$prefix}table-active-bg: #{$active-bg};
22 |     --#{$prefix}table-active-color: #{color-contrast($active-bg)};
23 |     --#{$prefix}table-hover-bg: #{$hover-bg};
24 |     --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
25 | 
26 |     color: var(--#{$prefix}table-color);
27 |     border-color: var(--#{$prefix}table-border-color);
28 |   }
29 | }
30 | // scss-docs-end table-variant
31 | 


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


--------------------------------------------------------------------------------
/scss/mixins/_transition.scss:
--------------------------------------------------------------------------------
 1 | // stylelint-disable property-disallowed-list
 2 | @use "sass:list";
 3 | @use "../variables" as *;
 4 | 
 5 | @mixin transition($transition...) {
 6 |   @if list.length($transition) == 0 {
 7 |     $transition: $transition-base;
 8 |   }
 9 | 
10 |   @if list.length($transition) > 1 {
11 |     @each $value in $transition {
12 |       @if $value == null or $value == none {
13 |         @warn "The keyword 'none' or 'null' must be used as a single argument.";
14 |       }
15 |     }
16 |   }
17 | 
18 |   @if $enable-transitions {
19 |     @if list.nth($transition, 1) != null {
20 |       transition: $transition;
21 |     }
22 | 
23 |     @if $enable-reduced-motion and list.nth($transition, 1) != null and list.nth($transition, 1) != none {
24 |       @media (prefers-reduced-motion: reduce) {
25 |         transition: none;
26 |       }
27 |     }
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/scss/mixins/_utilities.import.scss:
--------------------------------------------------------------------------------
1 | @forward "utilities";
2 | 


--------------------------------------------------------------------------------
/scss/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 |   // Fix to prevent overflowing children to become focusable
24 |   * {
25 |     overflow: hidden !important;
26 |   }
27 | }
28 | 
29 | // Use to only display content when it's focused, or one of its child elements is focused
30 | // (i.e. when focus is within the element/container that the class was applied to)
31 | //
32 | // Useful for "Skip to main content" links; see https://www.w3.org/WAI/WCAG22/Techniques/general/G1.html
33 | 
34 | @mixin visually-hidden-focusable() {
35 |   &:not(:focus):not(:focus-within) {
36 |     @include visually-hidden();
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/scss/tests/jasmine.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable camelcase */
 2 | 
 3 | 'use strict'
 4 | 
 5 | const path = require('node:path')
 6 | 
 7 | module.exports = {
 8 |   spec_dir: 'scss',
 9 |   // Make Jasmine look for `.test.scss` files
10 |   spec_files: ['**/*.{test,spec}.scss'],
11 |   // Compile them into JS scripts running `sass-true`
12 |   requires: [path.join(__dirname, 'sass-true/register')],
13 |   // Ensure we use `require` so that the require.extensions works
14 |   // as `import` completely bypasses it
15 |   jsLoader: 'require'
16 | }
17 | 


--------------------------------------------------------------------------------
/scss/tests/mixins/_media-query-color-mode-full.test.scss:
--------------------------------------------------------------------------------
1 | @use "../../coreui" as * with (
2 |   $color-mode-type: media-query
3 | );
4 | 
5 | @include describe("global $color-mode-type: media-query") {
6 |   @include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/scss/tests/sass-true/register.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | const path = require('node:path')
 4 | 
 5 | const runnerPath = path.join(__dirname, 'runner').replace(/\\/g, '/')
 6 | 
 7 | require.extensions['.scss'] = (module, filename) => {
 8 |   const normalizedFilename = filename.replace(/\\/g, '/')
 9 | 
10 |   return module._compile(`
11 |     const runner = require('${runnerPath}')
12 |     runner('${normalizedFilename}', { describe, it })
13 |     `, filename)
14 | }
15 | 


--------------------------------------------------------------------------------
/scss/tests/sass-true/runner.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | const fs = require('node:fs')
 4 | const path = require('node:path')
 5 | const { runSass } = require('sass-true')
 6 | 
 7 | module.exports = (filename, { describe, it }) => {
 8 |   const data = fs.readFileSync(filename, 'utf8')
 9 |   const TRUE_SETUP = '$true-terminal-output: false; @use "true" as *;'
10 |   const sassString = TRUE_SETUP + data
11 | 
12 |   runSass(
13 |     { describe, it, sourceType: 'string' },
14 |     sassString,
15 |     { loadPaths: [path.dirname(filename)] }
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/scss/tests/utilities/_api.test.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:map";
 2 | 
 3 | @use "../../variables" with (
 4 |   $grid-breakpoints: (
 5 |     xs: 0,
 6 |     sm: 333px,
 7 |     md: 666px
 8 |   )
 9 | );
10 | 
11 | @use "../../utilities" as *;
12 | 
13 | $utilities: (
14 |   margin: (
15 |     property: margin,
16 |     values: auto
17 |   ),
18 |   padding: (
19 |     property: padding,
20 |     responsive: true,
21 |     values: 1rem
22 |   ),
23 |   font-size: (
24 |     property: font-size,
25 |     values: (large: 1.25rem),
26 |     print: true
27 |   )
28 | );
29 | 
30 | @include describe("utilities/api") {
31 |   @include it("generates utilities for each breakpoints") {
32 |     @include assert() {
33 |       @include output() {
34 |         @import "../../utilities/api";
35 |       }
36 | 
37 |       @include expect() {
38 |         // margin is not set to responsive
39 |         .margin-auto {
40 |           margin: auto !important;
41 |         }
42 | 
43 |         // padding is, though
44 |         .padding-1rem {
45 |           padding: 1rem !important;
46 |         }
47 | 
48 |         .font-size-large {
49 |           font-size: 1.25rem !important;
50 |         }
51 | 
52 |         @media (min-width: 333px) {
53 |           .padding-sm-1rem {
54 |             padding: 1rem !important;
55 |           }
56 |         }
57 | 
58 |         @media (min-width: 666px) {
59 |           .padding-md-1rem {
60 |             padding: 1rem !important;
61 |           }
62 |         }
63 | 
64 |         @media print {
65 |           .font-size-print-large {
66 |             font-size: 1.25rem !important;
67 |           }
68 |         }
69 |       }
70 | 
71 |     }
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/scss/themes/bootstrap/bootstrap.rtl.scss:
--------------------------------------------------------------------------------
1 | @use "bootstrap" with (
2 |   $enable-ltr: false,
3 |   $enable-rtl: true
4 | );
5 | 


--------------------------------------------------------------------------------
/scss/utilities/_api.import.scss:
--------------------------------------------------------------------------------
1 | @forward "api";
2 | 


--------------------------------------------------------------------------------
/scss/utilities/_bg-gradients.import.scss:
--------------------------------------------------------------------------------
1 | @forward "bg-gradients";
2 | 


--------------------------------------------------------------------------------
/scss/utilities/_bg-gradients.scss:
--------------------------------------------------------------------------------
1 | @use "../variables" as *;
2 | 
3 | @each $color, $value in $theme-gradients {
4 |   .bg-#{$color}-gradient {
5 |     background-color: var(--#{$prefix}#{$color});
6 |     background-image: linear-gradient(45deg, var(--#{$prefix}#{$color}-start) 0%, var(--#{$prefix}#{$color}-stop) 100%);
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------