`s.
+
+.nav {
+ display: flex;
+ flex-wrap: wrap;
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
+}
+
+.nav-link {
+ display: block;
+ padding: $nav-link-padding-y $nav-link-padding-x;
+ @include font-size($nav-link-font-size);
+ font-weight: $nav-link-font-weight;
+ color: $nav-link-color;
+ text-decoration: if($link-decoration == none, null, none);
+ @include transition($nav-link-transition);
+
+ &:hover,
+ &:focus {
+ color: $nav-link-hover-color;
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ }
+
+ // Disabled state lightens text
+ &.disabled {
+ color: $nav-link-disabled-color;
+ pointer-events: none;
+ cursor: default;
+ }
+}
+
+//
+// Tabs
+//
+
+.nav-tabs {
+ border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+
+ .nav-link {
+ margin-bottom: -$nav-tabs-border-width;
+ background: none;
+ border: $nav-tabs-border-width solid transparent;
+ @include border-top-radius($nav-tabs-border-radius);
+
+ &:hover,
+ &:focus {
+ border-color: $nav-tabs-link-hover-border-color;
+ // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+ isolation: isolate;
+ }
+
+ &.disabled {
+ color: $nav-link-disabled-color;
+ background-color: transparent;
+ border-color: transparent;
+ }
+ }
+
+ .nav-link.active,
+ .nav-item.show .nav-link {
+ color: $nav-tabs-link-active-color;
+ background-color: $nav-tabs-link-active-bg;
+ border-color: $nav-tabs-link-active-border-color;
+ }
+
+ .dropdown-menu {
+ // Make dropdown border overlap tab border
+ margin-top: -$nav-tabs-border-width;
+ // Remove the top rounded corners here since there is a hard edge above the menu
+ @include border-top-radius(0);
+ }
+}
+
+//
+// Pills
+//
+
+.nav-pills {
+ .nav-link {
+ background: none;
+ border: 0;
+ @include border-radius($nav-pills-border-radius);
+ }
+
+ .nav-link.active,
+ .show > .nav-link {
+ color: $nav-pills-link-active-color;
+ @include gradient-bg($nav-pills-link-active-bg);
+ }
+}
+
+//
+// Justified variants
+//
+
+.nav-fill {
+ > .nav-link,
+ .nav-item {
+ flex: 1 1 auto;
+ text-align: center;
+ }
+}
+
+.nav-justified {
+ > .nav-link,
+ .nav-item {
+ flex-basis: 0;
+ flex-grow: 1;
+ text-align: center;
+ }
+}
+
+// Tabbable tabs
+//
+// Hide tabbable panes to start, show them when `.active`
+
+.tab-content {
+ > .tab-pane {
+ display: none;
+ }
+ > .active {
+ display: block;
+ }
+}
diff --git a/src/scss/bootstrap/_navbar.scss b/src/scss/bootstrap/_navbar.scss
new file mode 100644
index 0000000..b8fdf9a
--- /dev/null
+++ b/src/scss/bootstrap/_navbar.scss
@@ -0,0 +1,298 @@
+// Contents
+//
+// Navbar
+// Navbar brand
+// Navbar nav
+// Navbar text
+// Responsive navbar
+// Navbar position
+// Navbar themes
+
+// Navbar
+//
+// Provide a static navbar from which we expand to create full-width, fixed, and
+// other navbar variations.
+
+.navbar {
+ position: relative;
+ display: flex;
+ flex-wrap: wrap; // allow us to do the line break for collapsing content
+ align-items: center;
+ justify-content: space-between; // space out brand from logo
+ padding-top: $navbar-padding-y;
+ padding-right: $navbar-padding-x; // default: null
+ padding-bottom: $navbar-padding-y;
+ padding-left: $navbar-padding-x; // default: null
+ @include gradient-bg();
+
+ // Because flex properties aren't inherited, we need to redeclare these first
+ // few properties so that content nested within behave properly.
+ // The `flex-wrap` property is inherited to simplify the expanded navbars
+ %container-flex-properties {
+ display: flex;
+ flex-wrap: inherit;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ > .container,
+ > .container-fluid {
+ @extend %container-flex-properties;
+ }
+
+ @each $breakpoint, $container-max-width in $container-max-widths {
+ > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+ @extend %container-flex-properties;
+ }
+ }
+}
+
+// Navbar brand
+//
+// Used for brand, project, or site names.
+
+.navbar-brand {
+ padding-top: $navbar-brand-padding-y;
+ padding-bottom: $navbar-brand-padding-y;
+ margin-right: $navbar-brand-margin-end;
+ @include font-size($navbar-brand-font-size);
+ text-decoration: if($link-decoration == none, null, none);
+ white-space: nowrap;
+
+ &:hover,
+ &:focus {
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ }
+}
+
+// Navbar nav
+//
+// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
+
+.navbar-nav {
+ display: flex;
+ flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
+
+ .nav-link {
+ padding-right: 0;
+ padding-left: 0;
+ }
+
+ .dropdown-menu {
+ position: static;
+ }
+}
+
+// Navbar text
+//
+//
+
+.navbar-text {
+ padding-top: $nav-link-padding-y;
+ padding-bottom: $nav-link-padding-y;
+}
+
+// Responsive navbar
+//
+// Custom styles for responsive collapsing and toggling of navbar contents.
+// Powered by the collapse Bootstrap JavaScript plugin.
+
+// When collapsed, prevent the toggleable navbar contents from appearing in
+// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
+// on the `.navbar` parent.
+.navbar-collapse {
+ flex-basis: 100%;
+ flex-grow: 1;
+ // For always expanded or extra full navbars, ensure content aligns itself
+ // properly vertically. Can be easily overridden with flex utilities.
+ align-items: center;
+}
+
+// Button for toggling the navbar when in its collapsed state
+.navbar-toggler {
+ padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
+ @include font-size($navbar-toggler-font-size);
+ line-height: 1;
+ background-color: transparent; // remove default button style
+ border: $border-width solid transparent; // remove default button style
+ @include border-radius($navbar-toggler-border-radius);
+ @include transition($navbar-toggler-transition);
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ &:focus {
+ text-decoration: none;
+ outline: 0;
+ box-shadow: 0 0 0 $navbar-toggler-focus-width;
+ }
+}
+
+// Keep as a separate element so folks can easily override it with another icon
+// or image file as needed.
+.navbar-toggler-icon {
+ display: inline-block;
+ width: 1.5em;
+ height: 1.5em;
+ vertical-align: middle;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100%;
+}
+
+.navbar-nav-scroll {
+ max-height: var(--#{$variable-prefix}scroll-height, 75vh);
+ overflow-y: auto;
+}
+
+// Generate series of `.navbar-expand-*` responsive classes for configuring
+// where your navbar collapses.
+.navbar-expand {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
+
+ // stylelint-disable-next-line scss/selector-no-union-class-name
+ {$infix} {
+ @include media-breakpoint-up($next) {
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+
+ .navbar-nav {
+ flex-direction: row;
+
+ .dropdown-menu {
+ position: absolute;
+ }
+
+ .nav-link {
+ padding-right: $navbar-nav-link-padding-x;
+ padding-left: $navbar-nav-link-padding-x;
+ }
+ }
+
+ .navbar-nav-scroll {
+ overflow: visible;
+ }
+
+ .navbar-collapse {
+ display: flex !important; // stylelint-disable-line declaration-no-important
+ flex-basis: auto;
+ }
+
+ .navbar-toggler {
+ display: none;
+ }
+ }
+ }
+ }
+}
+
+// Navbar themes
+//
+// Styles for switching between navbars with light or dark background.
+
+// Dark links against a light background
+.navbar-light {
+ .navbar-brand {
+ color: $navbar-light-brand-color;
+
+ &:hover,
+ &:focus {
+ color: $navbar-light-brand-hover-color;
+ }
+ }
+
+ .navbar-nav {
+ .nav-link {
+ color: $navbar-light-color;
+
+ &:hover,
+ &:focus {
+ color: $navbar-light-hover-color;
+ }
+
+ &.disabled {
+ color: $navbar-light-disabled-color;
+ }
+ }
+
+ .show > .nav-link,
+ .nav-link.active {
+ color: $navbar-light-active-color;
+ }
+ }
+
+ .navbar-toggler {
+ color: $navbar-light-color;
+ border-color: $navbar-light-toggler-border-color;
+ }
+
+ .navbar-toggler-icon {
+ background-image: escape-svg($navbar-light-toggler-icon-bg);
+ }
+
+ .navbar-text {
+ color: $navbar-light-color;
+
+ a,
+ a:hover,
+ a:focus {
+ color: $navbar-light-active-color;
+ }
+ }
+}
+
+// White links against a dark background
+.navbar-dark {
+ .navbar-brand {
+ color: $navbar-dark-brand-color;
+
+ &:hover,
+ &:focus {
+ color: $navbar-dark-brand-hover-color;
+ }
+ }
+
+ .navbar-nav {
+ .nav-link {
+ color: $navbar-dark-color;
+
+ &:hover,
+ &:focus {
+ color: $navbar-dark-hover-color;
+ }
+
+ &.disabled {
+ color: $navbar-dark-disabled-color;
+ }
+ }
+
+ .show > .nav-link,
+ .nav-link.active {
+ color: $navbar-dark-active-color;
+ }
+ }
+
+ .navbar-toggler {
+ color: $navbar-dark-color;
+ border-color: $navbar-dark-toggler-border-color;
+ }
+
+ .navbar-toggler-icon {
+ background-image: escape-svg($navbar-dark-toggler-icon-bg);
+ }
+
+ .navbar-text {
+ color: $navbar-dark-color;
+ a,
+ a:hover,
+ a:focus {
+ color: $navbar-dark-active-color;
+ }
+ }
+}
diff --git a/src/scss/bootstrap/_pagination.scss b/src/scss/bootstrap/_pagination.scss
new file mode 100644
index 0000000..02a66d4
--- /dev/null
+++ b/src/scss/bootstrap/_pagination.scss
@@ -0,0 +1,78 @@
+.pagination {
+ display: flex;
+ @include list-unstyled();
+}
+
+.page-link {
+ position: relative;
+ display: block;
+ color: $pagination-color;
+ text-decoration: if($link-decoration == none, null, none);
+ background-color: $pagination-bg;
+ border: $pagination-border-width solid $pagination-border-color;
+ @include transition($pagination-transition);
+
+ &:hover {
+ z-index: 2;
+ color: $pagination-hover-color;
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ background-color: $pagination-hover-bg;
+ border-color: $pagination-hover-border-color;
+ }
+
+ &:focus {
+ z-index: 3;
+ color: $pagination-focus-color;
+ background-color: $pagination-focus-bg;
+ outline: $pagination-focus-outline;
+ box-shadow: $pagination-focus-box-shadow;
+ }
+}
+
+.page-item {
+ &:not(:first-child) .page-link {
+ margin-left: $pagination-margin-start;
+ }
+
+ &.active .page-link {
+ z-index: 3;
+ color: $pagination-active-color;
+ @include gradient-bg($pagination-active-bg);
+ border-color: $pagination-active-border-color;
+ }
+
+ &.disabled .page-link {
+ color: $pagination-disabled-color;
+ pointer-events: none;
+ background-color: $pagination-disabled-bg;
+ border-color: $pagination-disabled-border-color;
+ }
+}
+
+//
+// Sizing
+//
+@include pagination-size(
+ $pagination-padding-y,
+ $pagination-padding-x,
+ null,
+ $pagination-border-radius
+);
+
+.pagination-lg {
+ @include pagination-size(
+ $pagination-padding-y-lg,
+ $pagination-padding-x-lg,
+ $font-size-lg,
+ $pagination-border-radius-lg
+ );
+}
+
+.pagination-sm {
+ @include pagination-size(
+ $pagination-padding-y-sm,
+ $pagination-padding-x-sm,
+ $font-size-sm,
+ $pagination-border-radius-sm
+ );
+}
diff --git a/src/scss/bootstrap/_popover.scss b/src/scss/bootstrap/_popover.scss
new file mode 100644
index 0000000..6d4bbc3
--- /dev/null
+++ b/src/scss/bootstrap/_popover.scss
@@ -0,0 +1,158 @@
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0 #{'/* rtl:ignore */'};
+ z-index: $zindex-popover;
+ display: block;
+ max-width: $popover-max-width;
+ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+ // So reset our font and text properties to avoid inheriting weird values.
+ @include reset-text();
+ @include font-size($popover-font-size);
+ // Allow breaking very long words so they don't overflow the popover's bounds
+ word-wrap: break-word;
+ background-color: $popover-bg;
+ background-clip: padding-box;
+ border: $popover-border-width solid $popover-border-color;
+ @include border-radius($popover-border-radius);
+ @include box-shadow($popover-box-shadow);
+
+ .popover-arrow {
+ position: absolute;
+ display: block;
+ width: $popover-arrow-width;
+ height: $popover-arrow-height;
+
+ &::before,
+ &::after {
+ position: absolute;
+ display: block;
+ content: '';
+ border-color: transparent;
+ border-style: solid;
+ }
+ }
+}
+
+.bs-popover-top {
+ > .popover-arrow {
+ bottom: subtract(-$popover-arrow-height, $popover-border-width);
+
+ &::before {
+ bottom: 0;
+ border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-top-color: $popover-arrow-outer-color;
+ }
+
+ &::after {
+ bottom: $popover-border-width;
+ border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-top-color: $popover-arrow-color;
+ }
+ }
+}
+
+.bs-popover-end {
+ > .popover-arrow {
+ left: subtract(-$popover-arrow-height, $popover-border-width);
+ width: $popover-arrow-height;
+ height: $popover-arrow-width;
+
+ &::before {
+ left: 0;
+ border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-right-color: $popover-arrow-outer-color;
+ }
+
+ &::after {
+ left: $popover-border-width;
+ border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-right-color: $popover-arrow-color;
+ }
+ }
+}
+
+.bs-popover-bottom {
+ > .popover-arrow {
+ top: subtract(-$popover-arrow-height, $popover-border-width);
+
+ &::before {
+ top: 0;
+ border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+ border-bottom-color: $popover-arrow-outer-color;
+ }
+
+ &::after {
+ top: $popover-border-width;
+ border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+ border-bottom-color: $popover-arrow-color;
+ }
+ }
+
+ // This will remove the popover-header's border just below the arrow
+ .popover-header::before {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ display: block;
+ width: $popover-arrow-width;
+ margin-left: -$popover-arrow-width / 2;
+ content: '';
+ border-bottom: $popover-border-width solid $popover-header-bg;
+ }
+}
+
+.bs-popover-start {
+ > .popover-arrow {
+ right: subtract(-$popover-arrow-height, $popover-border-width);
+ width: $popover-arrow-height;
+ height: $popover-arrow-width;
+
+ &::before {
+ right: 0;
+ border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+ border-left-color: $popover-arrow-outer-color;
+ }
+
+ &::after {
+ right: $popover-border-width;
+ border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+ border-left-color: $popover-arrow-color;
+ }
+ }
+}
+
+.bs-popover-auto {
+ &[data-popper-placement^='top'] {
+ @extend .bs-popover-top;
+ }
+ &[data-popper-placement^='right'] {
+ @extend .bs-popover-end;
+ }
+ &[data-popper-placement^='bottom'] {
+ @extend .bs-popover-bottom;
+ }
+ &[data-popper-placement^='left'] {
+ @extend .bs-popover-start;
+ }
+}
+
+// Offset the popover to account for the popover arrow
+.popover-header {
+ padding: $popover-header-padding-y $popover-header-padding-x;
+ margin-bottom: 0; // Reset the default from Reboot
+ @include font-size($font-size-base);
+ color: $popover-header-color;
+ background-color: $popover-header-bg;
+ border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
+ @include border-top-radius($popover-inner-border-radius);
+
+ &:empty {
+ display: none;
+ }
+}
+
+.popover-body {
+ padding: $popover-body-padding-y $popover-body-padding-x;
+ color: $popover-body-color;
+}
diff --git a/src/scss/bootstrap/_progress.scss b/src/scss/bootstrap/_progress.scss
new file mode 100644
index 0000000..ffc9ba8
--- /dev/null
+++ b/src/scss/bootstrap/_progress.scss
@@ -0,0 +1,47 @@
+// Disable animation if transitions are disabled
+@if $enable-transitions {
+ @keyframes progress-bar-stripes {
+ 0% {
+ background-position-x: $progress-height;
+ }
+ }
+}
+
+.progress {
+ display: flex;
+ height: $progress-height;
+ overflow: hidden; // force rounded corners by cropping it
+ @include font-size($progress-font-size);
+ background-color: $progress-bg;
+ @include border-radius($progress-border-radius);
+ @include box-shadow($progress-box-shadow);
+}
+
+.progress-bar {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ overflow: hidden;
+ color: $progress-bar-color;
+ text-align: center;
+ white-space: nowrap;
+ background-color: $progress-bar-bg;
+ @include transition($progress-bar-transition);
+}
+
+.progress-bar-striped {
+ @include gradient-striped();
+ background-size: $progress-height $progress-height;
+}
+
+@if $enable-transitions {
+ .progress-bar-animated {
+ animation: $progress-bar-animation-timing progress-bar-stripes;
+
+ @if $enable-reduced-motion {
+ @media (prefers-reduced-motion: reduce) {
+ animation: none;
+ }
+ }
+ }
+}
diff --git a/src/scss/bootstrap/_reboot.scss b/src/scss/bootstrap/_reboot.scss
new file mode 100644
index 0000000..6258e02
--- /dev/null
+++ b/src/scss/bootstrap/_reboot.scss
@@ -0,0 +1,615 @@
+// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+
+// Reboot
+//
+// Normalization of HTML elements, manually forked from Normalize.css to remove
+// styles targeting irrelevant browsers while applying new styles.
+//
+// Normalize is licensed MIT. https://github.com/necolas/normalize.css
+
+// Document
+//
+// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+// Root
+//
+// Ability to the value of the root font sizes, affecting the value of `rem`.
+// null by default, thus nothing is generated.
+
+:root {
+ font-size: $font-size-root;
+
+ @if $enable-smooth-scroll {
+ @media (prefers-reduced-motion: no-preference) {
+ scroll-behavior: smooth;
+ }
+ }
+}
+
+// Body
+//
+// 1. Remove the margin in all browsers.
+// 2. As a best practice, apply a default `background-color`.
+// 3. Prevent adjustments of font size after orientation changes in iOS.
+// 4. Change the default tap highlight to be completely transparent in iOS.
+
+body {
+ margin: 0; // 1
+ font-family: $font-family-base;
+ @include font-size($font-size-base);
+ font-weight: $font-weight-base;
+ line-height: $line-height-base;
+ color: $body-color;
+ text-align: $body-text-align;
+ background-color: $body-bg; // 2
+ -webkit-text-size-adjust: 100%; // 3
+ -webkit-tap-highlight-color: rgba($black, 0); // 4
+}
+
+// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
+// on elements that programmatically receive focus but wouldn't normally show a visible
+// focus outline. In general, this would mean that the outline is only applied if the
+// interaction that led to the element receiving programmatic focus was a keyboard interaction,
+// or the browser has somehow determined that the user is primarily a keyboard user and/or
+// wants focus outlines to always be presented.
+// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
+// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+
+[tabindex='-1']:focus:not(:focus-visible) {
+ outline: 0 !important;
+}
+
+// Content grouping
+//
+// 1. Reset Firefox's gray color
+// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
+
+hr {
+ margin: $hr-margin-y 0;
+ color: $hr-color; // 1
+ background-color: currentColor;
+ border: 0;
+ opacity: $hr-opacity;
+}
+
+hr:not([size]) {
+ height: $hr-height; // 2
+}
+
+// Typography
+//
+// 1. Remove top margins from headings
+// By default, ``-`` all receive top and bottom margins. We nuke the top
+// margin for easier control within type scales as it avoids margin collapsing.
+
+%heading {
+ margin-top: 0; // 1
+ margin-bottom: $headings-margin-bottom;
+ font-family: $headings-font-family;
+ font-style: $headings-font-style;
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+ color: $headings-color;
+}
+
+h1 {
+ @extend %heading;
+ @include font-size($h1-font-size);
+}
+
+h2 {
+ @extend %heading;
+ @include font-size($h2-font-size);
+}
+
+h3 {
+ @extend %heading;
+ @include font-size($h3-font-size);
+}
+
+h4 {
+ @extend %heading;
+ @include font-size($h4-font-size);
+}
+
+h5 {
+ @extend %heading;
+ @include font-size($h5-font-size);
+}
+
+h6 {
+ @extend %heading;
+ @include font-size($h6-font-size);
+}
+
+// Reset margins on paragraphs
+//
+// Similarly, the top margin on ` `s get reset. However, we also reset the
+// bottom margin to use `rem` units instead of `em`.
+
+p {
+ margin-top: 0;
+ margin-bottom: $paragraph-margin-bottom;
+}
+
+// Abbreviations
+//
+// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
+// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
+// 3. Add explicit cursor to indicate changed behavior.
+// 4. Prevent the text-decoration to be skipped.
+
+abbr[title],
+abbr[data-bs-original-title] {
+ // 1
+ text-decoration: underline; // 2
+ text-decoration: underline dotted; // 2
+ cursor: help; // 3
+ text-decoration-skip-ink: none; // 4
+}
+
+// Address
+
+address {
+ margin-bottom: 1rem;
+ font-style: normal;
+ line-height: inherit;
+}
+
+// Lists
+
+ol,
+ul {
+ padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+ margin-bottom: 0;
+}
+
+dt {
+ font-weight: $dt-font-weight;
+}
+
+// 1. Undo browser default
+
+dd {
+ margin-bottom: 0.5rem;
+ margin-left: 0; // 1
+}
+
+// Blockquote
+
+blockquote {
+ margin: 0 0 1rem;
+}
+
+// Strong
+//
+// Add the correct font weight in Chrome, Edge, and Safari
+
+b,
+strong {
+ font-weight: $font-weight-bolder;
+}
+
+// Small
+//
+// Add the correct font size in all browsers
+
+small {
+ @include font-size($small-font-size);
+}
+
+// Mark
+
+mark {
+ padding: $mark-padding;
+ background-color: $mark-bg;
+}
+
+// Sub and Sup
+//
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+
+sub,
+sup {
+ position: relative;
+ @include font-size($sub-sup-font-size);
+ line-height: 0;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+sup {
+ top: -0.5em;
+}
+
+// Links
+
+a {
+ color: $link-color;
+ text-decoration: $link-decoration;
+
+ &:hover {
+ color: $link-hover-color;
+ text-decoration: $link-hover-decoration;
+ }
+}
+
+// And undo these styles for placeholder links/named anchors (without href).
+// It would be more straightforward to just use a[href] in previous block, but that
+// causes specificity issues in many other styles that are too complex to fix.
+// See https://github.com/twbs/bootstrap/issues/19402
+
+a:not([href]):not([class]) {
+ &,
+ &:hover {
+ color: inherit;
+ text-decoration: none;
+ }
+}
+
+// Code
+
+pre,
+code,
+kbd,
+samp {
+ font-family: $font-family-code;
+ @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+ direction: ltr #{'/* rtl:ignore */'};
+ unicode-bidi: bidi-override;
+}
+
+// 1. Remove browser default top margin
+// 2. Reset browser default of `1em` to use `rem`s
+// 3. Don't allow content to break outside
+
+pre {
+ display: block;
+ margin-top: 0; // 1
+ margin-bottom: 1rem; // 2
+ overflow: auto; // 3
+ @include font-size($code-font-size);
+ color: $pre-color;
+
+ // Account for some code outputs that place code tags in pre tags
+ code {
+ @include font-size(inherit);
+ color: inherit;
+ word-break: normal;
+ }
+}
+
+code {
+ @include font-size($code-font-size);
+ color: $code-color;
+ word-wrap: break-word;
+
+ // Streamline the style when inside anchors to avoid broken underline and more
+ a > & {
+ color: inherit;
+ }
+}
+
+kbd {
+ padding: $kbd-padding-y $kbd-padding-x;
+ @include font-size($kbd-font-size);
+ color: $kbd-color;
+ background-color: $kbd-bg;
+ @include border-radius($border-radius-sm);
+
+ kbd {
+ padding: 0;
+ @include font-size(1em);
+ font-weight: $nested-kbd-font-weight;
+ }
+}
+
+// Figures
+//
+// Apply a consistent margin strategy (matches our type styles).
+
+figure {
+ margin: 0 0 1rem;
+}
+
+// Images and content
+
+img,
+svg {
+ vertical-align: middle;
+}
+
+// Tables
+//
+// Prevent double borders
+
+table {
+ caption-side: bottom;
+ border-collapse: collapse;
+}
+
+caption {
+ padding-top: $table-cell-padding-y;
+ padding-bottom: $table-cell-padding-y;
+ color: $table-caption-color;
+ text-align: left;
+}
+
+// 1. Removes font-weight bold by inheriting
+// 2. Matches default `
` alignment by inheriting `text-align`.
+// 3. Fix alignment for Safari
+
+th {
+ font-weight: $table-th-font-weight; // 1
+ text-align: inherit; // 2
+ text-align: -webkit-match-parent; // 3
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+ border-color: inherit;
+ border-style: solid;
+ border-width: 0;
+}
+
+// Forms
+//
+// 1. Allow labels to use `margin` for spacing.
+
+label {
+ display: inline-block; // 1
+}
+
+// Remove the default `border-radius` that macOS Chrome adds.
+// See https://github.com/twbs/bootstrap/issues/24093
+
+button {
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: 0;
+}
+
+// Explicitly remove focus outline in Chromium when it shouldn't be
+// visible (e.g. as result of mouse click or touch tap). It already
+// should be doing this automatically, but seems to currently be
+// confused and applies its very visible two-tone outline anyway.
+
+button:focus:not(:focus-visible) {
+ outline: 0;
+}
+
+// 1. Remove the margin in Firefox and Safari
+
+input,
+button,
+select,
+optgroup,
+textarea {
+ margin: 0; // 1
+ font-family: inherit;
+ @include font-size(inherit);
+ line-height: inherit;
+}
+
+// Remove the inheritance of text transform in Firefox
+
+button,
+select {
+ text-transform: none;
+}
+
+// Set the cursor for non-`` buttons
+//
+// Details at https://github.com/twbs/bootstrap/pull/30562
+[role='button'] {
+ cursor: pointer;
+}
+
+// Remove the inheritance of word-wrap in Safari.
+// See https://github.com/twbs/bootstrap/issues/24990
+
+select {
+ word-wrap: normal;
+}
+
+// Remove the dropdown arrow in Chrome from inputs built with datalists.
+// See https://stackoverflow.com/a/54997118
+
+[list]::-webkit-calendar-picker-indicator {
+ display: none;
+}
+
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+// controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
+// 3. Opinionated: add "hand" cursor to non-disabled button elements.
+
+button,
+[type="button"], // 1
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button; // 2
+
+ @if $enable-button-pointers {
+ &:not(:disabled) {
+ cursor: pointer; // 3
+ }
+ }
+}
+
+// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+
+::-moz-focus-inner {
+ padding: 0;
+ border-style: none;
+}
+
+// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
+
+textarea {
+ resize: vertical; // 1
+}
+
+// 1. Browsers set a default `min-width: min-content;` on fieldsets,
+// unlike e.g. ``s, which have `min-width: 0;` by default.
+// So we reset that to ensure fieldsets behave more like a standard block element.
+// See https://github.com/twbs/bootstrap/issues/12359
+// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
+
+fieldset {
+ min-width: 0; // 1
+ padding: 0; // 2
+ margin: 0; // 2
+ border: 0; // 2
+}
+
+// 1. By using `float: left`, the legend will behave like a block element.
+// This way the border of a fieldset wraps around the legend if present.
+// 2. Fix wrapping bug.
+// See https://github.com/twbs/bootstrap/issues/29712
+
+legend {
+ float: left; // 1
+ width: 100%;
+ padding: 0;
+ margin-bottom: $legend-margin-bottom;
+ @include font-size($legend-font-size);
+ font-weight: $legend-font-weight;
+ line-height: inherit;
+
+ + * {
+ clear: left; // 2
+ }
+}
+
+// Fix height of inputs with a type of datetime-local, date, month, week, or time
+// See https://github.com/twbs/bootstrap/issues/18842
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+ padding: 0;
+}
+
+::-webkit-inner-spin-button {
+ height: auto;
+}
+
+// 1. Correct the outline style in Safari.
+// 2. This overrides the extra rounded corners on search inputs in iOS so that our
+// `.form-control` class can properly style them. Note that this cannot simply
+// be added to `.form-control` as it's not specific enough. For details, see
+// https://github.com/twbs/bootstrap/issues/11586.
+
+[type='search'] {
+ outline-offset: -2px; // 1
+ -webkit-appearance: textfield; // 2
+}
+
+// 1. A few input types should stay LTR
+// See https://rtlstyling.com/posts/rtl-styling#form-inputs
+// 2. RTL only output
+// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+ direction: ltr;
+}
+*/
+
+// Remove the inner padding in Chrome and Safari on macOS.
+
+::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+// Remove padding around color pickers in webkit browsers
+
+::-webkit-color-swatch-wrapper {
+ padding: 0;
+}
+
+// Inherit font family and line height for file input buttons
+
+// stylelint-disable-next-line selector-pseudo-element-no-unknown
+::file-selector-button {
+ font: inherit;
+}
+
+// 1. Change font properties to `inherit`
+// 2. Correct the inability to style clickable types in iOS and Safari.
+
+::-webkit-file-upload-button {
+ font: inherit; // 1
+ -webkit-appearance: button; // 2
+}
+
+// Correct element displays
+
+output {
+ display: inline-block;
+}
+
+// Remove border from iframe
+
+iframe {
+ border: 0;
+}
+
+// Summary
+//
+// 1. Add the correct display in all browsers
+
+summary {
+ display: list-item; // 1
+ cursor: pointer;
+}
+
+// Progress
+//
+// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
+progress {
+ vertical-align: baseline;
+}
+
+// Hidden attribute
+//
+// Always hide an element with the `hidden` HTML attribute.
+
+[hidden] {
+ display: none !important;
+}
diff --git a/src/scss/bootstrap/_root.scss b/src/scss/bootstrap/_root.scss
new file mode 100644
index 0000000..768d634
--- /dev/null
+++ b/src/scss/bootstrap/_root.scss
@@ -0,0 +1,16 @@
+:root {
+ // Custom variable values only support SassScript inside `#{}`.
+ @each $color, $value in $colors {
+ --#{$variable-prefix}#{$color}: #{$value};
+ }
+
+ @each $color, $value in $theme-colors {
+ --#{$variable-prefix}#{$color}: #{$value};
+ }
+
+ // Use `inspect` for lists so that quoted items keep the quotes.
+ // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+ --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+ --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
+ --#{$variable-prefix}gradient: #{$gradient};
+}
diff --git a/src/scss/bootstrap/_spinners.scss b/src/scss/bootstrap/_spinners.scss
new file mode 100644
index 0000000..638272f
--- /dev/null
+++ b/src/scss/bootstrap/_spinners.scss
@@ -0,0 +1,67 @@
+//
+// Rotating border
+//
+
+@keyframes spinner-border {
+ to {
+ transform: rotate(360deg) #{'/* rtl:ignore */'};
+ }
+}
+
+.spinner-border {
+ display: inline-block;
+ width: $spinner-width;
+ height: $spinner-height;
+ vertical-align: text-bottom;
+ border: $spinner-border-width solid currentColor;
+ border-right-color: transparent;
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: 50%;
+ animation: $spinner-animation-speed linear infinite spinner-border;
+}
+
+.spinner-border-sm {
+ width: $spinner-width-sm;
+ height: $spinner-height-sm;
+ border-width: $spinner-border-width-sm;
+}
+
+//
+// Growing circle
+//
+
+@keyframes spinner-grow {
+ 0% {
+ transform: scale(0);
+ }
+ 50% {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+.spinner-grow {
+ display: inline-block;
+ width: $spinner-width;
+ height: $spinner-height;
+ vertical-align: text-bottom;
+ background-color: currentColor;
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: 50%;
+ opacity: 0;
+ animation: $spinner-animation-speed linear infinite spinner-grow;
+}
+
+.spinner-grow-sm {
+ width: $spinner-width-sm;
+ height: $spinner-height-sm;
+}
+
+@if $enable-reduced-motion {
+ @media (prefers-reduced-motion: reduce) {
+ .spinner-border,
+ .spinner-grow {
+ animation-duration: $spinner-animation-speed * 2;
+ }
+ }
+}
diff --git a/src/scss/bootstrap/_tables.scss b/src/scss/bootstrap/_tables.scss
new file mode 100644
index 0000000..c9e4cf3
--- /dev/null
+++ b/src/scss/bootstrap/_tables.scss
@@ -0,0 +1,146 @@
+//
+// Basic Bootstrap table
+//
+
+.table {
+ --#{$variable-prefix}table-bg: #{$table-bg};
+ --#{$variable-prefix}table-striped-color: #{$table-striped-color};
+ --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
+ --#{$variable-prefix}table-active-color: #{$table-active-color};
+ --#{$variable-prefix}table-active-bg: #{$table-active-bg};
+ --#{$variable-prefix}table-hover-color: #{$table-hover-color};
+ --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
+
+ width: 100%;
+ margin-bottom: $spacer;
+ color: $table-color;
+ vertical-align: $table-cell-vertical-align;
+ border-color: $table-border-color;
+
+ // Target th & td
+ // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
+ // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
+ // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
+ // stylelint-disable-next-line selector-max-universal
+ > :not(caption) > * > * {
+ padding: $table-cell-padding-y $table-cell-padding-x;
+ background-color: var(--#{$variable-prefix}table-bg);
+ border-bottom-width: $table-border-width;
+ box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
+ }
+
+ > tbody {
+ vertical-align: inherit;
+ }
+
+ > thead {
+ vertical-align: bottom;
+ }
+
+ // Highlight border color between thead, tbody and tfoot.
+ > :not(:last-child) > :last-child > * {
+ border-bottom-color: $table-group-separator-color;
+ }
+}
+
+//
+// Change placement of captions with a class
+//
+
+.caption-top {
+ caption-side: top;
+}
+
+//
+// Condensed table w/ half padding
+//
+
+.table-sm {
+ // stylelint-disable-next-line selector-max-universal
+ > :not(caption) > * > * {
+ padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
+ }
+}
+
+// Border versions
+//
+// Add or remove borders all around the table and between all the columns.
+//
+// When borders are added on all sides of the cells, the corners can render odd when
+// these borders do not have the same color or if they are semi-transparent.
+// Therefor we add top and border bottoms to the `tr`s and left and right borders
+// to the `td`s or `th`s
+
+.table-bordered {
+ > :not(caption) > * {
+ border-width: $table-border-width 0;
+
+ // stylelint-disable-next-line selector-max-universal
+ > * {
+ border-width: 0 $table-border-width;
+ }
+ }
+}
+
+.table-borderless {
+ // stylelint-disable-next-line selector-max-universal
+ > :not(caption) > * > * {
+ border-bottom-width: 0;
+ }
+}
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+ > tbody > tr:nth-of-type(#{$table-striped-order}) {
+ --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
+ color: var(--#{$variable-prefix}table-striped-color);
+ }
+}
+
+// Active table
+//
+// The `.table-active` class can be added to highlight rows or cells
+
+.table-active {
+ --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
+ color: var(--#{$variable-prefix}table-active-color);
+}
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+ > tbody > tr:hover {
+ --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
+ color: var(--#{$variable-prefix}table-hover-color);
+ }
+}
+
+// Table variants
+//
+// Table variants set the table cell backgrounds, border colors
+// and the colors of the striped, hovered & active tables
+
+@each $color, $value in $table-variants {
+ @include table-variant($color, $value);
+}
+
+// Responsive tables
+//
+// Generate series of `.table-responsive-*` classes for configuring the screen
+// size of where your table will overflow.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @include media-breakpoint-down($breakpoint) {
+ .table-responsive#{$infix} {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+ }
+}
diff --git a/src/scss/bootstrap/_toasts.scss b/src/scss/bootstrap/_toasts.scss
new file mode 100644
index 0000000..5c533d7
--- /dev/null
+++ b/src/scss/bootstrap/_toasts.scss
@@ -0,0 +1,51 @@
+.toast {
+ width: $toast-max-width;
+ max-width: 100%;
+ @include font-size($toast-font-size);
+ color: $toast-color;
+ pointer-events: auto;
+ background-color: $toast-background-color;
+ background-clip: padding-box;
+ border: $toast-border-width solid $toast-border-color;
+ box-shadow: $toast-box-shadow;
+ @include border-radius($toast-border-radius);
+
+ &:not(.showing):not(.show) {
+ opacity: 0;
+ }
+
+ &.hide {
+ display: none;
+ }
+}
+
+.toast-container {
+ width: max-content;
+ max-width: 100%;
+ pointer-events: none;
+
+ > :not(:last-child) {
+ margin-bottom: $toast-spacing;
+ }
+}
+
+.toast-header {
+ display: flex;
+ align-items: center;
+ padding: $toast-padding-y $toast-padding-x;
+ color: $toast-header-color;
+ background-color: $toast-header-background-color;
+ background-clip: padding-box;
+ border-bottom: $toast-border-width solid $toast-header-border-color;
+ @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
+
+ .btn-close {
+ margin-right: $toast-padding-x / -2;
+ margin-left: $toast-padding-x;
+ }
+}
+
+.toast-body {
+ padding: $toast-padding-x; // apply to both vertical and horizontal
+ word-wrap: break-word;
+}
diff --git a/src/scss/bootstrap/_tooltip.scss b/src/scss/bootstrap/_tooltip.scss
new file mode 100644
index 0000000..a8fac83
--- /dev/null
+++ b/src/scss/bootstrap/_tooltip.scss
@@ -0,0 +1,117 @@
+// Base class
+.tooltip {
+ position: absolute;
+ z-index: $zindex-tooltip;
+ display: block;
+ margin: $tooltip-margin;
+ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+ // So reset our font and text properties to avoid inheriting weird values.
+ @include reset-text();
+ @include font-size($tooltip-font-size);
+ // Allow breaking very long words so they don't overflow the tooltip's bounds
+ word-wrap: break-word;
+ opacity: 0;
+
+ &.show {
+ opacity: $tooltip-opacity;
+ }
+
+ .tooltip-arrow {
+ position: absolute;
+ display: block;
+ width: $tooltip-arrow-width;
+ height: $tooltip-arrow-height;
+
+ &::before {
+ position: absolute;
+ content: '';
+ border-color: transparent;
+ border-style: solid;
+ }
+ }
+}
+
+.bs-tooltip-top {
+ padding: $tooltip-arrow-height 0;
+
+ .tooltip-arrow {
+ bottom: 0;
+
+ &::before {
+ top: -1px;
+ border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+ border-top-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+.bs-tooltip-end {
+ padding: 0 $tooltip-arrow-height;
+
+ .tooltip-arrow {
+ left: 0;
+ width: $tooltip-arrow-height;
+ height: $tooltip-arrow-width;
+
+ &::before {
+ right: -1px;
+ border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+ border-right-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+.bs-tooltip-bottom {
+ padding: $tooltip-arrow-height 0;
+
+ .tooltip-arrow {
+ top: 0;
+
+ &::before {
+ bottom: -1px;
+ border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+ border-bottom-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+.bs-tooltip-start {
+ padding: 0 $tooltip-arrow-height;
+
+ .tooltip-arrow {
+ right: 0;
+ width: $tooltip-arrow-height;
+ height: $tooltip-arrow-width;
+
+ &::before {
+ left: -1px;
+ border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+ border-left-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+.bs-tooltip-auto {
+ &[data-popper-placement^='top'] {
+ @extend .bs-tooltip-top;
+ }
+ &[data-popper-placement^='right'] {
+ @extend .bs-tooltip-end;
+ }
+ &[data-popper-placement^='bottom'] {
+ @extend .bs-tooltip-bottom;
+ }
+ &[data-popper-placement^='left'] {
+ @extend .bs-tooltip-start;
+ }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+ max-width: $tooltip-max-width;
+ padding: $tooltip-padding-y $tooltip-padding-x;
+ color: $tooltip-color;
+ text-align: center;
+ background-color: $tooltip-bg;
+ @include border-radius($tooltip-border-radius);
+}
diff --git a/src/scss/bootstrap/_transitions.scss b/src/scss/bootstrap/_transitions.scss
new file mode 100644
index 0000000..3d1db3e
--- /dev/null
+++ b/src/scss/bootstrap/_transitions.scss
@@ -0,0 +1,19 @@
+.fade {
+ @include transition($transition-fade);
+
+ &:not(.show) {
+ opacity: 0;
+ }
+}
+
+.collapse {
+ &:not(.show) {
+ display: none;
+ }
+}
+
+.collapsing {
+ height: 0;
+ overflow: hidden;
+ @include transition($transition-collapse);
+}
diff --git a/src/scss/bootstrap/_type.scss b/src/scss/bootstrap/_type.scss
new file mode 100644
index 0000000..4ad83e5
--- /dev/null
+++ b/src/scss/bootstrap/_type.scss
@@ -0,0 +1,102 @@
+//
+// Headings
+//
+.h1 {
+ @extend h1;
+}
+
+.h2 {
+ @extend h2;
+}
+
+.h3 {
+ @extend h3;
+}
+
+.h4 {
+ @extend h4;
+}
+
+.h5 {
+ @extend h5;
+}
+
+.h6 {
+ @extend h6;
+}
+
+.lead {
+ @include font-size($lead-font-size);
+ font-weight: $lead-font-weight;
+}
+
+// Type display classes
+@each $display, $font-size in $display-font-sizes {
+ .display-#{$display} {
+ @include font-size($font-size);
+ font-weight: $display-font-weight;
+ line-height: $display-line-height;
+ }
+}
+
+//
+// Emphasis
+//
+.small {
+ @extend small;
+}
+
+.mark {
+ @extend mark;
+}
+
+//
+// Lists
+//
+
+.list-unstyled {
+ @include list-unstyled();
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+ @include list-unstyled();
+}
+.list-inline-item {
+ display: inline-block;
+
+ &:not(:last-child) {
+ margin-right: $list-inline-padding;
+ }
+}
+
+//
+// Misc
+//
+
+// Builds on `abbr`
+.initialism {
+ @include font-size($initialism-font-size);
+ text-transform: uppercase;
+}
+
+// Blockquotes
+.blockquote {
+ margin-bottom: $blockquote-margin-y;
+ @include font-size($blockquote-font-size);
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+}
+
+.blockquote-footer {
+ margin-top: -$blockquote-margin-y;
+ margin-bottom: $blockquote-margin-y;
+ @include font-size($blockquote-footer-font-size);
+ color: $blockquote-footer-color;
+
+ &::before {
+ content: '\2014\00A0'; // em dash, nbsp
+ }
+}
diff --git a/src/scss/bootstrap/_utilities.scss b/src/scss/bootstrap/_utilities.scss
new file mode 100644
index 0000000..9351e39
--- /dev/null
+++ b/src/scss/bootstrap/_utilities.scss
@@ -0,0 +1,656 @@
+// Utilities
+
+$utilities: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$utilities: map-merge(
+ (
+ 'align': (
+ property: vertical-align,
+ class: align,
+ values: baseline top middle bottom text-bottom text-top,
+ ),
+ 'float': (
+ responsive: true,
+ property: float,
+ values: (
+ start: left,
+ end: right,
+ none: none,
+ ),
+ ),
+ 'overflow': (
+ property: overflow,
+ values: auto hidden visible scroll,
+ ),
+ // scss-docs-start utils-display
+ 'display':
+ (
+ responsive: true,
+ print: true,
+ property: display,
+ class: d,
+ values: inline inline-block block grid table table-row table-cell flex inline-flex none,
+ ),
+ // scss-docs-end utils-display
+ 'shadow':
+ (
+ property: box-shadow,
+ class: shadow,
+ values: (
+ null: $box-shadow,
+ sm: $box-shadow-sm,
+ lg: $box-shadow-lg,
+ none: none,
+ ),
+ ),
+ 'position': (
+ property: position,
+ values: static relative absolute fixed sticky,
+ ),
+ 'top': (
+ property: top,
+ values: $position-values,
+ ),
+ 'bottom': (
+ property: bottom,
+ values: $position-values,
+ ),
+ 'start': (
+ property: left,
+ class: start,
+ values: $position-values,
+ ),
+ 'end': (
+ property: right,
+ class: end,
+ values: $position-values,
+ ),
+ 'translate-middle': (
+ property: transform,
+ class: translate-middle,
+ values: (
+ null: translate(-50%, -50%),
+ x: translateX(-50%),
+ y: translateY(-50%),
+ ),
+ ),
+ 'border': (
+ property: border,
+ values: (
+ null: $border-width solid $border-color,
+ 0: 0,
+ ),
+ ),
+ 'border-top': (
+ property: border-top,
+ values: (
+ null: $border-width solid $border-color,
+ 0: 0,
+ ),
+ ),
+ 'border-end': (
+ property: border-right,
+ class: border-end,
+ values: (
+ null: $border-width solid $border-color,
+ 0: 0,
+ ),
+ ),
+ 'border-bottom': (
+ property: border-bottom,
+ values: (
+ null: $border-width solid $border-color,
+ 0: 0,
+ ),
+ ),
+ 'border-start': (
+ property: border-left,
+ class: border-start,
+ values: (
+ null: $border-width solid $border-color,
+ 0: 0,
+ ),
+ ),
+ 'border-color': (
+ property: border-color,
+ class: border,
+ values:
+ map-merge(
+ $theme-colors,
+ (
+ 'white': $white,
+ )
+ ),
+ ),
+ 'border-width': (
+ property: border-width,
+ class: border,
+ values: $border-widths,
+ ),
+ // Sizing utilities
+ 'width':
+ (
+ property: width,
+ class: w,
+ values: (
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%,
+ auto: auto,
+ ),
+ ),
+ 'max-width': (
+ property: max-width,
+ class: mw,
+ values: (
+ 100: 100%,
+ ),
+ ),
+ 'viewport-width': (
+ property: width,
+ class: vw,
+ values: (
+ 100: 100vw,
+ ),
+ ),
+ 'min-viewport-width': (
+ property: min-width,
+ class: min-vw,
+ values: (
+ 100: 100vw,
+ ),
+ ),
+ 'height': (
+ property: height,
+ class: h,
+ values: (
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%,
+ auto: auto,
+ ),
+ ),
+ 'max-height': (
+ property: max-height,
+ class: mh,
+ values: (
+ 100: 100%,
+ ),
+ ),
+ 'viewport-height': (
+ property: height,
+ class: vh,
+ values: (
+ 100: 100vh,
+ ),
+ ),
+ 'min-viewport-height': (
+ property: min-height,
+ class: min-vh,
+ values: (
+ 100: 100vh,
+ ),
+ ),
+ // Flex utilities
+ 'flex':
+ (
+ responsive: true,
+ property: flex,
+ values: (
+ fill: 1 1 auto,
+ ),
+ ),
+ 'flex-direction': (
+ responsive: true,
+ property: flex-direction,
+ class: flex,
+ values: row column row-reverse column-reverse,
+ ),
+ 'flex-grow': (
+ responsive: true,
+ property: flex-grow,
+ class: flex,
+ values: (
+ grow-0: 0,
+ grow-1: 1,
+ ),
+ ),
+ 'flex-shrink': (
+ responsive: true,
+ property: flex-shrink,
+ class: flex,
+ values: (
+ shrink-0: 0,
+ shrink-1: 1,
+ ),
+ ),
+ 'flex-wrap': (
+ responsive: true,
+ property: flex-wrap,
+ class: flex,
+ values: wrap nowrap wrap-reverse,
+ ),
+ 'gap': (
+ responsive: true,
+ property: gap,
+ class: gap,
+ values: $spacers,
+ ),
+ 'justify-content': (
+ responsive: true,
+ property: justify-content,
+ values: (
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ between: space-between,
+ around: space-around,
+ evenly: space-evenly,
+ ),
+ ),
+ 'align-items': (
+ responsive: true,
+ property: align-items,
+ values: (
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ baseline: baseline,
+ stretch: stretch,
+ ),
+ ),
+ 'align-content': (
+ responsive: true,
+ property: align-content,
+ values: (
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ between: space-between,
+ around: space-around,
+ stretch: stretch,
+ ),
+ ),
+ 'align-self': (
+ responsive: true,
+ property: align-self,
+ values: (
+ auto: auto,
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ baseline: baseline,
+ stretch: stretch,
+ ),
+ ),
+ 'order': (
+ responsive: true,
+ property: order,
+ values: (
+ first: -1,
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3,
+ 4: 4,
+ 5: 5,
+ last: 6,
+ ),
+ ),
+ // Margin utilities
+ 'margin':
+ (
+ responsive: true,
+ property: margin,
+ class: m,
+ values:
+ map-merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ 'margin-x': (
+ responsive: true,
+ property: margin-right margin-left,
+ class: mx,
+ values:
+ map-merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ 'margin-y': (
+ responsive: true,
+ property: margin-top margin-bottom,
+ class: my,
+ values:
+ map-merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ 'margin-top': (
+ responsive: true,
+ property: margin-top,
+ class: mt,
+ values:
+ map-merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ 'margin-end': (
+ responsive: true,
+ property: margin-right,
+ class: me,
+ values:
+ map-merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ 'margin-bottom': (
+ responsive: true,
+ property: margin-bottom,
+ class: mb,
+ values:
+ map-merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ 'margin-start': (
+ responsive: true,
+ property: margin-left,
+ class: ms,
+ values:
+ map-merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ // Negative margin utilities
+ 'negative-margin':
+ (
+ responsive: true,
+ property: margin,
+ class: m,
+ values: $negative-spacers,
+ ),
+ 'negative-margin-x': (
+ responsive: true,
+ property: margin-right margin-left,
+ class: mx,
+ values: $negative-spacers,
+ ),
+ 'negative-margin-y': (
+ responsive: true,
+ property: margin-top margin-bottom,
+ class: my,
+ values: $negative-spacers,
+ ),
+ 'negative-margin-top': (
+ responsive: true,
+ property: margin-top,
+ class: mt,
+ values: $negative-spacers,
+ ),
+ 'negative-margin-end': (
+ responsive: true,
+ property: margin-right,
+ class: me,
+ values: $negative-spacers,
+ ),
+ 'negative-margin-bottom': (
+ responsive: true,
+ property: margin-bottom,
+ class: mb,
+ values: $negative-spacers,
+ ),
+ 'negative-margin-start': (
+ responsive: true,
+ property: margin-left,
+ class: ms,
+ values: $negative-spacers,
+ ),
+ // Padding utilities
+ 'padding':
+ (
+ responsive: true,
+ property: padding,
+ class: p,
+ values: $spacers,
+ ),
+ 'padding-x': (
+ responsive: true,
+ property: padding-right padding-left,
+ class: px,
+ values: $spacers,
+ ),
+ 'padding-y': (
+ responsive: true,
+ property: padding-top padding-bottom,
+ class: py,
+ values: $spacers,
+ ),
+ 'padding-top': (
+ responsive: true,
+ property: padding-top,
+ class: pt,
+ values: $spacers,
+ ),
+ 'padding-end': (
+ responsive: true,
+ property: padding-right,
+ class: pe,
+ values: $spacers,
+ ),
+ 'padding-bottom': (
+ responsive: true,
+ property: padding-bottom,
+ class: pb,
+ values: $spacers,
+ ),
+ 'padding-start': (
+ responsive: true,
+ property: padding-left,
+ class: ps,
+ values: $spacers,
+ ),
+ // Text
+ 'font-size':
+ (
+ rfs: true,
+ property: font-size,
+ class: fs,
+ values: $font-sizes,
+ ),
+ 'font-style': (
+ property: font-style,
+ class: fst,
+ values: italic normal,
+ ),
+ 'font-weight': (
+ property: font-weight,
+ class: fw,
+ values: (
+ light: $font-weight-light,
+ lighter: $font-weight-lighter,
+ normal: $font-weight-normal,
+ bold: $font-weight-bold,
+ bolder: $font-weight-bolder,
+ ),
+ ),
+ 'text-transform': (
+ property: text-transform,
+ class: text,
+ values: lowercase uppercase capitalize,
+ ),
+ 'text-align': (
+ responsive: true,
+ property: text-align,
+ class: text,
+ values: (
+ start: left,
+ end: right,
+ center: center,
+ ),
+ ),
+ // scss-docs-start utils-color
+ 'color':
+ (
+ property: color,
+ class: text,
+ values:
+ map-merge(
+ $theme-colors,
+ (
+ 'white': $white,
+ 'body': $body-color,
+ 'muted': $text-muted,
+ 'black-50': rgba($black, 0.5),
+ 'white-50': rgba($white, 0.5),
+ 'reset': inherit,
+ )
+ ),
+ ),
+ // scss-docs-end utils-color
+ 'line-height':
+ (
+ property: line-height,
+ class: lh,
+ values: (
+ 1: 1,
+ sm: $line-height-sm,
+ base: $line-height-base,
+ lg: $line-height-lg,
+ ),
+ ),
+ // scss-docs-start utils-bg-color
+ 'background-color':
+ (
+ property: background-color,
+ class: bg,
+ values:
+ map-merge(
+ $theme-colors,
+ (
+ 'body': $body-bg,
+ 'white': $white,
+ 'transparent': transparent,
+ )
+ ),
+ ),
+ // scss-docs-end utils-bg-color
+ 'gradient':
+ (
+ property: background-image,
+ class: bg,
+ values: (
+ gradient: var(--#{$variable-prefix}gradient),
+ ),
+ ),
+ 'white-space': (
+ property: white-space,
+ class: text,
+ values: (
+ wrap: normal,
+ nowrap: nowrap,
+ ),
+ ),
+ 'text-decoration': (
+ property: text-decoration,
+ values: none underline line-through,
+ ),
+ 'word-wrap': (
+ property: word-wrap word-break,
+ class: text,
+ values: (
+ break: break-word,
+ ),
+ rtl: false,
+ ),
+ 'font-family': (
+ property: font-family,
+ class: font,
+ values: (
+ monospace: var(--#{$variable-prefix}font-monospace),
+ ),
+ ),
+ 'user-select': (
+ property: user-select,
+ values: all auto none,
+ ),
+ 'pointer-events': (
+ property: pointer-events,
+ class: pe,
+ values: none auto,
+ ),
+ 'rounded': (
+ property: border-radius,
+ class: rounded,
+ values: (
+ null: $border-radius,
+ 0: 0,
+ 1: $border-radius-sm,
+ 2: $border-radius,
+ 3: $border-radius-lg,
+ circle: 50%,
+ pill: $border-radius-pill,
+ ),
+ ),
+ 'rounded-top': (
+ property: border-top-left-radius border-top-right-radius,
+ class: rounded-top,
+ values: (
+ null: $border-radius,
+ ),
+ ),
+ 'rounded-end': (
+ property: border-top-right-radius border-bottom-right-radius,
+ class: rounded-end,
+ values: (
+ null: $border-radius,
+ ),
+ ),
+ 'rounded-bottom': (
+ property: border-bottom-right-radius border-bottom-left-radius,
+ class: rounded-bottom,
+ values: (
+ null: $border-radius,
+ ),
+ ),
+ 'rounded-start': (
+ property: border-bottom-left-radius border-top-left-radius,
+ class: rounded-start,
+ values: (
+ null: $border-radius,
+ ),
+ ),
+ 'visibility': (
+ property: visibility,
+ class: null,
+ values: (
+ visible: visible,
+ invisible: hidden,
+ ),
+ ),
+ ),
+ $utilities
+);
diff --git a/src/scss/bootstrap/_variables.scss b/src/scss/bootstrap/_variables.scss
new file mode 100644
index 0000000..7df8857
--- /dev/null
+++ b/src/scss/bootstrap/_variables.scss
@@ -0,0 +1,1349 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Color system
+
+// scss-docs-start gray-color-variables
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+// scss-docs-end gray-color-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+ '100': $gray-100,
+ '200': $gray-200,
+ '300': $gray-300,
+ '400': $gray-400,
+ '500': $gray-500,
+ '600': $gray-600,
+ '700': $gray-700,
+ '800': $gray-800,
+ '900': $gray-900,
+) !default;
+// scss-docs-end gray-colors-map
+// fusv-enable
+
+// scss-docs-start color-variables
+$blue: #0d6efd !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #198754 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+ 'blue': $blue,
+ 'indigo': $indigo,
+ 'purple': $purple,
+ 'pink': $pink,
+ 'red': $red,
+ 'orange': $orange,
+ 'yellow': $yellow,
+ 'green': $green,
+ 'teal': $teal,
+ 'cyan': $cyan,
+ 'white': $white,
+ 'gray': $gray-600,
+ 'gray-dark': $gray-800,
+) !default;
+// scss-docs-end colors-map
+
+// scss-docs-start theme-color-variables
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-900 !default;
+// scss-docs-end theme-color-variables
+
+// scss-docs-start theme-colors-map
+$theme-colors: (
+ 'primary': $primary,
+ 'secondary': $secondary,
+ 'success': $success,
+ 'info': $info,
+ 'warning': $warning,
+ 'danger': $danger,
+ 'light': $light,
+ 'dark': $dark,
+) !default;
+// scss-docs-end theme-colors-map
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 4.5 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
+
+// fusv-disable
+$blue-100: tint-color($blue, 80%) !default;
+$blue-200: tint-color($blue, 60%) !default;
+$blue-300: tint-color($blue, 40%) !default;
+$blue-400: tint-color($blue, 20%) !default;
+$blue-500: $blue !default;
+$blue-600: shade-color($blue, 20%) !default;
+$blue-700: shade-color($blue, 40%) !default;
+$blue-800: shade-color($blue, 60%) !default;
+$blue-900: shade-color($blue, 80%) !default;
+
+$indigo-100: tint-color($indigo, 80%) !default;
+$indigo-200: tint-color($indigo, 60%) !default;
+$indigo-300: tint-color($indigo, 40%) !default;
+$indigo-400: tint-color($indigo, 20%) !default;
+$indigo-500: $indigo !default;
+$indigo-600: shade-color($indigo, 20%) !default;
+$indigo-700: shade-color($indigo, 40%) !default;
+$indigo-800: shade-color($indigo, 60%) !default;
+$indigo-900: shade-color($indigo, 80%) !default;
+
+$purple-100: tint-color($purple, 80%) !default;
+$purple-200: tint-color($purple, 60%) !default;
+$purple-300: tint-color($purple, 40%) !default;
+$purple-400: tint-color($purple, 20%) !default;
+$purple-500: $purple !default;
+$purple-600: shade-color($purple, 20%) !default;
+$purple-700: shade-color($purple, 40%) !default;
+$purple-800: shade-color($purple, 60%) !default;
+$purple-900: shade-color($purple, 80%) !default;
+
+$pink-100: tint-color($pink, 80%) !default;
+$pink-200: tint-color($pink, 60%) !default;
+$pink-300: tint-color($pink, 40%) !default;
+$pink-400: tint-color($pink, 20%) !default;
+$pink-500: $pink !default;
+$pink-600: shade-color($pink, 20%) !default;
+$pink-700: shade-color($pink, 40%) !default;
+$pink-800: shade-color($pink, 60%) !default;
+$pink-900: shade-color($pink, 80%) !default;
+
+$red-100: tint-color($red, 80%) !default;
+$red-200: tint-color($red, 60%) !default;
+$red-300: tint-color($red, 40%) !default;
+$red-400: tint-color($red, 20%) !default;
+$red-500: $red !default;
+$red-600: shade-color($red, 20%) !default;
+$red-700: shade-color($red, 40%) !default;
+$red-800: shade-color($red, 60%) !default;
+$red-900: shade-color($red, 80%) !default;
+
+$orange-100: tint-color($orange, 80%) !default;
+$orange-200: tint-color($orange, 60%) !default;
+$orange-300: tint-color($orange, 40%) !default;
+$orange-400: tint-color($orange, 20%) !default;
+$orange-500: $orange !default;
+$orange-600: shade-color($orange, 20%) !default;
+$orange-700: shade-color($orange, 40%) !default;
+$orange-800: shade-color($orange, 60%) !default;
+$orange-900: shade-color($orange, 80%) !default;
+
+$yellow-100: tint-color($yellow, 80%) !default;
+$yellow-200: tint-color($yellow, 60%) !default;
+$yellow-300: tint-color($yellow, 40%) !default;
+$yellow-400: tint-color($yellow, 20%) !default;
+$yellow-500: $yellow !default;
+$yellow-600: shade-color($yellow, 20%) !default;
+$yellow-700: shade-color($yellow, 40%) !default;
+$yellow-800: shade-color($yellow, 60%) !default;
+$yellow-900: shade-color($yellow, 80%) !default;
+
+$green-100: tint-color($green, 80%) !default;
+$green-200: tint-color($green, 60%) !default;
+$green-300: tint-color($green, 40%) !default;
+$green-400: tint-color($green, 20%) !default;
+$green-500: $green !default;
+$green-600: shade-color($green, 20%) !default;
+$green-700: shade-color($green, 40%) !default;
+$green-800: shade-color($green, 60%) !default;
+$green-900: shade-color($green, 80%) !default;
+
+$teal-100: tint-color($teal, 80%) !default;
+$teal-200: tint-color($teal, 60%) !default;
+$teal-300: tint-color($teal, 40%) !default;
+$teal-400: tint-color($teal, 20%) !default;
+$teal-500: $teal !default;
+$teal-600: shade-color($teal, 20%) !default;
+$teal-700: shade-color($teal, 40%) !default;
+$teal-800: shade-color($teal, 60%) !default;
+$teal-900: shade-color($teal, 80%) !default;
+
+$cyan-100: tint-color($cyan, 80%) !default;
+$cyan-200: tint-color($cyan, 60%) !default;
+$cyan-300: tint-color($cyan, 40%) !default;
+$cyan-400: tint-color($cyan, 20%) !default;
+$cyan-500: $cyan !default;
+$cyan-600: shade-color($cyan, 20%) !default;
+$cyan-700: shade-color($cyan, 40%) !default;
+$cyan-800: shade-color($cyan, 60%) !default;
+$cyan-900: shade-color($cyan, 80%) !default;
+// fusv-enable
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+ ('<', '%3c'),
+ ('>', '%3e'),
+ ('#', '%23'),
+ ('(', '%28'),
+ (')', '%29')
+) !default;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-reduced-motion: true !default;
+$enable-smooth-scroll: true !default;
+$enable-grid-classes: true !default;
+$enable-button-pointers: true !default;
+$enable-rfs: true !default;
+$enable-validation-icons: true !default;
+$enable-negative-margins: false !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities: true !default;
+
+// Prefix for :root CSS variables
+
+$variable-prefix: bs- !default;
+
+// Gradient
+//
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+// scss-docs-start variable-gradient
+$gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0)) !default;
+// scss-docs-end variable-gradient
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem !default;
+$spacers: (
+ 0: 0,
+ 1: $spacer / 4,
+ 2: $spacer / 2,
+ 3: $spacer,
+ 4: $spacer * 1.5,
+ 5: $spacer * 3,
+) !default;
+
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+
+$position-values: (
+ 0: 0,
+ 50: 50%,
+ 100: 100%,
+) !default;
+
+// Body
+//
+// Settings for the `` element.
+
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
+$body-text-align: null !default;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color: $primary !default;
+$link-decoration: underline !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
+$link-hover-decoration: null !default;
+
+$stretched-link-pseudo-element: after !default;
+$stretched-link-z-index: 1 !default;
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 1rem !default;
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
+ xxl: 1400px,
+) !default;
+// scss-docs-end grid-breakpoints
+
+@include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
+@include _assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints');
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+// scss-docs-start container-max-widths
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px,
+ xxl: 1320px,
+) !default;
+// scss-docs-end container-max-widths
+
+@include _assert-ascending($container-max-widths, '$container-max-widths');
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
+
+$gutters: $spacers !default;
+
+// Container padding
+
+$container-padding-x: $grid-gutter-width / 2 !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$border-width: 1px !default;
+$border-widths: (
+ 0: 0,
+ 1: 1px,
+ 2: 2px,
+ 3: 3px,
+ 4: 4px,
+ 5: 5px,
+) !default;
+
+$border-color: $gray-300 !default;
+
+$border-radius: 0.25rem !default;
+$border-radius-sm: 0.2rem !default;
+$border-radius-lg: 0.3rem !default;
+$border-radius-pill: 50rem !default;
+
+$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
+$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;
+
+$component-active-color: $white !default;
+$component-active-bg: $primary !default;
+
+$caret-width: 0.3em !default;
+$caret-vertical-align: $caret-width * 0.85 !default;
+$caret-spacing: $caret-width * 0.85 !default;
+
+$transition-base: all 0.2s ease-in-out !default;
+$transition-fade: opacity 0.15s linear !default;
+$transition-collapse: height 0.35s ease !default;
+
+// stylelint-disable function-disallowed-list
+// scss-docs-start aspect-ratios
+$aspect-ratios: (
+ '1x1': 100%,
+ '4x3': calc(3 / 4 * 100%),
+ '16x9': calc(9 / 16 * 100%),
+ '21x9': calc(9 / 21 * 100%),
+) !default;
+// scss-docs-end aspect-ratios
+// stylelint-enable function-disallowed-list
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+ 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+ 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+ monospace !default;
+// stylelint-enable value-keyword-case
+$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
+$font-family-code: var(--#{$variable-prefix}font-monospace) !default;
+
+// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
+// $font-size-base effects the font size of the body text
+$font-size-root: null !default;
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-sm: $font-size-base * 0.875 !default;
+$font-size-lg: $font-size-base * 1.25 !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
+
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+
+// scss-docs-start font-sizes
+$font-sizes: (
+ 1: $h1-font-size,
+ 2: $h2-font-size,
+ 3: $h3-font-size,
+ 4: $h4-font-size,
+ 5: $h5-font-size,
+ 6: $h6-font-size,
+) !default;
+// scss-docs-end font-sizes
+
+$headings-margin-bottom: $spacer / 2 !default;
+$headings-font-family: null !default;
+$headings-font-style: null !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: null !default;
+
+// scss-docs-start display-headings
+$display-font-sizes: (
+ 1: 5rem,
+ 2: 4.5rem,
+ 3: 4rem,
+ 4: 3.5rem,
+ 5: 3rem,
+ 6: 2.5rem,
+) !default;
+
+$display-font-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+// scss-docs-end display-headings
+
+$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: 0.875em !default;
+
+$sub-sup-font-size: 0.75em !default;
+
+$text-muted: $gray-600 !default;
+
+$initialism-font-size: $small-font-size !default;
+
+$blockquote-margin-y: $spacer !default;
+$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-footer-color: $gray-600 !default;
+$blockquote-footer-font-size: $small-font-size !default;
+
+$hr-margin-y: $spacer !default;
+$hr-color: inherit !default;
+$hr-height: $border-width !default;
+$hr-opacity: 0.25 !default;
+
+$legend-margin-bottom: 0.5rem !default;
+$legend-font-size: 1.5rem !default;
+$legend-font-weight: null !default;
+
+$mark-padding: 0.2em !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$nested-kbd-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: 0.5rem !default;
+
+$mark-bg: #fcf8e3 !default;
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+// scss-docs-start table-variables
+$table-cell-padding-y: 0.5rem !default;
+$table-cell-padding-x: 0.5rem !default;
+$table-cell-padding-y-sm: 0.25rem !default;
+$table-cell-padding-x-sm: 0.25rem !default;
+
+$table-cell-vertical-align: top !default;
+
+$table-color: $body-color !default;
+$table-bg: transparent !default;
+
+$table-th-font-weight: null !default;
+
+$table-striped-color: $table-color !default;
+$table-striped-bg-factor: 0.05 !default;
+$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
+
+$table-active-color: $table-color !default;
+$table-active-bg-factor: 0.1 !default;
+$table-active-bg: rgba($black, $table-active-bg-factor) !default;
+
+$table-hover-color: $table-color !default;
+$table-hover-bg-factor: 0.075 !default;
+$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
+
+$table-border-factor: 0.1 !default;
+$table-border-width: $border-width !default;
+$table-border-color: $border-color !default;
+
+$table-striped-order: odd !default;
+
+$table-group-separator-color: currentColor !default;
+
+$table-caption-color: $text-muted !default;
+
+$table-bg-scale: -80% !default;
+
+$table-variants: (
+ 'primary': shift-color($primary, $table-bg-scale),
+ 'secondary': shift-color($secondary, $table-bg-scale),
+ 'success': shift-color($success, $table-bg-scale),
+ 'info': shift-color($info, $table-bg-scale),
+ 'warning': shift-color($warning, $table-bg-scale),
+ 'danger': shift-color($danger, $table-bg-scale),
+ 'light': $light,
+ 'dark': $dark,
+) !default;
+// scss-docs-end table-variables
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y: 0.375rem !default;
+$input-btn-padding-x: 0.75rem !default;
+$input-btn-font-family: null !default;
+$input-btn-font-size: $font-size-base !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: 0.25rem !default;
+$input-btn-focus-color-opacity: 0.25 !default;
+$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm: 0.25rem !default;
+$input-btn-padding-x-sm: 0.5rem !default;
+$input-btn-font-size-sm: $font-size-sm !default;
+
+$input-btn-padding-y-lg: 0.5rem !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-font-size-lg: $font-size-lg !default;
+
+$input-btn-border-width: $border-width !default;
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $input-btn-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-font-size-lg: $input-btn-font-size-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-normal !default;
+$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity: 0.65 !default;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;
+
+$btn-link-color: $link-color !default;
+$btn-link-hover-color: $link-hover-color !default;
+$btn-link-disabled-color: $gray-600 !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: $border-radius !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+
+$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+
+$btn-hover-bg-shade-amount: 15% !default;
+$btn-hover-bg-tint-amount: 15% !default;
+$btn-hover-border-shade-amount: 20% !default;
+$btn-hover-border-tint-amount: 10% !default;
+$btn-active-bg-shade-amount: 20% !default;
+$btn-active-bg-tint-amount: 20% !default;
+$btn-active-border-shade-amount: 25% !default;
+$btn-active-border-tint-amount: 10% !default;
+
+// Forms
+
+$form-text-margin-top: 0.25rem !default;
+$form-text-font-size: $small-font-size !default;
+$form-text-font-style: null !default;
+$form-text-font-weight: null !default;
+$form-text-color: $text-muted !default;
+
+$form-label-margin-bottom: 0.5rem !default;
+$form-label-font-size: null !default;
+$form-label-font-style: null !default;
+$form-label-font-weight: null !default;
+$form-label-color: null !default;
+
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-font-family: $input-btn-font-family !default;
+$input-font-size: $input-btn-font-size !default;
+$input-font-weight: $font-weight-base !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-font-size-sm: $input-btn-font-size-sm !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-font-size-lg: $input-btn-font-size-lg !default;
+
+$input-bg: $white !default;
+$input-disabled-bg: $gray-200 !default;
+$input-disabled-border-color: null !default;
+
+$input-color: $body-color !default;
+$input-border-color: $gray-400 !default;
+$input-border-width: $input-btn-border-width !default;
+$input-box-shadow: $box-shadow-inset !default;
+
+$input-border-radius: $border-radius !default;
+$input-border-radius-sm: $border-radius-sm !default;
+$input-border-radius-lg: $border-radius-lg !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color: $gray-600 !default;
+$input-plaintext-color: $body-color !default;
+
+$input-height-border: $input-border-width * 2 !default;
+
+$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
+$input-height-inner-half: add($input-line-height * 0.5em, $input-padding-y) !default;
+$input-height-inner-quarter: add($input-line-height * 0.25em, $input-padding-y / 2) !default;
+
+$input-height: add(
+ $input-line-height * 1em,
+ add($input-padding-y * 2, $input-height-border, false)
+) !default;
+$input-height-sm: add(
+ $input-line-height * 1em,
+ add($input-padding-y-sm * 2, $input-height-border, false)
+) !default;
+$input-height-lg: add(
+ $input-line-height * 1em,
+ add($input-padding-y-lg * 2, $input-height-border, false)
+) !default;
+
+$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+
+$form-check-input-width: 1em !default;
+$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-padding-start: $form-check-input-width + 0.5em !default;
+$form-check-margin-bottom: 0.125rem !default;
+$form-check-label-color: null !default;
+$form-check-label-cursor: null !default;
+$form-check-transition: null !default;
+
+$form-check-input-active-filter: brightness(90%) !default;
+
+$form-check-input-bg: $input-bg !default;
+$form-check-input-border: 1px solid rgba(0, 0, 0, 0.25) !default;
+$form-check-input-border-radius: 0.25em !default;
+$form-check-radio-border-radius: 50% !default;
+$form-check-input-focus-border: $input-focus-border-color !default;
+$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$form-check-input-checked-color: $component-active-color !default;
+$form-check-input-checked-bg-color: $component-active-bg !default;
+$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
+$form-check-input-checked-bg-image: url("data:image/svg+xml,
") !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,
") !default;
+
+$form-check-input-indeterminate-color: $component-active-color !default;
+$form-check-input-indeterminate-bg-color: $component-active-bg !default;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,
") !default;
+
+$form-check-input-disabled-opacity: 0.5 !default;
+$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
+
+$form-switch-color: rgba(0, 0, 0, 0.25) !default;
+$form-switch-width: 2em !default;
+$form-switch-padding-start: $form-switch-width + 0.5em !default;
+$form-switch-bg-image: url("data:image/svg+xml,
") !default;
+$form-switch-border-radius: $form-switch-width !default;
+$form-switch-transition: background-position 0.15s ease-in-out !default;
+
+$form-switch-focus-color: $input-focus-border-color !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml,
") !default;
+
+$form-switch-checked-color: $component-active-color !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,
") !default;
+$form-switch-checked-bg-position: right center !default;
+
+$form-check-inline-margin-end: 1rem !default;
+
+$input-group-addon-padding-y: $input-padding-y !default;
+$input-group-addon-padding-x: $input-padding-x !default;
+$input-group-addon-font-weight: $input-font-weight !default;
+$input-group-addon-color: $input-color !default;
+$input-group-addon-bg: $gray-200 !default;
+$input-group-addon-border-color: $input-border-color !default;
+
+$form-select-padding-y: $input-padding-y !default;
+$form-select-padding-x: $input-padding-x !default;
+$form-select-font-family: $input-font-family !default;
+$form-select-font-size: $input-font-size !default;
+$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
+$form-select-font-weight: $input-font-weight !default;
+$form-select-line-height: $input-line-height !default;
+$form-select-color: $input-color !default;
+$form-select-disabled-color: $gray-600 !default;
+$form-select-bg: $input-bg !default;
+$form-select-disabled-bg: $gray-200 !default;
+$form-select-disabled-border-color: $input-disabled-border-color !default;
+$form-select-bg-position: right $form-select-padding-x center !default;
+$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
+$form-select-indicator-color: $gray-800 !default;
+$form-select-indicator: url("data:image/svg+xml,
") !default;
+
+$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 +
+ $form-select-indicator-padding !default;
+$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
+$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
+
+$form-select-border-width: $input-border-width !default;
+$form-select-border-color: $input-border-color !default;
+$form-select-border-radius: $border-radius !default;
+$form-select-box-shadow: $box-shadow-inset !default;
+
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-width: $input-focus-width !default;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+
+$form-select-padding-y-sm: $input-padding-y-sm !default;
+$form-select-padding-x-sm: $input-padding-x-sm !default;
+$form-select-font-size-sm: $input-font-size-sm !default;
+
+$form-select-padding-y-lg: $input-padding-y-lg !default;
+$form-select-padding-x-lg: $input-padding-x-lg !default;
+$form-select-font-size-lg: $input-font-size-lg !default;
+
+$form-range-track-width: 100% !default;
+$form-range-track-height: 0.5rem !default;
+$form-range-track-cursor: pointer !default;
+$form-range-track-bg: $gray-300 !default;
+$form-range-track-border-radius: 1rem !default;
+$form-range-track-box-shadow: $box-shadow-inset !default;
+
+$form-range-thumb-width: 1rem !default;
+$form-range-thumb-height: $form-range-thumb-width !default;
+$form-range-thumb-bg: $component-active-bg !default;
+$form-range-thumb-border: 0 !default;
+$form-range-thumb-border-radius: 1rem !default;
+$form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;
+$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
+$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
+$form-range-thumb-disabled-bg: $gray-500 !default;
+$form-range-thumb-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+ box-shadow 0.15s ease-in-out !default;
+
+$form-file-button-color: $input-color !default;
+$form-file-button-bg: $input-group-addon-bg !default;
+$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
+
+$form-floating-height: add(3.5rem, $input-height-border) !default;
+$form-floating-padding-x: $input-padding-x !default;
+$form-floating-padding-y: 1rem !default;
+$form-floating-input-padding-t: 1.625rem !default;
+$form-floating-input-padding-b: 0.625rem !default;
+$form-floating-label-opacity: 0.65 !default;
+$form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !default;
+$form-floating-transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !default;
+
+// Form validation
+
+$form-feedback-margin-top: $form-text-margin-top !default;
+$form-feedback-font-size: $form-text-font-size !default;
+$form-feedback-font-style: $form-text-font-style !default;
+$form-feedback-valid-color: $success !default;
+$form-feedback-invalid-color: $danger !default;
+
+$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,
") !default;
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,
") !default;
+
+// scss-docs-start form-validation-states
+$form-validation-states: (
+ 'valid': (
+ 'color': $form-feedback-valid-color,
+ 'icon': $form-feedback-icon-valid,
+ ),
+ 'invalid': (
+ 'color': $form-feedback-invalid-color,
+ 'icon': $form-feedback-icon-invalid,
+ ),
+) !default;
+// scss-docs-end form-validation-states
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+// scss-docs-start zindex-stack
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-modal-backdrop: 1040 !default;
+$zindex-modal: 1050 !default;
+$zindex-popover: 1060 !default;
+$zindex-tooltip: 1070 !default;
+// scss-docs-end zindex-stack
+
+// Navs
+
+$nav-link-padding-y: 0.5rem !default;
+$nav-link-padding-x: 1rem !default;
+$nav-link-font-size: null !default;
+$nav-link-font-weight: null !default;
+$nav-link-color: null !default;
+$nav-link-hover-color: null !default;
+$nav-link-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+ border-color 0.15s ease-in-out !default;
+$nav-link-disabled-color: $gray-600 !default;
+
+$nav-tabs-border-color: $gray-300 !default;
+$nav-tabs-border-width: $border-width !default;
+$nav-tabs-border-radius: $border-radius !default;
+$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: $gray-700 !default;
+$nav-tabs-link-active-bg: $body-bg !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius: $border-radius !default;
+$nav-pills-link-active-color: $component-active-color !default;
+$nav-pills-link-active-bg: $component-active-bg !default;
+
+// Navbar
+
+$navbar-padding-y: $spacer / 2 !default;
+$navbar-padding-x: null !default;
+
+$navbar-nav-link-padding-x: 0.5rem !default;
+
+$navbar-brand-font-size: $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-margin-end: 1rem !default;
+
+$navbar-toggler-padding-y: 0.25rem !default;
+$navbar-toggler-padding-x: 0.75rem !default;
+$navbar-toggler-font-size: $font-size-lg !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
+$navbar-toggler-focus-width: $btn-focus-width !default;
+$navbar-toggler-transition: box-shadow 0.15s ease-in-out !default;
+
+$navbar-dark-color: rgba($white, 0.55) !default;
+$navbar-dark-hover-color: rgba($white, 0.75) !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-disabled-color: rgba($white, 0.25) !default;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,
") !default;
+$navbar-dark-toggler-border-color: rgba($white, 0.1) !default;
+
+$navbar-light-color: rgba($black, 0.55) !default;
+$navbar-light-hover-color: rgba($black, 0.7) !default;
+$navbar-light-active-color: rgba($black, 0.9) !default;
+$navbar-light-disabled-color: rgba($black, 0.3) !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,
") !default;
+$navbar-light-toggler-border-color: rgba($black, 0.1) !default;
+
+$navbar-light-brand-color: $navbar-light-active-color !default;
+$navbar-light-brand-hover-color: $navbar-light-active-color !default;
+$navbar-dark-brand-color: $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-x: 0 !default;
+$dropdown-padding-y: 0.5rem !default;
+$dropdown-spacer: 0.125rem !default;
+$dropdown-font-size: $font-size-base !default;
+$dropdown-color: $body-color !default;
+$dropdown-bg: $white !default;
+$dropdown-border-color: rgba($black, 0.15) !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: $border-width !default;
+$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
+$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-divider-margin-y: $spacer / 2 !default;
+$dropdown-box-shadow: $box-shadow !default;
+
+$dropdown-link-color: $gray-900 !default;
+$dropdown-link-hover-color: shade-color($gray-900, 10%) !default;
+$dropdown-link-hover-bg: $gray-200 !default;
+
+$dropdown-link-active-color: $component-active-color !default;
+$dropdown-link-active-bg: $component-active-bg !default;
+
+$dropdown-link-disabled-color: $gray-500 !default;
+
+$dropdown-item-padding-y: $spacer / 4 !default;
+$dropdown-item-padding-x: $spacer !default;
+
+$dropdown-header-color: $gray-600 !default;
+$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
+
+$dropdown-dark-color: $gray-300 !default;
+$dropdown-dark-bg: $gray-800 !default;
+$dropdown-dark-border-color: $dropdown-border-color !default;
+$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow: null !default;
+$dropdown-dark-link-color: $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color: $white !default;
+$dropdown-dark-link-hover-bg: rgba($white, 0.15) !default;
+$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
+$dropdown-dark-link-disabled-color: $gray-500 !default;
+$dropdown-dark-header-color: $gray-500 !default;
+
+// Pagination
+
+$pagination-padding-y: 0.375rem !default;
+$pagination-padding-x: 0.75rem !default;
+$pagination-padding-y-sm: 0.25rem !default;
+$pagination-padding-x-sm: 0.5rem !default;
+$pagination-padding-y-lg: 0.75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+
+$pagination-color: $link-color !default;
+$pagination-bg: $white !default;
+$pagination-border-width: $border-width !default;
+$pagination-border-radius: $border-radius !default;
+$pagination-margin-start: -$pagination-border-width !default;
+$pagination-border-color: $gray-300 !default;
+
+$pagination-focus-color: $link-hover-color !default;
+$pagination-focus-bg: $gray-200 !default;
+$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $gray-200 !default;
+$pagination-hover-border-color: $gray-300 !default;
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-border-color: $pagination-active-bg !default;
+
+$pagination-disabled-color: $gray-600 !default;
+$pagination-disabled-bg: $white !default;
+$pagination-disabled-border-color: $gray-300 !default;
+
+$pagination-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+
+$pagination-border-radius-sm: $border-radius-sm !default;
+$pagination-border-radius-lg: $border-radius-lg !default;
+
+// Cards
+
+$card-spacer-y: $spacer !default;
+$card-spacer-x: $spacer !default;
+$card-title-spacer-y: $spacer / 2 !default;
+$card-border-width: $border-width !default;
+$card-border-radius: $border-radius !default;
+$card-border-color: rgba($black, 0.125) !default;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
+$card-cap-padding-y: $card-spacer-y / 2 !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-bg: rgba($black, 0.03) !default;
+$card-cap-color: null !default;
+$card-height: null !default;
+$card-color: null !default;
+$card-bg: $white !default;
+
+$card-img-overlay-padding: $spacer !default;
+
+$card-group-margin: $grid-gutter-width / 2 !default;
+
+// Accordion
+$accordion-padding-y: 1rem !default;
+$accordion-padding-x: 1.25rem !default;
+$accordion-color: $body-color !default;
+$accordion-bg: transparent !default;
+$accordion-border-width: $border-width !default;
+$accordion-border-color: rgba($black, 0.125) !default;
+$accordion-border-radius: $border-radius !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-padding-x: $accordion-padding-x !default;
+$accordion-button-color: $accordion-color !default;
+$accordion-button-bg: $accordion-bg !default;
+$accordion-transition: $btn-transition, border-radius 0.15s ease !default;
+$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
+$accordion-button-active-color: shade-color($primary, 10%) !default;
+
+$accordion-button-focus-border-color: $input-focus-border-color !default;
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
+
+$accordion-icon-width: 1.25rem !default;
+$accordion-icon-color: $accordion-color !default;
+$accordion-icon-active-color: $accordion-button-active-color !default;
+$accordion-icon-transition: transform 0.2s ease-in-out !default;
+$accordion-icon-transform: rotate(180deg) !default;
+
+$accordion-button-icon: url("data:image/svg+xml,
") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,
") !default;
+
+// Tooltips
+
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: $white !default;
+$tooltip-bg: $black !default;
+$tooltip-border-radius: $border-radius !default;
+$tooltip-opacity: 0.9 !default;
+$tooltip-padding-y: $spacer / 4 !default;
+$tooltip-padding-x: $spacer / 2 !default;
+$tooltip-margin: 0 !default;
+
+$tooltip-arrow-width: 0.8rem !default;
+$tooltip-arrow-height: 0.4rem !default;
+$tooltip-arrow-color: $tooltip-bg !default;
+
+// Form tooltips must come after regular tooltips
+$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size: $tooltip-font-size !default;
+$form-feedback-tooltip-line-height: null !default;
+$form-feedback-tooltip-opacity: $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+
+// Popovers
+
+$popover-font-size: $font-size-sm !default;
+$popover-bg: $white !default;
+$popover-max-width: 276px !default;
+$popover-border-width: $border-width !default;
+$popover-border-color: rgba($black, 0.2) !default;
+$popover-border-radius: $border-radius-lg !default;
+$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
+$popover-box-shadow: $box-shadow !default;
+
+$popover-header-bg: shade-color($popover-bg, 6%) !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: 0.5rem !default;
+$popover-header-padding-x: $spacer !default;
+
+$popover-body-color: $body-color !default;
+$popover-body-padding-y: $spacer !default;
+$popover-body-padding-x: $spacer !default;
+
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: 0.5rem !default;
+$popover-arrow-color: $popover-bg !default;
+
+$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
+
+// Toasts
+
+$toast-max-width: 350px !default;
+$toast-padding-x: 0.75rem !default;
+$toast-padding-y: 0.5rem !default;
+$toast-font-size: 0.875rem !default;
+$toast-color: null !default;
+$toast-background-color: rgba($white, 0.85) !default;
+$toast-border-width: 1px !default;
+$toast-border-color: rgba(0, 0, 0, 0.1) !default;
+$toast-border-radius: $border-radius !default;
+$toast-box-shadow: $box-shadow !default;
+$toast-spacing: $container-padding-x !default;
+
+$toast-header-color: $gray-600 !default;
+$toast-header-background-color: rgba($white, 0.85) !default;
+$toast-header-border-color: rgba(0, 0, 0, 0.05) !default;
+
+// Badges
+
+$badge-font-size: 0.75em !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-color: $white !default;
+$badge-padding-y: 0.35em !default;
+$badge-padding-x: 0.65em !default;
+$badge-border-radius: $border-radius !default;
+
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding: $spacer !default;
+
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between: 0.5rem !default;
+
+$modal-dialog-margin: 0.5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-color: null !default;
+$modal-content-bg: $white !default;
+$modal-content-border-color: rgba($black, 0.2) !default;
+$modal-content-border-width: $border-width !default;
+$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-inner-border-radius: subtract(
+ $modal-content-border-radius,
+ $modal-content-border-width
+) !default;
+$modal-content-box-shadow-xs: $box-shadow-sm !default;
+$modal-content-box-shadow-sm-up: $box-shadow !default;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-opacity: 0.5 !default;
+$modal-header-border-color: $border-color !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+$modal-header-padding-y: $modal-inner-padding !default;
+$modal-header-padding-x: $modal-inner-padding !default;
+$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
+
+$modal-fade-transform: translate(0, -50px) !default;
+$modal-show-transform: none !default;
+$modal-transition: transform 0.3s ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y: $spacer !default;
+$alert-padding-x: $spacer !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: $border-radius !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: $border-width !default;
+
+$alert-bg-scale: -80% !default;
+$alert-border-scale: -70% !default;
+$alert-color-scale: 40% !default;
+
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+
+// Progress bars
+
+$progress-height: 1rem !default;
+$progress-font-size: $font-size-base * 0.75 !default;
+$progress-bg: $gray-200 !default;
+$progress-border-radius: $border-radius !default;
+$progress-box-shadow: $box-shadow-inset !default;
+$progress-bar-color: $white !default;
+$progress-bar-bg: $primary !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width 0.6s ease !default;
+
+// List group
+
+$list-group-color: null !default;
+$list-group-bg: $white !default;
+$list-group-border-color: rgba($black, 0.125) !default;
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: $border-radius !default;
+
+$list-group-item-padding-y: $spacer / 2 !default;
+$list-group-item-padding-x: $spacer !default;
+$list-group-item-bg-scale: -80% !default;
+$list-group-item-color-scale: 40% !default;
+
+$list-group-hover-bg: $gray-100 !default;
+$list-group-active-color: $component-active-color !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+$list-group-disabled-color: $gray-600 !default;
+$list-group-disabled-bg: $list-group-bg !default;
+
+$list-group-action-color: $gray-700 !default;
+$list-group-action-hover-color: $list-group-action-color !default;
+
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-bg: $gray-200 !default;
+
+// Image thumbnails
+
+$thumbnail-padding: 0.25rem !default;
+$thumbnail-bg: $body-bg !default;
+$thumbnail-border-width: $border-width !default;
+$thumbnail-border-color: $gray-300 !default;
+$thumbnail-border-radius: $border-radius !default;
+$thumbnail-box-shadow: $box-shadow-sm !default;
+
+// Figures
+
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color: $gray-600 !default;
+
+// Breadcrumbs
+
+$breadcrumb-font-size: null !default;
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 0 !default;
+$breadcrumb-item-padding-x: 0.5rem !default;
+$breadcrumb-margin-bottom: 1rem !default;
+$breadcrumb-bg: null !default;
+$breadcrumb-divider-color: $gray-600 !default;
+$breadcrumb-active-color: $gray-600 !default;
+$breadcrumb-divider: quote('/') !default;
+$breadcrumb-divider-flipped: $breadcrumb-divider !default;
+$breadcrumb-border-radius: null !default;
+
+// Carousel
+
+$carousel-control-color: $white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: 0.5 !default;
+$carousel-control-hover-opacity: 0.9 !default;
+$carousel-control-transition: opacity 0.15s ease !default;
+
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-opacity: 0.5 !default;
+$carousel-indicator-active-bg: $white !default;
+$carousel-indicator-active-opacity: 1 !default;
+$carousel-indicator-transition: opacity 0.6s ease !default;
+
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: $white !default;
+$carousel-caption-padding-y: 1.25rem !default;
+$carousel-caption-spacer: 1.25rem !default;
+
+$carousel-control-icon-width: 2rem !default;
+
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,
") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,
") !default;
+
+$carousel-transition-duration: 0.6s !default;
+$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+
+$carousel-dark-indicator-active-bg: $black !default;
+$carousel-dark-caption-color: $black !default;
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
+
+// Spinners
+
+$spinner-width: 2rem !default;
+$spinner-height: $spinner-width !default;
+$spinner-border-width: 0.25em !default;
+$spinner-animation-speed: 0.75s !default;
+
+$spinner-width-sm: 1rem !default;
+$spinner-height-sm: $spinner-width-sm !default;
+$spinner-border-width-sm: 0.2em !default;
+
+// Close
+
+$btn-close-width: 1em !default;
+$btn-close-height: $btn-close-width !default;
+$btn-close-padding-x: 0.25em !default;
+$btn-close-padding-y: $btn-close-padding-x !default;
+$btn-close-color: $black !default;
+$btn-close-bg: url("data:image/svg+xml,
") !default;
+$btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
+$btn-close-opacity: 0.5 !default;
+$btn-close-hover-opacity: 0.75 !default;
+$btn-close-focus-opacity: 1 !default;
+$btn-close-disabled-opacity: 0.25 !default;
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
+
+// Code
+
+$code-font-size: $small-font-size !default;
+$code-color: $pink !default;
+
+$kbd-padding-y: 0.2rem !default;
+$kbd-padding-x: 0.4rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color: $white !default;
+$kbd-bg: $gray-900 !default;
+
+$pre-color: null !default;
diff --git a/src/scss/bootstrap/bootstrap-grid.scss b/src/scss/bootstrap/bootstrap-grid.scss
new file mode 100644
index 0000000..c564e45
--- /dev/null
+++ b/src/scss/bootstrap/bootstrap-grid.scss
@@ -0,0 +1,65 @@
+/*!
+ * Bootstrap Grid v5.0.0-beta2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+$include-column-box-sizing: true !default;
+
+@import 'functions';
+@import 'variables';
+
+@import 'mixins/lists';
+@import 'mixins/breakpoints';
+@import 'mixins/container';
+@import 'mixins/grid';
+@import 'mixins/utilities';
+
+@import 'vendor/rfs';
+
+@import 'containers';
+@import 'grid';
+
+@import 'utilities';
+// Only use the utilities we need
+// stylelint-disable-next-line scss/dollar-variable-default
+$utilities: map-get-multiple(
+ $utilities,
+ (
+ 'display',
+ 'order',
+ 'flex',
+ 'flex-direction',
+ 'flex-grow',
+ 'flex-shrink',
+ 'flex-wrap',
+ 'justify-content',
+ 'align-items',
+ 'align-content',
+ 'align-self',
+ 'margin',
+ 'margin-x',
+ 'margin-y',
+ 'margin-top',
+ 'margin-end',
+ 'margin-bottom',
+ 'margin-start',
+ 'negative-margin',
+ 'negative-margin-x',
+ 'negative-margin-y',
+ 'negative-margin-top',
+ 'negative-margin-end',
+ 'negative-margin-bottom',
+ 'negative-margin-start',
+ 'padding',
+ 'padding-x',
+ 'padding-y',
+ 'padding-top',
+ 'padding-end',
+ 'padding-bottom',
+ 'padding-start'
+ )
+);
+
+@import 'utilities/api';
diff --git a/src/scss/bootstrap/bootstrap-reboot.scss b/src/scss/bootstrap/bootstrap-reboot.scss
new file mode 100644
index 0000000..f3c6af3
--- /dev/null
+++ b/src/scss/bootstrap/bootstrap-reboot.scss
@@ -0,0 +1,15 @@
+/*!
+ * Bootstrap Reboot v5.0.0-beta2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+
+@import 'functions';
+@import 'variables';
+// Prevent the usage of custom properties since we don't add them to `:root` in reboot
+$font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default
+$font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default
+@import 'mixins';
+@import 'reboot';
diff --git a/src/scss/bootstrap/bootstrap-utilities.scss b/src/scss/bootstrap/bootstrap-utilities.scss
new file mode 100644
index 0000000..cb360e5
--- /dev/null
+++ b/src/scss/bootstrap/bootstrap-utilities.scss
@@ -0,0 +1,18 @@
+/*!
+ * Bootstrap Utilities v5.0.0-beta2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+// Configuration
+@import 'functions';
+@import 'variables';
+@import 'mixins';
+@import 'utilities';
+
+// Helpers
+@import 'helpers';
+
+// Utilities
+@import 'utilities/api';
diff --git a/src/scss/bootstrap/bootstrap.scss b/src/scss/bootstrap/bootstrap.scss
new file mode 100644
index 0000000..3a98bbb
--- /dev/null
+++ b/src/scss/bootstrap/bootstrap.scss
@@ -0,0 +1,51 @@
+/*!
+ * Bootstrap v5.0.0-beta2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+// scss-docs-start import-stack
+// Configuration
+@import 'functions';
+@import 'variables';
+@import 'mixins';
+@import 'utilities';
+
+// Layout & components
+@import 'root';
+@import 'reboot';
+@import 'type';
+@import 'images';
+@import 'containers';
+@import 'grid';
+@import 'tables';
+@import 'forms';
+@import 'buttons';
+@import 'transitions';
+@import 'dropdown';
+@import 'button-group';
+@import 'nav';
+@import 'navbar';
+@import 'card';
+@import 'accordion';
+@import 'breadcrumb';
+@import 'pagination';
+@import 'badge';
+@import 'alert';
+@import 'progress';
+@import 'list-group';
+@import 'close';
+@import 'toasts';
+@import 'modal';
+@import 'tooltip';
+@import 'popover';
+@import 'carousel';
+@import 'spinners';
+
+// Helpers
+@import 'helpers';
+
+// Utilities
+@import 'utilities/api';
+// scss-docs-end import-stack
diff --git a/src/scss/bootstrap/forms/_floating-labels.scss b/src/scss/bootstrap/forms/_floating-labels.scss
new file mode 100644
index 0000000..8b2e2b8
--- /dev/null
+++ b/src/scss/bootstrap/forms/_floating-labels.scss
@@ -0,0 +1,61 @@
+.form-floating {
+ position: relative;
+
+ > .form-control,
+ > .form-select {
+ height: $form-floating-height;
+ padding: $form-floating-padding-y $form-floating-padding-x;
+ }
+
+ > label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%; // allow textareas
+ padding: $form-floating-padding-y $form-floating-padding-x;
+ pointer-events: none;
+ border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
+ transform-origin: 0 0;
+ @include transition($form-floating-transition);
+ }
+
+ // stylelint-disable no-duplicate-selectors
+ > .form-control {
+ &::placeholder {
+ color: transparent;
+ }
+
+ &:focus,
+ &:not(:placeholder-shown) {
+ padding-top: $form-floating-input-padding-t;
+ padding-bottom: $form-floating-input-padding-b;
+ }
+ // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+ &:-webkit-autofill {
+ padding-top: $form-floating-input-padding-t;
+ padding-bottom: $form-floating-input-padding-b;
+ }
+ }
+
+ > .form-select {
+ padding-top: $form-floating-input-padding-t;
+ padding-bottom: $form-floating-input-padding-b;
+ }
+
+ > .form-control:focus,
+ > .form-control:not(:placeholder-shown),
+ > .form-select {
+ ~ label {
+ opacity: $form-floating-label-opacity;
+ transform: $form-floating-label-transform;
+ }
+ }
+ // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+ > .form-control:-webkit-autofill {
+ ~ label {
+ opacity: $form-floating-label-opacity;
+ transform: $form-floating-label-transform;
+ }
+ }
+ // stylelint-enable no-duplicate-selectors
+}
diff --git a/src/scss/bootstrap/forms/_form-check.scss b/src/scss/bootstrap/forms/_form-check.scss
new file mode 100644
index 0000000..b3aa61e
--- /dev/null
+++ b/src/scss/bootstrap/forms/_form-check.scss
@@ -0,0 +1,156 @@
+//
+// Check/radio
+//
+
+.form-check {
+ display: block;
+ min-height: $form-check-min-height;
+ padding-left: $form-check-padding-start;
+ margin-bottom: $form-check-margin-bottom;
+
+ .form-check-input {
+ float: left;
+ margin-left: $form-check-padding-start * -1;
+ }
+}
+
+.form-check-input {
+ width: $form-check-input-width;
+ height: $form-check-input-width;
+ margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
+ vertical-align: top;
+ background-color: $form-check-input-bg;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ border: $form-check-input-border;
+ appearance: none;
+ color-adjust: exact; // Keep themed appearance for print
+ @include transition($form-check-transition);
+
+ &[type='checkbox'] {
+ @include border-radius($form-check-input-border-radius);
+ }
+
+ &[type='radio'] {
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: $form-check-radio-border-radius;
+ }
+
+ &:active {
+ filter: $form-check-input-active-filter;
+ }
+
+ &:focus {
+ border-color: $form-check-input-focus-border;
+ outline: 0;
+ box-shadow: $form-check-input-focus-box-shadow;
+ }
+
+ &:checked {
+ background-color: $form-check-input-checked-bg-color;
+ border-color: $form-check-input-checked-border-color;
+
+ &[type='checkbox'] {
+ @if $enable-gradients {
+ background-image: escape-svg($form-check-input-checked-bg-image),
+ var(--#{$variable-prefix}gradient);
+ } @else {
+ background-image: escape-svg($form-check-input-checked-bg-image);
+ }
+ }
+
+ &[type='radio'] {
+ @if $enable-gradients {
+ background-image: escape-svg($form-check-radio-checked-bg-image),
+ var(--#{$variable-prefix}gradient);
+ } @else {
+ background-image: escape-svg($form-check-radio-checked-bg-image);
+ }
+ }
+ }
+
+ &[type='checkbox']:indeterminate {
+ background-color: $form-check-input-indeterminate-bg-color;
+ border-color: $form-check-input-indeterminate-border-color;
+
+ @if $enable-gradients {
+ background-image: escape-svg($form-check-input-indeterminate-bg-image),
+ var(--#{$variable-prefix}gradient);
+ } @else {
+ background-image: escape-svg($form-check-input-indeterminate-bg-image);
+ }
+ }
+
+ &:disabled {
+ pointer-events: none;
+ filter: none;
+ opacity: $form-check-input-disabled-opacity;
+ }
+
+ // Use disabled attribute in addition of :disabled pseudo-class
+ // See: https://github.com/twbs/bootstrap/issues/28247
+ &[disabled],
+ &:disabled {
+ ~ .form-check-label {
+ opacity: $form-check-label-disabled-opacity;
+ }
+ }
+}
+
+.form-check-label {
+ color: $form-check-label-color;
+ cursor: $form-check-label-cursor;
+}
+
+//
+// Switch
+//
+
+.form-switch {
+ padding-left: $form-switch-padding-start;
+
+ .form-check-input {
+ width: $form-switch-width;
+ margin-left: $form-switch-padding-start * -1;
+ background-image: escape-svg($form-switch-bg-image);
+ background-position: left center;
+ @include border-radius($form-switch-border-radius);
+ @include transition($form-switch-transition);
+
+ &:focus {
+ background-image: escape-svg($form-switch-focus-bg-image);
+ }
+
+ &:checked {
+ background-position: $form-switch-checked-bg-position;
+
+ @if $enable-gradients {
+ background-image: escape-svg($form-switch-checked-bg-image),
+ var(--#{$variable-prefix}gradient);
+ } @else {
+ background-image: escape-svg($form-switch-checked-bg-image);
+ }
+ }
+ }
+}
+
+.form-check-inline {
+ display: inline-block;
+ margin-right: $form-check-inline-margin-end;
+}
+
+.btn-check {
+ position: absolute;
+ clip: rect(0, 0, 0, 0);
+ pointer-events: none;
+
+ &[disabled],
+ &:disabled {
+ + .btn {
+ pointer-events: none;
+ filter: none;
+ opacity: $form-check-btn-check-disabled-opacity;
+ }
+ }
+}
diff --git a/src/scss/bootstrap/forms/_form-control.scss b/src/scss/bootstrap/forms/_form-control.scss
new file mode 100644
index 0000000..fd613e3
--- /dev/null
+++ b/src/scss/bootstrap/forms/_form-control.scss
@@ -0,0 +1,223 @@
+//
+// General form controls (plus a few specific high-level interventions)
+//
+
+.form-control {
+ display: block;
+ width: 100%;
+ padding: $input-padding-y $input-padding-x;
+ font-family: $input-font-family;
+ @include font-size($input-font-size);
+ font-weight: $input-font-weight;
+ line-height: $input-line-height;
+ color: $input-color;
+ background-color: $input-bg;
+ background-clip: padding-box;
+ border: $input-border-width solid $input-border-color;
+ appearance: none; // Fix appearance for date inputs in Safari
+
+ // Note: This has no effect on
s in some browsers, due to the limited stylability of ``s in CSS.
+ @include border-radius($input-border-radius, 0);
+
+ @include box-shadow($input-box-shadow);
+ @include transition($input-transition);
+
+ &[type='file'] {
+ overflow: hidden; // prevent pseudo element button overlap
+
+ &:not(:disabled):not([readonly]) {
+ cursor: pointer;
+ }
+ }
+
+ // Customize the `:focus` state to imitate native WebKit styles.
+ &:focus {
+ color: $input-focus-color;
+ background-color: $input-focus-bg;
+ border-color: $input-focus-border-color;
+ outline: 0;
+ @if $enable-shadows {
+ @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $input-focus-box-shadow;
+ }
+ }
+
+ // Add some height to date inputs on iOS
+ // https://github.com/twbs/bootstrap/issues/23307
+ // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
+ &::-webkit-date-and-time-value {
+ // Multiply line-height by 1em if it has no unit
+ height: if(unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
+ }
+
+ // Placeholder
+ &::placeholder {
+ color: $input-placeholder-color;
+ // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+ opacity: 1;
+ }
+
+ // Disabled and read-only inputs
+ //
+ // HTML5 says that controls under a fieldset > legend:first-child won't be
+ // disabled if the fieldset is disabled. Due to implementation difficulty, we
+ // don't honor that edge case; we style them as disabled anyway.
+ &:disabled,
+ &[readonly] {
+ background-color: $input-disabled-bg;
+ border-color: $input-disabled-border-color;
+ // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+ opacity: 1;
+ }
+
+ // File input buttons theming
+ // stylelint-disable-next-line selector-pseudo-element-no-unknown
+ &::file-selector-button {
+ padding: $input-padding-y $input-padding-x;
+ margin: (-$input-padding-y) (-$input-padding-x);
+ margin-inline-end: $input-padding-x;
+ color: $form-file-button-color;
+ @include gradient-bg($form-file-button-bg);
+ pointer-events: none;
+ border-color: inherit;
+ border-style: solid;
+ border-width: 0;
+ border-inline-end-width: $input-border-width;
+ border-radius: 0; // stylelint-disable-line property-disallowed-list
+ @include transition($btn-transition);
+ }
+
+ // stylelint-disable-next-line selector-pseudo-element-no-unknown
+ &:hover:not(:disabled):not([readonly])::file-selector-button {
+ background-color: $form-file-button-hover-bg;
+ }
+
+ &::-webkit-file-upload-button {
+ padding: $input-padding-y $input-padding-x;
+ margin: (-$input-padding-y) (-$input-padding-x);
+ margin-inline-end: $input-padding-x;
+ color: $form-file-button-color;
+ @include gradient-bg($form-file-button-bg);
+ pointer-events: none;
+ border-color: inherit;
+ border-style: solid;
+ border-width: 0;
+ border-inline-end-width: $input-border-width;
+ border-radius: 0; // stylelint-disable-line property-disallowed-list
+ @include transition($btn-transition);
+ }
+
+ &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
+ background-color: $form-file-button-hover-bg;
+ }
+}
+
+// Readonly controls as plain text
+//
+// Apply class to a readonly input to make it appear like regular plain
+// text (without any border, background color, focus indicator)
+
+.form-control-plaintext {
+ display: block;
+ width: 100%;
+ padding: $input-padding-y 0;
+ margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+ line-height: $input-line-height;
+ color: $input-plaintext-color;
+ background-color: transparent;
+ border: solid transparent;
+ border-width: $input-border-width 0;
+
+ &.form-control-sm,
+ &.form-control-lg {
+ padding-right: 0;
+ padding-left: 0;
+ }
+}
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// Repeated in `_input_group.scss` to avoid Sass extend issues.
+
+.form-control-sm {
+ min-height: $input-height-sm;
+ padding: $input-padding-y-sm $input-padding-x-sm;
+ @include font-size($input-font-size-sm);
+ @include border-radius($input-border-radius-sm);
+
+ // stylelint-disable-next-line selector-pseudo-element-no-unknown
+ &::file-selector-button {
+ padding: $input-padding-y-sm $input-padding-x-sm;
+ margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
+ margin-inline-end: $input-padding-x-sm;
+ }
+
+ &::-webkit-file-upload-button {
+ padding: $input-padding-y-sm $input-padding-x-sm;
+ margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
+ margin-inline-end: $input-padding-x-sm;
+ }
+}
+
+.form-control-lg {
+ min-height: $input-height-lg;
+ padding: $input-padding-y-lg $input-padding-x-lg;
+ @include font-size($input-font-size-lg);
+ @include border-radius($input-border-radius-lg);
+
+ // stylelint-disable-next-line selector-pseudo-element-no-unknown
+ &::file-selector-button {
+ padding: $input-padding-y-lg $input-padding-x-lg;
+ margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
+ margin-inline-end: $input-padding-x-lg;
+ }
+
+ &::-webkit-file-upload-button {
+ padding: $input-padding-y-lg $input-padding-x-lg;
+ margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
+ margin-inline-end: $input-padding-x-lg;
+ }
+}
+
+// Make sure textareas don't shrink too much when resized
+// https://github.com/twbs/bootstrap/pull/29124
+// stylelint-disable selector-no-qualifying-type
+textarea {
+ &.form-control {
+ min-height: $input-height;
+ }
+
+ &.form-control-sm {
+ min-height: $input-height-sm;
+ }
+
+ &.form-control-lg {
+ min-height: $input-height-lg;
+ }
+}
+// stylelint-enable selector-no-qualifying-type
+
+.form-control-color {
+ max-width: 3rem;
+ height: auto; // Override fixed browser height
+ padding: $input-padding-y;
+
+ &:not(:disabled):not([readonly]) {
+ cursor: pointer;
+ }
+
+ &::-moz-color-swatch {
+ height: if(unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
+ @include border-radius($input-border-radius);
+ }
+
+ &::-webkit-color-swatch {
+ height: if(unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
+ @include border-radius($input-border-radius);
+ }
+}
diff --git a/src/scss/bootstrap/forms/_form-range.scss b/src/scss/bootstrap/forms/_form-range.scss
new file mode 100644
index 0000000..fd73e0e
--- /dev/null
+++ b/src/scss/bootstrap/forms/_form-range.scss
@@ -0,0 +1,95 @@
+// Range
+//
+// Style range inputs the same across browsers. Vendor-specific rules for pseudo
+// elements cannot be mixed. As such, there are no shared styles for focus or
+// active states on prefixed selectors.
+
+.form-range {
+ width: 100%;
+ height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
+ padding: 0; // Need to reset padding
+ background-color: transparent;
+ appearance: none;
+
+ &:focus {
+ outline: 0;
+
+ // Pseudo-elements must be split across multiple rulesets to have an effect.
+ // No box-shadow() mixin for focus accessibility.
+ &::-webkit-slider-thumb {
+ box-shadow: $form-range-thumb-focus-box-shadow;
+ }
+ &::-moz-range-thumb {
+ box-shadow: $form-range-thumb-focus-box-shadow;
+ }
+ }
+
+ &::-moz-focus-outer {
+ border: 0;
+ }
+
+ &::-webkit-slider-thumb {
+ width: $form-range-thumb-width;
+ height: $form-range-thumb-height;
+ margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific
+ @include gradient-bg($form-range-thumb-bg);
+ border: $form-range-thumb-border;
+ @include border-radius($form-range-thumb-border-radius);
+ @include box-shadow($form-range-thumb-box-shadow);
+ @include transition($form-range-thumb-transition);
+ appearance: none;
+
+ &:active {
+ @include gradient-bg($form-range-thumb-active-bg);
+ }
+ }
+
+ &::-webkit-slider-runnable-track {
+ width: $form-range-track-width;
+ height: $form-range-track-height;
+ color: transparent; // Why?
+ cursor: $form-range-track-cursor;
+ background-color: $form-range-track-bg;
+ border-color: transparent;
+ @include border-radius($form-range-track-border-radius);
+ @include box-shadow($form-range-track-box-shadow);
+ }
+
+ &::-moz-range-thumb {
+ width: $form-range-thumb-width;
+ height: $form-range-thumb-height;
+ @include gradient-bg($form-range-thumb-bg);
+ border: $form-range-thumb-border;
+ @include border-radius($form-range-thumb-border-radius);
+ @include box-shadow($form-range-thumb-box-shadow);
+ @include transition($form-range-thumb-transition);
+ appearance: none;
+
+ &:active {
+ @include gradient-bg($form-range-thumb-active-bg);
+ }
+ }
+
+ &::-moz-range-track {
+ width: $form-range-track-width;
+ height: $form-range-track-height;
+ color: transparent;
+ cursor: $form-range-track-cursor;
+ background-color: $form-range-track-bg;
+ border-color: transparent; // Firefox specific?
+ @include border-radius($form-range-track-border-radius);
+ @include box-shadow($form-range-track-box-shadow);
+ }
+
+ &:disabled {
+ pointer-events: none;
+
+ &::-webkit-slider-thumb {
+ background-color: $form-range-thumb-disabled-bg;
+ }
+
+ &::-moz-range-thumb {
+ background-color: $form-range-thumb-disabled-bg;
+ }
+ }
+}
diff --git a/src/scss/bootstrap/forms/_form-select.scss b/src/scss/bootstrap/forms/_form-select.scss
new file mode 100644
index 0000000..4b1d07d
--- /dev/null
+++ b/src/scss/bootstrap/forms/_form-select.scss
@@ -0,0 +1,68 @@
+// Select
+//
+// Replaces the browser default select with a custom one, mostly pulled from
+// https://primer.github.io/.
+
+.form-select {
+ display: block;
+ width: 100%;
+ padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y
+ $form-select-padding-x;
+ font-family: $form-select-font-family;
+ @include font-size($form-select-font-size);
+ font-weight: $form-select-font-weight;
+ line-height: $form-select-line-height;
+ color: $form-select-color;
+ background-color: $form-select-bg;
+ background-image: escape-svg($form-select-indicator);
+ background-repeat: no-repeat;
+ background-position: $form-select-bg-position;
+ background-size: $form-select-bg-size;
+ border: $form-select-border-width solid $form-select-border-color;
+ @include border-radius($form-select-border-radius, 0);
+ @include box-shadow($form-select-box-shadow);
+ appearance: none;
+
+ &:focus {
+ border-color: $form-select-focus-border-color;
+ outline: 0;
+ @if $enable-shadows {
+ @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $form-select-focus-box-shadow;
+ }
+ }
+
+ &[multiple],
+ &[size]:not([size='1']) {
+ padding-right: $form-select-padding-x;
+ background-image: none;
+ }
+
+ &:disabled {
+ color: $form-select-disabled-color;
+ background-color: $form-select-disabled-bg;
+ border-color: $form-select-disabled-border-color;
+ }
+
+ // Remove outline from select box in FF
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 $form-select-color;
+ }
+}
+
+.form-select-sm {
+ padding-top: $form-select-padding-y-sm;
+ padding-bottom: $form-select-padding-y-sm;
+ padding-left: $form-select-padding-x-sm;
+ @include font-size($form-select-font-size-sm);
+}
+
+.form-select-lg {
+ padding-top: $form-select-padding-y-lg;
+ padding-bottom: $form-select-padding-y-lg;
+ padding-left: $form-select-padding-x-lg;
+ @include font-size($form-select-font-size-lg);
+}
diff --git a/src/scss/bootstrap/forms/_form-text.scss b/src/scss/bootstrap/forms/_form-text.scss
new file mode 100644
index 0000000..f080d1a
--- /dev/null
+++ b/src/scss/bootstrap/forms/_form-text.scss
@@ -0,0 +1,11 @@
+//
+// Form text
+//
+
+.form-text {
+ margin-top: $form-text-margin-top;
+ @include font-size($form-text-font-size);
+ font-style: $form-text-font-style;
+ font-weight: $form-text-font-weight;
+ color: $form-text-color;
+}
diff --git a/src/scss/bootstrap/forms/_input-group.scss b/src/scss/bootstrap/forms/_input-group.scss
new file mode 100644
index 0000000..f9bd588
--- /dev/null
+++ b/src/scss/bootstrap/forms/_input-group.scss
@@ -0,0 +1,124 @@
+//
+// Base styles
+//
+
+.input-group {
+ position: relative;
+ display: flex;
+ flex-wrap: wrap; // For form validation feedback
+ align-items: stretch;
+ width: 100%;
+
+ > .form-control,
+ > .form-select {
+ position: relative; // For focus state's z-index
+ flex: 1 1 auto;
+ width: 1%;
+ min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+ }
+
+ // Bring the "active" form control to the top of surrounding elements
+ > .form-control:focus,
+ > .form-select:focus {
+ z-index: 3;
+ }
+
+ // Ensure buttons are always above inputs for more visually pleasing borders.
+ // This isn't needed for `.input-group-text` since it shares the same border-color
+ // as our inputs.
+ .btn {
+ position: relative;
+ z-index: 2;
+
+ &:focus {
+ z-index: 3;
+ }
+ }
+}
+
+// Textual addons
+//
+// Serves as a catch-all element for any text or radio/checkbox input you wish
+// to prepend or append to an input.
+
+.input-group-text {
+ display: flex;
+ align-items: center;
+ padding: $input-group-addon-padding-y $input-group-addon-padding-x;
+ @include font-size($input-font-size); // Match inputs
+ font-weight: $input-group-addon-font-weight;
+ line-height: $input-line-height;
+ color: $input-group-addon-color;
+ text-align: center;
+ white-space: nowrap;
+ background-color: $input-group-addon-bg;
+ border: $input-border-width solid $input-group-addon-border-color;
+ @include border-radius($input-border-radius);
+}
+
+// Sizing
+//
+// Remix the default form control sizing classes into new ones for easier
+// manipulation.
+
+.input-group-lg > .form-control,
+.input-group-lg > .form-select,
+.input-group-lg > .input-group-text,
+.input-group-lg > .btn {
+ padding: $input-padding-y-lg $input-padding-x-lg;
+ @include font-size($input-font-size-lg);
+ @include border-radius($input-border-radius-lg);
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .form-select,
+.input-group-sm > .input-group-text,
+.input-group-sm > .btn {
+ padding: $input-padding-y-sm $input-padding-x-sm;
+ @include font-size($input-font-size-sm);
+ @include border-radius($input-border-radius-sm);
+}
+
+.input-group-lg > .form-select,
+.input-group-sm > .form-select {
+ padding-right: $form-select-padding-x + $form-select-indicator-padding;
+}
+
+// Rounded corners
+//
+// These rulesets must come after the sizing ones to properly override sm and lg
+// border-radius values when extending. They're more specific than we'd like
+// with the `.input-group >` part, but without it, we cannot override the sizing.
+
+// stylelint-disable-next-line no-duplicate-selectors
+.input-group {
+ &:not(.has-validation) {
+ > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
+ > .dropdown-toggle:nth-last-child(n + 3) {
+ @include border-end-radius(0);
+ }
+ }
+
+ &.has-validation {
+ > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
+ > .dropdown-toggle:nth-last-child(n + 4) {
+ @include border-end-radius(0);
+ }
+ }
+
+ $validation-messages: '';
+ @each $state in map-keys($form-validation-states) {
+ $validation-messages: $validation-messages +
+ ':not(.' +
+ unquote($state) +
+ '-tooltip)' +
+ ':not(.' +
+ unquote($state) +
+ '-feedback)';
+ }
+
+ > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+ margin-left: -$input-border-width;
+ @include border-start-radius(0);
+ }
+}
diff --git a/src/scss/bootstrap/forms/_labels.scss b/src/scss/bootstrap/forms/_labels.scss
new file mode 100644
index 0000000..39ecafc
--- /dev/null
+++ b/src/scss/bootstrap/forms/_labels.scss
@@ -0,0 +1,36 @@
+//
+// Labels
+//
+
+.form-label {
+ margin-bottom: $form-label-margin-bottom;
+ @include font-size($form-label-font-size);
+ font-style: $form-label-font-style;
+ font-weight: $form-label-font-weight;
+ color: $form-label-color;
+}
+
+// For use with horizontal and inline forms, when you need the label (or legend)
+// text to align with the form controls.
+.col-form-label {
+ padding-top: add($input-padding-y, $input-border-width);
+ padding-bottom: add($input-padding-y, $input-border-width);
+ margin-bottom: 0; // Override the `` default
+ @include font-size(inherit); // Override the `` default
+ font-style: $form-label-font-style;
+ font-weight: $form-label-font-weight;
+ line-height: $input-line-height;
+ color: $form-label-color;
+}
+
+.col-form-label-lg {
+ padding-top: add($input-padding-y-lg, $input-border-width);
+ padding-bottom: add($input-padding-y-lg, $input-border-width);
+ @include font-size($input-font-size-lg);
+}
+
+.col-form-label-sm {
+ padding-top: add($input-padding-y-sm, $input-border-width);
+ padding-bottom: add($input-padding-y-sm, $input-border-width);
+ @include font-size($input-font-size-sm);
+}
diff --git a/src/scss/bootstrap/forms/_validation.scss b/src/scss/bootstrap/forms/_validation.scss
new file mode 100644
index 0000000..c48123a
--- /dev/null
+++ b/src/scss/bootstrap/forms/_validation.scss
@@ -0,0 +1,12 @@
+// Form validation
+//
+// Provide feedback to users when form field values are valid or invalid. Works
+// primarily for client-side validation via scoped `:invalid` and `:valid`
+// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
+// server-side validation.
+
+// scss-docs-start form-validation-states-loop
+@each $state, $data in $form-validation-states {
+ @include form-validation-state($state, $data...);
+}
+// scss-docs-end form-validation-states-loop
diff --git a/src/scss/bootstrap/helpers/_clearfix.scss b/src/scss/bootstrap/helpers/_clearfix.scss
new file mode 100644
index 0000000..e92522a
--- /dev/null
+++ b/src/scss/bootstrap/helpers/_clearfix.scss
@@ -0,0 +1,3 @@
+.clearfix {
+ @include clearfix();
+}
diff --git a/src/scss/bootstrap/helpers/_colored-links.scss b/src/scss/bootstrap/helpers/_colored-links.scss
new file mode 100644
index 0000000..d655615
--- /dev/null
+++ b/src/scss/bootstrap/helpers/_colored-links.scss
@@ -0,0 +1,16 @@
+@each $color, $value in $theme-colors {
+ .link-#{$color} {
+ color: $value;
+
+ @if $link-shade-percentage != 0 {
+ &:hover,
+ &:focus {
+ color: if(
+ color-contrast($value) == $color-contrast-light,
+ shade-color($value, $link-shade-percentage),
+ tint-color($value, $link-shade-percentage)
+ );
+ }
+ }
+ }
+}
diff --git a/src/scss/bootstrap/helpers/_position.scss b/src/scss/bootstrap/helpers/_position.scss
new file mode 100644
index 0000000..31851eb
--- /dev/null
+++ b/src/scss/bootstrap/helpers/_position.scss
@@ -0,0 +1,30 @@
+// Shorthand
+
+.fixed-top {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: $zindex-fixed;
+}
+
+.fixed-bottom {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: $zindex-fixed;
+}
+
+// Responsive sticky top
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .sticky#{$infix}-top {
+ position: sticky;
+ top: 0;
+ z-index: $zindex-sticky;
+ }
+ }
+}
diff --git a/src/scss/bootstrap/helpers/_ratio.scss b/src/scss/bootstrap/helpers/_ratio.scss
new file mode 100644
index 0000000..6a2dfd2
--- /dev/null
+++ b/src/scss/bootstrap/helpers/_ratio.scss
@@ -0,0 +1,26 @@
+// Credit: Nicolas Gallagher and SUIT CSS.
+
+.ratio {
+ position: relative;
+ width: 100%;
+
+ &::before {
+ display: block;
+ padding-top: var(--#{$variable-prefix}aspect-ratio);
+ content: '';
+ }
+
+ > * {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+@each $key, $ratio in $aspect-ratios {
+ .ratio-#{$key} {
+ --#{$variable-prefix}aspect-ratio: #{$ratio};
+ }
+}
diff --git a/src/scss/bootstrap/helpers/_stretched-link.scss b/src/scss/bootstrap/helpers/_stretched-link.scss
new file mode 100644
index 0000000..71a1c75
--- /dev/null
+++ b/src/scss/bootstrap/helpers/_stretched-link.scss
@@ -0,0 +1,15 @@
+//
+// Stretched link
+//
+
+.stretched-link {
+ &::#{$stretched-link-pseudo-element} {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: $stretched-link-z-index;
+ content: "";
+ }
+}
diff --git a/src/scss/bootstrap/helpers/_text-truncation.scss b/src/scss/bootstrap/helpers/_text-truncation.scss
new file mode 100644
index 0000000..6421dac
--- /dev/null
+++ b/src/scss/bootstrap/helpers/_text-truncation.scss
@@ -0,0 +1,7 @@
+//
+// Text truncation
+//
+
+.text-truncate {
+ @include text-truncate();
+}
diff --git a/src/scss/bootstrap/helpers/_visually-hidden.scss b/src/scss/bootstrap/helpers/_visually-hidden.scss
new file mode 100644
index 0000000..4760ff0
--- /dev/null
+++ b/src/scss/bootstrap/helpers/_visually-hidden.scss
@@ -0,0 +1,8 @@
+//
+// Visually hidden
+//
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+ @include visually-hidden();
+}
diff --git a/src/scss/bootstrap/mixins/_alert.scss b/src/scss/bootstrap/mixins/_alert.scss
new file mode 100644
index 0000000..99ebbc3
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_alert.scss
@@ -0,0 +1,9 @@
+@mixin alert-variant($background, $border, $color) {
+ color: $color;
+ @include gradient-bg($background);
+ border-color: $border;
+
+ .alert-link {
+ color: shade-color($color, 20%);
+ }
+}
diff --git a/src/scss/bootstrap/mixins/_border-radius.scss b/src/scss/bootstrap/mixins/_border-radius.scss
new file mode 100644
index 0000000..071cdca
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_border-radius.scss
@@ -0,0 +1,75 @@
+// stylelint-disable property-disallowed-list
+// Single side border-radius
+
+// Helper function to replace negative values with 0
+@function valid-radius($radius) {
+ $return: ();
+ @each $value in $radius {
+ @if type-of($value) == number {
+ $return: append($return, max($value, 0));
+ } @else {
+ $return: append($return, $value);
+ }
+ }
+ @return $return;
+}
+
+@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
+ @if $enable-rounded {
+ border-radius: valid-radius($radius);
+ } @else if $fallback-border-radius != false {
+ border-radius: $fallback-border-radius;
+ }
+}
+
+@mixin border-top-radius($radius: $border-radius) {
+ @if $enable-rounded {
+ border-top-left-radius: valid-radius($radius);
+ border-top-right-radius: valid-radius($radius);
+ }
+}
+
+@mixin border-end-radius($radius: $border-radius) {
+ @if $enable-rounded {
+ border-top-right-radius: valid-radius($radius);
+ border-bottom-right-radius: valid-radius($radius);
+ }
+}
+
+@mixin border-bottom-radius($radius: $border-radius) {
+ @if $enable-rounded {
+ border-bottom-right-radius: valid-radius($radius);
+ border-bottom-left-radius: valid-radius($radius);
+ }
+}
+
+@mixin border-start-radius($radius: $border-radius) {
+ @if $enable-rounded {
+ border-top-left-radius: valid-radius($radius);
+ border-bottom-left-radius: valid-radius($radius);
+ }
+}
+
+@mixin border-top-start-radius($radius: $border-radius) {
+ @if $enable-rounded {
+ border-top-left-radius: valid-radius($radius);
+ }
+}
+
+@mixin border-top-end-radius($radius: $border-radius) {
+ @if $enable-rounded {
+ border-top-right-radius: valid-radius($radius);
+ }
+}
+
+@mixin border-bottom-end-radius($radius: $border-radius) {
+ @if $enable-rounded {
+ border-bottom-right-radius: valid-radius($radius);
+ }
+}
+
+@mixin border-bottom-start-radius($radius: $border-radius) {
+ @if $enable-rounded {
+ border-bottom-left-radius: valid-radius($radius);
+ }
+}
diff --git a/src/scss/bootstrap/mixins/_box-shadow.scss b/src/scss/bootstrap/mixins/_box-shadow.scss
new file mode 100644
index 0000000..353c133
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_box-shadow.scss
@@ -0,0 +1,18 @@
+@mixin box-shadow($shadow...) {
+ @if $enable-shadows {
+ $result: ();
+
+ @each $value in $shadow {
+ @if $value != null {
+ $result: append($result, $value, 'comma');
+ }
+ @if $value == none and length($shadow) > 1 {
+ @warn "The keyword 'none' must be used as a single argument.";
+ }
+ }
+
+ @if (length($result) > 0) {
+ box-shadow: $result;
+ }
+ }
+}
diff --git a/src/scss/bootstrap/mixins/_breakpoints.scss b/src/scss/bootstrap/mixins/_breakpoints.scss
new file mode 100644
index 0000000..3301fa9
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_breakpoints.scss
@@ -0,0 +1,131 @@
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+// >> breakpoint-next(sm)
+// md
+// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// md
+// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+// md
+@function breakpoint-next(
+ $name,
+ $breakpoints: $grid-breakpoints,
+ $breakpoint-names: map-keys($breakpoints)
+) {
+ $n: index($breakpoint-names, $name);
+ @if not $n {
+ @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+ }
+ @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// 576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+ $min: map-get($breakpoints, $name);
+ @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width.
+// The maximum value is reduced by 0.02px to work around the limitations of
+// `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// 767.98px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+ $max: map-get($breakpoints, $name);
+ @return if($max and $max > 0, $max - 0.02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+// Useful for making responsive utilities.
+//
+// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// "" (Returns a blank string)
+// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+ @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+ $min: breakpoint-min($name, $breakpoints);
+ @if $min {
+ @media (min-width: $min) {
+ @content;
+ }
+ } @else {
+ @content;
+ }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+ $max: breakpoint-max($name, $breakpoints);
+ @if $max {
+ @media (max-width: $max) {
+ @content;
+ }
+ } @else {
+ @content;
+ }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+ $min: breakpoint-min($lower, $breakpoints);
+ $max: breakpoint-max($upper, $breakpoints);
+
+ @if $min != null and $max != null {
+ @media (min-width: $min) and (max-width: $max) {
+ @content;
+ }
+ } @else if $max == null {
+ @include media-breakpoint-up($lower, $breakpoints) {
+ @content;
+ }
+ } @else if $min == null {
+ @include media-breakpoint-down($upper, $breakpoints) {
+ @content;
+ }
+ }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+ $min: breakpoint-min($name, $breakpoints);
+ $next: breakpoint-next($name, $breakpoints);
+ $max: breakpoint-max($next);
+
+ @if $min != null and $max != null {
+ @media (min-width: $min) and (max-width: $max) {
+ @content;
+ }
+ } @else if $max == null {
+ @include media-breakpoint-up($name, $breakpoints) {
+ @content;
+ }
+ } @else if $min == null {
+ @include media-breakpoint-down($next, $breakpoints) {
+ @content;
+ }
+ }
+}
diff --git a/src/scss/bootstrap/mixins/_buttons.scss b/src/scss/bootstrap/mixins/_buttons.scss
new file mode 100644
index 0000000..c6ec259
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_buttons.scss
@@ -0,0 +1,154 @@
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@mixin button-variant(
+ $background,
+ $border,
+ $color: color-contrast($background),
+ $hover-background:
+ if(
+ $color == $color-contrast-light,
+ shade-color($background, $btn-hover-bg-shade-amount),
+ tint-color($background, $btn-hover-bg-tint-amount)
+ ),
+ $hover-border:
+ if(
+ $color == $color-contrast-light,
+ shade-color($border, $btn-hover-border-shade-amount),
+ tint-color($border, $btn-hover-border-tint-amount)
+ ),
+ $hover-color: color-contrast($hover-background),
+ $active-background:
+ if(
+ $color == $color-contrast-light,
+ shade-color($background, $btn-active-bg-shade-amount),
+ tint-color($background, $btn-active-bg-tint-amount)
+ ),
+ $active-border:
+ if(
+ $color == $color-contrast-light,
+ shade-color($border, $btn-active-border-shade-amount),
+ tint-color($border, $btn-active-border-tint-amount)
+ ),
+ $active-color: color-contrast($active-background),
+ $disabled-background: $background,
+ $disabled-border: $border,
+ $disabled-color: color-contrast($disabled-background)
+) {
+ color: $color;
+ @include gradient-bg($background);
+ border-color: $border;
+ @include box-shadow($btn-box-shadow);
+
+ &:hover {
+ color: $hover-color;
+ @include gradient-bg($hover-background);
+ border-color: $hover-border;
+ }
+
+ .btn-check:focus + &,
+ &:focus {
+ color: $hover-color;
+ @include gradient-bg($hover-background);
+ border-color: $hover-border;
+ @if $enable-shadows {
+ @include box-shadow(
+ $btn-box-shadow,
+ 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5)
+ );
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5);
+ }
+ }
+
+ .btn-check:checked + &,
+ .btn-check:active + &,
+ &:active,
+ &.active,
+ .show > &.dropdown-toggle {
+ color: $active-color;
+ background-color: $active-background;
+ // Remove CSS gradients if they're enabled
+ background-image: if($enable-gradients, none, null);
+ border-color: $active-border;
+
+ &:focus {
+ @if $enable-shadows {
+ @include box-shadow(
+ $btn-active-box-shadow,
+ 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5)
+ );
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5);
+ }
+ }
+ }
+
+ &:disabled,
+ &.disabled {
+ color: $disabled-color;
+ background-color: $disabled-background;
+ // Remove CSS gradients if they're enabled
+ background-image: if($enable-gradients, none, null);
+ border-color: $disabled-border;
+ }
+}
+
+@mixin button-outline-variant(
+ $color,
+ $color-hover: color-contrast($color),
+ $active-background: $color,
+ $active-border: $color,
+ $active-color: color-contrast($active-background)
+) {
+ color: $color;
+ border-color: $color;
+
+ &:hover {
+ color: $color-hover;
+ background-color: $active-background;
+ border-color: $active-border;
+ }
+
+ .btn-check:focus + &,
+ &:focus {
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
+ }
+
+ .btn-check:checked + &,
+ .btn-check:active + &,
+ &:active,
+ &.active,
+ &.dropdown-toggle.show {
+ color: $active-color;
+ background-color: $active-background;
+ border-color: $active-border;
+
+ &:focus {
+ @if $enable-shadows {
+ @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, 0.5));
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
+ }
+ }
+ }
+
+ &:disabled,
+ &.disabled {
+ color: $color;
+ background-color: transparent;
+ }
+}
+
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+ padding: $padding-y $padding-x;
+ @include font-size($font-size);
+ // Manually declare to provide an override to the browser default
+ @include border-radius($border-radius, 0);
+}
diff --git a/src/scss/bootstrap/mixins/_caret.scss b/src/scss/bootstrap/mixins/_caret.scss
new file mode 100644
index 0000000..c819f15
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_caret.scss
@@ -0,0 +1,62 @@
+@mixin caret-down {
+ border-top: $caret-width solid;
+ border-right: $caret-width solid transparent;
+ border-bottom: 0;
+ border-left: $caret-width solid transparent;
+}
+
+@mixin caret-up {
+ border-top: 0;
+ border-right: $caret-width solid transparent;
+ border-bottom: $caret-width solid;
+ border-left: $caret-width solid transparent;
+}
+
+@mixin caret-end {
+ border-top: $caret-width solid transparent;
+ border-right: 0;
+ border-bottom: $caret-width solid transparent;
+ border-left: $caret-width solid;
+}
+
+@mixin caret-start {
+ border-top: $caret-width solid transparent;
+ border-right: $caret-width solid;
+ border-bottom: $caret-width solid transparent;
+}
+
+@mixin caret($direction: down) {
+ @if $enable-caret {
+ &::after {
+ display: inline-block;
+ margin-left: $caret-spacing;
+ vertical-align: $caret-vertical-align;
+ content: '';
+ @if $direction == down {
+ @include caret-down();
+ } @else if $direction == up {
+ @include caret-up();
+ } @else if $direction == end {
+ @include caret-end();
+ }
+ }
+
+ @if $direction == start {
+ &::after {
+ display: none;
+ }
+
+ &::before {
+ display: inline-block;
+ margin-right: $caret-spacing;
+ vertical-align: $caret-vertical-align;
+ content: '';
+ @include caret-start();
+ }
+ }
+
+ &:empty::after {
+ margin-left: 0;
+ }
+ }
+}
diff --git a/src/scss/bootstrap/mixins/_clearfix.scss b/src/scss/bootstrap/mixins/_clearfix.scss
new file mode 100644
index 0000000..ffc62bb
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_clearfix.scss
@@ -0,0 +1,9 @@
+// scss-docs-start clearfix
+@mixin clearfix() {
+ &::after {
+ display: block;
+ clear: both;
+ content: "";
+ }
+}
+// scss-docs-end clearfix
diff --git a/src/scss/bootstrap/mixins/_container.scss b/src/scss/bootstrap/mixins/_container.scss
new file mode 100644
index 0000000..ee6044d
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_container.scss
@@ -0,0 +1,9 @@
+// Container mixins
+
+@mixin make-container($gutter: $container-padding-x) {
+ width: 100%;
+ padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
+ padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
+ margin-right: auto;
+ margin-left: auto;
+}
diff --git a/src/scss/bootstrap/mixins/_deprecate.scss b/src/scss/bootstrap/mixins/_deprecate.scss
new file mode 100644
index 0000000..df070bc
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_deprecate.scss
@@ -0,0 +1,10 @@
+// Deprecate mixin
+//
+// This mixin can be used to deprecate mixins or functions.
+// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
+// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
+@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
+ @if ($enable-deprecation-messages != false and $ignore-warning != true) {
+ @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
+ }
+}
diff --git a/src/scss/bootstrap/mixins/_forms.scss b/src/scss/bootstrap/mixins/_forms.scss
new file mode 100644
index 0000000..d779594
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_forms.scss
@@ -0,0 +1,124 @@
+// This mixin uses an `if()` technique to be compatible with Dart Sass
+// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
+@mixin form-validation-state-selector($state) {
+ @if ($state == 'valid' or $state == 'invalid') {
+ .was-validated #{if(&, "&", "")}:#{$state},
+ #{if(&, "&", "")}.is-#{$state} {
+ @content;
+ }
+ } @else {
+ #{if(&, "&", "")}.is-#{$state} {
+ @content;
+ }
+ }
+}
+
+@mixin form-validation-state(
+ $state,
+ $color,
+ $icon,
+ $tooltip-color: color-contrast($color),
+ $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+ $focus-box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+) {
+ .#{$state}-feedback {
+ display: none;
+ width: 100%;
+ margin-top: $form-feedback-margin-top;
+ @include font-size($form-feedback-font-size);
+ font-style: $form-feedback-font-style;
+ color: $color;
+ }
+
+ .#{$state}-tooltip {
+ position: absolute;
+ top: 100%;
+ z-index: 5;
+ display: none;
+ max-width: 100%; // Contain to parent when possible
+ padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+ margin-top: 0.1rem;
+ @include font-size($form-feedback-tooltip-font-size);
+ line-height: $form-feedback-tooltip-line-height;
+ color: $tooltip-color;
+ background-color: $tooltip-bg-color;
+ @include border-radius($form-feedback-tooltip-border-radius);
+ }
+
+ @include form-validation-state-selector($state) {
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+
+ .form-control {
+ @include form-validation-state-selector($state) {
+ border-color: $color;
+
+ @if $enable-validation-icons {
+ padding-right: $input-height-inner;
+ background-image: escape-svg($icon);
+ background-repeat: no-repeat;
+ background-position: right $input-height-inner-quarter center;
+ background-size: $input-height-inner-half $input-height-inner-half;
+ }
+
+ &:focus {
+ border-color: $color;
+ box-shadow: $focus-box-shadow;
+ }
+ }
+ }
+
+ // stylelint-disable-next-line selector-no-qualifying-type
+ textarea.form-control {
+ @include form-validation-state-selector($state) {
+ @if $enable-validation-icons {
+ padding-right: $input-height-inner;
+ background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+ }
+ }
+ }
+
+ .form-select {
+ @include form-validation-state-selector($state) {
+ border-color: $color;
+
+ @if $enable-validation-icons {
+ padding-right: $form-select-feedback-icon-padding-end;
+ background-image: escape-svg($form-select-indicator), escape-svg($icon);
+ background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+ background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+ }
+
+ &:focus {
+ border-color: $color;
+ box-shadow: $focus-box-shadow;
+ }
+ }
+ }
+
+ .form-check-input {
+ @include form-validation-state-selector($state) {
+ border-color: $color;
+
+ &:checked {
+ background-color: $color;
+ }
+
+ &:focus {
+ box-shadow: $focus-box-shadow;
+ }
+
+ ~ .form-check-label {
+ color: $color;
+ }
+ }
+ }
+ .form-check-inline .form-check-input {
+ ~ .#{$state}-feedback {
+ margin-left: 0.5em;
+ }
+ }
+}
diff --git a/src/scss/bootstrap/mixins/_gradients.scss b/src/scss/bootstrap/mixins/_gradients.scss
new file mode 100644
index 0000000..6f7b063
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_gradients.scss
@@ -0,0 +1,80 @@
+// Gradients
+
+// scss-docs-start gradient-bg-mixin
+@mixin gradient-bg($color: null) {
+ background-color: $color;
+
+ @if $enable-gradients {
+ background-image: var(--#{$variable-prefix}gradient);
+ }
+}
+// scss-docs-end gradient-bg-mixin
+
+// scss-docs-start gradient-mixins
+// Horizontal gradient, from left to right
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+@mixin gradient-x(
+ $start-color: $gray-700,
+ $end-color: $gray-800,
+ $start-percent: 0%,
+ $end-percent: 100%
+) {
+ background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
+}
+
+// Vertical gradient, from top to bottom
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+@mixin gradient-y(
+ $start-color: $gray-700,
+ $end-color: $gray-800,
+ $start-percent: null,
+ $end-percent: null
+) {
+ background-image: linear-gradient(
+ to bottom,
+ $start-color $start-percent,
+ $end-color $end-percent
+ );
+}
+
+@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
+ background-image: linear-gradient($deg, $start-color, $end-color);
+}
+
+@mixin gradient-x-three-colors(
+ $start-color: $blue,
+ $mid-color: $purple,
+ $color-stop: 50%,
+ $end-color: $red
+) {
+ background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+}
+
+@mixin gradient-y-three-colors(
+ $start-color: $blue,
+ $mid-color: $purple,
+ $color-stop: 50%,
+ $end-color: $red
+) {
+ background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
+}
+
+@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
+ background-image: radial-gradient(circle, $inner-color, $outer-color);
+}
+
+@mixin gradient-striped($color: rgba($white, 0.15), $angle: 45deg) {
+ background-image: linear-gradient(
+ $angle,
+ $color 25%,
+ transparent 25%,
+ transparent 50%,
+ $color 50%,
+ $color 75%,
+ transparent 75%,
+ transparent
+ );
+}
+// scss-docs-end gradient-mixins
diff --git a/src/scss/bootstrap/mixins/_grid.scss b/src/scss/bootstrap/mixins/_grid.scss
new file mode 100644
index 0000000..5fb9254
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_grid.scss
@@ -0,0 +1,139 @@
+/// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+@mixin make-row($gutter: $grid-gutter-width) {
+ --#{$variable-prefix}gutter-x: #{$gutter};
+ --#{$variable-prefix}gutter-y: 0;
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: calc(
+ var(--#{$variable-prefix}gutter-y) * -1
+ ); // stylelint-disable-line function-disallowed-list
+ margin-right: calc(
+ var(--#{$variable-prefix}gutter-x) / -2
+ ); // stylelint-disable-line function-disallowed-list
+ margin-left: calc(
+ var(--#{$variable-prefix}gutter-x) / -2
+ ); // stylelint-disable-line function-disallowed-list
+}
+
+@mixin make-col-ready($gutter: $grid-gutter-width) {
+ // Add box sizing if only the grid is loaded
+ box-sizing: if(
+ variable-exists(include-column-box-sizing) and $include-column-box-sizing,
+ border-box,
+ null
+ );
+ // Prevent columns from becoming too narrow when at smaller grid tiers by
+ // always setting `width: 100%;`. This works because we set the width
+ // later on to override this initial width.
+ flex-shrink: 0;
+ width: 100%;
+ max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
+ padding-right: calc(
+ var(--#{$variable-prefix}gutter-x) / 2
+ ); // stylelint-disable-line function-disallowed-list
+ padding-left: calc(
+ var(--#{$variable-prefix}gutter-x) / 2
+ ); // stylelint-disable-line function-disallowed-list
+ margin-top: var(--#{$variable-prefix}gutter-y);
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+ flex: 0 0 auto;
+ width: percentage($size / $columns);
+}
+
+@mixin make-col-auto() {
+ flex: 0 0 auto;
+ width: auto;
+}
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+ $num: $size / $columns;
+ margin-left: if($num == 0, 0, percentage($num));
+}
+
+// Row columns
+//
+// Specify on a parent element(e.g., .row) to force immediate children into NN
+// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// style grid.
+@mixin row-cols($count) {
+ > * {
+ flex: 0 0 auto;
+ width: 100% / $count;
+ }
+}
+
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+@mixin make-grid-columns(
+ $columns: $grid-columns,
+ $gutter: $grid-gutter-width,
+ $breakpoints: $grid-breakpoints
+) {
+ @each $breakpoint in map-keys($breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
+ // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+ .col#{$infix} {
+ flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+ }
+
+ .row-cols#{$infix}-auto > * {
+ @include make-col-auto();
+ }
+
+ @if $grid-row-columns > 0 {
+ @for $i from 1 through $grid-row-columns {
+ .row-cols#{$infix}-#{$i} {
+ @include row-cols($i);
+ }
+ }
+ }
+
+ .col#{$infix}-auto {
+ @include make-col-auto();
+ }
+
+ @if $columns > 0 {
+ @for $i from 1 through $columns {
+ .col#{$infix}-#{$i} {
+ @include make-col($i, $columns);
+ }
+ }
+
+ // `$columns - 1` because offsetting by the width of an entire row isn't possible
+ @for $i from 0 through ($columns - 1) {
+ @if not($infix == '' and $i == 0) {
+ // Avoid emitting useless .offset-0
+ .offset#{$infix}-#{$i} {
+ @include make-col-offset($i, $columns);
+ }
+ }
+ }
+ }
+
+ // Gutters
+ //
+ // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
+ @each $key, $value in $gutters {
+ .g#{$infix}-#{$key},
+ .gx#{$infix}-#{$key} {
+ --#{$variable-prefix}gutter-x: #{$value};
+ }
+
+ .g#{$infix}-#{$key},
+ .gy#{$infix}-#{$key} {
+ --#{$variable-prefix}gutter-y: #{$value};
+ }
+ }
+ }
+ }
+}
diff --git a/src/scss/bootstrap/mixins/_image.scss b/src/scss/bootstrap/mixins/_image.scss
new file mode 100644
index 0000000..e1df779
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_image.scss
@@ -0,0 +1,16 @@
+// Image Mixins
+// - Responsive image
+// - Retina image
+
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+
+@mixin img-fluid {
+ // Part 1: Set a maximum relative to the parent
+ max-width: 100%;
+ // Part 2: Override the height to auto, otherwise images will be stretched
+ // when setting a width and height attribute on the img element.
+ height: auto;
+}
diff --git a/src/scss/bootstrap/mixins/_list-group.scss b/src/scss/bootstrap/mixins/_list-group.scss
new file mode 100644
index 0000000..351e910
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_list-group.scss
@@ -0,0 +1,22 @@
+// List Groups
+
+@mixin list-group-item-variant($state, $background, $color) {
+ .list-group-item-#{$state} {
+ color: $color;
+ background-color: $background;
+
+ &.list-group-item-action {
+ &:hover,
+ &:focus {
+ color: $color;
+ background-color: shade-color($background, 10%);
+ }
+
+ &.active {
+ color: $white;
+ background-color: $color;
+ border-color: $color;
+ }
+ }
+ }
+}
diff --git a/src/scss/bootstrap/mixins/_lists.scss b/src/scss/bootstrap/mixins/_lists.scss
new file mode 100644
index 0000000..2518562
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_lists.scss
@@ -0,0 +1,7 @@
+// Lists
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+@mixin list-unstyled {
+ padding-left: 0;
+ list-style: none;
+}
diff --git a/src/scss/bootstrap/mixins/_pagination.scss b/src/scss/bootstrap/mixins/_pagination.scss
new file mode 100644
index 0000000..9cb7fd8
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_pagination.scss
@@ -0,0 +1,29 @@
+// Pagination
+
+@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
+ .page-link {
+ padding: $padding-y $padding-x;
+ @include font-size($font-size);
+ }
+
+ .page-item {
+ @if $pagination-margin-start == (-$pagination-border-width) {
+ &:first-child {
+ .page-link {
+ @include border-start-radius($border-radius);
+ }
+ }
+
+ &:last-child {
+ .page-link {
+ @include border-end-radius($border-radius);
+ }
+ }
+ } @else {
+ //Add border-radius to all pageLinks in case they have left margin
+ .page-link {
+ @include border-radius($border-radius);
+ }
+ }
+ }
+}
diff --git a/src/scss/bootstrap/mixins/_reset-text.scss b/src/scss/bootstrap/mixins/_reset-text.scss
new file mode 100644
index 0000000..354f564
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_reset-text.scss
@@ -0,0 +1,17 @@
+@mixin reset-text {
+ font-family: $font-family-base;
+ // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
+ font-style: normal;
+ font-weight: $font-weight-normal;
+ line-height: $line-height-base;
+ text-align: left; // Fallback for where `start` is not supported
+ text-align: start;
+ text-decoration: none;
+ text-shadow: none;
+ text-transform: none;
+ letter-spacing: normal;
+ word-break: normal;
+ word-spacing: normal;
+ white-space: normal;
+ line-break: auto;
+}
diff --git a/src/scss/bootstrap/mixins/_resize.scss b/src/scss/bootstrap/mixins/_resize.scss
new file mode 100644
index 0000000..66f233a
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_resize.scss
@@ -0,0 +1,6 @@
+// Resize anything
+
+@mixin resizable($direction) {
+ overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+ resize: $direction; // Options: horizontal, vertical, both
+}
diff --git a/src/scss/bootstrap/mixins/_table-variants.scss b/src/scss/bootstrap/mixins/_table-variants.scss
new file mode 100644
index 0000000..9fd0fb0
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_table-variants.scss
@@ -0,0 +1,21 @@
+// scss-docs-start table-variant
+@mixin table-variant($state, $background) {
+ .table-#{$state} {
+ $color: color-contrast(opaque($body-bg, $background));
+ $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+ $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+ $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+
+ --#{$variable-prefix}table-bg: #{$background};
+ --#{$variable-prefix}table-striped-bg: #{$striped-bg};
+ --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
+ --#{$variable-prefix}table-active-bg: #{$active-bg};
+ --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
+ --#{$variable-prefix}table-hover-bg: #{$hover-bg};
+ --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
+
+ color: $color;
+ border-color: mix($color, $background, percentage($table-border-factor));
+ }
+}
+// scss-docs-end table-variant
diff --git a/src/scss/bootstrap/mixins/_text-truncate.scss b/src/scss/bootstrap/mixins/_text-truncate.scss
new file mode 100644
index 0000000..3504bb1
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_text-truncate.scss
@@ -0,0 +1,8 @@
+// Text truncate
+// Requires inline-block or block for proper styling
+
+@mixin text-truncate() {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
diff --git a/src/scss/bootstrap/mixins/_transition.scss b/src/scss/bootstrap/mixins/_transition.scss
new file mode 100644
index 0000000..d437f6d
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_transition.scss
@@ -0,0 +1,26 @@
+// stylelint-disable property-disallowed-list
+@mixin transition($transition...) {
+ @if length($transition) == 0 {
+ $transition: $transition-base;
+ }
+
+ @if length($transition) > 1 {
+ @each $value in $transition {
+ @if $value == null or $value == none {
+ @warn "The keyword 'none' or 'null' must be used as a single argument.";
+ }
+ }
+ }
+
+ @if $enable-transitions {
+ @if nth($transition, 1) != null {
+ transition: $transition;
+ }
+
+ @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
+ }
+ }
+}
diff --git a/src/scss/bootstrap/mixins/_utilities.scss b/src/scss/bootstrap/mixins/_utilities.scss
new file mode 100644
index 0000000..4f81668
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_utilities.scss
@@ -0,0 +1,79 @@
+// Utility generator
+// Used to generate utilities & print utilities
+@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
+ $values: map-get($utility, values);
+
+ // If the values are a list or string, convert it into a map
+ @if type-of($values) == 'string' or type-of(nth($values, 1)) != 'list' {
+ $values: zip($values, $values);
+ }
+
+ @each $key, $value in $values {
+ $properties: map-get($utility, property);
+
+ // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+ @if type-of($properties) == 'string' {
+ $properties: append((), $properties);
+ }
+
+ // Use custom class if present
+ $property-class: if(
+ map-has-key($utility, class),
+ map-get($utility, class),
+ nth($properties, 1)
+ );
+ $property-class: if($property-class == null, '', $property-class);
+
+ // State params to generate pseudo-classes
+ $state: if(map-has-key($utility, state), map-get($utility, state), ());
+
+ $infix: if(
+ $property-class == '' and str-slice($infix, 1, 1) == '-',
+ str-slice($infix, 2),
+ $infix
+ );
+
+ // Don't prefix if value key is null (eg. with shadow class)
+ $property-class-modifier: if(
+ $key,
+ if($property-class == '' and $infix == '', '', '-') + $key,
+ ''
+ );
+
+ @if map-get($utility, rfs) {
+ // Inside the media query
+ @if $is-rfs-media-query {
+ $val: rfs-value($value);
+
+ // Do not render anything if fluid and non fluid values are the same
+ $value: if($val == rfs-fluid-value($value), null, $val);
+ } @else {
+ $value: rfs-fluid-value($value);
+ }
+ }
+
+ $is-rtl: map-get($utility, rtl);
+
+ @if $value != null {
+ @if $is-rtl == false {
+ /* rtl:begin:remove */
+ }
+ .#{$property-class + $infix + $property-class-modifier} {
+ @each $property in $properties {
+ #{$property}: $value if($enable-important-utilities, !important, null);
+ }
+ }
+
+ @each $pseudo in $state {
+ .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+ @each $property in $properties {
+ #{$property}: $value if($enable-important-utilities, !important, null);
+ }
+ }
+ }
+ @if $is-rtl == false {
+ /* rtl:end:remove */
+ }
+ }
+ }
+}
diff --git a/src/scss/bootstrap/mixins/_visually-hidden.scss b/src/scss/bootstrap/mixins/_visually-hidden.scss
new file mode 100644
index 0000000..ed7bc9c
--- /dev/null
+++ b/src/scss/bootstrap/mixins/_visually-hidden.scss
@@ -0,0 +1,29 @@
+// stylelint-disable declaration-no-important
+
+// Hide content visually while keeping it accessible to assistive technologies
+//
+// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+
+@mixin visually-hidden() {
+ position: absolute !important;
+ width: 1px !important;
+ height: 1px !important;
+ padding: 0 !important;
+ margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+ overflow: hidden !important;
+ clip: rect(0, 0, 0, 0) !important;
+ white-space: nowrap !important;
+ border: 0 !important;
+}
+
+// Use to only display content when it's focused, or one of its child elements is focused
+// (i.e. when focus is within the element/container that the class was applied to)
+//
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+
+@mixin visually-hidden-focusable() {
+ &:not(:focus):not(:focus-within) {
+ @include visually-hidden();
+ }
+}
diff --git a/src/scss/bootstrap/utilities/_api.scss b/src/scss/bootstrap/utilities/_api.scss
new file mode 100644
index 0000000..b253c11
--- /dev/null
+++ b/src/scss/bootstrap/utilities/_api.scss
@@ -0,0 +1,49 @@
+// Loop over each breakpoint
+@each $breakpoint in map-keys($grid-breakpoints) {
+ // Generate media query if needed
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ // Loop over each utility property
+ @each $key, $utility in $utilities {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Only proceed if responsive media queries are enabled or if it's the base media query
+ @if type-of($utility) == 'map' and (map-get($utility, responsive) or $infix == '') {
+ @include generate-utility($utility, $infix);
+ }
+ }
+ }
+}
+
+// RFS rescaling
+@media (min-width: $rfs-mq-value) {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+ // Loop over each utility property
+ @each $key, $utility in $utilities {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Only proceed if responsive media queries are enabled or if it's the base media query
+ @if type-of($utility) ==
+ 'map' and
+ map-get($utility, rfs) and
+ (map-get($utility, responsive) or $infix == '')
+ {
+ @include generate-utility($utility, $infix, true);
+ }
+ }
+ }
+ }
+}
+
+// Print utilities
+@media print {
+ @each $key, $utility in $utilities {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Then check if the utility needs print styles
+ @if type-of($utility) == 'map' and map-get($utility, print) == true {
+ @include generate-utility($utility, '-print');
+ }
+ }
+}
diff --git a/src/scss/bootstrap/vendor/_rfs.scss b/src/scss/bootstrap/vendor/_rfs.scss
new file mode 100644
index 0000000..798753e
--- /dev/null
+++ b/src/scss/bootstrap/vendor/_rfs.scss
@@ -0,0 +1,312 @@
+// stylelint-disable property-blacklist, scss/dollar-variable-default
+
+// SCSS RFS mixin
+//
+// Automated responsive values for font sizes, paddings, margins and much more
+//
+// Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE)
+
+// Configuration
+
+// Base value
+$rfs-base-value: 1.25rem !default;
+$rfs-unit: rem !default;
+
+@if $rfs-unit != rem and $rfs-unit != px {
+ @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.";
+}
+
+// Breakpoint at where values start decreasing if screen width is smaller
+$rfs-breakpoint: 1200px !default;
+$rfs-breakpoint-unit: px !default;
+
+@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
+ @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
+}
+
+// Resize values based on screen height and width
+$rfs-two-dimensional: false !default;
+
+// Factor of decrease
+$rfs-factor: 10 !default;
+
+@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
+ @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
+}
+
+// Mode. Possibilities: "min-media-query", "max-media-query"
+$rfs-mode: min-media-query !default;
+
+// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
+$rfs-class: false !default;
+
+// 1 rem = $rfs-rem-value px
+$rfs-rem-value: 16 !default;
+
+// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
+$rfs-safari-iframe-resize-bug-fix: false !default;
+
+// Disable RFS by setting $enable-rfs to false
+$enable-rfs: true !default;
+
+// Cache $rfs-base-value unit
+$rfs-base-value-unit: unit($rfs-base-value);
+
+// Remove px-unit from $rfs-base-value for calculations
+@if $rfs-base-value-unit == px {
+ $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1);
+}
+@else if $rfs-base-value-unit == rem {
+ $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1 / $rfs-rem-value);
+}
+
+// Cache $rfs-breakpoint unit to prevent multiple calls
+$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
+
+// Remove unit from $rfs-breakpoint for calculations
+@if $rfs-breakpoint-unit-cache == px {
+ $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
+}
+@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
+ $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+}
+
+// Calculate the media query value
+$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit});
+$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
+$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
+
+// Internal mixin used to determine which media query needs to be used
+@mixin _rfs-media-query {
+ @if $rfs-two-dimensional {
+ @if $rfs-mode == max-media-query {
+ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
+ @content;
+ }
+ }
+ @else {
+ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
+ @content;
+ }
+ }
+ }
+ @else {
+ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
+ @content;
+ }
+ }
+}
+
+// Internal mixin that adds disable classes to the selector if needed.
+@mixin _rfs-rule {
+ @if $rfs-class == disable and $rfs-mode == max-media-query {
+ // Adding an extra class increases specificity, which prevents the media query to override the property
+ &,
+ .disable-rfs &,
+ &.disable-rfs {
+ @content;
+ }
+ }
+ @else if $rfs-class == enable and $rfs-mode == min-media-query {
+ .enable-rfs &,
+ &.enable-rfs {
+ @content;
+ }
+ }
+ @else {
+ @content;
+ }
+}
+
+// Internal mixin that adds enable classes to the selector if needed.
+@mixin _rfs-media-query-rule {
+
+ @if $rfs-class == enable {
+ @if $rfs-mode == min-media-query {
+ @content;
+ }
+
+ @include _rfs-media-query {
+ .enable-rfs &,
+ &.enable-rfs {
+ @content;
+ }
+ }
+ }
+ @else {
+ @if $rfs-class == disable and $rfs-mode == min-media-query {
+ .disable-rfs &,
+ &.disable-rfs {
+ @content;
+ }
+ }
+ @include _rfs-media-query {
+ @content;
+ }
+ }
+}
+
+// Helper function to get the formatted non-responsive value
+@function rfs-value($values) {
+ // Convert to list
+ $values: if(type-of($values) != list, ($values,), $values);
+
+ $val: '';
+
+ // Loop over each value and calculate value
+ @each $value in $values {
+ @if $value == 0 {
+ $val: $val + ' 0';
+ }
+ @else {
+ // Cache $value unit
+ $unit: if(type-of($value) == "number", unit($value), false);
+
+ @if $unit == px {
+ // Convert to rem if needed
+ $val: $val + ' ' + if($rfs-unit == rem, #{$value / ($value * 0 + $rfs-rem-value)}rem, $value);
+ }
+ @else if $unit == rem {
+ // Convert to px if needed
+ $val: $val + ' ' + if($rfs-unit == px, #{$value / ($value * 0 + 1) * $rfs-rem-value}px, $value);
+ }
+ @else {
+ // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
+ $val: $val + ' ' + $value;
+ }
+ }
+ }
+
+ // Remove first space
+ @return unquote(str-slice($val, 2));
+}
+
+// Helper function to get the responsive value calculated by RFS
+@function rfs-fluid-value($values) {
+ // Convert to list
+ $values: if(type-of($values) != list, ($values,), $values);
+
+ $val: '';
+
+ // Loop over each value and calculate value
+ @each $value in $values {
+ @if $value == 0 {
+ $val: $val + ' 0';
+ }
+
+ @else {
+ // Cache $value unit
+ $unit: if(type-of($value) == "number", unit($value), false);
+
+ // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
+ @if not $unit or $unit != px and $unit != rem {
+ $val: $val + ' ' + $value;
+ }
+
+ @else {
+ // Remove unit from $value for calculations
+ $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));
+
+ // Only add the media query if the value is greater than the minimum value
+ @if abs($value) <= $rfs-base-value or not $enable-rfs {
+ $val: $val + ' ' + if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px);
+ }
+ @else {
+ // Calculate the minimum value
+ $value-min: $rfs-base-value + (abs($value) - $rfs-base-value) / $rfs-factor;
+
+ // Calculate difference between $value and the minimum value
+ $value-diff: abs($value) - $value-min;
+
+ // Base value formatting
+ $min-width: if($rfs-unit == rem, #{$value-min / $rfs-rem-value}rem, #{$value-min}px);
+
+ // Use negative value if needed
+ $min-width: if($value < 0, -$min-width, $min-width);
+
+ // Use `vmin` if two-dimensional is enabled
+ $variable-unit: if($rfs-two-dimensional, vmin, vw);
+
+ // Calculate the variable width between 0 and $rfs-breakpoint
+ $variable-width: #{$value-diff * 100 / $rfs-breakpoint}#{$variable-unit};
+
+ // Return the calculated value
+ $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
+ }
+ }
+ }
+ }
+
+ // Remove first space
+ @return unquote(str-slice($val, 2));
+}
+
+// RFS mixin
+@mixin rfs($values, $property: font-size) {
+ @if $values != null {
+ $val: rfs-value($values);
+ $fluidVal: rfs-fluid-value($values);
+
+ // Do not print the media query if responsive & non-responsive values are the same
+ @if $val == $fluidVal {
+ #{$property}: $val;
+ }
+ @else {
+ @include _rfs-rule {
+ #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);
+
+ // Include safari iframe resize fix if needed
+ min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
+ }
+
+ @include _rfs-media-query-rule {
+ #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
+ }
+ }
+ }
+}
+
+// Shorthand helper mixins
+@mixin font-size($value) {
+ @include rfs($value);
+}
+
+@mixin padding($value) {
+ @include rfs($value, padding);
+}
+
+@mixin padding-top($value) {
+ @include rfs($value, padding-top);
+}
+
+@mixin padding-right($value) {
+ @include rfs($value, padding-right);
+}
+
+@mixin padding-bottom($value) {
+ @include rfs($value, padding-bottom);
+}
+
+@mixin padding-left($value) {
+ @include rfs($value, padding-left);
+}
+
+@mixin margin($value) {
+ @include rfs($value, margin);
+}
+
+@mixin margin-top($value) {
+ @include rfs($value, margin-top);
+}
+
+@mixin margin-right($value) {
+ @include rfs($value, margin-right);
+}
+
+@mixin margin-bottom($value) {
+ @include rfs($value, margin-bottom);
+}
+
+@mixin margin-left($value) {
+ @include rfs($value, margin-left);
+}
diff --git a/src/scss/custom/_styles.scss b/src/scss/custom/_styles.scss
new file mode 100644
index 0000000..75f1536
--- /dev/null
+++ b/src/scss/custom/_styles.scss
@@ -0,0 +1 @@
+// Your custom variables
diff --git a/src/scss/custom/_variables.scss b/src/scss/custom/_variables.scss
new file mode 100644
index 0000000..75f1536
--- /dev/null
+++ b/src/scss/custom/_variables.scss
@@ -0,0 +1 @@
+// Your custom variables
diff --git a/src/scss/free/_accordion.scss b/src/scss/free/_accordion.scss
new file mode 100644
index 0000000..d7fab84
--- /dev/null
+++ b/src/scss/free/_accordion.scss
@@ -0,0 +1,32 @@
+.accordion-button::after {
+ font-weight: $font-weight-bold;
+ font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
+ content: '\f078';
+}
+
+.accordion-button {
+ border: 0;
+ box-shadow: $box-shadow-1;
+}
+
+.accordion-collapse {
+ border: 0;
+ box-shadow: $box-shadow-1;
+}
+
+.accordion-button:focus {
+ box-shadow: $box-shadow-1;
+}
+
+.accordion-button:not(.collapsed) {
+ color: inherit;
+ background-color: inherit;
+}
+
+.accordion-button:hover {
+ background-color: rgba(0, 0, 0, 0.04);
+}
+
+.accordion-button:not(:hover):focus {
+ background-color: rgba(0, 0, 0, 0.04);
+}
diff --git a/src/scss/free/_alert.scss b/src/scss/free/_alert.scss
new file mode 100644
index 0000000..47cc335
--- /dev/null
+++ b/src/scss/free/_alert.scss
@@ -0,0 +1,18 @@
+// Alert
+
+.alert {
+ border: 0;
+}
+
+.alert-absolute {
+ position: absolute;
+}
+
+.alert-fixed {
+ position: fixed;
+ z-index: $zindex-alert;
+}
+
+.parent-alert-relative {
+ position: relative;
+}
diff --git a/src/scss/free/_badge.scss b/src/scss/free/_badge.scss
new file mode 100644
index 0000000..183c4f3
--- /dev/null
+++ b/src/scss/free/_badge.scss
@@ -0,0 +1,21 @@
+// Badge
+.badge-dot {
+ position: absolute;
+ border-radius: $badge-dot-border-radius;
+ height: $badge-dot-height;
+ min-width: 0;
+ padding: 0;
+ width: $badge-dot-width;
+ margin-left: $badge-dot-margin-left;
+ &:empty {
+ display: inline-block;
+ }
+}
+
+.badge-notification {
+ position: absolute;
+ font-size: $badge-notification-font-size;
+ margin-top: $badge-notification-margin-top;
+ margin-left: $badge-notification-margin-left;
+ padding: $badge-notification-padding-y $badge-notification-padding-x;
+}
diff --git a/src/scss/free/_breadcrumb.scss b/src/scss/free/_breadcrumb.scss
new file mode 100644
index 0000000..abd6d85
--- /dev/null
+++ b/src/scss/free/_breadcrumb.scss
@@ -0,0 +1,24 @@
+// Breadcrumb
+
+.navbar {
+ .breadcrumb {
+ background-color: transparent;
+ margin-bottom: 0;
+
+ .breadcrumb-item {
+ a {
+ color: $breadcrumb-item-color;
+ transition: $breadcrumb-item-transition;
+ &:hover,
+ &:focus {
+ color: $breadcrumb-item-hover-color;
+ }
+ }
+ + .breadcrumb-item {
+ &:before {
+ color: $breadcrumb-item-before-color;
+ }
+ }
+ }
+ }
+}
diff --git a/src/scss/free/_button-group.scss b/src/scss/free/_button-group.scss
new file mode 100644
index 0000000..cffeade
--- /dev/null
+++ b/src/scss/free/_button-group.scss
@@ -0,0 +1,52 @@
+//
+// Button group styles
+//
+
+.btn-group,
+.btn-group-vertical {
+ box-shadow: $btn-box-shadow;
+ border-radius: $btn-group-border-radius;
+ transition: $btn-group-transition;
+
+ &:hover {
+ box-shadow: $btn-hover-box-shadow;
+ }
+
+ &:focus,
+ &.focus {
+ box-shadow: $btn-focus-box-shadow;
+ }
+
+ &:active,
+ &.active {
+ box-shadow: $btn-hover-box-shadow;
+
+ &:focus {
+ box-shadow: $btn-hover-box-shadow;
+ }
+ }
+
+ &:disabled,
+ &.disabled,
+ fieldset:disabled & {
+ box-shadow: $btn-box-shadow;
+ border: 0;
+ }
+
+ > .btn {
+ box-shadow: none;
+ }
+ > .btn-group {
+ box-shadow: none;
+ }
+ > .btn-link {
+ &:first-child {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ &:last-child {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ }
+}
diff --git a/src/scss/free/_buttons.scss b/src/scss/free/_buttons.scss
new file mode 100644
index 0000000..5e2d300
--- /dev/null
+++ b/src/scss/free/_buttons.scss
@@ -0,0 +1,354 @@
+//
+// Base styles
+//
+
+.btn {
+ font-family: $btn-font-family;
+ text-transform: uppercase;
+ vertical-align: bottom;
+ border: 0;
+ box-shadow: $btn-box-shadow;
+ font-weight: $btn-font-weight;
+ @include button-size-mdb(
+ $btn-padding-top,
+ $btn-padding-right,
+ $btn-padding-bottom,
+ $btn-padding-left,
+ $btn-font-size,
+ $btn-line-height
+ );
+
+ &:hover {
+ box-shadow: $btn-hover-box-shadow;
+ }
+
+ &:focus,
+ &.focus {
+ box-shadow: $btn-focus-box-shadow;
+ }
+
+ &:active,
+ &.active {
+ box-shadow: $btn-hover-box-shadow;
+
+ &:focus {
+ box-shadow: $btn-hover-box-shadow;
+ }
+ }
+
+ &:disabled,
+ &.disabled,
+ fieldset:disabled & {
+ box-shadow: $btn-box-shadow;
+ border: 0;
+ }
+
+ .btn-check:focus + &,
+ &:focus {
+ outline: 0;
+ box-shadow: $btn-focus-box-shadow;
+ }
+}
+
+//
+// Button block
+//
+
+.btn-block {
+ display: block;
+ width: 100%;
+
+ // Vertically space out multiple block buttons
+ + .btn-block {
+ margin-top: $btn-block-spacing-y;
+ }
+}
+
+//
+// Outline option
+//
+
+[class*='btn-outline-'] {
+ border-width: $btn-border-width;
+ border-style: solid;
+ box-shadow: none;
+ @include button-outline-size-mdb(
+ $btn-outline-padding-top,
+ $btn-outline-padding-right,
+ $btn-outline-padding-bottom,
+ $btn-outline-padding-left
+ );
+
+ &:hover {
+ box-shadow: none;
+ text-decoration: none;
+ }
+
+ &:focus,
+ &.focus {
+ box-shadow: none;
+ text-decoration: none;
+ }
+
+ &:active,
+ &.active {
+ box-shadow: none;
+
+ &:focus {
+ box-shadow: none;
+ }
+ }
+
+ &:disabled,
+ &.disabled,
+ fieldset:disabled & {
+ box-shadow: none;
+ }
+
+ &.btn-lg {
+ @include button-outline-size-mdb(
+ $btn-outline-padding-top-lg,
+ $btn-outline-padding-right-lg,
+ $btn-outline-padding-bottom-lg,
+ $btn-outline-padding-left-lg
+ );
+ }
+
+ &.btn-sm {
+ @include button-outline-size-mdb(
+ $btn-outline-padding-top-sm,
+ $btn-outline-padding-right-sm,
+ $btn-outline-padding-bottom-sm,
+ $btn-outline-padding-left-sm
+ );
+ }
+}
+
+//
+// Alternate buttons
+//
+
+@each $color, $value in $theme-colors {
+ .btn-#{$color} {
+ @include button-variant-mdb($value);
+ }
+}
+
+//
+// Alternate buttons outline
+//
+
+@each $color, $value in $theme-colors {
+ .btn-outline-#{$color} {
+ @include button-outline-variant-mdb($value);
+ }
+}
+
+//
+// Button Sizes
+//
+
+.btn-lg {
+ @include button-size-mdb(
+ $btn-padding-top-lg,
+ $btn-padding-right-lg,
+ $btn-padding-bottom-lg,
+ $btn-padding-left-lg,
+ $btn-font-size-lg,
+ $btn-line-height-lg
+ );
+}
+
+.btn-sm {
+ @include button-size-mdb(
+ $btn-padding-top-sm,
+ $btn-padding-right-sm,
+ $btn-padding-bottom-sm,
+ $btn-padding-left-sm,
+ $btn-font-size-sm,
+ $btn-line-height-sm
+ );
+}
+
+// Link buttons
+//
+// Make a button look and behave like a link
+
+.btn-link {
+ box-shadow: none;
+ text-decoration: none;
+
+ &:hover {
+ box-shadow: none;
+ text-decoration: none;
+ background-color: $btn-link-bgc;
+ }
+
+ &:focus,
+ &.focus {
+ box-shadow: none;
+ text-decoration: none;
+ background-color: $btn-link-bgc;
+ }
+
+ &:active,
+ &.active {
+ box-shadow: none;
+ background-color: $btn-link-bgc;
+
+ &:focus {
+ box-shadow: none;
+ background-color: $btn-link-bgc;
+ }
+ }
+
+ &:disabled,
+ &.disabled,
+ fieldset:disabled & {
+ box-shadow: none;
+ }
+}
+
+//
+// Rounded option
+//
+
+.btn-rounded {
+ border-radius: $btn-rounded-border-radius;
+}
+
+//
+// Floating option
+//
+
+.btn-floating,
+[class*='btn-outline-'].btn-floating {
+ border-radius: $btn-floating-border-radius;
+ padding: 0;
+ position: relative;
+}
+
+.btn-floating {
+ width: $btn-floating-width;
+ height: $btn-floating-height;
+
+ .fas,
+ .far,
+ .fab {
+ width: $btn-floating-icon-width;
+ line-height: $btn-floating-icon-line-height;
+ }
+
+ &.btn-lg {
+ width: $btn-floating-width-lg;
+ height: $btn-floating-height-lg;
+
+ .fas,
+ .far,
+ .fab {
+ width: $btn-floating-icon-width-lg;
+ line-height: $btn-floating-icon-line-height-lg;
+ }
+ }
+
+ &.btn-sm {
+ width: $btn-floating-width-sm;
+ height: $btn-floating-height-sm;
+
+ .fas,
+ .far,
+ .fab {
+ width: $btn-floating-icon-width-sm;
+ line-height: $btn-floating-icon-line-height-sm;
+ }
+ }
+}
+
+[class*='btn-outline-'].btn-floating {
+ .fas,
+ .far,
+ .fab {
+ width: $btn-outline-floating-icon-width;
+ line-height: $btn-outline-floating-icon-line-height;
+ }
+
+ &.btn-lg {
+ .fas,
+ .far,
+ .fab {
+ width: $btn-outline-floating-icon-width-lg;
+ line-height: $btn-outline-floating-icon-line-height-lg;
+ }
+ }
+
+ &.btn-sm {
+ .fas,
+ .far,
+ .fab {
+ width: $btn-outline-floating-icon-width-sm;
+ line-height: $btn-outline-floating-icon-line-height-sm;
+ }
+ }
+}
+
+//
+// Fixed option
+//
+
+.fixed-action-btn {
+ position: fixed;
+ right: $fixed-action-btn-right;
+ bottom: $fixed-action-btn-bottom;
+ z-index: $zindex-fixed-action-button;
+ display: flex;
+ flex-flow: column-reverse nowrap;
+ align-items: center;
+ padding: $fixed-action-btn-padding-top 20px 20px 20px;
+ margin-bottom: 0;
+ height: auto;
+ overflow: hidden;
+
+ & > .btn-floating {
+ position: relative;
+ transform: scale(1.2);
+ z-index: 10;
+ }
+
+ ul {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+ margin: 0;
+ margin-bottom: 0;
+ text-align: center;
+ opacity: 0;
+ transition: transform 0.4s, opacity 0.4s;
+ z-index: -1;
+ li {
+ z-index: 0;
+ display: flex;
+ margin-right: auto;
+ margin-bottom: $fixed-action-btn-li-margin-bottom;
+ margin-left: auto;
+ &:first-of-type {
+ margin-top: $fixed-action-btn-li-margin-bottom / 2;
+ }
+ }
+ a {
+ &.btn {
+ opacity: 0;
+ transition: opacity 0.4s ease-in;
+ &.shown {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ &.active ul {
+ opacity: 1;
+ }
+}
diff --git a/src/scss/free/_card.scss b/src/scss/free/_card.scss
new file mode 100644
index 0000000..2b161ae
--- /dev/null
+++ b/src/scss/free/_card.scss
@@ -0,0 +1,26 @@
+// Card
+
+.card {
+ border: 0;
+ box-shadow: $card-box-shadow;
+
+ .bg-image {
+ border-top-left-radius: $card-border-radius;
+ border-top-right-radius: $card-border-radius;
+ }
+}
+
+.card-header {
+ background-color: $card-header-background-color;
+}
+
+.card-body {
+ &[class*='bg-'] {
+ border-bottom-left-radius: $card-border-radius;
+ border-bottom-right-radius: $card-border-radius;
+ }
+}
+
+.card-footer {
+ background-color: $card-footer-background-color;
+}
diff --git a/src/scss/free/_carousel.scss b/src/scss/free/_carousel.scss
new file mode 100644
index 0000000..7c57fad
--- /dev/null
+++ b/src/scss/free/_carousel.scss
@@ -0,0 +1,21 @@
+.carousel-control-prev-icon {
+ &::after {
+ content: '\f053';
+ font-weight: $font-weight-bold;
+ font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
+ font-size: 1.7rem;
+ }
+}
+.carousel-control-next-icon {
+ &::after {
+ content: '\f054';
+ font-weight: $font-weight-bold;
+ font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
+ font-size: 1.7rem;
+ }
+}
+.carousel-indicators {
+ [data-mdb-target] {
+ @extend [data-bs-target] !optional;
+ }
+}
diff --git a/src/scss/free/_close.scss b/src/scss/free/_close.scss
new file mode 100644
index 0000000..9bff174
--- /dev/null
+++ b/src/scss/free/_close.scss
@@ -0,0 +1,10 @@
+// transparent background and border properties included for button version.
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+.btn-close {
+ &:focus {
+ box-shadow: none;
+ }
+}
diff --git a/src/scss/free/_colors.scss b/src/scss/free/_colors.scss
new file mode 100644
index 0000000..7557cda
--- /dev/null
+++ b/src/scss/free/_colors.scss
@@ -0,0 +1,7 @@
+// Colors
+
+@each $color, $value in $theme-colors {
+ .bg-#{$color} {
+ background-color: $value !important;
+ }
+}
\ No newline at end of file
diff --git a/src/scss/free/_deprecated.scss b/src/scss/free/_deprecated.scss
new file mode 100644
index 0000000..b3069b5
--- /dev/null
+++ b/src/scss/free/_deprecated.scss
@@ -0,0 +1,1223 @@
+// 12.10.2020 ---------------------------------------------------
+.close {
+ font-size: calc(1.275rem + 0.3vw);
+ font-weight: 700;
+ line-height: 1;
+ color: #000;
+ text-shadow: 0 1px 0 #fff;
+ opacity: 0.5;
+
+ // Override 's hover style
+ &:hover {
+ color: #000;
+ text-decoration: none;
+ }
+
+ &:hover,
+ &:focus {
+ opacity: 0.75;
+ }
+
+ &:disabled,
+ &.disabled {
+ pointer-events: none;
+ }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+// stylelint-disable-next-line selector-no-qualifying-type
+button.close {
+ padding: 0;
+ background-color: transparent;
+ border: 0;
+}
+
+// Credit: Nicolas Gallagher and SUIT CSS.
+.embed-responsive {
+ position: relative;
+ width: 100%;
+
+ &::before {
+ display: block;
+ content: '';
+ }
+
+ .embed-responsive-item,
+ iframe,
+ embed,
+ object,
+ video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.embed-responsive-21by9:before {
+ padding-top: 42.85714%;
+}
+
+.embed-responsive-16by9:before {
+ padding-top: 56.25%;
+}
+
+.embed-responsive-4by3:before {
+ padding-top: 75%;
+}
+
+.embed-responsive-1by1:before {
+ padding-top: 100%;
+}
+
+.sr-only,
+.sr-only-focusable:not(:focus) {
+ position: absolute !important;
+ width: 1px !important;
+ height: 1px !important;
+ padding: 0 !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ clip: rect(0, 0, 0, 0) !important;
+ white-space: nowrap !important;
+ border: 0 !important;
+}
+
+// 23.11.2020
+
+/*!
+ * # Semantic UI 2.4.2 - Flag
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Flag
+*******************************/
+
+i.flag:not(.icon) {
+ display: inline-block;
+ width: 16px;
+ height: 11px;
+ margin: 0 0.5em 0 0;
+ // font-smooth: antialiased;
+ line-height: 11px;
+ text-decoration: inherit;
+ vertical-align: baseline;
+ // speak: none;
+ backface-visibility: hidden;
+}
+
+/* Sprite */
+i.flag:not(.icon):before {
+ display: inline-block;
+ width: 16px;
+ height: 11px;
+ content: '';
+ background: url('https://mdbootstrap.com/img/svg/flags.png') no-repeat -108px -1976px;
+}
+
+/* Flag Sprite Based On http://www.famfamfam.com/lab/icons/flags/ */
+
+/*******************************
+ Theme Overrides
+*******************************/
+
+i.flag.ad:before,
+i.flag.andorra:before {
+ background-position: 0 0;
+}
+i.flag.ae:before,
+i.flag.united.arab.emirates:before,
+i.flag.uae:before {
+ background-position: 0 -26px;
+}
+i.flag.af:before,
+i.flag.afghanistan:before {
+ background-position: 0 -52px;
+}
+i.flag.ag:before,
+i.flag.antigua:before {
+ background-position: 0 -78px;
+}
+i.flag.ai:before,
+i.flag.anguilla:before {
+ background-position: 0 -104px;
+}
+i.flag.al:before,
+i.flag.albania:before {
+ background-position: 0 -130px;
+}
+i.flag.am:before,
+i.flag.armenia:before {
+ background-position: 0 -156px;
+}
+i.flag.an:before,
+i.flag.netherlands.antilles:before {
+ background-position: 0 -182px;
+}
+i.flag.ao:before,
+i.flag.angola:before {
+ background-position: 0 -208px;
+}
+i.flag.ar:before,
+i.flag.argentina:before {
+ background-position: 0 -234px;
+}
+i.flag.as:before,
+i.flag.american.samoa:before {
+ background-position: 0 -260px;
+}
+i.flag.at:before,
+i.flag.austria:before {
+ background-position: 0 -286px;
+}
+i.flag.au:before,
+i.flag.australia:before {
+ background-position: 0 -312px;
+}
+i.flag.aw:before,
+i.flag.aruba:before {
+ background-position: 0 -338px;
+}
+i.flag.ax:before,
+i.flag.aland.islands:before {
+ background-position: 0 -364px;
+}
+i.flag.az:before,
+i.flag.azerbaijan:before {
+ background-position: 0 -390px;
+}
+i.flag.ba:before,
+i.flag.bosnia:before {
+ background-position: 0 -416px;
+}
+i.flag.bb:before,
+i.flag.barbados:before {
+ background-position: 0 -442px;
+}
+i.flag.bd:before,
+i.flag.bangladesh:before {
+ background-position: 0 -468px;
+}
+i.flag.be:before,
+i.flag.belgium:before {
+ background-position: 0 -494px;
+}
+i.flag.bf:before,
+i.flag.burkina.faso:before {
+ background-position: 0 -520px;
+}
+i.flag.bg:before,
+i.flag.bulgaria:before {
+ background-position: 0 -546px;
+}
+i.flag.bh:before,
+i.flag.bahrain:before {
+ background-position: 0 -572px;
+}
+i.flag.bi:before,
+i.flag.burundi:before {
+ background-position: 0 -598px;
+}
+i.flag.bj:before,
+i.flag.benin:before {
+ background-position: 0 -624px;
+}
+i.flag.bm:before,
+i.flag.bermuda:before {
+ background-position: 0 -650px;
+}
+i.flag.bn:before,
+i.flag.brunei:before {
+ background-position: 0 -676px;
+}
+i.flag.bo:before,
+i.flag.bolivia:before {
+ background-position: 0 -702px;
+}
+i.flag.br:before,
+i.flag.brazil:before {
+ background-position: 0 -728px;
+}
+i.flag.bs:before,
+i.flag.bahamas:before {
+ background-position: 0 -754px;
+}
+i.flag.bt:before,
+i.flag.bhutan:before {
+ background-position: 0 -780px;
+}
+i.flag.bv:before,
+i.flag.bouvet.island:before {
+ background-position: 0 -806px;
+}
+i.flag.bw:before,
+i.flag.botswana:before {
+ background-position: 0 -832px;
+}
+i.flag.by:before,
+i.flag.belarus:before {
+ background-position: 0 -858px;
+}
+i.flag.bz:before,
+i.flag.belize:before {
+ background-position: 0 -884px;
+}
+i.flag.ca:before,
+i.flag.canada:before {
+ background-position: 0 -910px;
+}
+i.flag.cc:before,
+i.flag.cocos.islands:before {
+ background-position: 0 -962px;
+}
+i.flag.cd:before,
+i.flag.congo:before {
+ background-position: 0 -988px;
+}
+i.flag.cf:before,
+i.flag.central.african.republic:before {
+ background-position: 0 -1014px;
+}
+i.flag.cg:before,
+i.flag.congo.brazzaville:before {
+ background-position: 0 -1040px;
+}
+i.flag.ch:before,
+i.flag.switzerland:before {
+ background-position: 0 -1066px;
+}
+i.flag.ci:before,
+i.flag.cote.divoire:before {
+ background-position: 0 -1092px;
+}
+i.flag.ck:before,
+i.flag.cook.islands:before {
+ background-position: 0 -1118px;
+}
+i.flag.cl:before,
+i.flag.chile:before {
+ background-position: 0 -1144px;
+}
+i.flag.cm:before,
+i.flag.cameroon:before {
+ background-position: 0 -1170px;
+}
+i.flag.cn:before,
+i.flag.china:before {
+ background-position: 0 -1196px;
+}
+i.flag.co:before,
+i.flag.colombia:before {
+ background-position: 0 -1222px;
+}
+i.flag.cr:before,
+i.flag.costa.rica:before {
+ background-position: 0 -1248px;
+}
+i.flag.cs:before,
+i.flag.serbia:before {
+ background-position: 0 -1274px;
+}
+i.flag.cu:before,
+i.flag.cuba:before {
+ background-position: 0 -1300px;
+}
+i.flag.cv:before,
+i.flag.cape.verde:before {
+ background-position: 0 -1326px;
+}
+i.flag.cx:before,
+i.flag.christmas.island:before {
+ background-position: 0 -1352px;
+}
+i.flag.cy:before,
+i.flag.cyprus:before {
+ background-position: 0 -1378px;
+}
+i.flag.cz:before,
+i.flag.czech.republic:before {
+ background-position: 0 -1404px;
+}
+i.flag.de:before,
+i.flag.germany:before {
+ background-position: 0 -1430px;
+}
+i.flag.dj:before,
+i.flag.djibouti:before {
+ background-position: 0 -1456px;
+}
+i.flag.dk:before,
+i.flag.denmark:before {
+ background-position: 0 -1482px;
+}
+i.flag.dm:before,
+i.flag.dominica:before {
+ background-position: 0 -1508px;
+}
+i.flag.do:before,
+i.flag.dominican.republic:before {
+ background-position: 0 -1534px;
+}
+i.flag.dz:before,
+i.flag.algeria:before {
+ background-position: 0 -1560px;
+}
+i.flag.ec:before,
+i.flag.ecuador:before {
+ background-position: 0 -1586px;
+}
+i.flag.ee:before,
+i.flag.estonia:before {
+ background-position: 0 -1612px;
+}
+i.flag.eg:before,
+i.flag.egypt:before {
+ background-position: 0 -1638px;
+}
+i.flag.eh:before,
+i.flag.western.sahara:before {
+ background-position: 0 -1664px;
+}
+i.flag.gb.eng:before,
+i.flag.england:before {
+ background-position: 0 -1690px;
+}
+i.flag.er:before,
+i.flag.eritrea:before {
+ background-position: 0 -1716px;
+}
+i.flag.es:before,
+i.flag.spain:before {
+ background-position: 0 -1742px;
+}
+i.flag.et:before,
+i.flag.ethiopia:before {
+ background-position: 0 -1768px;
+}
+i.flag.eu:before,
+i.flag.european.union:before {
+ background-position: 0 -1794px;
+}
+i.flag.fi:before,
+i.flag.finland:before {
+ background-position: 0 -1846px;
+}
+i.flag.fj:before,
+i.flag.fiji:before {
+ background-position: 0 -1872px;
+}
+i.flag.fk:before,
+i.flag.falkland.islands:before {
+ background-position: 0 -1898px;
+}
+i.flag.fm:before,
+i.flag.micronesia:before {
+ background-position: 0 -1924px;
+}
+i.flag.fo:before,
+i.flag.faroe.islands:before {
+ background-position: 0 -1950px;
+}
+i.flag.fr:before,
+i.flag.france:before {
+ background-position: 0 -1976px;
+}
+i.flag.ga:before,
+i.flag.gabon:before {
+ background-position: -36px 0;
+}
+i.flag.gb:before,
+i.flag.uk:before,
+i.flag.united.kingdom:before {
+ background-position: -36px -26px;
+}
+i.flag.gd:before,
+i.flag.grenada:before {
+ background-position: -36px -52px;
+}
+i.flag.ge:before,
+i.flag.georgia:before {
+ background-position: -36px -78px;
+}
+i.flag.gf:before,
+i.flag.french.guiana:before {
+ background-position: -36px -104px;
+}
+i.flag.gh:before,
+i.flag.ghana:before {
+ background-position: -36px -130px;
+}
+i.flag.gi:before,
+i.flag.gibraltar:before {
+ background-position: -36px -156px;
+}
+i.flag.gl:before,
+i.flag.greenland:before {
+ background-position: -36px -182px;
+}
+i.flag.gm:before,
+i.flag.gambia:before {
+ background-position: -36px -208px;
+}
+i.flag.gn:before,
+i.flag.guinea:before {
+ background-position: -36px -234px;
+}
+i.flag.gp:before,
+i.flag.guadeloupe:before {
+ background-position: -36px -260px;
+}
+i.flag.gq:before,
+i.flag.equatorial.guinea:before {
+ background-position: -36px -286px;
+}
+i.flag.gr:before,
+i.flag.greece:before {
+ background-position: -36px -312px;
+}
+i.flag.gs:before,
+i.flag.sandwich.islands:before {
+ background-position: -36px -338px;
+}
+i.flag.gt:before,
+i.flag.guatemala:before {
+ background-position: -36px -364px;
+}
+i.flag.gu:before,
+i.flag.guam:before {
+ background-position: -36px -390px;
+}
+i.flag.gw:before,
+i.flag.guinea-bissau:before {
+ background-position: -36px -416px;
+}
+i.flag.gy:before,
+i.flag.guyana:before {
+ background-position: -36px -442px;
+}
+i.flag.hk:before,
+i.flag.hong.kong:before {
+ background-position: -36px -468px;
+}
+i.flag.hm:before,
+i.flag.heard.island:before {
+ background-position: -36px -494px;
+}
+i.flag.hn:before,
+i.flag.honduras:before {
+ background-position: -36px -520px;
+}
+i.flag.hr:before,
+i.flag.croatia:before {
+ background-position: -36px -546px;
+}
+i.flag.ht:before,
+i.flag.haiti:before {
+ background-position: -36px -572px;
+}
+i.flag.hu:before,
+i.flag.hungary:before {
+ background-position: -36px -598px;
+}
+i.flag.id:before,
+i.flag.indonesia:before {
+ background-position: -36px -624px;
+}
+i.flag.ie:before,
+i.flag.ireland:before {
+ background-position: -36px -650px;
+}
+i.flag.il:before,
+i.flag.israel:before {
+ background-position: -36px -676px;
+}
+i.flag.in:before,
+i.flag.india:before {
+ background-position: -36px -702px;
+}
+i.flag.io:before,
+i.flag.indian.ocean.territory:before {
+ background-position: -36px -728px;
+}
+i.flag.iq:before,
+i.flag.iraq:before {
+ background-position: -36px -754px;
+}
+i.flag.ir:before,
+i.flag.iran:before {
+ background-position: -36px -780px;
+}
+i.flag.is:before,
+i.flag.iceland:before {
+ background-position: -36px -806px;
+}
+i.flag.it:before,
+i.flag.italy:before {
+ background-position: -36px -832px;
+}
+i.flag.jm:before,
+i.flag.jamaica:before {
+ background-position: -36px -858px;
+}
+i.flag.jo:before,
+i.flag.jordan:before {
+ background-position: -36px -884px;
+}
+i.flag.jp:before,
+i.flag.japan:before {
+ background-position: -36px -910px;
+}
+i.flag.ke:before,
+i.flag.kenya:before {
+ background-position: -36px -936px;
+}
+i.flag.kg:before,
+i.flag.kyrgyzstan:before {
+ background-position: -36px -962px;
+}
+i.flag.kh:before,
+i.flag.cambodia:before {
+ background-position: -36px -988px;
+}
+i.flag.ki:before,
+i.flag.kiribati:before {
+ background-position: -36px -1014px;
+}
+i.flag.km:before,
+i.flag.comoros:before {
+ background-position: -36px -1040px;
+}
+i.flag.kn:before,
+i.flag.saint.kitts.and.nevis:before {
+ background-position: -36px -1066px;
+}
+i.flag.kp:before,
+i.flag.north.korea:before {
+ background-position: -36px -1092px;
+}
+i.flag.kr:before,
+i.flag.south.korea:before {
+ background-position: -36px -1118px;
+}
+i.flag.kw:before,
+i.flag.kuwait:before {
+ background-position: -36px -1144px;
+}
+i.flag.ky:before,
+i.flag.cayman.islands:before {
+ background-position: -36px -1170px;
+}
+i.flag.kz:before,
+i.flag.kazakhstan:before {
+ background-position: -36px -1196px;
+}
+i.flag.la:before,
+i.flag.laos:before {
+ background-position: -36px -1222px;
+}
+i.flag.lb:before,
+i.flag.lebanon:before {
+ background-position: -36px -1248px;
+}
+i.flag.lc:before,
+i.flag.saint.lucia:before {
+ background-position: -36px -1274px;
+}
+i.flag.li:before,
+i.flag.liechtenstein:before {
+ background-position: -36px -1300px;
+}
+i.flag.lk:before,
+i.flag.sri.lanka:before {
+ background-position: -36px -1326px;
+}
+i.flag.lr:before,
+i.flag.liberia:before {
+ background-position: -36px -1352px;
+}
+i.flag.ls:before,
+i.flag.lesotho:before {
+ background-position: -36px -1378px;
+}
+i.flag.lt:before,
+i.flag.lithuania:before {
+ background-position: -36px -1404px;
+}
+i.flag.lu:before,
+i.flag.luxembourg:before {
+ background-position: -36px -1430px;
+}
+i.flag.lv:before,
+i.flag.latvia:before {
+ background-position: -36px -1456px;
+}
+i.flag.ly:before,
+i.flag.libya:before {
+ background-position: -36px -1482px;
+}
+i.flag.ma:before,
+i.flag.morocco:before {
+ background-position: -36px -1508px;
+}
+i.flag.mc:before,
+i.flag.monaco:before {
+ background-position: -36px -1534px;
+}
+i.flag.md:before,
+i.flag.moldova:before {
+ background-position: -36px -1560px;
+}
+i.flag.me:before,
+i.flag.montenegro:before {
+ background-position: -36px -1586px;
+}
+i.flag.mg:before,
+i.flag.madagascar:before {
+ background-position: -36px -1613px;
+}
+i.flag.mh:before,
+i.flag.marshall.islands:before {
+ background-position: -36px -1639px;
+}
+i.flag.mk:before,
+i.flag.macedonia:before {
+ background-position: -36px -1665px;
+}
+i.flag.ml:before,
+i.flag.mali:before {
+ background-position: -36px -1691px;
+}
+i.flag.mm:before,
+i.flag.myanmar:before,
+i.flag.burma:before {
+ background-position: -73px -1821px;
+}
+i.flag.mn:before,
+i.flag.mongolia:before {
+ background-position: -36px -1743px;
+}
+i.flag.mo:before,
+i.flag.macau:before {
+ background-position: -36px -1769px;
+}
+i.flag.mp:before,
+i.flag.northern.mariana.islands:before {
+ background-position: -36px -1795px;
+}
+i.flag.mq:before,
+i.flag.martinique:before {
+ background-position: -36px -1821px;
+}
+i.flag.mr:before,
+i.flag.mauritania:before {
+ background-position: -36px -1847px;
+}
+i.flag.ms:before,
+i.flag.montserrat:before {
+ background-position: -36px -1873px;
+}
+i.flag.mt:before,
+i.flag.malta:before {
+ background-position: -36px -1899px;
+}
+i.flag.mu:before,
+i.flag.mauritius:before {
+ background-position: -36px -1925px;
+}
+i.flag.mv:before,
+i.flag.maldives:before {
+ background-position: -36px -1951px;
+}
+i.flag.mw:before,
+i.flag.malawi:before {
+ background-position: -36px -1977px;
+}
+i.flag.mx:before,
+i.flag.mexico:before {
+ background-position: -72px 0;
+}
+i.flag.my:before,
+i.flag.malaysia:before {
+ background-position: -72px -26px;
+}
+i.flag.mz:before,
+i.flag.mozambique:before {
+ background-position: -72px -52px;
+}
+i.flag.na:before,
+i.flag.namibia:before {
+ background-position: -72px -78px;
+}
+i.flag.nc:before,
+i.flag.new.caledonia:before {
+ background-position: -72px -104px;
+}
+i.flag.ne:before,
+i.flag.niger:before {
+ background-position: -72px -130px;
+}
+i.flag.nf:before,
+i.flag.norfolk.island:before {
+ background-position: -72px -156px;
+}
+i.flag.ng:before,
+i.flag.nigeria:before {
+ background-position: -72px -182px;
+}
+i.flag.ni:before,
+i.flag.nicaragua:before {
+ background-position: -72px -208px;
+}
+i.flag.nl:before,
+i.flag.netherlands:before {
+ background-position: -72px -234px;
+}
+i.flag.no:before,
+i.flag.norway:before {
+ background-position: -72px -260px;
+}
+i.flag.np:before,
+i.flag.nepal:before {
+ background-position: -72px -286px;
+}
+i.flag.nr:before,
+i.flag.nauru:before {
+ background-position: -72px -312px;
+}
+i.flag.nu:before,
+i.flag.niue:before {
+ background-position: -72px -338px;
+}
+i.flag.nz:before,
+i.flag.new.zealand:before {
+ background-position: -72px -364px;
+}
+i.flag.om:before,
+i.flag.oman:before {
+ background-position: -72px -390px;
+}
+i.flag.pa:before,
+i.flag.panama:before {
+ background-position: -72px -416px;
+}
+i.flag.pe:before,
+i.flag.peru:before {
+ background-position: -72px -442px;
+}
+i.flag.pf:before,
+i.flag.french.polynesia:before {
+ background-position: -72px -468px;
+}
+i.flag.pg:before,
+i.flag.new.guinea:before {
+ background-position: -72px -494px;
+}
+i.flag.ph:before,
+i.flag.philippines:before {
+ background-position: -72px -520px;
+}
+i.flag.pk:before,
+i.flag.pakistan:before {
+ background-position: -72px -546px;
+}
+i.flag.pl:before,
+i.flag.poland:before {
+ background-position: -72px -572px;
+}
+i.flag.pm:before,
+i.flag.saint.pierre:before {
+ background-position: -72px -598px;
+}
+i.flag.pn:before,
+i.flag.pitcairn.islands:before {
+ background-position: -72px -624px;
+}
+i.flag.pr:before,
+i.flag.puerto.rico:before {
+ background-position: -72px -650px;
+}
+i.flag.ps:before,
+i.flag.palestine:before {
+ background-position: -72px -676px;
+}
+i.flag.pt:before,
+i.flag.portugal:before {
+ background-position: -72px -702px;
+}
+i.flag.pw:before,
+i.flag.palau:before {
+ background-position: -72px -728px;
+}
+i.flag.py:before,
+i.flag.paraguay:before {
+ background-position: -72px -754px;
+}
+i.flag.qa:before,
+i.flag.qatar:before {
+ background-position: -72px -780px;
+}
+i.flag.re:before,
+i.flag.reunion:before {
+ background-position: -72px -806px;
+}
+i.flag.ro:before,
+i.flag.romania:before {
+ background-position: -72px -832px;
+}
+i.flag.rs:before,
+i.flag.serbia:before {
+ background-position: -72px -858px;
+}
+i.flag.ru:before,
+i.flag.russia:before {
+ background-position: -72px -884px;
+}
+i.flag.rw:before,
+i.flag.rwanda:before {
+ background-position: -72px -910px;
+}
+i.flag.sa:before,
+i.flag.saudi.arabia:before {
+ background-position: -72px -936px;
+}
+i.flag.sb:before,
+i.flag.solomon.islands:before {
+ background-position: -72px -962px;
+}
+i.flag.sc:before,
+i.flag.seychelles:before {
+ background-position: -72px -988px;
+}
+i.flag.gb.sct:before,
+i.flag.scotland:before {
+ background-position: -72px -1014px;
+}
+i.flag.sd:before,
+i.flag.sudan:before {
+ background-position: -72px -1040px;
+}
+i.flag.se:before,
+i.flag.sweden:before {
+ background-position: -72px -1066px;
+}
+i.flag.sg:before,
+i.flag.singapore:before {
+ background-position: -72px -1092px;
+}
+i.flag.sh:before,
+i.flag.saint.helena:before {
+ background-position: -72px -1118px;
+}
+i.flag.si:before,
+i.flag.slovenia:before {
+ background-position: -72px -1144px;
+}
+i.flag.sj:before,
+i.flag.svalbard:before,
+i.flag.jan.mayen:before {
+ background-position: -72px -1170px;
+}
+i.flag.sk:before,
+i.flag.slovakia:before {
+ background-position: -72px -1196px;
+}
+i.flag.sl:before,
+i.flag.sierra.leone:before {
+ background-position: -72px -1222px;
+}
+i.flag.sm:before,
+i.flag.san.marino:before {
+ background-position: -72px -1248px;
+}
+i.flag.sn:before,
+i.flag.senegal:before {
+ background-position: -72px -1274px;
+}
+i.flag.so:before,
+i.flag.somalia:before {
+ background-position: -72px -1300px;
+}
+i.flag.sr:before,
+i.flag.suriname:before {
+ background-position: -72px -1326px;
+}
+i.flag.st:before,
+i.flag.sao.tome:before {
+ background-position: -72px -1352px;
+}
+i.flag.sv:before,
+i.flag.el.salvador:before {
+ background-position: -72px -1378px;
+}
+i.flag.sy:before,
+i.flag.syria:before {
+ background-position: -72px -1404px;
+}
+i.flag.sz:before,
+i.flag.swaziland:before {
+ background-position: -72px -1430px;
+}
+i.flag.tc:before,
+i.flag.caicos.islands:before {
+ background-position: -72px -1456px;
+}
+i.flag.td:before,
+i.flag.chad:before {
+ background-position: -72px -1482px;
+}
+i.flag.tf:before,
+i.flag.french.territories:before {
+ background-position: -72px -1508px;
+}
+i.flag.tg:before,
+i.flag.togo:before {
+ background-position: -72px -1534px;
+}
+i.flag.th:before,
+i.flag.thailand:before {
+ background-position: -72px -1560px;
+}
+i.flag.tj:before,
+i.flag.tajikistan:before {
+ background-position: -72px -1586px;
+}
+i.flag.tk:before,
+i.flag.tokelau:before {
+ background-position: -72px -1612px;
+}
+i.flag.tl:before,
+i.flag.timorleste:before {
+ background-position: -72px -1638px;
+}
+i.flag.tm:before,
+i.flag.turkmenistan:before {
+ background-position: -72px -1664px;
+}
+i.flag.tn:before,
+i.flag.tunisia:before {
+ background-position: -72px -1690px;
+}
+i.flag.to:before,
+i.flag.tonga:before {
+ background-position: -72px -1716px;
+}
+i.flag.tr:before,
+i.flag.turkey:before {
+ background-position: -72px -1742px;
+}
+i.flag.tt:before,
+i.flag.trinidad:before {
+ background-position: -72px -1768px;
+}
+i.flag.tv:before,
+i.flag.tuvalu:before {
+ background-position: -72px -1794px;
+}
+i.flag.tw:before,
+i.flag.taiwan:before {
+ background-position: -72px -1820px;
+}
+i.flag.tz:before,
+i.flag.tanzania:before {
+ background-position: -72px -1846px;
+}
+i.flag.ua:before,
+i.flag.ukraine:before {
+ background-position: -72px -1872px;
+}
+i.flag.ug:before,
+i.flag.uganda:before {
+ background-position: -72px -1898px;
+}
+i.flag.um:before,
+i.flag.us.minor.islands:before {
+ background-position: -72px -1924px;
+}
+i.flag.us:before,
+i.flag.america:before,
+i.flag.united.states:before {
+ background-position: -72px -1950px;
+}
+i.flag.uy:before,
+i.flag.uruguay:before {
+ background-position: -72px -1976px;
+}
+i.flag.uz:before,
+i.flag.uzbekistan:before {
+ background-position: -108px 0;
+}
+i.flag.va:before,
+i.flag.vatican.city:before {
+ background-position: -108px -26px;
+}
+i.flag.vc:before,
+i.flag.saint.vincent:before {
+ background-position: -108px -52px;
+}
+i.flag.ve:before,
+i.flag.venezuela:before {
+ background-position: -108px -78px;
+}
+i.flag.vg:before,
+i.flag.british.virgin.islands:before {
+ background-position: -108px -104px;
+}
+i.flag.vi:before,
+i.flag.us.virgin.islands:before {
+ background-position: -108px -130px;
+}
+i.flag.vn:before,
+i.flag.vietnam:before {
+ background-position: -108px -156px;
+}
+i.flag.vu:before,
+i.flag.vanuatu:before {
+ background-position: -108px -182px;
+}
+i.flag.gb.wls:before,
+i.flag.wales:before {
+ background-position: -108px -208px;
+}
+i.flag.wf:before,
+i.flag.wallis.and.futuna:before {
+ background-position: -108px -234px;
+}
+i.flag.ws:before,
+i.flag.samoa:before {
+ background-position: -108px -260px;
+}
+i.flag.ye:before,
+i.flag.yemen:before {
+ background-position: -108px -286px;
+}
+i.flag.yt:before,
+i.flag.mayotte:before {
+ background-position: -108px -312px;
+}
+i.flag.za:before,
+i.flag.south.africa:before {
+ background-position: -108px -338px;
+}
+i.flag.zm:before,
+i.flag.zambia:before {
+ background-position: -108px -364px;
+}
+i.flag.zw:before,
+i.flag.zimbabwe:before {
+ background-position: -108px -390px;
+}
+
+/*******************************
+ Site Overrides
+*******************************/
+
+// 14.12.2020 --------------------------------
+$utilities-old: () !default;
+
+$utilities-old: map-merge(
+ (
+ // Text
+ 'font-weight':
+ (
+ property: font-weight,
+ values: (
+ light: $font-weight-light,
+ lighter: $font-weight-lighter,
+ normal: $font-weight-normal,
+ bold: $font-weight-bold,
+ bolder: $font-weight-bolder,
+ ),
+ ),
+ 'font-style': (
+ property: font-style,
+ class: font,
+ values: italic normal,
+ )
+ ),
+ $utilities-old
+);
+
+// Loop over each breakpoint
+@each $breakpoint in map-keys($grid-breakpoints) {
+ // Generate media query if needed
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ // Loop over each utility property
+ @each $key, $utility in $utilities-old {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Only proceed if responsive media queries are enabled or if it's the base media query
+ @if type-of($utility) == 'map' and (map-get($utility, responsive) or $infix == '') {
+ @include generate-utility($utility, $infix);
+ }
+ }
+ }
+}
+
+// RFS rescaling
+@media (min-width: $rfs-mq-value) {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+ // Loop over each utility property
+ @each $key, $utility in $utilities-old {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Only proceed if responsive media queries are enabled or if it's the base media query
+ @if type-of($utility) == 'map' and map-get($utility, rfs) {
+ @include generate-utility($utility, $infix, true);
+ }
+ }
+ }
+ }
+}
+
+// Print utilities-old
+@media print {
+ @each $key, $utility in $utilities-old {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Then check if the utility needs print styles
+ @if type-of($utility) == 'map' and map-get($utility, print) == true {
+ @include generate-utility($utility, '-print');
+ }
+ }
+}
+
+// 22.02.2021 --------------------------------
+.carousel-indicators {
+ li {
+ box-sizing: content-box;
+ flex: 0 1 auto;
+ width: $carousel-indicator-width;
+ height: $carousel-indicator-height;
+ padding: 0;
+ margin-right: $carousel-indicator-spacer;
+ margin-left: $carousel-indicator-spacer;
+ text-indent: -999px;
+ cursor: pointer;
+ background-color: $carousel-indicator-active-bg;
+ background-clip: padding-box;
+ border: 0;
+ // Use transparent borders to increase the hit area by 10px on top and bottom.
+ border-top: $carousel-indicator-hit-area-height solid transparent;
+ border-bottom: $carousel-indicator-hit-area-height solid transparent;
+ opacity: $carousel-indicator-opacity;
+ @include transition($carousel-indicator-transition);
+ }
+}
+.carousel-dark {
+ .carousel-indicators li {
+ background-color: $carousel-dark-indicator-active-bg;
+ }
+}
diff --git a/src/scss/free/_dropdown.scss b/src/scss/free/_dropdown.scss
new file mode 100644
index 0000000..1e5f60a
--- /dev/null
+++ b/src/scss/free/_dropdown.scss
@@ -0,0 +1,116 @@
+.dropdown-menu {
+ color: $dropdown-color;
+ margin: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ border: 0;
+ box-shadow: $dropdown-box-shadow;
+ font-size: $dropdown-font-size;
+
+ > li {
+ border-radius: 0;
+ &:first-child {
+ border-top-left-radius: $dropdown-item-border-radius;
+ border-top-right-radius: $dropdown-item-border-radius;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ .dropdown-item {
+ border-top-left-radius: $dropdown-item-border-radius;
+ border-top-right-radius: $dropdown-item-border-radius;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ }
+
+ &:not(:first-child):not(:last-child) {
+ .dropdown-item {
+ border-radius: 0;
+ }
+ }
+
+ &:last-child {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-left-radius: $dropdown-item-border-radius;
+ border-bottom-right-radius: $dropdown-item-border-radius;
+ .dropdown-item {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-left-radius: $dropdown-item-border-radius;
+ border-bottom-right-radius: $dropdown-item-border-radius;
+ }
+ }
+ }
+
+ &.animation {
+ display: block;
+ /* Speed up animations */
+ animation-duration: $dropdown-menu-animated-animation-duration;
+ animation-timing-function: $dropdown-menu-animated-animation-timing-function;
+ }
+}
+
+.dropdown-item {
+ padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+ color: $dropdown-color;
+ border-radius: 0;
+
+ &:hover,
+ &:focus {
+ color: $dropdown-state-color;
+ background-color: $dropdown-state-background-color;
+ }
+
+ &.active,
+ &:active {
+ color: $dropdown-state-color;
+ background-color: $dropdown-state-background-color;
+ }
+}
+
+.hidden-arrow {
+ &.dropdown-toggle:after {
+ display: none;
+ }
+}
+
+.animation {
+ animation-duration: 1s;
+ animation-fill-mode: both;
+ padding: auto;
+}
+
+@media (prefers-reduced-motion) {
+ .animation {
+ transition: none !important;
+ animation: unset !important;
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.fade-in {
+ animation-name: fade-in;
+}
+
+@keyframes fade-out {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.fade-out {
+ animation-name: fade-out;
+}
diff --git a/src/scss/free/_flag.scss b/src/scss/free/_flag.scss
new file mode 100644
index 0000000..7cb360a
--- /dev/null
+++ b/src/scss/free/_flag.scss
@@ -0,0 +1,1046 @@
+/*!
+ * # Semantic UI 2.4.2 - Flag
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Flag
+*******************************/
+#mdb-table-flag tr {
+ cursor: pointer;
+}
+.mdb-flag-selected {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ text-align: center;
+ max-width: 150px;
+ margin: 0 auto;
+ margin-top: 10px;
+}
+.mdb-selected-flag-text {
+ margin: 0 auto;
+ max-width: 150px;
+}
+
+i.flag:not(.icon) {
+ display: inline-block;
+ width: 16px;
+ height: 11px;
+ margin: 0 0.5em 0 0;
+ line-height: 11px;
+ text-decoration: inherit;
+ vertical-align: baseline;
+ backface-visibility: hidden;
+}
+
+/* Sprite */
+i.flag {
+ &::before {
+ display: inline-block;
+ width: 16px;
+ height: 11px;
+ content: '';
+ background: url('https://mdbootstrap.com/img/svg/flags.png') no-repeat -108px -1976px;
+ }
+
+ /* Flag Sprite Based On http://www.famfamfam.com/lab/icons/flags/ */
+
+ /*******************************
+ Theme Overrides
+*******************************/
+
+ &-ad:before,
+ &-andorra:before {
+ background-position: 0 0 !important;
+ }
+
+ &-ae:before,
+ &-united-arab-emirates:before,
+ &-uae:before {
+ background-position: 0 -26px !important;
+ }
+ &-af:before,
+ &-afghanistan:before {
+ background-position: 0 -52px !important;
+ }
+ &-ag:before,
+ &-antigua:before {
+ background-position: 0 -78px !important;
+ }
+ &-ai:before,
+ &-anguilla:before {
+ background-position: 0 -104px !important;
+ }
+ &-al:before,
+ &-albania:before {
+ background-position: 0 -130px !important;
+ }
+ &-am:before,
+ &-armenia:before {
+ background-position: 0 -156px !important;
+ }
+ &-an:before,
+ &-netherlands-antilles:before {
+ background-position: 0 -182px !important;
+ }
+ &-ao:before,
+ &-angola:before {
+ background-position: 0 -208px !important;
+ }
+ &-ar:before,
+ &-argentina:before {
+ background-position: 0 -234px !important;
+ }
+ &-as:before,
+ &-american-samoa:before {
+ background-position: 0 -260px !important;
+ }
+ &-at:before,
+ &-austria:before {
+ background-position: 0 -286px !important;
+ }
+ &-au:before,
+ &-australia:before {
+ background-position: 0 -312px !important;
+ }
+ &-aw:before,
+ &-aruba:before {
+ background-position: 0 -338px !important;
+ }
+ &-ax:before,
+ &-aland-islands:before {
+ background-position: 0 -364px !important;
+ }
+ &-az:before,
+ &-azerbaijan:before {
+ background-position: 0 -390px !important;
+ }
+ &-ba:before,
+ &-bosnia:before {
+ background-position: 0 -416px !important;
+ }
+ &-bb:before,
+ &-barbados:before {
+ background-position: 0 -442px !important;
+ }
+ &-bd:before,
+ &-bangladesh:before {
+ background-position: 0 -468px !important;
+ }
+ &-be:before,
+ &-belgium:before {
+ background-position: 0 -494px !important;
+ }
+ &-bf:before,
+ &-burkina-faso:before {
+ background-position: 0 -520px !important;
+ }
+ &-bg:before,
+ &-bulgaria:before {
+ background-position: 0 -546px !important;
+ }
+ &-bh:before,
+ &-bahrain:before {
+ background-position: 0 -572px !important;
+ }
+ &-bi:before,
+ &-burundi:before {
+ background-position: 0 -598px !important;
+ }
+ &-bj:before,
+ &-benin:before {
+ background-position: 0 -624px !important;
+ }
+ &-bm:before,
+ &-bermuda:before {
+ background-position: 0 -650px !important;
+ }
+ &-bn:before,
+ &-brunei:before {
+ background-position: 0 -676px !important;
+ }
+ &-bo:before,
+ &-bolivia:before {
+ background-position: 0 -702px !important;
+ }
+ &-br:before,
+ &-brazil:before {
+ background-position: 0 -728px !important;
+ }
+ &-bs:before,
+ &-bahamas:before {
+ background-position: 0 -754px !important;
+ }
+ &-bt:before,
+ &-bhutan:before {
+ background-position: 0 -780px !important;
+ }
+ &-bv:before,
+ &-bouvet-island:before {
+ background-position: 0 -806px !important;
+ }
+ &-bw:before,
+ &-botswana:before {
+ background-position: 0 -832px !important;
+ }
+ &-by:before,
+ &-belarus:before {
+ background-position: 0 -858px !important;
+ }
+ &-bz:before,
+ &-belize:before {
+ background-position: 0 -884px !important;
+ }
+ &-ca:before,
+ &-canada:before {
+ background-position: 0 -910px !important;
+ }
+ &-cc:before,
+ &-cocos-islands:before {
+ background-position: 0 -962px !important;
+ }
+ &-cd:before,
+ &-congo:before {
+ background-position: 0 -988px !important;
+ }
+ &-cf:before,
+ &-central-african-republic:before {
+ background-position: 0 -1014px !important;
+ }
+ &-cg:before,
+ &-congo-brazzaville:before {
+ background-position: 0 -1040px !important;
+ }
+ &-ch:before,
+ &-switzerland:before {
+ background-position: 0 -1066px !important;
+ }
+ &-ci:before,
+ &-cote-divoire:before {
+ background-position: 0 -1092px !important;
+ }
+ &-ck:before,
+ &-cook-islands:before {
+ background-position: 0 -1118px !important;
+ }
+ &-cl:before,
+ &-chile:before {
+ background-position: 0 -1144px !important;
+ }
+ &-cm:before,
+ &-cameroon:before {
+ background-position: 0 -1170px !important;
+ }
+ &-cn:before,
+ &-china:before {
+ background-position: 0 -1196px !important;
+ }
+ &-co:before,
+ &-colombia:before {
+ background-position: 0 -1222px !important;
+ }
+ &-cr:before,
+ &-costa-rica:before {
+ background-position: 0 -1248px !important;
+ }
+ &-cs:before,
+ &-serbia:before {
+ background-position: 0 -1274px !important;
+ }
+ &-cu:before,
+ &-cuba:before {
+ background-position: 0 -1300px !important;
+ }
+ &-cv:before,
+ &-cape-verde:before {
+ background-position: 0 -1326px !important;
+ }
+ &-cx:before,
+ &-christmas-island:before {
+ background-position: 0 -1352px !important;
+ }
+ &-cy:before,
+ &-cyprus:before {
+ background-position: 0 -1378px !important;
+ }
+ &-cz:before,
+ &-czech-republic:before {
+ background-position: 0 -1404px !important;
+ }
+ &-de:before,
+ &-germany:before {
+ background-position: 0 -1430px !important;
+ }
+ &-dj:before,
+ &-djibouti:before {
+ background-position: 0 -1456px !important;
+ }
+ &-dk:before,
+ &-denmark:before {
+ background-position: 0 -1482px !important;
+ }
+ &-dm:before,
+ &-dominica:before {
+ background-position: 0 -1508px !important;
+ }
+ &-do:before,
+ &-dominican-republic:before {
+ background-position: 0 -1534px !important;
+ }
+ &-dz:before,
+ &-algeria:before {
+ background-position: 0 -1560px !important;
+ }
+ &-ec:before,
+ &-ecuador:before {
+ background-position: 0 -1586px !important;
+ }
+ &-ee:before,
+ &-estonia:before {
+ background-position: 0 -1612px !important;
+ }
+ &-eg:before,
+ &-egypt:before {
+ background-position: 0 -1638px !important;
+ }
+ &-eh:before,
+ &-western-sahara:before {
+ background-position: 0 -1664px !important;
+ }
+ &-gb-eng:before,
+ &-england:before {
+ background-position: 0 -1690px !important;
+ }
+ &-er:before,
+ &-eritrea:before {
+ background-position: 0 -1716px !important;
+ }
+ &-es:before,
+ &-spain:before {
+ background-position: 0 -1742px !important;
+ }
+ &-et:before,
+ &-ethiopia:before {
+ background-position: 0 -1768px !important;
+ }
+ &-eu:before,
+ &-european-union:before {
+ background-position: 0 -1794px !important;
+ }
+ &-fi:before,
+ &-finland:before {
+ background-position: 0 -1846px !important;
+ }
+ &-fj:before,
+ &-fiji:before {
+ background-position: 0 -1872px !important;
+ }
+ &-fk:before,
+ &-falkland-islands:before {
+ background-position: 0 -1898px !important;
+ }
+ &-fm:before,
+ &-micronesia:before {
+ background-position: 0 -1924px !important;
+ }
+ &-fo:before,
+ &-faroe-islands:before {
+ background-position: 0 -1950px !important;
+ }
+ &-fr:before,
+ &-france:before {
+ background-position: 0 -1976px !important;
+ }
+ &-ga:before,
+ &-gabon:before {
+ background-position: -36px 0 !important;
+ }
+ &-gb:before,
+ &-uk:before,
+ &-united-kingdom:before {
+ background-position: -36px -26px !important;
+ }
+ &-gd:before,
+ &-grenada:before {
+ background-position: -36px -52px !important;
+ }
+ &-ge:before,
+ &-georgia:before {
+ background-position: -36px -78px !important;
+ }
+ &-gf:before,
+ &-french-guiana:before {
+ background-position: -36px -104px !important;
+ }
+ &-gh:before,
+ &-ghana:before {
+ background-position: -36px -130px !important;
+ }
+ &-gi:before,
+ &-gibraltar:before {
+ background-position: -36px -156px !important;
+ }
+ &-gl:before,
+ &-greenland:before {
+ background-position: -36px -182px !important;
+ }
+ &-gm:before,
+ &-gambia:before {
+ background-position: -36px -208px !important;
+ }
+ &-gn:before,
+ &-guinea:before {
+ background-position: -36px -234px !important;
+ }
+ &-gp:before,
+ &-guadeloupe:before {
+ background-position: -36px -260px !important;
+ }
+ &-gq:before,
+ &-equatorial-guinea:before {
+ background-position: -36px -286px !important;
+ }
+ &-gr:before,
+ &-greece:before {
+ background-position: -36px -312px !important;
+ }
+ &-gs:before,
+ &-sandwich-islands:before {
+ background-position: -36px -338px !important;
+ }
+ &-gt:before,
+ &-guatemala:before {
+ background-position: -36px -364px !important;
+ }
+ &-gu:before,
+ &-guam:before {
+ background-position: -36px -390px !important;
+ }
+ &-gw:before,
+ &-guinea-bissau:before {
+ background-position: -36px -416px !important;
+ }
+ &-gy:before,
+ &-guyana:before {
+ background-position: -36px -442px !important;
+ }
+ &-hk:before,
+ &-hong-kong:before {
+ background-position: -36px -468px !important;
+ }
+ &-hm:before,
+ &-heard-island:before {
+ background-position: -36px -494px !important;
+ }
+ &-hn:before,
+ &-honduras:before {
+ background-position: -36px -520px !important;
+ }
+ &-hr:before,
+ &-croatia:before {
+ background-position: -36px -546px !important;
+ }
+ &-ht:before,
+ &-haiti:before {
+ background-position: -36px -572px !important;
+ }
+ &-hu:before,
+ &-hungary:before {
+ background-position: -36px -598px !important;
+ }
+ &-id:before,
+ &-indonesia:before {
+ background-position: -36px -624px !important;
+ }
+ &-ie:before,
+ &-ireland:before {
+ background-position: -36px -650px !important;
+ }
+ &-il:before,
+ &-israel:before {
+ background-position: -36px -676px !important;
+ }
+ &-in:before,
+ &-india:before {
+ background-position: -36px -702px !important;
+ }
+ &-io:before,
+ &-indian-ocean-territory:before {
+ background-position: -36px -728px !important;
+ }
+ &-iq:before,
+ &-iraq:before {
+ background-position: -36px -754px !important;
+ }
+ &-ir:before,
+ &-iran:before {
+ background-position: -36px -780px !important;
+ }
+ &-is:before,
+ &-iceland:before {
+ background-position: -36px -806px !important;
+ }
+ &-it:before,
+ &-italy:before {
+ background-position: -36px -832px !important;
+ }
+ &-jm:before,
+ &-jamaica:before {
+ background-position: -36px -858px !important;
+ }
+ &-jo:before,
+ &-jordan:before {
+ background-position: -36px -884px !important;
+ }
+ &-jp:before,
+ &-japan:before {
+ background-position: -36px -910px !important;
+ }
+ &-ke:before,
+ &-kenya:before {
+ background-position: -36px -936px !important;
+ }
+ &-kg:before,
+ &-kyrgyzstan:before {
+ background-position: -36px -962px !important;
+ }
+ &-kh:before,
+ &-cambodia:before {
+ background-position: -36px -988px !important;
+ }
+ &-ki:before,
+ &-kiribati:before {
+ background-position: -36px -1014px !important;
+ }
+ &-km:before,
+ &-comoros:before {
+ background-position: -36px -1040px !important;
+ }
+ &-kn:before,
+ &-saint-kitts-and-nevis:before {
+ background-position: -36px -1066px !important;
+ }
+ &-kp:before,
+ &-north-korea:before {
+ background-position: -36px -1092px !important;
+ }
+ &-kr:before,
+ &-south-korea:before {
+ background-position: -36px -1118px !important;
+ }
+ &-kw:before,
+ &-kuwait:before {
+ background-position: -36px -1144px !important;
+ }
+ &-ky:before,
+ &-cayman-islands:before {
+ background-position: -36px -1170px !important;
+ }
+ &-kz:before,
+ &-kazakhstan:before {
+ background-position: -36px -1196px !important;
+ }
+ &-la:before,
+ &-laos:before {
+ background-position: -36px -1222px !important;
+ }
+ &-lb:before,
+ &-lebanon:before {
+ background-position: -36px -1248px !important;
+ }
+ &-lc:before,
+ &-saint-lucia:before {
+ background-position: -36px -1274px !important;
+ }
+ &-li:before,
+ &-liechtenstein:before {
+ background-position: -36px -1300px !important;
+ }
+ &-lk:before,
+ &-sri-lanka:before {
+ background-position: -36px -1326px !important;
+ }
+ &-lr:before,
+ &-liberia:before {
+ background-position: -36px -1352px !important;
+ }
+ &-ls:before,
+ &-lesotho:before {
+ background-position: -36px -1378px !important;
+ }
+ &-lt:before,
+ &-lithuania:before {
+ background-position: -36px -1404px !important;
+ }
+ &-lu:before,
+ &-luxembourg:before {
+ background-position: -36px -1430px !important;
+ }
+ &-lv:before,
+ &-latvia:before {
+ background-position: -36px -1456px !important;
+ }
+ &-ly:before,
+ &-libya:before {
+ background-position: -36px -1482px !important;
+ }
+ &-ma:before,
+ &-morocco:before {
+ background-position: -36px -1508px !important;
+ }
+ &-mc:before,
+ &-monaco:before {
+ background-position: -36px -1534px !important;
+ }
+ &-md:before,
+ &-moldova:before {
+ background-position: -36px -1560px !important;
+ }
+ &-me:before,
+ &-montenegro:before {
+ background-position: -36px -1586px !important;
+ }
+ &-mg:before,
+ &-madagascar:before {
+ background-position: -36px -1613px !important;
+ }
+ &-mh:before,
+ &-marshall-islands:before {
+ background-position: -36px -1639px !important;
+ }
+ &-mk:before,
+ &-macedonia:before {
+ background-position: -36px -1665px !important;
+ }
+ &-ml:before,
+ &-mali:before {
+ background-position: -36px -1691px !important;
+ }
+ &-mm:before,
+ &-myanmar:before,
+ &-burma:before {
+ background-position: -73px -1821px !important;
+ }
+ &-mn:before,
+ &-mongolia:before {
+ background-position: -36px -1743px !important;
+ }
+ &-mo:before,
+ &-macau:before {
+ background-position: -36px -1769px !important;
+ }
+ &-mp:before,
+ &-northern-mariana-islands:before {
+ background-position: -36px -1795px !important;
+ }
+ &-mq:before,
+ &-martinique:before {
+ background-position: -36px -1821px !important;
+ }
+ &-mr:before,
+ &-mauritania:before {
+ background-position: -36px -1847px !important;
+ }
+ &-ms:before,
+ &-montserrat:before {
+ background-position: -36px -1873px !important;
+ }
+ &-mt:before,
+ &-malta:before {
+ background-position: -36px -1899px !important;
+ }
+ &-mu:before,
+ &-mauritius:before {
+ background-position: -36px -1925px !important;
+ }
+ &-mv:before,
+ &-maldives:before {
+ background-position: -36px -1951px !important;
+ }
+ &-mw:before,
+ &-malawi:before {
+ background-position: -36px -1977px !important;
+ }
+ &-mx:before,
+ &-mexico:before {
+ background-position: -72px 0 !important;
+ }
+ &-my:before,
+ &-malaysia:before {
+ background-position: -72px -26px !important;
+ }
+ &-mz:before,
+ &-mozambique:before {
+ background-position: -72px -52px !important;
+ }
+ &-na:before,
+ &-namibia:before {
+ background-position: -72px -78px !important;
+ }
+ &-nc:before,
+ &-new-caledonia:before {
+ background-position: -72px -104px !important;
+ }
+ &-ne:before,
+ &-niger:before {
+ background-position: -72px -130px !important;
+ }
+ &-nf:before,
+ &-norfolk-island:before {
+ background-position: -72px -156px !important;
+ }
+ &-ng:before,
+ &-nigeria:before {
+ background-position: -72px -182px !important;
+ }
+ &-ni:before,
+ &-nicaragua:before {
+ background-position: -72px -208px !important;
+ }
+ &-nl:before,
+ &-netherlands:before {
+ background-position: -72px -234px !important;
+ }
+ &-no:before,
+ &-norway:before {
+ background-position: -72px -260px !important;
+ }
+ &-np:before,
+ &-nepal:before {
+ background-position: -72px -286px !important;
+ }
+ &-nr:before,
+ &-nauru:before {
+ background-position: -72px -312px !important;
+ }
+ &-nu:before,
+ &-niue:before {
+ background-position: -72px -338px !important;
+ }
+ &-nz:before,
+ &-new-zealand:before {
+ background-position: -72px -364px !important;
+ }
+ &-om:before,
+ &-oman:before {
+ background-position: -72px -390px !important;
+ }
+ &-pa:before,
+ &-panama:before {
+ background-position: -72px -416px !important;
+ }
+ &-pe:before,
+ &-peru:before {
+ background-position: -72px -442px !important;
+ }
+ &-pf:before,
+ &-french-polynesia:before {
+ background-position: -72px -468px !important;
+ }
+ &-pg:before,
+ &-new-guinea:before {
+ background-position: -72px -494px !important;
+ }
+ &-ph:before,
+ &-philippines:before {
+ background-position: -72px -520px !important;
+ }
+ &-pk:before,
+ &-pakistan:before {
+ background-position: -72px -546px !important;
+ }
+ &-pl:before,
+ &-poland:before {
+ background-position: -72px -572px !important;
+ }
+ &-pm:before,
+ &-saint-pierre:before {
+ background-position: -72px -598px !important;
+ }
+ &-pn:before,
+ &-pitcairn-islands:before {
+ background-position: -72px -624px !important;
+ }
+ &-pr:before,
+ &-puerto-rico:before {
+ background-position: -72px -650px !important;
+ }
+ &-ps:before,
+ &-palestine:before {
+ background-position: -72px -676px !important;
+ }
+ &-pt:before,
+ &-portugal:before {
+ background-position: -72px -702px !important;
+ }
+ &-pw:before,
+ &-palau:before {
+ background-position: -72px -728px !important;
+ }
+ &-py:before,
+ &-paraguay:before {
+ background-position: -72px -754px !important;
+ }
+ &-qa:before,
+ &-qatar:before {
+ background-position: -72px -780px !important;
+ }
+ &-re:before,
+ &-reunion:before {
+ background-position: -72px -806px !important;
+ }
+ &-ro:before,
+ &-romania:before {
+ background-position: -72px -832px !important;
+ }
+ &-rs:before,
+ &-serbia:before {
+ background-position: -72px -858px !important;
+ }
+ &-ru:before,
+ &-russia:before {
+ background-position: -72px -884px !important;
+ }
+ &-rw:before,
+ &-rwanda:before {
+ background-position: -72px -910px !important;
+ }
+ &-sa:before,
+ &-saudi-arabia:before {
+ background-position: -72px -936px !important;
+ }
+ &-sb:before,
+ &-solomon-islands:before {
+ background-position: -72px -962px !important;
+ }
+ &-sc:before,
+ &-seychelles:before {
+ background-position: -72px -988px !important;
+ }
+ &-gb-sct:before,
+ &-scotland:before {
+ background-position: -72px -1014px !important;
+ }
+ &-sd:before,
+ &-sudan:before {
+ background-position: -72px -1040px !important;
+ }
+ &-se:before,
+ &-sweden:before {
+ background-position: -72px -1066px !important;
+ }
+ &-sg:before,
+ &-singapore:before {
+ background-position: -72px -1092px !important;
+ }
+ &-sh:before,
+ &-saint-helena:before {
+ background-position: -72px -1118px !important;
+ }
+ &-si:before,
+ &-slovenia:before {
+ background-position: -72px -1144px !important;
+ }
+ &-sj:before,
+ &-svalbard:before,
+ &-jan-mayen:before {
+ background-position: -72px -1170px !important;
+ }
+ &-sk:before,
+ &-slovakia:before {
+ background-position: -72px -1196px !important;
+ }
+ &-sl:before,
+ &-sierra-leone:before {
+ background-position: -72px -1222px !important;
+ }
+ &-sm:before,
+ &-san-marino:before {
+ background-position: -72px -1248px !important;
+ }
+ &-sn:before,
+ &-senegal:before {
+ background-position: -72px -1274px !important;
+ }
+ &-so:before,
+ &-somalia:before {
+ background-position: -72px -1300px !important;
+ }
+ &-sr:before,
+ &-suriname:before {
+ background-position: -72px -1326px !important;
+ }
+ &-st:before,
+ &-sao-tome:before {
+ background-position: -72px -1352px !important;
+ }
+ &-sv:before,
+ &-el-salvador:before {
+ background-position: -72px -1378px !important;
+ }
+ &-sy:before,
+ &-syria:before {
+ background-position: -72px -1404px !important;
+ }
+ &-sz:before,
+ &-swaziland:before {
+ background-position: -72px -1430px !important;
+ }
+ &-tc:before,
+ &-caicos-islands:before {
+ background-position: -72px -1456px !important;
+ }
+ &-td:before,
+ &-chad:before {
+ background-position: -72px -1482px !important;
+ }
+ &-tf:before,
+ &-french-territories:before {
+ background-position: -72px -1508px !important;
+ }
+ &-tg:before,
+ &-togo:before {
+ background-position: -72px -1534px !important;
+ }
+ &-th:before,
+ &-thailand:before {
+ background-position: -72px -1560px !important;
+ }
+ &-tj:before,
+ &-tajikistan:before {
+ background-position: -72px -1586px !important;
+ }
+ &-tk:before,
+ &-tokelau:before {
+ background-position: -72px -1612px !important;
+ }
+ &-tl:before,
+ &-timorleste:before {
+ background-position: -72px -1638px !important;
+ }
+ &-tm:before,
+ &-turkmenistan:before {
+ background-position: -72px -1664px !important;
+ }
+ &-tn:before,
+ &-tunisia:before {
+ background-position: -72px -1690px !important;
+ }
+ &-to:before,
+ &-tonga:before {
+ background-position: -72px -1716px !important;
+ }
+ &-tr:before,
+ &-turkey:before {
+ background-position: -72px -1742px !important;
+ }
+ &-tt:before,
+ &-trinidad:before {
+ background-position: -72px -1768px !important;
+ }
+ &-tv:before,
+ &-tuvalu:before {
+ background-position: -72px -1794px !important;
+ }
+ &-tw:before,
+ &-taiwan:before {
+ background-position: -72px -1820px !important;
+ }
+ &-tz:before,
+ &-tanzania:before {
+ background-position: -72px -1846px !important;
+ }
+ &-ua:before,
+ &-ukraine:before {
+ background-position: -72px -1872px !important;
+ }
+ &-ug:before,
+ &-uganda:before {
+ background-position: -72px -1898px !important;
+ }
+ &-um:before,
+ &-us-minor-islands:before {
+ background-position: -72px -1924px !important;
+ }
+ &-us:before,
+ &-america:before,
+ &-united-states:before {
+ background-position: -72px -1950px !important;
+ }
+ &-uy:before,
+ &-uruguay:before {
+ background-position: -72px -1976px !important;
+ }
+ &-uz:before,
+ &-uzbekistan:before {
+ background-position: -108px 0 !important;
+ }
+ &-va:before,
+ &-vatican-city:before {
+ background-position: -108px -26px !important;
+ }
+ &-vc:before,
+ &-saint-vincent:before {
+ background-position: -108px -52px !important;
+ }
+ &-ve:before,
+ &-venezuela:before {
+ background-position: -108px -78px !important;
+ }
+ &-vg:before,
+ &-british-virgin-islands:before {
+ background-position: -108px -104px !important;
+ }
+ &-vi:before,
+ &-us-virgin-islands:before {
+ background-position: -108px -130px !important;
+ }
+ &-vn:before,
+ &-vietnam:before {
+ background-position: -108px -156px !important;
+ }
+ &-vu:before,
+ &-vanuatu:before {
+ background-position: -108px -182px !important;
+ }
+ &-gb-wls:before,
+ &-wales:before {
+ background-position: -108px -208px !important;
+ }
+ &-wf:before,
+ &-wallis-and-futuna:before {
+ background-position: -108px -234px !important;
+ }
+ &-ws:before,
+ &-samoa:before {
+ background-position: -108px -260px !important;
+ }
+ &-ye:before,
+ &-yemen:before {
+ background-position: -108px -286px !important;
+ }
+ &-yt:before,
+ &-mayotte:before {
+ background-position: -108px -312px !important;
+ }
+ &-za:before,
+ &-south-africa:before {
+ background-position: -108px -338px !important;
+ }
+ &-zm:before,
+ &-zambia:before {
+ background-position: -108px -364px !important;
+ }
+ &-zw:before,
+ &-zimbabwe:before {
+ background-position: -108px -390px !important;
+ }
+}
+/*******************************
+ Site Overrides
+*******************************/
diff --git a/src/scss/free/_functions.scss b/src/scss/free/_functions.scss
new file mode 100644
index 0000000..f9432fa
--- /dev/null
+++ b/src/scss/free/_functions.scss
@@ -0,0 +1,18 @@
+// Functions
+
+// Dynamically change text color based on background color
+
+@function set-notification-text-color($color) {
+ @if (lightness($color) > 70) {
+ @return $gray-800;
+ } @else {
+ @return $white;
+ }
+}
+
+@function color-level($color: $primary, $level: 0) {
+ $color-base: if($level > 0, $black, $white);
+ $level: abs($level);
+
+ @return mix($color-base, $color, $level);
+}
diff --git a/src/scss/free/_images.scss b/src/scss/free/_images.scss
new file mode 100644
index 0000000..7aa434b
--- /dev/null
+++ b/src/scss/free/_images.scss
@@ -0,0 +1,60 @@
+//
+// Images
+//
+
+.bg-image {
+ position: relative;
+ overflow: hidden;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center center;
+}
+
+.mask {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ background-attachment: fixed;
+}
+
+.hover-overlay {
+ .mask {
+ opacity: 0;
+ transition: $image-hover-overlay-transition;
+ &:hover {
+ opacity: 1;
+ }
+ }
+}
+
+.hover-zoom {
+ img,
+ video {
+ transition: $image-hover-zoom-transition;
+ }
+ &:hover {
+ img,
+ video {
+ transform: $image-hover-zoom-transform;
+ }
+ }
+}
+
+.hover-shadow,
+.card.hover-shadow {
+ box-shadow: none;
+ transition: $image-hover-shadow-transition;
+ &:hover {
+ box-shadow: $image-hover-shadow-box-shadow;
+ transition: $image-hover-shadow-transition;
+ }
+}
+
+.bg-fixed {
+ background-attachment: fixed;
+}
diff --git a/src/scss/free/_list-group.scss b/src/scss/free/_list-group.scss
new file mode 100644
index 0000000..10625b9
--- /dev/null
+++ b/src/scss/free/_list-group.scss
@@ -0,0 +1,10 @@
+// List group
+
+.list-group-item-action {
+ transition: 0.5s;
+
+ // Hover state
+ &:hover {
+ transition: 0.5s;
+ }
+}
diff --git a/src/scss/free/_mixins.scss b/src/scss/free/_mixins.scss
new file mode 100644
index 0000000..b8a9009
--- /dev/null
+++ b/src/scss/free/_mixins.scss
@@ -0,0 +1,8 @@
+// Toggles
+//
+// Used in conjunction with global variables to enable certain theme features.
+
+// Components
+@import './mixins/buttons';
+@import './mixins/ripple';
+@import './mixins/table-variants';
diff --git a/src/scss/free/_modal.scss b/src/scss/free/_modal.scss
new file mode 100644
index 0000000..e130212
--- /dev/null
+++ b/src/scss/free/_modal.scss
@@ -0,0 +1,5 @@
+// Modal
+.modal-content {
+ border: 0;
+ box-shadow: $modal-box-shadow;
+}
diff --git a/src/scss/free/_nav.scss b/src/scss/free/_nav.scss
new file mode 100644
index 0000000..46e4245
--- /dev/null
+++ b/src/scss/free/_nav.scss
@@ -0,0 +1,66 @@
+// Navs
+
+//
+// Tabs
+//
+
+.nav-tabs {
+ border-bottom: 0;
+
+ .nav-link {
+ border-width: $nav-tabs-link-border-width;
+ border-style: solid;
+ border-color: transparent;
+ border-radius: 0;
+ text-transform: uppercase;
+ line-height: 1;
+ font-weight: $nav-tabs-link-font-weight;
+ font-size: $nav-tabs-link-font-size;
+ color: $nav-tabs-link-color;
+ padding: $nav-tabs-link-padding-top $nav-tabs-link-padding-x $nav-tabs-link-padding-bottom
+ $nav-tabs-link-padding-x;
+
+ &:hover {
+ background-color: $nav-tabs-link-hover-background-color;
+ border-color: transparent;
+ }
+
+ &:focus {
+ border-color: transparent;
+ }
+ }
+
+ .nav-link.active,
+ .nav-item.show .nav-link {
+ color: $primary;
+ border-color: $primary;
+ }
+}
+
+//
+// Pills
+//
+
+.nav-pills {
+ margin-left: -$nav-pills-margin;
+
+ .nav-link {
+ border-radius: $nav-pills-link-border-radius;
+ font-size: $nav-pills-link-font-size;
+ text-transform: uppercase;
+ padding: $nav-pills-link-padding-top $nav-pills-link-padding-x $nav-pills-link-padding-bottom
+ $nav-pills-link-padding-x;
+ line-height: $nav-pills-link-line-height;
+ background-color: $nav-pills-link-background-color;
+ font-weight: $nav-pills-link-font-weight;
+ color: $nav-pills-link-color;
+ margin: $nav-pills-margin;
+ }
+
+ .nav-link.active,
+ .show > .nav-link {
+ color: $nav-pills-link-active-color;
+ background-color: $nav-pills-link-active-bg;
+ box-shadow: $btn-box-shadow;
+ }
+}
diff --git a/src/scss/free/_navbar.scss b/src/scss/free/_navbar.scss
new file mode 100644
index 0000000..51a1a78
--- /dev/null
+++ b/src/scss/free/_navbar.scss
@@ -0,0 +1,43 @@
+// Navbar
+
+.navbar {
+ box-shadow: $navbar-box-shadow;
+ padding-top: $navbar-padding-top;
+}
+
+.navbar-toggler {
+ border: 0;
+
+ &:focus {
+ box-shadow: none;
+ }
+}
+
+.navbar-dark .navbar-toggler,
+.navbar-light .navbar-toggler {
+ border: 0;
+}
+
+.navbar-brand {
+ display: flex;
+ align-items: center;
+ img {
+ margin-right: $navbar-brand-img-margin-right;
+ }
+}
+
+.navbar-nav .dropdown-menu {
+ position: absolute;
+}
+
+.navbar-light {
+ .navbar-toggler-icon {
+ background-image: none;
+ }
+}
+
+.navbar-dark {
+ .navbar-toggler-icon {
+ background-image: none;
+ }
+}
diff --git a/src/scss/free/_pagination.scss b/src/scss/free/_pagination.scss
new file mode 100644
index 0000000..9e740cc
--- /dev/null
+++ b/src/scss/free/_pagination.scss
@@ -0,0 +1,96 @@
+// Pagination
+
+.page-link {
+ border: 0;
+ font-size: $pagination-font-size;
+ color: $pagination-color;
+ background-color: transparent;
+ border: 0;
+ outline: 0;
+ transition: $pagination-transition;
+ border-radius: $pagination-border-radius;
+
+ &:hover {
+ color: $pagination-hover-color;
+ }
+
+ &:focus {
+ box-shadow: none;
+ }
+}
+
+.page-item {
+ &.active .page-link {
+ background-color: $pagination-active-bg;
+ border: 0;
+ box-shadow: $pagination-active-box-shadow;
+ transition: $pagination-active-transition;
+ }
+
+ &:first-child {
+ .page-link {
+ border-top-left-radius: $pagination-border-radius;
+ border-bottom-left-radius: $pagination-border-radius;
+ }
+ }
+
+ &:last-child {
+ .page-link {
+ border-top-right-radius: $pagination-border-radius;
+ border-bottom-right-radius: $pagination-border-radius;
+ }
+ }
+ &:not(:first-child) {
+ .page-link {
+ margin-left: 0;
+ }
+ }
+}
+
+.pagination-lg,
+.pagination-sm {
+ .page-item {
+ &:first-child .page-link {
+ border-top-left-radius: $pagination-border-radius;
+ border-bottom-left-radius: $pagination-border-radius;
+ }
+ &:last-child .page-link {
+ border-top-right-radius: $pagination-border-radius;
+ border-bottom-right-radius: $pagination-border-radius;
+ }
+ }
+}
+
+.pagination-circle {
+ .page-item {
+ &:first-child {
+ .page-link {
+ border-radius: $pagination-circle-border-radius;
+ }
+ }
+
+ &:last-child {
+ .page-link {
+ border-radius: $pagination-circle-border-radius;
+ }
+ }
+ }
+ .page-link {
+ border-radius: $pagination-circle-border-radius;
+ padding-left: $pagination-circle-padding-x;
+ padding-right: $pagination-circle-padding-x;
+ }
+
+ &.pagination-lg {
+ .page-link {
+ padding-left: $pagination-circle-lg-padding-left;
+ padding-right: $pagination-circle-lg-padding-right;
+ }
+ }
+ &.pagination-sm {
+ .page-link {
+ padding-left: $pagination-circle-sm-padding-left;
+ padding-right: $pagination-circle-sm-padding-right;
+ }
+ }
+}
diff --git a/src/scss/free/_popover.scss b/src/scss/free/_popover.scss
new file mode 100644
index 0000000..08f2f96
--- /dev/null
+++ b/src/scss/free/_popover.scss
@@ -0,0 +1,14 @@
+// Popover
+
+.popover {
+ border: 0;
+ box-shadow: $popover-box-shadow;
+
+ .popover-arrow {
+ display: none;
+ }
+}
+
+.popover-header {
+ background-color: $popover-background-color;
+}
diff --git a/src/scss/free/_progress.scss b/src/scss/free/_progress.scss
new file mode 100644
index 0000000..c13114e
--- /dev/null
+++ b/src/scss/free/_progress.scss
@@ -0,0 +1,5 @@
+// Progress
+
+.progress {
+ border-radius: 0;
+}
diff --git a/src/scss/free/_range.scss b/src/scss/free/_range.scss
new file mode 100644
index 0000000..fd70d92
--- /dev/null
+++ b/src/scss/free/_range.scss
@@ -0,0 +1,45 @@
+// range
+.range {
+ position: relative;
+
+ .thumb {
+ position: absolute;
+ display: block;
+ height: 30px;
+ width: 30px;
+ top: -35px;
+ margin-left: -15px;
+ text-align: center;
+ border-radius: 50% 50% 50% 0;
+ transform: scale(0);
+ transform-origin: bottom;
+ transition: transform 0.2s ease-in-out;
+
+ &:after {
+ position: absolute;
+ display: block;
+ content: '';
+ transform: translateX(-50%);
+ width: 100%;
+ height: 100%;
+ top: 0;
+ border-radius: 50% 50% 50% 0;
+ transform: rotate(-45deg);
+ background: #1266f1;
+ z-index: -1;
+ }
+
+ .thumb-value {
+ display: block;
+ font-size: 12px;
+ line-height: 30px;
+ color: rgb(255, 255, 255);
+ font-weight: 500;
+ z-index: 2;
+ }
+
+ &.thumb-active {
+ transform: scale(1);
+ }
+ }
+}
diff --git a/src/scss/free/_reboot.scss b/src/scss/free/_reboot.scss
new file mode 100644
index 0000000..4890327
--- /dev/null
+++ b/src/scss/free/_reboot.scss
@@ -0,0 +1,17 @@
+// Reboot
+
+body {
+ font-family: $font-family-base;
+ line-height: $line-height-base;
+ color: $body-color;
+}
+
+// Links
+
+a {
+ text-decoration: none;
+}
+
+button:focus {
+ outline: 0;
+}
\ No newline at end of file
diff --git a/src/scss/free/_ripple.scss b/src/scss/free/_ripple.scss
new file mode 100644
index 0000000..3e8877e
--- /dev/null
+++ b/src/scss/free/_ripple.scss
@@ -0,0 +1,40 @@
+.ripple-surface {
+ position: relative;
+ overflow: hidden;
+ display: inline-block;
+ vertical-align: bottom;
+}
+
+.ripple-surface-unbound {
+ overflow: visible;
+}
+
+.ripple-wave {
+ @include ripple-variant(black);
+ $cubicBezier: cubic-bezier(0, 0, 0.15, 1);
+ border-radius: 50%;
+ opacity: 0.5;
+ pointer-events: none;
+ position: absolute;
+ touch-action: none;
+ transform: scale(0);
+ transition-property: transform, opacity;
+ transition-timing-function: $cubicBezier, $cubicBezier;
+ z-index: 999;
+ &.active {
+ transform: scale(1);
+ opacity: 0;
+ }
+}
+
+.btn .ripple-wave {
+ @include ripple-variant(white);
+}
+
+@each $color, $value in $theme-colors {
+ .ripple-surface-#{$color} {
+ .ripple-wave {
+ @include ripple-variant($value);
+ }
+ }
+}
diff --git a/src/scss/free/_root.scss b/src/scss/free/_root.scss
new file mode 100644
index 0000000..d5eb6f1
--- /dev/null
+++ b/src/scss/free/_root.scss
@@ -0,0 +1,3 @@
+:root {
+ --mdb-font-roboto: #{inspect($font-family-roboto)};
+}
\ No newline at end of file
diff --git a/src/scss/free/_scrollspy.scss b/src/scss/free/_scrollspy.scss
new file mode 100644
index 0000000..5e59650
--- /dev/null
+++ b/src/scss/free/_scrollspy.scss
@@ -0,0 +1,29 @@
+// Scrollspy
+
+.nav-pills {
+ &.menu-sidebar {
+ .nav-link {
+ font-size: $scrollspy-menu-sidebar-font-size;
+ background-color: transparent;
+ color: $scrollspy-menu-sidebar-color;
+ line-height: $scrollspy-menu-sidebar-line-height;
+ padding: 0 $scrollspy-menu-sidebar-padding-x;
+ font-weight: $scrollspy-menu-sidebar-font-weight;
+ transition: $scrollspy-menu-sidebar-transition;
+ text-transform: initial;
+ margin-top: $scrollspy-menu-sidebar-margin-y;
+ margin-bottom: $scrollspy-menu-sidebar-margin-y;
+ }
+
+ .nav-link.active,
+ .show > .nav-link {
+ background-color: transparent;
+ box-shadow: none;
+ color: $scrollspy-menu-sidebar-active-color;
+ font-weight: $scrollspy-menu-sidebar-active-font-weight;
+ border-left: $scrollspy-menu-sidebar-active-border-width solid
+ $scrollspy-menu-sidebar-active-border-color;
+ border-radius: 0;
+ }
+ }
+}
diff --git a/src/scss/free/_shadows.scss b/src/scss/free/_shadows.scss
new file mode 100644
index 0000000..1044fce
--- /dev/null
+++ b/src/scss/free/_shadows.scss
@@ -0,0 +1,12 @@
+// Shadows
+@each $shadow, $value in $shadows-light {
+ .shadow-#{$shadow} {
+ box-shadow: $value !important;
+ }
+}
+
+@each $shadow, $value in $shadows-strong {
+ .shadow-#{$shadow}-strong {
+ box-shadow: $value !important;
+ }
+}
diff --git a/src/scss/free/_tables.scss b/src/scss/free/_tables.scss
new file mode 100644
index 0000000..a8584fd
--- /dev/null
+++ b/src/scss/free/_tables.scss
@@ -0,0 +1,36 @@
+//
+// Basic MDB table
+//
+
+.table {
+ font-size: $table-font-size;
+
+ > :not(caption) > * > * {
+ padding: $table-cell-padding-y $table-cell-padding-x;
+ transition: $table-hover-transition;
+ background-image: none;
+ background-color: var(--bs-table-accent-bg);
+ }
+
+ th {
+ font-weight: 500;
+ }
+
+ tbody {
+ font-weight: 300;
+ }
+
+ > :not(:last-child) > :last-child > * {
+ border-bottom-color: $table-group-separator-color;
+ }
+}
+
+.table-sm {
+ > :not(caption) > * > * {
+ padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
+ }
+}
+
+@each $color, $value in $table-variants {
+ @include table-variant-mdb($color, $value);
+}
diff --git a/src/scss/free/_toasts.scss b/src/scss/free/_toasts.scss
new file mode 100644
index 0000000..9505a26
--- /dev/null
+++ b/src/scss/free/_toasts.scss
@@ -0,0 +1,28 @@
+// Toasts
+
+.toast {
+ background-color: $toast-background-color;
+ border: 0;
+ box-shadow: $toast-box-shadow;
+
+ .btn-close {
+ width: 1.3em;
+ }
+}
+
+.toast-header {
+ background-color: $toast-header-background-color;
+}
+
+.parent-toast-relative {
+ position: relative;
+}
+
+.toast-absolute {
+ position: absolute;
+}
+
+.toast-fixed {
+ position: fixed;
+ z-index: $zindex-toast;
+}
diff --git a/src/scss/free/_tooltip.scss b/src/scss/free/_tooltip.scss
new file mode 100644
index 0000000..2affd9a
--- /dev/null
+++ b/src/scss/free/_tooltip.scss
@@ -0,0 +1,19 @@
+// Tooltip
+
+.tooltip {
+ &.show {
+ opacity: 1;
+ }
+
+ .tooltip-arrow {
+ display: none;
+ }
+}
+
+.tooltip-inner {
+ color: $tooltip-inner-color;
+ padding: $tooltip-inner-padding-y $tooltip-inner-padding-x;
+ font-size: $tooltip-inner-font-size;
+ background-color: $tooltip-inner-background-color;
+ border-radius: $tooltip-inner-border-radius;
+}
diff --git a/src/scss/free/_type.scss b/src/scss/free/_type.scss
new file mode 100644
index 0000000..7530474
--- /dev/null
+++ b/src/scss/free/_type.scss
@@ -0,0 +1,25 @@
+// Type
+.note {
+ padding: $note-padding;
+ border-left: $note-border-width solid;
+ border-radius: $note-border-radius;
+ strong {
+ font-weight: $note-strong-font-weight;
+ }
+ p {
+ font-weight: $note-paragraph-font-weight;
+ }
+}
+
+@each $name, $color in $note {
+ .note-#{$name} {
+ background-color: map-get($color, bgc);
+ border-color: map-get($color, border-color);
+ }
+}
+
+.w-responsive {
+ @media (min-width: 1199px) {
+ width: 75%;
+ }
+}
diff --git a/src/scss/free/_variables.scss b/src/scss/free/_variables.scss
new file mode 100644
index 0000000..0f59c32
--- /dev/null
+++ b/src/scss/free/_variables.scss
@@ -0,0 +1,952 @@
+// Variables
+
+$enable-negative-margins: true !default;
+
+// Grays
+$white: #fff !default;
+$gray-50: #fbfbfb !default;
+$gray-100: #f5f5f5 !default;
+$gray-200: #eeeeee !default;
+$gray-300: #e0e0e0 !default;
+$gray-400: #bdbdbd !default;
+$gray-500: #9e9e9e !default;
+$gray-600: #757575 !default;
+$gray-700: #616161 !default;
+$gray-800: #4f4f4f !default;
+$gray-900: #262626 !default;
+$black: #000 !default;
+
+// Material Design Color System - start
+$blue-50: #e3f2fd !default;
+$blue-100: #bbdefb !default;
+$blue-200: #90caf9 !default;
+$blue-300: #64b5f6 !default;
+$blue-400: #42a5f5 !default;
+$blue-500: #2196f3 !default;
+$blue-600: #1e88e5 !default;
+$blue-700: #1976d2 !default;
+$blue-800: #1565c0 !default;
+$blue-900: #0d47a1 !default;
+$blue-accent-100: #82b1ff !default;
+$blue-accent-200: #448aff !default;
+$blue-accent-400: #2979ff !default;
+$blue-accent-700: #2962ff !default;
+
+$indigo-50: #e8eaf6 !default;
+$indigo-100: #c5cae9 !default;
+$indigo-200: #9fa8da !default;
+$indigo-300: #7986cb !default;
+$indigo-400: #5c6bc0 !default;
+$indigo-500: #3f51b5 !default;
+$indigo-600: #3949ab !default;
+$indigo-700: #303f9f !default;
+$indigo-800: #283593 !default;
+$indigo-900: #1a237e !default;
+$indigo-accent-100: #8c9eff !default;
+$indigo-accent-200: #536dfe !default;
+$indigo-accent-400: #3d5afe !default;
+$indigo-accent-700: #304ffe !default;
+
+$purple-50: #f3e5f5 !default;
+$purple-100: #e1bee7 !default;
+$purple-200: #ce93d8 !default;
+$purple-300: #ba68c8 !default;
+$purple-400: #ab47bc !default;
+$purple-500: #9c27b0 !default;
+$purple-600: #8e24aa !default;
+$purple-700: #7b1fa2 !default;
+$purple-800: #6a1b9a !default;
+$purple-900: #4a148c !default;
+$purple-accent-100: #ea80fc !default;
+$purple-accent-200: #e040fb !default;
+$purple-accent-400: #d500f9 !default;
+$purple-accent-700: #aa00ff !default;
+
+$pink-50: #fce4ec !default;
+$pink-100: #f8bbd0 !default;
+$pink-200: #f48fb1 !default;
+$pink-300: #f06292 !default;
+$pink-400: #ec407a !default;
+$pink-500: #e91e63 !default;
+$pink-600: #d81b60 !default;
+$pink-700: #c2185b !default;
+$pink-800: #ad1457 !default;
+$pink-900: #880e4f !default;
+$pink-accent-100: #ff80ab !default;
+$pink-accent-200: #ff4081 !default;
+$pink-accent-400: #f50057 !default;
+$pink-accent-700: #c51162 !default;
+
+$red-50: #ffebee !default;
+$red-100: #ffcdd2 !default;
+$red-200: #ef9a9a !default;
+$red-300: #e57373 !default;
+$red-400: #ef5350 !default;
+$red-500: #f44336 !default;
+$red-600: #e53935 !default;
+$red-700: #d32f2f !default;
+$red-800: #c62828 !default;
+$red-900: #b71c1c !default;
+$red-accent-100: #ff8a80 !default;
+$red-accent-200: #ff5252 !default;
+$red-accent-400: #ff1744 !default;
+$red-accent-700: #d50000 !default;
+
+$orange-50: #fff3e0 !default;
+$orange-100: #ffe0b2 !default;
+$orange-200: #ffcc80 !default;
+$orange-300: #ffb74d !default;
+$orange-400: #ffa726 !default;
+$orange-500: #ff9800 !default;
+$orange-600: #fb8c00 !default;
+$orange-700: #f57c00 !default;
+$orange-800: #ef6c00 !default;
+$orange-900: #e65100 !default;
+$orange-accent-100: #ffd180 !default;
+$orange-accent-200: #ffab40 !default;
+$orange-accent-400: #ff9100 !default;
+$orange-accent-700: #ff6d00 !default;
+
+$yellow-50: #fffde7 !default;
+$yellow-100: #fff9c4 !default;
+$yellow-200: #fff59d !default;
+$yellow-300: #fff176 !default;
+$yellow-400: #ffee58 !default;
+$yellow-500: #ffeb3b !default;
+$yellow-600: #fdd835 !default;
+$yellow-700: #fbc02d !default;
+$yellow-800: #f9a825 !default;
+$yellow-900: #f57f17 !default;
+$yellow-accent-100: #ffff8d !default;
+$yellow-accent-200: #ffff00 !default;
+$yellow-accent-400: #ffea00 !default;
+$yellow-accent-700: #ffd600 !default;
+
+$green-50: #e8f5e9 !default;
+$green-100: #c8e6c9 !default;
+$green-200: #a5d6a7 !default;
+$green-300: #81c784 !default;
+$green-400: #66bb6a !default;
+$green-500: #4caf50 !default;
+$green-600: #43a047 !default;
+$green-700: #388e3c !default;
+$green-800: #2e7d32 !default;
+$green-900: #1b5e20 !default;
+$green-accent-100: #b9f6ca !default;
+$green-accent-200: #69f0ae !default;
+$green-accent-400: #00e676 !default;
+$green-accent-700: #00c853 !default;
+
+$teal-50: #e0f2f1 !default;
+$teal-100: #b2dfdb !default;
+$teal-200: #80cbc4 !default;
+$teal-300: #4db6ac !default;
+$teal-400: #26a69a !default;
+$teal-500: #009688 !default;
+$teal-600: #00897b !default;
+$teal-700: #00796b !default;
+$teal-800: #00695c !default;
+$teal-900: #004d40 !default;
+$teal-accent-100: #a7ffeb !default;
+$teal-accent-200: #64ffda !default;
+$teal-accent-400: #1de9b6 !default;
+$teal-accent-700: #00bfa5 !default;
+
+$cyan-50: #e0f7fa !default;
+$cyan-100: #b2ebf2 !default;
+$cyan-200: #80deea !default;
+$cyan-300: #4dd0e1 !default;
+$cyan-400: #26c6da !default;
+$cyan-500: #00bcd4 !default;
+$cyan-600: #00acc1 !default;
+$cyan-700: #0097a7 !default;
+$cyan-800: #00838f !default;
+$cyan-900: #006064 !default;
+$cyan-accent-100: #84ffff !default;
+$cyan-accent-200: #18ffff !default;
+$cyan-accent-400: #00e5ff !default;
+$cyan-accent-700: #00b8d4 !default;
+
+$deep-purple-50: #ede7f6 !default;
+$deep-purple-100: #d1c4e9 !default;
+$deep-purple-200: #b39ddb !default;
+$deep-purple-300: #9575cd !default;
+$deep-purple-400: #7e57c2 !default;
+$deep-purple-500: #673ab7 !default;
+$deep-purple-600: #5e35b1 !default;
+$deep-purple-700: #512da8 !default;
+$deep-purple-800: #4527a0 !default;
+$deep-purple-900: #311b92 !default;
+$deep-purple-accent-100: #b388ff !default;
+$deep-purple-accent-200: #7c4dff !default;
+$deep-purple-accent-400: #651fff !default;
+$deep-purple-accent-700: #6200ea !default;
+
+$light-blue-50: #e1f5fe !default;
+$light-blue-100: #b3e5fc !default;
+$light-blue-200: #81d4fa !default;
+$light-blue-300: #4fc3f7 !default;
+$light-blue-400: #29b6f6 !default;
+$light-blue-500: #03a9f4 !default;
+$light-blue-600: #039be5 !default;
+$light-blue-700: #0288d1 !default;
+$light-blue-800: #0277bd !default;
+$light-blue-900: #01579b !default;
+$light-blue-accent-100: #80d8ff !default;
+$light-blue-accent-200: #40c4ff !default;
+$light-blue-accent-400: #00b0ff !default;
+$light-blue-accent-700: #0091ea !default;
+
+$light-green-50: #f1f8e9 !default;
+$light-green-100: #dcedc8 !default;
+$light-green-200: #c5e1a5 !default;
+$light-green-300: #aed581 !default;
+$light-green-400: #9ccc65 !default;
+$light-green-500: #8bc34a !default;
+$light-green-600: #7cb342 !default;
+$light-green-700: #689f38 !default;
+$light-green-800: #558b2f !default;
+$light-green-900: #33691e !default;
+$light-green-accent-100: #ccff90 !default;
+$light-green-accent-200: #b2ff59 !default;
+$light-green-accent-400: #76ff03 !default;
+$light-green-accent-700: #64dd17 !default;
+
+$lime-50: #f9fbe7 !default;
+$lime-100: #f0f4c3 !default;
+$lime-200: #e6ee9c !default;
+$lime-300: #dce775 !default;
+$lime-400: #d4e157 !default;
+$lime-500: #cddc39 !default;
+$lime-600: #c0ca33 !default;
+$lime-700: #afb42b !default;
+$lime-800: #9e9d24 !default;
+$lime-900: #827717 !default;
+$lime-accent-100: #f4ff81 !default;
+$lime-accent-200: #eeff41 !default;
+$lime-accent-400: #c6ff00 !default;
+$lime-accent-700: #aeea00 !default;
+
+$amber-50: #fff8e1 !default;
+$amber-100: #ffecb3 !default;
+$amber-200: #ffe082 !default;
+$amber-300: #ffd54f !default;
+$amber-400: #ffca28 !default;
+$amber-500: #ffc107 !default;
+$amber-600: #ffb300 !default;
+$amber-700: #ffa000 !default;
+$amber-800: #ff8f00 !default;
+$amber-900: #ff6f00 !default;
+$amber-accent-100: #ffe57f !default;
+$amber-accent-200: #ffd740 !default;
+$amber-accent-400: #ffc400 !default;
+$amber-accent-700: #ffab00 !default;
+
+$deep-orange-50: #fbe9e7 !default;
+$deep-orange-100: #ffccbc !default;
+$deep-orange-200: #ffab91 !default;
+$deep-orange-300: #ff8a65 !default;
+$deep-orange-400: #ff7043 !default;
+$deep-orange-500: #ff5722 !default;
+$deep-orange-600: #f4511e !default;
+$deep-orange-700: #e64a19 !default;
+$deep-orange-800: #d84315 !default;
+$deep-orange-900: #bf360c !default;
+$deep-orange-accent-100: #ff9e80 !default;
+$deep-orange-accent-200: #ff6e40 !default;
+$deep-orange-accent-400: #ff3d00 !default;
+$deep-orange-accent-700: #dd2c00 !default;
+
+$brown-50: #efebe9 !default;
+$brown-100: #d7ccc8 !default;
+$brown-200: #bcaaa4 !default;
+$brown-300: #a1887f !default;
+$brown-400: #8d6e63 !default;
+$brown-500: #795548 !default;
+$brown-600: #6d4c41 !default;
+$brown-700: #5d4037 !default;
+$brown-800: #4e342e !default;
+$brown-900: #3e2723 !default;
+
+$blue-gray-50: #eceff1 !default;
+$blue-gray-100: #cfd8dc !default;
+$blue-gray-200: #b0bec5 !default;
+$blue-gray-300: #90a4ae !default;
+$blue-gray-400: #78909c !default;
+$blue-gray-500: #607d8b !default;
+$blue-gray-600: #546e7a !default;
+$blue-gray-700: #455a64 !default;
+$blue-gray-800: #37474f !default;
+$blue-gray-900: #263238 !default;
+// Material Design Color System - end
+
+// Theme colors
+$primary: #1266f1 !default;
+$secondary: #b23cfd !default;
+$success: #00b74a !default;
+$info: #39c0ed !default;
+$warning: #ffa900 !default;
+$danger: #f93154 !default;
+$light: $gray-50 !default;
+$dark: $gray-900 !default;
+
+// scss-docs-start theme-colors-map
+$theme-colors: (
+ 'primary': $primary,
+ 'secondary': $secondary,
+ 'success': $success,
+ 'info': $info,
+ 'warning': $warning,
+ 'danger': $danger,
+ 'light': $light,
+ 'dark': $dark,
+ 'white': $white,
+ 'black': $black,
+) !default;
+// scss-docs-end theme-colors-map
+
+// scss-docs-start note-colors-map
+$note: () !default;
+$note: map-merge(
+ (
+ 'primary': (
+ 'bgc': lighten($primary, 43%),
+ 'border-color': $primary,
+ ),
+ 'secondary': (
+ 'bgc': lighten($secondary, 33%),
+ 'border-color': $secondary,
+ ),
+ 'success': (
+ 'bgc': lighten($success, 53%),
+ 'border-color': $success,
+ ),
+ 'danger': (
+ 'bgc': lighten($danger, 36%),
+ 'border-color': $danger,
+ ),
+ 'warning': (
+ 'bgc': lighten($warning, 42%),
+ 'border-color': $warning,
+ ),
+ 'info': (
+ 'bgc': lighten($info, 36%),
+ 'border-color': $info,
+ ),
+ 'light': (
+ 'bgc': $light,
+ 'border-color': $dark,
+ ),
+ ),
+ $note
+);
+// scss-docs-end note-colors-map
+
+// Body
+//
+// Settings for the `` element.
+
+$body-color: $gray-800 !default;
+
+// Components
+//
+// Shadows offset, blur, spread and color
+
+$box-shadow-0: none !default;
+$box-shadow-1: 0 2px 10px 0 rgba(0, 0, 0, 0.05) !default;
+$box-shadow-2: 0 5px 15px 0 rgba(0, 0, 0, 0.05) !default;
+$box-shadow-3: 0 10px 20px 0 rgba(0, 0, 0, 0.05) !default;
+$box-shadow-4: 0 15px 30px 0 rgba(0, 0, 0, 0.05) !default;
+$box-shadow-5: 0 20px 40px 0 rgba(0, 0, 0, 0.05) !default;
+
+$box-shadow-1-strong: 0px 2px 5px 0px rgba(0, 0, 0, 0.25), 0px 3px 10px 0px rgba(0, 0, 0, 0.2) !default;
+$box-shadow-2-strong: 0px 4px 8px 0px rgba(0, 0, 0, 0.25), 0px 5px 15px 2px rgba(0, 0, 0, 0.2) !default;
+$box-shadow-3-strong: 0px 6px 11px 0px rgba(0, 0, 0, 0.25), 0px 7px 20px 3px rgba(0, 0, 0, 0.2) !default;
+$box-shadow-4-strong: 0px 6px 14px 0px rgba(0, 0, 0, 0.25), 0px 10px 30px 4px rgba(0, 0, 0, 0.2) !default;
+$box-shadow-5-strong: 0px 6px 20px 0px rgba(0, 0, 0, 0.25), 0px 12px 40px 5px rgba(0, 0, 0, 0.2) !default;
+
+$box-shadow-3-top: 0 -10px 20px 0 rgba(0, 0, 0, 0.05) !default;
+
+// scss-docs-start light-shadows-values
+$shadows-light: (
+ '0': $box-shadow-0,
+ '1': $box-shadow-1,
+ '2': $box-shadow-2,
+ '3': $box-shadow-3,
+ '4': $box-shadow-4,
+ '5': $box-shadow-5,
+) !default;
+// scss-docs-end light-shadows-values
+
+// scss-docs-start strong-shadows-values
+$shadows-strong: (
+ '1': $box-shadow-1-strong,
+ '2': $box-shadow-2-strong,
+ '3': $box-shadow-3-strong,
+ '4': $box-shadow-4-strong,
+ '5': $box-shadow-5-strong,
+) !default;
+// scss-docs-end strong-shadows-values
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+$font-family-roboto: 'Roboto', sans-serif !default;
+$font-family-base: var(--mdb-font-roboto) !default;
+
+$line-height-base: 1.6 !default;
+
+// Buttons
+//
+// For each of MDB's buttons, define text, background, and border color.
+
+$btn-line-height: 1.5 !default;
+$btn-padding-top: 0.625rem !default;
+$btn-padding-bottom: 0.5rem !default;
+$btn-font-size: 0.75rem !default;
+$btn-padding-left: 1.5rem !default;
+$btn-padding-right: 1.5rem !default;
+$btn-font-weight: 500 !default;
+$btn-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.1) !default;
+$btn-hover-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.1) !default;
+$btn-focus-box-shadow: $btn-hover-box-shadow !default;
+$btn-active-box-shadow: $btn-hover-box-shadow !default;
+$btn-border-width: 0.125rem !default;
+
+$btn-outline-padding-top: 0.5rem !default;
+$btn-outline-padding-bottom: 0.375rem !default;
+$btn-outline-padding-left: 1.375rem !default;
+$btn-outline-padding-right: 1.375rem !default;
+
+$btn-outline-padding-top-sm: 0.25rem !default;
+$btn-outline-padding-bottom-sm: 0.1875rem !default;
+$btn-outline-padding-right-sm: 0.875rem !default;
+$btn-outline-padding-left-sm: 0.875rem !default;
+
+$btn-outline-padding-top-lg: 0.625rem !default;
+$btn-outline-padding-bottom-lg: 0.5625rem !default;
+$btn-outline-padding-right-lg: 1.5625rem !default;
+$btn-outline-padding-left-lg: 1.5625rem !default;
+
+$btn-line-height-lg: 1.6 !default;
+$btn-font-size-lg: 0.875rem !default;
+$btn-padding-top-lg: 0.75rem !default;
+$btn-padding-bottom-lg: 0.6875rem !default;
+$btn-padding-right-lg: 1.6875rem !default;
+$btn-padding-left-lg: 1.6875rem !default;
+
+$btn-line-height-sm: $btn-line-height !default;
+$btn-font-size-sm: 0.75rem !default;
+$btn-padding-top-sm: 0.375rem !default;
+$btn-padding-bottom-sm: 0.3125rem !default;
+$btn-padding-right-sm: 1rem !default;
+$btn-padding-left-sm: 1rem !default;
+
+$btn-link-bgc: #f5f5f5 !default;
+$btn-rounded-border-radius: 10rem !default;
+
+$btn-floating-border-radius: 50% !default;
+
+$btn-floating-width: 2.3125rem !default;
+$btn-floating-height: 2.3125rem !default;
+$btn-floating-icon-width: 2.3125rem !default;
+$btn-floating-icon-line-height: 2.3125rem !default;
+
+$btn-floating-width-lg: 2.8125rem !default;
+$btn-floating-height-lg: 2.8125rem !default;
+$btn-floating-icon-width-lg: 2.8125rem !default;
+$btn-floating-icon-line-height-lg: 2.8125rem !default;
+
+$btn-floating-width-sm: 1.8125rem !default;
+$btn-floating-height-sm: 1.8125rem !default;
+$btn-floating-icon-width-sm: 1.8125rem !default;
+$btn-floating-icon-line-height-sm: 1.8125rem !default;
+
+$btn-outline-floating-icon-width: 2.0625rem !default;
+$btn-outline-floating-icon-line-height: 2.0625rem !default;
+
+$btn-outline-floating-icon-width-lg: 2.5625rem !default;
+$btn-outline-floating-icon-line-height-lg: 2.5625rem !default;
+
+$btn-outline-floating-icon-width-sm: 1.5625rem !default;
+$btn-outline-floating-icon-line-height-sm: 1.5625rem !default;
+
+$btn-floating-border-radius: 50% !default;
+
+$btn-block-spacing-y: 0.5rem !default;
+
+$fixed-action-btn-right: 2.1875rem !default;
+$fixed-action-btn-bottom: 2.1875rem !default;
+$fixed-action-btn-padding-top: 0.9375rem !default;
+$fixed-action-btn-li-margin-bottom: 1.5rem !default;
+
+// Button group
+//
+// Material styling for group of buttons
+
+$btn-group-border-radius: calc(4px - 1px) !default;
+$btn-group-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+
+// Forms
+//
+// Material styling for outline forms border, label, size
+
+$input-padding-top: 0.33em !default;
+$input-padding-bottom: $input-padding-top !default;
+$input-padding-left: 0.75em !default;
+$input-padding-right: $input-padding-left !default;
+$input-transition: all 0.2s linear !default;
+
+$form-label-left: 0.75rem !default;
+$form-label-padding-top: 0.37rem !default;
+$form-label-transition: all 0.2s ease-out !default;
+$form-label-color: rgba(0, 0, 0, 0.6) !default;
+
+$input-focus-active-label-transform: translateY(-1rem) translateY(0.1rem) scale(0.8) !default;
+$input-focus-label-color: $primary !default;
+$input-focus-border-width: 0.125rem !default;
+$input-focus-border-color: $primary !default;
+$input-disabled-background-color: #e9ecef !default;
+
+$input-padding-left-lg: 0.75em !default;
+$input-padding-right-lg: $input-padding-left-lg !default;
+$input-font-size-lg: 1rem !default;
+$input-line-height-lg: 2.15 !default;
+$input-focus-active-label-transform-lg: translateY(-1.25rem) translateY(0.1rem) scale(0.8) !default;
+
+$input-padding-left-sm: 0.99em !default;
+$input-padding-right-sm: $input-padding-left-sm !default;
+$input-padding-top-sm: 0.43em !default;
+$input-padding-bottom-sm: 0.35em !default;
+$input-font-size-sm: 0.775rem !default;
+$input-line-height-sm: 1.6 !default;
+$input-focus-active-label-transform-sm: translateY(-0.85rem) translateY(0.1rem) scale(0.8) !default;
+
+$form-notch-div-border-color: #bdbdbd !default;
+$form-notch-leading-width: 0.5rem !default;
+$form-notch-leading-border-radius: 0.25rem !default;
+$form-notch-middle-max-width: 1rem !default;
+$form-notch-trailing-border-radius: $form-notch-leading-border-radius !default;
+
+$form-label-padding-top-lg: 0.7rem !default;
+$form-label-padding-top-sm: 0.33rem !default;
+$form-label-font-size-sm: 0.775rem !default;
+
+$form-white-input-color: $white !default;
+$form-white-label-color: $gray-50 !default;
+$form-white-notch-div-border-color: $gray-50 !default;
+$form-white-input-focus-label-color: $white !default;
+$form-white-input-focus-border-color: $white !default;
+
+$form-check-input-margin-left: 1.79rem !default;
+$form-check-input-radio-margin-left: 1.85rem !default;
+$form-check-input-width-md: 1.125rem !default;
+$form-check-input-height: $form-check-input-width-md !default;
+$form-check-input-background-color: $white !default;
+$form-check-input-border-width: 0.125rem !default;
+$form-check-input-border-color: rgb(117, 117, 117) !default;
+
+$form-check-input-before-box-shadow: 0px 0px 0px 13px transparent !default;
+$form-check-input-before-border-radius: 50% !default;
+$form-check-input-before-width: 0.875rem !default;
+$form-check-input-before-height: $form-check-input-before-width !default;
+$form-check-input-before-transform: scale(0) !default;
+
+$form-check-input-hover-before-opacity: 0.04 !default;
+$form-check-input-hover-before-box-shadow: 0px 0px 0px 13px rgba(0, 0, 0, 0.6) !default;
+
+$form-check-input-focus-border-color: $form-check-input-border-color !default;
+$form-check-input-focus-transition: border-color 0.2s !default;
+
+$form-check-input-focus-before-opacity: 0.12 !default;
+$form-check-input-focus-before-box-shadow: $form-check-input-hover-before-box-shadow !default;
+$form-check-input-focus-before-transform: scale(1) !default;
+$form-check-input-focus-before-transition: box-shadow 0.2s, transform 0.2s !default;
+
+$form-check-input-checked-border-color: $primary !default;
+$form-check-input-checked-before-opacity: 0.16 !default;
+$form-check-input-checked-focus-border-color: $primary !default;
+$form-check-input-checked-focus-before-box-shadow: 0px 0px 0px 13px $primary !default;
+$form-check-input-checked-focus-before-transform: $form-check-input-focus-before-transform !default;
+$form-check-input-checked-focus-before-transition: $form-check-input-focus-before-transition !default;
+
+$form-check-input-checkbox-border-radius: 0.125rem !default;
+$form-check-input-checkbox-focus-after-width: 0.875rem !default;
+$form-check-input-checkbox-focus-after-height: $form-check-input-checkbox-focus-after-width !default;
+$form-check-input-checkbox-focus-after-background-color: $white !default;
+$form-check-input-checkbox-checked-background-color: $primary !default;
+$form-check-input-checkbox-checked-focus-background-color: $primary !default;
+
+$form-check-input-checkbox-checked-after-transform: rotate(45deg) !default;
+$form-check-input-checkbox-checked-after-border-width: 0.125rem !default;
+$form-check-input-checkbox-checked-after-border-color: $white !default;
+$form-check-input-checkbox-checked-after-width: 0.375rem !default;
+$form-check-input-checkbox-checked-after-height: 0.8125rem !default;
+$form-check-input-checkbox-checked-after-margin-left: 0.25rem !default;
+$form-check-input-checkbox-checked-after-margin-top: -1px !default;
+
+$form-check-input-indeterminate-focus-before-box-shadow: 0px 0px 0px 13px $primary !default;
+$form-check-input-indeterminate-checked-background-color: $primary !default;
+$form-check-input-indeterminate-checked-after-transform: rotate(90deg) !default;
+$form-check-input-indeterminate-checked-after-border-width: 0.125rem !default;
+$form-check-input-indeterminate-checked-after-border-color: $white !default;
+$form-check-input-indeterminate-checked-after-width: 0.125rem !default;
+$form-check-input-indeterminate-checked-after-height: 0.875rem !default;
+$form-check-input-indeterminate-checked-after-margin-left: 0.375rem !default;
+$form-check-input-indeterminate-focus-background-color: $primary !default;
+$form-check-input-indeterminate-focus-border-color: $primary !default;
+$form-check-input-indeterminate-border-color: $gray-600 !default;
+
+$form-check-input-radio-border-radius: 50% !default;
+$form-check-input-radio-width: 1.25rem !default;
+$form-check-input-radio-height: $form-check-input-radio-width !default;
+
+$form-check-input-radio-before-width: 1rem !default;
+$form-check-input-radio-before-height: $form-check-input-radio-before-width !default;
+
+$form-check-input-radio-after-width: $form-check-input-radio-before-width !default;
+$form-check-input-radio-after-height: $form-check-input-radio-after-width !default;
+$form-check-input-radio-after-border-radius: $form-check-input-radio-border-radius !default;
+$form-check-input-radio-after-background-color: $white !default;
+
+$form-check-input-radio-checked-background-color: $white !default;
+$form-check-input-radio-checked-after-border-radius: $form-check-input-radio-border-radius !default;
+$form-check-input-radio-checked-after-width: 0.625rem !default;
+$form-check-input-radio-checked-after-height: $form-check-input-radio-checked-after-width !default;
+$form-check-input-radio-checked-after-border-color: $primary !default;
+$form-check-input-radio-checked-after-background-color: $primary !default;
+$form-check-input-radio-checked-after-margin-top: 0.1875rem !default;
+$form-check-input-radio-checked-after-margin-left: 0.1875rem !default;
+$form-check-input-radio-checked-after-transition: border-color !default;
+$form-check-input-radio-checked-focus-background-color: $white !default;
+
+$form-switch-padding-left: 1.85rem !default;
+$form-switch-form-check-input-border-radius: 0.4375rem !default;
+$form-switch-form-check-input-width: 2.25rem !default;
+$form-switch-form-check-input-height: 0.875rem !default;
+$form-switch-form-check-input-background-color: rgba(0, 0, 0, 0.38) !default;
+$form-switch-form-check-input-margin-top: 0.35rem !default;
+$form-switch-form-check-input-margin-right: 0.7rem !default;
+
+$form-switch-form-check-input-after-border-radius: 50% !default;
+$form-switch-form-check-input-after-width: 1.25rem !default;
+$form-switch-form-check-input-after-height: $form-switch-form-check-input-after-width !default;
+$form-switch-form-check-input-after-background-color: $white !default;
+$form-switch-form-check-input-after-margin-top: -0.1875rem !default;
+$form-switch-form-check-input-after-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default;
+$form-switch-form-check-input-after-transition: background-color 0.2s, transform 0.2s !default;
+
+$form-switch-form-check-input-focus-before-box-shadow: 3px -1px 0px 13px rgba(0, 0, 0, 0.6) !default;
+$form-switch-form-check-input-focus-before-transform: scale(1) !default;
+$form-switch-form-check-input-focus-before-transition: box-shadow 0.2s, transform 0.2s !default;
+
+$form-switch-form-check-input-focus-after-border-radius: $form-switch-form-check-input-after-border-radius !default;
+$form-switch-form-check-input-focus-after-width: 1.25rem !default;
+$form-switch-form-check-input-focus-after-height: $form-switch-form-check-input-focus-after-width !default;
+
+$form-switch-form-check-input-checked-focus-before-margin-left: 1.0625rem !default;
+$form-switch-form-check-input-checked-focus-before-box-shadow: 3px -1px 0px 13px $primary !default;
+$form-switch-form-check-input-checked-focus-before-transform: scale(1) !default;
+$form-switch-form-check-input-checked-focus-before-transition: box-shadow 0.2s, transform 0.2s !default;
+
+$form-switch-form-check-input-checked-checkbox-after-border-radius: 50% !default;
+$form-switch-form-check-input-checked-checkbox-after-width: 1.25rem !default;
+$form-switch-form-check-input-checked-checkbox-after-height: 1.25rem !default;
+$form-switch-form-check-input-checked-checkbox-after-background-color: $primary !default;
+$form-switch-form-check-input-checked-checkbox-after-margin-top: -3px !default;
+$form-switch-form-check-input-checked-checkbox-after-margin-left: 1.0625rem !default;
+$form-switch-form-check-input-checked-checkbox-after-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default;
+$form-switch-form-check-input-checked-checkbox-after-transition: background-color 0.2s,
+ transform 0.2s !default;
+
+$form-file-height: calc(1.79rem + 0.33rem + 2px) !default;
+
+$form-file-label-focus-border-color: $primary !default;
+$form-file-label-focus-transition: all 0.2s linear !default;
+$form-file-label-focus-text-border-width: 2px 1px 2px 2px !default;
+$form-file-label-focus-button-border-width: 2px 2px 2px 1px !default;
+$form-file-label-disabled-background-color: #e9ecef !default;
+$form-file-label-height: $form-file-height !default;
+$form-file-label-border-color: #bdbdbd !default;
+$form-file-label-border-radius: 0.2rem !default;
+
+$form-file-text-padding-y: 0.33rem !default;
+$form-file-text-border-color: #bdbdbd !default;
+
+$form-file-button-line-height: 1.5 !default;
+$form-file-button-background-color: #fff !default;
+$form-file-button-border-color: $form-file-text-border-color !default;
+
+$form-file-sm-height: calc(1.33rem + 0.33rem + 2px) !default;
+$form-file-sm-font-size: 0.775rem !default;
+$form-file-sm-line-height: 1.5 !default;
+$form-file-sm-padding-y: $form-file-text-padding-y !default;
+
+$form-file-lg-height: calc(2.315rem + 0.33rem + 2px) !default;
+$form-file-lg-font-size: 1rem !default;
+$form-file-lg-line-height: 2.15 !default;
+$form-file-lg-padding-y: $form-file-text-padding-y !default;
+
+$form-range-webkit-slider-thumb-margin-top: -6px !default;
+$form-range-webkit-slider-runnable-track-height: 4px !default;
+
+$input-group-height: calc(1.75rem + 0.33rem + 2px) !default;
+$input-group-min-height: $input-group-height !default;
+$input-group-padding-y: 0.27rem !default;
+$input-group-transition: all 0.2s linear !default;
+
+$input-group-focus-transition: $input-group-transition !default;
+$input-group-focus-border-color: $primary !default;
+$input-group-focus-box-shadow: inset 0 0 0 1px $primary !default;
+
+$input-group-text-padding-y: 0.26rem !default;
+
+$input-group-lg-height: calc(2.315rem + 0.33rem + 2px) !default;
+$input-group-lg-font-size: 1rem !default;
+$input-group-lg-padding-y: 0.33rem !default;
+$input-group-lg-text-font-size: $input-group-lg-font-size !default;
+
+$input-group-sm-height: calc(1.33rem + 0.33rem + 2px) !default;
+$input-group-sm-min-height: $input-group-sm-height !default;
+$input-group-sm-font-size: 0.775rem !default;
+$input-group-sm-padding-y: $input-group-lg-padding-y !default;
+$input-group-sm-text-font-size: $input-group-sm-font-size !default;
+$input-group-sm-text-line-height: 1.6 !default;
+
+$input-group-form-outline-border-left-width: 1px !default;
+$input-group-form-outline-border-left-color: #bdbdbd !default;
+
+// Form validation
+
+$form-feedback-valid-tooltip-color: $white !default;
+$form-feedback-valid-color: $success !default;
+$form-feedback-invalid-color: $danger !default;
+
+// scss-docs-start form-validation-states
+$form-validation-states-mdb: (
+ 'valid': (
+ 'color': $form-feedback-valid-color,
+ ),
+ 'invalid': (
+ 'color': $form-feedback-invalid-color,
+ ),
+) !default;
+// scss-docs-end form-validation-states
+
+// scss-docs-start zindex-stack
+$zindex-fixed-action-button: 1030 !default;
+$zindex-toast: 1060 !default;
+$zindex-alert: 1070 !default;
+$zindex-popover: 1080 !default;
+$zindex-tooltip: 1090 !default;
+// scss-docs-end zindex-stack
+
+// Navs
+
+$nav-tabs-link-border-width: 0 0 2px 0 !default;
+$nav-tabs-link-font-weight: 500 !default;
+$nav-tabs-link-font-size: 12px !default;
+$nav-tabs-link-color: rgba(0, 0, 0, 0.6) !default;
+$nav-tabs-link-padding-top: 17px !default;
+$nav-tabs-link-padding-bottom: 16px !default;
+$nav-tabs-link-padding-x: 29px !default;
+$nav-tabs-link-hover-background-color: #f5f5f5 !default;
+
+$nav-pills-margin: 0.5rem !default;
+$nav-pills-link-border-radius: 0.25rem !default;
+$nav-pills-link-font-size: $nav-tabs-link-font-size !default;
+$nav-pills-link-padding-top: $nav-tabs-link-padding-top !default;
+$nav-pills-link-padding-bottom: $nav-tabs-link-padding-bottom !default;
+$nav-pills-link-padding-x: $nav-tabs-link-padding-x !default;
+$nav-pills-link-line-height: 1 !default;
+$nav-pills-link-background-color: $nav-tabs-link-hover-background-color !default;
+$nav-pills-link-font-weight: $nav-tabs-link-font-weight !default;
+$nav-pills-link-color: $nav-tabs-link-color !default;
+
+// Navbar
+
+$navbar-box-shadow: $box-shadow-3 !default;
+$navbar-padding-top: 0.5625rem !default;
+$navbar-brand-img-margin-right: 0.25rem !default;
+
+// Dropdowns
+//
+// Dropdown menu container and content !default;
+
+$dropdown-color: #212529 !default;
+$dropdown-margin-top: 0.125rem !default;
+$dropdown-box-shadow: $box-shadow-2 !default;
+$dropdown-font-size: 0.875rem !default;
+$dropdown-item-border-radius: 0.25rem !default;
+$dropdown-item-padding-y: 0.5rem !default;
+$dropdown-item-padding-x: 1rem !default;
+
+$dropdown-state-color: #16181b !default;
+$dropdown-state-background-color: #eee !default;
+
+$dropdown-menu-animated-animation-duration: 0.55s !default;
+$dropdown-menu-animated-animation-timing-function: ease !default;
+
+// Pagination
+
+$pagination-font-size: 0.9rem !default;
+$pagination-color: #212529 !default;
+$pagination-transition: all 0.3s linear !default;
+$pagination-border-radius: 0.125rem !default;
+
+$pagination-hover-color: $pagination-color !default;
+$pagination-active-box-shadow: $btn-box-shadow !default;
+$pagination-active-transition: all 0.2s linear !default;
+
+$pagination-circle-border-radius: 50% !default;
+$pagination-circle-padding-x: 0.841rem !default;
+
+$pagination-circle-lg-padding-left: 1.399414rem !default;
+$pagination-circle-lg-padding-right: 1.399415rem !default;
+
+$pagination-circle-sm-padding-left: 0.696rem !default;
+$pagination-circle-sm-padding-right: 0.688rem !default;
+
+// Cards
+
+$card-box-shadow: $box-shadow-3 !default;
+$card-header-background-color: rgba(255, 255, 255, 0) !default;
+$card-footer-background-color: rgba(255, 255, 255, 0) !default;
+$card-border-radius: 0.25rem !default;
+
+// Accordion
+$accordion-button-icon: none !default;
+$accordion-button-active-icon: none !default;
+
+// Tooltips
+
+$tooltip-inner-color: #fff !default;
+$tooltip-inner-padding-y: 6px !default;
+$tooltip-inner-padding-x: 16px !default;
+$tooltip-inner-font-size: 14px !default;
+$tooltip-inner-background-color: #6d6d6d !default;
+$tooltip-inner-border-radius: 0.25rem !default;
+
+// Popovers
+
+$popover-box-shadow: $box-shadow-2 !default;
+$popover-background-color: #fff !default;
+
+// Toasts
+
+$toast-background-color: #fff !default;
+$toast-box-shadow: $box-shadow-2 !default;
+$toast-header-background-color: #fff !default;
+
+// Badges
+
+$badge-dot-border-radius: 4.5px !default;
+$badge-dot-height: 9px !default;
+$badge-dot-width: $badge-dot-height !default;
+$badge-dot-margin-left: -0.3125rem !default;
+
+$badge-notification-font-size: 0.6rem !default;
+$badge-notification-margin-top: -0.1rem !default;
+$badge-notification-margin-left: -0.5rem !default;
+$badge-notification-padding-y: 0.2em !default;
+$badge-notification-padding-x: 0.45em !default;
+
+// Modals
+
+$modal-box-shadow: $box-shadow-3 !default;
+
+// Progress bars
+
+$progress-height: 4px !default;
+
+// Breadcrumbs
+
+$breadcrumb-item-color: rgba(0, 0, 0, 0.55) !default;
+$breadcrumb-item-transition: color 0.15s ease-in-out !default;
+$breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7) !default;
+$breadcrumb-item-before-color: $breadcrumb-item-color !default;
+
+// Carousel
+
+$carousel-control-prev-icon-bg: none;
+$carousel-control-next-icon-bg: none;
+
+// Images
+
+$image-hover-overlay-transition: all 0.3s ease-in-out !default;
+
+$image-hover-zoom-transition: all 0.3s linear !default;
+$image-hover-zoom-transform: scale(1.1) !default;
+
+$image-hover-shadow-transition: $image-hover-overlay-transition !default;
+$image-hover-shadow-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !default;
+
+// Scrollspy
+
+$scrollspy-menu-sidebar-font-size: 0.8rem !default;
+$scrollspy-menu-sidebar-color: #262626 !default;
+$scrollspy-menu-sidebar-line-height: 1.1rem !default;
+$scrollspy-menu-sidebar-padding-x: 5px !default;
+$scrollspy-menu-sidebar-font-weight: 400 !default;
+$scrollspy-menu-sidebar-transition: all 0.2s ease-in-out !default;
+$scrollspy-menu-sidebar-margin-y: 3px !default;
+
+$scrollspy-menu-sidebar-active-color: $primary !default;
+$scrollspy-menu-sidebar-active-font-weight: 600 !default;
+$scrollspy-menu-sidebar-active-border-width: 0.125rem !default;
+$scrollspy-menu-sidebar-active-border-color: $primary !default;
+
+// Breadcrumbs
+
+$breadcrumb-item-color: rgba(0, 0, 0, 0.55) !default;
+$breadcrumb-item-transition: color 0.15s ease-in-out !default;
+$breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7) !default;
+$breadcrumb-item-before-color: $breadcrumb-item-color !default;
+
+// Images
+
+$image-hover-overlay-transition: all 0.3s ease-in-out !default;
+
+$image-hover-zoom-transition: all 0.3s linear !default;
+$image-hover-zoom-transform: scale(1.1) !default;
+
+$image-hover-shadow-transition: $image-hover-overlay-transition !default;
+$image-hover-shadow-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !default;
+
+// Scrollspy
+
+$scrollspy-menu-sidebar-font-size: 0.8rem !default;
+$scrollspy-menu-sidebar-color: #262626 !default;
+$scrollspy-menu-sidebar-line-height: 1.1rem !default;
+$scrollspy-menu-sidebar-padding-x: 5px !default;
+$scrollspy-menu-sidebar-font-weight: 400 !default;
+$scrollspy-menu-sidebar-transition: all 0.2s ease-in-out !default;
+$scrollspy-menu-sidebar-margin-y: 3px !default;
+
+$scrollspy-menu-sidebar-active-color: $primary !default;
+$scrollspy-menu-sidebar-active-font-weight: 600 !default;
+$scrollspy-menu-sidebar-active-border-width: 0.125rem !default;
+$scrollspy-menu-sidebar-active-border-color: $primary !default;
+
+// Type
+
+$note-padding: 10px !default;
+$note-border-width: 6px !default;
+$note-border-radius: 5px !default;
+$note-strong-font-weight: 600 !default;
+$note-paragraph-font-weight: 500 !default;
+
+// Table
+
+$table-color: #212529 !default;
+$table-font-size: 0.9rem !default;
+$table-hover-transition: background-color 0.2s ease-in !default;
+$table-group-separator-color: inherit !default;
+$table-cell-padding-y: 1rem !default;
+$table-cell-padding-x: 1.4rem !default;
+$table-cell-padding-y-sm: 0.5rem !default;
+$table-cell-padding-x-sm: $table-cell-padding-x !default;
diff --git a/src/scss/free/forms/_form-check.scss b/src/scss/free/forms/_form-check.scss
new file mode 100644
index 0000000..4305c5c
--- /dev/null
+++ b/src/scss/free/forms/_form-check.scss
@@ -0,0 +1,290 @@
+//
+// Material styles for check / radio / switch
+//
+
+.form-check {
+ line-height: 1.3;
+
+ .form-check-input {
+ margin-left: $form-check-input-margin-left * -1;
+
+ &[type='radio'] {
+ margin-left: $form-check-input-radio-margin-left * -1;
+ }
+ }
+
+ margin-bottom: 0;
+ min-height: auto;
+}
+
+.form-check-input {
+ position: relative;
+ width: $form-check-input-width-md;
+ height: $form-check-input-height;
+ background-color: $form-check-input-background-color;
+ border: $form-check-input-border-width solid $form-check-input-border-color;
+ margin-top: 0;
+
+ &:before {
+ content: '';
+ position: absolute;
+ box-shadow: $form-check-input-before-box-shadow;
+ border-radius: $form-check-input-before-border-radius;
+ width: $form-check-input-before-width;
+ height: $form-check-input-before-height;
+ background-color: transparent;
+ opacity: 0;
+ pointer-events: none;
+ transform: $form-check-input-before-transform;
+ }
+
+ &:hover {
+ cursor: pointer;
+
+ &:before {
+ opacity: $form-check-input-hover-before-opacity;
+ box-shadow: $form-check-input-hover-before-box-shadow;
+ }
+ }
+
+ &:focus {
+ box-shadow: none;
+ border-color: $form-check-input-focus-border-color;
+ transition: $form-check-input-focus-transition;
+
+ &:before {
+ opacity: $form-check-input-focus-before-opacity;
+ box-shadow: $form-check-input-focus-before-box-shadow;
+ transform: $form-check-input-focus-before-transform;
+ transition: $form-check-input-focus-before-transition;
+ }
+ }
+
+ &:checked {
+ border-color: $form-check-input-checked-border-color;
+
+ &:before {
+ opacity: $form-check-input-checked-before-opacity;
+ }
+
+ &:after {
+ content: '';
+ position: absolute;
+ }
+
+ &:focus {
+ border-color: $form-check-input-checked-focus-border-color;
+
+ &:before {
+ box-shadow: $form-check-input-checked-focus-before-box-shadow;
+ transform: $form-check-input-checked-focus-before-transform;
+ transition: $form-check-input-checked-focus-before-transition;
+ }
+ }
+ }
+
+ &:indeterminate {
+ &:focus {
+ &:before {
+ box-shadow: $form-check-input-indeterminate-focus-before-box-shadow;
+ }
+ }
+ }
+
+ &[type='checkbox'] {
+ border-radius: $form-check-input-checkbox-border-radius;
+
+ &:focus {
+ &:after {
+ content: '';
+ position: absolute;
+ width: $form-check-input-checkbox-focus-after-width;
+ height: $form-check-input-checkbox-focus-after-height;
+ z-index: 1;
+ display: block;
+ border-radius: 0;
+ background-color: $form-check-input-checkbox-focus-after-background-color;
+ }
+ }
+
+ &:checked {
+ background-image: none;
+ background-color: $form-check-input-checkbox-checked-background-color;
+
+ &:after {
+ display: block;
+ transform: $form-check-input-checkbox-checked-after-transform #{'/*!rtl:ignore*/'};
+ border-width: $form-check-input-checkbox-checked-after-border-width;
+ border-color: $form-check-input-checkbox-checked-after-border-color;
+ width: $form-check-input-checkbox-checked-after-width;
+ height: $form-check-input-checkbox-checked-after-height;
+ border-style: solid;
+ border-top: 0;
+ border-left: 0 #{'/*!rtl:ignore*/'};
+ margin-left: $form-check-input-checkbox-checked-after-margin-left;
+ margin-top: $form-check-input-checkbox-checked-after-margin-top;
+ background-color: transparent;
+ }
+
+ &:focus {
+ background-color: $form-check-input-checkbox-checked-focus-background-color;
+ }
+ }
+
+ &:indeterminate {
+ background-image: none;
+ background-color: transparent;
+ border-color: $form-check-input-indeterminate-border-color;
+
+ &:after {
+ display: block;
+ transform: $form-check-input-indeterminate-checked-after-transform #{'/*!rtl:ignore*/'};
+ border-width: $form-check-input-indeterminate-checked-after-border-width;
+ border-color: $form-check-input-indeterminate-checked-after-border-color;
+ width: $form-check-input-indeterminate-checked-after-width;
+ height: $form-check-input-indeterminate-checked-after-height;
+ border-style: solid;
+ border-top: 0;
+ border-left: 0 #{'/*!rtl:ignore*/'};
+ margin-left: $form-check-input-indeterminate-checked-after-margin-left;
+ margin-top: 0;
+ }
+
+ &:focus {
+ background-color: $form-check-input-indeterminate-focus-background-color;
+ border-color: $form-check-input-indeterminate-focus-border-color;
+ }
+ }
+ }
+
+ &[type='radio'] {
+ border-radius: $form-check-input-radio-border-radius;
+ width: $form-check-input-radio-width;
+ height: $form-check-input-radio-height;
+
+ &:before {
+ width: $form-check-input-radio-before-width;
+ height: $form-check-input-radio-before-height;
+ }
+
+ &:after {
+ content: '';
+ position: absolute;
+ width: $form-check-input-radio-after-width;
+ height: $form-check-input-radio-after-height;
+ z-index: 1;
+ display: block;
+ border-radius: $form-check-input-radio-after-border-radius;
+ background-color: $form-check-input-radio-after-background-color;
+ }
+
+ &:checked {
+ background-image: none;
+ background-color: $form-check-input-radio-checked-background-color;
+
+ &:after {
+ border-radius: $form-check-input-radio-checked-after-border-radius;
+ width: $form-check-input-radio-checked-after-width;
+ height: $form-check-input-radio-checked-after-height;
+ border-color: $form-check-input-radio-checked-after-border-color;
+ background-color: $form-check-input-radio-checked-after-background-color;
+ margin-top: $form-check-input-radio-checked-after-margin-top;
+ margin-left: $form-check-input-radio-checked-after-margin-left;
+ transition: $form-check-input-radio-checked-after-transition;
+ }
+
+ &:focus {
+ background-color: $form-check-input-radio-checked-focus-background-color;
+ }
+ }
+ }
+}
+
+.form-check-label {
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+//
+// Switch
+//
+
+.form-switch {
+ padding-left: $form-switch-padding-left;
+
+ .form-check-input {
+ background-image: none;
+ border-width: 0;
+ border-radius: $form-switch-form-check-input-border-radius;
+ width: $form-switch-form-check-input-width;
+ height: $form-switch-form-check-input-height;
+ background-color: $form-switch-form-check-input-background-color;
+ margin-top: $form-switch-form-check-input-margin-top;
+ margin-right: $form-switch-form-check-input-margin-right;
+
+ &:after {
+ content: '';
+ position: absolute;
+ border: none;
+ z-index: 2;
+ border-radius: $form-switch-form-check-input-after-border-radius;
+ width: $form-switch-form-check-input-after-width;
+ height: $form-switch-form-check-input-after-height;
+ background-color: $form-switch-form-check-input-after-background-color;
+ margin-top: $form-switch-form-check-input-after-margin-top;
+ box-shadow: $form-switch-form-check-input-after-box-shadow;
+ transition: $form-switch-form-check-input-after-transition;
+ }
+
+ &:focus {
+ background-image: none;
+
+ &:before {
+ box-shadow: $form-switch-form-check-input-focus-before-box-shadow;
+ transform: $form-switch-form-check-input-focus-before-transform;
+ transition: $form-switch-form-check-input-focus-before-transition;
+ }
+
+ &:after {
+ border-radius: $form-switch-form-check-input-focus-after-border-radius;
+ width: $form-switch-form-check-input-focus-after-width;
+ height: $form-switch-form-check-input-focus-after-height;
+ }
+ }
+
+ &:checked {
+ background-image: none;
+
+ &:focus {
+ background-image: none;
+
+ &:before {
+ margin-left: $form-switch-form-check-input-checked-focus-before-margin-left;
+ box-shadow: $form-switch-form-check-input-checked-focus-before-box-shadow;
+ transform: $form-switch-form-check-input-checked-focus-before-transform;
+ transition: $form-switch-form-check-input-checked-focus-before-transition;
+ }
+ }
+
+ &[type='checkbox'] {
+ background-image: none;
+
+ &:after {
+ content: '';
+ position: absolute;
+ border: none;
+ z-index: 2;
+ border-radius: $form-switch-form-check-input-checked-checkbox-after-border-radius;
+ width: $form-switch-form-check-input-checked-checkbox-after-width;
+ height: $form-switch-form-check-input-checked-checkbox-after-height;
+ background-color: $form-switch-form-check-input-checked-checkbox-after-background-color;
+ margin-top: $form-switch-form-check-input-checked-checkbox-after-margin-top;
+ margin-left: $form-switch-form-check-input-checked-checkbox-after-margin-left;
+ box-shadow: $form-switch-form-check-input-checked-checkbox-after-box-shadow;
+ transition: $form-switch-form-check-input-checked-checkbox-after-transition;
+ }
+ }
+ }
+ }
+}
diff --git a/src/scss/free/forms/_form-control.scss b/src/scss/free/forms/_form-control.scss
new file mode 100644
index 0000000..8e8c2b9
--- /dev/null
+++ b/src/scss/free/forms/_form-control.scss
@@ -0,0 +1,226 @@
+//
+// Material styles for form control - form outline
+//
+
+.form-control {
+ min-height: auto;
+ padding-top: 4px;
+ padding-bottom: 3.28px;
+ transition: all 0.1s linear;
+
+ &:focus {
+ box-shadow: none;
+ transition: all 0.1s linear;
+ border-color: #1266f1;
+ box-shadow: inset 0px 0px 0px 1px #1266f1;
+ }
+ &.form-control-sm {
+ font-size: 0.775rem;
+ line-height: 1.5;
+ }
+ &.form-control-lg {
+ line-height: 2.15;
+ border-radius: 0.25rem;
+ }
+}
+
+.form-outline {
+ position: relative;
+
+ .form-helper {
+ width: 100%;
+ position: absolute;
+ font-size: 0.875em;
+ color: #757575;
+ .form-counter {
+ text-align: right;
+ }
+ }
+
+ .trailing {
+ position: absolute;
+ right: 10px;
+ left: initial;
+ top: 50%;
+ transform: translateY(-50%);
+ pointer-events: none;
+ }
+
+ .form-icon-trailing {
+ padding-right: 2rem !important;
+ }
+
+ .form-control {
+ min-height: auto;
+ padding-top: $input-padding-top;
+ padding-bottom: $input-padding-bottom;
+ padding-left: $input-padding-left;
+ padding-right: $input-padding-right;
+ border: 0;
+ background: transparent;
+ transition: $input-transition;
+ ~ .form-label {
+ position: absolute;
+ top: 0;
+ left: $form-label-left;
+ padding-top: $form-label-padding-top;
+ pointer-events: none;
+ transform-origin: 0 0;
+ transition: $form-label-transition;
+ color: $form-label-color;
+ margin-bottom: 0;
+ }
+ ~ .form-notch {
+ display: flex;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ max-width: 100%;
+ height: 100%;
+ text-align: left;
+ pointer-events: none;
+ div {
+ pointer-events: none;
+ border: $border-width solid;
+ border-color: $form-notch-div-border-color;
+ box-sizing: border-box;
+ background: transparent;
+ }
+ .form-notch-leading {
+ left: 0;
+ top: 0;
+ height: 100%;
+ width: $form-notch-leading-width;
+ border-right: none;
+ border-radius: $form-notch-leading-border-radius 0 0 $form-notch-leading-border-radius;
+ }
+ .form-notch-middle {
+ flex: 0 0 auto;
+ width: auto;
+ max-width: calc(100% - #{$form-notch-middle-max-width});
+ height: 100%;
+ border-right: none;
+ border-left: none;
+ }
+ .form-notch-trailing {
+ flex-grow: 1;
+ height: 100%;
+ border-left: none;
+ border-radius: 0 $form-notch-trailing-border-radius $form-notch-trailing-border-radius 0;
+ }
+ }
+ &:not(.placeholder-active)::placeholder {
+ opacity: 0;
+ }
+ &:focus,
+ &.active {
+ &::placeholder {
+ opacity: 1;
+ }
+ }
+ &:focus {
+ box-shadow: none !important;
+ }
+ &:focus ~ .form-label,
+ &.active ~ .form-label {
+ transform: $input-focus-active-label-transform;
+ }
+ &:focus ~ .form-label {
+ color: $input-focus-label-color;
+ }
+ &:focus ~ .form-notch .form-notch-middle,
+ &.active ~ .form-notch .form-notch-middle {
+ border-top: none;
+ border-right: none;
+ border-left: none;
+ transition: $input-transition;
+ }
+ &:focus ~ .form-notch .form-notch-middle {
+ border-bottom: $input-focus-border-width solid;
+ border-color: $input-focus-border-color;
+ }
+ &:focus ~ .form-notch .form-notch-leading,
+ &.active ~ .form-notch .form-notch-leading {
+ border-right: none;
+ transition: $input-transition;
+ }
+ &:focus ~ .form-notch .form-notch-leading {
+ border-top: $input-focus-border-width solid $input-focus-border-color;
+ border-bottom: $input-focus-border-width solid $input-focus-border-color;
+ border-left: $input-focus-border-width solid $input-focus-border-color;
+ }
+ &:focus ~ .form-notch .form-notch-trailing,
+ &.active ~ .form-notch .form-notch-trailing {
+ border-left: none;
+ transition: $input-transition;
+ }
+ &:focus ~ .form-notch .form-notch-trailing {
+ border-top: $input-focus-border-width solid $input-focus-border-color;
+ border-bottom: $input-focus-border-width solid $input-focus-border-color;
+ border-right: $input-focus-border-width solid $input-focus-border-color;
+ }
+ &:disabled,
+ &.disabled,
+ &[readonly] {
+ background-color: $input-disabled-background-color;
+ }
+ &.form-control-lg {
+ font-size: $input-font-size-lg;
+ line-height: $input-line-height-lg;
+ padding-left: $input-padding-left-lg;
+ padding-right: $input-padding-right-lg;
+ ~ .form-label {
+ padding-top: $form-label-padding-top-lg;
+ }
+ &:focus ~ .form-label,
+ &.active ~ .form-label {
+ transform: $input-focus-active-label-transform-lg;
+ }
+ }
+ &.form-control-sm {
+ padding-left: $input-padding-left-sm;
+ padding-right: $input-padding-right-sm;
+ padding-top: $input-padding-top-sm;
+ padding-bottom: $input-padding-bottom-sm;
+ font-size: $input-font-size-sm;
+ line-height: $input-line-height-sm;
+ ~ .form-label {
+ padding-top: $form-label-padding-top-sm;
+ font-size: $form-label-font-size-sm;
+ }
+ &:focus ~ .form-label,
+ &.active ~ .form-label {
+ transform: $input-focus-active-label-transform-sm;
+ }
+ }
+ }
+
+ &.form-white {
+ .form-control {
+ color: $form-white-input-color;
+ ~ .form-label {
+ color: $form-white-label-color;
+ }
+ ~ .form-notch {
+ div {
+ border-color: $form-white-notch-div-border-color;
+ }
+ }
+ &:focus ~ .form-label {
+ color: $form-white-input-focus-label-color;
+ }
+ &:focus ~ .form-notch .form-notch-middle {
+ border-color: $form-white-input-focus-border-color;
+ }
+ &:focus ~ .form-notch .form-notch-leading {
+ border-top: $input-focus-border-width solid $form-white-input-focus-border-color;
+ border-bottom: $input-focus-border-width solid $form-white-input-focus-border-color;
+ border-left: $input-focus-border-width solid $form-white-input-focus-border-color;
+ }
+ &:focus ~ .form-notch .form-notch-trailing {
+ border-color: $form-white-input-focus-border-color;
+ }
+ }
+ }
+}
diff --git a/src/scss/free/forms/_form-file.scss b/src/scss/free/forms/_form-file.scss
new file mode 100644
index 0000000..0cdb5ca
--- /dev/null
+++ b/src/scss/free/forms/_form-file.scss
@@ -0,0 +1,19 @@
+.form-control {
+ &[type='file'] {
+ &::-webkit-file-upload-button {
+ background-color: transparent;
+ }
+ }
+ &:hover {
+ &:not(:disabled):not([readonly])::-webkit-file-upload-button {
+ background-color: transparent;
+ }
+ }
+}
+
+.form-control-sm {
+ &::-webkit-file-upload-button {
+ padding: 0.28rem 0.5rem;
+ margin: -0.28rem -0.5rem;
+ }
+}
diff --git a/src/scss/free/forms/_form-range.scss b/src/scss/free/forms/_form-range.scss
new file mode 100644
index 0000000..e1952db
--- /dev/null
+++ b/src/scss/free/forms/_form-range.scss
@@ -0,0 +1,43 @@
+// Range
+//
+// Style range inputs the same across browsers. Vendor-specific rules for pseudo
+// elements cannot be mixed. As such, there are no shared styles for focus or
+// active states on prefixed selectors.
+
+.form-range {
+ &:focus {
+ box-shadow: none;
+
+ // Pseudo-elements must be split across multiple rulesets to have an effect.
+ // No box-shadow() mixin for focus accessibility.
+ &::-webkit-slider-thumb {
+ box-shadow: none;
+ }
+ &::-moz-range-thumb {
+ box-shadow: none;
+ }
+ &::-ms-thumb {
+ box-shadow: none;
+ }
+ }
+
+ &::-moz-focus-outer {
+ border: 0;
+ }
+
+ &::-webkit-slider-thumb {
+ margin-top: $form-range-webkit-slider-thumb-margin-top; // Webkit specific
+ box-shadow: none;
+ appearance: none;
+ }
+
+ &::-webkit-slider-runnable-track {
+ height: $form-range-webkit-slider-runnable-track-height;
+ border-radius: 0;
+ }
+
+ &::-moz-range-thumb {
+ box-shadow: none;
+ appearance: none;
+ }
+}
diff --git a/src/scss/free/forms/_form-select.scss b/src/scss/free/forms/_form-select.scss
new file mode 100644
index 0000000..1f9b1dd
--- /dev/null
+++ b/src/scss/free/forms/_form-select.scss
@@ -0,0 +1,9 @@
+// Select
+
+.select-input {
+ &.form-control {
+ &[readonly]:not([disabled]) {
+ background-color: transparent;
+ }
+ }
+}
diff --git a/src/scss/free/forms/_input-group.scss b/src/scss/free/forms/_input-group.scss
new file mode 100644
index 0000000..f836f81
--- /dev/null
+++ b/src/scss/free/forms/_input-group.scss
@@ -0,0 +1,81 @@
+//
+// Base styles
+//
+
+.input-group {
+ > .form-control {
+ min-height: $input-group-min-height;
+ height: $input-group-height;
+ padding-top: $input-group-padding-y;
+ padding-bottom: $input-group-padding-y;
+ transition: $input-group-transition;
+
+ &:focus {
+ transition: $input-group-focus-transition;
+ border-color: $input-group-focus-border-color;
+ outline: 0;
+ box-shadow: $input-group-focus-box-shadow;
+ }
+ }
+}
+
+.input-group-text {
+ background-color: transparent;
+ padding-top: $input-group-text-padding-y;
+ padding-bottom: $input-group-text-padding-y;
+}
+
+.input-group-lg {
+ > .form-control {
+ height: $input-group-lg-height;
+ font-size: $input-group-lg-font-size;
+ padding-top: $input-group-lg-padding-y;
+ padding-bottom: $input-group-lg-padding-y;
+ }
+
+ .input-group-text {
+ font-size: $input-group-lg-text-font-size;
+ }
+}
+
+.input-group-sm {
+ > .form-control {
+ min-height: $input-group-sm-min-height;
+ height: $input-group-sm-height;
+ font-size: $input-group-sm-font-size;
+ padding-top: $input-group-sm-padding-y;
+ padding-bottom: $input-group-sm-padding-y;
+ }
+
+ .input-group-text {
+ font-size: $input-group-sm-text-font-size;
+ line-height: $input-group-sm-text-line-height;
+ }
+}
+
+.input-group {
+ &.form-outline {
+ .input-group-text {
+ border-left: 0;
+ }
+ input + .input-group-text {
+ border: 0;
+ border-left: $input-group-form-outline-border-left-width solid
+ $input-group-form-outline-border-left-color;
+ }
+ }
+ .form-outline:not(:first-child),
+ .form-outline:not(:first-child) .form-notch-leading {
+ border-top-left-radius: 0 !important;
+ border-bottom-left-radius: 0 !important;
+ }
+ .form-outline:not(:last-child),
+ .form-outline:not(:last-child) .form-notch-trailing {
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+ }
+}
+
+.input-group > [class*='btn-outline-'] + [class*='btn-outline-'] {
+ border-left: 0;
+}
diff --git a/src/scss/free/forms/_validation.scss b/src/scss/free/forms/_validation.scss
new file mode 100644
index 0000000..d21ef0f
--- /dev/null
+++ b/src/scss/free/forms/_validation.scss
@@ -0,0 +1,212 @@
+//
+// Material styles for form validation
+//
+
+@mixin form-validation-state-selector($state) {
+ @if ($state == 'valid' or $state == 'invalid') {
+ .was-validated #{if(&, "&", "")}:#{$state},
+ #{if(&, "&", "")}.is-#{$state} {
+ @content;
+ }
+ } @else {
+ #{if(&, "&", "")}.is-#{$state} {
+ @content;
+ }
+ }
+}
+
+@mixin form-validation-state-mdb(
+ $state,
+ $color,
+ $tooltip-color: color-contrast($color),
+ $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+ $focus-box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+) {
+ .#{$state}-feedback {
+ position: absolute;
+ display: none;
+ width: auto;
+ margin-top: $form-feedback-margin-top;
+ font-size: 0.875rem;
+ font-style: $form-feedback-font-style;
+ color: $color;
+ margin-top: -0.75rem;
+ }
+
+ .#{$state}-tooltip {
+ position: absolute;
+ top: 100%;
+ z-index: 5;
+ display: none;
+ max-width: 100%; // Contain to parent when possible
+ padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+ margin-top: 0.1rem;
+ font-size: 0.875rem;
+ line-height: $form-feedback-tooltip-line-height;
+ background-color: $tooltip-bg-color;
+ border-radius: 0.25rem !important;
+ color: $form-feedback-valid-tooltip-color;
+ }
+
+ @include form-validation-state-selector($state) {
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+
+ .form-control {
+ @include form-validation-state-selector($state) {
+ margin-bottom: 1rem;
+ background-image: none;
+ border-color: $color;
+
+ &:focus {
+ border-color: $color;
+ box-shadow: $focus-box-shadow;
+ }
+ }
+ }
+
+ .form-outline {
+ .form-control {
+ @include form-validation-state-selector($state) {
+ ~ .form-label {
+ color: $color;
+ }
+
+ ~ .form-notch .form-notch-leading,
+ ~ .form-notch .form-notch-middle,
+ ~ .form-notch .form-notch-trailing {
+ border-color: $color;
+ }
+ }
+ }
+ }
+
+ .form-select {
+ @include form-validation-state-selector($state) {
+ border-color: $color;
+
+ &:focus {
+ border-color: $color;
+ box-shadow: $focus-box-shadow;
+ }
+
+ ~ .#{$state}-feedback {
+ margin-top: 0;
+ }
+ }
+ }
+
+ .input-group {
+ .form-control {
+ @include form-validation-state-selector($state) {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ input[type='file'].form-control {
+ @include form-validation-state-selector($state) {
+ .#{$state}-feedback {
+ margin-top: 0;
+ }
+
+ &:focus {
+ box-shadow: inset 0 0 0 1px $color;
+ border-color: $color;
+
+ ~ .form-file-label {
+ box-shadow: none;
+ }
+ }
+
+ &:focus-within {
+ ~ .form-file-label {
+ .form-file-text,
+ .form-file-button {
+ border-color: $color;
+ }
+ }
+ }
+ }
+ }
+
+ .form-check-input {
+ @include form-validation-state-selector($state) {
+ border-color: $color;
+
+ &:checked {
+ background-color: $color;
+ }
+
+ &:checked {
+ &:focus {
+ &:before {
+ box-shadow: 0px 0px 0px 13px $color;
+ }
+ }
+ }
+
+ &:focus {
+ box-shadow: none;
+
+ &:before {
+ box-shadow: 0px 0px 0px 13px $color;
+ }
+ }
+
+ ~ .form-check-label {
+ color: $color;
+ margin-bottom: 1rem;
+ }
+
+ &[type='checkbox'] {
+ &:checked {
+ &:focus {
+ background-color: $color;
+ border-color: $color;
+ }
+ }
+ }
+
+ &[type='radio'] {
+ &:checked {
+ border-color: $color;
+ background-color: $white;
+
+ &:focus {
+ &:before {
+ box-shadow: 0px 0px 0px 13px $color;
+ }
+ }
+
+ &:after {
+ border-color: $color;
+ background-color: $color;
+ }
+ }
+ }
+ }
+ }
+ .form-check-inline .form-check-input {
+ ~ .#{$state}-feedback {
+ margin-left: 0.5em;
+ }
+ }
+}
+
+.was-validated .input-group .invalid-feedback,
+.was-validated .input-group .valid-feedback {
+ margin-top: 2.5rem;
+}
+
+.input-group .invalid-feedback,
+.input-group .valid-feedback {
+ margin-top: 2.5rem;
+}
+
+@each $state, $data in $form-validation-states-mdb {
+ @include form-validation-state-mdb($state, $data...);
+}
diff --git a/src/scss/free/mixins/_buttons.scss b/src/scss/free/mixins/_buttons.scss
new file mode 100644
index 0000000..2575f60
--- /dev/null
+++ b/src/scss/free/mixins/_buttons.scss
@@ -0,0 +1,87 @@
+// Button variant
+@mixin button-variant-mdb($background) {
+ color: set-notification-text-color($background);
+ background-color: $background;
+
+ &:hover {
+ color: set-notification-text-color($background);
+ background-color: darken($background, 7.5%);
+ }
+
+ &:focus,
+ &.focus {
+ color: set-notification-text-color($background);
+ background-color: darken($background, 7.5%);
+ }
+
+ .btn-check:checked + &,
+ .btn-check:active + &,
+ &:active,
+ &.active,
+ .show > &.dropdown-toggle {
+ color: set-notification-text-color($background);
+ background-color: darken($background, 20%);
+
+ &:focus {
+ box-shadow: $btn-focus-box-shadow;
+ }
+ }
+
+ &:disabled,
+ &.disabled {
+ color: set-notification-text-color($background);
+ background-color: $background;
+ }
+}
+
+// Button variant outline
+@mixin button-outline-variant-mdb($color) {
+ color: $color;
+ border-color: $color;
+
+ &:hover {
+ color: $color;
+ background-color: rgba(0, 0, 0, 0.02);
+ }
+
+ &:focus,
+ &.focus {
+ color: $color;
+ background-color: transparent;
+ }
+
+ &:active,
+ &.active,
+ &.dropdown-toggle.show {
+ color: $color;
+ background-color: transparent;
+
+ &:focus {
+ box-shadow: none;
+ }
+ }
+
+ &:disabled,
+ &.disabled {
+ color: $color;
+ }
+}
+
+// Button sizes
+@mixin button-size-mdb(
+ $padding-top,
+ $padding-right,
+ $padding-bottom,
+ $padding-left,
+ $font-size,
+ $line-height
+) {
+ padding: $padding-top $padding-right $padding-bottom $padding-left;
+ font-size: $font-size;
+ line-height: $line-height;
+}
+
+// Button size variant outline
+@mixin button-outline-size-mdb($padding-top, $padding-right, $padding-bottom, $padding-left) {
+ padding: $padding-top $padding-right $padding-bottom $padding-left;
+}
diff --git a/src/scss/free/mixins/_ripple.scss b/src/scss/free/mixins/_ripple.scss
new file mode 100644
index 0000000..144c7dd
--- /dev/null
+++ b/src/scss/free/mixins/_ripple.scss
@@ -0,0 +1,28 @@
+@mixin ripple-variant($color_value) {
+ $gradient: rgba(
+ $color: $color_value,
+ $alpha: 0.2,
+ )
+ 0,
+ rgba(
+ $color: $color_value,
+ $alpha: 0.3,
+ )
+ 40%,
+ rgba(
+ $color: $color_value,
+ $alpha: 0.4,
+ )
+ 50%,
+ rgba(
+ $color: $color_value,
+ $alpha: 0.5,
+ )
+ 60%,
+ rgba(
+ $color: $color_value,
+ $alpha: 0,
+ )
+ 70%;
+ background-image: radial-gradient(circle, $gradient);
+}
diff --git a/src/scss/free/mixins/_table-variants.scss b/src/scss/free/mixins/_table-variants.scss
new file mode 100644
index 0000000..cc03a1a
--- /dev/null
+++ b/src/scss/free/mixins/_table-variants.scss
@@ -0,0 +1,7 @@
+// scss-docs-start table-variant
+@mixin table-variant-mdb($state, $background) {
+ .table-#{$state} {
+ background-color: $background;
+ }
+}
+// scss-docs-end table-variant
diff --git a/src/scss/free/modules/_buttons.scss b/src/scss/free/modules/_buttons.scss
new file mode 100644
index 0000000..adb3fd7
--- /dev/null
+++ b/src/scss/free/modules/_buttons.scss
@@ -0,0 +1,16 @@
+// BOOTSTRAP CORE
+@import "../../bootstrap/functions";
+@import "../../bootstrap/variables";
+@import "../../bootstrap/mixins";
+@import "../../bootstrap/utilities";
+
+// BOOTSTRAP COMPONENT
+@import "../../bootstrap/buttons";
+
+// MDB CORE
+@import "../functions";
+@import "../variables";
+@import "../mixins";
+
+// MDB COMPONENT
+@import "../buttons";
\ No newline at end of file
diff --git a/src/scss/mdb.core.scss b/src/scss/mdb.core.scss
new file mode 100644
index 0000000..76126aa
--- /dev/null
+++ b/src/scss/mdb.core.scss
@@ -0,0 +1,30 @@
+// CORE FUNCTIONS
+@import './bootstrap-rtl-fix/functions';
+@import './free/functions';
+
+// CORE VARIABLES
+@import './free/variables';
+@import './bootstrap-rtl-fix/variables';
+
+// BOOTSTRAP CORE
+@import './bootstrap-rtl-fix/mixins';
+@import './bootstrap-rtl-fix/utilities';
+
+// BOOTSTRAP CORE COMPONENTS
+@import './bootstrap-rtl-fix/root';
+@import './bootstrap-rtl-fix/reboot';
+@import './bootstrap-rtl-fix/type';
+@import './bootstrap-rtl-fix/containers';
+@import './bootstrap-rtl-fix/grid';
+
+// Utilities
+@import './bootstrap-rtl-fix/utilities/api';
+
+// MDB CORE
+@import './free/mixins';
+
+// MDB CORE COMPONENTS
+@import './free/root';
+@import './free/reboot';
+@import './free/colors';
+@import './free/shadows';
diff --git a/src/scss/mdb.free.scss b/src/scss/mdb.free.scss
new file mode 100644
index 0000000..886b909
--- /dev/null
+++ b/src/scss/mdb.free.scss
@@ -0,0 +1,99 @@
+// CORE FUNCTIONS
+@import './bootstrap-rtl-fix/functions';
+@import './free/functions';
+
+// CORE VARIABLES
+@import './custom/variables';
+@import './free/variables';
+@import './bootstrap-rtl-fix/variables';
+
+// BOOTSTRAP CORE
+@import './bootstrap-rtl-fix/mixins';
+@import './bootstrap-rtl-fix/utilities';
+
+// BOOTSTRAP CORE COMPONENTS
+@import './bootstrap-rtl-fix/root';
+@import './bootstrap-rtl-fix/reboot';
+@import './bootstrap-rtl-fix/type';
+@import './bootstrap-rtl-fix/images';
+@import './bootstrap-rtl-fix/containers';
+@import './bootstrap-rtl-fix/grid';
+
+// BOOTSTRAP COMPONENTS
+@import './bootstrap-rtl-fix/tables';
+@import './bootstrap-rtl-fix/forms';
+@import './bootstrap-rtl-fix/buttons';
+@import './bootstrap-rtl-fix/transitions';
+@import './bootstrap-rtl-fix/dropdown';
+@import './bootstrap-rtl-fix/button-group';
+@import './bootstrap-rtl-fix/nav';
+@import './bootstrap-rtl-fix/navbar';
+@import './bootstrap-rtl-fix/card';
+@import './bootstrap-rtl-fix/breadcrumb';
+@import './bootstrap-rtl-fix/pagination';
+@import './bootstrap-rtl-fix/badge';
+@import './bootstrap-rtl-fix/alert';
+@import './bootstrap-rtl-fix/accordion';
+@import './bootstrap-rtl-fix/progress';
+@import './bootstrap-rtl-fix/list-group';
+@import './bootstrap-rtl-fix/close';
+@import './bootstrap-rtl-fix/toasts';
+@import './bootstrap-rtl-fix/modal';
+@import './bootstrap-rtl-fix/tooltip';
+@import './bootstrap-rtl-fix/popover';
+@import './bootstrap-rtl-fix/carousel';
+@import './bootstrap-rtl-fix/spinners';
+@import './bootstrap-rtl-fix/tooltip';
+
+// Helpers
+@import './bootstrap-rtl-fix/helpers';
+
+// Utilities
+@import './bootstrap-rtl-fix/utilities/api';
+
+// MDB CORE
+@import './free/mixins';
+
+// MDB CORE COMPONENTS
+@import './free/root';
+@import './free/reboot';
+@import './free/type';
+@import './free/colors';
+@import './free/shadows';
+@import './free/flag';
+@import './free/images';
+
+// MDB FORMS
+@import './free/forms/form-control';
+@import './free/forms/form-select';
+@import './free/forms/form-check';
+@import './free/forms/form-file';
+@import './free/forms/input-group';
+@import './free/forms/validation';
+@import './free/forms/form-range';
+
+// MDB COMPONENTS
+@import './free/tables';
+@import './free/buttons';
+@import './free/deprecated';
+@import './free/dropdown';
+@import './free/button-group';
+@import './free/nav';
+@import './free/navbar';
+@import './free/card';
+@import './free/breadcrumb';
+@import './free/pagination';
+@import './free/badge';
+@import './free/alert';
+@import './free/progress';
+@import './free/list-group';
+@import './free/close';
+@import './free/modal';
+@import './free/toasts';
+@import './free/tooltip';
+@import './free/popover';
+@import './free/scrollspy';
+@import './free/ripple';
+@import './free/range';
+@import './free/accordion';
+@import './free/carousel';