`s.
.nav {
// scss-docs-start nav-css-vars
--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: #{$nav-link-color};
--#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
// scss-docs-end nav-css-vars
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-link {
display: block;
padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
@include font-size(var(--#{$prefix}nav-link-font-size));
font-weight: var(--#{$prefix}nav-link-font-weight);
color: var(--#{$prefix}nav-link-color);
text-decoration: if($link-decoration == none, null, none);
background: none;
border: 0;
@include transition($nav-link-transition);
&:hover,
&:focus {
color: var(--#{$prefix}nav-link-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null);
}
&:focus-visible {
outline: 0;
box-shadow: $nav-link-focus-box-shadow;
}
// Disabled state lightens text
&.disabled,
&:disabled {
color: var(--#{$prefix}nav-link-disabled-color);
pointer-events: none;
cursor: default;
}
}
//
// Tabs
//
.nav-tabs {
// scss-docs-start nav-tabs-css-vars
--#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
--#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
--#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
--#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
--#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
--#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
// scss-docs-end nav-tabs-css-vars
border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
.nav-link {
margin-bottom: calc(
-1 * var(--#{$prefix}nav-tabs-border-width)
); // stylelint-disable-line function-disallowed-list
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
&:hover,
&:focus {
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
isolation: isolate;
border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
}
}
.nav-link.active,
.nav-item.show .nav-link {
color: var(--#{$prefix}nav-tabs-link-active-color);
background-color: var(--#{$prefix}nav-tabs-link-active-bg);
border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
}
.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: calc(
-1 * var(--#{$prefix}nav-tabs-border-width)
); // stylelint-disable-line function-disallowed-list
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
}
//
// Pills
//
.nav-pills {
// scss-docs-start nav-pills-css-vars
--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
// scss-docs-end nav-pills-css-vars
.nav-link {
@include border-radius(var(--#{$prefix}nav-pills-border-radius));
}
.nav-link.active,
.show > .nav-link {
color: var(--#{$prefix}nav-pills-link-active-color);
@include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
}
}
//
// Underline
//
.nav-underline {
// scss-docs-start nav-underline-css-vars
--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
// scss-docs-end nav-underline-css-vars
gap: var(--#{$prefix}nav-underline-gap);
.nav-link {
padding-right: 0;
padding-left: 0;
border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
&:hover,
&:focus {
border-bottom-color: currentcolor;
}
}
.nav-link.active,
.show > .nav-link {
font-weight: $font-weight-bold;
color: var(--#{$prefix}nav-underline-link-active-color);
border-bottom-color: currentcolor;
}
}
//
// 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;
}
}
.nav-fill,
.nav-justified {
.nav-item .nav-link {
width: 100%; // Make sure button will grow
}
}
// Tabbable tabs
//
// Hide tabbable panes to start, show them when `.active`
.tab-content {
> .tab-pane {
display: none;
}
> .active {
display: block;
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_navbar.scss
================================================
// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
// scss-docs-start navbar-css-vars
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
// scss-docs-end navbar-css-vars
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: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
@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: var(--#{$prefix}navbar-brand-padding-y);
padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
margin-right: var(--#{$prefix}navbar-brand-margin-end);
@include font-size(var(--#{$prefix}navbar-brand-font-size));
color: var(--#{$prefix}navbar-brand-color);
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap;
&:hover,
&:focus {
color: var(--#{$prefix}navbar-brand-hover-color);
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 {
// scss-docs-start navbar-nav-css-vars
--#{$prefix}nav-link-padding-x: 0;
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
// scss-docs-end navbar-nav-css-vars
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 {
&.active,
&.show {
color: var(--#{$prefix}navbar-active-color);
}
}
.dropdown-menu {
position: static;
}
}
// Navbar text
//
//
.navbar-text {
padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y;
color: var(--#{$prefix}navbar-color);
a,
a:hover,
a:focus {
color: var(--#{$prefix}navbar-active-color);
}
}
// 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: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
@include font-size(var(--#{$prefix}navbar-toggler-font-size));
line-height: 1;
color: var(--#{$prefix}navbar-color);
background-color: transparent; // remove default button style
border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
@include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
@include transition(var(--#{$prefix}navbar-toggler-transition));
&:hover {
text-decoration: none;
}
&:focus {
text-decoration: none;
outline: 0;
box-shadow: 0 0 0 var(--#{$prefix}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-image: var(--#{$prefix}navbar-toggler-icon-bg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
.navbar-nav-scroll {
max-height: var(--#{$prefix}scroll-height, 75vh);
overflow-y: auto;
}
// scss-docs-start navbar-expand-loop
// 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: var(--#{$prefix}navbar-nav-link-padding-x);
padding-left: var(--#{$prefix}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;
}
.offcanvas {
// stylelint-disable declaration-no-important
position: static;
z-index: auto;
flex-grow: 1;
width: auto !important;
height: auto !important;
visibility: visible !important;
background-color: transparent !important;
border: 0 !important;
transform: none !important;
@include box-shadow(none);
@include transition(none);
// stylelint-enable declaration-no-important
.offcanvas-header {
display: none;
}
.offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
}
}
}
}
}
}
// scss-docs-end navbar-expand-loop
// Navbar themes
//
// Styles for switching between navbars with light or dark background.
.navbar-light {
@include deprecate('`.navbar-light`', 'v5.2.0', 'v6.0.0', true);
}
.navbar-dark,
.navbar[data-mdb-theme='dark'] {
// scss-docs-start navbar-dark-css-vars
--#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
// scss-docs-end navbar-dark-css-vars
}
@if $enable-dark-mode {
@include color-mode(dark) {
.navbar-toggler-icon {
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_offcanvas.scss
================================================
// stylelint-disable function-disallowed-list
%offcanvas-css-vars {
// scss-docs-start offcanvas-css-vars
--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
--#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
--#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
--#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
--#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
--#{$prefix}offcanvas-color: #{$offcanvas-color};
--#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
--#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
--#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
--#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
--#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
// scss-docs-end offcanvas-css-vars
}
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
.offcanvas#{$infix} {
@extend %offcanvas-css-vars;
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
.offcanvas#{$infix} {
@include media-breakpoint-down($next) {
position: fixed;
bottom: 0;
z-index: var(--#{$prefix}offcanvas-zindex);
display: flex;
flex-direction: column;
max-width: 100%;
color: var(--#{$prefix}offcanvas-color);
visibility: hidden;
background-color: var(--#{$prefix}offcanvas-bg);
background-clip: padding-box;
outline: 0;
@include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
@include transition(var(--#{$prefix}offcanvas-transition));
&.offcanvas-start {
top: 0;
left: 0;
width: var(--#{$prefix}offcanvas-width);
border-right: var(--#{$prefix}offcanvas-border-width) solid
var(--#{$prefix}offcanvas-border-color);
transform: translateX(-100%);
}
&.offcanvas-end {
top: 0;
right: 0;
width: var(--#{$prefix}offcanvas-width);
border-left: var(--#{$prefix}offcanvas-border-width) solid
var(--#{$prefix}offcanvas-border-color);
transform: translateX(100%);
}
&.offcanvas-top {
top: 0;
right: 0;
left: 0;
height: var(--#{$prefix}offcanvas-height);
max-height: 100%;
border-bottom: var(--#{$prefix}offcanvas-border-width) solid
var(--#{$prefix}offcanvas-border-color);
transform: translateY(-100%);
}
&.offcanvas-bottom {
right: 0;
left: 0;
height: var(--#{$prefix}offcanvas-height);
max-height: 100%;
border-top: var(--#{$prefix}offcanvas-border-width) solid
var(--#{$prefix}offcanvas-border-color);
transform: translateY(100%);
}
&.showing,
&.show:not(.hiding) {
transform: none;
}
&.showing,
&.hiding,
&.show {
visibility: visible;
}
}
@if not($infix == '') {
@include media-breakpoint-up($next) {
--#{$prefix}offcanvas-height: auto;
--#{$prefix}offcanvas-border-width: 0;
background-color: transparent !important; // stylelint-disable-line declaration-no-important
.offcanvas-header {
display: none;
}
.offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
// Reset `background-color` in case `.bg-*` classes are used in offcanvas
background-color: transparent !important; // stylelint-disable-line declaration-no-important
}
}
}
}
}
.offcanvas-backdrop {
@include overlay-backdrop(
$zindex-offcanvas-backdrop,
$offcanvas-backdrop-bg,
$offcanvas-backdrop-opacity
);
}
.offcanvas-header {
display: flex;
align-items: center;
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
.btn-close {
padding: calc(var(--#{$prefix}offcanvas-padding-y) * 0.5)
calc(var(--#{$prefix}offcanvas-padding-x) * 0.5);
margin: calc(-0.5 * var(--#{$prefix}offcanvas-padding-y))
calc(-0.5 * var(--#{$prefix}offcanvas-padding-x))
calc(-0.5 * var(--#{$prefix}offcanvas-padding-y)) auto;
}
}
.offcanvas-title {
margin-bottom: 0;
line-height: var(--#{$prefix}offcanvas-title-line-height);
}
.offcanvas-body {
flex-grow: 1;
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
overflow-y: auto;
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_pagination.scss
================================================
.pagination {
// scss-docs-start pagination-css-vars
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
--#{$prefix}pagination-padding-y: #{$pagination-padding-y};
@include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-color: #{$pagination-color};
--#{$prefix}pagination-bg: #{$pagination-bg};
--#{$prefix}pagination-border-width: #{$pagination-border-width};
--#{$prefix}pagination-border-color: #{$pagination-border-color};
--#{$prefix}pagination-border-radius: #{$pagination-border-radius};
--#{$prefix}pagination-hover-color: #{$pagination-hover-color};
--#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
--#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
--#{$prefix}pagination-focus-color: #{$pagination-focus-color};
--#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
--#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
--#{$prefix}pagination-active-color: #{$pagination-active-color};
--#{$prefix}pagination-active-bg: #{$pagination-active-bg};
--#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
--#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
--#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
--#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
// scss-docs-end pagination-css-vars
display: flex;
@include list-unstyled();
}
.page-link {
position: relative;
display: block;
padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
@include font-size(var(--#{$prefix}pagination-font-size));
color: var(--#{$prefix}pagination-color);
text-decoration: if($link-decoration == none, null, none);
background-color: var(--#{$prefix}pagination-bg);
border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
@include transition($pagination-transition);
&:hover {
z-index: 2;
color: var(--#{$prefix}pagination-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null);
background-color: var(--#{$prefix}pagination-hover-bg);
border-color: var(--#{$prefix}pagination-hover-border-color);
}
&:focus {
z-index: 3;
color: var(--#{$prefix}pagination-focus-color);
background-color: var(--#{$prefix}pagination-focus-bg);
outline: $pagination-focus-outline;
box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
}
&.active,
.active > & {
z-index: 3;
color: var(--#{$prefix}pagination-active-color);
@include gradient-bg(var(--#{$prefix}pagination-active-bg));
border-color: var(--#{$prefix}pagination-active-border-color);
}
&.disabled,
.disabled > & {
color: var(--#{$prefix}pagination-disabled-color);
pointer-events: none;
background-color: var(--#{$prefix}pagination-disabled-bg);
border-color: var(--#{$prefix}pagination-disabled-border-color);
}
}
.page-item {
&:not(:first-child) .page-link {
margin-left: $pagination-margin-start;
}
@if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
&:first-child {
.page-link {
@include border-start-radius(var(--#{$prefix}pagination-border-radius));
}
}
&:last-child {
.page-link {
@include border-end-radius(var(--#{$prefix}pagination-border-radius));
}
}
} @else {
// Add border-radius to all pageLinks in case they have left margin
.page-link {
@include border-radius(var(--#{$prefix}pagination-border-radius));
}
}
}
//
// Sizing
//
.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
);
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_placeholders.scss
================================================
.placeholder {
display: inline-block;
min-height: 1em;
vertical-align: middle;
cursor: wait;
background-color: currentcolor;
opacity: $placeholder-opacity-max;
&.btn::before {
display: inline-block;
content: '';
}
}
// Sizing
.placeholder-xs {
min-height: 0.6em;
}
.placeholder-sm {
min-height: 0.8em;
}
.placeholder-lg {
min-height: 1.2em;
}
// Animation
.placeholder-glow {
.placeholder {
animation: placeholder-glow 2s ease-in-out infinite;
}
}
@keyframes placeholder-glow {
50% {
opacity: $placeholder-opacity-min;
}
}
.placeholder-wave {
mask-image: linear-gradient(
130deg,
$black 55%,
rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%,
$black 95%
);
mask-size: 200% 100%;
animation: placeholder-wave 2s linear infinite;
}
@keyframes placeholder-wave {
100% {
mask-position: -200% 0%;
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_popover.scss
================================================
.popover {
// scss-docs-start popover-css-vars
--#{$prefix}popover-zindex: #{$zindex-popover};
--#{$prefix}popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --#{$prefix}popover-font-size);
--#{$prefix}popover-bg: #{$popover-bg};
--#{$prefix}popover-border-width: #{$popover-border-width};
--#{$prefix}popover-border-color: #{$popover-border-color};
--#{$prefix}popover-border-radius: #{$popover-border-radius};
--#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
--#{$prefix}popover-box-shadow: #{$popover-box-shadow};
--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
@include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
--#{$prefix}popover-header-color: #{$popover-header-color};
--#{$prefix}popover-header-bg: #{$popover-header-bg};
--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
--#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
--#{$prefix}popover-body-color: #{$popover-body-color};
--#{$prefix}popover-arrow-width: #{$popover-arrow-width};
--#{$prefix}popover-arrow-height: #{$popover-arrow-height};
--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
// scss-docs-end popover-css-vars
z-index: var(--#{$prefix}popover-zindex);
display: block;
max-width: var(--#{$prefix}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(var(--#{$prefix}popover-font-size));
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
background-color: var(--#{$prefix}popover-bg);
background-clip: padding-box;
border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
@include border-radius(var(--#{$prefix}popover-border-radius));
@include box-shadow(var(--#{$prefix}popover-box-shadow));
.popover-arrow {
display: block;
width: var(--#{$prefix}popover-arrow-width);
height: var(--#{$prefix}popover-arrow-height);
&::before,
&::after {
position: absolute;
display: block;
content: '';
border-color: transparent;
border-style: solid;
border-width: 0;
}
}
}
.bs-popover-top {
> .popover-arrow {
bottom: calc(
-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)
); // stylelint-disable-line function-disallowed-list
&::before,
&::after {
border-width: var(--#{$prefix}popover-arrow-height)
calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
}
&::before {
bottom: 0;
border-top-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
bottom: var(--#{$prefix}popover-border-width);
border-top-color: var(--#{$prefix}popover-bg);
}
}
}
/*!rtl:begin:ignore*/
.bs-popover-end {
> .popover-arrow {
left: calc(
-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)
); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width);
&::before,
&::after {
border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5)
var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
}
&::before {
left: 0;
border-right-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
left: var(--#{$prefix}popover-border-width);
border-right-color: var(--#{$prefix}popover-bg);
}
}
}
/*!rtl:end:ignore*/
.bs-popover-bottom {
> .popover-arrow {
top: calc(
-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)
); // stylelint-disable-line function-disallowed-list
&::before,
&::after {
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * 0.5)
var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
}
&::before {
top: 0;
border-bottom-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
top: var(--#{$prefix}popover-border-width);
border-bottom-color: var(--#{$prefix}popover-bg);
}
}
// This will remove the popover-header's border just below the arrow
.popover-header::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: var(--#{$prefix}popover-arrow-width);
margin-left: calc(
-0.5 * var(--#{$prefix}popover-arrow-width)
); // stylelint-disable-line function-disallowed-list
content: '';
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
}
}
/*!rtl:begin:ignore*/
.bs-popover-start {
> .popover-arrow {
right: calc(
-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)
); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width);
&::before,
&::after {
border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0
calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
}
&::before {
right: 0;
border-left-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
right: var(--#{$prefix}popover-border-width);
border-left-color: var(--#{$prefix}popover-bg);
}
}
}
/*!rtl:end:ignore*/
.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: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
margin-bottom: 0; // Reset the default from Reboot
@include font-size(var(--#{$prefix}popover-header-font-size));
color: var(--#{$prefix}popover-header-color);
background-color: var(--#{$prefix}popover-header-bg);
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
@include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
&:empty {
display: none;
}
}
.popover-body {
padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
color: var(--#{$prefix}popover-body-color);
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_progress.scss
================================================
// Disable animation if transitions are disabled
// scss-docs-start progress-keyframes
@if $enable-transitions {
@keyframes progress-bar-stripes {
0% {
background-position-x: $progress-height;
}
}
}
// scss-docs-end progress-keyframes
.progress,
.progress-stacked {
// scss-docs-start progress-css-vars
--#{$prefix}progress-height: #{$progress-height};
@include rfs($progress-font-size, --#{$prefix}progress-font-size);
--#{$prefix}progress-bg: #{$progress-bg};
--#{$prefix}progress-border-radius: #{$progress-border-radius};
--#{$prefix}progress-box-shadow: #{$progress-box-shadow};
--#{$prefix}progress-bar-color: #{$progress-bar-color};
--#{$prefix}progress-bar-bg: #{$progress-bar-bg};
--#{$prefix}progress-bar-transition: #{$progress-bar-transition};
// scss-docs-end progress-css-vars
display: flex;
height: var(--#{$prefix}progress-height);
overflow: hidden; // force rounded corners by cropping it
@include font-size(var(--#{$prefix}progress-font-size));
background-color: var(--#{$prefix}progress-bg);
@include border-radius(var(--#{$prefix}progress-border-radius));
@include box-shadow(var(--#{$prefix}progress-box-shadow));
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: var(--#{$prefix}progress-bar-color);
text-align: center;
white-space: nowrap;
background-color: var(--#{$prefix}progress-bar-bg);
@include transition(var(--#{$prefix}progress-bar-transition));
}
.progress-bar-striped {
@include gradient-striped();
background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
}
.progress-stacked > .progress {
overflow: visible;
}
.progress-stacked > .progress > .progress-bar {
width: 100%;
}
@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;
}
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_reboot.scss
================================================
// 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 {
@if $font-size-root != null {
@include font-size(var(--#{$prefix}root-font-size));
}
@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.
// scss-docs-start reboot-body-rules
body {
margin: 0; // 1
font-family: var(--#{$prefix}body-font-family);
@include font-size(var(--#{$prefix}body-font-size));
font-weight: var(--#{$prefix}body-font-weight);
line-height: var(--#{$prefix}body-line-height);
color: var(--#{$prefix}body-color);
text-align: var(--#{$prefix}body-text-align);
background-color: var(--#{$prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
// scss-docs-end reboot-body-rules
// Content grouping
//
// 1. Reset Firefox's gray color
hr {
margin: $hr-margin-y 0;
color: $hr-color; // 1
border: 0;
border-top: $hr-border-width solid $hr-border-color;
opacity: $hr-opacity;
}
// 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: var(--#{$prefix}heading-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. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
// 2. Add explicit cursor to indicate changed behavior.
// 3. Prevent the text-decoration to be skipped.
abbr[title] {
text-decoration: underline dotted; // 1
cursor: help; // 2
text-decoration-skip-ink: none; // 3
}
// 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;
color: var(--#{$prefix}highlight-color);
background-color: var(--#{$prefix}highlight-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: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
text-decoration: $link-decoration;
&:hover {
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
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.
}
// 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: var(--#{$prefix}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;
}
select {
// Remove the inheritance of word-wrap in Safari.
// See https://github.com/twbs/bootstrap/issues/24990
word-wrap: normal;
// Undo the opacity change from Chrome
&:disabled {
opacity: 1;
}
}
// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
// See https://stackoverflow.com/a/54997118
[list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not(
[type='time']
)::-webkit-calendar-picker-indicator {
display: none !important;
}
// 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. 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.
// 2. Correct the outline style in Safari.
[type='search'] {
-webkit-appearance: textfield; // 1
outline-offset: -2px; // 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;
}
// 1. Inherit font family and line height for file input buttons
// 2. Correct the inability to style clickable types in iOS and Safari.
::file-selector-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;
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_root.scss
================================================
:root,
[data-mdb-theme='light'] {
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors
//
// Generate palettes for full colors, grays, and theme colors.
@each $color, $value in $colors {
--#{$prefix}#{$color}: #{$value};
}
@each $color, $value in $grays {
--#{$prefix}gray-#{$color}: #{$value};
}
@each $color, $value in $theme-colors {
--#{$prefix}#{$color}: #{$value};
}
@each $color, $value in $theme-colors-rgb {
--#{$prefix}#{$color}-rgb: #{$value};
}
@each $color, $value in $theme-colors-text {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
@each $color, $value in $theme-colors-bg-subtle {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
@each $color, $value in $theme-colors-border-subtle {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
--#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)};
// Fonts
// Note: Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
--#{$prefix}font-monospace: #{inspect($font-family-monospace)};
--#{$prefix}gradient: #{$gradient};
// Root and body
// scss-docs-start root-body-variables
@if $font-size-root != null {
--#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{inspect($font-family-base)};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
@if $body-text-align != null {
--#{$prefix}body-text-align: #{$body-text-align};
}
--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
// scss-docs-end root-body-variables
--#{$prefix}heading-color: #{$headings-color};
--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
--#{$prefix}link-decoration: #{$link-decoration};
--#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
@if $link-hover-decoration != null {
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
}
--#{$prefix}code-color: #{$code-color};
--#{$prefix}highlight-color: #{$mark-color};
--#{$prefix}highlight-bg: #{$mark-bg};
// scss-docs-start root-border-var
--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-color: #{$border-color};
--#{$prefix}border-color-translucent: #{$border-color-translucent};
--#{$prefix}border-radius: #{$border-radius};
--#{$prefix}border-radius-sm: #{$border-radius-sm};
--#{$prefix}border-radius-lg: #{$border-radius-lg};
--#{$prefix}border-radius-xl: #{$border-radius-xl};
--#{$prefix}border-radius-xxl: #{$border-radius-xxl};
--#{$prefix}border-radius-2xl: var(
--#{$prefix}border-radius-xxl
); // Deprecated in v5.3.0 for consistency
--#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-end root-border-var
--#{$prefix}box-shadow: #{$box-shadow};
--#{$prefix}box-shadow-sm: #{$box-shadow-sm};
--#{$prefix}box-shadow-lg: #{$box-shadow-lg};
--#{$prefix}box-shadow-inset: #{$box-shadow-inset};
// Focus styles
// scss-docs-start root-focus-variables
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};
// scss-docs-end root-focus-variables
// scss-docs-start root-form-validation-variables
--#{$prefix}form-valid-color: #{$form-valid-color};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color};
--#{$prefix}form-invalid-color: #{$form-invalid-color};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
// scss-docs-end root-form-validation-variables
}
@if $enable-dark-mode {
@include color-mode(dark, true) {
color-scheme: dark;
// scss-docs-start root-dark-mode-vars
--#{$prefix}body-color: #{$body-color-dark};
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
--#{$prefix}body-bg: #{$body-bg-dark};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
--#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
--#{$prefix}secondary-color: #{$body-secondary-color-dark};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
--#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
--#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
@each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
@each $color, $value in $theme-colors-bg-subtle-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
@each $color, $value in $theme-colors-border-subtle-dark {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
--#{$prefix}heading-color: #{$headings-color-dark};
--#{$prefix}link-color: #{$link-color-dark};
--#{$prefix}link-hover-color: #{$link-hover-color-dark};
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
--#{$prefix}code-color: #{$code-color-dark};
--#{$prefix}highlight-color: #{$mark-color-dark};
--#{$prefix}highlight-bg: #{$mark-bg-dark};
--#{$prefix}border-color: #{$border-color-dark};
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
--#{$prefix}form-valid-color: #{$form-valid-color-dark};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
// scss-docs-end root-dark-mode-vars
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_spinners.scss
================================================
//
// Rotating border
//
.spinner-grow,
.spinner-border {
display: inline-block;
width: var(--#{$prefix}spinner-width);
height: var(--#{$prefix}spinner-height);
vertical-align: var(--#{$prefix}spinner-vertical-align);
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
animation: var(--#{$prefix}spinner-animation-speed) linear infinite
var(--#{$prefix}spinner-animation-name);
}
// scss-docs-start spinner-border-keyframes
@keyframes spinner-border {
to {
transform: rotate(360deg) #{'/*!rtl:ignore*/'};
}
}
// scss-docs-end spinner-border-keyframes
.spinner-border {
// scss-docs-start spinner-border-css-vars
--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-border-width: #{$spinner-border-width};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-border;
// scss-docs-end spinner-border-css-vars
border: var(--#{$prefix}spinner-border-width) solid currentcolor;
border-right-color: transparent;
}
.spinner-border-sm {
// scss-docs-start spinner-border-sm-css-vars
--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
// scss-docs-end spinner-border-sm-css-vars
}
//
// Growing circle
//
// scss-docs-start spinner-grow-keyframes
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}
// scss-docs-end spinner-grow-keyframes
.spinner-grow {
// scss-docs-start spinner-grow-css-vars
--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-grow;
// scss-docs-end spinner-grow-css-vars
background-color: currentcolor;
opacity: 0;
}
.spinner-grow-sm {
--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
}
@if $enable-reduced-motion {
@media (prefers-reduced-motion: reduce) {
.spinner-border,
.spinner-grow {
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_tables.scss
================================================
//
// Basic Bootstrap table
//
.table {
// Reset needed for nesting tables
--#{$prefix}table-color-type: initial;
--#{$prefix}table-bg-type: initial;
--#{$prefix}table-color-state: initial;
--#{$prefix}table-bg-state: initial;
// End of reset
--#{$prefix}table-color: #{$table-color};
--#{$prefix}table-bg: #{$table-bg};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-accent-bg: #{$table-accent-bg};
--#{$prefix}table-striped-color: #{$table-striped-color};
--#{$prefix}table-striped-bg: #{$table-striped-bg};
--#{$prefix}table-active-color: #{$table-active-color};
--#{$prefix}table-active-bg: #{$table-active-bg};
--#{$prefix}table-hover-color: #{$table-hover-color};
--#{$prefix}table-hover-bg: #{$table-hover-bg};
width: 100%;
margin-bottom: $spacer;
vertical-align: $table-cell-vertical-align;
border-color: var(--#{$prefix}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;
// Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
color: var(
--#{$prefix}table-color-state,
var(--#{$prefix}table-color-type, var(--#{$prefix}table-color))
);
background-color: var(--#{$prefix}table-bg);
border-bottom-width: $table-border-width;
box-shadow: inset 0 0 0 9999px
var(
--#{$prefix}table-bg-state,
var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg))
);
}
> tbody {
vertical-align: inherit;
}
> thead {
vertical-align: bottom;
}
}
.table-group-divider {
border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
}
//
// 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.
// Therefore 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;
}
> :not(:first-child) {
border-top-width: 0;
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
// For rows
.table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) > * {
--#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
--#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
}
}
// For columns
.table-striped-columns {
> :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
--#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
--#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
}
}
// Active table
//
// The `.table-active` class can be added to highlight rows or cells
.table-active {
--#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
--#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
> tbody > tr:hover > * {
--#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
--#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
}
}
// 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;
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_toasts.scss
================================================
.toast {
// scss-docs-start toast-css-vars
--#{$prefix}toast-zindex: #{$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};
// scss-docs-end toast-css-vars
width: var(--#{$prefix}toast-max-width);
max-width: 100%;
@include font-size(var(--#{$prefix}toast-font-size));
color: var(--#{$prefix}toast-color);
pointer-events: auto;
background-color: var(--#{$prefix}toast-bg);
background-clip: padding-box;
border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
box-shadow: var(--#{$prefix}toast-box-shadow);
@include border-radius(var(--#{$prefix}toast-border-radius));
&.showing {
opacity: 0;
}
&:not(.show) {
display: none;
}
}
.toast-container {
--#{$prefix}toast-zindex: #{$zindex-toast};
position: absolute;
z-index: var(--#{$prefix}toast-zindex);
width: max-content;
max-width: 100%;
pointer-events: none;
> :not(:last-child) {
margin-bottom: var(--#{$prefix}toast-spacing);
}
}
.toast-header {
display: flex;
align-items: center;
padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
color: var(--#{$prefix}toast-header-color);
background-color: var(--#{$prefix}toast-header-bg);
background-clip: padding-box;
border-bottom: var(--#{$prefix}toast-border-width) solid
var(--#{$prefix}toast-header-border-color);
@include border-top-radius(
calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width))
);
.btn-close {
margin-right: calc(
-0.5 * var(--#{$prefix}toast-padding-x)
); // stylelint-disable-line function-disallowed-list
margin-left: var(--#{$prefix}toast-padding-x);
}
}
.toast-body {
padding: var(--#{$prefix}toast-padding-x);
word-wrap: break-word;
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_tooltip.scss
================================================
// Base class
.tooltip {
// scss-docs-start tooltip-css-vars
--#{$prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: #{$tooltip-color};
--#{$prefix}tooltip-bg: #{$tooltip-bg};
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
// scss-docs-end tooltip-css-vars
z-index: var(--#{$prefix}tooltip-zindex);
display: block;
margin: var(--#{$prefix}tooltip-margin);
@include deprecate('`$tooltip-margin`', 'v5', 'v5.x', true);
// 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(var(--#{$prefix}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: var(--#{$prefix}tooltip-opacity);
}
.tooltip-arrow {
display: block;
width: var(--#{$prefix}tooltip-arrow-width);
height: var(--#{$prefix}tooltip-arrow-height);
&::before {
position: absolute;
content: '';
border-color: transparent;
border-style: solid;
}
}
}
.bs-tooltip-top .tooltip-arrow {
bottom: calc(
-1 * var(--#{$prefix}tooltip-arrow-height)
); // stylelint-disable-line function-disallowed-list
&::before {
top: -1px;
border-width: var(--#{$prefix}tooltip-arrow-height)
calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
border-top-color: var(--#{$prefix}tooltip-bg);
}
}
/*!rtl:begin:ignore*/
.bs-tooltip-end .tooltip-arrow {
left: calc(
-1 * var(--#{$prefix}tooltip-arrow-height)
); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width);
&::before {
right: -1px;
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5)
var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
border-right-color: var(--#{$prefix}tooltip-bg);
}
}
/*!rtl:end:ignore*/
.bs-tooltip-bottom .tooltip-arrow {
top: calc(
-1 * var(--#{$prefix}tooltip-arrow-height)
); // stylelint-disable-line function-disallowed-list
&::before {
bottom: -1px;
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5)
var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-bottom-color: var(--#{$prefix}tooltip-bg);
}
}
/*!rtl:begin:ignore*/
.bs-tooltip-start .tooltip-arrow {
right: calc(
-1 * var(--#{$prefix}tooltip-arrow-height)
); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width);
&::before {
left: -1px;
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0
calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-left-color: var(--#{$prefix}tooltip-bg);
}
}
/*!rtl:end:ignore*/
.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: var(--#{$prefix}tooltip-max-width);
padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
color: var(--#{$prefix}tooltip-color);
text-align: center;
background-color: var(--#{$prefix}tooltip-bg);
@include border-radius(var(--#{$prefix}tooltip-border-radius));
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_transitions.scss
================================================
.fade {
@include transition($transition-fade);
&:not(.show) {
opacity: 0;
}
}
// scss-docs-start collapse-classes
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
&.collapse-horizontal {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
}
// scss-docs-end collapse-classes
================================================
FILE: src/scss/bootstrap-rtl-fix/_type.scss
================================================
//
// 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-family: $display-font-family;
font-style: $display-font-style;
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
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/_utilities.scss
================================================
// Utilities
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
(
// scss-docs-start utils-vertical-align
'align':
(
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top,
),
// scss-docs-end utils-vertical-align
// scss-docs-start utils-float
'float':
(
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
),
),
// scss-docs-end utils-float
// Object Fit utilities
// scss-docs-start utils-object-fit
'object-fit':
(
responsive: true,
property: object-fit,
values: (
contain: contain,
cover: cover,
fill: fill,
scale: scale-down,
none: none,
),
),
// scss-docs-end utils-object-fit
// Opacity utilities
// scss-docs-start utils-opacity
'opacity':
(
property: opacity,
values: (
0: 0,
25: 0.25,
50: 0.5,
75: 0.75,
100: 1,
),
),
// scss-docs-end utils-opacity
// scss-docs-start utils-overflow
'overflow':
(
property: overflow,
values: auto hidden visible scroll,
),
'overflow-x': (
property: overflow-x,
values: auto hidden visible scroll,
),
'overflow-y': (
property: overflow-y,
values: auto hidden visible scroll,
),
// scss-docs-end utils-overflow
// scss-docs-start utils-display
'display':
(
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid inline-grid table table-row table-cell flex
inline-flex none,
),
// scss-docs-end utils-display
// scss-docs-start utils-shadow
'shadow':
(
property: box-shadow,
class: shadow,
values: (
null: var(--#{$prefix}box-shadow),
sm: var(--#{$prefix}box-shadow-sm),
lg: var(--#{$prefix}box-shadow-lg),
none: none,
),
),
// scss-docs-end utils-shadow
// scss-docs-start utils-focus-ring
'focus-ring':
(
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, '$key', 'focus-ring'),
),
// scss-docs-end utils-focus-ring
// scss-docs-start utils-position
'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%),
),
),
// scss-docs-end utils-position
// scss-docs-start utils-borders
'border':
(
property: border,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color),
0: 0,
),
),
'border-top': (
property: border-top,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color),
0: 0,
),
),
'border-end': (
property: border-right,
class: border-end,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color),
0: 0,
),
),
'border-bottom': (
property: border-bottom,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color),
0: 0,
),
),
'border-start': (
property: border-left,
class: border-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color),
0: 0,
),
),
'border-color': (
property: border-color,
class: border,
local-vars: (
'border-opacity': 1,
),
values: $utilities-border-colors,
),
'subtle-border-color': (
property: border-color,
class: border,
values: $utilities-border-subtle,
),
'border-width': (
property: border-width,
class: border,
values: $border-widths,
),
'border-opacity': (
css-var: true,
class: border-opacity,
values: (
10: 0.1,
25: 0.25,
50: 0.5,
75: 0.75,
100: 1,
),
),
// scss-docs-end utils-borders
// Sizing utilities
// scss-docs-start utils-sizing
'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,
),
),
// scss-docs-end utils-sizing
// Flex utilities
// scss-docs-start utils-flex
'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,
),
'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,
),
),
// scss-docs-end utils-flex
// Margin utilities
// scss-docs-start utils-spacing
'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,
),
// Gap utility
'gap':
(
responsive: true,
property: gap,
class: gap,
values: $spacers,
),
'row-gap': (
responsive: true,
property: row-gap,
class: row-gap,
values: $spacers,
),
'column-gap': (
responsive: true,
property: column-gap,
class: column-gap,
values: $spacers,
),
// scss-docs-end utils-spacing
// Text
// scss-docs-start utils-text
'font-family':
(
property: font-family,
class: font,
values: (
monospace: var(--#{$prefix}font-monospace),
),
),
'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: (
lighter: $font-weight-lighter,
light: $font-weight-light,
normal: $font-weight-normal,
medium: $font-weight-medium,
semibold: $font-weight-semibold,
bold: $font-weight-bold,
bolder: $font-weight-bolder,
),
),
'line-height': (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
),
),
'text-align': (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
),
),
'text-decoration': (
property: text-decoration,
values: none underline line-through,
),
'text-transform': (
property: text-transform,
class: text,
values: lowercase uppercase capitalize,
),
'white-space': (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
),
),
'word-wrap': (
property: word-wrap word-break,
class: text,
values: (
break: break-word,
),
rtl: false,
),
// scss-docs-end utils-text
// scss-docs-start utils-color
'color':
(
property: color,
class: text,
local-vars: (
'text-opacity': 1,
),
values:
map-merge(
$utilities-text-colors,
(
'muted': var(--#{$prefix}secondary-color),
// deprecated
'black-50': rgba($black, 0.5),
// deprecated
'white-50': rgba($white, 0.5),
// deprecated
'body-secondary': var(--#{$prefix}secondary-color),
'body-tertiary': var(--#{$prefix}tertiary-color),
'body-emphasis': var(--#{$prefix}emphasis-color),
'reset': inherit,
)
),
),
'text-opacity': (
css-var: true,
class: text-opacity,
values: (
25: 0.25,
50: 0.5,
75: 0.75,
100: 1,
),
),
'text-color': (
property: color,
class: text,
values: $utilities-text-emphasis-colors,
),
// scss-docs-end utils-color
// scss-docs-start utils-links
'link-opacity':
(
css-var: true,
class: link-opacity,
state: hover,
values: (
10: 0.1,
25: 0.25,
50: 0.5,
75: 0.75,
100: 1,
),
),
'link-offset': (
property: text-underline-offset,
class: link-offset,
state: hover,
values: (
1: 0.125em,
2: 0.25em,
3: 0.375em,
),
),
'link-underline': (
property: text-decoration-color,
class: link-underline,
local-vars: (
'link-underline-opacity': 1,
),
values:
map-merge(
$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
)
),
),
'link-underline-opacity': (
css-var: true,
class: link-underline-opacity,
state: hover,
values: (
0: 0,
10: 0.1,
25: 0.25,
50: 0.5,
75: 0.75,
100: 1,
),
),
// scss-docs-end utils-links
// scss-docs-start utils-bg-color
'background-color':
(
property: background-color,
class: bg,
local-vars: (
'bg-opacity': 1,
),
values:
map-merge(
$utilities-bg-colors,
(
'transparent': transparent,
'body-secondary': rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
'body-tertiary': rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
)
),
),
'bg-opacity': (
css-var: true,
class: bg-opacity,
values: (
10: 0.1,
25: 0.25,
50: 0.5,
75: 0.75,
100: 1,
),
),
'subtle-background-color': (
property: background-color,
class: bg,
values: $utilities-bg-subtle,
),
// scss-docs-end utils-bg-color
'gradient':
(
property: background-image,
class: bg,
values: (
gradient: var(--#{$prefix}gradient),
),
),
// scss-docs-start utils-interaction
'user-select':
(
property: user-select,
values: all auto none,
),
'pointer-events': (
property: pointer-events,
class: pe,
values: none auto,
),
// scss-docs-end utils-interaction
// scss-docs-start utils-border-radius
'rounded':
(
property: border-radius,
class: rounded,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill),
),
),
'rounded-top': (
property: border-top-left-radius border-top-right-radius,
class: rounded-top,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill),
),
),
'rounded-end': (
property: border-top-right-radius border-bottom-right-radius,
class: rounded-end,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill),
),
),
'rounded-bottom': (
property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill),
),
),
'rounded-start': (
property: border-bottom-left-radius border-top-left-radius,
class: rounded-start,
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill),
),
),
// scss-docs-end utils-border-radius
// scss-docs-start utils-visibility
'visibility':
(
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
),
),
// scss-docs-end utils-visibility
// scss-docs-start utils-zindex
'z-index':
(
property: z-index,
class: z,
values: $zindex-levels,
)
// scss-docs-end utils-zindex
),
$utilities
);
================================================
FILE: src/scss/bootstrap-rtl-fix/_variables-dark.scss
================================================
// Dark color mode variables
//
// Custom variables for the `[data-mdb-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
//
// Global colors
//
// scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-text-dark-variables
$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
$success-text-emphasis-dark: tint-color($success, 40%) !default;
$info-text-emphasis-dark: tint-color($info, 40%) !default;
$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
$light-text-emphasis-dark: $gray-100 !default;
$dark-text-emphasis-dark: $gray-300 !default;
// scss-docs-end theme-text-dark-variables
// scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
$success-bg-subtle-dark: shade-color($success, 80%) !default;
$info-bg-subtle-dark: shade-color($info, 80%) !default;
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
$light-bg-subtle-dark: $gray-800 !default;
$dark-bg-subtle-dark: mix($gray-800, $black) !default;
// scss-docs-end theme-bg-subtle-dark-variables
// scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark: shade-color($primary, 40%) !default;
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
$success-border-subtle-dark: shade-color($success, 40%) !default;
$info-border-subtle-dark: shade-color($info, 40%) !default;
$warning-border-subtle-dark: shade-color($warning, 40%) !default;
$danger-border-subtle-dark: shade-color($danger, 40%) !default;
$light-border-subtle-dark: $gray-700 !default;
$dark-border-subtle-dark: $gray-800 !default;
// scss-docs-end theme-border-subtle-dark-variables
$body-color-dark: $gray-300 !default;
$body-bg-dark: $gray-900 !default;
$body-secondary-color-dark: rgba($body-color-dark, 0.75) !default;
$body-secondary-bg-dark: $gray-800 !default;
$body-tertiary-color-dark: rgba($body-color-dark, 0.5) !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
$body-emphasis-color-dark: $white !default;
$border-color-dark: $gray-700 !default;
$border-color-translucent-dark: rgba($white, 0.15) !default;
$headings-color-dark: inherit !default;
$link-color-dark: tint-color($primary, 40%) !default;
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
$code-color-dark: tint-color($code-color, 40%) !default;
$mark-color-dark: $body-color-dark !default;
$mark-bg-dark: $yellow-800 !default;
//
// Forms
//
$form-select-indicator-color-dark: $body-color-dark !default;
$form-select-indicator-dark: url("data:image/svg+xml,
") !default;
$form-switch-color-dark: rgba($white, 0.25) !default;
$form-switch-bg-image-dark: url("data:image/svg+xml,
") !default;
// scss-docs-start form-validation-colors-dark
$form-valid-color-dark: $green-300 !default;
$form-valid-border-color-dark: $green-300 !default;
$form-invalid-color-dark: $red-300 !default;
$form-invalid-border-color-dark: $red-300 !default;
// scss-docs-end form-validation-colors-dark
//
// Accordion
//
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
$accordion-button-icon-dark: url("data:image/svg+xml,
") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,
") !default;
// scss-docs-end sass-dark-mode-vars
================================================
FILE: src/scss/bootstrap-rtl-fix/_variables.scss
================================================
// 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,
'black': $black,
'white': $white,
'gray': $gray-600,
'gray-dark': $gray-800,
) !default;
// scss-docs-end 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;
$blues: (
'blue-100': $blue-100,
'blue-200': $blue-200,
'blue-300': $blue-300,
'blue-400': $blue-400,
'blue-500': $blue-500,
'blue-600': $blue-600,
'blue-700': $blue-700,
'blue-800': $blue-800,
'blue-900': $blue-900,
) !default;
$indigos: (
'indigo-100': $indigo-100,
'indigo-200': $indigo-200,
'indigo-300': $indigo-300,
'indigo-400': $indigo-400,
'indigo-500': $indigo-500,
'indigo-600': $indigo-600,
'indigo-700': $indigo-700,
'indigo-800': $indigo-800,
'indigo-900': $indigo-900,
) !default;
$purples: (
'purple-100': $purple-100,
'purple-200': $purple-200,
'purple-300': $purple-300,
'purple-400': $purple-400,
'purple-500': $purple-500,
'purple-600': $purple-600,
'purple-700': $purple-700,
'purple-800': $purple-800,
'purple-900': $purple-900,
) !default;
$pinks: (
'pink-100': $pink-100,
'pink-200': $pink-200,
'pink-300': $pink-300,
'pink-400': $pink-400,
'pink-500': $pink-500,
'pink-600': $pink-600,
'pink-700': $pink-700,
'pink-800': $pink-800,
'pink-900': $pink-900,
) !default;
$reds: (
'red-100': $red-100,
'red-200': $red-200,
'red-300': $red-300,
'red-400': $red-400,
'red-500': $red-500,
'red-600': $red-600,
'red-700': $red-700,
'red-800': $red-800,
'red-900': $red-900,
) !default;
$oranges: (
'orange-100': $orange-100,
'orange-200': $orange-200,
'orange-300': $orange-300,
'orange-400': $orange-400,
'orange-500': $orange-500,
'orange-600': $orange-600,
'orange-700': $orange-700,
'orange-800': $orange-800,
'orange-900': $orange-900,
) !default;
$yellows: (
'yellow-100': $yellow-100,
'yellow-200': $yellow-200,
'yellow-300': $yellow-300,
'yellow-400': $yellow-400,
'yellow-500': $yellow-500,
'yellow-600': $yellow-600,
'yellow-700': $yellow-700,
'yellow-800': $yellow-800,
'yellow-900': $yellow-900,
) !default;
$greens: (
'green-100': $green-100,
'green-200': $green-200,
'green-300': $green-300,
'green-400': $green-400,
'green-500': $green-500,
'green-600': $green-600,
'green-700': $green-700,
'green-800': $green-800,
'green-900': $green-900,
) !default;
$teals: (
'teal-100': $teal-100,
'teal-200': $teal-200,
'teal-300': $teal-300,
'teal-400': $teal-400,
'teal-500': $teal-500,
'teal-600': $teal-600,
'teal-700': $teal-700,
'teal-800': $teal-800,
'teal-900': $teal-900,
) !default;
$cyans: (
'cyan-100': $cyan-100,
'cyan-200': $cyan-200,
'cyan-300': $cyan-300,
'cyan-400': $cyan-400,
'cyan-500': $cyan-500,
'cyan-600': $cyan-600,
'cyan-700': $cyan-700,
'cyan-800': $cyan-800,
'cyan-900': $cyan-900,
) !default;
// fusv-enable
// 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
// scss-docs-start theme-text-variables
$primary-text-emphasis: shade-color($primary, 60%) !default;
$secondary-text-emphasis: shade-color($secondary, 60%) !default;
$success-text-emphasis: shade-color($success, 60%) !default;
$info-text-emphasis: shade-color($info, 60%) !default;
$warning-text-emphasis: shade-color($warning, 60%) !default;
$danger-text-emphasis: shade-color($danger, 60%) !default;
$light-text-emphasis: $gray-700 !default;
$dark-text-emphasis: $gray-700 !default;
// scss-docs-end theme-text-variables
// scss-docs-start theme-bg-subtle-variables
$primary-bg-subtle: tint-color($primary, 80%) !default;
$secondary-bg-subtle: tint-color($secondary, 80%) !default;
$success-bg-subtle: tint-color($success, 80%) !default;
$info-bg-subtle: tint-color($info, 80%) !default;
$warning-bg-subtle: tint-color($warning, 80%) !default;
$danger-bg-subtle: tint-color($danger, 80%) !default;
$light-bg-subtle: mix($gray-100, $white) !default;
$dark-bg-subtle: $gray-400 !default;
// scss-docs-end theme-bg-subtle-variables
// scss-docs-start theme-border-subtle-variables
$primary-border-subtle: tint-color($primary, 60%) !default;
$secondary-border-subtle: tint-color($secondary, 60%) !default;
$success-border-subtle: tint-color($success, 60%) !default;
$info-border-subtle: tint-color($info, 60%) !default;
$warning-border-subtle: tint-color($warning, 60%) !default;
$danger-border-subtle: tint-color($danger, 60%) !default;
$light-border-subtle: $gray-200 !default;
$dark-border-subtle: $gray-500 !default;
// scss-docs-end theme-border-subtle-variables
// 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-container-classes: true !default;
$enable-cssgrid: false !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;
$enable-dark-mode: true !default;
$color-mode-type: data !default; // `data` or `media-query`
// Prefix for :root CSS variables
$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix: $variable-prefix !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.
// scss-docs-start spacer-variables-maps
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer * 0.25,
2: $spacer * 0.5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
) !default;
// scss-docs-end spacer-variables-maps
// Position
//
// Define the edge positioning anchors of the position utilities.
// scss-docs-start position-map
$position-values: (
0: 0,
50: 50%,
100: 100%,
) !default;
// scss-docs-end position-map
// Body
//
// Settings for the `` element.
$body-text-align: null !default;
$body-color: $gray-900 !default;
$body-bg: $white !default;
$body-secondary-color: rgba($body-color, 0.75) !default;
$body-secondary-bg: $gray-200 !default;
$body-tertiary-color: rgba($body-color, 0.5) !default;
$body-tertiary-bg: $gray-100 !default;
$body-emphasis-color: $black !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;
// Icon links
// scss-docs-start icon-link-variables
$icon-link-gap: 0.375rem !default;
$icon-link-underline-offset: 0.25em !default;
$icon-link-icon-size: 1em !default;
$icon-link-icon-transition: 0.2s ease-in-out transform !default;
$icon-link-icon-transform: translate3d(0.25em, 0, 0) !default;
// scss-docs-end icon-link-variables
// 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;
// Container padding
$container-padding-x: $grid-gutter-width !default;
// Components
//
// Define common padding and border radius sizes and more.
// scss-docs-start border-variables
$border-width: 1px !default;
$border-widths: (
1: 1px,
2: 2px,
3: 3px,
4: 4px,
5: 5px,
) !default;
$border-style: solid !default;
$border-color: $gray-300 !default;
$border-color-translucent: rgba($black, 0.175) !default;
// scss-docs-end border-variables
// scss-docs-start border-radius-variables
$border-radius: 0.375rem !default;
$border-radius-sm: 0.25rem !default;
$border-radius-lg: 0.5rem !default;
$border-radius-xl: 1rem !default;
$border-radius-xxl: 2rem !default;
$border-radius-pill: 50rem !default;
// scss-docs-end border-radius-variables
// fusv-disable
$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
// fusv-enable
// scss-docs-start box-shadow-variables
$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;
// scss-docs-end box-shadow-variables
$component-active-color: $white !default;
$component-active-bg: $primary !default;
// scss-docs-start focus-ring-variables
$focus-ring-width: 0.25rem !default;
$focus-ring-opacity: 0.25 !default;
$focus-ring-color: rgba($primary, $focus-ring-opacity) !default;
$focus-ring-blur: 0 !default;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
// scss-docs-end focus-ring-variables
// scss-docs-start caret-variables
$caret-width: 0.3em !default;
$caret-vertical-align: $caret-width * 0.85 !default;
$caret-spacing: $caret-width * 0.85 !default;
// scss-docs-end caret-variables
$transition-base: all 0.2s ease-in-out !default;
$transition-fade: opacity 0.15s linear !default;
// scss-docs-start collapse-transition
$transition-collapse: height 0.35s ease !default;
$transition-collapse-width: width 0.35s ease !default;
// scss-docs-end collapse-transition
// 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.
// scss-docs-start font-variables
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans',
'Liberation Sans', Arial, 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(--#{$prefix}font-sans-serif) !default;
$font-family-code: var(--#{$prefix}font-monospace) !default;
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects 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-medium: 500 !default;
$font-weight-semibold: 600 !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-end font-variables
// 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
// scss-docs-start headings-variables
$headings-margin-bottom: $spacer * 0.5 !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-color: inherit !default;
// scss-docs-end headings-variables
// 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-family: null !default;
$display-font-style: null !default;
$display-font-weight: 300 !default;
$display-line-height: $headings-line-height !default;
// scss-docs-end display-headings
// scss-docs-start type-variables
$lead-font-size: $font-size-base * 1.25 !default;
$lead-font-weight: 300 !default;
$small-font-size: 0.875em !default;
$sub-sup-font-size: 0.75em !default;
// fusv-disable
$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
// fusv-enable
$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;
// fusv-disable
$hr-bg-color: null !default; // Deprecated in v5.2.0
$hr-height: null !default; // Deprecated in v5.2.0
// fusv-enable
$hr-border-color: null !default; // Allows for inherited colors
$hr-border-width: var(--#{$prefix}border-width) !default;
$hr-opacity: 0.25 !default;
// scss-docs-start vr-variables
$vr-border-width: var(--#{$prefix}border-width) !default;
// scss-docs-end vr-variables
$legend-margin-bottom: 0.5rem !default;
$legend-font-size: 1.5rem !default;
$legend-font-weight: null !default;
$dt-font-weight: $font-weight-bold !default;
$list-inline-padding: 0.5rem !default;
$mark-padding: 0.1875em !default;
$mark-color: $body-color !default;
$mark-bg: $yellow-100 !default;
// scss-docs-end type-variables
// 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: var(--#{$prefix}emphasis-color) !default;
$table-bg: var(--#{$prefix}body-bg) !default;
$table-accent-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(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
$table-active-color: $table-color !default;
$table-active-bg-factor: 0.1 !default;
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
$table-hover-color: $table-color !default;
$table-hover-bg-factor: 0.075 !default;
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
$table-border-factor: 0.2 !default;
$table-border-width: var(--#{$prefix}border-width) !default;
$table-border-color: var(--#{$prefix}border-color) !default;
$table-striped-order: odd !default;
$table-striped-columns-order: even !default;
$table-group-separator-color: currentcolor !default;
$table-caption-color: var(--#{$prefix}secondary-color) !default;
$table-bg-scale: -80% !default;
// scss-docs-end table-variables
// scss-docs-start table-loop
$table-variants: (
'primary': shift-color($primary, $table-bg-scale),
'secondary': shift-color($secondary, $table-bg-scale),
'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-loop
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
// scss-docs-start input-btn-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: $focus-ring-width !default;
$input-btn-focus-color-opacity: $focus-ring-opacity !default;
$input-btn-focus-color: $focus-ring-color !default;
$input-btn-focus-blur: $focus-ring-blur !default;
$input-btn-focus-box-shadow: $focus-ring-box-shadow !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: var(--#{$prefix}border-width) !default;
// scss-docs-end input-btn-variables
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
// scss-docs-start btn-variables
$btn-color: var(--#{$prefix}body-color) !default;
$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: var(--#{$prefix}link-color) !default;
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$btn-link-disabled-color: $gray-600 !default;
$btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--#{$prefix}border-radius) !default;
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
$btn-border-radius-lg: var(--#{$prefix}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;
// scss-docs-end btn-variables
// Forms
// scss-docs-start form-text-variables
$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: var(--#{$prefix}secondary-color) !default;
// scss-docs-end form-text-variables
// scss-docs-start form-label-variables
$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;
// scss-docs-end form-label-variables
// scss-docs-start form-input-variables
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-font-family: $input-btn-font-family !default;
$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: var(--#{$prefix}body-bg) !default;
$input-disabled-color: null !default;
$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$input-disabled-border-color: null !default;
$input-color: var(--#{$prefix}body-color) !default;
$input-border-color: var(--#{$prefix}border-color) !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$input-border-radius: var(--#{$prefix}border-radius) !default;
$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
$input-border-radius-lg: var(--#{$prefix}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: var(--#{$prefix}secondary-color) !default;
$input-plaintext-color: var(--#{$prefix}body-color) !default;
$input-height-border: calc(
#{$input-border-width} * 2
) !default; // stylelint-disable-line function-disallowed-list
$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 * 0.5) !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-color-width: 3rem !default;
// scss-docs-end form-input-variables
// scss-docs-start form-check-variables
$form-check-input-width: 1em !default;
$form-check-min-height: $font-size-base * $line-height-base !default;
$form-check-padding-start: $form-check-input-width + 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: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !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: $focus-ring-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-check-inline-margin-end: 1rem !default;
// scss-docs-end form-check-variables
// scss-docs-start form-switch-variables
$form-switch-color: rgba($black, 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;
// scss-docs-end form-switch-variables
// scss-docs-start input-group-variables
$input-group-addon-padding-y: $input-padding-y !default;
$input-group-addon-padding-x: $input-padding-x !default;
$input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: $input-color !default;
$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
$input-group-addon-border-color: $input-border-color !default;
// scss-docs-end input-group-variables
// scss-docs-start form-select-variables
$form-select-padding-y: $input-padding-y !default;
$form-select-padding-x: $input-padding-x !default;
$form-select-font-family: $input-font-family !default;
$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-bg: $input-bg !default;
$form-select-disabled-color: null !default;
$form-select-disabled-bg: $input-disabled-bg !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: $input-border-radius !default;
$form-select-box-shadow: var(--#{$prefix}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-border-radius-sm: $input-border-radius-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-select-border-radius-lg: $input-border-radius-lg !default;
$form-select-transition: $input-transition !default;
// scss-docs-end form-select-variables
// scss-docs-start form-range-variables
$form-range-track-width: 100% !default;
$form-range-track-height: 0.5rem !default;
$form-range-track-cursor: pointer !default;
$form-range-track-bg: var(--#{$prefix}secondary-bg) !default;
$form-range-track-border-radius: 1rem !default;
$form-range-track-box-shadow: var(--#{$prefix}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: var(--#{$prefix}secondary-color) !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;
// scss-docs-end form-range-variables
// scss-docs-start form-file-variables
$form-file-button-color: $input-color !default;
$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end form-file-variables
// scss-docs-start form-floating-variables
$form-floating-height: add(3.5rem, $input-height-border) !default;
$form-floating-line-height: 1.25 !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-height: 1.5em !default;
$form-floating-label-opacity: 0.65 !default;
$form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !default;
$form-floating-label-disabled-color: $gray-600 !default;
$form-floating-transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !default;
// scss-docs-end form-floating-variables
// Form validation
// scss-docs-start form-feedback-variables
$form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $form-text-font-size !default;
$form-feedback-font-style: $form-text-font-style !default;
$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-end form-feedback-variables
// scss-docs-start form-validation-colors
$form-valid-color: $form-feedback-valid-color !default;
$form-valid-border-color: $form-feedback-valid-color !default;
$form-invalid-color: $form-feedback-invalid-color !default;
$form-invalid-border-color: $form-feedback-invalid-color !default;
// scss-docs-end form-validation-colors
// scss-docs-start form-validation-states
$form-validation-states: (
'valid': (
'color': var(--#{$prefix}form-valid-color),
'icon': $form-feedback-icon-valid,
'tooltip-color': #fff,
'tooltip-bg-color': var(--#{$prefix}success),
'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width
rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
'border-color': var(--#{$prefix}form-valid-border-color),
),
'invalid': (
'color': var(--#{$prefix}form-invalid-color),
'icon': $form-feedback-icon-invalid,
'tooltip-color': #fff,
'tooltip-bg-color': var(--#{$prefix}danger),
'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width
rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
'border-color': var(--#{$prefix}form-invalid-border-color),
),
) !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-offcanvas-backdrop: 1040 !default;
$zindex-offcanvas: 1045 !default;
$zindex-modal-backdrop: 1050 !default;
$zindex-modal: 1055 !default;
$zindex-popover: 1070 !default;
$zindex-tooltip: 1080 !default;
$zindex-toast: 1090 !default;
// scss-docs-end zindex-stack
// scss-docs-start zindex-levels-map
$zindex-levels: (
n1: -1,
0: 0,
1: 1,
2: 2,
3: 3,
) !default;
// scss-docs-end zindex-levels-map
// Navs
// scss-docs-start nav-variables
$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: var(--#{$prefix}link-color) !default;
$nav-link-hover-color: var(--#{$prefix}link-hover-color) !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: var(--#{$prefix}secondary-color) !default;
$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg)
$nav-tabs-border-color !default;
$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color)
$nav-tabs-link-active-bg !default;
$nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-underline-gap: 1rem !default;
$nav-underline-border-width: 0.125rem !default;
$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
// scss-docs-end nav-variables
// Navbar
// scss-docs-start navbar-variables
$navbar-padding-y: $spacer * 0.5 !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) * 0.5 !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-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.65) !default;
$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.8) !default;
$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.3) !default;
$navbar-light-icon-color: rgba($body-color, 0.75) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,
") !default;
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.15) !default;
$navbar-light-brand-color: $navbar-light-active-color !default;
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
// scss-docs-end navbar-variables
// scss-docs-start navbar-dark-variables
$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-icon-color: $navbar-dark-color !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,
") !default;
$navbar-dark-toggler-border-color: rgba($white, 0.1) !default;
$navbar-dark-brand-color: $navbar-dark-active-color !default;
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
// scss-docs-end navbar-dark-variables
// Dropdowns
//
// Dropdown menu container and contents.
// scss-docs-start dropdown-variables
$dropdown-min-width: 10rem !default;
$dropdown-padding-x: 0 !default;
$dropdown-padding-y: 0.5rem !default;
$dropdown-spacer: 0.125rem !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-color: var(--#{$prefix}body-color) !default;
$dropdown-bg: var(--#{$prefix}body-bg) !default;
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
$dropdown-border-width: var(--#{$prefix}border-width) !default;
$dropdown-inner-border-radius: calc(
#{$dropdown-border-radius} - #{$dropdown-border-width}
) !default; // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * 0.5 !default;
$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
$dropdown-link-color: var(--#{$prefix}body-color) !default;
$dropdown-link-hover-color: $dropdown-link-color !default;
$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
$dropdown-item-padding-y: $spacer * 0.25 !default;
$dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default;
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
$dropdown-header-padding-y: $dropdown-padding-y !default;
// fusv-disable
$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
// fusv-enable
// scss-docs-end dropdown-variables
// scss-docs-start dropdown-dark-variables
$dropdown-dark-color: $gray-300 !default;
$dropdown-dark-bg: $gray-800 !default;
$dropdown-dark-border-color: $dropdown-border-color !default;
$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;
// scss-docs-end dropdown-dark-variables
// Pagination
// scss-docs-start pagination-variables
$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-font-size: $font-size-base !default;
$pagination-color: var(--#{$prefix}link-color) !default;
$pagination-bg: var(--#{$prefix}body-bg) !default;
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
$pagination-border-width: var(--#{$prefix}border-width) !default;
$pagination-margin-start: calc(
#{$pagination-border-width} * -1
) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color: var(--#{$prefix}border-color) !default;
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $component-active-bg !default;
$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-disabled-border-color: var(--#{$prefix}border-color) !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: var(--#{$prefix}border-radius-sm) !default;
$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
// scss-docs-end pagination-variables
// Placeholders
// scss-docs-start placeholders
$placeholder-opacity-max: 0.5 !default;
$placeholder-opacity-min: 0.2 !default;
// scss-docs-end placeholders
// Cards
// scss-docs-start card-variables
$card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default;
$card-title-spacer-y: $spacer * 0.5 !default;
$card-title-color: null !default;
$card-subtitle-color: null !default;
$card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
$card-border-radius: var(--#{$prefix}border-radius) !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * 0.5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), 0.03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
$card-bg: var(--#{$prefix}body-bg) !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width * 0.5 !default;
// scss-docs-end card-variables
// Accordion
// scss-docs-start accordion-variables
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: var(--#{$prefix}body-color) !default;
$accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
$accordion-inner-border-radius: subtract(
$accordion-border-radius,
$accordion-border-width
) !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: var(--#{$prefix}body-color) !default;
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
$accordion-transition: $btn-transition, border-radius 0.15s ease !default;
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
// fusv-disable
$accordion-button-focus-border-color: $input-focus-border-color !default; // Deprecated in v5.3.3
// fusv-enable
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $body-color !default;
$accordion-icon-active-color: $primary-text-emphasis !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;
// scss-docs-end accordion-variables
// Tooltips
// scss-docs-start tooltip-variables
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: var(--#{$prefix}body-bg) !default;
$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
$tooltip-opacity: 0.9 !default;
$tooltip-padding-y: $spacer * 0.25 !default;
$tooltip-padding-x: $spacer * 0.5 !default;
$tooltip-margin: null !default; // TODO: remove this in v6
$tooltip-arrow-width: 0.8rem !default;
$tooltip-arrow-height: 0.4rem !default;
// fusv-disable
$tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable
// scss-docs-end tooltip-variables
// Form tooltips must come after regular tooltips
// scss-docs-start tooltip-feedback-variables
$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
$form-feedback-tooltip-font-size: $tooltip-font-size !default;
$form-feedback-tooltip-line-height: null !default;
$form-feedback-tooltip-opacity: $tooltip-opacity !default;
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
// scss-docs-end tooltip-feedback-variables
// Popovers
// scss-docs-start popover-variables
$popover-font-size: $font-size-sm !default;
$popover-bg: var(--#{$prefix}body-bg) !default;
$popover-max-width: 276px !default;
$popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
$popover-inner-border-radius: calc(
#{$popover-border-radius} - #{$popover-border-width}
) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
$popover-header-font-size: $font-size-base !default;
$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: 0.5rem !default;
$popover-header-padding-x: $spacer !default;
$popover-body-color: var(--#{$prefix}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;
// scss-docs-end popover-variables
// fusv-disable
// Deprecated in Bootstrap 5.2.0 for CSS variables
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default;
// fusv-enable
// Toasts
// scss-docs-start toast-variables
$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(var(--#{$prefix}body-bg-rgb), 0.85) !default;
$toast-border-width: var(--#{$prefix}border-width) !default;
$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
$toast-border-radius: var(--#{$prefix}border-radius) !default;
$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
$toast-spacing: $container-padding-x !default;
$toast-header-color: var(--#{$prefix}secondary-color) !default;
$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), 0.85) !default;
$toast-header-border-color: $toast-border-color !default;
// scss-docs-end toast-variables
// Badges
// scss-docs-start badge-variables
$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: var(--#{$prefix}border-radius) !default;
// scss-docs-end badge-variables
// Modals
// scss-docs-start modal-variables
$modal-inner-padding: $spacer !default;
$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: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract(
$modal-content-border-radius,
$modal-content-border-width
) !default;
$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
$modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: 0.5 !default;
$modal-header-border-color: var(--#{$prefix}border-color) !default;
$modal-header-border-width: $modal-content-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-footer-bg: null !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-footer-border-width: $modal-header-border-width !default;
$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;
// scss-docs-end modal-variables
// Alerts
//
// Define alert colors, border radius, and padding.
// scss-docs-start alert-variables
$alert-padding-y: $spacer !default;
$alert-padding-x: $spacer !default;
$alert-margin-bottom: 1rem !default;
$alert-border-radius: var(--#{$prefix}border-radius) !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: var(--#{$prefix}border-width) !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
// scss-docs-end alert-variables
// fusv-disable
$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
// fusv-enable
// Progress bars
// scss-docs-start progress-variables
$progress-height: 1rem !default;
$progress-font-size: $font-size-base * 0.75 !default;
$progress-bg: var(--#{$prefix}secondary-bg) !default;
$progress-border-radius: var(--#{$prefix}border-radius) !default;
$progress-box-shadow: var(--#{$prefix}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;
// scss-docs-end progress-variables
// List group
// scss-docs-start list-group-variables
$list-group-color: var(--#{$prefix}body-color) !default;
$list-group-bg: var(--#{$prefix}body-bg) !default;
$list-group-border-color: var(--#{$prefix}border-color) !default;
$list-group-border-width: var(--#{$prefix}border-width) !default;
$list-group-border-radius: var(--#{$prefix}border-radius) !default;
$list-group-item-padding-y: $spacer * 0.5 !default;
$list-group-item-padding-x: $spacer !default;
// fusv-disable
$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
// fusv-enable
$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !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: var(--#{$prefix}secondary-color) !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-action-color: var(--#{$prefix}secondary-color) !default;
$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
$list-group-action-active-color: var(--#{$prefix}body-color) !default;
$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end list-group-variables
// Image thumbnails
// scss-docs-start thumbnail-variables
$thumbnail-padding: 0.25rem !default;
$thumbnail-bg: var(--#{$prefix}body-bg) !default;
$thumbnail-border-width: var(--#{$prefix}border-width) !default;
$thumbnail-border-color: var(--#{$prefix}border-color) !default;
$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
// scss-docs-end thumbnail-variables
// Figures
// scss-docs-start figure-variables
$figure-caption-font-size: $small-font-size !default;
$figure-caption-color: var(--#{$prefix}secondary-color) !default;
// scss-docs-end figure-variables
// Breadcrumbs
// scss-docs-start breadcrumb-variables
$breadcrumb-font-size: null !default;
$breadcrumb-padding-y: 0 !default;
$breadcrumb-padding-x: 0 !default;
$breadcrumb-item-padding-x: 0.5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: null !default;
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-divider: quote('/') !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default;
// scss-docs-end breadcrumb-variables
// Carousel
// scss-docs-start carousel-variables
$carousel-control-color: $white !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: 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`)
// scss-docs-end carousel-variables
// scss-docs-start carousel-dark-variables
$carousel-dark-indicator-active-bg: $black !default;
$carousel-dark-caption-color: $black !default;
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
// scss-docs-end carousel-dark-variables
// Spinners
// scss-docs-start spinner-variables
$spinner-width: 2rem !default;
$spinner-height: $spinner-width !default;
$spinner-vertical-align: -0.125em !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;
// scss-docs-end spinner-variables
// Close
// scss-docs-start close-variables
$btn-close-width: 1em !default;
$btn-close-height: $btn-close-width !default;
$btn-close-padding-x: 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: $focus-ring-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;
// scss-docs-end close-variables
// Offcanvas
// scss-docs-start offcanvas-variables
$offcanvas-padding-y: $modal-inner-padding !default;
$offcanvas-padding-x: $modal-inner-padding !default;
$offcanvas-horizontal-width: 400px !default;
$offcanvas-vertical-height: 30vh !default;
$offcanvas-transition-duration: 0.3s !default;
$offcanvas-border-color: $modal-content-border-color !default;
$offcanvas-border-width: $modal-content-border-width !default;
$offcanvas-title-line-height: $modal-title-line-height !default;
$offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
$offcanvas-color: var(--#{$prefix}body-color) !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
// scss-docs-end offcanvas-variables
// Code
$code-font-size: $small-font-size !default;
$code-color: $pink !default;
$kbd-padding-y: 0.1875rem !default;
$kbd-padding-x: 0.375rem !default;
$kbd-font-size: $code-font-size !default;
$kbd-color: var(--#{$prefix}body-bg) !default;
$kbd-bg: var(--#{$prefix}body-color) !default;
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
$pre-color: null !default;
@import 'variables-dark'; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3
================================================
FILE: src/scss/bootstrap-rtl-fix/bootstrap-grid.scss
================================================
@import 'mixins/banner';
@include bsBanner(Grid);
$include-column-box-sizing: true !default;
@import 'functions';
@import 'variables';
@import 'variables-dark';
@import 'maps';
@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';
================================================
FILE: src/scss/bootstrap-rtl-fix/bootstrap-reboot.scss
================================================
@import 'mixins/banner';
@include bsBanner(Reboot);
@import 'functions';
@import 'variables';
@import 'variables-dark';
@import 'maps';
@import 'mixins';
@import 'root';
@import 'reboot';
================================================
FILE: src/scss/bootstrap-rtl-fix/bootstrap-utilities.scss
================================================
@import 'mixins/banner';
@include bsBanner(Utilities);
// Configuration
@import 'functions';
@import 'variables';
@import 'variables-dark';
@import 'maps';
@import 'mixins';
@import 'utilities';
// Layout & components
@import 'root';
// Helpers
@import 'helpers';
// Utilities
@import 'utilities/api';
================================================
FILE: src/scss/bootstrap-rtl-fix/bootstrap.scss
================================================
@import 'mixins/banner';
@include bsBanner('');
// scss-docs-start import-stack
// Configuration
@import 'functions';
@import 'variables';
@import 'variables-dark';
@import 'maps';
@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';
@import 'offcanvas';
@import 'placeholders';
// Helpers
@import 'helpers';
// Utilities
@import 'utilities/api';
// scss-docs-end import-stack
================================================
FILE: src/scss/bootstrap-rtl-fix/forms/_floating-labels.scss
================================================
.form-floating {
position: relative;
> .form-control,
> .form-control-plaintext,
> .form-select {
height: $form-floating-height;
min-height: $form-floating-height;
line-height: $form-floating-line-height;
}
> label {
position: absolute;
top: 0;
left: 0;
z-index: 2;
height: 100%; // allow textareas
padding: $form-floating-padding-y $form-floating-padding-x;
overflow: hidden;
text-align: start;
text-overflow: ellipsis;
white-space: nowrap;
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);
}
> .form-control,
> .form-control-plaintext {
padding: $form-floating-padding-y $form-floating-padding-x;
&::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-control-plaintext,
> .form-select {
~ label {
color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
transform: $form-floating-label-transform;
&::after {
position: absolute;
inset: $form-floating-padding-y ($form-floating-padding-x * 0.5);
z-index: -1;
height: $form-floating-label-height;
content: '';
background-color: $input-bg;
@include border-radius($input-border-radius);
}
}
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill {
~ label {
color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
transform: $form-floating-label-transform;
}
}
> .form-control-plaintext {
~ label {
border-width: $input-border-width 0; // Required to properly position label text - as explained above
}
}
> :disabled ~ label,
> .form-control:disabled ~ label {
// Required for `.form-control`s because of specificity
color: $form-floating-label-disabled-color;
&::after {
background-color: $input-disabled-bg;
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/forms/_form-check.scss
================================================
//
// 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-reverse {
padding-right: $form-check-padding-start;
padding-left: 0;
text-align: right;
.form-check-input {
float: right;
margin-right: $form-check-padding-start * -1;
margin-left: 0;
}
}
.form-check-input {
--#{$prefix}form-check-bg: #{$form-check-input-bg};
flex-shrink: 0;
width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) * 0.5; // line-height minus check height
vertical-align: top;
appearance: none;
background-color: var(--#{$prefix}form-check-bg);
background-image: var(--#{$prefix}form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: $form-check-input-border;
print-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 {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)},
var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
}
}
&[type='radio'] {
@if $enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)},
var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-check-bg-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 {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)},
var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-check-bg-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 {
cursor: default;
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 {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
width: $form-switch-width;
margin-left: $form-switch-padding-start * -1;
background-image: var(--#{$prefix}form-switch-bg);
background-position: left center;
@include border-radius($form-switch-border-radius, 0);
@include transition($form-switch-transition);
&:focus {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
}
&:checked {
background-position: $form-switch-checked-bg-position;
@if $enable-gradients {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)},
var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
}
}
}
&.form-check-reverse {
padding-right: $form-switch-padding-start;
padding-left: 0;
.form-check-input {
margin-right: $form-switch-padding-start * -1;
margin-left: 0;
}
}
}
.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;
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.form-switch .form-check-input:not(:checked):not(:focus) {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/forms/_form-control.scss
================================================
//
// 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;
appearance: none; // Fix appearance for date inputs in Safari
background-color: $input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
// 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;
}
}
&::-webkit-date-and-time-value {
// On Android Chrome, form-control's "width: 100%" makes the input width too small
// Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
//
// On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
// Tested under iOS 16.2 / Safari 16.2
min-width: 85px; // Seems to be a good minimum safe width
// 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
// Multiply line-height by 1em if it has no unit
height: if(unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
// Android Chrome type="date" is taller than the other inputs
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
// Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
margin: 0;
}
// Prevent excessive date input height in Webkit
// https://github.com/twbs/bootstrap/issues/34433
&::-webkit-datetime-edit {
display: block;
padding: 0;
}
// Placeholder
&::placeholder {
color: $input-placeholder-color;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
// Disabled 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 {
color: $input-disabled-color;
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
&::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);
}
&:hover:not(:disabled):not([readonly])::file-selector-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;
&:focus {
outline: 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);
&::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;
}
}
.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);
&::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;
}
}
// 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 {
width: $form-color-width;
height: $input-height;
padding: $input-padding-y;
&:not(:disabled):not([readonly]) {
cursor: pointer;
}
&::-moz-color-swatch {
border: 0 !important; // stylelint-disable-line declaration-no-important
@include border-radius($input-border-radius);
}
&::-webkit-color-swatch {
border: 0 !important; // stylelint-disable-line declaration-no-important
@include border-radius($input-border-radius);
}
&.form-control-sm {
height: $input-height-sm;
}
&.form-control-lg {
height: $input-height-lg;
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/forms/_form-range.scss
================================================
// 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
appearance: none;
background-color: transparent;
&: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) * 0.5; // Webkit specific
appearance: none;
@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);
&: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;
appearance: none;
@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);
&: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;
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/forms/_form-select.scss
================================================
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// https://primer.github.io/.
.form-select {
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
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;
appearance: none;
background-color: $form-select-bg;
background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
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);
@include transition($form-select-transition);
&: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);
@include border-radius($form-select-border-radius-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);
@include border-radius($form-select-border-radius-lg);
}
@if $enable-dark-mode {
@include color-mode(dark) {
.form-select {
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/forms/_form-text.scss
================================================
//
// 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;
}
================================================
FILE: src/scss/bootstrap-rtl-fix/forms/_input-group.scss
================================================
//
// Base styles
//
.input-group {
position: relative;
display: flex;
flex-wrap: wrap; // For form validation feedback
align-items: stretch;
width: 100%;
> .form-control,
> .form-select,
> .form-floating {
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,
> .form-floating:focus-within {
z-index: 5;
}
// 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: 5;
}
}
}
// 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):not(.form-floating),
> .dropdown-toggle:nth-last-child(n + 3),
> .form-floating:not(:last-child) > .form-control,
> .form-floating:not(:last-child) > .form-select {
@include border-end-radius(0);
}
}
&.has-validation {
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
> .dropdown-toggle:nth-last-child(n + 4),
> .form-floating:nth-last-child(n + 3) > .form-control,
> .form-floating:nth-last-child(n + 3) > .form-select {
@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: calc(
#{$input-border-width} * -1
); // stylelint-disable-line function-disallowed-list
@include border-start-radius(0);
}
> .form-floating:not(:first-child) > .form-control,
> .form-floating:not(:first-child) > .form-select {
@include border-start-radius(0);
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/forms/_labels.scss
================================================
//
// 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);
}
================================================
FILE: src/scss/bootstrap-rtl-fix/forms/_validation.scss
================================================
// 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
================================================
FILE: src/scss/bootstrap-rtl-fix/helpers/_clearfix.scss
================================================
.clearfix {
@include clearfix();
}
================================================
FILE: src/scss/bootstrap-rtl-fix/helpers/_color-bg.scss
================================================
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
.text-bg-#{$color} {
color: color-contrast($value) if($enable-important-utilities, !important, null);
background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1))
if($enable-important-utilities, !important, null);
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/helpers/_colored-links.scss
================================================
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
.link-#{$color} {
color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1))
if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(
var(--#{$prefix}#{$color}-rgb),
var(--#{$prefix}link-underline-opacity, 1)
)
if($enable-important-utilities, !important, null);
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
$hover-color: if(
color-contrast($value) == $color-contrast-light,
shade-color($value, $link-shade-percentage),
tint-color($value, $link-shade-percentage)
);
color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1))
if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(
to-rgb($hover-color),
var(--#{$prefix}link-underline-opacity, 1)
)
if($enable-important-utilities, !important, null);
}
}
}
}
// One-off special link helper as a bridge until v6
.link-body-emphasis {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1))
if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(
var(--#{$prefix}emphasis-color-rgb),
var(--#{$prefix}link-underline-opacity, 1)
)
if($enable-important-utilities, !important, null);
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 0.75))
if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(
var(--#{$prefix}emphasis-color-rgb),
var(--#{$prefix}link-underline-opacity, 0.75)
)
if($enable-important-utilities, !important, null);
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/helpers/_focus-ring.scss
================================================
.focus-ring:focus {
outline: 0;
// By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0)
var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width)
var(--#{$prefix}focus-ring-color);
}
================================================
FILE: src/scss/bootstrap-rtl-fix/helpers/_icon-link.scss
================================================
.icon-link {
display: inline-flex;
gap: $icon-link-gap;
align-items: center;
text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 0.5));
text-underline-offset: $icon-link-underline-offset;
backface-visibility: hidden;
> .bi {
flex-shrink: 0;
width: $icon-link-icon-size;
height: $icon-link-icon-size;
fill: currentcolor;
@include transition($icon-link-icon-transition);
}
}
.icon-link-hover {
&:hover,
&:focus-visible {
> .bi {
transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/helpers/_position.scss
================================================
// 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 and bottom
@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;
}
.sticky#{$infix}-bottom {
position: sticky;
bottom: 0;
z-index: $zindex-sticky;
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/helpers/_ratio.scss
================================================
// Credit: Nicolas Gallagher and SUIT CSS.
.ratio {
position: relative;
width: 100%;
&::before {
display: block;
padding-top: var(--#{$prefix}aspect-ratio);
content: '';
}
> * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
@each $key, $ratio in $aspect-ratios {
.ratio-#{$key} {
--#{$prefix}aspect-ratio: #{$ratio};
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/helpers/_stacks.scss
================================================
// scss-docs-start stacks
.hstack {
display: flex;
flex-direction: row;
align-items: center;
align-self: stretch;
}
.vstack {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-self: stretch;
}
// scss-docs-end stacks
================================================
FILE: src/scss/bootstrap-rtl-fix/helpers/_stretched-link.scss
================================================
//
// 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: '';
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/helpers/_text-truncation.scss
================================================
//
// Text truncation
//
.text-truncate {
@include text-truncate();
}
================================================
FILE: src/scss/bootstrap-rtl-fix/helpers/_visually-hidden.scss
================================================
//
// Visually hidden
//
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
@include visually-hidden();
}
================================================
FILE: src/scss/bootstrap-rtl-fix/helpers/_vr.scss
================================================
.vr {
display: inline-block;
align-self: stretch;
width: $vr-border-width;
min-height: 1em;
background-color: currentcolor;
opacity: $hr-opacity;
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_alert.scss
================================================
@include deprecate('`alert-variant()`', 'v5.3.0', 'v6.0.0');
// scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) {
--#{$prefix}alert-color: #{$color};
--#{$prefix}alert-bg: #{$background};
--#{$prefix}alert-border-color: #{$border};
--#{$prefix}alert-link-color: #{shade-color($color, 20%)};
@if $enable-gradients {
background-image: var(--#{$prefix}gradient);
}
.alert-link {
color: var(--#{$prefix}alert-link-color);
}
}
// scss-docs-end alert-variant-mixin
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_backdrop.scss
================================================
// Shared between modals and offcanvases
@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
position: fixed;
top: 0;
left: 0;
z-index: $zindex;
width: 100vw;
height: 100vh;
background-color: $backdrop-bg;
// Fade for backdrop
&.fade {
opacity: 0;
}
&.show {
opacity: $backdrop-opacity;
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_banner.scss
================================================
@mixin bsBanner($file) {
/*!
* Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_border-radius.scss
================================================
// 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;
}
// scss-docs-start border-radius-mixins
@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);
}
}
// scss-docs-end border-radius-mixins
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_box-shadow.scss
================================================
@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;
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_breakpoints.scss
================================================
// 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, xxl: 1400px)
//
// 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, xxl: 1400px))
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
// 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, xxl: 1400px))
// 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, xxl: 1400px))
// 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, xxl: 1400px))
// "" (Returns a blank string)
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// "-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, $breakpoints);
@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;
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_buttons.scss
================================================
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
// scss-docs-start btn-variant-mixin
@mixin button-variant(
$background,
$border,
$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)
) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-bg: #{$background};
--#{$prefix}btn-border-color: #{$border};
--#{$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-hover-bg: #{$hover-background};
--#{$prefix}btn-hover-border-color: #{$hover-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$disabled-color};
--#{$prefix}btn-disabled-bg: #{$disabled-background};
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
}
// scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin
@mixin button-outline-variant(
$color,
$color-hover: color-contrast($color),
$active-background: $color,
$active-border: $color,
$active-color: color-contrast($active-background)
) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-border-color: #{$color};
--#{$prefix}btn-hover-color: #{$color-hover};
--#{$prefix}btn-hover-bg: #{$active-background};
--#{$prefix}btn-hover-border-color: #{$active-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$color};
--#{$prefix}btn-disabled-bg: transparent;
--#{$prefix}btn-disabled-border-color: #{$color};
--#{$prefix}gradient: none;
}
// scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}btn-padding-y: #{$padding-y};
--#{$prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-border-radius: #{$border-radius};
}
// scss-docs-end btn-size-mixin
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_caret.scss
================================================
// scss-docs-start caret-mixins
@mixin caret-down($width: $caret-width) {
border-top: $width solid;
border-right: $width solid transparent;
border-bottom: 0;
border-left: $width solid transparent;
}
@mixin caret-up($width: $caret-width) {
border-top: 0;
border-right: $width solid transparent;
border-bottom: $width solid;
border-left: $width solid transparent;
}
@mixin caret-end($width: $caret-width) {
border-top: $width solid transparent;
border-right: 0;
border-bottom: $width solid transparent;
border-left: $width solid;
}
@mixin caret-start($width: $caret-width) {
border-top: $width solid transparent;
border-right: $width solid;
border-bottom: $width solid transparent;
}
@mixin caret(
$direction: down,
$width: $caret-width,
$spacing: $caret-spacing,
$vertical-align: $caret-vertical-align
) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $spacing;
vertical-align: $vertical-align;
content: '';
@if $direction == down {
@include caret-down($width);
} @else if $direction == up {
@include caret-up($width);
} @else if $direction == end {
@include caret-end($width);
}
}
@if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
margin-right: $spacing;
vertical-align: $vertical-align;
content: '';
@include caret-start($width);
}
}
&:empty::after {
margin-left: 0;
}
}
}
// scss-docs-end caret-mixins
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_clearfix.scss
================================================
// scss-docs-start clearfix
@mixin clearfix() {
&::after {
display: block;
clear: both;
content: '';
}
}
// scss-docs-end clearfix
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_color-mode.scss
================================================
// scss-docs-start color-mode-mixin
@mixin color-mode($mode: light, $root: false) {
@if $color-mode-type == 'media-query' {
@if $root == true {
@media (prefers-color-scheme: $mode) {
:root {
@content;
}
}
} @else {
@media (prefers-color-scheme: $mode) {
@content;
}
}
} @else {
[data-mdb-theme='#{$mode}'] {
@content;
}
}
}
// scss-docs-end color-mode-mixin
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_color-scheme.scss
================================================
// scss-docs-start mixin-color-scheme
@mixin color-scheme($name) {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
// scss-docs-end mixin-color-scheme
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_container.scss
================================================
// Container mixins
@mixin make-container($gutter: $container-padding-x) {
--#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0;
width: 100%;
padding-right: calc(
var(--#{$prefix}gutter-x) * 0.5
); // stylelint-disable-line function-disallowed-list
padding-left: calc(
var(--#{$prefix}gutter-x) * 0.5
); // stylelint-disable-line function-disallowed-list
margin-right: auto;
margin-left: auto;
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_deprecate.scss
================================================
// 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}.";
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_forms.scss
================================================
// This mixin uses an `if()` technique to be compatible with Dart Sass
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
// scss-docs-start form-validation-mixins
@mixin form-validation-state-selector($state) {
@if ($state == 'valid' or $state == 'invalid') {
.was-validated #{if(&, "&", "")}:#{$state},
#{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 $input-btn-focus-blur $input-focus-width
rgba($color, $input-btn-focus-color-opacity),
$border-color: $color
) {
.#{$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: $border-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: $border-color;
@if $enable-shadows {
@include box-shadow($input-box-shadow, $focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
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: $border-color;
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size='1'] {
--#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
padding-right: $form-select-feedback-icon-padding-end;
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: $border-color;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow;
}
}
}
}
.form-control-color {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
width: add($form-color-width, $input-height-inner);
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $border-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;
}
}
.input-group {
> .form-control:not(:focus),
> .form-select:not(:focus),
> .form-floating:not(:focus-within) {
@include form-validation-state-selector($state) {
@if $state == 'valid' {
z-index: 3;
} @else if $state == 'invalid' {
z-index: 4;
}
}
}
}
}
// scss-docs-end form-validation-mixins
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_gradients.scss
================================================
// Gradients
// scss-docs-start gradient-bg-mixin
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$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
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_grid.scss
================================================
// Grid system
//
// Generate semantic grid columns with these mixins.
@mixin make-row($gutter: $grid-gutter-width) {
--#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0;
display: flex;
flex-wrap: wrap;
// TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
margin-top: calc(
-1 * var(--#{$prefix}gutter-y)
); // stylelint-disable-line function-disallowed-list
margin-right: calc(
-0.5 * var(--#{$prefix}gutter-x)
); // stylelint-disable-line function-disallowed-list
margin-left: calc(
-0.5 * var(--#{$prefix}gutter-x)
); // stylelint-disable-line function-disallowed-list
}
@mixin make-col-ready() {
// 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(--#{$prefix}gutter-x) * 0.5
); // stylelint-disable-line function-disallowed-list
padding-left: calc(
var(--#{$prefix}gutter-x) * 0.5
); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$prefix}gutter-y);
}
@mixin make-col($size: false, $columns: $grid-columns) {
@if $size {
flex: 0 0 auto;
width: percentage(divide($size, $columns));
} @else {
flex: 1 1 0;
max-width: 100%;
}
}
@mixin make-col-auto() {
flex: 0 0 auto;
width: auto;
}
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: divide($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
// number of columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@mixin row-cols($count) {
> * {
flex: 0 0 auto;
width: percentage(divide(1, $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} {
--#{$prefix}gutter-x: #{$value};
}
.g#{$infix}-#{$key},
.gy#{$infix}-#{$key} {
--#{$prefix}gutter-y: #{$value};
}
}
}
}
}
@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
@if $columns > 0 {
@for $i from 1 through $columns {
.g-col#{$infix}-#{$i} {
grid-column: auto / span $i;
}
}
// Start with `1` because `0` is an invalid value.
// Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
@for $i from 1 through ($columns - 1) {
.g-start#{$infix}-#{$i} {
grid-column-start: $i;
}
}
}
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_image.scss
================================================
// 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;
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_list-group.scss
================================================
@include deprecate('`list-group-item-variant()`', 'v5.3.0', 'v6.0.0');
// List Groups
// scss-docs-start list-group-mixin
@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;
}
}
}
}
// scss-docs-end list-group-mixin
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_lists.scss
================================================
// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
@mixin list-unstyled {
padding-left: 0;
list-style: none;
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_pagination.scss
================================================
// Pagination
// scss-docs-start pagination-mixin
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}pagination-padding-x: #{$padding-x};
--#{$prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-border-radius: #{$border-radius};
}
// scss-docs-end pagination-mixin
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_reset-text.scss
================================================
@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;
white-space: normal;
word-spacing: normal;
line-break: auto;
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_resize.scss
================================================
// Resize anything
@mixin resizable($direction) {
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
resize: $direction; // Options: horizontal, vertical, both
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_table-variants.scss
================================================
// 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));
$table-border-color: mix($color, $background, percentage($table-border-factor));
--#{$prefix}table-color: #{$color};
--#{$prefix}table-bg: #{$background};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-striped-bg: #{$striped-bg};
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$prefix}table-active-bg: #{$active-bg};
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
--#{$prefix}table-hover-bg: #{$hover-bg};
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
color: var(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
}
}
// scss-docs-end table-variant
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_text-truncate.scss
================================================
// Text truncate
// Requires inline-block or block for proper styling
@mixin text-truncate() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_transition.scss
================================================
// 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;
}
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_utilities.scss
================================================
// 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);
// Use custom CSS variable name if present, otherwise default to `class`
$css-variable-name: if(
map-has-key($utility, css-variable-name),
map-get($utility, css-variable-name),
map-get($utility, 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 (e.g. 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-css-var: map-get($utility, css-var);
$is-local-vars: map-get($utility, local-vars);
$is-rtl: map-get($utility, rtl);
@if $value != null {
@if $is-rtl == false {
/*!rtl:begin:remove*/
}
@if $is-css-var {
.#{$property-class + $infix + $property-class-modifier} {
--#{$prefix}#{$css-variable-name}: #{$value};
}
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
--#{$prefix}#{$css-variable-name}: #{$value};
}
}
} @else {
.#{$property-class + $infix + $property-class-modifier} {
@each $property in $properties {
@if $is-local-vars {
@each $local-var, $variable in $is-local-vars {
--#{$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if($enable-important-utilities, !important, null);
}
}
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
@each $property in $properties {
@if $is-local-vars {
@each $local-var, $variable in $is-local-vars {
--#{$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if($enable-important-utilities, !important, null);
}
}
}
}
@if $is-rtl == false {
/*!rtl:end:remove*/
}
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/mixins/_visually-hidden.scss
================================================
// 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://kittygiraudel.com/2016/10/13/css-hide-and-seek/
@mixin visually-hidden() {
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;
// Fix for positioned table caption that could become anonymous cells
&:not(caption) {
position: absolute !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();
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/utilities/_api.scss
================================================
// 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');
}
}
}
================================================
FILE: src/scss/bootstrap-rtl-fix/vendor/_rfs.scss
================================================
// stylelint-disable scss/dimension-no-non-numeric-values
// SCSS RFS mixin
//
// Automated responsive values for font sizes, paddings, margins and much more
//
// Licensed under MIT (https://github.com/twbs/rfs/blob/main/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);
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error "Cannot divide by 0";
}
$remainder: $dividend;
$result: 0;
$factor: 10;
@while ($remainder > 0 and $precision >= 0) {
$quotient: 0;
@while ($remainder >= $divisor) {
$remainder: $remainder - $divisor;
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
$factor: $factor * 0.1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
$result: $result + 1;
}
}
$result: $result * $factor * $sign;
$dividend-unit: unit($dividend);
$divisor-unit: unit($divisor);
$unit-map: (
'px': 1px,
'rem': 1rem,
'em': 1em,
'%': 1%,
);
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
$result: $result * map-get($unit-map, $dividend-unit);
}
@return $result;
}
// Remove px-unit from $rfs-base-value for calculations
@if $rfs-base-value-unit == px {
$rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
} @else if $rfs-base-value-unit == rem {
$rfs-base-value: divide($rfs-base-value, divide($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: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
} @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == 'em' {
$rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
}
// Calculate the media query value
$rfs-mq-value: if(
$rfs-breakpoint-unit == px,
#{$rfs-breakpoint}px,
#{divide($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, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
} @else if $unit == rem {
// Convert to px if needed
$val: $val +
' ' +
if($rfs-unit == px, #{divide($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: divide($value, $value * 0 + if($unit == px, 1, divide(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, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
} @else {
// Calculate the minimum value
$value-min: $rfs-base-value + divide(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,
#{divide($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: #{divide($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);
$fluid-val: rfs-fluid-value($values);
// Do not print the media query if responsive & non-responsive values are the same
@if $val == $fluid-val {
#{$property}: $val;
} @else {
@include _rfs-rule() {
#{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);
// 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, $fluid-val, $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);
}
================================================
FILE: src/scss/custom/_styles.scss
================================================
// Your custom styles
================================================
FILE: src/scss/custom/_variables.scss
================================================
// Your custom variables
================================================
FILE: src/scss/free/_accordion.scss
================================================
// Accordion
.accordion-button {
&:not(.collapsed) {
&:focus {
box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
}
}
&:focus {
border-color: var(--#{$prefix}accordion-btn-focus-border-color);
outline: 0;
box-shadow: none;
}
}
.accordion-flush {
--#{$prefix}accordion-flush-btn-box-shadow: #{$accordion-flush-button-box-shadow};
--#{$prefix}accordion-flush-border-bottom: #{$accordion-flush-item-border-bottom};
.accordion-button:not(.collapsed) {
box-shadow: var(--#{$prefix}accordion-flush-btn-box-shadow);
}
.accordion-item {
border-bottom: var(--#{$prefix}accordion-flush-border-bottom);
}
}
.accordion-borderless {
--#{$prefix}accordion-borderless-btn-border-radius: #{$accordion-borderless-button-border-radius};
--#{$prefix}accordion-borderless-btn-bg: #{$accordion-borderless-button-bgc};
--#{$prefix}accordion-borderless-btn-color: #{$accordion-borderless-button-color};
.accordion-item {
border: 0;
.accordion-button {
border-radius: var(--#{$prefix}accordion-borderless-btn-border-radius);
&:not(.collapsed) {
background-color: var(--#{$prefix}accordion-borderless-btn-bg);
color: var(--#{$prefix}accordion-borderless-btn-color);
box-shadow: none;
}
}
}
}
================================================
FILE: src/scss/free/_alert.scss
================================================
// Alert
.alert {
border: 0;
}
.alert-absolute {
position: absolute;
}
.alert-fixed {
--#{$prefix}alert-fixed-z-index: #{$alert-zindex};
position: fixed;
z-index: var(--#{$prefix}alert-fixed-z-index);
}
.parent-alert-relative {
position: relative;
}
@each $color, $value in $theme-colors {
.alert-#{$color} {
background-color: var(--#{$prefix}#{$color}-bg-subtle);
color: var(--#{$prefix}#{$color}-text-emphasis);
i {
color: var(--#{$prefix}#{$color}-text-emphasis);
}
.alert-link {
color: var(--#{$prefix}#{$color}-text-emphasis);
&:hover {
color: rgba(var(--#{$prefix}#{$color}-text-emphasis), var(--#{$prefix}text-hover-opacity));
}
}
}
}
================================================
FILE: src/scss/free/_badge.scss
================================================
//
// Badge styles
//
// Additional badge options tailored to the MDB style
// A "dot" badge, which is useful, for example, for icons
.badge-dot {
--#{$prefix}badge-border-radius: #{$badge-dot-border-radius};
--#{$prefix}badge-height: #{$badge-dot-height};
--#{$prefix}badge-width: #{$badge-dot-width};
--#{$prefix}badge-margin-left: #{$badge-dot-margin-left};
position: absolute;
min-width: 0;
width: var(--#{$prefix}badge-width);
height: var(--#{$prefix}badge-height);
border-radius: var(--#{$prefix}badge-border-radius);
padding: 0;
margin-left: var(--#{$prefix}badge-margin-left);
&:empty {
display: inline-block;
}
}
// "Notification" badge that shows the number of notifications, e.g. the number of unread messages
.badge-notification {
--#{$prefix}badge-font-size: #{$badge-notification-font-size};
--#{$prefix}badge-padding-x: #{$badge-notification-padding-x};
--#{$prefix}badge-padding-y: #{$badge-notification-padding-y};
--#{$prefix}badge-margin-top: #{$badge-notification-margin-top};
--#{$prefix}badge-margin-left: #{$badge-notification-margin-left};
position: absolute;
font-size: var(--#{$prefix}badge-font-size);
padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
margin-top: var(--#{$prefix}badge-margin-top);
margin-left: var(--#{$prefix}badge-margin-left);
}
// Contextual colors options
@each $color, $value in $theme-colors {
.badge-#{$color} {
background-color: var(--#{$prefix}#{$color}-bg-subtle);
color: var(--#{$prefix}#{$color}-text-emphasis);
i {
color: var(--#{$prefix}#{$color}-text-emphasis);
}
}
}
================================================
FILE: src/scss/free/_breadcrumb.scss
================================================
//
// Breadcrumb styles
//
.navbar {
.breadcrumb {
// scss-docs-start breadcrumb-css-vars
--#{$prefix}breadcrumb-item-color: #{$breadcrumb-item-color};
--#{$prefix}breadcrumb-item-hover-color: #{$breadcrumb-item-hover-color};
--#{$prefix}breadcrumb-item-before-color: #{$breadcrumb-item-before-color};
--#{$prefix}breadcrumb-item-transition: #{$breadcrumb-item-transition};
// scss-docs-end breadcrumb-css-vars
background-color: transparent;
margin-bottom: 0;
.breadcrumb-item {
a {
color: var(--#{$prefix}breadcrumb-item-color);
transition: var(--#{$prefix}breadcrumb-item-transition);
&:hover,
&:focus {
color: var(--#{$prefix}breadcrumb-item-hover-color);
}
}
+ .breadcrumb-item {
&:before {
color: var(--#{$prefix}breadcrumb-item-before-color);
}
}
}
}
}
================================================
FILE: src/scss/free/_button-group.scss
================================================
//
// Button group styles
//
.btn-group,
.btn-group-vertical {
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow};
--#{$prefix}btn-focus-box-shadow: #{$btn-focus-box-shadow};
--#{$prefix}btn-active-box-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-group-transition: #{$btn-group-transition};
box-shadow: var(--#{$prefix}btn-box-shadow);
transition: var(--#{$prefix}btn-group-transition);
&:hover {
box-shadow: var(--#{$prefix}btn-hover-box-shadow);
}
&:focus,
&.focus {
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
}
&:active,
&.active {
box-shadow: var(--#{$prefix}btn-active-box-shadow);
&:focus {
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
box-shadow: var(--#{$prefix}btn-box-shadow);
border: 0;
}
> .btn {
box-shadow: none;
:not(.btn-check) + &:hover,
&:first-child:hover,
&:focus-visible,
&:hover {
box-shadow: none !important;
}
.btn-check:focus-visible + &,
.btn-check:focus + &,
&:focus {
box-shadow: none;
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.show {
box-shadow: none;
&:focus {
box-shadow: none;
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
box-shadow: none;
}
}
> .btn-group {
box-shadow: none;
}
> .btn-link,
> .btn-tertiary {
&:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
.btn-group,
.btn-group-lg > .btn,
.btn-group-sm > .btn {
--#{$prefix}btn-border-radius: #{$btn-border-radius};
border-radius: var(--#{$prefix}btn-border-radius);
}
================================================
FILE: src/scss/free/_buttons.scss
================================================
//
// Button base styles
//
.btn {
// scss-docs-start btn-css-vars
--#{$prefix}btn-padding-top: #{$btn-padding-top};
--#{$prefix}btn-padding-bottom: #{$btn-padding-bottom};
--#{$prefix}btn-border-width: 0;
--#{$prefix}btn-border-color: none;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow};
--#{$prefix}btn-focus-box-shadow: #{$btn-focus-box-shadow};
--#{$prefix}btn-active-box-shadow: #{$btn-active-box-shadow};
// scss-docs-end btn-css-vars
padding-top: var(--#{$prefix}btn-padding-top);
padding-bottom: var(--#{$prefix}btn-padding-bottom);
text-transform: uppercase;
vertical-align: bottom;
border: 0;
@include border-radius(var(--#{$prefix}btn-border-radius));
box-shadow: var(--#{$prefix}btn-box-shadow);
:not(.btn-check) + &:hover,
&:first-child:hover,
&:focus-visible,
&:hover {
box-shadow: var(--#{$prefix}btn-hover-box-shadow);
}
.btn-check:focus-visible + &,
.btn-check:focus + &,
&:focus {
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.show {
box-shadow: var(--#{$prefix}btn-active-box-shadow);
&:focus {
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
box-shadow: var(--#{$prefix}btn-box-shadow);
}
}
//
// Outline styles
//
[class*='btn-outline-'] {
// scss-docs-start btn-outline-css-vars
--#{$prefix}btn-padding-top: #{$btn-outline-padding-top};
--#{$prefix}btn-padding-bottom: #{$btn-outline-padding-bottom};
--#{$prefix}btn-padding-x: #{$btn-outline-padding-x};
--#{$prefix}btn-border-width: #{$btn-outline-border-width};
--#{$prefix}btn-line-height: #{$btn-line-height};
// scss-docs-end btn-outline-css-vars
padding: var(--#{$prefix}btn-padding-top) var(--#{$prefix}btn-padding-x)
var(--#{$prefix}btn-padding-bottom);
border-width: var(--#{$prefix}btn-border-width);
border-style: solid;
box-shadow: none;
:not(.btn-check) + &:hover,
&:first-child:hover,
&:focus-visible,
&:hover {
box-shadow: none;
}
.btn-check:focus-visible + &,
.btn-check:focus + &,
&:focus {
box-shadow: none;
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.show {
box-shadow: none;
&:focus {
box-shadow: none;
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
box-shadow: none;
}
&.btn-lg {
@include button-outline-size(
$btn-outline-padding-top-lg,
$btn-outline-padding-bottom-lg,
$btn-outline-padding-x-lg,
$btn-outline-font-size-lg,
$btn-outline-line-height-lg
);
}
&.btn-sm {
@include button-outline-size(
$btn-outline-padding-top-sm,
$btn-outline-padding-bottom-sm,
$btn-outline-padding-x-sm,
$btn-outline-font-size-sm,
$btn-outline-line-height-sm
);
}
}
//
// Alternate buttons
//
// scss-docs-start btn-secondary
.btn-secondary {
box-shadow: none;
:not(.btn-check) + &:hover,
&:first-child:hover,
&:focus-visible,
&:hover {
box-shadow: none !important;
}
.btn-check:focus-visible + &,
.btn-check:focus + &,
&:focus {
box-shadow: none;
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.show {
box-shadow: none;
&:focus {
box-shadow: none;
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
box-shadow: none;
}
}
// scss-docs-end btn-secondary
// scss-docs-start btn-variant-loop
@each $color, $value in $theme-colors {
.btn-#{$color} {
@if $color == 'secondary' {
@include button-variant(
tint-color($primary, $btn-secondary-bg-tint-amount),
$value,
$color: shade-color($primary, $btn-secondary-color-shade-amount),
$hover-background:
shade-color(
tint-color($primary, $btn-secondary-bg-tint-amount),
$btn-hover-bg-shade-amount
),
$focus-background:
shade-color(
tint-color($primary, $btn-secondary-bg-tint-amount),
$btn-hover-bg-shade-amount
),
$active-background:
shade-color(
tint-color($primary, $btn-secondary-bg-tint-amount),
$btn-hover-bg-shade-amount
)
);
} @else if $color == 'light' {
@include button-variant(
$light-bg-subtle,
$light-border-subtle,
$color: $light-text-emphasis,
$hover-background: shade-color($light-bg-subtle, $btn-hover-bg-shade-amount),
$hover-border: shade-color($light-border-subtle, $btn-hover-border-shade-amount),
$active-background: shade-color($light-bg-subtle, $btn-active-bg-shade-amount),
$active-border: shade-color($light-border-subtle, $btn-active-border-shade-amount)
);
} @else if $color == 'dark' {
@include button-variant(
$dark-bg-subtle,
$dark-border-subtle,
$color: $dark-text-emphasis,
$hover-background: tint-color($dark-bg-subtle, $btn-hover-bg-tint-amount),
$hover-border: tint-color($dark-border-subtle, $btn-hover-border-tint-amount),
$active-background: tint-color($dark-bg-subtle, $btn-active-bg-tint-amount),
$active-border: tint-color($dark-border-subtle, $btn-active-border-tint-amount)
);
} @else {
@include button-variant($value, $value);
}
@if $color == 'secondary' {
--#{$prefix}btn-box-shadow-state: transparent;
} @else {
--#{$prefix}btn-box-shadow-state: #{$btn-contextual-box-shadow-state-first-part
rgba(shade-color($value, $btn-hover-bg-shade-amount), 0.3),
$btn-contextual-box-shadow-state-second-part
rgba(shade-color($value, $btn-hover-bg-shade-amount), 0.2)};
}
:not(.btn-check) + &:hover,
&:first-child:hover,
&:focus-visible,
&:hover {
box-shadow: var(--#{$prefix}btn-box-shadow-state);
}
.btn-check:focus-visible + &,
.btn-check:focus + &,
&:focus {
box-shadow: var(--#{$prefix}btn-box-shadow-state);
background-color: var(--#{$prefix}btn-focus-bg);
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.show {
box-shadow: var(--#{$prefix}btn-box-shadow-state);
&:focus {
box-shadow: var(--#{$prefix}btn-box-shadow-state);
}
&:hover {
background-color: var(--#{$prefix}btn-active-bg);
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
box-shadow: var(--#{$prefix}btn-box-shadow);
}
}
[data-mdb-theme='dark'] .btn-#{$color} {
@if $color != 'secondary' {
box-shadow: 0 4px 9px -4px rgba($black, 0.35);
&:hover,
&:active,
&:focus {
box-shadow: 0 4px 18px -2px rgba($black, 0.7);
}
}
}
}
// scss-docs-end btn-variant-loop
// scss-docs-start btn-outline-variant-loop
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@if $color == 'secondary' {
@include button-outline-variant(
shade-color($primary, $btn-secondary-color-shade-amount),
shade-color($primary, $btn-secondary-color-shade-amount),
shade-color($primary, $btn-secondary-color-shade-amount),
shade-color($primary, $btn-secondary-color-shade-amount)
);
--#{$prefix}btn-outline-border-color: #{tint-color($primary, $btn-secondary-bg-tint-amount)};
--#{$prefix}btn-outline-focus-border-color: #{shade-color(
tint-color($primary, $btn-secondary-bg-tint-amount),
$btn-focus-bg-shade-amount
)};
--#{$prefix}btn-outline-hover-border-color: #{shade-color(
tint-color($primary, $btn-secondary-bg-tint-amount),
$btn-hover-bg-shade-amount
)};
border-color: var(--#{$prefix}btn-outline-border-color);
} @else {
@include button-outline-variant(
$value,
shade-color($value, $btn-hover-bg-shade-amount),
shade-color($value, $btn-focus-bg-shade-amount),
shade-color($value, $btn-active-bg-shade-amount)
);
--#{$prefix}btn-outline-border-color: #{$value};
--#{$prefix}btn-outline-focus-border-color: #{shade-color(
$value,
$btn-outline-focus-bg-shade-amount
)};
--#{$prefix}btn-outline-hover-border-color: #{shade-color(
$value,
$btn-outline-hover-bg-shade-amount
)};
border-color: var(--#{$prefix}btn-outline-border-color);
}
:not(.btn-check) + &:hover,
&:first-child:hover,
&:focus-visible,
&:hover {
border-color: var(--#{$prefix}btn-outline-hover-border-color);
}
.btn-check:focus-visible + &,
.btn-check:focus + &,
&:focus {
border-color: var(--#{$prefix}btn-outline-focus-border-color);
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.show {
border-color: var(--#{$prefix}btn-outline-active-border-color);
&:focus {
border-color: var(--#{$prefix}btn-outline-focus-border-color);
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
border-color: var(--#{$prefix}btn-outline-border-color);
}
}
[data-mdb-theme='dark'] .btn-outline-#{$color} {
@if $color == 'secondary' {
@include button-outline-variant(
tint-color($primary, 70%),
tint-color($primary, 60%),
tint-color($primary, 60%),
tint-color($primary, 60%),
shade-color($primary, 60%),
shade-color($primary, 60%),
shade-color($primary, 60%)
);
--#{$prefix}btn-outline-border-color: #{tint-color($primary, 50%)};
--#{$prefix}btn-outline-focus-border-color: #{shade-color(
tint-color($primary, 50%),
$btn-focus-bg-shade-amount
)};
--#{$prefix}btn-outline-hover-border-color: #{shade-color(
tint-color($primary, 50%),
$btn-hover-bg-shade-amount
)};
border-color: var(--#{$prefix}btn-outline-border-color);
} @else {
@include button-outline-variant(
tint-color($value, 20%),
shade-color($value, $btn-hover-bg-shade-amount),
shade-color($value, $btn-focus-bg-shade-amount),
shade-color($value, $btn-active-bg-shade-amount),
shade-color($value, 70%),
shade-color($value, 70%),
shade-color($value, 70%)
);
}
}
}
// scss-docs-end btn-outline-variant-loop
//
// Link buttons
//
// Make a button look and behave like a link
.btn-link {
--#{$prefix}btn-font-weight: #{$font-weight-medium};
--#{$prefix}btn-color: #{$btn-link-color};
--#{$prefix}btn-hover-color: #{$btn-link-hover-color};
--#{$prefix}btn-hover-bg: #{$btn-link-hover-bg};
--#{$prefix}btn-focus-color: #{$btn-link-focus-color};
--#{$prefix}btn-active-color: #{$btn-link-active-color};
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
--#{$prefix}btn-box-shadow: none;
text-decoration: $link-decoration;
box-shadow: var(--#{$prefix}btn-box-shadow);
:not(.btn-check) + &:hover,
&:first-child:hover,
&:focus-visible,
&:hover {
text-decoration: $link-hover-decoration;
box-shadow: var(--#{$prefix}btn-box-shadow);
}
.btn-check:focus-visible + &,
.btn-check:focus + &,
&:focus {
color: var(--#{$prefix}btn-focus-color);
box-shadow: var(--#{$prefix}btn-box-shadow);
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.show {
color: var(--#{$prefix}btn-active-color);
box-shadow: var(--#{$prefix}btn-box-shadow);
&:focus {
color: var(--#{$prefix}btn-focus-color);
box-shadow: var(--#{$prefix}btn-box-shadow);
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
box-shadow: var(--#{$prefix}btn-box-shadow);
}
}
.btn-tertiary {
--#{$prefix}btn-font-weight: #{$font-weight-medium};
--#{$prefix}btn-color: #{$btn-link-color};
--#{$prefix}btn-hover-color: #{$btn-link-hover-color};
--#{$prefix}btn-hover-bg: transparent;
--#{$prefix}btn-focus-color: #{$btn-link-focus-color};
--#{$prefix}btn-active-color: #{$btn-link-active-color};
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
--#{$prefix}btn-box-shadow: none;
padding-left: 0px;
padding-right: 0px;
text-decoration: $link-decoration;
box-shadow: var(--#{$prefix}btn-box-shadow);
:not(.btn-check) + &:hover,
&:first-child:hover,
&:focus-visible,
&:hover {
text-decoration: $link-hover-decoration;
box-shadow: var(--#{$prefix}btn-box-shadow);
}
.btn-check:focus-visible + &,
.btn-check:focus + &,
&:focus {
color: var(--#{$prefix}btn-focus-color);
box-shadow: var(--#{$prefix}btn-box-shadow);
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.show {
color: var(--#{$prefix}btn-active-color);
box-shadow: var(--#{$prefix}btn-box-shadow);
&:focus {
color: var(--#{$prefix}btn-focus-color);
box-shadow: var(--#{$prefix}btn-box-shadow);
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
box-shadow: var(--#{$prefix}btn-box-shadow);
}
}
[data-mdb-theme='dark'] .btn-secondary {
--#{$prefix}btn-bg: #{tint-color($primary, 60%)};
--#{$prefix}btn-hover-bg: #{tint-color($primary, 50%)};
--#{$prefix}btn-focus-bg: #{tint-color($primary, 50%)};
--#{$prefix}btn-active-bg: #{tint-color($primary, 50%)};
}
[data-mdb-theme='dark'] .btn-link {
--#{$prefix}btn-color: #{$secondary};
--#{$prefix}btn-hover-color: #{tint-color($secondary, 30%)};
--#{$prefix}btn-hover-bg: #{shade-color($secondary, 60%)};
--#{$prefix}btn-focus-color: #{tint-color($secondary, 30%)};
--#{$prefix}btn-active-color: #{tint-color($secondary, 30%)};
}
[data-mdb-theme='dark'] .btn-tertiary {
--#{$prefix}btn-color: #{$secondary};
--#{$prefix}btn-hover-color: #{tint-color($secondary, 30%)};
--#{$prefix}btn-focus-color: #{tint-color($secondary, 30%)};
--#{$prefix}btn-active-color: #{tint-color($secondary, 30%)};
}
//
// Button Sizes
//
.btn-lg {
@include button-size(
$btn-padding-top-lg,
$btn-padding-bottom-lg,
$btn-padding-x-lg,
$btn-font-size-lg,
$btn-line-height-lg
);
}
.btn-sm {
@include button-size(
$btn-padding-top-sm,
$btn-padding-bottom-sm,
$btn-padding-x-sm,
$btn-font-size-sm,
$btn-line-height-sm
);
}
//
// Rounded option
//
.btn-rounded {
--#{$prefix}btn-border-radius: #{$btn-rounded-border-radius};
border-radius: var(--#{$prefix}btn-border-radius);
}
//
// Floating option
//
.btn-floating,
[class*='btn-outline-'].btn-floating {
--#{$prefix}btn-border-radius: #{$btn-floating-border-radius};
border-radius: var(--#{$prefix}btn-border-radius);
padding: 0;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-floating {
--#{$prefix}btn-width: #{$btn-floating-width};
--#{$prefix}btn-height: #{$btn-floating-height};
--#{$prefix}btn-icon-width: #{$btn-floating-icon-width};
--#{$prefix}btn-icon-line-height: #{$btn-floating-icon-line-height};
--#{$prefix}btn-width-lg: #{$btn-floating-width-lg};
--#{$prefix}btn-height-lg: #{$btn-floating-height-lg};
--#{$prefix}btn-icon-width-lg: #{$btn-floating-icon-width-lg};
--#{$prefix}btn-icon-line-height-lg: #{$btn-floating-icon-line-height-lg};
--#{$prefix}btn-width-sm: #{$btn-floating-width-sm};
--#{$prefix}btn-height-sm: #{$btn-floating-height-sm};
--#{$prefix}btn-icon-width-sm: #{$btn-floating-icon-width-sm};
--#{$prefix}btn-icon-line-height-sm: #{$btn-floating-icon-line-height-sm};
width: var(--#{$prefix}btn-width);
height: var(--#{$prefix}btn-height);
.fas,
.far,
.fab {
width: var(--#{$prefix}btn-icon-width);
line-height: var(--#{$prefix}btn-icon-line-height);
}
&.btn-lg {
width: var(--#{$prefix}btn-width-lg);
height: var(--#{$prefix}btn-height-lg);
.fas,
.far,
.fab {
width: var(--#{$prefix}btn-icon-width-lg);
line-height: var(--#{$prefix}btn-icon-line-height-lg);
}
}
&.btn-sm {
width: var(--#{$prefix}btn-width-sm);
height: var(--#{$prefix}btn-height-sm);
.fas,
.far,
.fab {
width: var(--#{$prefix}btn-icon-width-sm);
line-height: var(--#{$prefix}btn-icon-line-height-sm);
}
}
}
[class*='btn-outline-'].btn-floating {
--#{$prefix}btn-icon-width: #{$btn-outline-floating-icon-width};
--#{$prefix}btn-icon-width-lg: #{$btn-outline-floating-icon-width-lg};
--#{$prefix}btn-icon-width-sm: #{$btn-outline-floating-icon-width-sm};
--#{$prefix}btn-icon-line-height: #{$btn-outline-floating-icon-line-height};
--#{$prefix}btn-icon-line-height-lg: #{$btn-outline-floating-icon-line-height-lg};
--#{$prefix}btn-icon-line-height-sm: #{$btn-outline-floating-icon-line-height-sm};
.fas,
.far,
.fab {
width: var(--#{$prefix}btn-icon-width);
line-height: var(--#{$prefix}btn-icon-line-height);
}
&.btn-lg {
.fas,
.far,
.fab {
width: var(--#{$prefix}btn-icon-width-lg);
line-height: var(--#{$prefix}btn-icon-line-height-lg);
}
}
&.btn-sm {
.fas,
.far,
.fab {
width: var(--#{$prefix}btn-icon-width-sm);
line-height: var(--#{$prefix}btn-icon-line-height-sm);
}
}
}
//
// Fixed option
//
.fixed-action-btn {
--#{$prefix}btn-right: #{$fixed-action-btn-right};
--#{$prefix}btn-bottom: #{$fixed-action-btn-bottom};
--#{$prefix}btn-zindex: #{$fixed-action-button-zindex};
--#{$prefix}btn-padding-top: #{$fixed-action-btn-padding-top};
--#{$prefix}btn-padding-bottom: #{$fixed-action-btn-padding-bottom};
--#{$prefix}btn-padding-x: #{$fixed-action-btn-padding-x};
--#{$prefix}btn-margin-bottom: #{$fixed-action-btn-li-margin-bottom};
position: fixed;
right: var(--#{$prefix}btn-right);
bottom: var(--#{$prefix}btn-bottom);
z-index: var(--#{$prefix}btn-zindex);
display: flex;
flex-flow: column-reverse nowrap;
align-items: center;
padding: var(--#{$prefix}btn-padding-top) var(--#{$prefix}btn-padding-x)
var(--#{$prefix}btn-padding-bottom);
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: var(--#{$prefix}btn-margin-bottom);
margin-left: auto;
&:first-of-type {
margin-top: calc(var(--#{$prefix}btn-margin-bottom) * 0.5);
}
}
a {
&.btn {
opacity: 0;
transition: opacity 0.4s ease-in;
&.shown {
opacity: 1;
}
}
}
}
&.active ul {
opacity: 1;
}
}
//
// Button block
//
.btn-block {
--#{$prefix}btn-margin-top: #{$btn-block-margin-top};
display: block;
width: 100%;
// Vertically space out multiple block buttons
+ .btn-block {
margin-top: var(--#{$prefix}btn-margin-top);
}
}
================================================
FILE: src/scss/free/_card.scss
================================================
//
// Card styles
//
.card {
border: 0;
.bg-image {
border-top-left-radius: var(--#{$prefix}card-border-radius);
border-top-right-radius: var(--#{$prefix}card-border-radius);
}
&[class*='bg-'] {
.card-header {
--#{$prefix}card-header-border-bottom-color: #{$card-border-color};
border-bottom-color: var(--#{$prefix}card-header-border-bottom-color);
}
.card-footer {
--#{$prefix}card-footer-border-top-color: #{$card-border-color};
border-top-color: var(--#{$prefix}card-footer-border-top-color);
}
}
}
.card-header {
--#{$prefix}card-header-border-width: #{$card-header-border-width};
--#{$prefix}card-header-border-color: #{$card-header-border-color};
border-bottom: var(--#{$prefix}card-header-border-width) solid
var(--#{$prefix}card-header-border-color);
}
.card-body {
&[class*='bg-'] {
border-bottom-left-radius: var(--#{$prefix}card-border-radius);
border-bottom-right-radius: var(--#{$prefix}card-border-radius);
}
}
.card-footer {
--#{$prefix}card-footer-border-color: #{$card-footer-border-color};
--#{$prefix}card-footer-border-width: #{$card-footer-border-width};
border-top: var(--#{$prefix}card-footer-border-width) solid
var(--#{$prefix}card-footer-border-color);
}
.card-img-left {
border-top-left-radius: var(--#{$prefix}card-border-radius);
border-bottom-left-radius: var(--#{$prefix}card-border-radius);
}
================================================
FILE: src/scss/free/_carousel.scss
================================================
//
// Carousel styles
//
.carousel-control-prev-icon {
&::after {
content: '\f053';
--#{$prefix}carousel-control-icon-font-size: #{$carousel-control-icon-font-size};
--#{$prefix}carousel-control-icon-font-weight: #{$font-weight-bold};
font-weight: var(--#{$prefix}carousel-control-icon-font-weight);
font-size: var(--#{$prefix}carousel-control-icon-font-size);
font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
}
}
.carousel-control-next-icon {
&::after {
content: '\f054';
--#{$prefix}carousel-control-icon-font-size: #{$carousel-control-icon-font-size};
--#{$prefix}carousel-control-icon-font-weight: #{$font-weight-bold};
font-weight: var(--#{$prefix}carousel-control-icon-font-weight);
font-size: var(--#{$prefix}carousel-control-icon-font-size);
font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
}
}
.carousel-indicators {
[data-mdb-target] {
@extend [data-bs-target] !optional;
}
}
================================================
FILE: src/scss/free/_close.scss
================================================
// 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;
}
}
================================================
FILE: src/scss/free/_colors.scss
================================================
//
// Color styles
//
@each $color, $value in $theme-colors {
.bg-#{$color} {
--#{$prefix}-bg-opacity: 1;
background-color: rgba($value, var(--#{$prefix}-bg-opacity));
}
}
================================================
FILE: src/scss/free/_deprecated.scss
================================================
// To be removed
hr.divider-horizontal:not([size]) {
height: 2px;
}
.divider-horizontal {
opacity: 1;
background-color: #f5f5f5;
height: 2px;
}
.divider-vertical {
opacity: 1;
background-color: #f5f5f5;
display: inline-block;
width: 2px;
margin: 0 1rem;
}
hr.divider-horizontal-blurry {
background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 40%), transparent);
background-color: transparent;
}
hr.divider-vertical-blurry {
background-image: linear-gradient(180deg, transparent, hsl(0, 0%, 40%), transparent);
background-color: transparent;
width: 1px;
top: 0;
right: 0;
}
================================================
FILE: src/scss/free/_dropdown.scss
================================================
//
// Dropdown styles
//
.dropdown-menu {
--#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};
color: var(--#{$prefix}dropdown-color);
margin: 0;
padding-top: 0;
padding-bottom: 0;
border: 0;
box-shadow: var(--#{$prefix}dropdown-box-shadow);
font-size: var(--#{$prefix}dropdown-font-size);
top: 100%;
left: 0;
margin-top: var(--#{$prefix}dropdown-spacer);
> li {
border-radius: 0;
&:first-child {
border-top-left-radius: var(--#{$prefix}dropdown-item-border-radius);
border-top-right-radius: var(--#{$prefix}dropdown-item-border-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.dropdown-item {
border-top-left-radius: var(--#{$prefix}dropdown-item-border-radius);
border-top-right-radius: var(--#{$prefix}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: var(--#{$prefix}dropdown-item-border-radius);
border-bottom-right-radius: var(--#{$prefix}dropdown-item-border-radius);
.dropdown-item {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: var(--#{$prefix}dropdown-item-border-radius);
border-bottom-right-radius: var(--#{$prefix}dropdown-item-border-radius);
}
}
}
&.animation {
--#{$prefix}dropdown-menu-animated-animation-duration: #{$dropdown-menu-animated-animation-duration};
--#{$prefix}dropdown-menu-animated-animation-timing-function: #{$dropdown-menu-animated-animation-timing-function};
display: block;
/* Speed up animations */
animation-duration: var(--#{$prefix}dropdown-menu-animated-animation-duration);
animation-timing-function: var(--#{$prefix}dropdown-menu-animated-animation-timing-function);
}
}
.dropdown-item {
--#{$prefix}dropdown-state-color: #{$dropdown-state-color};
--#{$prefix}dropdown-state-background-color: #{$dropdown-state-background-color};
padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
color: var(--#{$prefix}dropdown-color);
border-radius: 0;
&:hover,
&:focus {
color: var(--#{$prefix}dropdown-state-color);
background-color: var(--#{$prefix}dropdown-state-background-color);
}
&.active,
&:active {
color: var(--#{$prefix}dropdown-state-color);
background-color: var(--#{$prefix}dropdown-state-background-color);
}
&:focus {
outline: none;
}
}
.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;
}
.dropdown-divider {
--#{$prefix}dropdown-divider-border-top-width: #{$dropdown-divider-border-top-width};
--#{$prefix}dropdown-divider-border-top-bg: #{$dropdown-divider-bg};
border-top: var(--#{$prefix}dropdown-divider-border-top-width) solid
var(--#{$prefix}dropdown-divider-border-top-bg);
opacity: 1;
}
.dropdown-menu {
INPUT:not(:-webkit-autofill),
SELECT:not(:-webkit-autofill),
TEXTAREA:not(:-webkit-autofill) {
animation-name: none !important;
}
}
================================================
FILE: src/scss/free/_flag.scss
================================================
/*******************************
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
*******************************/
================================================
FILE: src/scss/free/_functions.scss
================================================
// 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);
}
================================================
FILE: src/scss/free/_images.scss
================================================
//
// Image styles
//
.bg-fixed {
background-attachment: fixed;
}
.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 {
--#{$prefix}image-hover-transition: #{$image-hover-overlay-transition};
opacity: 0;
transition: var(--#{$prefix}image-hover-transition);
&:hover {
opacity: 1;
}
}
}
.hover-zoom {
--#{$prefix}image-hover-zoom-transition: #{$image-hover-zoom-transition};
--#{$prefix}image-hover-zoom-transform: #{$image-hover-zoom-transform};
img,
video {
transition: var(--#{$prefix}image-hover-zoom-transition);
}
&:hover {
img,
video {
transform: var(--#{$prefix}image-hover-zoom-transform);
}
}
}
.hover-shadow,
.card.hover-shadow,
.hover-shadow-soft,
.card.hover-shadow-soft {
--#{$prefix}image-hover-shadow-transition: #{$image-hover-shadow-transition};
transition: var(--#{$prefix}image-hover-shadow-transition);
&:hover {
transition: var(--#{$prefix}image-hover-shadow-transition);
}
}
.hover-shadow,
.card.hover-shadow {
--#{$prefix}image-hover-shadow-box-shadow: #{$image-hover-shadow-box-shadow};
box-shadow: none;
&:hover {
box-shadow: var(--#{$prefix}image-hover-shadow-box-shadow);
}
}
.hover-shadow-soft,
.card.hover-shadow-soft {
--#{$prefix}image-hover-shadow-box-shadow-soft: #{$image-hover-shadow-box-shadow-soft};
box-shadow: none;
&:hover {
box-shadow: var(--#{$prefix}image-hover-shadow-box-shadow-soft);
}
}
================================================
FILE: src/scss/free/_list-group.scss
================================================
//
// List group styles
//
.list-group {
--#{$prefix}list-group-item-transition-time: #{$list-group-item-transition-time};
}
.list-group-item {
--#{$prefix}list-group-item-active-margin-top: #{$list-group-active-margin-top};
& + .list-group-item {
&.active {
margin-top: var(--#{$prefix}list-group-item-active-margin-top);
}
}
}
.list-group-item-action {
transition: var(--#{$prefix}list-group-item-transition-time);
// Hover state
&:hover {
transition: var(--#{$prefix}list-group-item-transition-time);
}
}
.list-group-light {
--#{$prefix}list-group-light-item-py: #{$list-group-light-item-py};
--#{$prefix}list-group-light-item-border: #{$list-group-light-item-border};
--#{$prefix}list-group-light-item-border-width: #{$list-group-light-item-border-width};
--#{$prefix}list-group-light-active-border-radius: #{$list-group-light-active-border-radius};
--#{$prefix}list-group-light-active-bg: #{$list-group-light-active-bg};
--#{$prefix}list-group-light-active-color: #{$list-group-light-active-color};
.list-group-item {
padding: var(--#{$prefix}list-group-light-item-py) 0;
border: var(--#{$prefix}list-group-light-item-border);
}
> .list-group-item {
border-width: 0 0 var(--#{$prefix}list-group-light-item-border-width);
&:last-of-type {
border: none;
}
}
.active {
border: none;
border-radius: var(--#{$prefix}list-group-light-active-border-radius);
background-color: var(--#{$prefix}list-group-light-active-bg);
color: var(--#{$prefix}list-group-light-active-color);
}
.list-group-item-action {
&:hover {
border-radius: var(--#{$prefix}list-group-light-active-border-radius);
}
&:focus {
border-radius: var(--#{$prefix}list-group-light-active-border-radius);
}
}
}
.list-group-small {
--#{$prefix}list-group-small-item-py: #{$list-group-small-item-py};
.list-group-item {
padding: var(--#{$prefix}list-group-small-item-py) 0;
}
}
@each $color, $value in $theme-colors {
.list-group-item-#{$color} {
background-color: var(--#{$prefix}#{$color}-bg-subtle);
color: var(--#{$prefix}#{$color}-text-emphasis);
i {
color: var(--#{$prefix}#{$color}-link-emphasis);
}
}
}
================================================
FILE: src/scss/free/_mixins.scss
================================================
// Toggles
//
// Used in conjunction with global variables to enable certain theme features.
// Components
@import './mixins/buttons';
@import './mixins/ripple';
@import './mixins/table-variants';
================================================
FILE: src/scss/free/_modal.scss
================================================
//
// Modal styles
//
.modal-content {
// scss-docs-start modal-css-vars
--#{$prefix}modal-box-shadow: #{$modal-box-shadow};
// scss-docs-end modal-css-vars
border: 0;
box-shadow: var(--#{$prefix}modal-box-shadow);
}
================================================
FILE: src/scss/free/_nav.scss
================================================
//
// Navs styles
//
//
// Tabs styles
//
.nav-tabs {
border-bottom: 0;
.nav-link {
--#{$prefix}nav-tabs-link-font-weight: #{$nav-tabs-link-font-weight};
--#{$prefix}nav-tabs-link-font-size: #{$nav-tabs-link-font-size};
--#{$prefix}nav-tabs-link-color: #{$nav-tabs-link-color};
--#{$prefix}nav-tabs-link-padding-top: #{$nav-tabs-link-padding-top};
--#{$prefix}nav-tabs-link-padding-bottom: #{$nav-tabs-link-padding-bottom};
--#{$prefix}nav-tabs-link-padding-x: #{$nav-tabs-link-padding-x};
--#{$prefix}nav-tabs-link-hover-bgc: #{$nav-tabs-link-hover-bgc};
--#{$prefix}nav-tabs-link-border-bottom-width: #{$nav-tabs-link-border-bottom-width};
--#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
border-width: 0;
border-bottom: var(--#{$prefix}nav-tabs-link-border-bottom-width) solid transparent;
border-radius: 0;
text-transform: uppercase;
line-height: 1;
font-weight: var(--#{$prefix}nav-tabs-link-font-weight);
font-size: var(--#{$prefix}nav-tabs-link-font-size);
color: var(--#{$prefix}nav-tabs-link-color);
padding: var(--#{$prefix}nav-tabs-link-padding-top) var(--#{$prefix}nav-tabs-link-padding-x)
var(--#{$prefix}nav-tabs-link-padding-bottom) var(--#{$prefix}nav-tabs-link-padding-x);
&:hover {
background-color: var(--#{$prefix}nav-tabs-link-hover-bgc);
border-color: transparent;
}
&:focus {
border-color: transparent;
}
}
.nav-link.active,
.nav-item.show .nav-link {
color: var(--#{$prefix}nav-tabs-link-active-color);
border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
}
}
//
// Pills styles
//
.nav-pills {
margin-left: -$nav-pills-margin;
margin-right: -$nav-pills-margin;
.nav-link {
--#{$prefix}nav-pills-link-border-radius: #{$nav-pills-link-border-radius};
--#{$prefix}nav-pills-link-font-size: #{$nav-pills-link-font-size};
--#{$prefix}nav-pills-link-padding-top: #{$nav-pills-link-padding-top};
--#{$prefix}nav-pills-link-padding-bottom: #{$nav-pills-link-padding-bottom};
--#{$prefix}nav-pills-link-padding-x: #{$nav-pills-link-padding-x};
--#{$prefix}nav-pills-link-line-height: #{$nav-pills-link-line-height};
--#{$prefix}nav-pills-link-hover-bg: #{$nav-pills-link-hover-bg};
--#{$prefix}nav-pills-link-font-weight: #{$nav-pills-link-font-weight};
--#{$prefix}nav-pills-link-color: #{$nav-pills-link-color};
--#{$prefix}nav-pills-margin: #{$nav-pills-margin};
border-radius: var(--#{$prefix}nav-pills-link-border-radius);
font-size: var(--#{$prefix}nav-pills-link-font-size);
text-transform: uppercase;
padding: var(--#{$prefix}nav-pills-link-padding-top) var(--#{$prefix}nav-pills-link-padding-x)
var(--#{$prefix}nav-pills-link-padding-bottom) var(--#{$prefix}nav-pills-link-padding-x);
line-height: var(--#{$prefix}nav-pills-link-line-height);
background-color: var(--#{$prefix}nav-pills-link-hover-bg);
font-weight: var(--#{$prefix}nav-pills-link-font-weight);
color: var(--#{$prefix}nav-pills-link-color);
margin: var(--#{$prefix}nav-pills-margin);
}
.nav-link.active,
.show > .nav-link {
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
background-color: var(--#{$prefix}nav-pills-link-active-bg);
color: var(--#{$prefix}nav-pills-link-active-color);
}
}
// Fix for keeping margins of pills
.nav-fill,
.nav-justified {
.nav-item {
.nav-link {
width: auto;
}
}
}
================================================
FILE: src/scss/free/_navbar.scss
================================================
//
// Navbar styles
//
.navbar {
--#{$prefix}navbar-box-shadow: #{$navbar-box-shadow};
--#{$prefix}navbar-padding-top: #{$navbar-padding-top};
--#{$prefix}navbar-brand-img-margin-right: #{$navbar-brand-img-margin-right};
box-shadow: var(--#{$prefix}navbar-box-shadow);
padding-top: var(--#{$prefix}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: var(--#{$prefix}navbar-brand-img-margin-right);
}
}
.navbar-nav .dropdown-menu {
position: absolute;
}
// Navbar themes
.navbar-light {
.navbar-toggler-icon {
background-image: none;
}
}
.navbar-dark {
.navbar-toggler-icon {
background-image: none;
}
}
.navbar-dark,
.navbar[data-mdb-theme='dark'] {
// scss-docs-start navbar-dark-css-vars
--#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
// scss-docs-end navbar-dark-css-vars
}
================================================
FILE: src/scss/free/_pagination.scss
================================================
//
// Pagination styles
//
.pagination {
// scss-docs-start pagination-css-vars
--#{$prefix}pagination-border-radius: #{$pagination-border-radius};
--#{$prefix}pagination-active-transition: #{$pagination-active-transition};
--#{$prefix}pagination-active-font-weight: #{$pagination-active-font-weight};
--#{$prefix}pagination-circle-border-radius: #{$pagination-circle-border-radius};
--#{$prefix}pagination-circle-padding-x: #{$pagination-circle-padding-x};
--#{$prefix}pagination-circle-padding-l-lg: #{$pagination-circle-lg-padding-left};
--#{$prefix}pagination-circle-padding-r-lg: #{$pagination-circle-lg-padding-right};
--#{$prefix}pagination-circle-padding-l-sm: #{$pagination-circle-sm-padding-left};
--#{$prefix}pagination-circle-padding-r-sm: #{$pagination-circle-sm-padding-right};
// scss-docs-end pagination-css-vars
}
.page-link {
background-color: transparent;
border: 0;
outline: 0;
border-radius: var(--#{$prefix}pagination-border-radius);
&:focus {
box-shadow: none;
}
&.active,
.active > & {
border: 0;
transition: var(--#{$prefix}pagination-active-transition);
font-weight: var(--#{$prefix}pagination-active-font-weight);
}
}
.page-item {
&:not(:first-child) {
.page-link {
margin-left: 0;
}
}
&:first-child {
.page-link {
border-top-left-radius: var(--#{$prefix}pagination-border-radius);
border-bottom-left-radius: var(--#{$prefix}pagination-border-radius);
}
}
&:last-child {
.page-link {
border-top-right-radius: var(--#{$prefix}pagination-border-radius);
border-bottom-right-radius: var(--#{$prefix}pagination-border-radius);
}
}
}
//
// Pagination circle option
//
.pagination-circle {
.page-item {
&:first-child {
.page-link {
border-radius: var(--#{$prefix}pagination-circle-border-radius);
}
}
&:last-child {
.page-link {
border-radius: var(--#{$prefix}pagination-circle-border-radius);
}
}
}
.page-link {
border-radius: var(--#{$prefix}pagination-circle-border-radius);
padding-left: var(--#{$prefix}pagination-circle-padding-x);
padding-right: var(--#{$prefix}pagination-circle-padding-x);
}
&.pagination-lg {
.page-link {
padding-left: var(--#{$prefix}pagination-circle-padding-l-lg);
padding-right: var(--#{$prefix}pagination-circle-padding-r-lg);
}
}
&.pagination-sm {
.page-link {
padding-left: var(--#{$prefix}pagination-circle-padding-l-sm);
padding-right: var(--#{$prefix}pagination-circle-padding-r-sm);
}
}
}
================================================
FILE: src/scss/free/_popover.scss
================================================
//
// Popover styles
//
.popover {
// scss-docs-start popover-css-vars
--#{$prefix}popover-border-bottom-width: #{$popover-border-bottom-width};
// scss-docs-end popover-css-vars
.popover-arrow {
display: none;
}
}
.popover-header {
border-bottom: var(--#{$prefix}popover-border-bottom-width) solid
var(--#{$prefix}popover-border-color);
}
================================================
FILE: src/scss/free/_progress.scss
================================================
// Progress
.progress {
border-radius: 0;
box-shadow: none;
}
.progress-circular {
--#{$prefix}progress-circular-size: #{$progress-circular-size};
--#{$prefix}progress-circular-bar-width: #{$progress-circular-bar-width};
--#{$prefix}progress-circular-color: var(--#{$prefix}emphasis-color);
position: relative;
width: var(--#{$prefix}progress-circular-size);
height: var(--#{$prefix}progress-circular-size);
background-color: transparent;
display: inline-block;
.progress-bar {
background-color: var(--#{$prefix}progress-bar-bg);
}
.progress-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
box-sizing: border-box;
background: conic-gradient(
transparent calc(var(--percentage) * 1%),
var(--#{$prefix}progress-bg) 0%
);
-webkit-mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)),
black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px)
);
mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)),
black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px)
);
background-color: inherit;
}
.progress-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--#{$prefix}progress-circular-color);
}
}
================================================
FILE: src/scss/free/_range.scss
================================================
// range
.range {
--#{$prefix}range-thumb-height: #{$range-thumb-height};
--#{$prefix}range-thumb-width: #{$range-thumb-width};
--#{$prefix}range-thumb-top: #{$range-thumb-top};
--#{$prefix}range-thumb-margin-left: #{$range-thumb-margin-left};
--#{$prefix}range-thumb-border-radius: #{$range-thumb-border-radius};
--#{$prefix}range-thumb-transform: #{$range-thumb-transform};
--#{$prefix}range-thumb-transition: #{$range-thumb-transition};
--#{$prefix}range-thumb-value-font-size: #{$range-thumb-value-font-size};
--#{$prefix}range-thumb-value-line-height: #{$range-thumb-value-line-height};
--#{$prefix}range-thumb-value-color: #{$range-thumb-value-color};
--#{$prefix}range-thumb-value-font-weight: #{$range-thumb-value-font-weight};
--#{$prefix}range-thumb-background: #{$range-thumb-background};
position: relative;
.thumb {
position: absolute;
display: block;
height: var(--#{$prefix}range-thumb-height);
width: var(--#{$prefix}range-thumb-width);
top: var(--#{$prefix}range-thumb-top);
margin-left: var(--#{$prefix}range-thumb-margin-left);
text-align: center;
border-radius: var(--#{$prefix}range-thumb-border-radius);
transform: var(--#{$prefix}range-thumb-transform);
transform-origin: bottom;
transition: var(--#{$prefix}range-thumb-transition);
&:after {
position: absolute;
display: block;
content: '';
transform: translateX(-50%);
width: 100%;
height: 100%;
top: 0;
border-radius: var(--#{$prefix}range-thumb-border-radius);
transform: rotate(-45deg);
background: var(--#{$prefix}range-thumb-background);
z-index: -1;
}
.thumb-value {
display: block;
font-size: var(--#{$prefix}range-thumb-value-font-size);
line-height: var(--#{$prefix}range-thumb-value-line-height);
color: var(--#{$prefix}range-thumb-value-color);
font-weight: var(--#{$prefix}range-thumb-value-font-weight);
z-index: 2;
}
&.thumb-active {
transform: scale(1);
}
}
}
================================================
FILE: src/scss/free/_reboot.scss
================================================
// 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.
// Dividers
hr:not([size]) {
&.hr {
--#{$prefix}divider-height: #{$divider-height};
--#{$prefix}divider-bg: #{$divider-bg};
--#{$prefix}divider-opacity: #{$divider-opacity};
--#{$prefix}divider-blurry-bg: transparent;
--#{$prefix}divider-blurry-bg-image: #{$divider-blurry-bg-image};
--#{$prefix}divider-blurry-height: #{$divider-blurry-height};
--#{$prefix}divider-blurry-opacity: #{$divider-blurry-opacity};
height: var(--#{$prefix}divider-height);
background-color: var(--#{$prefix}divider-bg);
opacity: var(--#{$prefix}divider-opacity);
&.hr-blurry {
background-color: var(--#{$prefix}divider-blurry-bg);
background-image: var(--#{$prefix}divider-blurry-bg-image);
height: var(--#{$prefix}divider-blurry-height);
opacity: var(--#{$prefix}divider-blurry-opacity);
}
}
&.vr {
height: auto;
}
}
hr.hr,
hr.vr {
border-top: none !important;
}
.vr {
--#{$prefix}divider-width: #{$divider-width};
--#{$prefix}divider-bg: #{$divider-bg};
--#{$prefix}divider-opacity: #{$divider-opacity};
width: var(--#{$prefix}divider-width);
background-color: var(--#{$prefix}divider-bg);
opacity: var(--#{$prefix}divider-opacity);
}
.vr-blurry {
--#{$prefix}divider-blurry-vr-bg-image: #{$divider-blurry-vr-bg-image};
--#{$prefix}divider-blurry-vr-width: #{$divider-blurry-vr-width};
--#{$prefix}divider-blurry-opacity: #{$divider-blurry-opacity};
background-image: var(--#{$prefix}divider-blurry-vr-bg-image);
width: var(--#{$prefix}divider-blurry-vr-width);
opacity: var(--#{$prefix}divider-blurry-opacity);
}
// Links
a {
--#{$prefix}link-decoration: #{$link-decoration};
text-decoration: var(--#{$prefix}link-decoration);
}
================================================
FILE: src/scss/free/_ripple.scss
================================================
.ripple-surface {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
}
.ripple-surface-unbound {
overflow: visible;
}
.ripple-wave {
--#{$prefix}ripple-wave-cubicBezier: #{$ripple-wave-cubicBezier};
--#{$prefix}ripple-wave-border-radius: #{$ripple-wave-border-radius};
--#{$prefix}ripple-wave-opacity: #{$ripple-wave-opacity};
--#{$prefix}ripple-wave-transform: #{$ripple-wave-transform};
--#{$prefix}ripple-wave-z-index: #{$ripple-wave-z-index};
--#{$prefix}ripple-wave-active-transform: #{$ripple-wave-active-transform};
@include ripple-variant(black);
border-radius: var(--#{$prefix}ripple-wave-border-radius);
opacity: var(--#{$prefix}ripple-wave-opacity);
pointer-events: none;
position: absolute;
touch-action: none;
transform: var(--#{$prefix}ripple-wave-transform);
transition-property: transform, opacity;
transition-timing-function: var(--#{$prefix}ripple-wave-cubicBezier),
var(--#{$prefix}ripple-wave-cubicBezier);
z-index: var(--#{$prefix}ripple-wave-z-index);
&.active {
transform: var(--#{$prefix}ripple-wave-active-transform);
opacity: 0;
}
}
.btn .ripple-wave {
@include ripple-variant(white);
}
.input-wrapper .ripple-wave {
@include ripple-variant(white);
}
@each $color, $value in $ripple {
.ripple-surface-#{$color} {
.ripple-wave {
@include ripple-variant($value);
}
}
}
================================================
FILE: src/scss/free/_root.scss
================================================
//
// Root and body
//
:root,
[data-mdb-theme='light'] {
--mdb-font-roboto: #{inspect($font-family-roboto)};
--mdb-bg-opacity: 1;
--mdb-text-hover-opacity: 0.8;
--#{$prefix}surface-color: #{$surface-color};
--#{$prefix}surface-color-rgb: #{to-rgb($surface-color)};
--#{$prefix}surface-bg: #{$surface-bg};
--#{$prefix}surface-inverted-color: #{$surface-inverted-color};
--#{$prefix}surface-inverted-color-rgb: #{to-rgb($surface-inverted-color)};
--#{$prefix}surface-inverted-bg: #{$surface-inverted-bg};
--#{$prefix}divider-color: #{$divider-color};
--#{$prefix}divider-blurry-color: #{$divider-blurry-color};
--#{$prefix}highlight-bg-color: #{$highlight-bg-color};
--#{$prefix}scrollbar-rail-bg: #{$scrollbar-rail-bg};
--#{$prefix}scrollbar-thumb-bg: #{$scrollbar-thumb-bg};
--#{$prefix}picker-header-bg: #{$picker-header-bg};
--#{$prefix}timepicker-clock-face-bg: #{$timepicker-clock-face-bg};
--#{$prefix}sidenav-backdrop-opacity: #{$sidenav-backdrop-opacity};
--#{$prefix}input-focus-border-color: var(--#{$prefix}primary);
--#{$prefix}input-focus-label-color: var(--#{$prefix}primary);
--#{$prefix}form-control-border-color: #{$form-control-border-color};
--#{$prefix}form-control-label-color: #{$form-control-label-color};
--#{$prefix}form-control-disabled-bg: #{$form-control-disabled-bg};
--#{$prefix}box-shadow-color: #{$box-shadow-color};
--#{$prefix}box-shadow-color-rgb: #{to-rgb($box-shadow-color)};
--#{$prefix}stepper-mobile-bg: #{$stepper-mobile-bg};
--#{$prefix}datepicker-cell-in-range-background-color: #{$datepicker-cell-in-range-background-color};
}
@if $enable-dark-mode {
@include color-mode(dark, true) {
color-scheme: dark;
// scss-docs-start root-dark-mode-vars
--#{$prefix}surface-color: #{$surface-color-dark};
--#{$prefix}surface-color-rgb: #{to-rgb($surface-color-dark)};
--#{$prefix}surface-bg: #{$surface-bg-dark};
--#{$prefix}surface-inverted-color: #{$surface-inverted-color-dark};
--#{$prefix}surface-inverted-color-rgb: #{to-rgb($surface-inverted-color-dark)};
--#{$prefix}surface-inverted-bg: #{$surface-inverted-bg-dark};
--#{$prefix}divider-color: #{$divider-color-dark};
--#{$prefix}divider-blurry-color: #{$divider-blurry-color-dark};
--#{$prefix}highlight-bg-color: #{$highlight-bg-color-dark};
--#{$prefix}scrollbar-rail-bg: #{$scrollbar-rail-bg-dark};
--#{$prefix}scrollbar-thumb-bg: #{$scrollbar-thumb-bg-dark};
--#{$prefix}picker-header-bg: #{$picker-header-bg-dark};
--#{$prefix}timepicker-clock-face-bg: #{$timepicker-clock-face-bg-dark};
--#{$prefix}sidenav-backdrop-opacity: #{$sidenav-backdrop-opacity-dark};
--#{$prefix}form-control-border-color: #{$form-control-border-color-dark};
--#{$prefix}form-control-label-color: #{$form-control-label-color-dark};
--#{$prefix}form-control-disabled-bg: #{$form-control-disabled-bg-dark};
--#{$prefix}box-shadow-color: #{$box-shadow-color-dark};
--#{$prefix}box-shadow-color-rgb: #{to-rgb($box-shadow-color-dark)};
--#{$prefix}stepper-mobile-bg: #{$stepper-mobile-bg-dark};
--#{$prefix}datepicker-cell-in-range-background-color: #{$datepicker-cell-in-range-bg-dark};
// scss-docs-end root-dark-mode-vars
}
}
================================================
FILE: src/scss/free/_scrollspy.scss
================================================
// Scrollspy
.nav-pills {
&.menu-sidebar {
.nav-link {
--#{$prefix}scrollspy-menu-sidebar-font-size: #{$scrollspy-menu-sidebar-font-size};
--#{$prefix}scrollspy-menu-sidebar-color: #{$scrollspy-menu-sidebar-color};
--#{$prefix}scrollspy-menu-sidebar-line-height: #{$scrollspy-menu-sidebar-line-height};
--#{$prefix}scrollspy-menu-sidebar-padding-x: #{$scrollspy-menu-sidebar-padding-x};
--#{$prefix}scrollspy-menu-sidebar-font-weight: #{$scrollspy-menu-sidebar-font-weight};
--#{$prefix}scrollspy-menu-sidebar-transition: #{$scrollspy-menu-sidebar-transition};
--#{$prefix}scrollspy-menu-sidebar-margin-y: #{$scrollspy-menu-sidebar-margin-y};
font-size: var(--#{$prefix}scrollspy-menu-sidebar-font-size);
background-color: transparent;
color: var(--#{$prefix}scrollspy-menu-sidebar-color);
line-height: var(--#{$prefix}scrollspy-menu-sidebar-line-height);
padding: 0 var(--#{$prefix}scrollspy-menu-sidebar-padding-x);
font-weight: var(--#{$prefix}scrollspy-menu-sidebar-font-weight);
transition: var(--#{$prefix}scrollspy-menu-sidebar-transition);
text-transform: initial;
margin-top: var(--#{$prefix}scrollspy-menu-sidebar-margin-y);
margin-bottom: var(--#{$prefix}scrollspy-menu-sidebar-margin-y);
}
.nav-link.active,
.show > .nav-link {
--#{$prefix}scrollspy-menu-sidebar-active-color: #{$scrollspy-menu-sidebar-active-color};
--#{$prefix}scrollspy-menu-sidebar-active-font-weight: #{$scrollspy-menu-sidebar-active-font-weight};
--#{$prefix}scrollspy-menu-sidebar-active-border-width: #{$scrollspy-menu-sidebar-active-border-width};
--#{$prefix}scrollspy-menu-sidebar-active-border-color: #{$scrollspy-menu-sidebar-active-border-color};
background-color: transparent;
box-shadow: none;
color: var(--#{$prefix}scrollspy-menu-sidebar-active-color);
font-weight: var(--#{$prefix}scrollspy-menu-sidebar-active-font-weight);
border-left: var(--#{$prefix}scrollspy-menu-sidebar-active-border-width) solid
var(--#{$prefix}scrollspy-menu-sidebar-active-border-color);
border-radius: 0;
}
.collapsible-scrollspy ~ .nav {
--#{$prefix}scrollspy-collapsible-nav-transition-time: #{$scrollspy-collapsible-nav-transition-time};
transition: height var(--#{$prefix}scrollspy-collapsible-nav-transition-time) ease;
flex-wrap: nowrap;
}
}
}
================================================
FILE: src/scss/free/_shadows.scss
================================================
// Shadows
================================================
FILE: src/scss/free/_tables.scss
================================================
//
// Basic MDB table
//
.table {
--#{$prefix}table-font-size: #{$table-font-size};
--#{$prefix}table-divider-color: #{$table-divider-color};
font-size: var(--#{$prefix}table-font-size);
th {
font-weight: $font-weight-medium;
}
tbody {
font-weight: $font-weight-normal;
}
> :not(:last-child) > :last-child > * {
border-bottom-color: $table-group-separator-color;
}
}
@each $color, $value in $table-variants {
@include table-variant($color, $value);
}
.table-hover {
> tbody > tr {
transition: $table-hover-transition;
}
> tbody > tr:hover {
--#{$prefix}table-accent-bg: transparent;
background-color: var(--#{$prefix}table-hover-bg);
}
}
.table-group-divider {
border-top: calc(2 * $table-border-width) solid;
border-top-color: inherit;
}
.table-divider-color {
border-top-color: var(--#{$prefix}table-divider-color);
}
================================================
FILE: src/scss/free/_toasts.scss
================================================
//
// Toast styles
//
.toast {
// scss-docs-start toast-css-vars
--#{$prefix}toast-border-bottom-width: #{$toast-border-bottom-width};
--#{$prefix}toast-btn-close-width: #{$toast-btn-close-width};
--#{$prefix}toast-btn-close-mr: #{$toast-btn-close-mr};
--#{$prefix}toast-btn-close-ml: #{$toast-btn-close-ml};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
// scss-docs-end toast-css-vars
border: 0;
.btn-close {
width: var(--#{$prefix}toast-btn-close-width);
}
}
.toast-header {
border-bottom-width: var(--#{$prefix}toast-border-bottom-width);
.btn-close {
margin-right: var(--#{$prefix}toast-btn-close-mr);
margin-left: var(--#{$prefix}toast-btn-close-ml);
}
}
.parent-toast-relative {
position: relative;
}
.toast-absolute {
position: absolute;
}
.toast-fixed {
position: fixed;
z-index: var(--#{$prefix}toast-zindex);
}
@each $color, $value in $theme-colors {
.toast-#{$color} {
background-color: var(--#{$prefix}#{$color}-bg-subtle);
color: var(--#{$prefix}#{$color}-text-emphasis);
border-color: var(--#{$prefix}#{$color}-border-subtle);
i {
color: var(--#{$prefix}#{$color}-text-emphasis);
}
}
}
================================================
FILE: src/scss/free/_tooltip.scss
================================================
// Tooltip
.tooltip {
--#{$prefix}tooltip-font-size: #{$tooltip-font-size};
&.show {
opacity: 1;
}
.tooltip-arrow {
display: none;
}
}
.tooltip-inner {
font-size: var(--#{$prefix}tooltip-font-size);
}
================================================
FILE: src/scss/free/_type.scss
================================================
// Type
.note {
--#{$prefix}note-padding: #{$note-padding};
--#{$prefix}note-border-width: #{$note-border-width};
--#{$prefix}note-border-radius: #{$note-border-radius};
--#{$prefix}note-strong-font-weight: #{$note-strong-font-weight};
padding: var(--#{$prefix}note-padding);
border-left: var(--#{$prefix}note-border-width) solid;
border-radius: var(--#{$prefix}note-border-radius);
strong {
font-weight: var(--#{$prefix}note-strong-font-weight);
}
}
@each $color, $value in $theme-colors {
.note-#{$color} {
background-color: var(--#{$prefix}#{$color}-bg-subtle);
color: var(--#{$prefix}#{$color}-text-emphasis);
}
}
.w-responsive {
@media (min-width: 1199px) {
width: 75%;
}
}
================================================
FILE: src/scss/free/_utilities.scss
================================================
//
// Utilities
//
$utilities: map-merge(
$utilities,
(
'margin-bottom':
map-merge(
map-get($utilities, 'margin-bottom'),
(
values:
map-merge(
map-get(map-get($utilities, 'margin-bottom'), 'values'),
(
6: 3.5rem,
7: 4rem,
8: 5rem,
9: 6rem,
10: 8rem,
11: 10rem,
12: 12rem,
13: 14rem,
14: 16rem,
)
),
)
),
)
);
$utilities: map-merge(
$utilities,
(
'rounded':
map-merge(
map-get($utilities, 'rounded'),
(
values:
map-merge(
map-get(map-get($utilities, 'rounded'), 'values'),
(
4: 0.375rem,
5: 0.5rem,
6: 0.75rem,
7: 1rem,
8: 1.25rem,
9: 1.5rem,
)
),
)
),
)
);
$utilities: map-merge(
$utilities,
(
'opacity': (
property: opacity,
values: (
0: 0,
5: 0.05,
10: 0.1,
15: 0.15,
20: 0.2,
25: 0.25,
30: 0.3,
35: 0.35,
40: 0.4,
45: 0.45,
50: 0.5,
55: 0.55,
60: 0.6,
65: 0.65,
70: 0.7,
75: 0.75,
80: 0.8,
85: 0.85,
90: 0.9,
95: 0.95,
100: 1,
),
),
)
);
/* Numeric */
.diagonal-fractions {
font-variant-numeric: diagonal-fractions;
}
/* Background colors */
.bg-super-light {
--#{$prefix}bg-super-light: #fbfbfb;
background-color: var(--#{$prefix}bg-super-light);
}
/* Background attachment */
.bg-fixed {
background-attachment: fixed;
}
.bg-local {
background-attachment: local;
}
.bg-scroll {
background-attachment: scroll;
}
/* Overflow */
.overflow-y-scroll {
overflow-y: scroll;
}
.overflow-x-scroll {
overflow-x: scroll;
}
/* Tables */
.table-fixed {
table-layout: fixed;
}
.table-auto {
table-layout: auto;
}
$utilities: map-merge(
$utilities,
(
'shadow':
map-merge(
map-get($utilities, 'shadow'),
(
values:
map-merge(
map-get(map-get($utilities, 'shadow'), 'values'),
(
0: $box-shadow-0,
1: $box-shadow-1,
2: $box-shadow-2,
3: $box-shadow-3,
4: $box-shadow-4,
5: $box-shadow-5,
6: $box-shadow-6,
1-soft: $box-shadow-1-soft,
2-soft: $box-shadow-2-soft,
3-soft: $box-shadow-3-soft,
4-soft: $box-shadow-4-soft,
5-soft: $box-shadow-5-soft,
6-soft: $box-shadow-6-soft,
1-strong: $box-shadow-1-strong,
2-strong: $box-shadow-2-strong,
3-strong: $box-shadow-3-strong,
4-strong: $box-shadow-4-strong,
5-strong: $box-shadow-5-strong,
6-strong: $box-shadow-6-strong,
inner: $box-shadow-inner,
)
),
)
),
)
);
$utilities: map-merge(
$utilities,
(
'letter-spacing': (
property: letter-spacing,
class: ls,
values: (
tighter: -0.05em,
tight: -0.025em,
normal: 0em,
wide: 0.025em,
wider: 0.05em,
widest: 0.1em,
),
),
)
);
$utilities: map-merge(
$utilities,
(
'object-fit': (
property: object-fit,
class: object,
values: (
cover: cover,
),
),
)
);
$utilities: map-merge(
$utilities,
(
'object-position': (
property: object-position,
class: object,
values: (
top: top,
center: center,
bottom: bottom,
),
),
)
);
@each $name, $color in $theme-colors {
.link-#{$name} {
transition: color 0.15s;
}
}
================================================
FILE: src/scss/free/_variables-dark.scss
================================================
// Dark color mode variables
//
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
//
// Global colors
//
// scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-text-variables
$primary-text-emphasis-dark: tint-color($primary, 20%) !default;
$secondary-text-emphasis-dark: tint-color($secondary, 60%) !default;
$success-text-emphasis-dark: tint-color($success, 40%) !default;
$info-text-emphasis-dark: tint-color($info, 30%) !default;
$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
$danger-text-emphasis-dark: tint-color($danger, 20%) !default;
$light-text-emphasis-dark: $gray-100 !default;
$dark-text-emphasis-dark: $gray-200 !default;
// scss-docs-end theme-text-variables
// scss-docs-start theme-bg-subtle-variables
$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
$success-bg-subtle-dark: shade-color($success, 80%) !default;
$info-bg-subtle-dark: shade-color($info, 80%) !default;
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
$light-bg-subtle-dark: $gray-800 !default;
$dark-bg-subtle-dark: $gray-900 !default;
// scss-docs-end theme-bg-subtle-variables
// scss-docs-start theme-border-subtle-variables
$primary-border-subtle-dark: shade-color($primary, 40%) !default;
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
$success-border-subtle-dark: shade-color($success, 40%) !default;
$info-border-subtle-dark: shade-color($info, 40%) !default;
$warning-border-subtle-dark: shade-color($warning, 40%) !default;
$danger-border-subtle-dark: shade-color($danger, 40%) !default;
$light-border-subtle-dark: $gray-700 !default;
$dark-border-subtle-dark: $gray-800 !default;
// scss-docs-end theme-border-subtle-variables
$body-color-dark: $white !default;
$body-bg-dark: #303030 !default;
$body-secondary-bg-dark: $gray-800 !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
$border-color-dark: rgba(255, 255, 255, 0.12) !default;
$border-color-translucent-dark: rgba($white, 0.15) !default;
// Global MDB dark theme variables
// scss-docs-start mdb-global-dark-theme-variables
$surface-color-dark: $white !default;
$surface-bg-dark: #424242 !default;
$surface-inverted-color-dark: $white !default;
$surface-inverted-bg-dark: #757575 !default;
$divider-color-dark: rgba(255, 255, 255, 0.12) !default;
$divider-blurry-color-dark: hsl(0, 0%, 70%) !default;
$highlight-bg-color-dark: tint-color($gray-900, 10%) !default;
$scrollbar-rail-bg-dark: $gray-500 !default;
$scrollbar-thumb-bg-dark: $gray-200 !default;
$picker-header-bg-dark: #323232 !default;
$timepicker-clock-face-bg-dark: $gray-700 !default;
$sidenav-backdrop-opacity-dark: 0.5 !default;
$form-control-border-color-dark: rgba(255, 255, 255, 0.7) !default;
$form-control-label-color-dark: $gray-400 !default;
$form-control-disabled-bg-dark: $gray-700 !default;
$box-shadow-color-dark: $black !default;
$stepper-mobile-bg-dark: $body-tertiary-bg-dark !default;
$datepicker-cell-in-range-bg-dark: $gray-700 !default;
// scss-docs-start mdb-global-dark-theme-variables
// Accordion
// scss-docs-start accordion-variables
$accordion-icon-color-dark: $surface-color-dark !default;
$accordion-icon-active-color-dark: $primary !default;
// scss-docs-end accordion-variables
================================================
FILE: src/scss/free/_variables.scss
================================================
// Variables
// Color system
// scss-docs-start gray-color-variables
$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;
// scss-docs-end gray-color-variables
// scss-docs-start gray-colors-map
$grays: (
'50': $gray-50,
'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
// scss-docs-start material-design-color-system-variables
$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;
$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;
$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;
$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;
$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;
$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;
$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;
$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;
$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;
$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;
$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;
$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;
$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;
$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;
$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;
// scss-docs-end material-design-color-system-variables
// scss-docs-start material-design-color-system-map
$reds: (
'red-50': $red-50,
'red-100': $red-100,
'red-200': $red-200,
'red-300': $red-300,
'red-400': $red-400,
'red-500': $red-500,
'red-600': $red-600,
'red-700': $red-700,
'red-800': $red-800,
'red-900': $red-900,
'red-accent-100': $red-accent-100,
'red-accent-200': $red-accent-200,
'red-accent-400': $red-accent-400,
'red-accent-700': $red-accent-700,
) !default;
$pinks: (
'pink-50': $pink-50,
'pink-100': $pink-100,
'pink-200': $pink-200,
'pink-300': $pink-300,
'pink-400': $pink-400,
'pink-500': $pink-500,
'pink-600': $pink-600,
'pink-700': $pink-700,
'pink-800': $pink-800,
'pink-900': $pink-900,
'pink-accent-100': $pink-accent-100,
'pink-accent-200': $pink-accent-200,
'pink-accent-400': $pink-accent-400,
'pink-accent-700': $pink-accent-700,
) !default;
$purples: (
'purple-50': $purple-50,
'purple-100': $purple-100,
'purple-200': $purple-200,
'purple-300': $purple-300,
'purple-400': $purple-400,
'purple-500': $purple-500,
'purple-600': $purple-600,
'purple-700': $purple-700,
'purple-800': $purple-800,
'purple-900': $purple-900,
'purple-accent-100': $purple-accent-100,
'purple-accent-200': $purple-accent-200,
'purple-accent-400': $purple-accent-400,
'purple-accent-700': $purple-accent-700,
) !default;
$deep-purples: (
'deep-purple-50': $deep-purple-50,
'deep-purple-100': $deep-purple-100,
'deep-purple-200': $deep-purple-200,
'deep-purple-300': $deep-purple-300,
'deep-purple-400': $deep-purple-400,
'deep-purple-500': $deep-purple-500,
'deep-purple-600': $deep-purple-600,
'deep-purple-700': $deep-purple-700,
'deep-purple-800': $deep-purple-800,
'deep-purple-900': $deep-purple-900,
'deep-purple-accent-100': $deep-purple-accent-100,
'deep-purple-accent-200': $deep-purple-accent-200,
'deep-purple-accent-400': $deep-purple-accent-400,
'deep-purple-accent-700': $deep-purple-accent-700,
) !default;
$indigos: (
'indigo-50': $indigo-50,
'indigo-100': $indigo-100,
'indigo-200': $indigo-200,
'indigo-300': $indigo-300,
'indigo-400': $indigo-400,
'indigo-500': $indigo-500,
'indigo-600': $indigo-600,
'indigo-700': $indigo-700,
'indigo-800': $indigo-800,
'indigo-900': $indigo-900,
'indigo-accent-100': $indigo-accent-100,
'indigo-accent-200': $indigo-accent-200,
'indigo-accent-400': $indigo-accent-400,
'indigo-accent-700': $indigo-accent-700,
) !default;
$blues: (
'blue-50': $blue-50,
'blue-100': $blue-100,
'blue-200': $blue-200,
'blue-300': $blue-300,
'blue-400': $blue-400,
'blue-500': $blue-500,
'blue-600': $blue-600,
'blue-700': $blue-700,
'blue-800': $blue-800,
'blue-900': $blue-900,
'blue-accent-100': $blue-accent-100,
'blue-accent-200': $blue-accent-200,
'blue-accent-400': $blue-accent-400,
'blue-accent-700': $blue-accent-700,
) !default;
$light-blues: (
'light-blue-50': $light-blue-50,
'light-blue-100': $light-blue-100,
'light-blue-200': $light-blue-200,
'light-blue-300': $light-blue-300,
'light-blue-400': $light-blue-400,
'light-blue-500': $light-blue-500,
'light-blue-600': $light-blue-600,
'light-blue-700': $light-blue-700,
'light-blue-800': $light-blue-800,
'light-blue-900': $light-blue-900,
'light-blue-accent-100': $light-blue-accent-100,
'light-blue-accent-200': $light-blue-accent-200,
'light-blue-accent-400': $light-blue-accent-400,
'light-blue-accent-700': $light-blue-accent-700,
) !default;
$cyans: (
'cyan-50': $cyan-50,
'cyan-100': $cyan-100,
'cyan-200': $cyan-200,
'cyan-300': $cyan-300,
'cyan-400': $cyan-400,
'cyan-500': $cyan-500,
'cyan-600': $cyan-600,
'cyan-700': $cyan-700,
'cyan-800': $cyan-800,
'cyan-900': $cyan-900,
'cyan-accent-100': $cyan-accent-100,
'cyan-accent-200': $cyan-accent-200,
'cyan-accent-400': $cyan-accent-400,
'cyan-accent-700': $cyan-accent-700,
) !default;
$teals: (
'teal-50': $teal-50,
'teal-100': $teal-100,
'teal-200': $teal-200,
'teal-300': $teal-300,
'teal-400': $teal-400,
'teal-500': $teal-500,
'teal-600': $teal-600,
'teal-700': $teal-700,
'teal-800': $teal-800,
'teal-900': $teal-900,
'teal-accent-100': $teal-accent-100,
'teal-accent-200': $teal-accent-200,
'teal-accent-400': $teal-accent-400,
'teal-accent-700': $teal-accent-700,
) !default;
$greens: (
'green-50': $green-50,
'green-100': $green-100,
'green-200': $green-200,
'green-300': $green-300,
'green-400': $green-400,
'green-500': $green-500,
'green-600': $green-600,
'green-700': $green-700,
'green-800': $green-800,
'green-900': $green-900,
'green-accent-100': $green-accent-100,
'green-accent-200': $green-accent-200,
'green-accent-400': $green-accent-400,
'green-accent-700': $green-accent-700,
) !default;
$light-greens: (
'light-green-50': $light-green-50,
'light-green-100': $light-green-100,
'light-green-200': $light-green-200,
'light-green-300': $light-green-300,
'light-green-400': $light-green-400,
'light-green-500': $light-green-500,
'light-green-600': $light-green-600,
'light-green-700': $light-green-700,
'light-green-800': $light-green-800,
'light-green-900': $light-green-900,
'light-green-accent-100': $light-green-accent-100,
'light-green-accent-200': $light-green-accent-200,
'light-green-accent-400': $light-green-accent-400,
'light-green-accent-700': $light-green-accent-700,
) !default;
$limes: (
'lime-50': $lime-50,
'lime-100': $lime-100,
'lime-200': $lime-200,
'lime-300': $lime-300,
'lime-400': $lime-400,
'lime-500': $lime-500,
'lime-600': $lime-600,
'lime-700': $lime-700,
'lime-800': $lime-800,
'lime-900': $lime-900,
'lime-accent-100': $lime-accent-100,
'lime-accent-200': $lime-accent-200,
'lime-accent-400': $lime-accent-400,
'lime-accent-700': $lime-accent-700,
) !default;
$yellows: (
'yellow-50': $yellow-50,
'yellow-100': $yellow-100,
'yellow-200': $yellow-200,
'yellow-300': $yellow-300,
'yellow-400': $yellow-400,
'yellow-500': $yellow-500,
'yellow-600': $yellow-600,
'yellow-700': $yellow-700,
'yellow-800': $yellow-800,
'yellow-900': $yellow-900,
'yellow-accent-100': $yellow-accent-100,
'yellow-accent-200': $yellow-accent-200,
'yellow-accent-400': $yellow-accent-400,
'yellow-accent-700': $yellow-accent-700,
) !default;
$ambers: (
'amber-50': $amber-50,
'amber-100': $amber-100,
'amber-200': $amber-200,
'amber-300': $amber-300,
'amber-400': $amber-400,
'amber-500': $amber-500,
'amber-600': $amber-600,
'amber-700': $amber-700,
'amber-800': $amber-800,
'amber-900': $amber-900,
'amber-accent-100': $amber-accent-100,
'amber-accent-200': $amber-accent-200,
'amber-accent-400': $amber-accent-400,
'amber-accent-700': $amber-accent-700,
) !default;
$oranges: (
'orange-50': $orange-50,
'orange-100': $orange-100,
'orange-200': $orange-200,
'orange-300': $orange-300,
'orange-400': $orange-400,
'orange-500': $orange-500,
'orange-600': $orange-600,
'orange-700': $orange-700,
'orange-800': $orange-800,
'orange-900': $orange-900,
'orange-accent-100': $orange-accent-100,
'orange-accent-200': $orange-accent-200,
'orange-accent-400': $orange-accent-400,
'orange-accent-700': $orange-accent-700,
) !default;
$deep-oranges: (
'deep-orange-50': $deep-orange-50,
'deep-orange-100': $deep-orange-100,
'deep-orange-200': $deep-orange-200,
'deep-orange-300': $deep-orange-300,
'deep-orange-400': $deep-orange-400,
'deep-orange-500': $deep-orange-500,
'deep-orange-600': $deep-orange-600,
'deep-orange-700': $deep-orange-700,
'deep-orange-800': $deep-orange-800,
'deep-orange-900': $deep-orange-900,
'deep-orange-accent-100': $deep-orange-accent-100,
'deep-orange-accent-200': $deep-orange-accent-200,
'deep-orange-accent-400': $deep-orange-accent-400,
'deep-orange-accent-700': $deep-orange-accent-700,
) !default;
$browns: (
'brown-50': $brown-50,
'brown-100': $brown-100,
'brown-200': $brown-200,
'brown-300': $brown-300,
'brown-400': $brown-400,
'brown-500': $brown-500,
'brown-600': $brown-600,
'brown-700': $brown-700,
'brown-800': $brown-800,
'brown-900': $brown-900,
) !default;
$blue-grays: (
'blue-gray-50': $blue-gray-50,
'blue-gray-100': $blue-gray-100,
'blue-gray-200': $blue-gray-200,
'blue-gray-300': $blue-gray-300,
'blue-gray-400': $blue-gray-400,
'blue-gray-500': $blue-gray-500,
'blue-gray-600': $blue-gray-600,
'blue-gray-700': $blue-gray-700,
'blue-gray-800': $blue-gray-800,
'blue-gray-900': $blue-gray-900,
) !default;
// scss-docs-end material-design-color-system-map
// scss-docs-start color-variables
$red: $red-500 !default;
$pink: $pink-500 !default;
$purple: $purple-500 !default;
$indigo: $indigo-500 !default;
$blue: $blue-500 !default;
$cyan: $cyan-500 !default;
$teal: $teal-500 !default;
$green: $green-500 !default;
$yellow: $yellow-500 !default;
$orange: $orange-500 !default;
// scss-docs-end color-variables
// scss-docs-start colors-map
$colors: (
'red': $red,
'pink': $pink,
'purple': $purple,
'indigo': $indigo,
'blue': $blue,
'cyan': $cyan,
'teal': $teal,
'green': $green,
'yellow': $yellow,
'orange': $orange,
'white': $white,
'black': $black,
'gray': $gray-600,
'gray-dark': $gray-800,
) !default;
// scss-docs-end colors-map
// Customize the light and dark text colors for use in our color contrast function.
$color-contrast-dark: $black !default;
$color-contrast-light: $white !default;
$min-contrast-ratio: 2 !default;
// scss-docs-start theme-color-variables
$primary: #3b71ca !default;
$secondary: #9fa6b2 !default;
$success: #14a44d !default;
$danger: #dc4c64 !default;
$warning: #e4a11b !default;
$info: #54b4d3 !default;
$light: #fbfbfb !default;
$dark: #332d2d !default;
// scss-docs-end theme-color-variables
// scss-docs-start theme-colors-map
$theme-colors: (
'primary': $primary,
'secondary': $secondary,
'success': $success,
'danger': $danger,
'warning': $warning,
'info': $info,
'light': $light,
'dark': $dark,
) !default;
// scss-docs-end theme-colors-map
// scss-docs-start theme-text-variables
$primary-text-emphasis: shade-color($primary, 20%) !default;
$secondary-text-emphasis: shade-color($secondary, 60%) !default;
$success-text-emphasis: shade-color($success, 40%) !default;
$info-text-emphasis: shade-color($info, 30%) !default;
$warning-text-emphasis: shade-color($warning, 40%) !default;
$danger-text-emphasis: shade-color($danger, 20%) !default;
$light-text-emphasis: $gray-700 !default;
$dark-text-emphasis: $gray-200 !default;
// scss-docs-end theme-text-variables
// scss-docs-start theme-bg-subtle-variables
$primary-bg-subtle: tint-color($primary, 85%) !default;
$secondary-bg-subtle: tint-color($secondary, 85%) !default;
$success-bg-subtle: tint-color($success, 85%) !default;
$info-bg-subtle: tint-color($info, 85%) !default;
$warning-bg-subtle: tint-color($warning, 85%) !default;
$danger-bg-subtle: tint-color($danger, 85%) !default;
$light-bg-subtle: $gray-100 !default;
$dark-bg-subtle: $gray-900 !default;
// scss-docs-end theme-bg-subtle-variables
// scss-docs-start theme-border-subtle-variables
$primary-border-subtle: tint-color($primary, 60%) !default;
$secondary-border-subtle: tint-color($secondary, 60%) !default;
$success-border-subtle: tint-color($success, 60%) !default;
$info-border-subtle: tint-color($info, 60%) !default;
$warning-border-subtle: tint-color($warning, 60%) !default;
$danger-border-subtle: tint-color($danger, 60%) !default;
$light-border-subtle: $gray-200 !default;
$dark-border-subtle: $gray-500 !default;
// scss-docs-end theme-border-subtle-variables
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-shadows: true !default;
$enable-negative-margins: true !default;
// Prefix for :root CSS variables.
$variable-prefix: mdb- !default;
$prefix: $variable-prefix !default;
// Global MDB light theme variables
// scss-docs-start mdb-global-light-theme-variables
$surface-color: $gray-800 !default;
$surface-bg: $white !default;
$surface-inverted-color: $white !default;
$surface-inverted-bg: #6d6d6d !default;
$divider-color: $gray-100 !default;
$divider-blurry-color: hsl(0, 0%, 40%) !default;
$highlight-bg-color: $gray-200 !default;
$scrollbar-rail-bg: $gray-200 !default;
$scrollbar-thumb-bg: $gray-500 !default;
$picker-header-bg: $primary !default;
$timepicker-clock-face-bg: var(--#{$prefix}secondary-bg) !default;
$sidenav-backdrop-opacity: 0.1 !default;
$form-control-border-color: $gray-400 !default;
$form-control-label-color: $gray-600 !default;
$form-control-disabled-bg: $gray-300 !default;
$box-shadow-color: $black !default;
$stepper-mobile-bg: $gray-50 !default;
$datepicker-cell-in-range-background-color: $primary-border-subtle !default;
// scss-docs-start mdb-global-light-theme-variables
// Body
//
// Settings for the `` element.
$body-color: $gray-800 !default;
$body-tertiary-bg: #fbfbfb !default;
// Links
//
// Style anchor elements.
$link-color: $primary !default;
$link-decoration: none !default;
$link-shade-percentage: 5% !default;
$link-shade-focus-percentage: 10% !default;
$link-shade-active-percentage: 15% !default;
$link-hover-decoration: none !default;
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
$link-focus-color: shift-color($link-color, $link-shade-focus-percentage) !default;
$link-active-color: shift-color($link-color, $link-shade-active-percentage) !default;
// Components
//
// Define common box shadow and border and more.
// scss-docs-start border-variables
$border-width-alternate: 2px !default;
$border-style-alternate: solid !default;
$border-color-alternate: hsl(0, 0%, 96%) !default;
// scss-docs-end border-variables
// scss-docs-start border-radius-variables
$border-radius: 0.25rem !default;
$border-radius-xs: 0.2rem !default;
$border-radius-md: 0.3rem !default;
$border-radius-lg: 0.5rem !default;
// scss-docs-end border-radius-variables
// Shadows
//
// Shadows offset, blur, spread and color.
// scss-docs-start box-shadow-variables
$box-shadow-0: none !default;
$box-shadow-1: 0 0px 2px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
0 1px 1px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.04) !default;
$box-shadow-2: 0 0px 3px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
0 2px 2px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.04) !default;
$box-shadow-3: 0 2px 6px -1px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
0 6px 18px -1px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.04) !default;
$box-shadow-4: 0 2px 15px -3px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
0 10px 20px -2px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.04) !default;
$box-shadow-5: 0 2px 25px -5px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
0 25px 21px -5px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.04) !default;
$box-shadow-6: 0 2px 35px -12px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.21),
0 50px 40px -5px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.04) !default;
$box-shadow-1-soft: 0 1px 5px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
$box-shadow-2-soft: 0 2px 10px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
$box-shadow-3-soft: 0 5px 15px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
$box-shadow-4-soft: 0 10px 20px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
$box-shadow-5-soft: 0 15px 30px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
$box-shadow-6-soft: 0 20px 40px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
$box-shadow-1-strong: 0 0px 2px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.16),
0 1px 1px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
$box-shadow-2-strong: 0 0px 3px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.16),
0 2px 2px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
$box-shadow-3-strong: 0 2px 6px -1px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.16),
0 6px 18px -1px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
$box-shadow-4-strong: 0 2px 15px -3px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.16),
0 10px 20px -2px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
$box-shadow-5-strong: 0 2px 25px -5px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.16),
0 25px 21px -5px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
$box-shadow-6-strong: 0 2px 35px -12px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.26),
0 50px 40px -5px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
$box-shadow-3-top: 0 -10px 20px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
$box-shadow-inner: inset 0 2px 4px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.06) !default;
// scss-docs-end box-shadow-variables
// scss-docs-start standard-shadows-map
$shadows: (
'0': $box-shadow-0,
'1': $box-shadow-1,
'2': $box-shadow-2,
'3': $box-shadow-3,
'4': $box-shadow-4,
'5': $box-shadow-5,
'6': $box-shadow-6,
) !default;
// scss-docs-end standard-shadows-map
// scss-docs-start soft-shadows-map
$shadows-soft: (
'1': $box-shadow-1-soft,
'2': $box-shadow-2-soft,
'3': $box-shadow-3-soft,
'4': $box-shadow-4-soft,
'5': $box-shadow-5-soft,
'6': $box-shadow-6-soft,
) !default;
// scss-docs-end soft-shadows-map
// scss-docs-start strong-shadows-map
$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,
'6': $box-shadow-6-strong,
) !default;
// scss-docs-end strong-shadows-map
// Typography
//
// Font, line-height, and color for body text, headings, and more.
// scss-docs-start font-variables
// stylelint-disable value-keyword-case
$font-family-roboto: 'Roboto', sans-serif !default;
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$prefix}font-roboto) !default;
// $font-size-base affects the font size of the body text
$font-size-base: 1rem !default;
$font-weight-medium: 500 !default;
$line-height-base: 1.6 !default;
// scss-docs-end font-variables
// scss-docs-start note-variables
$note-padding: 10px !default;
$note-border-width: 6px !default;
$note-border-radius: 5px !default;
$note-strong-font-weight: 600 !default;
// scss-docs-end note-variables
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
// scss-docs-start table-variables
$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: 0.5rem !default;
$table-color: var(--#{$prefix}body-color) !default;
$table-font-size: 0.9rem !default;
$table-striped-bg: rgba(0, 0, 0, 0.02) !default;
$table-hover-transition: 0.5s !default;
$table-hover-bg: rgba(0, 0, 0, 0.025) !default;
$table-group-separator-color: inherit !default;
$table-divider-color: currentcolor !default;
$table-bg-scale: -80% !default;
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), 0.1) !default;
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), 0.025) !default;
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), 0.02) !default;
// scss-docs-end table-variables
// scss-docs-start table-loop
$table-variants: (
'primary': shift-color($primary, $table-bg-scale),
'secondary': shift-color($secondary, $table-bg-scale),
'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-loop
// Buttons
//
// For each of MDB's buttons, define text, background, and border color.
// scss-docs-start btn-variables
$btn-padding-top: 0.625rem !default;
$btn-padding-bottom: 0.5rem !default;
$btn-padding-x: 1.5rem !default;
$btn-font-size: 0.75rem !default;
$btn-line-height: 1.5 !default;
$btn-padding-top-lg: 0.75rem !default;
$btn-padding-bottom-lg: 0.6875rem !default;
$btn-padding-x-lg: 1.6875rem !default;
$btn-font-size-lg: 0.875rem !default;
$btn-line-height-lg: 1.6 !default;
$btn-padding-top-sm: 0.375rem !default;
$btn-padding-bottom-sm: 0.3125rem !default;
$btn-padding-x-sm: 1rem !default;
$btn-font-size-sm: 0.75rem !default;
$btn-line-height-sm: 1.5 !default;
$btn-border-width: $border-width-alternate !default;
$btn-font-weight: $font-weight-medium !default;
$btn-box-shadow: 0 4px 9px -4px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.35) !default;
$btn-hover-box-shadow: 0 8px 9px -4px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.15),
0 4px 18px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
$btn-focus-box-shadow: $btn-hover-box-shadow !default;
$btn-active-box-shadow: $btn-focus-box-shadow !default;
$btn-link-color: $link-color !default;
$btn-link-hover-color: $link-hover-color !default;
$btn-link-focus-color: $link-focus-color !default;
$btn-link-active-color: $link-active-color !default;
$btn-link-disabled-color: $gray-500 !default;
$btn-link-hover-bg: hsl(0, 0%, 96%) !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-hover-bg-shade-amount: 5% !default;
$btn-focus-bg-shade-amount: 5% !default;
$btn-active-bg-shade-amount: 10% !default;
$btn-hover-bg-tint-amount: 5% !default;
$btn-focus-bg-tint-amount: 5% !default;
$btn-active-bg-tint-amount: 10% !default;
$btn-secondary-bg-tint-amount: 85% !default;
$btn-secondary-color-shade-amount: 30% !default;
$btn-light-color-tint-amount: 30% !default;
$btn-outline-hover-bg-tint-amount: 95% !default;
$btn-outline-focus-bg-tint-amount: 95% !default;
$btn-outline-active-bg-tint-amount: 95% !default;
$btn-outline-hover-bg-shade-amount: 20% !default;
$btn-outline-focus-bg-shade-amount: 20% !default;
$btn-outline-active-bg-shade-amount: 20% !default;
$btn-contextual-box-shadow: 0 4px 9px -4px !default;
$btn-contextual-box-shadow-state-first-part: 0 8px 9px -4px !default;
$btn-contextual-box-shadow-state-second-part: 0 4px 18px 0 !default;
$btn-outline-padding-top: 0.5rem !default;
$btn-outline-padding-bottom: 0.375rem !default;
$btn-outline-padding-x: 1.375rem !default;
$btn-outline-border-width: $border-width-alternate !default;
$btn-outline-line-height: 1.5 !default;
$btn-outline-padding-top-lg: 0.625rem !default;
$btn-outline-padding-bottom-lg: 0.5625rem !default;
$btn-outline-padding-x-lg: 1.5625rem !default;
$btn-outline-font-size-lg: 0.875rem !default;
$btn-outline-line-height-lg: 1.6 !default;
$btn-outline-padding-top-sm: 0.25rem !default;
$btn-outline-padding-bottom-sm: 0.1875rem !default;
$btn-outline-padding-x-sm: 0.875rem !default;
$btn-outline-font-size-sm: 0.75rem !default;
$btn-outline-line-height-sm: 1.5 !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-width-lg: 2.8125rem !default;
$btn-floating-height-lg: 2.8125rem !default;
$btn-floating-icon-width-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-outline-floating-icon-width: 2.0625rem !default;
$btn-outline-floating-icon-width-lg: 2.5625rem !default;
$btn-outline-floating-icon-width-sm: 1.5625rem !default;
$btn-floating-icon-line-height: 2.3125rem !default;
$btn-floating-icon-line-height-lg: 2.8125rem !default;
$btn-floating-icon-line-height-sm: 1.8125rem !default;
$btn-outline-floating-icon-line-height: 2.0625rem !default;
$btn-outline-floating-icon-line-height-lg: 2.5625rem !default;
$btn-outline-floating-icon-line-height-sm: 1.5625rem !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-padding-bottom: 1.25rem !default;
$fixed-action-btn-padding-x: 1.25rem !default;
$fixed-action-btn-li-margin-bottom: 1.5rem !default;
$btn-block-margin-top: 0.5rem !default;
// scss-docs-end btn-variables
// Ripple
// scss-docs-start ripple-variables
$ripple-wave-cubicBezier: cubic-bezier(0, 0, 0.15, 1) !default;
$ripple-wave-border-radius: 50% !default;
$ripple-wave-opacity: 0.5 !default;
$ripple-wave-transform: scale(0) !default;
$ripple-wave-z-index: 999 !default;
$ripple-wave-active-transform: scale(1) !default;
// scss-docs-end ripple-variables
// scss-docs-start ripple-colors-map
$ripple: (
'primary': $primary,
'secondary': #e3ebf7,
'success': $success,
'danger': $danger,
'warning': $warning,
'info': $info,
'light': $light,
'dark': $dark,
) !default;
// scss-docs-end ripple-colors-map
// Button group
//
// Material styling for group of buttons
// scss-docs-start btn-group-variables
$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;
// scss-docs-end btn-group-variables
// Forms
//
// Material styling for outline forms border, label, size
// scss-docs-start input-variables
$input-padding-top: 0.32rem !default;
$input-padding-bottom: $input-padding-top !default;
$input-padding-left: 0.75rem !default;
$input-padding-right: $input-padding-left !default;
$input-transition: all 0.2s linear !default;
$input-color: var(--#{$prefix}surface-color) !default;
$input-placeholder-color: rgba(var(--#{$prefix}surface-color-rgb), 0.8) !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: var(--#{$prefix}form-control-label-color) !default;
$input-focus-active-label-transform: translateY(-1rem) translateY(0.1rem) scale(0.8) !default;
$input-focus-label-color: var(--#{$prefix}input-focus-label-color) !default;
$input-focus-border-width: 0.125rem !default;
$input-focus-border-color: var(--#{$prefix}input-focus-border-color) !default;
$input-disabled-background-color: var(--#{$prefix}form-control-disabled-bg) !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-top-sm: 0.32rem !default;
$input-padding-bottom-sm: 0.32rem !default;
$input-font-size-sm: 0.775rem !default;
$input-line-height-sm: 1.5 !default;
$input-focus-active-label-transform-sm: translateY(-0.85rem) translateY(0.1rem) scale(0.8) !default;
$form-notch-div-border-color: var(--#{$prefix}form-control-border-color) !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-white-placeholder-color: rgba(255, 255, 255, 0.7) !default;
$form-white-disabled-bgc: rgba(255, 255, 255, 0.45) !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: var(--#{$prefix}body-bg) !default;
$form-check-input-border-width: 0.125rem !default;
$form-check-input-border-color: var(--#{$prefix}form-control-border-color) !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(var(--#{$prefix}box-shadow-color-rgb), 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.25rem !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: var(--#{$prefix}body-bg) !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: var(--#{$prefix}body-bg) !default;
$form-check-input-radio-checked-background-color: var(--#{$prefix}body-bg) !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: var(--#{$prefix}body-bg) !default;
$form-switch-padding-left: 1.85rem !default;
$form-switch-form-check-input-border-radius: 0.4375rem !default;
$form-switch-form-check-input-width: 2rem !default;
$form-switch-form-check-input-height: 0.875rem !default;
$form-switch-form-check-input-background-color: rgba(
var(--#{$prefix}emphasis-color-rgb),
0.25
) !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: var(--#{$prefix}surface-bg) !default;
$form-switch-form-check-input-after-margin-top: -0.1875rem !default;
$form-switch-form-check-input-after-box-shadow: $box-shadow-2 !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(var(--#{$prefix}box-shadow-color-rgb), 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(var(--#{$prefix}box-shadow-color-rgb), 0.2),
0 2px 2px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.14),
0 1px 5px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 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-select-transition: all 0.2s linear !default;
$form-select-focus-border-color: $primary !default;
$form-select-focus-border-box-shadow: inset 0px 0px 0px 1px $primary !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.5 !default;
$input-group-form-outline-border-left-width: 1px !default;
$input-group-form-outline-border-left-color: #bdbdbd !default;
$form-outline-select-arrow-color: var(--#{$prefix}surface-color) !default;
// scss-docs-end input-variables
// Form validation
// scss-docs-start form-feedback-variables
$form-feedback-valid-tooltip-color: $white !default;
$form-feedback-valid-color: $success !default;
$form-feedback-invalid-color: $danger !default;
// scss-docs-end form-feedback-variables
// 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
// 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
$fixed-action-button-zindex: 1030 !default;
$zindex-toast: 1060 !default;
$alert-zindex: 1070 !default;
$zindex-popover: 1080 !default;
$zindex-tooltip: 1090 !default;
// scss-docs-end zindex-stack
// Navs
// scss-docs-start nav-variables
$nav-tabs-link-border-bottom-width: 2px !default;
$nav-tabs-link-font-weight: 500 !default;
$nav-tabs-link-font-size: 12px !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: var(--#{$prefix}highlight-bg-color) !default;
$nav-tabs-link-active-color: $primary !default;
$nav-tabs-link-active-border-color: $primary !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-tabs-link-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55) !default;
$nav-tabs-link-hover-bgc: var(--#{$prefix}highlight-bg-color) !default;
$nav-pills-link-color: $nav-tabs-link-color !default;
$nav-pills-link-hover-bg: $nav-tabs-link-hover-bgc !default;
$nav-pills-link-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
$nav-pills-link-active-color: var(--#{$prefix}primary-text-emphasis) !default;
// scss-docs-end nav-variables
// Navbar
// scss-docs-start navbar-variables
$navbar-box-shadow: 0 4px 12px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
0 2px 4px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
$navbar-padding-top: 0.5625rem !default;
$navbar-brand-img-margin-right: 0.25rem !default;
// scss-docs-end navbar-variables
// Dropdowns
//
// Dropdown menu container and contents.
// scss-docs-start dropdown-variables
$dropdown-color: var(--#{$prefix}surface-color) !default;
$dropdown-bg: var(--#{$prefix}surface-bg) !default;
$dropdown-link-color: $dropdown-color !default;
$dropdown-header-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55) !default;
$dropdown-margin-top: 0.125rem !default;
$dropdown-box-shadow: $box-shadow-4 !default;
$dropdown-font-size: 0.875rem !default;
$dropdown-item-border-radius: 0.5rem !default;
$dropdown-item-padding-y: 0.5rem !default;
$dropdown-item-padding-x: 1rem !default;
$dropdown-border-radius: 0.5rem !default;
$dropdown-divider-bg: var(--#{$prefix}divider-color) !default;
$dropdown-divider-border-top-width: 2px;
$dropdown-state-color: var(--#{$prefix}surface-color) !default;
$dropdown-state-background-color: var(--#{$prefix}highlight-bg-color) !default;
$dropdown-link-disabled-color: rgba(var(--#{$prefix}surface-color-rgb), 0.5) !default;
$dropdown-menu-animated-animation-duration: 0.55s !default;
$dropdown-menu-animated-animation-timing-function: ease !default;
$dropdown-animation-duration: 1s !default;
// scss-docs-end dropdown-variables
// Pagination
// scss-docs-start pagination-variables
$pagination-font-size: 0.9rem !default;
$pagination-color: var(--#{$prefix}body-color) !default;
$pagination-transition: all 0.3s linear !default;
$pagination-border-radius: 0.25rem !default;
$pagination-hover-color: var(--#{$prefix}body-color) !default;
$pagination-hover-bg: var(--#{$prefix}highlight-bg-color) !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;
$pagination-focus-bg: var(--#{$prefix}highlight-bg-color) !default;
$pagination-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
$pagination-active-color: var(--#{$prefix}primary-text-emphasis) !default;
$pagination-active-font-weight: 500 !default;
$pagination-disabled-color: rgba(var(--#{$prefix}body-color-rgb), 0.55) !default;
$pagination-disabled-bg: transparent !default;
// scss-docs-end pagination-variables
// Placeholders
// scss-docs-start placeholders
$placeholder-opacity-max: 0.5 !default;
$placeholder-opacity-min: 0.2 !default;
// scss-docs-end placeholders
// Cards
// scss-docs-start card-variables
$card-spacer-y: 1.5rem !default;
$card-spacer-x: 1.5rem !default;
$card-box-shadow: $box-shadow-4 !default;
$card-cap-bg: rgba(255, 255, 255, 0) !default;
$card-footer-background-color: rgba(255, 255, 255, 0) !default;
$card-header-border-width: 2px !default;
$card-header-border-color: var(--#{$prefix}divider-color) !default;
$card-footer-border-width: 2px !default;
$card-footer-border-color: var(--#{$prefix}divider-color) !default;
$card-border-radius: 0.5rem !default;
$card-img-overlay-padding: 1.5rem !default;
$card-bg: var(--#{$prefix}surface-bg) !default;
$card-border-color: rgba(0, 0, 0, 0.175);
// scss-docs-end card-variables
// Accordion
// scss-docs-start accordion-variables
$accordion-padding-y: 1.15rem !default;
$accordion-padding-x: 1.5rem !default;
$accordion-border-radius: $border-radius-lg !default;
$accordion-button-color: var(--#{$prefix}surface-color) !default;
$accordion-button-active-bg: var(--#{$prefix}surface-bg) !default;
$accordion-button-active-color: $primary !default;
$accordion-button-focus-box-shadow: inset 0 -1px 0 var(--#{$prefix}border-color) !default;
$accordion-color: var(--#{$prefix}surface-color) !default;
$accordion-flush-button-box-shadow: inset 0 -2px 0 var(--#{$prefix}divider-color) !default;
$accordion-flush-item-border-bottom: 2px solid var(--#{$prefix}divider-color) !default;
$accordion-borderless-button-border-radius: 0.5rem !default;
$accordion-borderless-button-bgc: var(--#{$prefix}primary-bg-subtle) !default;
$accordion-borderless-button-color: var(--#{$prefix}primary-text-emphasis) !default;
$accordion-icon-color: $surface-color !default;
$accordion-icon-active-color: $primary !default;
// scss-docs-end accordion-variables
// Tooltips
// scss-docs-start tooltip-variables
$tooltip-color: var(--#{$prefix}surface-inverted-color) !default;
$tooltip-padding-y: 6px !default;
$tooltip-padding-x: 16px !default;
$tooltip-font-size: 14px !default;
$tooltip-bg: var(--#{$prefix}surface-inverted-bg) !default;
$tooltip-border-radius: 0.25rem !default;
// scss-docs-end tooltip-feedback-variables
// Popovers
// scss-docs-start popover-variables
$popover-box-shadow: $box-shadow-2 !default;
$popover-border-radius: $border-radius-lg !default;
$popover-border-bottom-width: $border-width-alternate !default;
$popover-border-width: 1px !default;
$popover-border-color: var(--#{$prefix}divider-color) !default;
$popover-header-bg: var(--#{$prefix}surface-bg) !default;
$popover-bg: var(--#{$prefix}surface-bg) !default;
$popover-header-color: var(--#{$prefix}surface-color) !default;
$popover-body-color: var(--#{$prefix}surface-color) !default;
// scss-docs-end popover-variables
// Toasts
// scss-docs-start toast-variables
$toast-box-shadow: $box-shadow-4 !default;
$toast-border-radius: $border-radius-lg !default;
$toast-border-bottom-width: $border-width-alternate !default;
$toast-background-color: var(--#{$prefix}surface-bg) !default;
$toast-padding-x: 1rem !default;
$toast-padding-y: 0.65rem !default;
$toast-header-background-color: var(--#{$prefix}surface-bg) !default;
$toast-btn-close-width: 1.3em !default;
$toast-btn-close-mr: -0.375rem !default;
$toast-btn-close-ml: 0.75rem !default;
// scss-docs-end toast-variables
// Badges
// scss-docs-start badge-variables
$badge-border-radius: 0.27rem !default;
$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;
// scss-docs-end badge-variables
// Modals
// scss-docs-start modal-variables
$modal-box-shadow: $box-shadow-4 !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-header-border-color: var(--#{$prefix}divider-color) !default;
$modal-footer-border-color: var(--#{$prefix}divider-color) !default;
$modal-header-border-width: $border-width-alternate !default;
$modal-footer-border-width: $border-width-alternate !default;
$modal-content-color: var(--#{$prefix}surface-color) !default;
$modal-content-bg: var(--#{$prefix}surface-bg) !default;
// scss-docs-end modal-variables
// Alerts
// scss-docs-start alert-variables
$alert-padding-y: 1.25rem !default;
$alert-padding-x: 1.5rem !default;
$alert-border-radius: $border-radius-lg !default;
// scss-docs-end alert-variables
// Progress bars
// scss-docs-start progress-variables
$progress-height: 4px !default;
$progress-bar-color: color-contrast($primary) !default;
$progress-circular-size: 48px !default;
$progress-circular-bar-width: 4px !default;
// scss-docs-end progress-variables
// Range
// scss-docs-start range-variables
$range-thumb-height: 30px !default;
$range-thumb-width: 30px !default;
$range-thumb-top: -35px !default;
$range-thumb-background: $primary !default;
$range-thumb-active-background: var(--#{$prefix}primary-bg-subtle) !default;
$range-thumb-margin-left: -15px !default;
$range-thumb-border-radius: 50% 50% 50% 0 !default;
$range-thumb-transform: scale(0) !default;
$range-thumb-transition: transform 0.2s ease-in-out !default;
$range-thumb-value-font-size: 12px !default;
$range-thumb-value-line-height: 30px !default;
$range-thumb-value-color: color-contrast($primary) !default;
$range-thumb-value-font-weight: 500 !default;
// override default bootstrap values for form range
$form-range-thumb-bg: $range-thumb-background !default;
$form-range-thumb-disabled-bg: var(--#{$prefix}form-control-disabled-bg) !default;
// scss-docs-end range-variables
// List group
// scss-docs-start list-group-variables
$list-group-border-radius: $border-radius-lg !default;
$list-group-item-padding-x: 1.5rem !default;
$list-group-item-transition-time: 0.5s !default;
$list-group-bg: transparent !default;
$list-group-disabled-color: rgba(var(--#{$prefix}body-color-rgb), 0.5);
$list-group-light-item-py: 1rem !default;
$list-group-light-item-border: 2px solid var(--#{$prefix}divider-color) !default;
$list-group-light-item-border-width: 2px !default;
$list-group-light-active-border-radius: 0.5rem !default;
$list-group-light-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
$list-group-light-active-color: var(--#{$prefix}primary-text-emphasis) !default;
$list-group-active-margin-top: 0 !default;
$list-group-small-item-py: 0.5rem !default;
// scss-docs-end list-group-variables
// Images
// scss-docs-start images-variables
$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: $box-shadow-4-strong !default;
$image-hover-shadow-box-shadow-soft: $box-shadow-5 !default;
// scss-docs-end images-variables
// Breadcrumbs
// scss-docs-start breadcrumb-variables
$breadcrumb-divider-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55) !default;
$breadcrumb-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55) !default;
$breadcrumb-item-color: $breadcrumb-active-color !default;
$breadcrumb-item-transition: color 0.15s ease-in-out !default;
$breadcrumb-item-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.7) !default;
$breadcrumb-item-before-color: $breadcrumb-divider-color !default;
// scss-docs-end breadcrumb-variables
// Carousel
// scss-docs-start carousel-variables
$carousel-control-prev-icon-bg: none !default;
$carousel-control-next-icon-bg: none !default;
$carousel-control-icon-font-size: 1.7rem !default;
// scss-docs-end carousel-variables
// Scrollspy
// scss-docs-start scrollspy-variables
$scrollspy-menu-sidebar-font-size: 0.8rem !default;
$scrollspy-menu-sidebar-color: var(--#{$prefix}body-color) !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;
$scrollspy-collapsible-nav-transition-time: 0.5s !default;
// scss-docs-end scrollspy-variables
// Dividers
// scss-docs-start divider-variables
$divider-height: $border-width-alternate !default;
$divider-width: $border-width-alternate !default;
$divider-bg: var(--#{$prefix}divider-color) !default;
$divider-opacity: 1 !default;
$divider-blurry-bg-image: linear-gradient(
90deg,
transparent,
var(--#{$prefix}divider-blurry-color),
transparent
) !default;
$divider-blurry-height: 1px !default;
$divider-blurry-opacity: 0.25 !default;
$divider-blurry-vr-bg-image: linear-gradient(
180deg,
transparent,
var(--#{$prefix}divider-blurry-color),
transparent
) !default;
$divider-blurry-vr-width: 1px !default;
// scss-docs-end divider-variables
================================================
FILE: src/scss/free/forms/_form-check.scss
================================================
//
// Material styles for check / radio / switch
//
.form-check {
min-height: 1.5rem;
}
.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;
&: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;
margin-top: 0.19em;
margin-right: 6px;
&: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 {
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;
margin-top: 0.125em;
margin-right: 4px;
&: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;
transition: $form-check-input-radio-checked-after-transition;
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
}
&:focus {
background-color: $form-check-input-radio-checked-focus-background-color;
}
}
}
}
.form-check-label {
padding-left: 0.15rem;
&:hover {
cursor: pointer;
}
}
//
// Switch
//
.form-switch {
.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: 0.3em;
margin-right: 8px;
&: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;
}
}
}
}
}
================================================
FILE: src/scss/free/forms/_form-control.scss
================================================
//
// Material styles for form control - form outline
//
.form-control {
min-height: auto;
padding: 4.5px 12px 3.68px 12px;
transition: all 0.1s linear;
box-shadow: none;
&:focus {
box-shadow: none;
transition: all 0.1s linear;
border-color: $primary;
box-shadow: inset 0px 0px 0px 1px $primary;
}
&.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;
width: 100%;
.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;
color: var(--#{$prefix}surface-color);
}
.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;
max-width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
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;
transition: $input-transition;
}
.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-right: none;
border-left: none;
border-top: 1px solid transparent;
}
&:focus ~ .form-notch .form-notch-middle {
border-color: $input-focus-border-color;
box-shadow: 0 1px 0 0 $input-focus-border-color;
border-top: 1px solid transparent;
}
&:focus ~ .form-notch .form-notch-leading,
&.active ~ .form-notch .form-notch-leading {
border-right: none;
}
&:focus ~ .form-notch .form-notch-leading {
border-color: $input-focus-border-color;
box-shadow: -1px 0 0 0 $input-focus-border-color, 0 1px 0 0 $input-focus-border-color,
0 -1px 0 0 $input-focus-border-color;
}
&:focus ~ .form-notch .form-notch-trailing,
&.active ~ .form-notch .form-notch-trailing {
border-left: none;
}
&:focus ~ .form-notch .form-notch-trailing {
border-color: $input-focus-border-color;
box-shadow: 1px 0 0 0 $input-focus-border-color, 0 -1px 0 0 $input-focus-border-color,
0 1px 0 0 $input-focus-border-color;
}
&:disabled,
&.disabled,
&[readonly] {
background-color: $input-disabled-background-color;
}
&:disabled,
&.disabled,
&[readonly] {
~ .timepicker-toggle-button,
~ .datepicker-toggle-button,
~ .datetimepicker-toggle-button,
~ .select-arrow,
~ .trailing {
color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
}
}
&.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;
box-shadow: 0 1px 0 0 $form-white-input-focus-border-color;
border-top: 1px solid transparent;
}
&:focus ~ .form-notch .form-notch-leading {
border-color: $form-white-input-focus-border-color;
box-shadow: -1px 0 0 0 $form-white-input-focus-border-color,
0 1px 0 0 $form-white-input-focus-border-color,
0 -1px 0 0 $form-white-input-focus-border-color;
}
&:focus ~ .form-notch .form-notch-trailing {
border-color: $form-white-input-focus-border-color;
box-shadow: 1px 0 0 0 $form-white-input-focus-border-color,
0 -1px 0 0 $form-white-input-focus-border-color,
0 1px 0 0 $form-white-input-focus-border-color;
}
&::placeholder {
color: $form-white-placeholder-color;
}
&:disabled,
&.disabled,
&[readonly] {
background-color: $form-white-disabled-bgc;
}
}
}
}
================================================
FILE: src/scss/free/forms/_form-file.scss
================================================
.form-control {
&[type='file'] {
border-color: var(--#{$prefix}form-control-border-color);
&::-webkit-file-upload-button {
background-color: transparent;
}
&:disabled {
background-color: var(--#{$prefix}form-control-disabled-bg);
color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
&::file-selector-button {
color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
}
}
}
&:hover {
&:not(:disabled):not([readonly])::-webkit-file-upload-button {
background-color: transparent;
}
}
}
================================================
FILE: src/scss/free/forms/_form-range.scss
================================================
// 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;
box-shadow: none;
background-color: var(--#{$prefix}secondary-bg);
}
&::-moz-range-thumb {
box-shadow: none;
appearance: none;
}
&::-moz-range-track {
box-shadow: none;
}
}
================================================
FILE: src/scss/free/forms/_form-select.scss
================================================
// Select
.select-input {
&.form-control {
&[readonly]:not([disabled]) {
background-color: transparent;
}
}
}
.form-select {
transition: $form-select-transition;
}
.form-select:focus {
border-color: $form-select-focus-border-color;
outline: 0;
box-shadow: $form-select-focus-border-box-shadow;
}
================================================
FILE: src/scss/free/forms/_input-group.scss
================================================
//
// Base styles
//
.input-group {
flex-wrap: nowrap;
> .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;
> .form-check-input[type='checkbox'] {
margin-left: 1px;
margin-right: 1px;
}
> .form-check-input[type='radio'] {
margin-right: 0;
}
}
.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),
.select-wrapper:not(:first-child),
.form-outline:not(:first-child) .form-notch-leading,
.select-wrapper:not(:first-child) .form-notch-leading {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.form-outline:not(:last-child),
.select-wrapper:not(:last-child),
.form-outline:not(:last-child) .form-notch-trailing,
.select-wrapper: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;
}
.input-group > .btn[class*='btn-outline-'] {
padding-top: 0.47rem;
}
.input-group > .btn {
padding-top: 0.59rem;
}
.input-group {
&.input-group-lg {
.input-group-text {
height: $input-group-lg-height;
}
}
}
.input-group {
.input-group-text {
height: $input-group-height;
}
.btn {
line-height: 1;
}
}
.input-group {
&.input-group-sm {
.input-group-text {
height: $input-group-sm-height;
}
}
}
INPUT,
SELECT,
TEXTAREA {
&:-webkit-autofill {
animation-name: onautofillstart;
-webkit-background-clip: text;
box-shadow: inset 0 0 20px 20px var(--#{$prefix}body-bg);
-webkit-box-shadow: 0 0 20px 20px var(--#{$prefix}body-bg) inset !important;
&:hover,
&:focus,
&:active {
animation-name: onautofillstart;
-webkit-background-clip: text;
box-shadow: inset 0 0 20px 20px var(--#{$prefix}body-bg);
-webkit-box-shadow: 0 0 20px 20px var(--#{$prefix}body-bg) inset !important;
}
}
&:not(:-webkit-autofill) {
animation-name: onautofillcancel;
}
}
@keyframes onautofillstart {
from {
}
}
@keyframes onautofillcancel {
from {
}
}
================================================
FILE: src/scss/free/forms/_validation.scss
================================================
//
// 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;
}
&:focus ~ .form-notch .form-notch-middle,
&.active ~ .form-notch .form-notch-middle {
border-top: 1px solid transparent;
}
&:focus ~ .form-notch .form-notch-middle {
box-shadow: 0 1px 0 0 $color;
}
&:focus ~ .form-notch .form-notch-leading {
border-color: $color;
box-shadow: -1px 0 0 0 $color, 0 1px 0 0 $color, 0 -1px 0 0 $color;
}
&:focus ~ .form-notch .form-notch-trailing {
border-color: $color;
box-shadow: 1px 0 0 0 $color, 0 -1px 0 0 $color, 0 1px 0 0 $color;
}
&.select-input.focused {
& ~ .form-notch .form-notch-leading {
box-shadow: -1px 0 0 0 $color, 0 1px 0 0 $color, 0 -1px 0 0 $color;
}
& ~ .form-notch .form-notch-middle {
box-shadow: 0 1px 0 0 $color;
border-top: 1px solid transparent;
}
& ~ .form-notch .form-notch-trailing {
box-shadow: 1px 0 0 0 $color, 0 -1px 0 0 $color, 0 1px 0 0 $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;
}
}
.form-switch {
.form-check-input {
@include form-validation-state-selector($state) {
&:focus {
&:before {
box-shadow: $form-switch-form-check-input-focus-before-box-shadow;
}
}
&:checked {
&[type='checkbox'] {
&:after {
background-color: $color;
box-shadow: $form-switch-form-check-input-checked-checkbox-after-box-shadow;
}
}
&:focus {
&:before {
box-shadow: 3px -1px 0px 13px $color;
}
}
}
}
}
}
}
.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...);
}
================================================
FILE: src/scss/free/mixins/_buttons.scss
================================================
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
// scss-docs-start btn-variant-mixin
@mixin button-variant(
$background,
$border,
$color: color-contrast($background),
$shadow: $btn-contextual-box-shadow
if(
$color == $color-contrast-light,
shade-color($background, $btn-hover-bg-shade-amount),
tint-color($background, $btn-hover-bg-tint-amount)
),
$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,
$focus-background:
if(
$color == $color-contrast-light,
shade-color($background, $btn-focus-bg-shade-amount),
tint-color($background, $btn-focus-bg-tint-amount)
),
$focus-color: $color,
$active-border:
if(
$color == $color-contrast-light,
shade-color($border, $btn-active-border-shade-amount),
tint-color($border, $btn-active-border-tint-amount)
),
$active-background:
if(
$color == $color-contrast-light,
shade-color($background, $btn-active-bg-shade-amount),
tint-color($background, $btn-active-bg-tint-amount)
),
$active-color: $color
) {
--#{$prefix}btn-bg: #{$background};
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-box-shadow: #{$shadow};
--#{$prefix}btn-hover-bg: #{$hover-background};
--#{$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-focus-bg: #{$focus-background};
--#{$prefix}btn-focus-color: #{$focus-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-color: #{$active-color};
}
// scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin
@mixin button-outline-variant(
$color,
$hover-color,
$focus-color,
$active-color,
$hover-background: tint-color($color, $btn-outline-hover-bg-tint-amount),
$focus-background: tint-color($color, $btn-outline-focus-bg-tint-amount),
$active-background: tint-color($color, $btn-outline-active-bg-tint-amount)
) {
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-hover-bg: #{$hover-background};
--#{$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-focus-bg: #{$focus-background};
--#{$prefix}btn-focus-color: #{$focus-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-color: #{$active-color};
}
// scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin
@mixin button-size($padding-top, $padding-bottom, $padding-x, $font-size, $line-height) {
--#{$prefix}btn-padding-top: #{$padding-top};
--#{$prefix}btn-padding-bottom: #{$padding-bottom};
--#{$prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-line-height: #{$line-height};
}
// scss-docs-end btn-size-mixin
// Button size variant outline
@mixin button-outline-size($padding-top, $padding-bottom, $padding-x, $font-size, $line-height) {
--#{$prefix}btn-padding-top: #{$padding-top};
--#{$prefix}btn-padding-bottom: #{$padding-bottom};
--#{$prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-line-height: #{$line-height};
}
================================================
FILE: src/scss/free/mixins/_color-mode.scss
================================================
// scss-docs-start color-mode-mixin
@mixin color-mode($mode: light, $root: false) {
@if $color-mode-type == 'media-query' {
@if $root == true {
@media (prefers-color-scheme: $mode) {
:root {
@content;
}
}
} @else {
@media (prefers-color-scheme: $mode) {
@content;
}
}
} @else {
[data-mdb-theme='#{$mode}'] {
@content;
}
}
}
// scss-docs-end color-mode-mixin
================================================
FILE: src/scss/free/mixins/_ripple.scss
================================================
@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);
}
================================================
FILE: src/scss/free/mixins/_table-variants.scss
================================================
// Deprecated
// scss-docs-start table-variant
// @mixin table-variant-mdb($state, $background) {
// .table-#{$state} {
// background-color: $background;
// }
// }
// scss-docs-end table-variant
================================================
FILE: src/scss/mdb.free.scss
================================================
// CORE FUNCTIONS
@import './bootstrap-rtl-fix/functions';
@import './free/functions';
// CORE VARIABLES
@import './custom/variables';
@import './free/variables';
@import './free/variables-dark';
@import './bootstrap-rtl-fix/variables';
@import './bootstrap-rtl-fix/variables-dark';
@import './bootstrap-rtl-fix/maps';
// 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/accordion';
@import './bootstrap-rtl-fix/breadcrumb';
@import './bootstrap-rtl-fix/pagination';
@import './bootstrap-rtl-fix/badge';
@import './bootstrap-rtl-fix/alert';
@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/offcanvas';
@import './bootstrap-rtl-fix/placeholders';
// Helpers
@import './bootstrap-rtl-fix/helpers';
// Utilities
@import './free/utilities';
@import './bootstrap-rtl-fix/utilities/api';
// MDB CORE
@import './free/mixins';
@import './free/utilities';
// 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';
