`)
.dropup,
-.dropend,
+.dropright,
.dropdown,
-.dropstart {
+.dropleft {
position: relative;
}
@@ -21,7 +21,7 @@
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
min-width: $dropdown-min-width;
- padding: $dropdown-padding-y $dropdown-padding-x;
+ padding: $dropdown-padding-y 0;
margin: $dropdown-spacer 0 0; // override default ul
@include font-size($dropdown-font-size);
color: $dropdown-color;
@@ -32,31 +32,21 @@
border: $dropdown-border-width solid $dropdown-border-color;
@include border-radius($dropdown-border-radius);
@include box-shadow($dropdown-box-shadow);
-
- // Reset positioning when positioned with Popper
- &[style] {
- right: auto !important; // stylelint-disable-line declaration-no-important
- }
}
// scss-docs-start responsive-breakpoints
-// We deliberately hardcode the `bs-` prefix because we check
-// this custom property in JS to determine Popper's positioning
-
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
- .dropdown-menu#{$infix}-start {
- --bs-position: start;
- right: auto #{'/* rtl:ignore */'};
- left: 0 #{'/* rtl:ignore */'};
+ .dropdown-menu#{$infix}-left {
+ right: auto;
+ left: 0;
}
- .dropdown-menu#{$infix}-end {
- --bs-position: end;
- right: 0 #{'/* rtl:ignore */'};
- left: auto #{'/* rtl:ignore */'};
+ .dropdown-menu#{$infix}-right {
+ right: 0;
+ left: auto;
}
}
}
@@ -77,7 +67,7 @@
}
}
-.dropend {
+.dropright {
.dropdown-menu {
top: 0;
right: auto;
@@ -87,14 +77,14 @@
}
.dropdown-toggle {
- @include caret(end);
+ @include caret(right);
&::after {
vertical-align: 0;
}
}
}
-.dropstart {
+.dropleft {
.dropdown-menu {
top: 0;
right: 100%;
@@ -104,13 +94,25 @@
}
.dropdown-toggle {
- @include caret(start);
+ @include caret(left);
&::before {
vertical-align: 0;
}
}
}
+// When enabled Popper.js, reset basic dropdown position
+// stylelint-disable-next-line no-duplicate-selectors
+.dropdown-menu {
+ &[x-placement^="top"],
+ &[x-placement^="right"],
+ &[x-placement^="bottom"],
+ &[x-placement^="left"] {
+ right: auto;
+ bottom: auto;
+ }
+}
+
// Dividers (basically an `
`) within the dropdown
.dropdown-divider {
height: 0;
@@ -191,44 +193,3 @@
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
color: $dropdown-link-color;
}
-
-// Dark dropdowns
-.dropdown-menu-dark {
- color: $dropdown-dark-color;
- background-color: $dropdown-dark-bg;
- border-color: $dropdown-dark-border-color;
- @include box-shadow($dropdown-dark-box-shadow);
-
- .dropdown-item {
- color: $dropdown-dark-link-color;
-
- &:hover,
- &:focus {
- color: $dropdown-dark-link-hover-color;
- @include gradient-bg($dropdown-dark-link-hover-bg);
- }
-
- &.active,
- &:active {
- color: $dropdown-dark-link-active-color;
- @include gradient-bg($dropdown-dark-link-active-bg);
- }
-
- &.disabled,
- &:disabled {
- color: $dropdown-dark-link-disabled-color;
- }
- }
-
- .dropdown-divider {
- border-color: $dropdown-dark-divider-bg;
- }
-
- .dropdown-item-text {
- color: $dropdown-dark-link-color;
- }
-
- .dropdown-header {
- color: $dropdown-dark-header-color;
- }
-}
diff --git a/src/scss/bootstrap/_forms.scss b/src/scss/bootstrap/_forms.scss
index 01c560b7..39ba90d6 100644
--- a/src/scss/bootstrap/_forms.scss
+++ b/src/scss/bootstrap/_forms.scss
@@ -1,9 +1,9 @@
-@import 'forms/labels';
-@import 'forms/form-text';
-@import 'forms/form-control';
-@import 'forms/form-select';
-@import 'forms/form-check';
-@import 'forms/form-range';
-@import 'forms/floating-labels';
-@import 'forms/input-group';
-@import 'forms/validation';
+@import "forms/labels";
+@import "forms/form-text";
+@import "forms/form-control";
+@import "forms/form-select";
+@import "forms/form-check";
+@import "forms/form-file";
+@import "forms/form-range";
+@import "forms/input-group";
+@import "forms/validation";
diff --git a/src/scss/bootstrap/_functions.scss b/src/scss/bootstrap/_functions.scss
index 6db94644..24c67deb 100644
--- a/src/scss/bootstrap/_functions.scss
+++ b/src/scss/bootstrap/_functions.scss
@@ -80,9 +80,6 @@
}
// See https://codepen.io/kevinweber/pen/dXWoRw
-//
-// Requires the use of quotes around data URIs.
-
@function escape-svg($string) {
@if str-index($string, 'data:image/svg+xml') {
@each $char, $encoded in $escaped-characters {
@@ -143,7 +140,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
}
}
- @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+ @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}…";
@return $max-ratio-color;
}
@@ -185,23 +182,24 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
}
-// scss-docs-start color-functions
-// Tint a color: mix a color with white
-@function tint-color($color, $weight) {
- @return mix(white, $color, $weight);
+// Request a color level
+// scss-docs-start color-level
+@function color-level($color: $primary, $level: 0) {
+ $color-base: if($level > 0, $black, $white);
+ $level: abs($level);
+
+ @return mix($color-base, $color, $level * $theme-color-interval);
+}
+// scss-docs-end color-level
+
+@function tint-color($color, $level) {
+ @return mix(white, $color, $level * $theme-color-interval);
}
-// Shade a color: mix a color with black
-@function shade-color($color, $weight) {
- @return mix(black, $color, $weight);
+@function shade-color($color, $level) {
+ @return mix(black, $color, $level * $theme-color-interval);
}
-// Shade the color if the weight is positive, else tint it
-@function shift-color($color, $weight) {
- @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
-}
-// scss-docs-end color-functions
-
// Return valid calc
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
diff --git a/src/scss/bootstrap/_helpers.scss b/src/scss/bootstrap/_helpers.scss
index 646bcbbf..c5e14ac6 100644
--- a/src/scss/bootstrap/_helpers.scss
+++ b/src/scss/bootstrap/_helpers.scss
@@ -1,7 +1,7 @@
@import 'helpers/clearfix';
@import 'helpers/colored-links';
-@import 'helpers/ratio';
+@import 'helpers/embed';
@import 'helpers/position';
-@import 'helpers/visually-hidden';
+@import 'helpers/screenreaders';
@import 'helpers/stretched-link';
@import 'helpers/text-truncation';
diff --git a/src/scss/bootstrap/_list-group.scss b/src/scss/bootstrap/_list-group.scss
index 0b19bc4f..9fb11bf6 100644
--- a/src/scss/bootstrap/_list-group.scss
+++ b/src/scss/bootstrap/_list-group.scss
@@ -12,6 +12,7 @@
@include border-radius($list-group-border-radius);
}
+
// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive
@@ -37,6 +38,7 @@
}
}
+
// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.
@@ -83,6 +85,7 @@
}
}
+
// Horizontal
//
// Change the layout of list group items from vertical (default) to horizontal.
@@ -96,20 +99,20 @@
> .list-group-item {
&:first-child {
- @include border-bottom-start-radius($list-group-border-radius);
- @include border-top-end-radius(0);
+ @include border-bottom-left-radius($list-group-border-radius);
+ @include border-top-right-radius(0);
}
&:last-child {
- @include border-top-end-radius($list-group-border-radius);
- @include border-bottom-start-radius(0);
+ @include border-top-right-radius($list-group-border-radius);
+ @include border-bottom-left-radius(0);
}
&.active {
margin-top: 0;
}
- + .list-group-item {
+ & + .list-group-item {
border-top-width: $list-group-border-width;
border-left-width: 0;
@@ -123,6 +126,7 @@
}
}
+
// Flush list items
//
// Remove borders and border-radius to keep list group items edge-to-edge. Most
@@ -140,19 +144,14 @@
}
}
+
// scss-docs-start list-group-modifiers
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
-@each $state, $value in $theme-colors {
- $background: shift-color($value, $list-group-item-bg-scale);
- $color: shift-color($value, $list-group-item-color-scale);
- @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
- $color: mix($value, color-contrast($background), abs($alert-color-scale));
- }
-
- @include list-group-item-variant($state, $background, $color);
+@each $color, $value in $theme-colors {
+ @include list-group-item-variant($color, color-level($value, $list-group-item-bg-level), color-level($value, $list-group-item-color-level));
}
// scss-docs-end list-group-modifiers
diff --git a/src/scss/bootstrap/_mixins.scss b/src/scss/bootstrap/_mixins.scss
index 97c2cb7b..e27e5f35 100644
--- a/src/scss/bootstrap/_mixins.scss
+++ b/src/scss/bootstrap/_mixins.scss
@@ -12,7 +12,7 @@
@import 'mixins/breakpoints';
@import 'mixins/image';
@import 'mixins/resize';
-@import 'mixins/visually-hidden';
+@import 'mixins/screen-reader';
@import 'mixins/reset-text';
@import 'mixins/text-truncate';
diff --git a/src/scss/bootstrap/_modal.scss b/src/scss/bootstrap/_modal.scss
index 88fc6acb..81753034 100644
--- a/src/scss/bootstrap/_modal.scss
+++ b/src/scss/bootstrap/_modal.scss
@@ -55,10 +55,9 @@
}
.modal-dialog-scrollable {
- height: subtract(100%, $modal-dialog-margin * 2);
+ max-height: subtract(100%, $modal-dialog-margin * 2);
.modal-content {
- max-height: 100%;
overflow: hidden;
}
@@ -115,16 +114,16 @@
.modal-header {
display: flex;
flex-shrink: 0;
- align-items: center;
+ align-items: flex-start; // so the close btn always stays on the upper right corner
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color;
@include border-top-radius($modal-content-inner-border-radius);
- .btn-close {
- padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
- margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2)
- ($modal-header-padding-y / -2) auto;
+ .close {
+ padding: $modal-header-padding;
+ // auto on the left force icon to the right even when there is no .modal-title
+ margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
}
}
@@ -181,7 +180,7 @@
}
.modal-dialog-scrollable {
- height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
+ max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
}
.modal-dialog-centered {
diff --git a/src/scss/bootstrap/_nav.scss b/src/scss/bootstrap/_nav.scss
index b14c9864..5bbb8a5b 100644
--- a/src/scss/bootstrap/_nav.scss
+++ b/src/scss/bootstrap/_nav.scss
@@ -14,15 +14,11 @@
.nav-link {
display: block;
padding: $nav-link-padding-y $nav-link-padding-x;
- @include font-size($nav-link-font-size);
- font-weight: $nav-link-font-weight;
- color: $nav-link-color;
text-decoration: if($link-decoration == none, null, none);
@include transition($nav-link-transition);
&:hover,
&:focus {
- color: $nav-link-hover-color;
text-decoration: if($link-hover-decoration == underline, none, null);
}
diff --git a/src/scss/bootstrap/_navbar.scss b/src/scss/bootstrap/_navbar.scss
index bd3c9a7e..4d3785a0 100644
--- a/src/scss/bootstrap/_navbar.scss
+++ b/src/scss/bootstrap/_navbar.scss
@@ -54,7 +54,7 @@
.navbar-brand {
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
- margin-right: $navbar-brand-margin-end;
+ margin-right: $navbar-brand-margin-right;
@include font-size($navbar-brand-font-size);
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap;
@@ -150,7 +150,6 @@
$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;
diff --git a/src/scss/bootstrap/_pagination.scss b/src/scss/bootstrap/_pagination.scss
index 95c729bb..46a1f66f 100644
--- a/src/scss/bootstrap/_pagination.scss
+++ b/src/scss/bootstrap/_pagination.scss
@@ -10,7 +10,6 @@
text-decoration: if($link-decoration == none, null, none);
background-color: $pagination-bg;
border: $pagination-border-width solid $pagination-border-color;
- @include transition($pagination-transition);
&:hover {
z-index: 2;
@@ -22,8 +21,6 @@
&:focus {
z-index: 3;
- color: $pagination-focus-color;
- background-color: $pagination-focus-bg;
outline: $pagination-focus-outline;
box-shadow: $pagination-focus-box-shadow;
}
@@ -31,7 +28,7 @@
.page-item {
&:not(:first-child) .page-link {
- margin-left: $pagination-margin-start;
+ margin-left: $pagination-margin-left;
}
&.active .page-link {
diff --git a/src/scss/bootstrap/_popover.scss b/src/scss/bootstrap/_popover.scss
index a8083149..6ebb2c3d 100644
--- a/src/scss/bootstrap/_popover.scss
+++ b/src/scss/bootstrap/_popover.scss
@@ -1,7 +1,7 @@
.popover {
position: absolute;
top: 0;
- left: 0 #{'/* rtl:ignore */'};
+ left: 0;
z-index: $zindex-popover;
display: block;
max-width: $popover-max-width;
@@ -28,7 +28,7 @@
&::after {
position: absolute;
display: block;
- content: '';
+ content: "";
border-color: transparent;
border-style: solid;
}
@@ -36,8 +36,7 @@
}
.bs-popover-top {
- // Overrule margin set by popper.js
- margin-bottom: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
+ margin-bottom: $popover-arrow-height;
> .popover-arrow {
bottom: subtract(-$popover-arrow-height, $popover-border-width);
@@ -56,9 +55,8 @@
}
}
-.bs-popover-end {
- // Overrule margin set by popper.js
- margin-left: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
+.bs-popover-right {
+ margin-left: $popover-arrow-height;
> .popover-arrow {
left: subtract(-$popover-arrow-height, $popover-border-width);
@@ -81,8 +79,7 @@
}
.bs-popover-bottom {
- // Overrule margin set by popper.js
- margin-top: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
+ margin-top: $popover-arrow-height;
> .popover-arrow {
top: subtract(-$popover-arrow-height, $popover-border-width);
@@ -108,14 +105,13 @@
display: block;
width: $popover-arrow-width;
margin-left: -$popover-arrow-width / 2;
- content: '';
+ content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
}
-.bs-popover-start {
- // Overrule margin set by popper.js
- margin-right: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
+.bs-popover-left {
+ margin-right: $popover-arrow-height;
> .popover-arrow {
right: subtract(-$popover-arrow-height, $popover-border-width);
@@ -138,20 +134,21 @@
}
.bs-popover-auto {
- &[data-popper-placement^='top'] {
+ &[x-placement^="top"] {
@extend .bs-popover-top;
}
- &[data-popper-placement^='right'] {
- @extend .bs-popover-end;
+ &[x-placement^="right"] {
+ @extend .bs-popover-right;
}
- &[data-popper-placement^='bottom'] {
+ &[x-placement^="bottom"] {
@extend .bs-popover-bottom;
}
- &[data-popper-placement^='left'] {
- @extend .bs-popover-start;
+ &[x-placement^="left"] {
+ @extend .bs-popover-left;
}
}
+
// Offset the popover to account for the popover arrow
.popover-header {
padding: $popover-header-padding-y $popover-header-padding-x;
@@ -159,7 +156,7 @@
@include font-size($font-size-base);
color: $popover-header-color;
background-color: $popover-header-bg;
- border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
+ border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
@include border-top-radius($popover-inner-border-radius);
&:empty {
diff --git a/src/scss/bootstrap/_progress.scss b/src/scss/bootstrap/_progress.scss
index ffc9ba89..a3fbecf2 100644
--- a/src/scss/bootstrap/_progress.scss
+++ b/src/scss/bootstrap/_progress.scss
@@ -1,9 +1,7 @@
// Disable animation if transitions are disabled
@if $enable-transitions {
@keyframes progress-bar-stripes {
- 0% {
- background-position-x: $progress-height;
- }
+ 0% { background-position-x: $progress-height; }
}
}
@@ -36,7 +34,7 @@
@if $enable-transitions {
.progress-bar-animated {
- animation: $progress-bar-animation-timing progress-bar-stripes;
+ animation: progress-bar-stripes $progress-bar-animation-timing;
@if $enable-reduced-motion {
@media (prefers-reduced-motion: reduce) {
diff --git a/src/scss/bootstrap/_reboot.scss b/src/scss/bootstrap/_reboot.scss
index a5679a40..5a2cf647 100644
--- a/src/scss/bootstrap/_reboot.scss
+++ b/src/scss/bootstrap/_reboot.scss
@@ -1,4 +1,4 @@
-// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
// Reboot
//
@@ -24,12 +24,6 @@
:root {
font-size: $font-size-root;
-
- @if $enable-smooth-scroll {
- @media (prefers-reduced-motion: no-preference) {
- scroll-behavior: smooth;
- }
- }
}
// Body
@@ -69,6 +63,7 @@ body {
//
// 1. Reset Firefox's gray color
// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
+// See https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_size
hr {
margin: $hr-margin-y 0;
@@ -140,13 +135,13 @@ p {
// Abbreviations
//
-// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
+// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
// 3. Add explicit cursor to indicate changed behavior.
// 4. Prevent the text-decoration to be skipped.
abbr[title],
-abbr[data-bs-original-title] {
+abbr[data-original-title] {
// 1
text-decoration: underline; // 2
text-decoration: underline dotted; // 2
@@ -277,13 +272,13 @@ kbd,
samp {
font-family: $font-family-code;
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
- direction: ltr #{'/* rtl:ignore */'};
- unicode-bidi: bidi-override;
}
// 1. Remove browser default top margin
// 2. Reset browser default of `1em` to use `rem`s
// 3. Don't allow content to break outside
+// 4. Disable auto-hiding scrollbar in legacy Edge to avoid overlap,
+// making it impossible to interact with the content
pre {
display: block;
@@ -292,6 +287,7 @@ pre {
overflow: auto; // 3
@include font-size($code-font-size);
color: $pre-color;
+ -ms-overflow-style: scrollbar; // 4
// Account for some code outputs that place code tags in pre tags
code {
@@ -357,14 +353,12 @@ caption {
text-align: left;
}
-// 1. Removes font-weight bold by inheriting
-// 2. Matches default `
` alignment by inheriting `text-align`.
-// 3. Fix alignment for Safari
+// 1. Matches default ` ` alignment by inheriting `text-align`.
+// 2. Fix alignment for Safari
th {
- font-weight: $table-th-font-weight; // 1
- text-align: inherit; // 2
- text-align: -webkit-match-parent; // 3
+ text-align: inherit; // 1
+ text-align: -webkit-match-parent; // 2
}
thead,
@@ -390,7 +384,7 @@ label {
// See https://github.com/twbs/bootstrap/issues/24093
button {
- // stylelint-disable-next-line property-disallowed-list
+ // stylelint-disable-next-line property-blacklist
border-radius: 0;
}
@@ -399,8 +393,8 @@ button {
// Credit https://github.com/suitcss/base/
button:focus {
- outline: dotted 1px;
- outline: -webkit-focus-ring-color auto 5px;
+ outline: 1px dotted;
+ outline: 5px auto -webkit-focus-ring-color;
}
// 1. Remove the margin in Firefox and Safari
@@ -416,6 +410,13 @@ textarea {
line-height: inherit;
}
+// Show the overflow in Edge
+
+button,
+input {
+ overflow: visible;
+}
+
// Remove the inheritance of text transform in Firefox
button,
@@ -491,7 +492,8 @@ fieldset {
// 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.
+// 2. Correct the text wrapping in Edge.
+// 3. Fix wrapping bug.
// See https://github.com/twbs/bootstrap/issues/29712
legend {
@@ -502,9 +504,10 @@ legend {
@include font-size($legend-font-size);
font-weight: $legend-font-weight;
line-height: inherit;
+ white-space: normal; // 2
+ * {
- clear: left; // 2
+ clear: left; // 3
}
}
@@ -536,20 +539,6 @@ legend {
-webkit-appearance: textfield; // 2
}
-// 1. A few input types should stay LTR
-// See https://rtlstyling.com/posts/rtl-styling#form-inputs
-// 2. RTL only output
-// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
-
-/* rtl:raw:
-[type="tel"],
-[type="url"],
-[type="email"],
-[type="number"] {
- direction: ltr;
-}
-*/
-
// Remove the inner padding in Chrome and Safari on macOS.
::-webkit-search-decoration {
@@ -562,14 +551,7 @@ legend {
padding: 0;
}
-// Inherit font family and line height for file input buttons
-
-// stylelint-disable-next-line selector-pseudo-element-no-unknown
-::file-selector-button {
- font: inherit;
-}
-
-// 1. Change font properties to `inherit`
+// 1. Change font properties to `inherit` in Safari.
// 2. Correct the inability to style clickable types in iOS and Safari.
::-webkit-file-upload-button {
diff --git a/src/scss/bootstrap/_root.scss b/src/scss/bootstrap/_root.scss
index 768d6343..44eff170 100644
--- a/src/scss/bootstrap/_root.scss
+++ b/src/scss/bootstrap/_root.scss
@@ -1,16 +1,16 @@
:root {
// Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors {
- --#{$variable-prefix}#{$color}: #{$value};
+ --bs-#{$color}: #{$value};
}
@each $color, $value in $theme-colors {
- --#{$variable-prefix}#{$color}: #{$value};
+ --bs-#{$color}: #{$value};
}
// Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
- --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
- --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
- --#{$variable-prefix}gradient: #{$gradient};
+ --bs-font-sans-serif: #{inspect($font-family-sans-serif)};
+ --bs-font-monospace: #{inspect($font-family-monospace)};
+ --bs-gradient: #{$gradient};
}
diff --git a/src/scss/bootstrap/_spinners.scss b/src/scss/bootstrap/_spinners.scss
index 638272f2..e8e4c044 100644
--- a/src/scss/bootstrap/_spinners.scss
+++ b/src/scss/bootstrap/_spinners.scss
@@ -3,9 +3,7 @@
//
@keyframes spinner-border {
- to {
- transform: rotate(360deg) #{'/* rtl:ignore */'};
- }
+ to { transform: rotate(360deg); }
}
.spinner-border {
@@ -15,9 +13,9 @@
vertical-align: text-bottom;
border: $spinner-border-width solid currentColor;
border-right-color: transparent;
- // stylelint-disable-next-line property-disallowed-list
+ // stylelint-disable-next-line property-blacklist
border-radius: 50%;
- animation: $spinner-animation-speed linear infinite spinner-border;
+ animation: spinner-border $spinner-animation-speed linear infinite;
}
.spinner-border-sm {
@@ -46,22 +44,13 @@
height: $spinner-height;
vertical-align: text-bottom;
background-color: currentColor;
- // stylelint-disable-next-line property-disallowed-list
+ // stylelint-disable-next-line property-blacklist
border-radius: 50%;
opacity: 0;
- animation: $spinner-animation-speed linear infinite spinner-grow;
+ animation: spinner-grow $spinner-animation-speed linear infinite;
}
.spinner-grow-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
}
-
-@if $enable-reduced-motion {
- @media (prefers-reduced-motion: reduce) {
- .spinner-border,
- .spinner-grow {
- animation-duration: $spinner-animation-speed * 2;
- }
- }
-}
diff --git a/src/scss/bootstrap/_tables.scss b/src/scss/bootstrap/_tables.scss
index 68eabe11..09d9248d 100644
--- a/src/scss/bootstrap/_tables.scss
+++ b/src/scss/bootstrap/_tables.scss
@@ -3,13 +3,14 @@
//
.table {
- --#{$variable-prefix}table-bg: #{$table-bg};
- --#{$variable-prefix}table-striped-color: #{$table-striped-color};
- --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
- --#{$variable-prefix}table-active-color: #{$table-active-color};
- --#{$variable-prefix}table-active-bg: #{$table-active-bg};
- --#{$variable-prefix}table-hover-color: #{$table-hover-color};
- --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
+ --bs-table-bg: #{$table-bg};
+ --bs-table-accent-bg: transparent;
+ --bs-table-striped-color: #{$table-striped-color};
+ --bs-table-striped-bg: #{$table-striped-bg};
+ --bs-table-active-color: #{$table-active-color};
+ --bs-table-active-bg: #{$table-active-bg};
+ --bs-table-hover-color: #{$table-hover-color};
+ --bs-table-hover-bg: #{$table-hover-bg};
width: 100%;
margin-bottom: $spacer;
@@ -24,11 +25,8 @@
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y $table-cell-padding-x;
- background-color: var(--#{$variable-prefix}table-bg);
- background-image: linear-gradient(
- var(--#{$variable-prefix}table-accent-bg),
- var(--#{$variable-prefix}table-accent-bg)
- );
+ background-color: var(--bs-table-bg);
+ background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
border-bottom-width: $table-border-width;
}
@@ -42,7 +40,7 @@
// Highlight border color between thead, tbody and tfoot.
> :not(:last-child) > :last-child > * {
- border-bottom-color: $table-group-separator-color;
+ border-bottom-color: $table-group-seperator-color;
}
}
@@ -98,8 +96,8 @@
.table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) {
- --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
- color: var(--#{$variable-prefix}table-striped-color);
+ --bs-table-accent-bg: var(--bs-table-striped-bg);
+ color: var(--bs-table-striped-color);
}
}
@@ -108,8 +106,8 @@
// The `.table-active` class can be added to highlight rows or cells
.table-active {
- --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
- color: var(--#{$variable-prefix}table-active-color);
+ --bs-table-accent-bg: var(--bs-table-active-bg);
+ color: var(--bs-table-active-color);
}
// Hover effect
@@ -118,8 +116,8 @@
.table-hover {
> tbody > tr:hover {
- --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
- color: var(--#{$variable-prefix}table-hover-color);
+ --bs-table-accent-bg: var(--bs-table-hover-bg);
+ color: var(--bs-table-hover-color);
}
}
diff --git a/src/scss/bootstrap/_toasts.scss b/src/scss/bootstrap/_toasts.scss
index 7a1cf735..6aa5352a 100644
--- a/src/scss/bootstrap/_toasts.scss
+++ b/src/scss/bootstrap/_toasts.scss
@@ -1,17 +1,27 @@
.toast {
- width: $toast-max-width;
- max-width: 100%;
+ max-width: $toast-max-width;
+ overflow: hidden; // cheap rounded corners on nested items
@include font-size($toast-font-size);
color: $toast-color;
- pointer-events: auto;
background-color: $toast-background-color;
background-clip: padding-box;
border: $toast-border-width solid $toast-border-color;
box-shadow: $toast-box-shadow;
+ backdrop-filter: blur(10px);
+ opacity: 0;
@include border-radius($toast-border-radius);
- &:not(.showing):not(.show) {
- opacity: 0;
+ &:not(:last-child) {
+ margin-bottom: $toast-padding-x;
+ }
+
+ &.showing {
+ opacity: 1;
+ }
+
+ &.show {
+ display: block;
+ opacity: 1;
}
&.hide {
@@ -19,16 +29,6 @@
}
}
-.toast-container {
- width: max-content;
- max-width: 100%;
- pointer-events: none;
-
- > :not(:last-child) {
- margin-bottom: $toast-spacing;
- }
-}
-
.toast-header {
display: flex;
align-items: center;
@@ -37,12 +37,6 @@
background-color: $toast-header-background-color;
background-clip: padding-box;
border-bottom: $toast-border-width solid $toast-header-border-color;
- @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
-
- .btn-close {
- margin-right: $toast-padding-x / -2;
- margin-left: $toast-padding-x;
- }
}
.toast-body {
diff --git a/src/scss/bootstrap/_tooltip.scss b/src/scss/bootstrap/_tooltip.scss
index a8fac839..4d405e03 100644
--- a/src/scss/bootstrap/_tooltip.scss
+++ b/src/scss/bootstrap/_tooltip.scss
@@ -12,9 +12,7 @@
word-wrap: break-word;
opacity: 0;
- &.show {
- opacity: $tooltip-opacity;
- }
+ &.show { opacity: $tooltip-opacity; }
.tooltip-arrow {
position: absolute;
@@ -24,7 +22,7 @@
&::before {
position: absolute;
- content: '';
+ content: "";
border-color: transparent;
border-style: solid;
}
@@ -38,14 +36,14 @@
bottom: 0;
&::before {
- top: -1px;
+ top: 0;
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-top-color: $tooltip-arrow-color;
}
}
}
-.bs-tooltip-end {
+.bs-tooltip-right {
padding: 0 $tooltip-arrow-height;
.tooltip-arrow {
@@ -54,7 +52,7 @@
height: $tooltip-arrow-width;
&::before {
- right: -1px;
+ right: 0;
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-right-color: $tooltip-arrow-color;
}
@@ -68,14 +66,14 @@
top: 0;
&::before {
- bottom: -1px;
+ bottom: 0;
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color;
}
}
}
-.bs-tooltip-start {
+.bs-tooltip-left {
padding: 0 $tooltip-arrow-height;
.tooltip-arrow {
@@ -84,7 +82,7 @@
height: $tooltip-arrow-width;
&::before {
- left: -1px;
+ left: 0;
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color;
}
@@ -92,17 +90,17 @@
}
.bs-tooltip-auto {
- &[data-popper-placement^='top'] {
+ &[x-placement^="top"] {
@extend .bs-tooltip-top;
}
- &[data-popper-placement^='right'] {
- @extend .bs-tooltip-end;
+ &[x-placement^="right"] {
+ @extend .bs-tooltip-right;
}
- &[data-popper-placement^='bottom'] {
+ &[x-placement^="bottom"] {
@extend .bs-tooltip-bottom;
}
- &[data-popper-placement^='left'] {
- @extend .bs-tooltip-start;
+ &[x-placement^="left"] {
+ @extend .bs-tooltip-left;
}
}
diff --git a/src/scss/bootstrap/_utilities.scss b/src/scss/bootstrap/_utilities.scss
index 601d60de..51d385e5 100644
--- a/src/scss/bootstrap/_utilities.scss
+++ b/src/scss/bootstrap/_utilities.scss
@@ -12,22 +12,18 @@ $utilities: map-merge(
'float': (
responsive: true,
property: float,
- values: (
- start: left,
- end: right,
- none: none,
- ),
+ values: left right none,
),
'overflow': (
property: overflow,
- values: auto hidden visible scroll,
+ values: auto hidden,
),
'display': (
responsive: true,
print: true,
property: display,
class: d,
- values: inline inline-block block grid table table-row table-cell flex inline-flex none,
+ values: none inline inline-block block table table-row table-cell flex inline-flex,
),
'shadow': (
property: box-shadow,
@@ -43,33 +39,6 @@ $utilities: map-merge(
property: position,
values: static relative absolute fixed sticky,
),
- 'top': (
- property: top,
- values: $position-values,
- ),
- 'bottom': (
- property: bottom,
- values: $position-values,
- ),
- 'start': (
- property: left,
- class: start,
- values: $position-values,
- ),
- 'end': (
- property: right,
- class: end,
- values: $position-values,
- ),
- 'translate-middle': (
- property: transform,
- class: translate-middle,
- values: (
- null: translate(-50%, -50%),
- x: translateX(-50%),
- y: translateY(-50%),
- ),
- ),
'border': (
property: border,
values: (
@@ -84,9 +53,8 @@ $utilities: map-merge(
0: 0,
),
),
- 'border-end': (
+ 'border-right': (
property: border-right,
- class: border-end,
values: (
null: $border-width solid $border-color,
0: 0,
@@ -99,9 +67,8 @@ $utilities: map-merge(
0: 0,
),
),
- 'border-start': (
+ 'border-left': (
property: border-left,
- class: border-start,
values: (
null: $border-width solid $border-color,
0: 0,
@@ -118,11 +85,6 @@ $utilities: map-merge(
)
),
),
- 'border-width': (
- property: border-width,
- class: border,
- values: $border-widths,
- ),
// Sizing utilities
'width':
(
@@ -228,12 +190,6 @@ $utilities: map-merge(
class: flex,
values: wrap nowrap wrap-reverse,
),
- 'gap': (
- responsive: true,
- property: gap,
- class: gap,
- values: $spacers,
- ),
'justify-content': (
responsive: true,
property: justify-content,
@@ -345,10 +301,10 @@ $utilities: map-merge(
)
),
),
- 'margin-end': (
+ 'margin-right': (
responsive: true,
property: margin-right,
- class: me,
+ class: mr,
values:
map-merge(
$spacers,
@@ -369,10 +325,10 @@ $utilities: map-merge(
)
),
),
- 'margin-start': (
+ 'margin-left': (
responsive: true,
property: margin-left,
- class: ms,
+ class: ml,
values:
map-merge(
$spacers,
@@ -407,10 +363,10 @@ $utilities: map-merge(
class: mt,
values: $negative-spacers,
),
- 'negative-margin-end': (
+ 'negative-margin-right': (
responsive: true,
property: margin-right,
- class: me,
+ class: mr,
values: $negative-spacers,
),
'negative-margin-bottom': (
@@ -419,10 +375,10 @@ $utilities: map-merge(
class: mb,
values: $negative-spacers,
),
- 'negative-margin-start': (
+ 'negative-margin-left': (
responsive: true,
property: margin-left,
- class: ms,
+ class: ml,
values: $negative-spacers,
),
// Padding utilities
@@ -451,10 +407,10 @@ $utilities: map-merge(
class: pt,
values: $spacers,
),
- 'padding-end': (
+ 'padding-right': (
responsive: true,
property: padding-right,
- class: pe,
+ class: pr,
values: $spacers,
),
'padding-bottom': (
@@ -463,36 +419,24 @@ $utilities: map-merge(
class: pb,
values: $spacers,
),
- 'padding-start': (
+ 'padding-left': (
responsive: true,
property: padding-left,
- class: ps,
+ class: pl,
values: $spacers,
),
// Text
- 'font-size':
+ 'font-weight':
(
- rfs: true,
- property: font-size,
- class: fs,
- values: $font-sizes,
+ property: font-weight,
+ values: (
+ light: $font-weight-light,
+ lighter: $font-weight-lighter,
+ normal: $font-weight-normal,
+ bold: $font-weight-bold,
+ bolder: $font-weight-bolder,
+ ),
),
- 'font-style': (
- property: font-style,
- class: fst,
- values: italic normal,
- ),
- 'font-weight': (
- property: font-weight,
- class: fw,
- values: (
- light: $font-weight-light,
- lighter: $font-weight-lighter,
- normal: $font-weight-normal,
- bold: $font-weight-bold,
- bolder: $font-weight-bolder,
- ),
- ),
'text-transform': (
property: text-transform,
class: text,
@@ -502,11 +446,7 @@ $utilities: map-merge(
responsive: true,
property: text-align,
class: text,
- values: (
- start: left,
- end: right,
- center: center,
- ),
+ values: left right center,
),
'color': (
property: color,
@@ -551,7 +491,7 @@ $utilities: map-merge(
property: background-image,
class: bg,
values: (
- gradient: var(--#{$variable-prefix}gradient),
+ gradient: var(--bs-gradient),
),
),
'white-space': (
@@ -566,19 +506,23 @@ $utilities: map-merge(
property: text-decoration,
values: none underline line-through,
),
+ 'font-style': (
+ property: font-style,
+ class: font,
+ values: italic normal,
+ ),
'word-wrap': (
property: word-wrap word-break,
class: text,
values: (
break: break-word,
),
- rtl: false,
),
'font-family': (
property: font-family,
class: font,
values: (
- monospace: var(--#{$variable-prefix}font-monospace),
+ monospace: var(--bs-font-monospace),
),
),
'user-select': (
@@ -595,12 +539,11 @@ $utilities: map-merge(
class: rounded,
values: (
null: $border-radius,
- 0: 0,
- 1: $border-radius-sm,
- 2: $border-radius,
- 3: $border-radius-lg,
+ sm: $border-radius-sm,
+ lg: $border-radius-lg,
circle: 50%,
- pill: $border-radius-pill,
+ pill: $rounded-pill,
+ 0: 0,
),
),
'rounded-top': (
@@ -610,9 +553,9 @@ $utilities: map-merge(
null: $border-radius,
),
),
- 'rounded-end': (
+ 'rounded-right': (
property: border-top-right-radius border-bottom-right-radius,
- class: rounded-end,
+ class: rounded-right,
values: (
null: $border-radius,
),
@@ -624,9 +567,9 @@ $utilities: map-merge(
null: $border-radius,
),
),
- 'rounded-start': (
+ 'rounded-left': (
property: border-bottom-left-radius border-top-left-radius,
- class: rounded-start,
+ class: rounded-left,
values: (
null: $border-radius,
),
diff --git a/src/scss/bootstrap/_variables.scss b/src/scss/bootstrap/_variables.scss
index 7a691504..0a702fe9 100644
--- a/src/scss/bootstrap/_variables.scss
+++ b/src/scss/bootstrap/_variables.scss
@@ -38,9 +38,9 @@ $pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
-$green: #198754 !default;
+$green: #28a745 !default;
$teal: #20c997 !default;
-$cyan: #0dcaf0 !default;
+$cyan: #17a2b8 !default;
// scss-docs-start colors-map
$colors: (
@@ -67,7 +67,7 @@ $info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
-$dark: $gray-900 !default;
+$dark: $gray-800 !default;
// scss-docs-start theme-colors-map
$theme-colors: (
@@ -82,114 +82,117 @@ $theme-colors: (
) !default;
// scss-docs-end theme-colors-map
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 8% !default;
+
// 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;
+$min-contrast-ratio: 3 !default;
// Customize the light and dark text colors for use in our color contrast function.
-$color-contrast-dark: $black !default;
+$color-contrast-dark: $gray-900 !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-100: tint-color($blue, 8) !default;
+$blue-200: tint-color($blue, 6) !default;
+$blue-300: tint-color($blue, 4) !default;
+$blue-400: tint-color($blue, 2) !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;
+$blue-600: shade-color($blue, 2) !default;
+$blue-700: shade-color($blue, 4) !default;
+$blue-800: shade-color($blue, 6) !default;
+$blue-900: shade-color($blue, 8) !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-100: tint-color($indigo, 8) !default;
+$indigo-200: tint-color($indigo, 6) !default;
+$indigo-300: tint-color($indigo, 4) !default;
+$indigo-400: tint-color($indigo, 2) !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;
+$indigo-600: shade-color($indigo, 2) !default;
+$indigo-700: shade-color($indigo, 4) !default;
+$indigo-800: shade-color($indigo, 6) !default;
+$indigo-900: shade-color($indigo, 8) !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-100: tint-color($purple, 8) !default;
+$purple-200: tint-color($purple, 6) !default;
+$purple-300: tint-color($purple, 4) !default;
+$purple-400: tint-color($purple, 2) !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;
+$purple-600: shade-color($purple, 2) !default;
+$purple-700: shade-color($purple, 4) !default;
+$purple-800: shade-color($purple, 6) !default;
+$purple-900: shade-color($purple, 8) !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-100: tint-color($pink, 8) !default;
+$pink-200: tint-color($pink, 6) !default;
+$pink-300: tint-color($pink, 4) !default;
+$pink-400: tint-color($pink, 2) !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;
+$pink-600: shade-color($pink, 2) !default;
+$pink-700: shade-color($pink, 4) !default;
+$pink-800: shade-color($pink, 6) !default;
+$pink-900: shade-color($pink, 8) !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-100: tint-color($red, 8) !default;
+$red-200: tint-color($red, 6) !default;
+$red-300: tint-color($red, 4) !default;
+$red-400: tint-color($red, 2) !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;
+$red-600: shade-color($red, 2) !default;
+$red-700: shade-color($red, 4) !default;
+$red-800: shade-color($red, 6) !default;
+$red-900: shade-color($red, 8) !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-100: tint-color($orange, 8) !default;
+$orange-200: tint-color($orange, 6) !default;
+$orange-300: tint-color($orange, 4) !default;
+$orange-400: tint-color($orange, 2) !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;
+$orange-600: shade-color($orange, 2) !default;
+$orange-700: shade-color($orange, 4) !default;
+$orange-800: shade-color($orange, 6) !default;
+$orange-900: shade-color($orange, 8) !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-100: tint-color($yellow, 8) !default;
+$yellow-200: tint-color($yellow, 6) !default;
+$yellow-300: tint-color($yellow, 4) !default;
+$yellow-400: tint-color($yellow, 2) !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;
+$yellow-600: shade-color($yellow, 2) !default;
+$yellow-700: shade-color($yellow, 4) !default;
+$yellow-800: shade-color($yellow, 6) !default;
+$yellow-900: shade-color($yellow, 8) !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-100: tint-color($green, 8) !default;
+$green-200: tint-color($green, 6) !default;
+$green-300: tint-color($green, 4) !default;
+$green-400: tint-color($green, 2) !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;
+$green-600: shade-color($green, 2) !default;
+$green-700: shade-color($green, 4) !default;
+$green-800: shade-color($green, 6) !default;
+$green-900: shade-color($green, 8) !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-100: tint-color($teal, 8) !default;
+$teal-200: tint-color($teal, 6) !default;
+$teal-300: tint-color($teal, 4) !default;
+$teal-400: tint-color($teal, 2) !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;
+$teal-600: shade-color($teal, 2) !default;
+$teal-700: shade-color($teal, 4) !default;
+$teal-800: shade-color($teal, 6) !default;
+$teal-900: shade-color($teal, 8) !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-100: tint-color($cyan, 8) !default;
+$cyan-200: tint-color($cyan, 6) !default;
+$cyan-300: tint-color($cyan, 4) !default;
+$cyan-400: tint-color($cyan, 2) !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;
+$cyan-600: shade-color($cyan, 2) !default;
+$cyan-700: shade-color($cyan, 4) !default;
+$cyan-800: shade-color($cyan, 6) !default;
+$cyan-900: shade-color($cyan, 8) !default;
// fusv-enable
// Characters which are escaped by the escape-svg function
@@ -211,7 +214,6 @@ $enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-reduced-motion: true !default;
-$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
@@ -220,10 +222,6 @@ $enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
-// Prefix for :root CSS variables
-
-$variable-prefix: bs- !default;
-
// Gradient
//
// The gradient which is added to components if `$enable-gradients` is `true`
@@ -248,16 +246,6 @@ $spacers: (
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
-// Position
-//
-// Define the edge positioning anchors of the position utilities.
-
-$position-values: (
- 0: 0,
- 50: 50%,
- 100: 100%,
-) !default;
-
// Body
//
// Settings for the `` element.
@@ -272,9 +260,10 @@ $body-text-align: null !default;
$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-color: darken($link-color, 15%) !default;
$link-hover-decoration: null !default;
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+$emphasized-link-hover-darken-percentage: 15% !default;
$stretched-link-pseudo-element: after !default;
$stretched-link-z-index: 1 !default;
@@ -332,28 +321,20 @@ $gutters: $spacers !default;
// Container padding
-$container-padding-x: $grid-gutter-width / 2 !default;
+$container-padding-x: 1rem !default;
// Components
//
// Define common padding and border radius sizes and more.
$border-width: 1px !default;
-$border-widths: (
- 0: 0,
- 1: 1px,
- 2: 2px,
- 3: 3px,
- 4: 4px,
- 5: 5px,
-) !default;
-
$border-color: $gray-300 !default;
$border-radius: 0.25rem !default;
$border-radius-sm: 0.2rem !default;
$border-radius-lg: 0.3rem !default;
-$border-radius-pill: 50rem !default;
+
+$rounded-pill: 50rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
@@ -371,16 +352,26 @@ $transition-base: all 0.2s ease-in-out !default;
$transition-fade: opacity 0.15s linear !default;
$transition-collapse: height 0.35s ease !default;
-// stylelint-disable function-disallowed-list
-// scss-docs-start aspect-ratios
-$aspect-ratios: (
- '1x1': 100%,
- '4x3': calc(3 / 4 * 100%),
- '16x9': calc(9 / 16 * 100%),
- '21x9': calc(9 / 21 * 100%),
+// scss-docs-start embed-responsive-aspect-ratios
+$embed-responsive-aspect-ratios: (
+ '21by9': (
+ x: 21,
+ y: 9,
+ ),
+ '16by9': (
+ x: 16,
+ y: 9,
+ ),
+ '4by3': (
+ x: 4,
+ y: 3,
+ ),
+ '1by1': (
+ x: 1,
+ y: 1,
+ ),
) !default;
-// scss-docs-end aspect-ratios
-// stylelint-enable function-disallowed-list
+// scss-docs-end embed-responsive-aspect-ratios
// Typography
//
@@ -388,13 +379,13 @@ $aspect-ratios: (
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
- 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
- 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+ 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+ 'Noto Color Emoji' !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace !default;
// stylelint-enable value-keyword-case
-$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
-$font-family-code: var(--#{$variable-prefix}font-monospace) !default;
+$font-family-base: var(--bs-font-sans-serif) !default;
+$font-family-code: var(--bs-font-monospace) !default;
// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
// $font-size-base effects the font size of the body text
@@ -422,17 +413,6 @@ $h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
-// scss-docs-start font-sizes
-$font-sizes: (
- 1: $h1-font-size,
- 2: $h2-font-size,
- 3: $h3-font-size,
- 4: $h4-font-size,
- 5: $h5-font-size,
- 6: $h6-font-size,
-) !default;
-// scss-docs-end font-sizes
-
$headings-margin-bottom: $spacer / 2 !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
@@ -504,8 +484,6 @@ $table-cell-vertical-align: top !default;
$table-color: $body-color !default;
$table-bg: transparent !default;
-$table-th-font-weight: null !default;
-
$table-striped-color: $table-color !default;
$table-striped-bg-factor: 0.05 !default;
$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
@@ -524,19 +502,19 @@ $table-border-color: $border-color !default;
$table-striped-order: odd !default;
-$table-group-separator-color: currentColor !default;
+$table-group-seperator-color: currentColor !default;
$table-caption-color: $text-muted !default;
-$table-bg-scale: -80% !default;
+$table-bg-level: -9 !default;
$table-variants: (
- 'primary': shift-color($primary, $table-bg-scale),
- 'secondary': shift-color($secondary, $table-bg-scale),
- 'success': shift-color($success, $table-bg-scale),
- 'info': shift-color($info, $table-bg-scale),
- 'warning': shift-color($warning, $table-bg-scale),
- 'danger': shift-color($danger, $table-bg-scale),
+ 'primary': color-level($primary, $table-bg-level),
+ 'secondary': color-level($secondary, $table-bg-level),
+ 'success': color-level($success, $table-bg-level),
+ 'info': color-level($info, $table-bg-level),
+ 'warning': color-level($warning, $table-bg-level),
+ 'danger': color-level($danger, $table-bg-level),
'light': $light,
'dark': $dark,
) !default;
@@ -552,7 +530,7 @@ $input-btn-font-family: null !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-line-height: $line-height-base !default;
-$input-btn-focus-width: 0.25rem !default;
+$input-btn-focus-width: 0.2rem !default;
$input-btn-focus-color-opacity: 0.25 !default;
$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
@@ -599,6 +577,8 @@ $btn-link-color: $link-color !default;
$btn-link-hover-color: $link-hover-color !default;
$btn-link-disabled-color: $gray-600 !default;
+$btn-block-spacing-y: 0.5rem !default;
+
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-sm: $border-radius-sm !default;
@@ -640,7 +620,7 @@ $input-bg: $white !default;
$input-disabled-bg: $gray-200 !default;
$input-disabled-border-color: null !default;
-$input-color: $body-color !default;
+$input-color: $gray-700 !default;
$input-border-color: $gray-400 !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default;
@@ -650,7 +630,7 @@ $input-border-radius-sm: $border-radius-sm !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-focus-bg: $input-bg !default;
-$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
+$input-focus-border-color: lighten($component-active-bg, 25%) !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;
@@ -679,9 +659,9 @@ $input-height-lg: add(
$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
-$form-check-input-width: 1em !default;
+$form-check-input-width: 1.25em !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-padding-left: $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;
@@ -708,13 +688,9 @@ $form-check-input-indeterminate-bg-color: $component-active-bg !default;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml, ") !default;
-$form-check-input-disabled-opacity: 0.5 !default;
-$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
-$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
-
$form-switch-color: rgba(0, 0, 0, 0.25) !default;
$form-switch-width: 2em !default;
-$form-switch-padding-start: $form-switch-width + 0.5em !default;
+$form-switch-padding-left: $form-switch-width + 0.5em !default;
$form-switch-bg-image: url("data:image/svg+xml, ") !default;
$form-switch-border-radius: $form-switch-width !default;
@@ -725,11 +701,8 @@ $form-switch-checked-color: $component-active-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml, ") !default;
$form-switch-checked-bg-position: right center !default;
-$form-check-inline-margin-end: 1rem !default;
+$form-check-inline-margin-right: 1rem !default;
-$input-group-addon-padding-y: $input-padding-y !default;
-$input-group-addon-padding-x: $input-padding-x !default;
-$input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: $input-color !default;
$input-group-addon-bg: $gray-200 !default;
$input-group-addon-border-color: $input-border-color !default;
@@ -738,6 +711,7 @@ $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-height: $input-height !default;
$form-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
$form-select-font-weight: $input-font-weight !default;
$form-select-line-height: $input-line-height !default;
@@ -751,7 +725,7 @@ $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: add(
+$form-select-feedback-icon-padding-right: add(
1em * 0.75,
(2 * $form-select-padding-y * 0.75) + $form-select-padding-x + $form-select-indicator-padding
) !default;
@@ -771,10 +745,12 @@ $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-c
$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-height-sm: $input-height-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-height-lg: $input-height-lg !default;
$form-range-track-width: 100% !default;
$form-range-track-height: 0.5rem !default;
@@ -791,23 +767,40 @@ $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-active-bg: lighten($component-active-bg, 35%) !default;
$form-range-thumb-disabled-bg: $gray-500 !default;
$form-range-thumb-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out !default;
-$form-file-button-color: $input-color !default;
-$form-file-button-bg: $input-group-addon-bg !default;
-$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
+$form-file-height: $input-height !default;
+$form-file-focus-border-color: $input-focus-border-color !default;
+$form-file-focus-box-shadow: $input-focus-box-shadow !default;
+$form-file-disabled-bg: $input-disabled-bg !default;
+$form-file-disabled-border-color: $input-disabled-border-color !default;
-$form-floating-height: add(3.5rem, $input-height-border) !default;
-$form-floating-padding-x: $input-padding-x !default;
-$form-floating-padding-y: 1rem !default;
-$form-floating-input-padding-t: 1.625rem !default;
-$form-floating-input-padding-b: 0.625rem !default;
-$form-floating-label-opacity: 0.65 !default;
-$form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !default;
-$form-floating-transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !default;
+$form-file-padding-y: $input-padding-y !default;
+$form-file-padding-x: $input-padding-x !default;
+$form-file-line-height: $input-line-height !default;
+$form-file-font-family: $input-font-family !default;
+$form-file-font-weight: $input-font-weight !default;
+$form-file-color: $input-color !default;
+$form-file-bg: $input-bg !default;
+$form-file-border-width: $input-border-width !default;
+$form-file-border-color: $input-border-color !default;
+$form-file-border-radius: $input-border-radius !default;
+$form-file-box-shadow: $input-box-shadow !default;
+$form-file-button-color: $form-file-color !default;
+$form-file-button-bg: $input-group-addon-bg !default;
+
+$form-file-padding-y-sm: $input-padding-y-sm !default;
+$form-file-padding-x-sm: $input-padding-x-sm !default;
+$form-file-font-size-sm: $input-font-size-sm !default;
+$form-file-height-sm: $input-height-sm !default;
+
+$form-file-padding-y-lg: $input-padding-y-lg !default;
+$form-file-padding-x-lg: $input-padding-x-lg !default;
+$form-file-font-size-lg: $input-font-size-lg !default;
+$form-file-height-lg: $input-height-lg !default;
// Form validation
@@ -820,7 +813,7 @@ $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;
+$form-feedback-icon-invalid: url("data:image/svg+xml, ") !default;
// scss-docs-start form-validation-states
$form-validation-states: (
@@ -854,10 +847,6 @@ $zindex-tooltip: 1070 !default;
$nav-link-padding-y: 0.5rem !default;
$nav-link-padding-x: 1rem !default;
-$nav-link-font-size: null !default;
-$nav-link-font-weight: null !default;
-$nav-link-color: null !default;
-$nav-link-hover-color: null !default;
$nav-link-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out !default;
$nav-link-disabled-color: $gray-600 !default;
@@ -886,7 +875,7 @@ $navbar-brand-font-size: $font-size-lg !default;
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
-$navbar-brand-margin-end: 1rem !default;
+$navbar-brand-margin-right: 1rem !default;
$navbar-toggler-padding-y: 0.25rem !default;
$navbar-toggler-padding-x: 0.75rem !default;
@@ -919,7 +908,6 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
// Dropdown menu container and contents.
$dropdown-min-width: 10rem !default;
-$dropdown-padding-x: 0 !default;
$dropdown-padding-y: 0.5rem !default;
$dropdown-spacer: 0.125rem !default;
$dropdown-font-size: $font-size-base !default;
@@ -929,12 +917,12 @@ $dropdown-border-color: rgba($black, 0.15) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
-$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-divider-bg: $gray-200 !default;
$dropdown-divider-margin-y: $spacer / 2 !default;
$dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !default;
-$dropdown-link-hover-color: shade-color($gray-900, 10%) !default;
+$dropdown-link-hover-color: darken($gray-900, 5%) !default;
$dropdown-link-hover-bg: $gray-100 !default;
$dropdown-link-active-color: $component-active-color !default;
@@ -948,19 +936,6 @@ $dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
-$dropdown-dark-color: $gray-300 !default;
-$dropdown-dark-bg: $gray-800 !default;
-$dropdown-dark-border-color: $dropdown-border-color !default;
-$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
-$dropdown-dark-box-shadow: null !default;
-$dropdown-dark-link-color: $dropdown-dark-color !default;
-$dropdown-dark-link-hover-color: $white !default;
-$dropdown-dark-link-hover-bg: rgba($white, 0.15) !default;
-$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
-$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
-$dropdown-dark-link-disabled-color: $gray-500 !default;
-$dropdown-dark-header-color: $gray-500 !default;
-
// Pagination
$pagination-padding-y: 0.375rem !default;
@@ -974,11 +949,9 @@ $pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-width: $border-width !default;
$pagination-border-radius: $border-radius !default;
-$pagination-margin-start: -$pagination-border-width !default;
+$pagination-margin-left: -$pagination-border-width !default;
$pagination-border-color: $gray-300 !default;
-$pagination-focus-color: $link-hover-color !default;
-$pagination-focus-bg: $gray-200 !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-focus-outline: 0 !default;
@@ -994,9 +967,6 @@ $pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;
-$pagination-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
- border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
-
// Cards
$card-spacer-y: $spacer !default;
@@ -1018,38 +988,6 @@ $card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width / 2 !default;
-// Accordion
-$accordion-padding-y: 1rem !default;
-$accordion-padding-x: 1.25rem !default;
-$accordion-color: $body-color !default;
-$accordion-bg: transparent !default;
-$accordion-border-width: $border-width !default;
-$accordion-border-color: rgba($black, 0.125) !default;
-$accordion-border-radius: $border-radius !default;
-
-$accordion-body-padding-y: $accordion-padding-y !default;
-$accordion-body-padding-x: $accordion-padding-x !default;
-
-$accordion-button-padding-y: $accordion-padding-y !default;
-$accordion-button-padding-x: $accordion-padding-x !default;
-$accordion-button-color: $accordion-color !default;
-$accordion-button-bg: $accordion-bg !default;
-$accordion-transition: $btn-transition, border-radius 0.15s ease !default;
-$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
-$accordion-button-active-color: shade-color($primary, 10%) !default;
-
-$accordion-button-focus-border-color: $input-focus-border-color !default;
-$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
-
-$accordion-icon-width: 1.25rem !default;
-$accordion-icon-color: $accordion-color !default;
-$accordion-icon-active-color: $accordion-button-active-color !default;
-$accordion-icon-transition: transform 0.2s ease-in-out !default;
-$accordion-icon-transform: rotate(180deg) !default;
-
-$accordion-button-icon: url("data:image/svg+xml, ") !default;
-$accordion-button-active-icon: url("data:image/svg+xml, ") !default;
-
// Tooltips
$tooltip-font-size: $font-size-sm !default;
@@ -1085,7 +1023,7 @@ $popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow: $box-shadow !default;
-$popover-header-bg: shade-color($popover-bg, 6%) !default;
+$popover-header-bg: darken($popover-bg, 3%) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: 0.5rem !default;
$popover-header-padding-x: $spacer !default;
@@ -1104,7 +1042,7 @@ $popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
$toast-max-width: 350px !default;
$toast-padding-x: 0.75rem !default;
-$toast-padding-y: 0.5rem !default;
+$toast-padding-y: 0.25rem !default;
$toast-font-size: 0.875rem !default;
$toast-color: null !default;
$toast-background-color: rgba($white, 0.85) !default;
@@ -1112,7 +1050,6 @@ $toast-border-width: 1px !default;
$toast-border-color: rgba(0, 0, 0, 0.1) !default;
$toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default;
-$toast-spacing: $container-padding-x !default;
$toast-header-color: $gray-600 !default;
$toast-header-background-color: rgba($white, 0.85) !default;
@@ -1123,8 +1060,8 @@ $toast-header-border-color: rgba(0, 0, 0, 0.05) !default;
$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-padding-y: 0.25em !default;
+$badge-padding-x: 0.5em !default;
$badge-border-radius: $border-radius !default;
// Modals
@@ -1183,11 +1120,9 @@ $alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default;
-$alert-bg-scale: -80% !default;
-$alert-border-scale: -70% !default;
-$alert-color-scale: 40% !default;
-
-$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+$alert-bg-level: -10 !default;
+$alert-border-level: -9 !default;
+$alert-color-level: 6 !default;
// Progress bars
@@ -1211,8 +1146,8 @@ $list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: $spacer / 2 !default;
$list-group-item-padding-x: $spacer !default;
-$list-group-item-bg-scale: -80% !default;
-$list-group-item-color-scale: 40% !default;
+$list-group-item-bg-level: -9 !default;
+$list-group-item-color-level: 6 !default;
$list-group-hover-bg: $gray-100 !default;
$list-group-active-color: $component-active-color !default;
@@ -1245,16 +1180,15 @@ $figure-caption-color: $gray-600 !default;
// Breadcrumbs
$breadcrumb-font-size: null !default;
-$breadcrumb-padding-y: 0 !default;
-$breadcrumb-padding-x: 0 !default;
+$breadcrumb-padding-y: $spacer / 2 !default;
+$breadcrumb-padding-x: $spacer !default;
$breadcrumb-item-padding-x: 0.5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
-$breadcrumb-bg: null !default;
+$breadcrumb-bg: $gray-200 !default;
$breadcrumb-divider-color: $gray-600 !default;
$breadcrumb-active-color: $gray-600 !default;
$breadcrumb-divider: quote('/') !default;
-$breadcrumb-divider-flipped: $breadcrumb-divider !default;
-$breadcrumb-border-radius: null !default;
+$breadcrumb-border-radius: $border-radius !default;
// Carousel
@@ -1278,18 +1212,14 @@ $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-icon-width: 20px !default;
-$carousel-control-prev-icon-bg: url("data:image/svg+xml, ") !default;
-$carousel-control-next-icon-bg: url("data:image/svg+xml, ") !default;
+$carousel-control-prev-icon-bg: url("data:image/svg+xml, ") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml, ") !default;
$carousel-transition-duration: 0.6s !default;
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
-$carousel-dark-indicator-active-bg: $black !default;
-$carousel-dark-caption-color: $black !default;
-$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
-
// Spinners
$spinner-width: 2rem !default;
@@ -1303,18 +1233,10 @@ $spinner-border-width-sm: 0.2em !default;
// Close
-$btn-close-width: 1em !default;
-$btn-close-height: $btn-close-width !default;
-$btn-close-padding-x: 0.25em !default;
-$btn-close-padding-y: $btn-close-padding-x !default;
-$btn-close-color: $black !default;
-$btn-close-bg: url("data:image/svg+xml, ") !default;
-$btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
-$btn-close-opacity: 0.5 !default;
-$btn-close-hover-opacity: 0.75 !default;
-$btn-close-focus-opacity: 1 !default;
-$btn-close-disabled-opacity: 0.25 !default;
-$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
+$close-font-size: $font-size-base * 1.5 !default;
+$close-font-weight: $font-weight-bold !default;
+$close-color: $black !default;
+$close-text-shadow: 0 1px 0 $white !default;
// Code
diff --git a/src/scss/bootstrap/bootstrap-grid.scss b/src/scss/bootstrap/bootstrap-grid.scss
index 4012a519..b8d0b2a3 100644
--- a/src/scss/bootstrap/bootstrap-grid.scss
+++ b/src/scss/bootstrap/bootstrap-grid.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Grid v5.0.0-beta1 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.0.0-alpha1 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -32,8 +32,7 @@ $utilities: map-get-multiple(
'flex',
'flex-direction',
'flex-grow',
- 'flex-shrink',
- 'flex-wrap',
+ 'flex-shrink' 'flex-wrap',
'justify-content',
'align-items',
'align-content',
@@ -42,23 +41,23 @@ $utilities: map-get-multiple(
'margin-x',
'margin-y',
'margin-top',
- 'margin-end',
+ 'margin-right',
'margin-bottom',
- 'margin-start',
+ 'margin-left',
'negative-margin',
'negative-margin-x',
'negative-margin-y',
'negative-margin-top',
- 'negative-margin-end',
+ 'negative-margin-right',
'negative-margin-bottom',
- 'negative-margin-start',
+ 'negative-margin-left',
'padding',
'padding-x',
'padding-y',
'padding-top',
- 'padding-end',
+ 'padding-right',
'padding-bottom',
- 'padding-start'
+ 'padding-left'
)
);
diff --git a/src/scss/bootstrap/bootstrap-reboot.scss b/src/scss/bootstrap/bootstrap-reboot.scss
index 250ea816..46881ec3 100644
--- a/src/scss/bootstrap/bootstrap-reboot.scss
+++ b/src/scss/bootstrap/bootstrap-reboot.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Reboot v5.0.0-beta1 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.0.0-alpha1 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/src/scss/bootstrap/bootstrap-utilities.scss b/src/scss/bootstrap/bootstrap-utilities.scss
index b9d999ec..c57cda45 100644
--- a/src/scss/bootstrap/bootstrap-utilities.scss
+++ b/src/scss/bootstrap/bootstrap-utilities.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Utilities v5.0.0-beta1 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.0.0-alpha1 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/src/scss/bootstrap/bootstrap.scss b/src/scss/bootstrap/bootstrap.scss
index 80e8d498..69d1008d 100644
--- a/src/scss/bootstrap/bootstrap.scss
+++ b/src/scss/bootstrap/bootstrap.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap v5.0.0-beta1 (https://getbootstrap.com/)
+ * Bootstrap v5.0.0-alpha1 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -28,7 +28,6 @@
@import 'nav';
@import 'navbar';
@import 'card';
-@import 'accordion';
@import 'breadcrumb';
@import 'pagination';
@import 'badge';
diff --git a/src/scss/bootstrap/forms/_floating-labels.scss b/src/scss/bootstrap/forms/_floating-labels.scss
deleted file mode 100644
index 8b2e2b8e..00000000
--- a/src/scss/bootstrap/forms/_floating-labels.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.form-floating {
- position: relative;
-
- > .form-control,
- > .form-select {
- height: $form-floating-height;
- padding: $form-floating-padding-y $form-floating-padding-x;
- }
-
- > label {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%; // allow textareas
- padding: $form-floating-padding-y $form-floating-padding-x;
- pointer-events: none;
- border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
- transform-origin: 0 0;
- @include transition($form-floating-transition);
- }
-
- // stylelint-disable no-duplicate-selectors
- > .form-control {
- &::placeholder {
- color: transparent;
- }
-
- &:focus,
- &:not(:placeholder-shown) {
- padding-top: $form-floating-input-padding-t;
- padding-bottom: $form-floating-input-padding-b;
- }
- // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
- &:-webkit-autofill {
- padding-top: $form-floating-input-padding-t;
- padding-bottom: $form-floating-input-padding-b;
- }
- }
-
- > .form-select {
- padding-top: $form-floating-input-padding-t;
- padding-bottom: $form-floating-input-padding-b;
- }
-
- > .form-control:focus,
- > .form-control:not(:placeholder-shown),
- > .form-select {
- ~ label {
- opacity: $form-floating-label-opacity;
- transform: $form-floating-label-transform;
- }
- }
- // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
- > .form-control:-webkit-autofill {
- ~ label {
- opacity: $form-floating-label-opacity;
- transform: $form-floating-label-transform;
- }
- }
- // stylelint-enable no-duplicate-selectors
-}
diff --git a/src/scss/bootstrap/forms/_form-check.scss b/src/scss/bootstrap/forms/_form-check.scss
index 6bce56a5..e758c1a4 100644
--- a/src/scss/bootstrap/forms/_form-check.scss
+++ b/src/scss/bootstrap/forms/_form-check.scss
@@ -5,12 +5,12 @@
.form-check {
display: block;
min-height: $form-check-min-height;
- padding-left: $form-check-padding-start;
+ padding-left: $form-check-padding-left;
margin-bottom: $form-check-margin-bottom;
.form-check-input {
float: left;
- margin-left: $form-check-padding-start * -1;
+ margin-left: $form-check-padding-left * -1;
}
}
@@ -33,7 +33,7 @@
}
&[type='radio'] {
- // stylelint-disable-next-line property-disallowed-list
+ // stylelint-disable-next-line property-blacklist
border-radius: $form-check-radio-border-radius;
}
@@ -53,8 +53,7 @@
&[type='checkbox'] {
@if $enable-gradients {
- background-image: escape-svg($form-check-input-checked-bg-image),
- var(--#{$variable-prefix}gradient);
+ background-image: escape-svg($form-check-input-checked-bg-image), var(--bs-gradient);
} @else {
background-image: escape-svg($form-check-input-checked-bg-image);
}
@@ -62,8 +61,7 @@
&[type='radio'] {
@if $enable-gradients {
- background-image: escape-svg($form-check-radio-checked-bg-image),
- var(--#{$variable-prefix}gradient);
+ background-image: escape-svg($form-check-radio-checked-bg-image), var(--bs-gradient);
} @else {
background-image: escape-svg($form-check-radio-checked-bg-image);
}
@@ -75,8 +73,7 @@
border-color: $form-check-input-indeterminate-border-color;
@if $enable-gradients {
- background-image: escape-svg($form-check-input-indeterminate-bg-image),
- var(--#{$variable-prefix}gradient);
+ background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--bs-gradient);
} @else {
background-image: escape-svg($form-check-input-indeterminate-bg-image);
}
@@ -85,7 +82,7 @@
&:disabled {
pointer-events: none;
filter: none;
- opacity: $form-check-input-disabled-opacity;
+ opacity: 0.5;
}
// Use disabled attribute in addition of :disabled pseudo-class
@@ -93,7 +90,7 @@
&[disabled],
&:disabled {
~ .form-check-label {
- opacity: $form-check-label-disabled-opacity;
+ opacity: 0.5;
}
}
}
@@ -108,11 +105,11 @@
//
.form-switch {
- padding-left: $form-switch-padding-start;
+ padding-left: $form-switch-padding-left;
.form-check-input {
width: $form-switch-width;
- margin-left: $form-switch-padding-start * -1;
+ margin-left: $form-switch-padding-left * -1;
background-image: escape-svg($form-switch-bg-image);
background-position: left center;
@include border-radius($form-switch-border-radius);
@@ -125,8 +122,7 @@
background-position: $form-switch-checked-bg-position;
@if $enable-gradients {
- background-image: escape-svg($form-switch-checked-bg-image),
- var(--#{$variable-prefix}gradient);
+ background-image: escape-svg($form-switch-checked-bg-image), var(--bs-gradient);
} @else {
background-image: escape-svg($form-switch-checked-bg-image);
}
@@ -136,20 +132,11 @@
.form-check-inline {
display: inline-block;
- margin-right: $form-check-inline-margin-end;
+ margin-right: $form-check-inline-margin-right;
}
.btn-check {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
-
- &[disabled],
- &:disabled {
- + .btn {
- pointer-events: none;
- filter: none;
- opacity: $form-check-btn-check-disabled-opacity;
- }
- }
}
diff --git a/src/scss/bootstrap/forms/_form-control.scss b/src/scss/bootstrap/forms/_form-control.scss
index fd613e3b..6686ecfb 100644
--- a/src/scss/bootstrap/forms/_form-control.scss
+++ b/src/scss/bootstrap/forms/_form-control.scss
@@ -1,10 +1,11 @@
//
-// General form controls (plus a few specific high-level interventions)
+// Textual form controls
//
.form-control {
display: block;
width: 100%;
+ min-height: $input-height;
padding: $input-padding-y $input-padding-x;
font-family: $input-font-family;
@include font-size($input-font-size);
@@ -22,14 +23,6 @@
@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;
@@ -44,14 +37,6 @@
}
}
- // Add some height to date inputs on iOS
- // https://github.com/twbs/bootstrap/issues/23307
- // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
- &::-webkit-date-and-time-value {
- // Multiply line-height by 1em if it has no unit
- height: if(unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
- }
-
// Placeholder
&::placeholder {
color: $input-placeholder-color;
@@ -71,47 +56,6 @@
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
-
- // File input buttons theming
- // stylelint-disable-next-line selector-pseudo-element-no-unknown
- &::file-selector-button {
- padding: $input-padding-y $input-padding-x;
- margin: (-$input-padding-y) (-$input-padding-x);
- margin-inline-end: $input-padding-x;
- color: $form-file-button-color;
- @include gradient-bg($form-file-button-bg);
- pointer-events: none;
- border-color: inherit;
- border-style: solid;
- border-width: 0;
- border-inline-end-width: $input-border-width;
- border-radius: 0; // stylelint-disable-line property-disallowed-list
- @include transition($btn-transition);
- }
-
- // stylelint-disable-next-line selector-pseudo-element-no-unknown
- &:hover:not(:disabled):not([readonly])::file-selector-button {
- background-color: $form-file-button-hover-bg;
- }
-
- &::-webkit-file-upload-button {
- padding: $input-padding-y $input-padding-x;
- margin: (-$input-padding-y) (-$input-padding-x);
- margin-inline-end: $input-padding-x;
- color: $form-file-button-color;
- @include gradient-bg($form-file-button-bg);
- pointer-events: none;
- border-color: inherit;
- border-style: solid;
- border-width: 0;
- border-inline-end-width: $input-border-width;
- border-radius: 0; // stylelint-disable-line property-disallowed-list
- @include transition($btn-transition);
- }
-
- &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
- background-color: $form-file-button-hover-bg;
- }
}
// Readonly controls as plain text
@@ -149,19 +93,6 @@
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
@include border-radius($input-border-radius-sm);
-
- // stylelint-disable-next-line selector-pseudo-element-no-unknown
- &::file-selector-button {
- padding: $input-padding-y-sm $input-padding-x-sm;
- margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
- margin-inline-end: $input-padding-x-sm;
- }
-
- &::-webkit-file-upload-button {
- padding: $input-padding-y-sm $input-padding-x-sm;
- margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
- margin-inline-end: $input-padding-x-sm;
- }
}
.form-control-lg {
@@ -169,55 +100,17 @@
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
@include border-radius($input-border-radius-lg);
-
- // stylelint-disable-next-line selector-pseudo-element-no-unknown
- &::file-selector-button {
- padding: $input-padding-y-lg $input-padding-x-lg;
- margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
- margin-inline-end: $input-padding-x-lg;
- }
-
- &::-webkit-file-upload-button {
- padding: $input-padding-y-lg $input-padding-x-lg;
- margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
- margin-inline-end: $input-padding-x-lg;
- }
}
-// Make sure textareas don't shrink too much when resized
-// https://github.com/twbs/bootstrap/pull/29124
-// stylelint-disable selector-no-qualifying-type
-textarea {
- &.form-control {
- min-height: $input-height;
- }
-
- &.form-control-sm {
- min-height: $input-height-sm;
- }
-
- &.form-control-lg {
- min-height: $input-height-lg;
- }
-}
-// stylelint-enable selector-no-qualifying-type
-
.form-control-color {
max-width: 3rem;
- height: auto; // Override fixed browser height
padding: $input-padding-y;
-
- &:not(:disabled):not([readonly]) {
- cursor: pointer;
- }
-
- &::-moz-color-swatch {
- height: if(unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
- @include border-radius($input-border-radius);
- }
-
- &::-webkit-color-swatch {
- height: if(unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
- @include border-radius($input-border-radius);
- }
+}
+
+.form-control-color::-moz-color-swatch {
+ @include border-radius($input-border-radius);
+}
+
+.form-control-color::-webkit-color-swatch {
+ @include border-radius($input-border-radius);
}
diff --git a/src/scss/bootstrap/forms/_form-file.scss b/src/scss/bootstrap/forms/_form-file.scss
new file mode 100644
index 00000000..5bc4afc6
--- /dev/null
+++ b/src/scss/bootstrap/forms/_form-file.scss
@@ -0,0 +1,91 @@
+.form-file {
+ --bs-form-file-height: #{$form-file-height};
+ position: relative;
+}
+
+.form-file-input {
+ position: relative;
+ z-index: 2;
+ width: 100%;
+ height: var(--bs-form-file-height);
+ margin: 0;
+ opacity: 0;
+
+ &:focus-within ~ .form-file-label {
+ border-color: $form-file-focus-border-color;
+ box-shadow: $form-file-focus-box-shadow;
+ }
+
+ // Use disabled attribute in addition of :disabled pseudo-class
+ // See: https://github.com/twbs/bootstrap/issues/28247
+ &[disabled] ~ .form-file-label .form-file-text,
+ &:disabled ~ .form-file-label .form-file-text {
+ background-color: $form-file-disabled-bg;
+ border-color: $form-file-disabled-border-color;
+ }
+}
+
+.form-file-label {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 1;
+ display: flex;
+ height: var(--bs-form-file-height);
+ border-color: $form-file-border-color;
+ @include border-radius($form-file-border-radius);
+ @include box-shadow($form-file-box-shadow);
+}
+
+.form-file-text {
+ display: block;
+ flex-grow: 1;
+ padding: $form-file-padding-y $form-file-padding-x;
+ overflow: hidden;
+ font-family: $form-file-font-family;
+ font-weight: $form-file-font-weight;
+ line-height: $form-file-line-height;
+ color: $form-file-color;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background-color: $form-file-bg;
+ border-color: inherit;
+ border-style: solid;
+ border-width: $form-file-border-width;
+ @include border-left-radius(inherit);
+}
+
+.form-file-button {
+ display: block;
+ flex-shrink: 0;
+ padding: $form-file-padding-y $form-file-padding-x;
+ margin-left: -$form-file-border-width;
+ line-height: $form-file-line-height;
+ color: $form-file-button-color;
+ @include gradient-bg($form-file-button-bg);
+ border-color: inherit;
+ border-style: solid;
+ border-width: $form-file-border-width;
+ @include border-right-radius(inherit);
+}
+
+.form-file-sm {
+ --bs-form-file-height: #{$form-file-height-sm};
+ @include font-size($form-file-font-size-sm);
+
+ .form-file-text,
+ .form-file-button {
+ padding: $form-file-padding-y-sm $form-file-padding-x-sm;
+ }
+}
+
+.form-file-lg {
+ --bs-form-file-height: #{$form-file-height-lg};
+ @include font-size($form-file-font-size-lg);
+
+ .form-file-text,
+ .form-file-button {
+ padding: $form-file-padding-y-lg $form-file-padding-x-lg;
+ }
+}
diff --git a/src/scss/bootstrap/forms/_form-range.scss b/src/scss/bootstrap/forms/_form-range.scss
index 575ef862..6cf90138 100644
--- a/src/scss/bootstrap/forms/_form-range.scss
+++ b/src/scss/bootstrap/forms/_form-range.scss
@@ -16,12 +16,9 @@
// 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;
- }
+ &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
+ &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
+ &::-ms-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
}
&::-moz-focus-outer {
@@ -81,6 +78,46 @@
@include box-shadow($form-range-track-box-shadow);
}
+ &::-ms-thumb {
+ width: $form-range-thumb-width;
+ height: $form-range-thumb-height;
+ margin-top: 0; // Edge specific
+ margin-right: $form-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
+ margin-left: $form-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
+ @include gradient-bg($form-range-thumb-bg);
+ border: $form-range-thumb-border;
+ @include border-radius($form-range-thumb-border-radius);
+ @include box-shadow($form-range-thumb-box-shadow);
+ @include transition($form-range-thumb-transition);
+ appearance: none;
+
+ &:active {
+ @include gradient-bg($form-range-thumb-active-bg);
+ }
+ }
+
+ &::-ms-track {
+ width: $form-range-track-width;
+ height: $form-range-track-height;
+ color: transparent;
+ cursor: $form-range-track-cursor;
+ background-color: transparent;
+ border-color: transparent;
+ border-width: $form-range-thumb-height / 2;
+ @include box-shadow($form-range-track-box-shadow);
+ }
+
+ &::-ms-fill-lower {
+ background-color: $form-range-track-bg;
+ @include border-radius($form-range-track-border-radius);
+ }
+
+ &::-ms-fill-upper {
+ margin-right: 15px; // arbitrary?
+ background-color: $form-range-track-bg;
+ @include border-radius($form-range-track-border-radius);
+ }
+
&:disabled {
pointer-events: none;
@@ -91,5 +128,9 @@
&::-moz-range-thumb {
background-color: $form-range-thumb-disabled-bg;
}
+
+ &::-ms-thumb {
+ background-color: $form-range-thumb-disabled-bg;
+ }
}
}
diff --git a/src/scss/bootstrap/forms/_form-select.scss b/src/scss/bootstrap/forms/_form-select.scss
index 23ca28f4..e4cab087 100644
--- a/src/scss/bootstrap/forms/_form-select.scss
+++ b/src/scss/bootstrap/forms/_form-select.scss
@@ -6,8 +6,8 @@
.form-select {
display: block;
width: 100%;
- padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding)
- $form-select-padding-y $form-select-padding-x;
+ height: $form-select-height;
+ padding: $form-select-padding-y ($form-select-padding-x + $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;
@@ -33,10 +33,21 @@
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $form-select-focus-box-shadow;
}
+
+ &::-ms-value {
+ // For visual consistency with other platforms/browsers,
+ // suppress the default white text on blue background highlight given to
+ // the selected option text when the (still closed) receives focus
+ // in Edge.
+ // See https://github.com/twbs/bootstrap/issues/19398.
+ color: $input-color;
+ background-color: $input-bg;
+ }
}
&[multiple],
- &[size]:not([size='1']) {
+ &[size]:not([size="1"]) {
+ height: auto;
padding-right: $form-select-padding-x;
background-image: none;
}
@@ -55,6 +66,7 @@
}
.form-select-sm {
+ height: $form-select-height-sm;
padding-top: $form-select-padding-y-sm;
padding-bottom: $form-select-padding-y-sm;
padding-left: $form-select-padding-x-sm;
@@ -62,6 +74,7 @@
}
.form-select-lg {
+ height: $form-select-height-lg;
padding-top: $form-select-padding-y-lg;
padding-bottom: $form-select-padding-y-lg;
padding-left: $form-select-padding-x-lg;
diff --git a/src/scss/bootstrap/forms/_input-group.scss b/src/scss/bootstrap/forms/_input-group.scss
index f9bd5887..c8e86ceb 100644
--- a/src/scss/bootstrap/forms/_input-group.scss
+++ b/src/scss/bootstrap/forms/_input-group.scss
@@ -10,7 +10,8 @@
width: 100%;
> .form-control,
- > .form-select {
+ > .form-select,
+ > .form-file {
position: relative; // For focus state's z-index
flex: 1 1 auto;
width: 1%;
@@ -19,10 +20,26 @@
// Bring the "active" form control to the top of surrounding elements
> .form-control:focus,
- > .form-select:focus {
+ > .form-select:focus,
+ > .form-file .form-file-input:focus ~ .form-file-label {
z-index: 3;
}
+ // Bring the custom file input above the label
+ > .form-file {
+ > .form-file-input:focus {
+ z-index: 4;
+ }
+
+ &:not(:last-child) > .form-file-label {
+ @include border-right-radius(0);
+ }
+
+ &:not(:first-child) > .form-file-label {
+ @include border-left-radius(0);
+ }
+ }
+
// 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.
@@ -36,6 +53,7 @@
}
}
+
// Textual addons
//
// Serves as a catch-all element for any text or radio/checkbox input you wish
@@ -44,9 +62,9 @@
.input-group-text {
display: flex;
align-items: center;
- padding: $input-group-addon-padding-y $input-group-addon-padding-x;
+ padding: $input-padding-y $input-padding-x;
@include font-size($input-font-size); // Match inputs
- font-weight: $input-group-addon-font-weight;
+ font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-group-addon-color;
text-align: center;
@@ -56,11 +74,20 @@
@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 {
+ min-height: $input-height-lg;
+}
+
+.input-group-lg > .form-select {
+ height: $input-height-lg;
+}
+
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
@@ -70,6 +97,14 @@
@include border-radius($input-border-radius-lg);
}
+.input-group-sm > .form-control {
+ min-height: $input-height-sm;
+}
+
+.input-group-sm > .form-select {
+ height: $input-height-sm;
+}
+
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
@@ -84,6 +119,7 @@
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
@@ -92,33 +128,13 @@
// stylelint-disable-next-line no-duplicate-selectors
.input-group {
- &:not(.has-validation) {
- > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
- > .dropdown-toggle:nth-last-child(n + 3) {
- @include border-end-radius(0);
- }
+ > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
+ > .dropdown-toggle:nth-last-child(n + 3) {
+ @include border-right-radius(0);
}
- &.has-validation {
- > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
- > .dropdown-toggle:nth-last-child(n + 4) {
- @include border-end-radius(0);
- }
- }
-
- $validation-messages: '';
- @each $state in map-keys($form-validation-states) {
- $validation-messages: $validation-messages +
- ':not(.' +
- unquote($state) +
- '-tooltip)' +
- ':not(.' +
- unquote($state) +
- '-feedback)';
- }
-
- > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+ > :not(:first-child):not(.dropdown-menu) {
margin-left: -$input-border-width;
- @include border-start-radius(0);
+ @include border-left-radius(0);
}
}
diff --git a/src/scss/bootstrap/helpers/_colored-links.scss b/src/scss/bootstrap/helpers/_colored-links.scss
index d6556154..4eea8d33 100644
--- a/src/scss/bootstrap/helpers/_colored-links.scss
+++ b/src/scss/bootstrap/helpers/_colored-links.scss
@@ -2,14 +2,10 @@
.link-#{$color} {
color: $value;
- @if $link-shade-percentage != 0 {
+ @if $emphasized-link-hover-darken-percentage != 0 {
&:hover,
&:focus {
- color: if(
- color-contrast($value) == $color-contrast-light,
- shade-color($value, $link-shade-percentage),
- tint-color($value, $link-shade-percentage)
- );
+ color: darken($value, $emphasized-link-hover-darken-percentage);
}
}
}
diff --git a/src/scss/bootstrap/helpers/_embed.scss b/src/scss/bootstrap/helpers/_embed.scss
new file mode 100644
index 00000000..924fc0e6
--- /dev/null
+++ b/src/scss/bootstrap/helpers/_embed.scss
@@ -0,0 +1,31 @@
+// Credit: Nicolas Gallagher and SUIT CSS.
+
+.embed-responsive {
+ position: relative;
+ width: 100%;
+
+ &::before {
+ display: block;
+ content: "";
+ }
+
+ .embed-responsive-item,
+ iframe,
+ embed,
+ object,
+ video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+@each $key, $ratio in $embed-responsive-aspect-ratios {
+ .embed-responsive-#{$key} {
+ &::before {
+ padding-top: percentage(map-get($ratio, y) / map-get($ratio, x));
+ }
+ }
+}
diff --git a/src/scss/bootstrap/helpers/_ratio.scss b/src/scss/bootstrap/helpers/_ratio.scss
deleted file mode 100644
index cc7dcb57..00000000
--- a/src/scss/bootstrap/helpers/_ratio.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-// Credit: Nicolas Gallagher and SUIT CSS.
-
-.ratio {
- position: relative;
- width: 100%;
-
- &::before {
- display: block;
- padding-top: var(--aspect-ratio);
- content: '';
- }
-
- > * {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
-}
-
-@each $key, $ratio in $aspect-ratios {
- .ratio-#{$key} {
- --aspect-ratio: #{$ratio};
- }
-}
diff --git a/src/scss/bootstrap/helpers/_screenreaders.scss b/src/scss/bootstrap/helpers/_screenreaders.scss
new file mode 100644
index 00000000..c8034d10
--- /dev/null
+++ b/src/scss/bootstrap/helpers/_screenreaders.scss
@@ -0,0 +1,8 @@
+//
+// Screenreaders
+//
+
+.sr-only,
+.sr-only-focusable:not(:focus) {
+ @include sr-only();
+}
diff --git a/src/scss/bootstrap/helpers/_visually-hidden.scss b/src/scss/bootstrap/helpers/_visually-hidden.scss
deleted file mode 100644
index 0a843d38..00000000
--- a/src/scss/bootstrap/helpers/_visually-hidden.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-//
-// Visually hidden
-//
-
-.visually-hidden,
-.visually-hidden-focusable:not(:focus) {
- @include visually-hidden();
-}
diff --git a/src/scss/bootstrap/mixins/_alert.scss b/src/scss/bootstrap/mixins/_alert.scss
index 99ebbc30..20da83a2 100644
--- a/src/scss/bootstrap/mixins/_alert.scss
+++ b/src/scss/bootstrap/mixins/_alert.scss
@@ -4,6 +4,6 @@
border-color: $border;
.alert-link {
- color: shade-color($color, 20%);
+ color: darken($color, 10%);
}
}
diff --git a/src/scss/bootstrap/mixins/_border-radius.scss b/src/scss/bootstrap/mixins/_border-radius.scss
index 071cdcac..aee9bf3d 100644
--- a/src/scss/bootstrap/mixins/_border-radius.scss
+++ b/src/scss/bootstrap/mixins/_border-radius.scss
@@ -1,4 +1,4 @@
-// stylelint-disable property-disallowed-list
+// stylelint-disable property-blacklist
// Single side border-radius
// Helper function to replace negative values with 0
@@ -17,58 +17,59 @@
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
@if $enable-rounded {
border-radius: valid-radius($radius);
- } @else if $fallback-border-radius != false {
+ }
+ @else if $fallback-border-radius != false {
border-radius: $fallback-border-radius;
}
}
-@mixin border-top-radius($radius: $border-radius) {
+@mixin border-top-radius($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) {
+@mixin border-right-radius($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) {
+@mixin border-bottom-radius($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) {
+@mixin border-left-radius($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) {
+@mixin border-top-left-radius($radius) {
@if $enable-rounded {
border-top-left-radius: valid-radius($radius);
}
}
-@mixin border-top-end-radius($radius: $border-radius) {
+@mixin border-top-right-radius($radius) {
@if $enable-rounded {
border-top-right-radius: valid-radius($radius);
}
}
-@mixin border-bottom-end-radius($radius: $border-radius) {
+@mixin border-bottom-right-radius($radius) {
@if $enable-rounded {
border-bottom-right-radius: valid-radius($radius);
}
}
-@mixin border-bottom-start-radius($radius: $border-radius) {
+@mixin border-bottom-left-radius($radius) {
@if $enable-rounded {
border-bottom-left-radius: valid-radius($radius);
}
diff --git a/src/scss/bootstrap/mixins/_box-shadow.scss b/src/scss/bootstrap/mixins/_box-shadow.scss
index 353c1337..0726d435 100644
--- a/src/scss/bootstrap/mixins/_box-shadow.scss
+++ b/src/scss/bootstrap/mixins/_box-shadow.scss
@@ -2,15 +2,17 @@
@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($shadow) == 1) {
+ // We can pass `@include box-shadow(none);`
+ $result: $shadow;
+ } @else {
+ // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
+ @for $i from 1 through length($shadow) {
+ @if nth($shadow, $i) != "none" {
+ $result: append($result, nth($shadow, $i), "comma");
+ }
}
}
-
@if (length($result) > 0) {
box-shadow: $result;
}
diff --git a/src/scss/bootstrap/mixins/_breakpoints.scss b/src/scss/bootstrap/mixins/_breakpoints.scss
index 3301fa98..ac964137 100644
--- a/src/scss/bootstrap/mixins/_breakpoints.scss
+++ b/src/scss/bootstrap/mixins/_breakpoints.scss
@@ -112,8 +112,7 @@
// 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);
+ $max: breakpoint-max(breakpoint-next($name, $breakpoints));
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
@@ -124,7 +123,7 @@
@content;
}
} @else if $min == null {
- @include media-breakpoint-down($next, $breakpoints) {
+ @include media-breakpoint-down($name, $breakpoints) {
@content;
}
}
diff --git a/src/scss/bootstrap/mixins/_buttons.scss b/src/scss/bootstrap/mixins/_buttons.scss
index 0c011e02..0a66540f 100644
--- a/src/scss/bootstrap/mixins/_buttons.scss
+++ b/src/scss/bootstrap/mixins/_buttons.scss
@@ -7,19 +7,12 @@
$background,
$border,
$color: color-contrast($background),
- $hover-background:
- if($color == $color-contrast-light, shade-color($background, 15%), tint-color($background, 15%)),
- $hover-border:
- if($color == $color-contrast-light, shade-color($border, 20%), tint-color($border, 10%)),
+ $hover-background: darken($background, 7.5%),
+ $hover-border: darken($border, 10%),
$hover-color: color-contrast($hover-background),
- $active-background:
- if($color == $color-contrast-light, shade-color($background, 20%), tint-color($background, 20%)),
- $active-border:
- if($color == $color-contrast-light, shade-color($border, 25%), tint-color($border, 10%)),
- $active-color: color-contrast($active-background),
- $disabled-background: $background,
- $disabled-border: $border,
- $disabled-color: color-contrast($disabled-background)
+ $active-background: darken($background, 10%),
+ $active-border: darken($border, 12.5%),
+ $active-color: color-contrast($active-background)
) {
color: $color;
@include gradient-bg($background);
@@ -74,11 +67,11 @@
&:disabled,
&.disabled {
- color: $disabled-color;
- background-color: $disabled-background;
+ color: $color;
+ background-color: $background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
- border-color: $disabled-border;
+ border-color: $border;
}
}
diff --git a/src/scss/bootstrap/mixins/_caret.scss b/src/scss/bootstrap/mixins/_caret.scss
index c819f154..07d72280 100644
--- a/src/scss/bootstrap/mixins/_caret.scss
+++ b/src/scss/bootstrap/mixins/_caret.scss
@@ -12,14 +12,14 @@
border-left: $caret-width solid transparent;
}
-@mixin caret-end {
+@mixin caret-right {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
-@mixin caret-start {
+@mixin caret-left {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
@@ -31,17 +31,17 @@
display: inline-block;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
- content: '';
+ content: "";
@if $direction == down {
@include caret-down();
} @else if $direction == up {
@include caret-up();
- } @else if $direction == end {
- @include caret-end();
+ } @else if $direction == right {
+ @include caret-right();
}
}
- @if $direction == start {
+ @if $direction == left {
&::after {
display: none;
}
@@ -50,8 +50,8 @@
display: inline-block;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
- content: '';
- @include caret-start();
+ content: "";
+ @include caret-left();
}
}
diff --git a/src/scss/bootstrap/mixins/_container.scss b/src/scss/bootstrap/mixins/_container.scss
index ee6044d0..435d0034 100644
--- a/src/scss/bootstrap/mixins/_container.scss
+++ b/src/scss/bootstrap/mixins/_container.scss
@@ -1,9 +1,9 @@
// Container mixins
-@mixin make-container($gutter: $container-padding-x) {
+@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
- padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
- padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
+ padding-right: $padding-x;
+ padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
diff --git a/src/scss/bootstrap/mixins/_forms.scss b/src/scss/bootstrap/mixins/_forms.scss
index f73cb6a5..a9306d0d 100644
--- a/src/scss/bootstrap/mixins/_forms.scss
+++ b/src/scss/bootstrap/mixins/_forms.scss
@@ -79,7 +79,7 @@
border-color: $color;
@if $enable-validation-icons {
- padding-right: $form-select-feedback-icon-padding-end;
+ padding-right: $form-select-feedback-icon-padding-right;
background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
@@ -114,4 +114,20 @@
margin-left: 0.5em;
}
}
+
+ // custom file
+ .form-file-input {
+ @include form-validation-state-selector($state) {
+ ~ .form-file-label {
+ border-color: $color;
+ }
+
+ &:focus {
+ ~ .form-file-label {
+ border-color: $color;
+ box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25);
+ }
+ }
+ }
+ }
}
diff --git a/src/scss/bootstrap/mixins/_gradients.scss b/src/scss/bootstrap/mixins/_gradients.scss
index 729eb1a7..de350850 100644
--- a/src/scss/bootstrap/mixins/_gradients.scss
+++ b/src/scss/bootstrap/mixins/_gradients.scss
@@ -4,7 +4,7 @@
background-color: $color;
@if $enable-gradients {
- background-image: var(--#{$variable-prefix}gradient);
+ background-image: var(--bs-gradient);
}
}
diff --git a/src/scss/bootstrap/mixins/_grid.scss b/src/scss/bootstrap/mixins/_grid.scss
index 5fb92549..6d9c6847 100644
--- a/src/scss/bootstrap/mixins/_grid.scss
+++ b/src/scss/bootstrap/mixins/_grid.scss
@@ -3,19 +3,14 @@
// Generate semantic grid columns with these mixins.
@mixin make-row($gutter: $grid-gutter-width) {
- --#{$variable-prefix}gutter-x: #{$gutter};
- --#{$variable-prefix}gutter-y: 0;
+ --bs-gutter-x: #{$gutter};
+ --bs-gutter-y: 0;
display: flex;
+ flex: 1 0 100%;
flex-wrap: wrap;
- margin-top: calc(
- var(--#{$variable-prefix}gutter-y) * -1
- ); // stylelint-disable-line function-disallowed-list
- margin-right: calc(
- var(--#{$variable-prefix}gutter-x) / -2
- ); // stylelint-disable-line function-disallowed-list
- margin-left: calc(
- var(--#{$variable-prefix}gutter-x) / -2
- ); // stylelint-disable-line function-disallowed-list
+ margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-blacklist
+ margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist
+ margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist
}
@mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -31,13 +26,9 @@
flex-shrink: 0;
width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
- padding-right: calc(
- var(--#{$variable-prefix}gutter-x) / 2
- ); // stylelint-disable-line function-disallowed-list
- padding-left: calc(
- var(--#{$variable-prefix}gutter-x) / 2
- ); // stylelint-disable-line function-disallowed-list
- margin-top: var(--#{$variable-prefix}gutter-y);
+ padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist
+ padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist
+ margin-top: var(--bs-gutter-y);
}
@mixin make-col($size, $columns: $grid-columns) {
@@ -61,7 +52,7 @@
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@mixin row-cols($count) {
- > * {
+ & > * {
flex: 0 0 auto;
width: 100% / $count;
}
@@ -126,12 +117,12 @@
@each $key, $value in $gutters {
.g#{$infix}-#{$key},
.gx#{$infix}-#{$key} {
- --#{$variable-prefix}gutter-x: #{$value};
+ --bs-gutter-x: #{$value};
}
.g#{$infix}-#{$key},
.gy#{$infix}-#{$key} {
- --#{$variable-prefix}gutter-y: #{$value};
+ --bs-gutter-y: #{$value};
}
}
}
diff --git a/src/scss/bootstrap/mixins/_list-group.scss b/src/scss/bootstrap/mixins/_list-group.scss
index 351e9109..965fc4bd 100644
--- a/src/scss/bootstrap/mixins/_list-group.scss
+++ b/src/scss/bootstrap/mixins/_list-group.scss
@@ -9,7 +9,7 @@
&:hover,
&:focus {
color: $color;
- background-color: shade-color($background, 10%);
+ background-color: darken($background, 5%);
}
&.active {
diff --git a/src/scss/bootstrap/mixins/_pagination.scss b/src/scss/bootstrap/mixins/_pagination.scss
index 9cb7fd8b..52ad1e12 100644
--- a/src/scss/bootstrap/mixins/_pagination.scss
+++ b/src/scss/bootstrap/mixins/_pagination.scss
@@ -7,16 +7,16 @@
}
.page-item {
- @if $pagination-margin-start == (-$pagination-border-width) {
+ @if $pagination-margin-left == (-$pagination-border-width) {
&:first-child {
.page-link {
- @include border-start-radius($border-radius);
+ @include border-left-radius($border-radius);
}
}
&:last-child {
.page-link {
- @include border-end-radius($border-radius);
+ @include border-right-radius($border-radius);
}
}
} @else {
diff --git a/src/scss/bootstrap/mixins/_visually-hidden.scss b/src/scss/bootstrap/mixins/_screen-reader.scss
similarity index 71%
rename from src/scss/bootstrap/mixins/_visually-hidden.scss
rename to src/scss/bootstrap/mixins/_screen-reader.scss
index d980696c..b25fe730 100644
--- a/src/scss/bootstrap/mixins/_visually-hidden.scss
+++ b/src/scss/bootstrap/mixins/_screen-reader.scss
@@ -1,11 +1,11 @@
// stylelint-disable declaration-no-important
-// Hide content visually while keeping it accessible to assistive technologies
+// Only display content to screen readers
//
-// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// See: https://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
-@mixin visually-hidden() {
+@mixin sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
@@ -21,8 +21,8 @@
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
-@mixin visually-hidden-focusable() {
+@mixin sr-only-focusable {
&:not(:focus) {
- @include visually-hidden();
+ @include sr-only();
}
}
diff --git a/src/scss/bootstrap/mixins/_table-variants.scss b/src/scss/bootstrap/mixins/_table-variants.scss
index 9fd0fb02..89f482c3 100644
--- a/src/scss/bootstrap/mixins/_table-variants.scss
+++ b/src/scss/bootstrap/mixins/_table-variants.scss
@@ -6,13 +6,13 @@
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
- --#{$variable-prefix}table-bg: #{$background};
- --#{$variable-prefix}table-striped-bg: #{$striped-bg};
- --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
- --#{$variable-prefix}table-active-bg: #{$active-bg};
- --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
- --#{$variable-prefix}table-hover-bg: #{$hover-bg};
- --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
+ --bs-table-bg: #{$background};
+ --bs-table-striped-bg: #{$striped-bg};
+ --bs-table-striped-color: #{color-contrast($striped-bg)};
+ --bs-table-active-bg: #{$active-bg};
+ --bs-table-active-color: #{color-contrast($active-bg)};
+ --bs-table-hover-bg: #{$hover-bg};
+ --bs-table-hover-color: #{color-contrast($hover-bg)};
color: $color;
border-color: mix($color, $background, percentage($table-border-factor));
diff --git a/src/scss/bootstrap/mixins/_transition.scss b/src/scss/bootstrap/mixins/_transition.scss
index d437f6d8..bf4c00a6 100644
--- a/src/scss/bootstrap/mixins/_transition.scss
+++ b/src/scss/bootstrap/mixins/_transition.scss
@@ -1,4 +1,4 @@
-// stylelint-disable property-disallowed-list
+// stylelint-disable property-blacklist
@mixin transition($transition...) {
@if length($transition) == 0 {
$transition: $transition-base;
diff --git a/src/scss/bootstrap/mixins/_utilities.scss b/src/scss/bootstrap/mixins/_utilities.scss
index 4f81668f..cd9f9305 100644
--- a/src/scss/bootstrap/mixins/_utilities.scss
+++ b/src/scss/bootstrap/mixins/_utilities.scss
@@ -4,7 +4,7 @@
$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' {
+ @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
$values: zip($values, $values);
}
@@ -12,33 +12,18 @@
$properties: map-get($utility, property);
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
- @if type-of($properties) == 'string' {
+ @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);
+ $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+ $property-class: if($property-class == null, "", $property-class);
- // State params to generate pseudo-classes
- $state: if(map-has-key($utility, state), map-get($utility, state), ());
-
- $infix: if(
- $property-class == '' and str-slice($infix, 1, 1) == '-',
- str-slice($infix, 2),
- $infix
- );
+ $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
// Don't prefix if value key is null (eg. with shadow class)
- $property-class-modifier: if(
- $key,
- if($property-class == '' and $infix == '', '', '-') + $key,
- ''
- );
+ $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
@if map-get($utility, rfs) {
// Inside the media query
@@ -47,33 +32,18 @@
// Do not render anything if fluid and non fluid values are the same
$value: if($val == rfs-fluid-value($value), null, $val);
- } @else {
+ }
+ @else {
$value: rfs-fluid-value($value);
}
}
- $is-rtl: map-get($utility, rtl);
-
@if $value != null {
- @if $is-rtl == false {
- /* rtl:begin:remove */
- }
.#{$property-class + $infix + $property-class-modifier} {
@each $property in $properties {
#{$property}: $value if($enable-important-utilities, !important, null);
}
}
-
- @each $pseudo in $state {
- .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
- @each $property in $properties {
- #{$property}: $value if($enable-important-utilities, !important, null);
- }
- }
- }
- @if $is-rtl == false {
- /* rtl:end:remove */
- }
}
}
}
diff --git a/src/scss/free/_accordion.scss b/src/scss/free/_accordion.scss
deleted file mode 100644
index c7ade443..00000000
--- a/src/scss/free/_accordion.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.accordion-button::after {
- font-weight: $font-weight-bold;
- font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
- content: '\f077';
-}
diff --git a/src/scss/free/_alert.scss b/src/scss/free/_alert.scss
index 47cc3357..c17042ec 100644
--- a/src/scss/free/_alert.scss
+++ b/src/scss/free/_alert.scss
@@ -2,17 +2,4 @@
.alert {
border: 0;
-}
-
-.alert-absolute {
- position: absolute;
-}
-
-.alert-fixed {
- position: fixed;
- z-index: $zindex-alert;
-}
-
-.parent-alert-relative {
- position: relative;
-}
+}
\ No newline at end of file
diff --git a/src/scss/free/_animate-extended.scss b/src/scss/free/_animate-extended.scss
new file mode 100644
index 00000000..1f7c2790
--- /dev/null
+++ b/src/scss/free/_animate-extended.scss
@@ -0,0 +1,413 @@
+// animations
+
+@keyframes dropIn {
+ 0% {
+ opacity: 0;
+ transform: scale(0);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+.dropIn {
+ transform-origin: top center;
+ animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
+ animation-name: dropIn;
+}
+
+@keyframes dropOut {
+ 0% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(0);
+ }
+}
+
+.dropOut {
+ transform-origin: top center;
+ animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
+ animation-name: dropOut;
+}
+
+@keyframes flyIn {
+ 0% {
+ opacity: 0;
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+ 20% {
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+ 40% {
+ transform: scale3d(0.9, 0.9, 0.9);
+ }
+ 60% {
+ opacity: 1;
+ transform: scale3d(1.03, 1.03, 1.03);
+ }
+ 80% {
+ transform: scale3d(0.97, 0.97, 0.97);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.flyIn {
+ animation-name: flyIn;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes flyInUp {
+ 0% {
+ opacity: 0;
+ transform: translate3d(0, 1500px, 0);
+ }
+ 60% {
+ opacity: 1;
+ transform: translate3d(0, -20px, 0);
+ }
+ 75% {
+ transform: translate3d(0, 10px, 0);
+ }
+ 90% {
+ transform: translate3d(0, -5px, 0);
+ }
+ 100% {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.flyInUp {
+ animation-name: flyInUp;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes flyInDown {
+ 0% {
+ opacity: 0;
+ transform: translate3d(0, -1500px, 0);
+ }
+ 60% {
+ opacity: 1;
+ transform: translate3d(0, 25px, 0);
+ }
+ 75% {
+ transform: translate3d(0, -10px, 0);
+ }
+ 90% {
+ transform: translate3d(0, 5px, 0);
+ }
+ 100% {
+ transform: none;
+ }
+}
+
+.flyInDown {
+ animation-name: flyInDown;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes flyInLeft {
+ 0% {
+ opacity: 0;
+ transform: translate3d(1500px, 0, 0);
+ }
+ 60% {
+ opacity: 1;
+ transform: translate3d(-25px, 0, 0);
+ }
+ 75% {
+ transform: translate3d(10px, 0, 0);
+ }
+ 90% {
+ transform: translate3d(-5px, 0, 0);
+ }
+ 100% {
+ transform: none;
+ }
+}
+
+.flyInLeft {
+ animation-name: flyInLeft;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes flyInRight {
+ 0% {
+ opacity: 0;
+ transform: translate3d(-1500px, 0, 0);
+ }
+ 60% {
+ opacity: 1;
+ transform: translate3d(25px, 0, 0);
+ }
+ 75% {
+ transform: translate3d(-10px, 0, 0);
+ }
+ 90% {
+ transform: translate3d(5px, 0, 0);
+ }
+ 100% {
+ transform: none;
+ }
+}
+
+.flyInRight {
+ animation-name: flyInRight;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes flyOut {
+ 20% {
+ transform: scale3d(0.9, 0.9, 0.9);
+ }
+ 50%,
+ 55% {
+ opacity: 1;
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+}
+
+.flyOut {
+ animation-name: flyOut;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes flyOutUp {
+ 20% {
+ transform: translate3d(0, 10px, 0);
+ }
+ 40%,
+ 45% {
+ opacity: 1;
+ transform: translate3d(0, -20px, 0);
+ }
+ 100% {
+ opacity: 0;
+ transform: translate3d(0, 2000px, 0);
+ }
+}
+
+.flyOutUp {
+ animation-name: flyOutUp;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes flyOutDown {
+ 20% {
+ transform: translate3d(0, -10px, 0);
+ }
+ 40%,
+ 45% {
+ opacity: 1;
+ transform: translate3d(0, 20px, 0);
+ }
+ 100% {
+ opacity: 0;
+ transform: translate3d(0, -2000px, 0);
+ }
+}
+
+.flyOutDown {
+ animation-name: flyOutDown;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes flyOutLeft {
+ 20% {
+ opacity: 1;
+ transform: translate3d(-20px, 0, 0);
+ }
+ 100% {
+ opacity: 0;
+ transform: translate3d(2000px, 0, 0);
+ }
+}
+
+.flyOutLeft {
+ animation-name: flyOutLeft;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes flyOutRight {
+ 20% {
+ opacity: 1;
+ transform: translate3d(20px, 0, 0);
+ }
+ 100% {
+ opacity: 0;
+ transform: translate3d(-2000px, 0, 0);
+ }
+}
+
+.flyOutRight {
+ animation-name: flyOutRight;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes browseIn {
+ 0% {
+ transform: scale(0.8) translateZ(0px);
+ z-index: -1;
+ }
+ 10% {
+ transform: scale(0.8) translateZ(0px);
+ z-index: -1;
+ opacity: 0.7;
+ }
+ 80% {
+ transform: scale(1.05) translateZ(0px);
+ opacity: 1;
+ z-index: 999;
+ }
+ 100% {
+ transform: scale(1) translateZ(0px);
+ z-index: 999;
+ }
+}
+
+.browseIn {
+ animation-name: browseIn;
+}
+
+@keyframes browseOutLeft {
+ 0% {
+ z-index: 999;
+ transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+ }
+ 50% {
+ z-index: -1;
+ transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+ }
+ 80% {
+ opacity: 1;
+ }
+ 100% {
+ z-index: -1;
+ transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+ opacity: 0;
+ }
+}
+
+.browseOut,
+.browseOutLeft {
+ animation-name: browseOutLeft;
+}
+
+@keyframes browseOutRight {
+ 0% {
+ z-index: 999;
+ transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+ }
+ 50% {
+ z-index: 1;
+ transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+ }
+ 80% {
+ opacity: 1;
+ }
+ 100% {
+ z-index: 1;
+ transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+ opacity: 0;
+ }
+}
+
+.browseOutRight {
+ animation-name: browseOutRight;
+}
+
+@keyframes jiggle {
+ 0% {
+ transform: scale3d(1, 1, 1);
+ }
+ 30% {
+ transform: scale3d(1.25, 0.75, 1);
+ }
+ 40% {
+ transform: scale3d(0.75, 1.25, 1);
+ }
+ 50% {
+ transform: scale3d(1.15, 0.85, 1);
+ }
+ 65% {
+ transform: scale3d(0.95, 1.05, 1);
+ }
+ 75% {
+ transform: scale3d(1.05, 0.95, 1);
+ }
+ 100% {
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.jiggle {
+ animation-name: jiggle;
+}
+
+@keyframes flash {
+ 0%,
+ 50%,
+ 100% {
+ opacity: 1;
+ }
+ 25%,
+ 75% {
+ opacity: 0;
+ }
+}
+
+.flash {
+ animation-duration: 750ms;
+ animation-name: flash;
+}
+
+@keyframes shake {
+ 0%,
+ 100% {
+ transform: translateX(0);
+ }
+ 10%,
+ 30%,
+ 50%,
+ 70%,
+ 90% {
+ transform: translateX(-10px);
+ }
+ 20%,
+ 40%,
+ 60%,
+ 80% {
+ transform: translateX(10px);
+ }
+}
+
+.shake {
+ animation-name: shake;
+}
+
+@keyframes glow {
+ 0% {
+ background-color: #fcfcfd;
+ }
+ 30% {
+ background-color: #fff6cd;
+ }
+ 100% {
+ background-color: #fcfcfd;
+ }
+}
+
+.glow {
+ animation-name: glow;
+}
diff --git a/src/scss/free/_animate.scss b/src/scss/free/_animate.scss
new file mode 100644
index 00000000..b2eb3de2
--- /dev/null
+++ b/src/scss/free/_animate.scss
@@ -0,0 +1,399 @@
+// animations
+
+.animated {
+ animation-duration: 1s;
+ animation-fill-mode: both;
+ &.infinite {
+ animation-iteration-count: infinite;
+ }
+ &.delay-1s {
+ animation-delay: 1s;
+ }
+ &.delay-2s {
+ animation-delay: 2s;
+ }
+ &.delay-3s {
+ animation-delay: 3s;
+ }
+ &.delay-4s {
+ animation-delay: 4s;
+ }
+ &.delay-5s {
+ animation-delay: 5s;
+ }
+ &.fast {
+ animation-duration: 800ms;
+ }
+ &.faster {
+ animation-duration: 500ms;
+ }
+ &.slow {
+ animation-duration: 2s;
+ }
+ &.slower {
+ animation-duration: 3s;
+ }
+}
+
+@media (prefers-reduced-motion) {
+ .animated {
+ transition: none !important;
+ animation: unset !important;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.fadeIn {
+ animation-name: fadeIn;
+}
+
+@keyframes fadeInDown {
+ from {
+ opacity: 0;
+ transform: translate3d(0, -100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInDown {
+ animation-name: fadeInDown;
+}
+
+@keyframes fadeInLeft {
+ from {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInLeft {
+ animation-name: fadeInLeft;
+}
+
+@keyframes fadeInRight {
+ from {
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInRight {
+ animation-name: fadeInRight;
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translate3d(0, 100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInUp {
+ animation-name: fadeInUp;
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.fadeOut {
+ animation-name: fadeOut;
+}
+
+@keyframes fadeOutDown {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+.fadeOutDown {
+ animation-name: fadeOutDown;
+}
+
+@keyframes fadeOutLeft {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+.fadeOutLeft {
+ animation-name: fadeOutLeft;
+}
+
+@keyframes fadeOutRight {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+.fadeOutRight {
+ animation-name: fadeOutRight;
+}
+
+@keyframes fadeOutUp {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+.fadeOutUp {
+ animation-name: fadeOutUp;
+}
+
+@keyframes slideInDown {
+ from {
+ visibility: visible;
+ transform: translate3d(0, -100%, 0);
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInDown {
+ animation-name: slideInDown;
+}
+
+@keyframes slideInLeft {
+ from {
+ visibility: visible;
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInLeft {
+ animation-name: slideInLeft;
+}
+
+@keyframes slideInRight {
+ from {
+ visibility: visible;
+ transform: translate3d(100%, 0, 0);
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInRight {
+ animation-name: slideInRight;
+}
+
+@keyframes slideInUp {
+ from {
+ visibility: visible;
+ transform: translate3d(0, 100%, 0);
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInUp {
+ animation-name: slideInUp;
+}
+
+@keyframes slideOutDown {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+.slideOutDown {
+ animation-name: slideOutDown;
+}
+
+@keyframes slideOutLeft {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+.slideOutLeft {
+ animation-name: slideOutLeft;
+}
+
+@keyframes slideOutRight {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+.slideOutRight {
+ animation-name: slideOutRight;
+}
+
+@keyframes slideOutUp {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+.slideOutUp {
+ animation-name: slideOutUp;
+}
+
+@keyframes zoomIn {
+ from {
+ opacity: 0;
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
+.zoomIn {
+ animation-name: zoomIn;
+}
+
+@keyframes zoomOut {
+ from {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0;
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.zoomOut {
+ animation-name: zoomOut;
+}
+
+@keyframes tada {
+ from {
+ transform: scale3d(1, 1, 1);
+ }
+
+ 10%,
+ 20% {
+ transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+ }
+
+ 30%,
+ 50%,
+ 70%,
+ 90% {
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+ }
+
+ 40%,
+ 60%,
+ 80% {
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+ }
+
+ to {
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.tada {
+ animation-name: tada;
+}
+
+@keyframes pulse {
+ from {
+ transform: scale3d(1, 1, 1);
+ }
+
+ 50% {
+ transform: scale3d(1.05, 1.05, 1.05);
+ }
+
+ to {
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.pulse {
+ animation-name: pulse;
+}
diff --git a/src/scss/free/_badge.scss b/src/scss/free/_badge.scss
index 183c4f38..421ddb64 100644
--- a/src/scss/free/_badge.scss
+++ b/src/scss/free/_badge.scss
@@ -1,12 +1,12 @@
// Badge
.badge-dot {
position: absolute;
- border-radius: $badge-dot-border-radius;
- height: $badge-dot-height;
+ border-radius: 4.5px;
+ height: 9px;
min-width: 0;
padding: 0;
- width: $badge-dot-width;
- margin-left: $badge-dot-margin-left;
+ width: 9px;
+ margin-left: -3px;
&:empty {
display: inline-block;
}
@@ -14,8 +14,6 @@
.badge-notification {
position: absolute;
- font-size: $badge-notification-font-size;
- margin-top: $badge-notification-margin-top;
- margin-left: $badge-notification-margin-left;
- padding: $badge-notification-padding-y $badge-notification-padding-x;
-}
+ margin-top: -5px;
+ margin-left: -5px;
+}
\ No newline at end of file
diff --git a/src/scss/free/_breadcrumb.scss b/src/scss/free/_breadcrumb.scss
deleted file mode 100644
index abd6d85c..00000000
--- a/src/scss/free/_breadcrumb.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// Breadcrumb
-
-.navbar {
- .breadcrumb {
- background-color: transparent;
- margin-bottom: 0;
-
- .breadcrumb-item {
- a {
- color: $breadcrumb-item-color;
- transition: $breadcrumb-item-transition;
- &:hover,
- &:focus {
- color: $breadcrumb-item-hover-color;
- }
- }
- + .breadcrumb-item {
- &:before {
- color: $breadcrumb-item-before-color;
- }
- }
- }
- }
-}
diff --git a/src/scss/free/_button-group.scss b/src/scss/free/_button-group.scss
index cffeadef..cbed4d97 100644
--- a/src/scss/free/_button-group.scss
+++ b/src/scss/free/_button-group.scss
@@ -1,12 +1,10 @@
-//
-// Button group styles
-//
+// Button group
-.btn-group,
-.btn-group-vertical {
+.btn-group {
box-shadow: $btn-box-shadow;
- border-radius: $btn-group-border-radius;
- transition: $btn-group-transition;
+ border-radius: calc(0.25rem - 1px);
+ 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;
&:hover {
box-shadow: $btn-hover-box-shadow;
diff --git a/src/scss/free/_buttons.scss b/src/scss/free/_buttons.scss
index d06d9e66..28df54d7 100644
--- a/src/scss/free/_buttons.scss
+++ b/src/scss/free/_buttons.scss
@@ -1,22 +1,18 @@
-//
-// Base styles
-//
+// Buttons base styles
.btn {
font-family: $btn-font-family;
+ line-height: 1.5;
text-transform: uppercase;
vertical-align: bottom;
+ padding-top: 10px;
+ padding-bottom: 8px;
border: 0;
box-shadow: $btn-box-shadow;
- font-weight: $btn-font-weight;
- @include button-size-mdb(
- $btn-padding-top,
- $btn-padding-right,
- $btn-padding-bottom,
- $btn-padding-left,
- $btn-font-size,
- $btn-line-height
- );
+ font-size: 12px;
+ padding-left: 24px;
+ padding-right: 24px;
+ font-weight: 500;
&:hover {
box-shadow: $btn-hover-box-shadow;
@@ -42,42 +38,18 @@
box-shadow: $btn-box-shadow;
border: 0;
}
-
- .btn-check:focus + &,
- &:focus {
- outline: 0;
- box-shadow: $btn-focus-box-shadow;
- }
}
-//
-// Button block
-//
-
-.btn-block {
- display: block;
- width: 100%;
-
- // Vertically space out multiple block buttons
- + .btn-block {
- margin-top: $btn-block-spacing-y;
- }
-}
-
-//
-// Outline option
-//
+// Buttons outline
[class*='btn-outline-'] {
- border-width: $btn-border-width;
+ border-width: 2px;
border-style: solid;
box-shadow: none;
- @include button-outline-size-mdb(
- $btn-outline-padding-top,
- $btn-outline-padding-right,
- $btn-outline-padding-bottom,
- $btn-outline-padding-left
- );
+ padding-top: 8px;
+ padding-bottom: 6px;
+ padding-left: 22px;
+ padding-right: 22px;
&:hover {
box-shadow: none;
@@ -105,28 +77,22 @@
box-shadow: none;
}
- &.btn-lg {
- @include button-outline-size-mdb(
- $btn-outline-padding-top-lg,
- $btn-outline-padding-right-lg,
- $btn-outline-padding-bottom-lg,
- $btn-outline-padding-left-lg
- );
+ &.btn-sm {
+ padding-top: 4px;
+ padding-bottom: 3px;
+ padding-right: 14px;
+ padding-left: 14px;
}
- &.btn-sm {
- @include button-outline-size-mdb(
- $btn-outline-padding-top-sm,
- $btn-outline-padding-right-sm,
- $btn-outline-padding-bottom-sm,
- $btn-outline-padding-left-sm
- );
+ &.btn-lg {
+ padding-top: 10px;
+ padding-bottom: 9px;
+ padding-right: 25px;
+ padding-left: 25px;
}
}
-//
// Alternate buttons
-//
@each $color, $value in $theme-colors {
.btn-#{$color} {
@@ -134,9 +100,7 @@
}
}
-//
// Alternate buttons outline
-//
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@@ -144,34 +108,31 @@
}
}
-//
// Button Sizes
-//
.btn-lg {
- @include button-size-mdb(
- $btn-padding-top-lg,
- $btn-padding-right-lg,
- $btn-padding-bottom-lg,
- $btn-padding-left-lg,
- $btn-font-size-lg,
- $btn-line-height-lg
- );
+ // @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
+
+ line-height: 1.6;
+ padding-top: 12px;
+ padding-bottom: 11px;
+ font-size: 14px;
+ padding-left: 27px;
+ padding-right: 27px;
}
.btn-sm {
- @include button-size-mdb(
- $btn-padding-top-sm,
- $btn-padding-right-sm,
- $btn-padding-bottom-sm,
- $btn-padding-left-sm,
- $btn-font-size-sm,
- $btn-line-height-sm
- );
+ // @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
+ line-height: 1.5;
+ font-size: 12px;
+ padding-top: 6px;
+ padding-bottom: 5px;
+ padding-right: 16px;
+ padding-left: 16px;
}
// Link buttons
-//
+
// Make a button look and behave like a link
.btn-link {
@@ -181,24 +142,24 @@
&:hover {
box-shadow: none;
text-decoration: none;
- background-color: $btn-link-bgc;
+ background-color: #f5f5f5;
}
&:focus,
&.focus {
box-shadow: none;
text-decoration: none;
- background-color: $btn-link-bgc;
+ background-color: #f5f5f5;
}
&:active,
&.active {
box-shadow: none;
- background-color: $btn-link-bgc;
+ background-color: #f5f5f5;
&:focus {
box-shadow: none;
- background-color: $btn-link-bgc;
+ background-color: #f5f5f5;
}
}
@@ -209,84 +170,6 @@
}
}
-//
-// Rounded option
-//
-
.btn-rounded {
- border-radius: $btn-rounded-border-radius;
-}
-
-//
-// Floating option
-//
-
-.btn-floating,
-[class*='btn-outline-'].btn-floating {
- border-radius: $btn-floating-border-radius;
- padding: 0;
- position: relative;
-}
-
-.btn-floating {
- width: $btn-floating-width;
- height: $btn-floating-height;
-
- .fas,
- .far,
- .fab {
- width: $btn-floating-icon-width;
- line-height: $btn-floating-icon-line-height;
- }
-
- &.btn-lg {
- width: $btn-floating-width-lg;
- height: $btn-floating-height-lg;
-
- .fas,
- .far,
- .fab {
- width: $btn-floating-icon-width-lg;
- line-height: $btn-floating-icon-line-height-lg;
- }
- }
-
- &.btn-sm {
- width: $btn-floating-width-sm;
- height: $btn-floating-height-sm;
-
- .fas,
- .far,
- .fab {
- width: $btn-floating-icon-width-sm;
- line-height: $btn-floating-icon-line-height-sm;
- }
- }
-}
-
-[class*='btn-outline-'].btn-floating {
- .fas,
- .far,
- .fab {
- width: $btn-outline-floating-icon-width;
- line-height: $btn-outline-floating-icon-line-height;
- }
-
- &.btn-lg {
- .fas,
- .far,
- .fab {
- width: $btn-outline-floating-icon-width-lg;
- line-height: $btn-outline-floating-icon-line-height-lg;
- }
- }
-
- &.btn-sm {
- .fas,
- .far,
- .fab {
- width: $btn-outline-floating-icon-width-sm;
- line-height: $btn-outline-floating-icon-line-height-sm;
- }
- }
+ border-radius: 10rem;
}
diff --git a/src/scss/free/_card.scss b/src/scss/free/_card.scss
index 2b161aea..0e6d50a8 100644
--- a/src/scss/free/_card.scss
+++ b/src/scss/free/_card.scss
@@ -2,25 +2,5 @@
.card {
border: 0;
- box-shadow: $card-box-shadow;
-
- .bg-image {
- border-top-left-radius: $card-border-radius;
- border-top-right-radius: $card-border-radius;
- }
-}
-
-.card-header {
- background-color: $card-header-background-color;
-}
-
-.card-body {
- &[class*='bg-'] {
- border-bottom-left-radius: $card-border-radius;
- border-bottom-right-radius: $card-border-radius;
- }
-}
-
-.card-footer {
- background-color: $card-footer-background-color;
+ box-shadow: $box-shadow-3;
}
diff --git a/src/scss/free/_carousel.scss b/src/scss/free/_carousel.scss
deleted file mode 100644
index 49cea40a..00000000
--- a/src/scss/free/_carousel.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.carousel-control-prev-icon {
- &::after {
- content: '\f053';
- font-weight: $font-weight-bold;
- font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
- font-size: 1.7rem;
- }
-}
-.carousel-control-next-icon {
- &::after {
- content: '\f054';
- font-weight: $font-weight-bold;
- font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
- font-size: 1.7rem;
- }
-}
diff --git a/src/scss/free/_close.scss b/src/scss/free/_close.scss
deleted file mode 100644
index 9bff1746..00000000
--- a/src/scss/free/_close.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// transparent background and border properties included for button version.
-// iOS requires the button element instead of an anchor tag.
-// If you want the anchor version, it requires `href="#"`.
-// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-.btn-close {
- &:focus {
- box-shadow: none;
- }
-}
diff --git a/src/scss/free/_deprecated.scss b/src/scss/free/_deprecated.scss
deleted file mode 100644
index dd592113..00000000
--- a/src/scss/free/_deprecated.scss
+++ /dev/null
@@ -1,1195 +0,0 @@
-// 12.10.2020 ---------------------------------------------------
-.close {
- font-size: calc(1.275rem + 0.3vw);
- font-weight: 700;
- line-height: 1;
- color: #000;
- text-shadow: 0 1px 0 #fff;
- opacity: 0.5;
-
- // Override 's hover style
- &:hover {
- color: #000;
- text-decoration: none;
- }
-
- &:hover,
- &:focus {
- opacity: 0.75;
- }
-
- &:disabled,
- &.disabled {
- pointer-events: none;
- }
-}
-
-// Additional properties for button version
-// iOS requires the button element instead of an anchor tag.
-// If you want the anchor version, it requires `href="#"`.
-// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-// stylelint-disable-next-line selector-no-qualifying-type
-button.close {
- padding: 0;
- background-color: transparent;
- border: 0;
-}
-
-// Credit: Nicolas Gallagher and SUIT CSS.
-.embed-responsive {
- position: relative;
- width: 100%;
-
- &::before {
- display: block;
- content: '';
- }
-
- .embed-responsive-item,
- iframe,
- embed,
- object,
- video {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
-}
-
-.embed-responsive-21by9:before {
- padding-top: 42.85714%;
-}
-
-.embed-responsive-16by9:before {
- padding-top: 56.25%;
-}
-
-.embed-responsive-4by3:before {
- padding-top: 75%;
-}
-
-.embed-responsive-1by1:before {
- padding-top: 100%;
-}
-
-.sr-only,
-.sr-only-focusable:not(:focus) {
- position: absolute !important;
- width: 1px !important;
- height: 1px !important;
- padding: 0 !important;
- margin: -1px !important;
- overflow: hidden !important;
- clip: rect(0, 0, 0, 0) !important;
- white-space: nowrap !important;
- border: 0 !important;
-}
-
-// 23.11.2020
-
-/*!
- * # Semantic UI 2.4.2 - Flag
- * http://github.com/semantic-org/semantic-ui/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Flag
-*******************************/
-
-i.flag:not(.icon) {
- display: inline-block;
- width: 16px;
- height: 11px;
- margin: 0 0.5em 0 0;
- // font-smooth: antialiased;
- line-height: 11px;
- text-decoration: inherit;
- vertical-align: baseline;
- // speak: none;
- backface-visibility: hidden;
-}
-
-/* Sprite */
-i.flag:not(.icon):before {
- display: inline-block;
- width: 16px;
- height: 11px;
- content: '';
- background: url('https://mdbootstrap.com/img/svg/flags.png') no-repeat -108px -1976px;
-}
-
-/* Flag Sprite Based On http://www.famfamfam.com/lab/icons/flags/ */
-
-/*******************************
- Theme Overrides
-*******************************/
-
-i.flag.ad:before,
-i.flag.andorra:before {
- background-position: 0 0;
-}
-i.flag.ae:before,
-i.flag.united.arab.emirates:before,
-i.flag.uae:before {
- background-position: 0 -26px;
-}
-i.flag.af:before,
-i.flag.afghanistan:before {
- background-position: 0 -52px;
-}
-i.flag.ag:before,
-i.flag.antigua:before {
- background-position: 0 -78px;
-}
-i.flag.ai:before,
-i.flag.anguilla:before {
- background-position: 0 -104px;
-}
-i.flag.al:before,
-i.flag.albania:before {
- background-position: 0 -130px;
-}
-i.flag.am:before,
-i.flag.armenia:before {
- background-position: 0 -156px;
-}
-i.flag.an:before,
-i.flag.netherlands.antilles:before {
- background-position: 0 -182px;
-}
-i.flag.ao:before,
-i.flag.angola:before {
- background-position: 0 -208px;
-}
-i.flag.ar:before,
-i.flag.argentina:before {
- background-position: 0 -234px;
-}
-i.flag.as:before,
-i.flag.american.samoa:before {
- background-position: 0 -260px;
-}
-i.flag.at:before,
-i.flag.austria:before {
- background-position: 0 -286px;
-}
-i.flag.au:before,
-i.flag.australia:before {
- background-position: 0 -312px;
-}
-i.flag.aw:before,
-i.flag.aruba:before {
- background-position: 0 -338px;
-}
-i.flag.ax:before,
-i.flag.aland.islands:before {
- background-position: 0 -364px;
-}
-i.flag.az:before,
-i.flag.azerbaijan:before {
- background-position: 0 -390px;
-}
-i.flag.ba:before,
-i.flag.bosnia:before {
- background-position: 0 -416px;
-}
-i.flag.bb:before,
-i.flag.barbados:before {
- background-position: 0 -442px;
-}
-i.flag.bd:before,
-i.flag.bangladesh:before {
- background-position: 0 -468px;
-}
-i.flag.be:before,
-i.flag.belgium:before {
- background-position: 0 -494px;
-}
-i.flag.bf:before,
-i.flag.burkina.faso:before {
- background-position: 0 -520px;
-}
-i.flag.bg:before,
-i.flag.bulgaria:before {
- background-position: 0 -546px;
-}
-i.flag.bh:before,
-i.flag.bahrain:before {
- background-position: 0 -572px;
-}
-i.flag.bi:before,
-i.flag.burundi:before {
- background-position: 0 -598px;
-}
-i.flag.bj:before,
-i.flag.benin:before {
- background-position: 0 -624px;
-}
-i.flag.bm:before,
-i.flag.bermuda:before {
- background-position: 0 -650px;
-}
-i.flag.bn:before,
-i.flag.brunei:before {
- background-position: 0 -676px;
-}
-i.flag.bo:before,
-i.flag.bolivia:before {
- background-position: 0 -702px;
-}
-i.flag.br:before,
-i.flag.brazil:before {
- background-position: 0 -728px;
-}
-i.flag.bs:before,
-i.flag.bahamas:before {
- background-position: 0 -754px;
-}
-i.flag.bt:before,
-i.flag.bhutan:before {
- background-position: 0 -780px;
-}
-i.flag.bv:before,
-i.flag.bouvet.island:before {
- background-position: 0 -806px;
-}
-i.flag.bw:before,
-i.flag.botswana:before {
- background-position: 0 -832px;
-}
-i.flag.by:before,
-i.flag.belarus:before {
- background-position: 0 -858px;
-}
-i.flag.bz:before,
-i.flag.belize:before {
- background-position: 0 -884px;
-}
-i.flag.ca:before,
-i.flag.canada:before {
- background-position: 0 -910px;
-}
-i.flag.cc:before,
-i.flag.cocos.islands:before {
- background-position: 0 -962px;
-}
-i.flag.cd:before,
-i.flag.congo:before {
- background-position: 0 -988px;
-}
-i.flag.cf:before,
-i.flag.central.african.republic:before {
- background-position: 0 -1014px;
-}
-i.flag.cg:before,
-i.flag.congo.brazzaville:before {
- background-position: 0 -1040px;
-}
-i.flag.ch:before,
-i.flag.switzerland:before {
- background-position: 0 -1066px;
-}
-i.flag.ci:before,
-i.flag.cote.divoire:before {
- background-position: 0 -1092px;
-}
-i.flag.ck:before,
-i.flag.cook.islands:before {
- background-position: 0 -1118px;
-}
-i.flag.cl:before,
-i.flag.chile:before {
- background-position: 0 -1144px;
-}
-i.flag.cm:before,
-i.flag.cameroon:before {
- background-position: 0 -1170px;
-}
-i.flag.cn:before,
-i.flag.china:before {
- background-position: 0 -1196px;
-}
-i.flag.co:before,
-i.flag.colombia:before {
- background-position: 0 -1222px;
-}
-i.flag.cr:before,
-i.flag.costa.rica:before {
- background-position: 0 -1248px;
-}
-i.flag.cs:before,
-i.flag.serbia:before {
- background-position: 0 -1274px;
-}
-i.flag.cu:before,
-i.flag.cuba:before {
- background-position: 0 -1300px;
-}
-i.flag.cv:before,
-i.flag.cape.verde:before {
- background-position: 0 -1326px;
-}
-i.flag.cx:before,
-i.flag.christmas.island:before {
- background-position: 0 -1352px;
-}
-i.flag.cy:before,
-i.flag.cyprus:before {
- background-position: 0 -1378px;
-}
-i.flag.cz:before,
-i.flag.czech.republic:before {
- background-position: 0 -1404px;
-}
-i.flag.de:before,
-i.flag.germany:before {
- background-position: 0 -1430px;
-}
-i.flag.dj:before,
-i.flag.djibouti:before {
- background-position: 0 -1456px;
-}
-i.flag.dk:before,
-i.flag.denmark:before {
- background-position: 0 -1482px;
-}
-i.flag.dm:before,
-i.flag.dominica:before {
- background-position: 0 -1508px;
-}
-i.flag.do:before,
-i.flag.dominican.republic:before {
- background-position: 0 -1534px;
-}
-i.flag.dz:before,
-i.flag.algeria:before {
- background-position: 0 -1560px;
-}
-i.flag.ec:before,
-i.flag.ecuador:before {
- background-position: 0 -1586px;
-}
-i.flag.ee:before,
-i.flag.estonia:before {
- background-position: 0 -1612px;
-}
-i.flag.eg:before,
-i.flag.egypt:before {
- background-position: 0 -1638px;
-}
-i.flag.eh:before,
-i.flag.western.sahara:before {
- background-position: 0 -1664px;
-}
-i.flag.gb.eng:before,
-i.flag.england:before {
- background-position: 0 -1690px;
-}
-i.flag.er:before,
-i.flag.eritrea:before {
- background-position: 0 -1716px;
-}
-i.flag.es:before,
-i.flag.spain:before {
- background-position: 0 -1742px;
-}
-i.flag.et:before,
-i.flag.ethiopia:before {
- background-position: 0 -1768px;
-}
-i.flag.eu:before,
-i.flag.european.union:before {
- background-position: 0 -1794px;
-}
-i.flag.fi:before,
-i.flag.finland:before {
- background-position: 0 -1846px;
-}
-i.flag.fj:before,
-i.flag.fiji:before {
- background-position: 0 -1872px;
-}
-i.flag.fk:before,
-i.flag.falkland.islands:before {
- background-position: 0 -1898px;
-}
-i.flag.fm:before,
-i.flag.micronesia:before {
- background-position: 0 -1924px;
-}
-i.flag.fo:before,
-i.flag.faroe.islands:before {
- background-position: 0 -1950px;
-}
-i.flag.fr:before,
-i.flag.france:before {
- background-position: 0 -1976px;
-}
-i.flag.ga:before,
-i.flag.gabon:before {
- background-position: -36px 0;
-}
-i.flag.gb:before,
-i.flag.uk:before,
-i.flag.united.kingdom:before {
- background-position: -36px -26px;
-}
-i.flag.gd:before,
-i.flag.grenada:before {
- background-position: -36px -52px;
-}
-i.flag.ge:before,
-i.flag.georgia:before {
- background-position: -36px -78px;
-}
-i.flag.gf:before,
-i.flag.french.guiana:before {
- background-position: -36px -104px;
-}
-i.flag.gh:before,
-i.flag.ghana:before {
- background-position: -36px -130px;
-}
-i.flag.gi:before,
-i.flag.gibraltar:before {
- background-position: -36px -156px;
-}
-i.flag.gl:before,
-i.flag.greenland:before {
- background-position: -36px -182px;
-}
-i.flag.gm:before,
-i.flag.gambia:before {
- background-position: -36px -208px;
-}
-i.flag.gn:before,
-i.flag.guinea:before {
- background-position: -36px -234px;
-}
-i.flag.gp:before,
-i.flag.guadeloupe:before {
- background-position: -36px -260px;
-}
-i.flag.gq:before,
-i.flag.equatorial.guinea:before {
- background-position: -36px -286px;
-}
-i.flag.gr:before,
-i.flag.greece:before {
- background-position: -36px -312px;
-}
-i.flag.gs:before,
-i.flag.sandwich.islands:before {
- background-position: -36px -338px;
-}
-i.flag.gt:before,
-i.flag.guatemala:before {
- background-position: -36px -364px;
-}
-i.flag.gu:before,
-i.flag.guam:before {
- background-position: -36px -390px;
-}
-i.flag.gw:before,
-i.flag.guinea-bissau:before {
- background-position: -36px -416px;
-}
-i.flag.gy:before,
-i.flag.guyana:before {
- background-position: -36px -442px;
-}
-i.flag.hk:before,
-i.flag.hong.kong:before {
- background-position: -36px -468px;
-}
-i.flag.hm:before,
-i.flag.heard.island:before {
- background-position: -36px -494px;
-}
-i.flag.hn:before,
-i.flag.honduras:before {
- background-position: -36px -520px;
-}
-i.flag.hr:before,
-i.flag.croatia:before {
- background-position: -36px -546px;
-}
-i.flag.ht:before,
-i.flag.haiti:before {
- background-position: -36px -572px;
-}
-i.flag.hu:before,
-i.flag.hungary:before {
- background-position: -36px -598px;
-}
-i.flag.id:before,
-i.flag.indonesia:before {
- background-position: -36px -624px;
-}
-i.flag.ie:before,
-i.flag.ireland:before {
- background-position: -36px -650px;
-}
-i.flag.il:before,
-i.flag.israel:before {
- background-position: -36px -676px;
-}
-i.flag.in:before,
-i.flag.india:before {
- background-position: -36px -702px;
-}
-i.flag.io:before,
-i.flag.indian.ocean.territory:before {
- background-position: -36px -728px;
-}
-i.flag.iq:before,
-i.flag.iraq:before {
- background-position: -36px -754px;
-}
-i.flag.ir:before,
-i.flag.iran:before {
- background-position: -36px -780px;
-}
-i.flag.is:before,
-i.flag.iceland:before {
- background-position: -36px -806px;
-}
-i.flag.it:before,
-i.flag.italy:before {
- background-position: -36px -832px;
-}
-i.flag.jm:before,
-i.flag.jamaica:before {
- background-position: -36px -858px;
-}
-i.flag.jo:before,
-i.flag.jordan:before {
- background-position: -36px -884px;
-}
-i.flag.jp:before,
-i.flag.japan:before {
- background-position: -36px -910px;
-}
-i.flag.ke:before,
-i.flag.kenya:before {
- background-position: -36px -936px;
-}
-i.flag.kg:before,
-i.flag.kyrgyzstan:before {
- background-position: -36px -962px;
-}
-i.flag.kh:before,
-i.flag.cambodia:before {
- background-position: -36px -988px;
-}
-i.flag.ki:before,
-i.flag.kiribati:before {
- background-position: -36px -1014px;
-}
-i.flag.km:before,
-i.flag.comoros:before {
- background-position: -36px -1040px;
-}
-i.flag.kn:before,
-i.flag.saint.kitts.and.nevis:before {
- background-position: -36px -1066px;
-}
-i.flag.kp:before,
-i.flag.north.korea:before {
- background-position: -36px -1092px;
-}
-i.flag.kr:before,
-i.flag.south.korea:before {
- background-position: -36px -1118px;
-}
-i.flag.kw:before,
-i.flag.kuwait:before {
- background-position: -36px -1144px;
-}
-i.flag.ky:before,
-i.flag.cayman.islands:before {
- background-position: -36px -1170px;
-}
-i.flag.kz:before,
-i.flag.kazakhstan:before {
- background-position: -36px -1196px;
-}
-i.flag.la:before,
-i.flag.laos:before {
- background-position: -36px -1222px;
-}
-i.flag.lb:before,
-i.flag.lebanon:before {
- background-position: -36px -1248px;
-}
-i.flag.lc:before,
-i.flag.saint.lucia:before {
- background-position: -36px -1274px;
-}
-i.flag.li:before,
-i.flag.liechtenstein:before {
- background-position: -36px -1300px;
-}
-i.flag.lk:before,
-i.flag.sri.lanka:before {
- background-position: -36px -1326px;
-}
-i.flag.lr:before,
-i.flag.liberia:before {
- background-position: -36px -1352px;
-}
-i.flag.ls:before,
-i.flag.lesotho:before {
- background-position: -36px -1378px;
-}
-i.flag.lt:before,
-i.flag.lithuania:before {
- background-position: -36px -1404px;
-}
-i.flag.lu:before,
-i.flag.luxembourg:before {
- background-position: -36px -1430px;
-}
-i.flag.lv:before,
-i.flag.latvia:before {
- background-position: -36px -1456px;
-}
-i.flag.ly:before,
-i.flag.libya:before {
- background-position: -36px -1482px;
-}
-i.flag.ma:before,
-i.flag.morocco:before {
- background-position: -36px -1508px;
-}
-i.flag.mc:before,
-i.flag.monaco:before {
- background-position: -36px -1534px;
-}
-i.flag.md:before,
-i.flag.moldova:before {
- background-position: -36px -1560px;
-}
-i.flag.me:before,
-i.flag.montenegro:before {
- background-position: -36px -1586px;
-}
-i.flag.mg:before,
-i.flag.madagascar:before {
- background-position: -36px -1613px;
-}
-i.flag.mh:before,
-i.flag.marshall.islands:before {
- background-position: -36px -1639px;
-}
-i.flag.mk:before,
-i.flag.macedonia:before {
- background-position: -36px -1665px;
-}
-i.flag.ml:before,
-i.flag.mali:before {
- background-position: -36px -1691px;
-}
-i.flag.mm:before,
-i.flag.myanmar:before,
-i.flag.burma:before {
- background-position: -73px -1821px;
-}
-i.flag.mn:before,
-i.flag.mongolia:before {
- background-position: -36px -1743px;
-}
-i.flag.mo:before,
-i.flag.macau:before {
- background-position: -36px -1769px;
-}
-i.flag.mp:before,
-i.flag.northern.mariana.islands:before {
- background-position: -36px -1795px;
-}
-i.flag.mq:before,
-i.flag.martinique:before {
- background-position: -36px -1821px;
-}
-i.flag.mr:before,
-i.flag.mauritania:before {
- background-position: -36px -1847px;
-}
-i.flag.ms:before,
-i.flag.montserrat:before {
- background-position: -36px -1873px;
-}
-i.flag.mt:before,
-i.flag.malta:before {
- background-position: -36px -1899px;
-}
-i.flag.mu:before,
-i.flag.mauritius:before {
- background-position: -36px -1925px;
-}
-i.flag.mv:before,
-i.flag.maldives:before {
- background-position: -36px -1951px;
-}
-i.flag.mw:before,
-i.flag.malawi:before {
- background-position: -36px -1977px;
-}
-i.flag.mx:before,
-i.flag.mexico:before {
- background-position: -72px 0;
-}
-i.flag.my:before,
-i.flag.malaysia:before {
- background-position: -72px -26px;
-}
-i.flag.mz:before,
-i.flag.mozambique:before {
- background-position: -72px -52px;
-}
-i.flag.na:before,
-i.flag.namibia:before {
- background-position: -72px -78px;
-}
-i.flag.nc:before,
-i.flag.new.caledonia:before {
- background-position: -72px -104px;
-}
-i.flag.ne:before,
-i.flag.niger:before {
- background-position: -72px -130px;
-}
-i.flag.nf:before,
-i.flag.norfolk.island:before {
- background-position: -72px -156px;
-}
-i.flag.ng:before,
-i.flag.nigeria:before {
- background-position: -72px -182px;
-}
-i.flag.ni:before,
-i.flag.nicaragua:before {
- background-position: -72px -208px;
-}
-i.flag.nl:before,
-i.flag.netherlands:before {
- background-position: -72px -234px;
-}
-i.flag.no:before,
-i.flag.norway:before {
- background-position: -72px -260px;
-}
-i.flag.np:before,
-i.flag.nepal:before {
- background-position: -72px -286px;
-}
-i.flag.nr:before,
-i.flag.nauru:before {
- background-position: -72px -312px;
-}
-i.flag.nu:before,
-i.flag.niue:before {
- background-position: -72px -338px;
-}
-i.flag.nz:before,
-i.flag.new.zealand:before {
- background-position: -72px -364px;
-}
-i.flag.om:before,
-i.flag.oman:before {
- background-position: -72px -390px;
-}
-i.flag.pa:before,
-i.flag.panama:before {
- background-position: -72px -416px;
-}
-i.flag.pe:before,
-i.flag.peru:before {
- background-position: -72px -442px;
-}
-i.flag.pf:before,
-i.flag.french.polynesia:before {
- background-position: -72px -468px;
-}
-i.flag.pg:before,
-i.flag.new.guinea:before {
- background-position: -72px -494px;
-}
-i.flag.ph:before,
-i.flag.philippines:before {
- background-position: -72px -520px;
-}
-i.flag.pk:before,
-i.flag.pakistan:before {
- background-position: -72px -546px;
-}
-i.flag.pl:before,
-i.flag.poland:before {
- background-position: -72px -572px;
-}
-i.flag.pm:before,
-i.flag.saint.pierre:before {
- background-position: -72px -598px;
-}
-i.flag.pn:before,
-i.flag.pitcairn.islands:before {
- background-position: -72px -624px;
-}
-i.flag.pr:before,
-i.flag.puerto.rico:before {
- background-position: -72px -650px;
-}
-i.flag.ps:before,
-i.flag.palestine:before {
- background-position: -72px -676px;
-}
-i.flag.pt:before,
-i.flag.portugal:before {
- background-position: -72px -702px;
-}
-i.flag.pw:before,
-i.flag.palau:before {
- background-position: -72px -728px;
-}
-i.flag.py:before,
-i.flag.paraguay:before {
- background-position: -72px -754px;
-}
-i.flag.qa:before,
-i.flag.qatar:before {
- background-position: -72px -780px;
-}
-i.flag.re:before,
-i.flag.reunion:before {
- background-position: -72px -806px;
-}
-i.flag.ro:before,
-i.flag.romania:before {
- background-position: -72px -832px;
-}
-i.flag.rs:before,
-i.flag.serbia:before {
- background-position: -72px -858px;
-}
-i.flag.ru:before,
-i.flag.russia:before {
- background-position: -72px -884px;
-}
-i.flag.rw:before,
-i.flag.rwanda:before {
- background-position: -72px -910px;
-}
-i.flag.sa:before,
-i.flag.saudi.arabia:before {
- background-position: -72px -936px;
-}
-i.flag.sb:before,
-i.flag.solomon.islands:before {
- background-position: -72px -962px;
-}
-i.flag.sc:before,
-i.flag.seychelles:before {
- background-position: -72px -988px;
-}
-i.flag.gb.sct:before,
-i.flag.scotland:before {
- background-position: -72px -1014px;
-}
-i.flag.sd:before,
-i.flag.sudan:before {
- background-position: -72px -1040px;
-}
-i.flag.se:before,
-i.flag.sweden:before {
- background-position: -72px -1066px;
-}
-i.flag.sg:before,
-i.flag.singapore:before {
- background-position: -72px -1092px;
-}
-i.flag.sh:before,
-i.flag.saint.helena:before {
- background-position: -72px -1118px;
-}
-i.flag.si:before,
-i.flag.slovenia:before {
- background-position: -72px -1144px;
-}
-i.flag.sj:before,
-i.flag.svalbard:before,
-i.flag.jan.mayen:before {
- background-position: -72px -1170px;
-}
-i.flag.sk:before,
-i.flag.slovakia:before {
- background-position: -72px -1196px;
-}
-i.flag.sl:before,
-i.flag.sierra.leone:before {
- background-position: -72px -1222px;
-}
-i.flag.sm:before,
-i.flag.san.marino:before {
- background-position: -72px -1248px;
-}
-i.flag.sn:before,
-i.flag.senegal:before {
- background-position: -72px -1274px;
-}
-i.flag.so:before,
-i.flag.somalia:before {
- background-position: -72px -1300px;
-}
-i.flag.sr:before,
-i.flag.suriname:before {
- background-position: -72px -1326px;
-}
-i.flag.st:before,
-i.flag.sao.tome:before {
- background-position: -72px -1352px;
-}
-i.flag.sv:before,
-i.flag.el.salvador:before {
- background-position: -72px -1378px;
-}
-i.flag.sy:before,
-i.flag.syria:before {
- background-position: -72px -1404px;
-}
-i.flag.sz:before,
-i.flag.swaziland:before {
- background-position: -72px -1430px;
-}
-i.flag.tc:before,
-i.flag.caicos.islands:before {
- background-position: -72px -1456px;
-}
-i.flag.td:before,
-i.flag.chad:before {
- background-position: -72px -1482px;
-}
-i.flag.tf:before,
-i.flag.french.territories:before {
- background-position: -72px -1508px;
-}
-i.flag.tg:before,
-i.flag.togo:before {
- background-position: -72px -1534px;
-}
-i.flag.th:before,
-i.flag.thailand:before {
- background-position: -72px -1560px;
-}
-i.flag.tj:before,
-i.flag.tajikistan:before {
- background-position: -72px -1586px;
-}
-i.flag.tk:before,
-i.flag.tokelau:before {
- background-position: -72px -1612px;
-}
-i.flag.tl:before,
-i.flag.timorleste:before {
- background-position: -72px -1638px;
-}
-i.flag.tm:before,
-i.flag.turkmenistan:before {
- background-position: -72px -1664px;
-}
-i.flag.tn:before,
-i.flag.tunisia:before {
- background-position: -72px -1690px;
-}
-i.flag.to:before,
-i.flag.tonga:before {
- background-position: -72px -1716px;
-}
-i.flag.tr:before,
-i.flag.turkey:before {
- background-position: -72px -1742px;
-}
-i.flag.tt:before,
-i.flag.trinidad:before {
- background-position: -72px -1768px;
-}
-i.flag.tv:before,
-i.flag.tuvalu:before {
- background-position: -72px -1794px;
-}
-i.flag.tw:before,
-i.flag.taiwan:before {
- background-position: -72px -1820px;
-}
-i.flag.tz:before,
-i.flag.tanzania:before {
- background-position: -72px -1846px;
-}
-i.flag.ua:before,
-i.flag.ukraine:before {
- background-position: -72px -1872px;
-}
-i.flag.ug:before,
-i.flag.uganda:before {
- background-position: -72px -1898px;
-}
-i.flag.um:before,
-i.flag.us.minor.islands:before {
- background-position: -72px -1924px;
-}
-i.flag.us:before,
-i.flag.america:before,
-i.flag.united.states:before {
- background-position: -72px -1950px;
-}
-i.flag.uy:before,
-i.flag.uruguay:before {
- background-position: -72px -1976px;
-}
-i.flag.uz:before,
-i.flag.uzbekistan:before {
- background-position: -108px 0;
-}
-i.flag.va:before,
-i.flag.vatican.city:before {
- background-position: -108px -26px;
-}
-i.flag.vc:before,
-i.flag.saint.vincent:before {
- background-position: -108px -52px;
-}
-i.flag.ve:before,
-i.flag.venezuela:before {
- background-position: -108px -78px;
-}
-i.flag.vg:before,
-i.flag.british.virgin.islands:before {
- background-position: -108px -104px;
-}
-i.flag.vi:before,
-i.flag.us.virgin.islands:before {
- background-position: -108px -130px;
-}
-i.flag.vn:before,
-i.flag.vietnam:before {
- background-position: -108px -156px;
-}
-i.flag.vu:before,
-i.flag.vanuatu:before {
- background-position: -108px -182px;
-}
-i.flag.gb.wls:before,
-i.flag.wales:before {
- background-position: -108px -208px;
-}
-i.flag.wf:before,
-i.flag.wallis.and.futuna:before {
- background-position: -108px -234px;
-}
-i.flag.ws:before,
-i.flag.samoa:before {
- background-position: -108px -260px;
-}
-i.flag.ye:before,
-i.flag.yemen:before {
- background-position: -108px -286px;
-}
-i.flag.yt:before,
-i.flag.mayotte:before {
- background-position: -108px -312px;
-}
-i.flag.za:before,
-i.flag.south.africa:before {
- background-position: -108px -338px;
-}
-i.flag.zm:before,
-i.flag.zambia:before {
- background-position: -108px -364px;
-}
-i.flag.zw:before,
-i.flag.zimbabwe:before {
- background-position: -108px -390px;
-}
-
-/*******************************
- Site Overrides
-*******************************/
-
-// 14.12.2020 --------------------------------
-$utilities-old: () !default;
-
-$utilities-old: map-merge(
- (
- // Text
- 'font-weight':
- (
- property: font-weight,
- values: (
- light: $font-weight-light,
- lighter: $font-weight-lighter,
- normal: $font-weight-normal,
- bold: $font-weight-bold,
- bolder: $font-weight-bolder,
- ),
- ),
- 'font-style': (
- property: font-style,
- class: font,
- values: italic normal,
- )
- ),
- $utilities-old
-);
-
-// Loop over each breakpoint
-@each $breakpoint in map-keys($grid-breakpoints) {
- // Generate media query if needed
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
- // Loop over each utility property
- @each $key, $utility in $utilities-old {
- // The utility can be disabled with `false`, thus check if the utility is a map first
- // Only proceed if responsive media queries are enabled or if it's the base media query
- @if type-of($utility) == 'map' and (map-get($utility, responsive) or $infix == '') {
- @include generate-utility($utility, $infix);
- }
- }
- }
-}
-
-// RFS rescaling
-@media (min-width: $rfs-mq-value) {
- @each $breakpoint in map-keys($grid-breakpoints) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
- @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
- // Loop over each utility property
- @each $key, $utility in $utilities-old {
- // The utility can be disabled with `false`, thus check if the utility is a map first
- // Only proceed if responsive media queries are enabled or if it's the base media query
- @if type-of($utility) == 'map' and map-get($utility, rfs) {
- @include generate-utility($utility, $infix, true);
- }
- }
- }
- }
-}
-
-// Print utilities-old
-@media print {
- @each $key, $utility in $utilities-old {
- // The utility can be disabled with `false`, thus check if the utility is a map first
- // Then check if the utility needs print styles
- @if type-of($utility) == 'map' and map-get($utility, print) == true {
- @include generate-utility($utility, '-print');
- }
- }
-}
diff --git a/src/scss/free/_dropdown.scss b/src/scss/free/_dropdown.scss
index 7ee80e1d..42dc8d0c 100644
--- a/src/scss/free/_dropdown.scss
+++ b/src/scss/free/_dropdown.scss
@@ -1,22 +1,22 @@
.dropdown-menu {
- color: $dropdown-color;
- margin: $dropdown-margin-top 0 0;
+ color: #212529;
+ margin: .125rem 0 0;
padding-top: 0;
padding-bottom: 0;
border: 0;
- box-shadow: $dropdown-box-shadow;
- font-size: $dropdown-font-size;
-
+ box-shadow: $box-shadow-2;
+ font-size: .875rem;
+
> li {
border-radius: 0;
&:first-child {
- border-top-left-radius: $dropdown-item-border-radius;
- border-top-right-radius: $dropdown-item-border-radius;
+ border-top-left-radius: .25rem;
+ border-top-right-radius: .25rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.dropdown-item {
- border-top-left-radius: $dropdown-item-border-radius;
- border-top-right-radius: $dropdown-item-border-radius;
+ border-top-left-radius: .25rem;
+ border-top-right-radius: .25rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@@ -27,90 +27,36 @@
border-radius: 0;
}
}
-
+
&:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
- border-bottom-left-radius: $dropdown-item-border-radius;
- border-bottom-right-radius: $dropdown-item-border-radius;
+ border-bottom-left-radius: .25rem;
+ border-bottom-right-radius: .25rem;
.dropdown-item {
border-top-left-radius: 0;
border-top-right-radius: 0;
- border-bottom-left-radius: $dropdown-item-border-radius;
- border-bottom-right-radius: $dropdown-item-border-radius;
+ border-bottom-left-radius: .25rem;
+ border-bottom-right-radius: .25rem;
}
}
}
-
- &.animation {
- display: block;
- /* Speed up animations */
- animation-duration: $dropdown-menu-animated-animation-duration;
- animation-timing-function: $dropdown-menu-animated-animation-timing-function;
- }
}
.dropdown-item {
- padding: $dropdown-item-padding-y $dropdown-item-padding-x;
- color: $dropdown-color;
+ padding: .5rem 1rem;
+ color: #212529;
border-radius: 0;
-
+
&:hover,
&:focus {
- color: $dropdown-state-color;
- background-color: $dropdown-state-background-color;
+ color: #16181b;
+ background-color: #eee;
}
&.active,
&:active {
- color: $dropdown-state-color;
- background-color: $dropdown-state-background-color;
+ color: #16181b;
+ background-color: #eee;
}
-}
-
-.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;
-}
+}
\ No newline at end of file
diff --git a/src/scss/free/_flag.scss b/src/scss/free/_flag.scss
index 7cb360ae..65508cd3 100644
--- a/src/scss/free/_flag.scss
+++ b/src/scss/free/_flag.scss
@@ -11,1036 +11,1021 @@
/*******************************
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;
+ // font-smooth: antialiased;
line-height: 11px;
text-decoration: inherit;
vertical-align: baseline;
+ // speak: none;
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;
- }
+i.flag:not(.icon):before {
+ display: inline-block;
+ width: 16px;
+ height: 11px;
+ content: '';
+ background: url('https://mdbootstrap.com/img/svg/flags.png') no-repeat -108px -1976px;
+}
- /* Flag Sprite Based On http://www.famfamfam.com/lab/icons/flags/ */
+/* 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;
- }
+i.flag.ad:before,
+i.flag.andorra:before {
+ background-position: 0 0;
}
+i.flag.ae:before,
+i.flag.united.arab.emirates:before,
+i.flag.uae:before {
+ background-position: 0 -26px;
+}
+i.flag.af:before,
+i.flag.afghanistan:before {
+ background-position: 0 -52px;
+}
+i.flag.ag:before,
+i.flag.antigua:before {
+ background-position: 0 -78px;
+}
+i.flag.ai:before,
+i.flag.anguilla:before {
+ background-position: 0 -104px;
+}
+i.flag.al:before,
+i.flag.albania:before {
+ background-position: 0 -130px;
+}
+i.flag.am:before,
+i.flag.armenia:before {
+ background-position: 0 -156px;
+}
+i.flag.an:before,
+i.flag.netherlands.antilles:before {
+ background-position: 0 -182px;
+}
+i.flag.ao:before,
+i.flag.angola:before {
+ background-position: 0 -208px;
+}
+i.flag.ar:before,
+i.flag.argentina:before {
+ background-position: 0 -234px;
+}
+i.flag.as:before,
+i.flag.american.samoa:before {
+ background-position: 0 -260px;
+}
+i.flag.at:before,
+i.flag.austria:before {
+ background-position: 0 -286px;
+}
+i.flag.au:before,
+i.flag.australia:before {
+ background-position: 0 -312px;
+}
+i.flag.aw:before,
+i.flag.aruba:before {
+ background-position: 0 -338px;
+}
+i.flag.ax:before,
+i.flag.aland.islands:before {
+ background-position: 0 -364px;
+}
+i.flag.az:before,
+i.flag.azerbaijan:before {
+ background-position: 0 -390px;
+}
+i.flag.ba:before,
+i.flag.bosnia:before {
+ background-position: 0 -416px;
+}
+i.flag.bb:before,
+i.flag.barbados:before {
+ background-position: 0 -442px;
+}
+i.flag.bd:before,
+i.flag.bangladesh:before {
+ background-position: 0 -468px;
+}
+i.flag.be:before,
+i.flag.belgium:before {
+ background-position: 0 -494px;
+}
+i.flag.bf:before,
+i.flag.burkina.faso:before {
+ background-position: 0 -520px;
+}
+i.flag.bg:before,
+i.flag.bulgaria:before {
+ background-position: 0 -546px;
+}
+i.flag.bh:before,
+i.flag.bahrain:before {
+ background-position: 0 -572px;
+}
+i.flag.bi:before,
+i.flag.burundi:before {
+ background-position: 0 -598px;
+}
+i.flag.bj:before,
+i.flag.benin:before {
+ background-position: 0 -624px;
+}
+i.flag.bm:before,
+i.flag.bermuda:before {
+ background-position: 0 -650px;
+}
+i.flag.bn:before,
+i.flag.brunei:before {
+ background-position: 0 -676px;
+}
+i.flag.bo:before,
+i.flag.bolivia:before {
+ background-position: 0 -702px;
+}
+i.flag.br:before,
+i.flag.brazil:before {
+ background-position: 0 -728px;
+}
+i.flag.bs:before,
+i.flag.bahamas:before {
+ background-position: 0 -754px;
+}
+i.flag.bt:before,
+i.flag.bhutan:before {
+ background-position: 0 -780px;
+}
+i.flag.bv:before,
+i.flag.bouvet.island:before {
+ background-position: 0 -806px;
+}
+i.flag.bw:before,
+i.flag.botswana:before {
+ background-position: 0 -832px;
+}
+i.flag.by:before,
+i.flag.belarus:before {
+ background-position: 0 -858px;
+}
+i.flag.bz:before,
+i.flag.belize:before {
+ background-position: 0 -884px;
+}
+i.flag.ca:before,
+i.flag.canada:before {
+ background-position: 0 -910px;
+}
+i.flag.cc:before,
+i.flag.cocos.islands:before {
+ background-position: 0 -962px;
+}
+i.flag.cd:before,
+i.flag.congo:before {
+ background-position: 0 -988px;
+}
+i.flag.cf:before,
+i.flag.central.african.republic:before {
+ background-position: 0 -1014px;
+}
+i.flag.cg:before,
+i.flag.congo.brazzaville:before {
+ background-position: 0 -1040px;
+}
+i.flag.ch:before,
+i.flag.switzerland:before {
+ background-position: 0 -1066px;
+}
+i.flag.ci:before,
+i.flag.cote.divoire:before {
+ background-position: 0 -1092px;
+}
+i.flag.ck:before,
+i.flag.cook.islands:before {
+ background-position: 0 -1118px;
+}
+i.flag.cl:before,
+i.flag.chile:before {
+ background-position: 0 -1144px;
+}
+i.flag.cm:before,
+i.flag.cameroon:before {
+ background-position: 0 -1170px;
+}
+i.flag.cn:before,
+i.flag.china:before {
+ background-position: 0 -1196px;
+}
+i.flag.co:before,
+i.flag.colombia:before {
+ background-position: 0 -1222px;
+}
+i.flag.cr:before,
+i.flag.costa.rica:before {
+ background-position: 0 -1248px;
+}
+i.flag.cs:before,
+i.flag.serbia:before {
+ background-position: 0 -1274px;
+}
+i.flag.cu:before,
+i.flag.cuba:before {
+ background-position: 0 -1300px;
+}
+i.flag.cv:before,
+i.flag.cape.verde:before {
+ background-position: 0 -1326px;
+}
+i.flag.cx:before,
+i.flag.christmas.island:before {
+ background-position: 0 -1352px;
+}
+i.flag.cy:before,
+i.flag.cyprus:before {
+ background-position: 0 -1378px;
+}
+i.flag.cz:before,
+i.flag.czech.republic:before {
+ background-position: 0 -1404px;
+}
+i.flag.de:before,
+i.flag.germany:before {
+ background-position: 0 -1430px;
+}
+i.flag.dj:before,
+i.flag.djibouti:before {
+ background-position: 0 -1456px;
+}
+i.flag.dk:before,
+i.flag.denmark:before {
+ background-position: 0 -1482px;
+}
+i.flag.dm:before,
+i.flag.dominica:before {
+ background-position: 0 -1508px;
+}
+i.flag.do:before,
+i.flag.dominican.republic:before {
+ background-position: 0 -1534px;
+}
+i.flag.dz:before,
+i.flag.algeria:before {
+ background-position: 0 -1560px;
+}
+i.flag.ec:before,
+i.flag.ecuador:before {
+ background-position: 0 -1586px;
+}
+i.flag.ee:before,
+i.flag.estonia:before {
+ background-position: 0 -1612px;
+}
+i.flag.eg:before,
+i.flag.egypt:before {
+ background-position: 0 -1638px;
+}
+i.flag.eh:before,
+i.flag.western.sahara:before {
+ background-position: 0 -1664px;
+}
+i.flag.gb.eng:before,
+i.flag.england:before {
+ background-position: 0 -1690px;
+}
+i.flag.er:before,
+i.flag.eritrea:before {
+ background-position: 0 -1716px;
+}
+i.flag.es:before,
+i.flag.spain:before {
+ background-position: 0 -1742px;
+}
+i.flag.et:before,
+i.flag.ethiopia:before {
+ background-position: 0 -1768px;
+}
+i.flag.eu:before,
+i.flag.european.union:before {
+ background-position: 0 -1794px;
+}
+i.flag.fi:before,
+i.flag.finland:before {
+ background-position: 0 -1846px;
+}
+i.flag.fj:before,
+i.flag.fiji:before {
+ background-position: 0 -1872px;
+}
+i.flag.fk:before,
+i.flag.falkland.islands:before {
+ background-position: 0 -1898px;
+}
+i.flag.fm:before,
+i.flag.micronesia:before {
+ background-position: 0 -1924px;
+}
+i.flag.fo:before,
+i.flag.faroe.islands:before {
+ background-position: 0 -1950px;
+}
+i.flag.fr:before,
+i.flag.france:before {
+ background-position: 0 -1976px;
+}
+i.flag.ga:before,
+i.flag.gabon:before {
+ background-position: -36px 0;
+}
+i.flag.gb:before,
+i.flag.uk:before,
+i.flag.united.kingdom:before {
+ background-position: -36px -26px;
+}
+i.flag.gd:before,
+i.flag.grenada:before {
+ background-position: -36px -52px;
+}
+i.flag.ge:before,
+i.flag.georgia:before {
+ background-position: -36px -78px;
+}
+i.flag.gf:before,
+i.flag.french.guiana:before {
+ background-position: -36px -104px;
+}
+i.flag.gh:before,
+i.flag.ghana:before {
+ background-position: -36px -130px;
+}
+i.flag.gi:before,
+i.flag.gibraltar:before {
+ background-position: -36px -156px;
+}
+i.flag.gl:before,
+i.flag.greenland:before {
+ background-position: -36px -182px;
+}
+i.flag.gm:before,
+i.flag.gambia:before {
+ background-position: -36px -208px;
+}
+i.flag.gn:before,
+i.flag.guinea:before {
+ background-position: -36px -234px;
+}
+i.flag.gp:before,
+i.flag.guadeloupe:before {
+ background-position: -36px -260px;
+}
+i.flag.gq:before,
+i.flag.equatorial.guinea:before {
+ background-position: -36px -286px;
+}
+i.flag.gr:before,
+i.flag.greece:before {
+ background-position: -36px -312px;
+}
+i.flag.gs:before,
+i.flag.sandwich.islands:before {
+ background-position: -36px -338px;
+}
+i.flag.gt:before,
+i.flag.guatemala:before {
+ background-position: -36px -364px;
+}
+i.flag.gu:before,
+i.flag.guam:before {
+ background-position: -36px -390px;
+}
+i.flag.gw:before,
+i.flag.guinea-bissau:before {
+ background-position: -36px -416px;
+}
+i.flag.gy:before,
+i.flag.guyana:before {
+ background-position: -36px -442px;
+}
+i.flag.hk:before,
+i.flag.hong.kong:before {
+ background-position: -36px -468px;
+}
+i.flag.hm:before,
+i.flag.heard.island:before {
+ background-position: -36px -494px;
+}
+i.flag.hn:before,
+i.flag.honduras:before {
+ background-position: -36px -520px;
+}
+i.flag.hr:before,
+i.flag.croatia:before {
+ background-position: -36px -546px;
+}
+i.flag.ht:before,
+i.flag.haiti:before {
+ background-position: -36px -572px;
+}
+i.flag.hu:before,
+i.flag.hungary:before {
+ background-position: -36px -598px;
+}
+i.flag.id:before,
+i.flag.indonesia:before {
+ background-position: -36px -624px;
+}
+i.flag.ie:before,
+i.flag.ireland:before {
+ background-position: -36px -650px;
+}
+i.flag.il:before,
+i.flag.israel:before {
+ background-position: -36px -676px;
+}
+i.flag.in:before,
+i.flag.india:before {
+ background-position: -36px -702px;
+}
+i.flag.io:before,
+i.flag.indian.ocean.territory:before {
+ background-position: -36px -728px;
+}
+i.flag.iq:before,
+i.flag.iraq:before {
+ background-position: -36px -754px;
+}
+i.flag.ir:before,
+i.flag.iran:before {
+ background-position: -36px -780px;
+}
+i.flag.is:before,
+i.flag.iceland:before {
+ background-position: -36px -806px;
+}
+i.flag.it:before,
+i.flag.italy:before {
+ background-position: -36px -832px;
+}
+i.flag.jm:before,
+i.flag.jamaica:before {
+ background-position: -36px -858px;
+}
+i.flag.jo:before,
+i.flag.jordan:before {
+ background-position: -36px -884px;
+}
+i.flag.jp:before,
+i.flag.japan:before {
+ background-position: -36px -910px;
+}
+i.flag.ke:before,
+i.flag.kenya:before {
+ background-position: -36px -936px;
+}
+i.flag.kg:before,
+i.flag.kyrgyzstan:before {
+ background-position: -36px -962px;
+}
+i.flag.kh:before,
+i.flag.cambodia:before {
+ background-position: -36px -988px;
+}
+i.flag.ki:before,
+i.flag.kiribati:before {
+ background-position: -36px -1014px;
+}
+i.flag.km:before,
+i.flag.comoros:before {
+ background-position: -36px -1040px;
+}
+i.flag.kn:before,
+i.flag.saint.kitts.and.nevis:before {
+ background-position: -36px -1066px;
+}
+i.flag.kp:before,
+i.flag.north.korea:before {
+ background-position: -36px -1092px;
+}
+i.flag.kr:before,
+i.flag.south.korea:before {
+ background-position: -36px -1118px;
+}
+i.flag.kw:before,
+i.flag.kuwait:before {
+ background-position: -36px -1144px;
+}
+i.flag.ky:before,
+i.flag.cayman.islands:before {
+ background-position: -36px -1170px;
+}
+i.flag.kz:before,
+i.flag.kazakhstan:before {
+ background-position: -36px -1196px;
+}
+i.flag.la:before,
+i.flag.laos:before {
+ background-position: -36px -1222px;
+}
+i.flag.lb:before,
+i.flag.lebanon:before {
+ background-position: -36px -1248px;
+}
+i.flag.lc:before,
+i.flag.saint.lucia:before {
+ background-position: -36px -1274px;
+}
+i.flag.li:before,
+i.flag.liechtenstein:before {
+ background-position: -36px -1300px;
+}
+i.flag.lk:before,
+i.flag.sri.lanka:before {
+ background-position: -36px -1326px;
+}
+i.flag.lr:before,
+i.flag.liberia:before {
+ background-position: -36px -1352px;
+}
+i.flag.ls:before,
+i.flag.lesotho:before {
+ background-position: -36px -1378px;
+}
+i.flag.lt:before,
+i.flag.lithuania:before {
+ background-position: -36px -1404px;
+}
+i.flag.lu:before,
+i.flag.luxembourg:before {
+ background-position: -36px -1430px;
+}
+i.flag.lv:before,
+i.flag.latvia:before {
+ background-position: -36px -1456px;
+}
+i.flag.ly:before,
+i.flag.libya:before {
+ background-position: -36px -1482px;
+}
+i.flag.ma:before,
+i.flag.morocco:before {
+ background-position: -36px -1508px;
+}
+i.flag.mc:before,
+i.flag.monaco:before {
+ background-position: -36px -1534px;
+}
+i.flag.md:before,
+i.flag.moldova:before {
+ background-position: -36px -1560px;
+}
+i.flag.me:before,
+i.flag.montenegro:before {
+ background-position: -36px -1586px;
+}
+i.flag.mg:before,
+i.flag.madagascar:before {
+ background-position: -36px -1613px;
+}
+i.flag.mh:before,
+i.flag.marshall.islands:before {
+ background-position: -36px -1639px;
+}
+i.flag.mk:before,
+i.flag.macedonia:before {
+ background-position: -36px -1665px;
+}
+i.flag.ml:before,
+i.flag.mali:before {
+ background-position: -36px -1691px;
+}
+i.flag.mm:before,
+i.flag.myanmar:before,
+i.flag.burma:before {
+ background-position: -73px -1821px;
+}
+i.flag.mn:before,
+i.flag.mongolia:before {
+ background-position: -36px -1743px;
+}
+i.flag.mo:before,
+i.flag.macau:before {
+ background-position: -36px -1769px;
+}
+i.flag.mp:before,
+i.flag.northern.mariana.islands:before {
+ background-position: -36px -1795px;
+}
+i.flag.mq:before,
+i.flag.martinique:before {
+ background-position: -36px -1821px;
+}
+i.flag.mr:before,
+i.flag.mauritania:before {
+ background-position: -36px -1847px;
+}
+i.flag.ms:before,
+i.flag.montserrat:before {
+ background-position: -36px -1873px;
+}
+i.flag.mt:before,
+i.flag.malta:before {
+ background-position: -36px -1899px;
+}
+i.flag.mu:before,
+i.flag.mauritius:before {
+ background-position: -36px -1925px;
+}
+i.flag.mv:before,
+i.flag.maldives:before {
+ background-position: -36px -1951px;
+}
+i.flag.mw:before,
+i.flag.malawi:before {
+ background-position: -36px -1977px;
+}
+i.flag.mx:before,
+i.flag.mexico:before {
+ background-position: -72px 0;
+}
+i.flag.my:before,
+i.flag.malaysia:before {
+ background-position: -72px -26px;
+}
+i.flag.mz:before,
+i.flag.mozambique:before {
+ background-position: -72px -52px;
+}
+i.flag.na:before,
+i.flag.namibia:before {
+ background-position: -72px -78px;
+}
+i.flag.nc:before,
+i.flag.new.caledonia:before {
+ background-position: -72px -104px;
+}
+i.flag.ne:before,
+i.flag.niger:before {
+ background-position: -72px -130px;
+}
+i.flag.nf:before,
+i.flag.norfolk.island:before {
+ background-position: -72px -156px;
+}
+i.flag.ng:before,
+i.flag.nigeria:before {
+ background-position: -72px -182px;
+}
+i.flag.ni:before,
+i.flag.nicaragua:before {
+ background-position: -72px -208px;
+}
+i.flag.nl:before,
+i.flag.netherlands:before {
+ background-position: -72px -234px;
+}
+i.flag.no:before,
+i.flag.norway:before {
+ background-position: -72px -260px;
+}
+i.flag.np:before,
+i.flag.nepal:before {
+ background-position: -72px -286px;
+}
+i.flag.nr:before,
+i.flag.nauru:before {
+ background-position: -72px -312px;
+}
+i.flag.nu:before,
+i.flag.niue:before {
+ background-position: -72px -338px;
+}
+i.flag.nz:before,
+i.flag.new.zealand:before {
+ background-position: -72px -364px;
+}
+i.flag.om:before,
+i.flag.oman:before {
+ background-position: -72px -390px;
+}
+i.flag.pa:before,
+i.flag.panama:before {
+ background-position: -72px -416px;
+}
+i.flag.pe:before,
+i.flag.peru:before {
+ background-position: -72px -442px;
+}
+i.flag.pf:before,
+i.flag.french.polynesia:before {
+ background-position: -72px -468px;
+}
+i.flag.pg:before,
+i.flag.new.guinea:before {
+ background-position: -72px -494px;
+}
+i.flag.ph:before,
+i.flag.philippines:before {
+ background-position: -72px -520px;
+}
+i.flag.pk:before,
+i.flag.pakistan:before {
+ background-position: -72px -546px;
+}
+i.flag.pl:before,
+i.flag.poland:before {
+ background-position: -72px -572px;
+}
+i.flag.pm:before,
+i.flag.saint.pierre:before {
+ background-position: -72px -598px;
+}
+i.flag.pn:before,
+i.flag.pitcairn.islands:before {
+ background-position: -72px -624px;
+}
+i.flag.pr:before,
+i.flag.puerto.rico:before {
+ background-position: -72px -650px;
+}
+i.flag.ps:before,
+i.flag.palestine:before {
+ background-position: -72px -676px;
+}
+i.flag.pt:before,
+i.flag.portugal:before {
+ background-position: -72px -702px;
+}
+i.flag.pw:before,
+i.flag.palau:before {
+ background-position: -72px -728px;
+}
+i.flag.py:before,
+i.flag.paraguay:before {
+ background-position: -72px -754px;
+}
+i.flag.qa:before,
+i.flag.qatar:before {
+ background-position: -72px -780px;
+}
+i.flag.re:before,
+i.flag.reunion:before {
+ background-position: -72px -806px;
+}
+i.flag.ro:before,
+i.flag.romania:before {
+ background-position: -72px -832px;
+}
+i.flag.rs:before,
+i.flag.serbia:before {
+ background-position: -72px -858px;
+}
+i.flag.ru:before,
+i.flag.russia:before {
+ background-position: -72px -884px;
+}
+i.flag.rw:before,
+i.flag.rwanda:before {
+ background-position: -72px -910px;
+}
+i.flag.sa:before,
+i.flag.saudi.arabia:before {
+ background-position: -72px -936px;
+}
+i.flag.sb:before,
+i.flag.solomon.islands:before {
+ background-position: -72px -962px;
+}
+i.flag.sc:before,
+i.flag.seychelles:before {
+ background-position: -72px -988px;
+}
+i.flag.gb.sct:before,
+i.flag.scotland:before {
+ background-position: -72px -1014px;
+}
+i.flag.sd:before,
+i.flag.sudan:before {
+ background-position: -72px -1040px;
+}
+i.flag.se:before,
+i.flag.sweden:before {
+ background-position: -72px -1066px;
+}
+i.flag.sg:before,
+i.flag.singapore:before {
+ background-position: -72px -1092px;
+}
+i.flag.sh:before,
+i.flag.saint.helena:before {
+ background-position: -72px -1118px;
+}
+i.flag.si:before,
+i.flag.slovenia:before {
+ background-position: -72px -1144px;
+}
+i.flag.sj:before,
+i.flag.svalbard:before,
+i.flag.jan.mayen:before {
+ background-position: -72px -1170px;
+}
+i.flag.sk:before,
+i.flag.slovakia:before {
+ background-position: -72px -1196px;
+}
+i.flag.sl:before,
+i.flag.sierra.leone:before {
+ background-position: -72px -1222px;
+}
+i.flag.sm:before,
+i.flag.san.marino:before {
+ background-position: -72px -1248px;
+}
+i.flag.sn:before,
+i.flag.senegal:before {
+ background-position: -72px -1274px;
+}
+i.flag.so:before,
+i.flag.somalia:before {
+ background-position: -72px -1300px;
+}
+i.flag.sr:before,
+i.flag.suriname:before {
+ background-position: -72px -1326px;
+}
+i.flag.st:before,
+i.flag.sao.tome:before {
+ background-position: -72px -1352px;
+}
+i.flag.sv:before,
+i.flag.el.salvador:before {
+ background-position: -72px -1378px;
+}
+i.flag.sy:before,
+i.flag.syria:before {
+ background-position: -72px -1404px;
+}
+i.flag.sz:before,
+i.flag.swaziland:before {
+ background-position: -72px -1430px;
+}
+i.flag.tc:before,
+i.flag.caicos.islands:before {
+ background-position: -72px -1456px;
+}
+i.flag.td:before,
+i.flag.chad:before {
+ background-position: -72px -1482px;
+}
+i.flag.tf:before,
+i.flag.french.territories:before {
+ background-position: -72px -1508px;
+}
+i.flag.tg:before,
+i.flag.togo:before {
+ background-position: -72px -1534px;
+}
+i.flag.th:before,
+i.flag.thailand:before {
+ background-position: -72px -1560px;
+}
+i.flag.tj:before,
+i.flag.tajikistan:before {
+ background-position: -72px -1586px;
+}
+i.flag.tk:before,
+i.flag.tokelau:before {
+ background-position: -72px -1612px;
+}
+i.flag.tl:before,
+i.flag.timorleste:before {
+ background-position: -72px -1638px;
+}
+i.flag.tm:before,
+i.flag.turkmenistan:before {
+ background-position: -72px -1664px;
+}
+i.flag.tn:before,
+i.flag.tunisia:before {
+ background-position: -72px -1690px;
+}
+i.flag.to:before,
+i.flag.tonga:before {
+ background-position: -72px -1716px;
+}
+i.flag.tr:before,
+i.flag.turkey:before {
+ background-position: -72px -1742px;
+}
+i.flag.tt:before,
+i.flag.trinidad:before {
+ background-position: -72px -1768px;
+}
+i.flag.tv:before,
+i.flag.tuvalu:before {
+ background-position: -72px -1794px;
+}
+i.flag.tw:before,
+i.flag.taiwan:before {
+ background-position: -72px -1820px;
+}
+i.flag.tz:before,
+i.flag.tanzania:before {
+ background-position: -72px -1846px;
+}
+i.flag.ua:before,
+i.flag.ukraine:before {
+ background-position: -72px -1872px;
+}
+i.flag.ug:before,
+i.flag.uganda:before {
+ background-position: -72px -1898px;
+}
+i.flag.um:before,
+i.flag.us.minor.islands:before {
+ background-position: -72px -1924px;
+}
+i.flag.us:before,
+i.flag.america:before,
+i.flag.united.states:before {
+ background-position: -72px -1950px;
+}
+i.flag.uy:before,
+i.flag.uruguay:before {
+ background-position: -72px -1976px;
+}
+i.flag.uz:before,
+i.flag.uzbekistan:before {
+ background-position: -108px 0;
+}
+i.flag.va:before,
+i.flag.vatican.city:before {
+ background-position: -108px -26px;
+}
+i.flag.vc:before,
+i.flag.saint.vincent:before {
+ background-position: -108px -52px;
+}
+i.flag.ve:before,
+i.flag.venezuela:before {
+ background-position: -108px -78px;
+}
+i.flag.vg:before,
+i.flag.british.virgin.islands:before {
+ background-position: -108px -104px;
+}
+i.flag.vi:before,
+i.flag.us.virgin.islands:before {
+ background-position: -108px -130px;
+}
+i.flag.vn:before,
+i.flag.vietnam:before {
+ background-position: -108px -156px;
+}
+i.flag.vu:before,
+i.flag.vanuatu:before {
+ background-position: -108px -182px;
+}
+i.flag.gb.wls:before,
+i.flag.wales:before {
+ background-position: -108px -208px;
+}
+i.flag.wf:before,
+i.flag.wallis.and.futuna:before {
+ background-position: -108px -234px;
+}
+i.flag.ws:before,
+i.flag.samoa:before {
+ background-position: -108px -260px;
+}
+i.flag.ye:before,
+i.flag.yemen:before {
+ background-position: -108px -286px;
+}
+i.flag.yt:before,
+i.flag.mayotte:before {
+ background-position: -108px -312px;
+}
+i.flag.za:before,
+i.flag.south.africa:before {
+ background-position: -108px -338px;
+}
+i.flag.zm:before,
+i.flag.zambia:before {
+ background-position: -108px -364px;
+}
+i.flag.zw:before,
+i.flag.zimbabwe:before {
+ background-position: -108px -390px;
+}
+
/*******************************
Site Overrides
*******************************/
diff --git a/src/scss/free/_functions.scss b/src/scss/free/_functions.scss
index b40cd714..6966df2d 100644
--- a/src/scss/free/_functions.scss
+++ b/src/scss/free/_functions.scss
@@ -8,11 +8,4 @@
} @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 * $theme-color-interval);
-}
+}
\ No newline at end of file
diff --git a/src/scss/free/_images.scss b/src/scss/free/_images.scss
deleted file mode 100644
index 7aa434b6..00000000
--- a/src/scss/free/_images.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-//
-// Images
-//
-
-.bg-image {
- position: relative;
- overflow: hidden;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center center;
-}
-
-.mask {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- overflow: hidden;
- background-attachment: fixed;
-}
-
-.hover-overlay {
- .mask {
- opacity: 0;
- transition: $image-hover-overlay-transition;
- &:hover {
- opacity: 1;
- }
- }
-}
-
-.hover-zoom {
- img,
- video {
- transition: $image-hover-zoom-transition;
- }
- &:hover {
- img,
- video {
- transform: $image-hover-zoom-transform;
- }
- }
-}
-
-.hover-shadow,
-.card.hover-shadow {
- box-shadow: none;
- transition: $image-hover-shadow-transition;
- &:hover {
- box-shadow: $image-hover-shadow-box-shadow;
- transition: $image-hover-shadow-transition;
- }
-}
-
-.bg-fixed {
- background-attachment: fixed;
-}
diff --git a/src/scss/free/_list-group.scss b/src/scss/free/_list-group.scss
deleted file mode 100644
index 10625b9a..00000000
--- a/src/scss/free/_list-group.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// List group
-
-.list-group-item-action {
- transition: 0.5s;
-
- // Hover state
- &:hover {
- transition: 0.5s;
- }
-}
diff --git a/src/scss/free/_mixins.scss b/src/scss/free/_mixins.scss
index b8a90095..6ae094bb 100644
--- a/src/scss/free/_mixins.scss
+++ b/src/scss/free/_mixins.scss
@@ -3,6 +3,6 @@
// Used in conjunction with global variables to enable certain theme features.
// Components
+@import './mixins/alert';
@import './mixins/buttons';
@import './mixins/ripple';
-@import './mixins/table-variants';
diff --git a/src/scss/free/_modal.scss b/src/scss/free/_modal.scss
index e1302120..ab03801a 100644
--- a/src/scss/free/_modal.scss
+++ b/src/scss/free/_modal.scss
@@ -1,5 +1,5 @@
// Modal
.modal-content {
border: 0;
- box-shadow: $modal-box-shadow;
-}
+ box-shadow: $box-shadow-1;
+}
\ No newline at end of file
diff --git a/src/scss/free/_nav.scss b/src/scss/free/_nav.scss
index 46e4245d..04b6d594 100644
--- a/src/scss/free/_nav.scss
+++ b/src/scss/free/_nav.scss
@@ -8,20 +8,20 @@
border-bottom: 0;
.nav-link {
- border-width: $nav-tabs-link-border-width;
+ margin-bottom: -$nav-tabs-border-width;
+ border-width: 0 0 2px 0;
border-style: solid;
border-color: transparent;
border-radius: 0;
text-transform: uppercase;
line-height: 1;
- font-weight: $nav-tabs-link-font-weight;
- font-size: $nav-tabs-link-font-size;
- color: $nav-tabs-link-color;
- padding: $nav-tabs-link-padding-top $nav-tabs-link-padding-x $nav-tabs-link-padding-bottom
- $nav-tabs-link-padding-x;
+ font-weight: 500;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.6);
+ padding: 17px 29px 16px 29px;
&:hover {
- background-color: $nav-tabs-link-hover-background-color;
+ background-color: #f5f5f5;
border-color: transparent;
}
@@ -42,19 +42,18 @@
//
.nav-pills {
- margin-left: -$nav-pills-margin;
+ margin-left: -0.5rem;
.nav-link {
- border-radius: $nav-pills-link-border-radius;
- font-size: $nav-pills-link-font-size;
+ border-radius: 0.25rem;
+ font-size: 12px;
text-transform: uppercase;
- padding: $nav-pills-link-padding-top $nav-pills-link-padding-x $nav-pills-link-padding-bottom
- $nav-pills-link-padding-x;
- line-height: $nav-pills-link-line-height;
- background-color: $nav-pills-link-background-color;
- font-weight: $nav-pills-link-font-weight;
- color: $nav-pills-link-color;
- margin: $nav-pills-margin;
+ padding: 17px 29px 16px 29px;
+ line-height: 1;
+ background-color: #f5f5f5;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+ margin: 0.5rem;
}
.nav-link.active,
diff --git a/src/scss/free/_navbar.scss b/src/scss/free/_navbar.scss
index 51a1a786..fcccb52c 100644
--- a/src/scss/free/_navbar.scss
+++ b/src/scss/free/_navbar.scss
@@ -1,8 +1,8 @@
// Navbar
.navbar {
- box-shadow: $navbar-box-shadow;
- padding-top: $navbar-padding-top;
+ // box-shadow: $box-shadow-2;
+ box-shadow: $box-shadow-3;
}
.navbar-toggler {
@@ -17,27 +17,3 @@
.navbar-light .navbar-toggler {
border: 0;
}
-
-.navbar-brand {
- display: flex;
- align-items: center;
- img {
- margin-right: $navbar-brand-img-margin-right;
- }
-}
-
-.navbar-nav .dropdown-menu {
- position: absolute;
-}
-
-.navbar-light {
- .navbar-toggler-icon {
- background-image: none;
- }
-}
-
-.navbar-dark {
- .navbar-toggler-icon {
- background-image: none;
- }
-}
diff --git a/src/scss/free/_pagination.scss b/src/scss/free/_pagination.scss
index 9e740cc9..a885ea0e 100644
--- a/src/scss/free/_pagination.scss
+++ b/src/scss/free/_pagination.scss
@@ -2,16 +2,16 @@
.page-link {
border: 0;
- font-size: $pagination-font-size;
- color: $pagination-color;
+ font-size: 0.9rem;
+ color: #212529;
background-color: transparent;
border: 0;
outline: 0;
- transition: $pagination-transition;
- border-radius: $pagination-border-radius;
+ transition: all 0.3s linear;
+ border-radius: 0.125rem;
&:hover {
- color: $pagination-hover-color;
+ color: #212529;
}
&:focus {
@@ -23,21 +23,21 @@
&.active .page-link {
background-color: $pagination-active-bg;
border: 0;
- box-shadow: $pagination-active-box-shadow;
- transition: $pagination-active-transition;
+ box-shadow: $btn-box-shadow;
+ transition: all 0.2s linear;
}
&:first-child {
.page-link {
- border-top-left-radius: $pagination-border-radius;
- border-bottom-left-radius: $pagination-border-radius;
+ border-top-left-radius: 0.125rem;
+ border-bottom-left-radius: 0.125rem;
}
}
&:last-child {
.page-link {
- border-top-right-radius: $pagination-border-radius;
- border-bottom-right-radius: $pagination-border-radius;
+ border-top-right-radius: 0.125rem;
+ border-bottom-right-radius: 0.125rem;
}
}
&:not(:first-child) {
@@ -51,12 +51,12 @@
.pagination-sm {
.page-item {
&:first-child .page-link {
- border-top-left-radius: $pagination-border-radius;
- border-bottom-left-radius: $pagination-border-radius;
+ border-top-left-radius: 0.125rem;
+ border-bottom-left-radius: 0.125rem;
}
&:last-child .page-link {
- border-top-right-radius: $pagination-border-radius;
- border-bottom-right-radius: $pagination-border-radius;
+ border-top-right-radius: 0.125rem;
+ border-bottom-right-radius: 0.125rem;
}
}
}
@@ -65,32 +65,32 @@
.page-item {
&:first-child {
.page-link {
- border-radius: $pagination-circle-border-radius;
+ border-radius: 50%;
}
}
&:last-child {
.page-link {
- border-radius: $pagination-circle-border-radius;
+ border-radius: 50%;
}
}
}
.page-link {
- border-radius: $pagination-circle-border-radius;
- padding-left: $pagination-circle-padding-x;
- padding-right: $pagination-circle-padding-x;
+ border-radius: 50%;
+ padding-left: 0.841rem;
+ padding-right: 0.841rem;
}
&.pagination-lg {
.page-link {
- padding-left: $pagination-circle-lg-padding-left;
- padding-right: $pagination-circle-lg-padding-right;
+ padding-left: 1.399414rem;
+ padding-right: 1.399415rem;
}
}
&.pagination-sm {
.page-link {
- padding-left: $pagination-circle-sm-padding-left;
- padding-right: $pagination-circle-sm-padding-right;
+ padding-left: 0.696rem;
+ padding-right: 0.688rem;
}
}
}
diff --git a/src/scss/free/_popover.scss b/src/scss/free/_popover.scss
index 08f2f968..a3c829a9 100644
--- a/src/scss/free/_popover.scss
+++ b/src/scss/free/_popover.scss
@@ -2,7 +2,7 @@
.popover {
border: 0;
- box-shadow: $popover-box-shadow;
+ box-shadow: $box-shadow-2;
.popover-arrow {
display: none;
@@ -10,5 +10,5 @@
}
.popover-header {
- background-color: $popover-background-color;
+ background-color: #fff;
}
diff --git a/src/scss/free/_progress.scss b/src/scss/free/_progress.scss
index c13114e7..142c04a1 100644
--- a/src/scss/free/_progress.scss
+++ b/src/scss/free/_progress.scss
@@ -1,5 +1,6 @@
// Progress
.progress {
+ height: 4px;
border-radius: 0;
}
diff --git a/src/scss/free/_range.scss b/src/scss/free/_range.scss
deleted file mode 100644
index fd70d926..00000000
--- a/src/scss/free/_range.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-// range
-.range {
- position: relative;
-
- .thumb {
- position: absolute;
- display: block;
- height: 30px;
- width: 30px;
- top: -35px;
- margin-left: -15px;
- text-align: center;
- border-radius: 50% 50% 50% 0;
- transform: scale(0);
- transform-origin: bottom;
- transition: transform 0.2s ease-in-out;
-
- &:after {
- position: absolute;
- display: block;
- content: '';
- transform: translateX(-50%);
- width: 100%;
- height: 100%;
- top: 0;
- border-radius: 50% 50% 50% 0;
- transform: rotate(-45deg);
- background: #1266f1;
- z-index: -1;
- }
-
- .thumb-value {
- display: block;
- font-size: 12px;
- line-height: 30px;
- color: rgb(255, 255, 255);
- font-weight: 500;
- z-index: 2;
- }
-
- &.thumb-active {
- transform: scale(1);
- }
- }
-}
diff --git a/src/scss/free/_ripple.scss b/src/scss/free/_ripple.scss
index 3e8877ef..d62351b5 100644
--- a/src/scss/free/_ripple.scss
+++ b/src/scss/free/_ripple.scss
@@ -2,7 +2,6 @@
position: relative;
overflow: hidden;
display: inline-block;
- vertical-align: bottom;
}
.ripple-surface-unbound {
diff --git a/src/scss/free/_scrollspy.scss b/src/scss/free/_scrollspy.scss
index 5e596509..74c237bd 100644
--- a/src/scss/free/_scrollspy.scss
+++ b/src/scss/free/_scrollspy.scss
@@ -3,26 +3,25 @@
.nav-pills {
&.menu-sidebar {
.nav-link {
- font-size: $scrollspy-menu-sidebar-font-size;
+ font-size: 0.8rem;
background-color: transparent;
- color: $scrollspy-menu-sidebar-color;
- line-height: $scrollspy-menu-sidebar-line-height;
- padding: 0 $scrollspy-menu-sidebar-padding-x;
- font-weight: $scrollspy-menu-sidebar-font-weight;
- transition: $scrollspy-menu-sidebar-transition;
+ color: #262626;
+ line-height: 1.1rem;
+ padding: 0 5px;
+ font-weight: 400;
+ transition: all 0.2s ease-in-out;
text-transform: initial;
- margin-top: $scrollspy-menu-sidebar-margin-y;
- margin-bottom: $scrollspy-menu-sidebar-margin-y;
+ margin-top: 3px;
+ margin-bottom: 3px;
}
.nav-link.active,
.show > .nav-link {
background-color: transparent;
box-shadow: none;
- color: $scrollspy-menu-sidebar-active-color;
- font-weight: $scrollspy-menu-sidebar-active-font-weight;
- border-left: $scrollspy-menu-sidebar-active-border-width solid
- $scrollspy-menu-sidebar-active-border-color;
+ color: $primary;
+ font-weight: 600;
+ border-left: 0.125rem solid $primary;
border-radius: 0;
}
}
diff --git a/src/scss/free/_tables.scss b/src/scss/free/_tables.scss
deleted file mode 100644
index a8584fd2..00000000
--- a/src/scss/free/_tables.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-//
-// Basic MDB table
-//
-
-.table {
- font-size: $table-font-size;
-
- > :not(caption) > * > * {
- padding: $table-cell-padding-y $table-cell-padding-x;
- transition: $table-hover-transition;
- background-image: none;
- background-color: var(--bs-table-accent-bg);
- }
-
- th {
- font-weight: 500;
- }
-
- tbody {
- font-weight: 300;
- }
-
- > :not(:last-child) > :last-child > * {
- border-bottom-color: $table-group-separator-color;
- }
-}
-
-.table-sm {
- > :not(caption) > * > * {
- padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
- }
-}
-
-@each $color, $value in $table-variants {
- @include table-variant-mdb($color, $value);
-}
diff --git a/src/scss/free/_toasts.scss b/src/scss/free/_toasts.scss
index 9505a262..e6fb86fc 100644
--- a/src/scss/free/_toasts.scss
+++ b/src/scss/free/_toasts.scss
@@ -1,28 +1,11 @@
// Toasts
.toast {
- background-color: $toast-background-color;
+ background-color: #fff;
border: 0;
- box-shadow: $toast-box-shadow;
-
- .btn-close {
- width: 1.3em;
- }
+ box-shadow: $box-shadow-2;
}
.toast-header {
- background-color: $toast-header-background-color;
-}
-
-.parent-toast-relative {
- position: relative;
-}
-
-.toast-absolute {
- position: absolute;
-}
-
-.toast-fixed {
- position: fixed;
- z-index: $zindex-toast;
+ background-color: #fff;
}
diff --git a/src/scss/free/_tooltip.scss b/src/scss/free/_tooltip.scss
index 2affd9a6..ba3065ea 100644
--- a/src/scss/free/_tooltip.scss
+++ b/src/scss/free/_tooltip.scss
@@ -11,9 +11,9 @@
}
.tooltip-inner {
- color: $tooltip-inner-color;
- padding: $tooltip-inner-padding-y $tooltip-inner-padding-x;
- font-size: $tooltip-inner-font-size;
- background-color: $tooltip-inner-background-color;
- border-radius: $tooltip-inner-border-radius;
+ color: #fff;
+ padding: 6px 16px;
+ font-size: 14px;
+ background-color: #6d6d6d;
+ border-radius: 4px;
}
diff --git a/src/scss/free/_type.scss b/src/scss/free/_type.scss
index 75304746..3b72089b 100644
--- a/src/scss/free/_type.scss
+++ b/src/scss/free/_type.scss
@@ -1,13 +1,13 @@
// Type
.note {
- padding: $note-padding;
- border-left: $note-border-width solid;
- border-radius: $note-border-radius;
+ padding: 10px;
+ border-left: 6px solid;
+ border-radius: 5px;
strong {
- font-weight: $note-strong-font-weight;
+ font-weight: 600;
}
p {
- font-weight: $note-paragraph-font-weight;
+ font-weight: 500;
}
}
@@ -17,9 +17,3 @@
border-color: map-get($color, border-color);
}
}
-
-.w-responsive {
- @media (min-width: 1199px) {
- width: 75%;
- }
-}
diff --git a/src/scss/free/_variables.scss b/src/scss/free/_variables.scss
index 5b73908d..0d0a1192 100644
--- a/src/scss/free/_variables.scss
+++ b/src/scss/free/_variables.scss
@@ -1,296 +1,297 @@
// Variables
-$enable-negative-margins: true !default;
+// Color system
// Grays
-$white: #fff !default;
-$gray-50: #fbfbfb !default;
-$gray-100: #f5f5f5 !default;
-$gray-200: #eeeeee !default;
-$gray-300: #e0e0e0 !default;
-$gray-400: #bdbdbd !default;
-$gray-500: #9e9e9e !default;
-$gray-600: #757575 !default;
-$gray-700: #616161 !default;
-$gray-800: #4f4f4f !default;
-$gray-900: #262626 !default;
-$black: #000 !default;
-// Material Design Color System - start
-$blue-50: #e3f2fd !default;
-$blue-100: #bbdefb !default;
-$blue-200: #90caf9 !default;
-$blue-300: #64b5f6 !default;
-$blue-400: #42a5f5 !default;
-$blue-500: #2196f3 !default;
-$blue-600: #1e88e5 !default;
-$blue-700: #1976d2 !default;
-$blue-800: #1565c0 !default;
-$blue-900: #0d47a1 !default;
-$blue-accent-100: #82b1ff !default;
-$blue-accent-200: #448aff !default;
-$blue-accent-400: #2979ff !default;
-$blue-accent-700: #2962ff !default;
+$white: #fff;
+$gray-50: #eff0f4;
+$gray-100: #f5f5f5;
+$gray-200: #eeeeee;
+$gray-300: #e0e0e0;
+$gray-400: #bdbdbd;
+$gray-500: #9e9e9e;
+$gray-600: #757575;
+$gray-700: #616161;
+$gray-800: #4f4f4f;
+$gray-900: #262626;
+$black: #000;
-$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;
+// fusv-disable
+$blue-50: #e3f2fd;
+$blue-100: #bbdefb;
+$blue-200: #90caf9;
+$blue-300: #64b5f6;
+$blue-400: #42a5f5;
+$blue-500: #2196f3;
+$blue-600: #1e88e5;
+$blue-700: #1976d2;
+$blue-800: #1565c0;
+$blue-900: #0d47a1;
+$blue-accent-100: #82b1ff;
+$blue-accent-200: #448aff;
+$blue-accent-400: #2979ff;
+$blue-accent-700: #2962ff;
-$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;
+$indigo-50: #e8eaf6;
+$indigo-100: #c5cae9;
+$indigo-200: #9fa8da;
+$indigo-300: #7986cb;
+$indigo-400: #5c6bc0;
+$indigo-500: #3f51b5;
+$indigo-600: #3949ab;
+$indigo-700: #303f9f;
+$indigo-800: #283593;
+$indigo-900: #1a237e;
+$indigo-accent-100: #8c9eff;
+$indigo-accent-200: #536dfe;
+$indigo-accent-400: #3d5afe;
+$indigo-accent-700: #304ffe;
-$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;
+$purple-100: #e1bee7;
+$purple-200: #ce93d8;
+$purple-300: #ba68c8;
+$purple-400: #ab47bc;
+$purple-500: #9c27b0;
+$purple-600: #8e24aa;
+$purple-700: #7b1fa2;
+$purple-800: #6a1b9a;
+$purple-900: #4a148c;
+$purple-accent-100: #ea80fc;
+$purple-accent-200: #e040fb;
+$purple-accent-400: #d500f9;
+$purple-accent-700: #aa00ff;
-$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;
+$pink-100: #f8bbd0;
+$pink-200: #f48fb1;
+$pink-300: #f06292;
+$pink-400: #ec407a;
+$pink-500: #e91e63;
+$pink-600: #d81b60;
+$pink-700: #c2185b;
+$pink-800: #ad1457;
+$pink-900: #880e4f;
+$pink-accent-100: #ff80ab;
+$pink-accent-200: #ff4081;
+$pink-accent-400: #f50057;
+$pink-accent-700: #c51162;
-$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;
+$red-50: #ffebee;
+$red-100: #ffcdd2;
+$red-200: #ef9a9a;
+$red-300: #e57373;
+$red-400: #ef5350;
+$red-500: #f44336;
+$red-600: #e53935;
+$red-700: #d32f2f;
+$red-800: #c62828;
+$red-900: #b71c1c;
+$red-accent-100: #ff8a80;
+$red-accent-200: #ff5252;
+$red-accent-400: #ff1744;
+$red-accent-700: #d50000;
-$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;
+$orange-50: #fff3e0;
+$orange-100: #ffe0b2;
+$orange-200: #ffcc80;
+$orange-300: #ffb74d;
+$orange-400: #ffa726;
+$orange-500: #ff9800;
+$orange-600: #fb8c00;
+$orange-700: #f57c00;
+$orange-800: #ef6c00;
+$orange-900: #e65100;
+$orange-accent-100: #ffd180;
+$orange-accent-200: #ffab40;
+$orange-accent-400: #ff9100;
+$orange-accent-700: #ff6d00;
-$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;
+$yellow-50: #fffde7;
+$yellow-100: #fff9c4;
+$yellow-200: #fff59d;
+$yellow-300: #fff176;
+$yellow-400: #ffee58;
+$yellow-500: #ffeb3b;
+$yellow-600: #fdd835;
+$yellow-700: #fbc02d;
+$yellow-800: #f9a825;
+$yellow-900: #f57f17;
+$yellow-accent-100: #ffff8d;
+$yellow-accent-200: #ffff00;
+$yellow-accent-400: #ffea00;
+$yellow-accent-700: #ffd600;
-$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;
+$green-100: #c8e6c9;
+$green-200: #a5d6a7;
+$green-300: #81c784;
+$green-400: #66bb6a;
+$green-500: #4caf50;
+$green-600: #43a047;
+$green-700: #388e3c;
+$green-800: #2e7d32;
+$green-900: #1b5e20;
+$green-accent-100: #b9f6ca;
+$green-accent-200: #69f0ae;
+$green-accent-400: #00e676;
+$green-accent-700: #00c853;
-$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;
+$teal-100: #b2dfdb;
+$teal-200: #80cbc4;
+$teal-300: #4db6ac;
+$teal-400: #26a69a;
+$teal-500: #009688;
+$teal-600: #00897b;
+$teal-700: #00796b;
+$teal-800: #00695c;
+$teal-900: #004d40;
+$teal-accent-100: #a7ffeb;
+$teal-accent-200: #64ffda;
+$teal-accent-400: #1de9b6;
+$teal-accent-700: #00bfa5;
-$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;
+$cyan-50: #e0f7fa;
+$cyan-100: #b2ebf2;
+$cyan-200: #80deea;
+$cyan-300: #4dd0e1;
+$cyan-400: #26c6da;
+$cyan-500: #00bcd4;
+$cyan-600: #00acc1;
+$cyan-700: #0097a7;
+$cyan-800: #00838f;
+$cyan-900: #006064;
+$cyan-accent-100: #84ffff;
+$cyan-accent-200: #18ffff;
+$cyan-accent-400: #00e5ff;
+$cyan-accent-700: #00b8d4;
-$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;
+$deep-purple-50: #ede7f6;
+$deep-purple-100: #d1c4e9;
+$deep-purple-200: #b39ddb;
+$deep-purple-300: #9575cd;
+$deep-purple-400: #7e57c2;
+$deep-purple-500: #673ab7;
+$deep-purple-600: #5e35b1;
+$deep-purple-700: #512da8;
+$deep-purple-800: #4527a0;
+$deep-purple-900: #311b92;
+$deep-purple-accent-100: #b388ff;
+$deep-purple-accent-200: #7c4dff;
+$deep-purple-accent-400: #651fff;
+$deep-purple-accent-700: #6200ea;
-$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;
+$light-blue-50: #e1f5fe;
+$light-blue-100: #b3e5fc;
+$light-blue-200: #81d4fa;
+$light-blue-300: #4fc3f7;
+$light-blue-400: #29b6f6;
+$light-blue-500: #03a9f4;
+$light-blue-600: #039be5;
+$light-blue-700: #0288d1;
+$light-blue-800: #0277bd;
+$light-blue-900: #01579b;
+$light-blue-accent-100: #80d8ff;
+$light-blue-accent-200: #40c4ff;
+$light-blue-accent-400: #00b0ff;
+$light-blue-accent-700: #0091ea;
-$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;
+$light-green-50: #f1f8e9;
+$light-green-100: #dcedc8;
+$light-green-200: #c5e1a5;
+$light-green-300: #aed581;
+$light-green-400: #9ccc65;
+$light-green-500: #8bc34a;
+$light-green-600: #7cb342;
+$light-green-700: #689f38;
+$light-green-800: #558b2f;
+$light-green-900: #33691e;
+$light-green-accent-100: #ccff90;
+$light-green-accent-200: #b2ff59;
+$light-green-accent-400: #76ff03;
+$light-green-accent-700: #64dd17;
-$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;
+$lime-50: #f9fbe7;
+$lime-100: #f0f4c3;
+$lime-200: #e6ee9c;
+$lime-300: #dce775;
+$lime-400: #d4e157;
+$lime-500: #cddc39;
+$lime-600: #c0ca33;
+$lime-700: #afb42b;
+$lime-800: #9e9d24;
+$lime-900: #827717;
+$lime-accent-100: #f4ff81;
+$lime-accent-200: #eeff41;
+$lime-accent-400: #c6ff00;
+$lime-accent-700: #aeea00;
-$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;
+$amber-50: #fff8e1;
+$amber-100: #ffecb3;
+$amber-200: #ffe082;
+$amber-300: #ffd54f;
+$amber-400: #ffca28;
+$amber-500: #ffc107;
+$amber-600: #ffb300;
+$amber-700: #ffa000;
+$amber-800: #ff8f00;
+$amber-900: #ff6f00;
+$amber-accent-100: #ffe57f;
+$amber-accent-200: #ffd740;
+$amber-accent-400: #ffc400;
+$amber-accent-700: #ffab00;
-$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;
+$deep-orange-50: #fbe9e7;
+$deep-orange-100: #ffccbc;
+$deep-orange-200: #ffab91;
+$deep-orange-300: #ff8a65;
+$deep-orange-400: #ff7043;
+$deep-orange-500: #ff5722;
+$deep-orange-600: #f4511e;
+$deep-orange-700: #e64a19;
+$deep-orange-800: #d84315;
+$deep-orange-900: #bf360c;
+$deep-orange-accent-100: #ff9e80;
+$deep-orange-accent-200: #ff6e40;
+$deep-orange-accent-400: #ff3d00;
+$deep-orange-accent-700: #dd2c00;
-$blue-gray-50: #eceff1 !default;
-$blue-gray-100: #cfd8dc !default;
-$blue-gray-200: #b0bec5 !default;
-$blue-gray-300: #90a4ae !default;
-$blue-gray-400: #78909c !default;
-$blue-gray-500: #607d8b !default;
-$blue-gray-600: #546e7a !default;
-$blue-gray-700: #455a64 !default;
-$blue-gray-800: #37474f !default;
-$blue-gray-900: #263238 !default;
-// Material Design Color System - end
+$brown-50: #efebe9;
+$brown-100: #d7ccc8;
+$brown-200: #bcaaa4;
+$brown-300: #a1887f;
+$brown-400: #8d6e63;
+$brown-500: #795548;
+$brown-600: #6d4c41;
+$brown-700: #5d4037;
+$brown-800: #4e342e;
+$brown-900: #3e2723;
+
+$blue-gray-50: #eceff1;
+$blue-gray-100: #cfd8dc;
+$blue-gray-200: #b0bec5;
+$blue-gray-300: #90a4ae;
+$blue-gray-400: #78909c;
+$blue-gray-500: #607d8b;
+$blue-gray-600: #546e7a;
+$blue-gray-700: #455a64;
+$blue-gray-800: #37474f;
+$blue-gray-900: #263238;
+// fusv-enable
// Theme colors
-$primary: #1266f1 !default;
-$secondary: #b23cfd !default;
-$success: #00b74a !default;
-$info: #39c0ed !default;
-$warning: #ffa900 !default;
-$danger: #f93154 !default;
-$light: $gray-50 !default;
-$dark: $gray-900 !default;
-// scss-docs-start theme-colors-map
+$primary: #1266f1;
+$secondary: #b23cfd;
+$success: #00b74a;
+$info: #39c0ed;
+$warning: #ffa900;
+$danger: #f93154;
+$light: $gray-100;
+$dark: $gray-900;
+
$theme-colors: (
'primary': $primary,
'secondary': $secondary,
@@ -300,12 +301,8 @@ $theme-colors: (
'danger': $danger,
'light': $light,
'dark': $dark,
- 'white': $white,
- 'black': $black,
-) !default;
-// scss-docs-end theme-colors-map
+);
-// scss-docs-start note-colors-map
$note: () !default;
$note: map-merge(
(
@@ -340,34 +337,31 @@ $note: map-merge(
),
$note
);
-// scss-docs-end note-colors-map
-// Body
-//
-// Settings for the `` element.
-
-$body-color: $gray-800 !default;
+$body-color: $gray-800;
// Components
-//
-// Shadows offset, blur, spread and color
-$box-shadow-0: none !default;
-$box-shadow-1: 0 2px 10px 0 rgba(0, 0, 0, 0.05) !default;
-$box-shadow-2: 0 5px 15px 0 rgba(0, 0, 0, 0.05) !default;
-$box-shadow-3: 0 10px 20px 0 rgba(0, 0, 0, 0.05) !default;
-$box-shadow-4: 0 15px 30px 0 rgba(0, 0, 0, 0.05) !default;
-$box-shadow-5: 0 20px 40px 0 rgba(0, 0, 0, 0.05) !default;
+// $box-shadow-0: none;
+// $box-shadow-1: 0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.05);
+// $box-shadow-2: 0 4px 10px 0 rgba(0, 0, 0, 0.05), 0 4px 20px 0 rgba(0, 0, 0, 0.05);
+// $box-shadow-3: 0 6px 15px 2px rgba(0, 0, 0, 0.05), 0 6px 30px 2px rgba(0, 0, 0, 0.05);
+// $box-shadow-4: 0 8px 20px 4px rgba(0, 0, 0, 0.05), 0 8px 40px 4px rgba(0, 0, 0, 0.05);
+// $box-shadow-5: 0 10px 25px 6px rgba(0, 0, 0, 0.05), 0 10px 50px 6px rgba(0, 0, 0, 0.05);
-$box-shadow-1-strong: 0px 2px 5px 0px rgba(0, 0, 0, 0.25), 0px 3px 10px 0px rgba(0, 0, 0, 0.2) !default;
-$box-shadow-2-strong: 0px 4px 8px 0px rgba(0, 0, 0, 0.25), 0px 5px 15px 2px rgba(0, 0, 0, 0.2) !default;
-$box-shadow-3-strong: 0px 6px 11px 0px rgba(0, 0, 0, 0.25), 0px 7px 20px 3px rgba(0, 0, 0, 0.2) !default;
-$box-shadow-4-strong: 0px 6px 14px 0px rgba(0, 0, 0, 0.25), 0px 10px 30px 4px rgba(0, 0, 0, 0.2) !default;
-$box-shadow-5-strong: 0px 6px 20px 0px rgba(0, 0, 0, 0.25), 0px 12px 40px 5px rgba(0, 0, 0, 0.2) !default;
+$box-shadow-0: none;
+$box-shadow-1: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
+$box-shadow-2: 0 5px 15px 0 rgba(0, 0, 0, 0.05);
+$box-shadow-3: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
+$box-shadow-4: 0 15px 30px 0 rgba(0, 0, 0, 0.05);
+$box-shadow-5: 0 20px 40px 0 rgba(0, 0, 0, 0.05);
-$box-shadow-3-top: 0 -10px 20px 0 rgba(0, 0, 0, 0.05) !default;
+$box-shadow-1-strong: 0 2px 5px 0 rgba(0, 0, 0, 0.25), 0 2px 10px 0 rgba(0, 0, 0, 0.25);
+$box-shadow-2-strong: 0 4px 10px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.25);
+$box-shadow-3-strong: 0 6px 15px 2px rgba(0, 0, 0, 0.25), 0 6px 30px 2px rgba(0, 0, 0, 0.25);
+$box-shadow-4-strong: 0 8px 20px 4px rgba(0, 0, 0, 0.25), 0 8px 40px 4px rgba(0, 0, 0, 0.25);
+$box-shadow-5-strong: 0 10px 25px 6px rgba(0, 0, 0, 0.25), 0 10px 50px 6px rgba(0, 0, 0, 0.25);
-// scss-docs-start light-shadows-values
$shadows-light: (
'0': $box-shadow-0,
'1': $box-shadow-1,
@@ -375,571 +369,29 @@ $shadows-light: (
'3': $box-shadow-3,
'4': $box-shadow-4,
'5': $box-shadow-5,
-) !default;
-// scss-docs-end light-shadows-values
+);
-// scss-docs-start strong-shadows-values
$shadows-strong: (
'1': $box-shadow-1-strong,
'2': $box-shadow-2-strong,
'3': $box-shadow-3-strong,
'4': $box-shadow-4-strong,
'5': $box-shadow-5-strong,
-) !default;
-// scss-docs-end strong-shadows-values
+);
// Typography
-//
-// Font, line-height, and color for body text, headings, and more.
-$font-family-roboto: 'Roboto', sans-serif !default;
-$font-family-base: var(--mdb-font-roboto) !default;
+$font-family-roboto: 'Roboto', sans-serif;
+$font-family-base: var(--mdb-font-roboto);
-$line-height-base: 1.6 !default;
+$line-height-base: 1.6;
// Buttons
-//
-// For each of MDB's buttons, define text, background, and border color.
-$btn-line-height: 1.5 !default;
-$btn-padding-top: 0.625rem !default;
-$btn-padding-bottom: 0.5rem !default;
-$btn-font-size: 0.75rem !default;
-$btn-padding-left: 1.5rem !default;
-$btn-padding-right: 1.5rem !default;
-$btn-font-weight: 500 !default;
-$btn-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.1) !default;
-$btn-hover-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.1) !default;
-$btn-focus-box-shadow: $btn-hover-box-shadow !default;
-$btn-active-box-shadow: $btn-hover-box-shadow !default;
-$btn-border-width: 0.125rem !default;
+$btn-line-height: 1.6;
+$btn-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+$btn-hover-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.1);
+$btn-focus-box-shadow: $btn-hover-box-shadow;
+$btn-active-box-shadow: $btn-hover-box-shadow;
-$btn-outline-padding-top: 0.5rem !default;
-$btn-outline-padding-bottom: 0.375rem !default;
-$btn-outline-padding-left: 1.375rem !default;
-$btn-outline-padding-right: 1.375rem !default;
-
-$btn-outline-padding-top-sm: 0.25rem !default;
-$btn-outline-padding-bottom-sm: 0.1875rem !default;
-$btn-outline-padding-right-sm: 0.875rem !default;
-$btn-outline-padding-left-sm: 0.875rem !default;
-
-$btn-outline-padding-top-lg: 0.625rem !default;
-$btn-outline-padding-bottom-lg: 0.5625rem !default;
-$btn-outline-padding-right-lg: 1.5625rem !default;
-$btn-outline-padding-left-lg: 1.5625rem !default;
-
-$btn-line-height-lg: 1.6 !default;
-$btn-font-size-lg: 0.875rem !default;
-$btn-padding-top-lg: 0.75rem !default;
-$btn-padding-bottom-lg: 0.6875rem !default;
-$btn-padding-right-lg: 1.6875rem !default;
-$btn-padding-left-lg: 1.6875rem !default;
-
-$btn-line-height-sm: $btn-line-height !default;
-$btn-font-size-sm: 0.75rem !default;
-$btn-padding-top-sm: 0.375rem !default;
-$btn-padding-bottom-sm: 0.3125rem !default;
-$btn-padding-right-sm: 1rem !default;
-$btn-padding-left-sm: 1rem !default;
-
-$btn-link-bgc: #f5f5f5 !default;
-$btn-rounded-border-radius: 10rem !default;
-
-$btn-floating-border-radius: 50% !default;
-
-$btn-floating-width: 2.3125rem !default;
-$btn-floating-height: 2.3125rem !default;
-$btn-floating-icon-width: 2.3125rem !default;
-$btn-floating-icon-line-height: 2.3125rem !default;
-
-$btn-floating-width-lg: 2.8125rem !default;
-$btn-floating-height-lg: 2.8125rem !default;
-$btn-floating-icon-width-lg: 2.8125rem !default;
-$btn-floating-icon-line-height-lg: 2.8125rem !default;
-
-$btn-floating-width-sm: 1.8125rem !default;
-$btn-floating-height-sm: 1.8125rem !default;
-$btn-floating-icon-width-sm: 1.8125rem !default;
-$btn-floating-icon-line-height-sm: 1.8125rem !default;
-
-$btn-outline-floating-icon-width: 2.0625rem !default;
-$btn-outline-floating-icon-line-height: 2.0625rem !default;
-
-$btn-outline-floating-icon-width-lg: 2.5625rem !default;
-$btn-outline-floating-icon-line-height-lg: 2.5625rem !default;
-
-$btn-outline-floating-icon-width-sm: 1.5625rem !default;
-$btn-outline-floating-icon-line-height-sm: 1.5625rem !default;
-
-$btn-floating-border-radius: 50% !default;
-
-$btn-block-spacing-y: 0.5rem !default;
-// Button group
-//
-// Material styling for group of buttons
-
-$btn-group-border-radius: calc(4px - 1px) !default;
-$btn-group-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
- border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
-
-// Forms
-//
-// Material styling for outline forms border, label, size
-
-$input-padding-top: 0.33em !default;
-$input-padding-bottom: $input-padding-top !default;
-$input-padding-left: 0.75em !default;
-$input-padding-right: $input-padding-left !default;
-$input-transition: all 0.2s linear !default;
-
-$form-label-left: 0.75rem !default;
-$form-label-padding-top: 0.37rem !default;
-$form-label-transition: all 0.2s ease-out !default;
-$form-label-color: rgba(0, 0, 0, 0.6) !default;
-
-$input-focus-active-label-transform: translateY(-1rem) translateY(0.1rem) scale(0.8) !default;
-$input-focus-label-color: $primary !default;
-$input-focus-border-width: 0.125rem !default;
-$input-focus-border-color: $primary !default;
-$input-disabled-background-color: #e9ecef !default;
-
-$input-padding-left-lg: 0.75em !default;
-$input-padding-right-lg: $input-padding-left-lg !default;
-$input-font-size-lg: 1rem !default;
-$input-line-height-lg: 2.15 !default;
-$input-focus-active-label-transform-lg: translateY(-1.25rem) translateY(0.1rem) scale(0.8) !default;
-
-$input-padding-left-sm: 0.99em !default;
-$input-padding-right-sm: $input-padding-left-sm !default;
-$input-padding-top-sm: 0.43em !default;
-$input-padding-bottom-sm: 0.35em !default;
-$input-font-size-sm: 0.775rem !default;
-$input-line-height-sm: 1.6 !default;
-$input-focus-active-label-transform-sm: translateY(-0.85rem) translateY(0.1rem) scale(0.8) !default;
-
-$form-notch-div-border-color: #bdbdbd !default;
-$form-notch-leading-width: 0.5rem !default;
-$form-notch-leading-border-radius: 0.25rem !default;
-$form-notch-middle-max-width: 1rem !default;
-$form-notch-trailing-border-radius: $form-notch-leading-border-radius !default;
-
-$form-label-padding-top-lg: 0.7rem !default;
-$form-label-padding-top-sm: 0.33rem !default;
-$form-label-font-size-sm: 0.775rem !default;
-
-$form-white-input-color: $white !default;
-$form-white-label-color: $gray-50 !default;
-$form-white-notch-div-border-color: $gray-50 !default;
-$form-white-input-focus-label-color: $white !default;
-$form-white-input-focus-border-color: $white !default;
-
-$form-check-input-margin-left: 1.79rem !default;
-$form-check-input-radio-margin-left: 1.85rem !default;
-$form-check-input-width-md: 1.125rem !default;
-$form-check-input-height: $form-check-input-width-md !default;
-$form-check-input-background-color: $white !default;
-$form-check-input-border-width: 0.125rem !default;
-$form-check-input-border-color: rgb(117, 117, 117) !default;
-
-$form-check-input-before-box-shadow: 0px 0px 0px 13px transparent !default;
-$form-check-input-before-border-radius: 50% !default;
-$form-check-input-before-width: 0.875rem !default;
-$form-check-input-before-height: $form-check-input-before-width !default;
-$form-check-input-before-transform: scale(0) !default;
-
-$form-check-input-hover-before-opacity: 0.04 !default;
-$form-check-input-hover-before-box-shadow: 0px 0px 0px 13px rgba(0, 0, 0, 0.6) !default;
-
-$form-check-input-focus-border-color: $form-check-input-border-color !default;
-$form-check-input-focus-transition: border-color 0.2s !default;
-
-$form-check-input-focus-before-opacity: 0.12 !default;
-$form-check-input-focus-before-box-shadow: $form-check-input-hover-before-box-shadow !default;
-$form-check-input-focus-before-transform: scale(1) !default;
-$form-check-input-focus-before-transition: box-shadow 0.2s, transform 0.2s !default;
-
-$form-check-input-checked-border-color: $primary !default;
-$form-check-input-checked-before-opacity: 0.16 !default;
-$form-check-input-checked-focus-border-color: $primary !default;
-$form-check-input-checked-focus-before-box-shadow: 0px 0px 0px 13px $primary !default;
-$form-check-input-checked-focus-before-transform: $form-check-input-focus-before-transform !default;
-$form-check-input-checked-focus-before-transition: $form-check-input-focus-before-transition !default;
-
-$form-check-input-checkbox-border-radius: 0.125rem !default;
-$form-check-input-checkbox-focus-after-width: 0.875rem !default;
-$form-check-input-checkbox-focus-after-height: $form-check-input-checkbox-focus-after-width !default;
-$form-check-input-checkbox-focus-after-background-color: $white !default;
-$form-check-input-checkbox-checked-background-color: $primary !default;
-$form-check-input-checkbox-checked-focus-background-color: $primary !default;
-
-$form-check-input-checkbox-checked-after-transform: rotate(45deg) !default;
-$form-check-input-checkbox-checked-after-border-width: 0.125rem !default;
-$form-check-input-checkbox-checked-after-border-color: $white !default;
-$form-check-input-checkbox-checked-after-width: 0.375rem !default;
-$form-check-input-checkbox-checked-after-height: 0.8125rem !default;
-$form-check-input-checkbox-checked-after-margin-left: 0.25rem !default;
-$form-check-input-checkbox-checked-after-margin-top: -1px !default;
-
-$form-check-input-indeterminate-focus-before-box-shadow: 0px 0px 0px 13px $primary !default;
-$form-check-input-indeterminate-checked-background-color: $primary !default;
-$form-check-input-indeterminate-checked-after-transform: rotate(90deg) !default;
-$form-check-input-indeterminate-checked-after-border-width: 0.125rem !default;
-$form-check-input-indeterminate-checked-after-border-color: $white !default;
-$form-check-input-indeterminate-checked-after-width: 0.125rem !default;
-$form-check-input-indeterminate-checked-after-height: 0.875rem !default;
-$form-check-input-indeterminate-checked-after-margin-left: 0.375rem !default;
-$form-check-input-indeterminate-focus-background-color: $primary !default;
-$form-check-input-indeterminate-focus-border-color: $primary !default;
-$form-check-input-indeterminate-border-color: $gray-600 !default;
-
-$form-check-input-radio-border-radius: 50% !default;
-$form-check-input-radio-width: 1.25rem !default;
-$form-check-input-radio-height: $form-check-input-radio-width !default;
-
-$form-check-input-radio-before-width: 1rem !default;
-$form-check-input-radio-before-height: $form-check-input-radio-before-width !default;
-
-$form-check-input-radio-after-width: $form-check-input-radio-before-width !default;
-$form-check-input-radio-after-height: $form-check-input-radio-after-width !default;
-$form-check-input-radio-after-border-radius: $form-check-input-radio-border-radius !default;
-$form-check-input-radio-after-background-color: $white !default;
-
-$form-check-input-radio-checked-background-color: $white !default;
-$form-check-input-radio-checked-after-border-radius: $form-check-input-radio-border-radius !default;
-$form-check-input-radio-checked-after-width: 0.625rem !default;
-$form-check-input-radio-checked-after-height: $form-check-input-radio-checked-after-width !default;
-$form-check-input-radio-checked-after-border-color: $primary !default;
-$form-check-input-radio-checked-after-background-color: $primary !default;
-$form-check-input-radio-checked-after-margin-top: 0.1875rem !default;
-$form-check-input-radio-checked-after-margin-left: 0.1875rem !default;
-$form-check-input-radio-checked-after-transition: border-color !default;
-$form-check-input-radio-checked-focus-background-color: $white !default;
-
-$form-switch-padding-left: 1.85rem !default;
-$form-switch-form-check-input-border-radius: 0.4375rem !default;
-$form-switch-form-check-input-width: 2.25rem !default;
-$form-switch-form-check-input-height: 0.875rem !default;
-$form-switch-form-check-input-background-color: rgba(0, 0, 0, 0.38) !default;
-$form-switch-form-check-input-margin-top: 0.35rem !default;
-$form-switch-form-check-input-margin-right: 0.7rem !default;
-
-$form-switch-form-check-input-after-border-radius: 50% !default;
-$form-switch-form-check-input-after-width: 1.25rem !default;
-$form-switch-form-check-input-after-height: $form-switch-form-check-input-after-width !default;
-$form-switch-form-check-input-after-background-color: $white !default;
-$form-switch-form-check-input-after-margin-top: -0.1875rem !default;
-$form-switch-form-check-input-after-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default;
-$form-switch-form-check-input-after-transition: background-color 0.2s, transform 0.2s !default;
-
-$form-switch-form-check-input-focus-before-box-shadow: 3px -1px 0px 13px rgba(0, 0, 0, 0.6) !default;
-$form-switch-form-check-input-focus-before-transform: scale(1) !default;
-$form-switch-form-check-input-focus-before-transition: box-shadow 0.2s, transform 0.2s !default;
-
-$form-switch-form-check-input-focus-after-border-radius: $form-switch-form-check-input-after-border-radius !default;
-$form-switch-form-check-input-focus-after-width: 1.25rem !default;
-$form-switch-form-check-input-focus-after-height: $form-switch-form-check-input-focus-after-width !default;
-
-$form-switch-form-check-input-checked-focus-before-margin-left: 1.0625rem !default;
-$form-switch-form-check-input-checked-focus-before-box-shadow: 3px -1px 0px 13px $primary !default;
-$form-switch-form-check-input-checked-focus-before-transform: scale(1) !default;
-$form-switch-form-check-input-checked-focus-before-transition: box-shadow 0.2s, transform 0.2s !default;
-
-$form-switch-form-check-input-checked-checkbox-after-border-radius: 50% !default;
-$form-switch-form-check-input-checked-checkbox-after-width: 1.25rem !default;
-$form-switch-form-check-input-checked-checkbox-after-height: 1.25rem !default;
-$form-switch-form-check-input-checked-checkbox-after-background-color: $primary !default;
-$form-switch-form-check-input-checked-checkbox-after-margin-top: -3px !default;
-$form-switch-form-check-input-checked-checkbox-after-margin-left: 1.0625rem !default;
-$form-switch-form-check-input-checked-checkbox-after-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default;
-$form-switch-form-check-input-checked-checkbox-after-transition: background-color 0.2s,
- transform 0.2s !default;
-
-$form-file-height: calc(1.79rem + 0.33rem + 2px) !default;
-
-$form-file-label-focus-border-color: $primary !default;
-$form-file-label-focus-transition: all 0.2s linear !default;
-$form-file-label-focus-text-border-width: 2px 1px 2px 2px !default;
-$form-file-label-focus-button-border-width: 2px 2px 2px 1px !default;
-$form-file-label-disabled-background-color: #e9ecef !default;
-$form-file-label-height: $form-file-height !default;
-$form-file-label-border-color: #bdbdbd !default;
-$form-file-label-border-radius: 0.2rem !default;
-
-$form-file-text-padding-y: 0.33rem !default;
-$form-file-text-border-color: #bdbdbd !default;
-
-$form-file-button-line-height: 1.5 !default;
-$form-file-button-background-color: #fff !default;
-$form-file-button-border-color: $form-file-text-border-color !default;
-
-$form-file-sm-height: calc(1.33rem + 0.33rem + 2px) !default;
-$form-file-sm-font-size: 0.775rem !default;
-$form-file-sm-line-height: 1.5 !default;
-$form-file-sm-padding-y: $form-file-text-padding-y !default;
-
-$form-file-lg-height: calc(2.315rem + 0.33rem + 2px) !default;
-$form-file-lg-font-size: 1rem !default;
-$form-file-lg-line-height: 2.15 !default;
-$form-file-lg-padding-y: $form-file-text-padding-y !default;
-
-$form-range-webkit-slider-thumb-margin-top: -6px !default;
-$form-range-webkit-slider-runnable-track-height: 4px !default;
-
-$input-group-height: calc(1.75rem + 0.33rem + 2px) !default;
-$input-group-min-height: $input-group-height !default;
-$input-group-padding-y: 0.27rem !default;
-$input-group-transition: all 0.2s linear !default;
-
-$input-group-focus-transition: $input-group-transition !default;
-$input-group-focus-border-color: $primary !default;
-$input-group-focus-box-shadow: inset 0 0 0 1px $primary !default;
-
-$input-group-text-padding-y: 0.26rem !default;
-
-$input-group-lg-height: calc(2.315rem + 0.33rem + 2px) !default;
-$input-group-lg-font-size: 1rem !default;
-$input-group-lg-padding-y: 0.33rem !default;
-$input-group-lg-text-font-size: $input-group-lg-font-size !default;
-
-$input-group-sm-height: calc(1.33rem + 0.33rem + 2px) !default;
-$input-group-sm-min-height: $input-group-sm-height !default;
-$input-group-sm-font-size: 0.775rem !default;
-$input-group-sm-padding-y: $input-group-lg-padding-y !default;
-$input-group-sm-text-font-size: $input-group-sm-font-size !default;
-$input-group-sm-text-line-height: 1.6 !default;
-
-$input-group-form-outline-border-left-width: 1px !default;
-$input-group-form-outline-border-left-color: #bdbdbd !default;
-
-// Form validation
-
-$form-feedback-valid-tooltip-color: $white !default;
-$form-feedback-valid-color: $success !default;
-$form-feedback-invalid-color: $danger !default;
-
-// scss-docs-start form-validation-states
-$form-validation-states-mdb: (
- 'valid': (
- 'color': $form-feedback-valid-color,
- ),
- 'invalid': (
- 'color': $form-feedback-invalid-color,
- ),
-) !default;
-// scss-docs-end form-validation-states
-
-// scss-docs-start zindex-stack
-$zindex-toast: 1060 !default;
-$zindex-alert: 1070 !default;
-$zindex-popover: 1080 !default;
-$zindex-tooltip: 1090 !default;
-// scss-docs-end zindex-stack
-
-// Navs
-
-$nav-tabs-link-border-width: 0 0 2px 0 !default;
-$nav-tabs-link-font-weight: 500 !default;
-$nav-tabs-link-font-size: 12px !default;
-$nav-tabs-link-color: rgba(0, 0, 0, 0.6) !default;
-$nav-tabs-link-padding-top: 17px !default;
-$nav-tabs-link-padding-bottom: 16px !default;
-$nav-tabs-link-padding-x: 29px !default;
-$nav-tabs-link-hover-background-color: #f5f5f5 !default;
-
-$nav-pills-margin: 0.5rem !default;
-$nav-pills-link-border-radius: 0.25rem !default;
-$nav-pills-link-font-size: $nav-tabs-link-font-size !default;
-$nav-pills-link-padding-top: $nav-tabs-link-padding-top !default;
-$nav-pills-link-padding-bottom: $nav-tabs-link-padding-bottom !default;
-$nav-pills-link-padding-x: $nav-tabs-link-padding-x !default;
-$nav-pills-link-line-height: 1 !default;
-$nav-pills-link-background-color: $nav-tabs-link-hover-background-color !default;
-$nav-pills-link-font-weight: $nav-tabs-link-font-weight !default;
-$nav-pills-link-color: $nav-tabs-link-color !default;
-
-// Navbar
-
-$navbar-box-shadow: $box-shadow-3 !default;
-$navbar-padding-top: 0.5625rem !default;
-$navbar-brand-img-margin-right: 0.25rem !default;
-
-// Dropdowns
-//
-// Dropdown menu container and content !default;
-
-$dropdown-color: #212529 !default;
-$dropdown-margin-top: 0.125rem !default;
-$dropdown-box-shadow: $box-shadow-2 !default;
-$dropdown-font-size: 0.875rem !default;
-$dropdown-item-border-radius: 0.25rem !default;
-$dropdown-item-padding-y: 0.5rem !default;
-$dropdown-item-padding-x: 1rem !default;
-
-$dropdown-state-color: #16181b !default;
-$dropdown-state-background-color: #eee !default;
-
-$dropdown-menu-animated-animation-duration: 0.55s !default;
-$dropdown-menu-animated-animation-timing-function: ease !default;
-
-// Pagination
-
-$pagination-font-size: 0.9rem !default;
-$pagination-color: #212529 !default;
-$pagination-transition: all 0.3s linear !default;
-$pagination-border-radius: 0.125rem !default;
-
-$pagination-hover-color: $pagination-color !default;
-$pagination-active-box-shadow: $btn-box-shadow !default;
-$pagination-active-transition: all 0.2s linear !default;
-
-$pagination-circle-border-radius: 50% !default;
-$pagination-circle-padding-x: 0.841rem !default;
-
-$pagination-circle-lg-padding-left: 1.399414rem !default;
-$pagination-circle-lg-padding-right: 1.399415rem !default;
-
-$pagination-circle-sm-padding-left: 0.696rem !default;
-$pagination-circle-sm-padding-right: 0.688rem !default;
-
-// Cards
-
-$card-box-shadow: $box-shadow-3 !default;
-$card-header-background-color: rgba(255, 255, 255, 0) !default;
-$card-footer-background-color: rgba(255, 255, 255, 0) !default;
-$card-border-radius: 0.25rem !default;
-
-// Accordion
-$accordion-button-icon: none !default;
-$accordion-button-active-icon: none !default;
-
-// Tooltips
-
-$tooltip-inner-color: #fff !default;
-$tooltip-inner-padding-y: 6px !default;
-$tooltip-inner-padding-x: 16px !default;
-$tooltip-inner-font-size: 14px !default;
-$tooltip-inner-background-color: #6d6d6d !default;
-$tooltip-inner-border-radius: 0.25rem !default;
-
-// Popovers
-
-$popover-box-shadow: $box-shadow-2 !default;
-$popover-background-color: #fff !default;
-
-// Toasts
-
-$toast-background-color: #fff !default;
-$toast-box-shadow: $box-shadow-2 !default;
-$toast-header-background-color: #fff !default;
-
-// Badges
-
-$badge-dot-border-radius: 4.5px !default;
-$badge-dot-height: 9px !default;
-$badge-dot-width: $badge-dot-height !default;
-$badge-dot-margin-left: -0.3125rem !default;
-
-$badge-notification-font-size: 0.6rem !default;
-$badge-notification-margin-top: -0.1rem !default;
-$badge-notification-margin-left: -0.5rem !default;
-$badge-notification-padding-y: 0.2em !default;
-$badge-notification-padding-x: 0.45em !default;
-
-// Modals
-
-$modal-box-shadow: $box-shadow-3 !default;
-
-// Progress bars
-
-$progress-height: 4px !default;
-
-// Breadcrumbs
-
-$breadcrumb-item-color: rgba(0, 0, 0, 0.55) !default;
-$breadcrumb-item-transition: color 0.15s ease-in-out !default;
-$breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7) !default;
-$breadcrumb-item-before-color: $breadcrumb-item-color !default;
-
-// Carousel
-
-$carousel-control-prev-icon-bg: none;
-$carousel-control-next-icon-bg: none;
-
-// Images
-
-$image-hover-overlay-transition: all 0.3s ease-in-out !default;
-
-$image-hover-zoom-transition: all 0.3s linear !default;
-$image-hover-zoom-transform: scale(1.1) !default;
-
-$image-hover-shadow-transition: $image-hover-overlay-transition !default;
-$image-hover-shadow-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !default;
-
-// Scrollspy
-
-$scrollspy-menu-sidebar-font-size: 0.8rem !default;
-$scrollspy-menu-sidebar-color: #262626 !default;
-$scrollspy-menu-sidebar-line-height: 1.1rem !default;
-$scrollspy-menu-sidebar-padding-x: 5px !default;
-$scrollspy-menu-sidebar-font-weight: 400 !default;
-$scrollspy-menu-sidebar-transition: all 0.2s ease-in-out !default;
-$scrollspy-menu-sidebar-margin-y: 3px !default;
-
-$scrollspy-menu-sidebar-active-color: $primary !default;
-$scrollspy-menu-sidebar-active-font-weight: 600 !default;
-$scrollspy-menu-sidebar-active-border-width: 0.125rem !default;
-$scrollspy-menu-sidebar-active-border-color: $primary !default;
-
-// Breadcrumbs
-
-$breadcrumb-item-color: rgba(0, 0, 0, 0.55) !default;
-$breadcrumb-item-transition: color 0.15s ease-in-out !default;
-$breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7) !default;
-$breadcrumb-item-before-color: $breadcrumb-item-color !default;
-
-// Images
-
-$image-hover-overlay-transition: all 0.3s ease-in-out !default;
-
-$image-hover-zoom-transition: all 0.3s linear !default;
-$image-hover-zoom-transform: scale(1.1) !default;
-
-$image-hover-shadow-transition: $image-hover-overlay-transition !default;
-$image-hover-shadow-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !default;
-
-// Scrollspy
-
-$scrollspy-menu-sidebar-font-size: 0.8rem !default;
-$scrollspy-menu-sidebar-color: #262626 !default;
-$scrollspy-menu-sidebar-line-height: 1.1rem !default;
-$scrollspy-menu-sidebar-padding-x: 5px !default;
-$scrollspy-menu-sidebar-font-weight: 400 !default;
-$scrollspy-menu-sidebar-transition: all 0.2s ease-in-out !default;
-$scrollspy-menu-sidebar-margin-y: 3px !default;
-
-$scrollspy-menu-sidebar-active-color: $primary !default;
-$scrollspy-menu-sidebar-active-font-weight: 600 !default;
-$scrollspy-menu-sidebar-active-border-width: 0.125rem !default;
-$scrollspy-menu-sidebar-active-border-color: $primary !default;
-
-// Type
-
-$note-padding: 10px !default;
-$note-border-width: 6px !default;
-$note-border-radius: 5px !default;
-$note-strong-font-weight: 600 !default;
-$note-paragraph-font-weight: 500 !default;
-
-// Table
-
-$table-color: #212529 !default;
-$table-font-size: 0.9rem !default;
-$table-hover-transition: background-color 0.2s ease-in !default;
-$table-group-separator-color: inherit !default;
-$table-cell-padding-y: 1rem !default;
-$table-cell-padding-x: 1.4rem !default;
-$table-cell-padding-y-sm: 0.5rem !default;
-$table-cell-padding-x-sm: $table-cell-padding-x !default;
+$btn-padding-top: 0.4375rem;
diff --git a/src/scss/free/forms/_form-check.scss b/src/scss/free/forms/_form-check.scss
index bc8de1b2..b77a38d3 100644
--- a/src/scss/free/forms/_form-check.scss
+++ b/src/scss/free/forms/_form-check.scss
@@ -1,197 +1,79 @@
//
-// Material styles for check / radio / switch
+// Check/radio
//
-.form-check {
- .form-check-input {
- margin-left: $form-check-input-margin-left * -1;
-
- &[type='radio'] {
- margin-left: $form-check-input-radio-margin-left * -1;
- }
- }
-
- margin-bottom: 0;
- min-height: auto;
-}
-
.form-check-input {
- position: relative;
- width: $form-check-input-width-md;
- height: $form-check-input-height;
- background-color: $form-check-input-background-color;
- border: $form-check-input-border-width solid $form-check-input-border-color;
-
- &: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;
- }
- }
- }
+ border: solid 2px;
+ border-color: rgba(0, 0, 0, 0.6);
&[type='checkbox'] {
- border-radius: $form-check-input-checkbox-border-radius;
-
- &:focus {
- &:after {
- content: '';
- position: absolute;
- width: $form-check-input-checkbox-focus-after-width;
- height: $form-check-input-checkbox-focus-after-height;
- z-index: 1;
- display: block;
- border-radius: 0;
- background-color: $form-check-input-checkbox-focus-after-background-color;
- }
- }
+ border-radius: 2px;
&: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;
- }
-
+ background-color: $primary;
&:focus {
- background-color: $form-check-input-checkbox-checked-focus-background-color;
- }
- }
-
- &:indeterminate {
- background-image: none;
- background-color: transparent;
- border-color: $form-check-input-indeterminate-border-color;
-
- &:after {
- display: block;
- transform: $form-check-input-indeterminate-checked-after-transform #{'/* rtl:ignore */'};
- border-width: $form-check-input-indeterminate-checked-after-border-width;
- border-color: $form-check-input-indeterminate-checked-after-border-color;
- width: $form-check-input-indeterminate-checked-after-width;
- height: $form-check-input-indeterminate-checked-after-height;
- border-style: solid;
- border-top: 0;
- border-left: 0 #{'/* rtl:ignore */'};
- margin-left: $form-check-input-indeterminate-checked-after-margin-left;
- margin-top: 0;
- }
-
- &:focus {
- background-color: $form-check-input-indeterminate-focus-background-color;
- border-color: $form-check-input-indeterminate-focus-border-color;
+ background-color: $primary;
}
}
}
&[type='radio'] {
- border-radius: $form-check-input-radio-border-radius;
- width: $form-check-input-radio-width;
- height: $form-check-input-radio-height;
-
- &:before {
- width: $form-check-input-radio-before-width;
- height: $form-check-input-radio-before-height;
- }
-
- &:after {
- content: '';
- position: absolute;
- width: $form-check-input-radio-after-width;
- height: $form-check-input-radio-after-height;
- z-index: 1;
- display: block;
- border-radius: $form-check-input-radio-after-border-radius;
- background-color: $form-check-input-radio-after-background-color;
- }
-
&:checked {
- background-image: none;
- background-color: $form-check-input-radio-checked-background-color;
-
- &:after {
- border-radius: $form-check-input-radio-checked-after-border-radius;
- width: $form-check-input-radio-checked-after-width;
- height: $form-check-input-radio-checked-after-height;
- border-color: $form-check-input-radio-checked-after-border-color;
- background-color: $form-check-input-radio-checked-after-background-color;
- margin-top: $form-check-input-radio-checked-after-margin-top;
- margin-left: $form-check-input-radio-checked-after-margin-left;
- transition: $form-check-input-radio-checked-after-transition;
- }
-
+ background-color: #fff;
&:focus {
- background-color: $form-check-input-radio-checked-focus-background-color;
+ background-color: #fff;
+ }
+ }
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &:focus {
+ border-color: rgba(0, 0, 0, 0.6);
+ box-shadow: none;
+ }
+
+ &:checked {
+ &:focus {
+ border-color: $primary;
+ }
+
+ &[type='checkbox'] {
+ background-image: none;
+
+ &:before {
+ content: '';
+ transform: rotate(45deg);
+ position: absolute;
+ margin-left: 5px;
+ width: 6px;
+ height: 13px;
+ border-width: 2px;
+ border-style: solid;
+ border-top: 0;
+ border-left: 0;
+ border-color: #fff;
+ z-index: 10000;
+ transition: border-color 0.2s, background-color 0.2s;
+ }
+ }
+
+ &[type='radio'] {
+ background-image: none;
+
+ &:before {
+ content: '';
+ position: absolute;
+ border-radius: 50%;
+ width: 10px;
+ height: 10px;
+ border-color: $primary;
+ background-color: $primary;
+ margin-top: 3px;
+ margin-left: 3px;
+ transition: border-color;
}
}
}
@@ -203,51 +85,32 @@
}
}
-//
-// Switch
-//
-
.form-switch {
- padding-left: $form-switch-padding-left;
-
.form-check-input {
background-image: none;
- border-width: 0;
- border-radius: $form-switch-form-check-input-border-radius;
- width: $form-switch-form-check-input-width;
- height: $form-switch-form-check-input-height;
- background-color: $form-switch-form-check-input-background-color;
- margin-top: $form-switch-form-check-input-margin-top;
- margin-right: $form-switch-form-check-input-margin-right;
+ border-width: 0px;
+ border-radius: 7px;
+ width: 36px;
+ height: 14px;
+ background-color: rgba(0, 0, 0, 0.38);
- &:after {
+ &:before {
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;
+ z-index: 10000;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ background-color: #fff;
+ margin-top: -3px;
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ transition: background-color 0.2s, transform 0.2s;
}
&: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 {
@@ -255,31 +118,25 @@
&: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 {
+ &:before {
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;
+ z-index: 10000;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ background-color: $primary;
+ margin-top: -3px;
+ margin-left: 17px;
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ transition: background-color 0.2s, transform 0.2s;
}
}
}
diff --git a/src/scss/free/forms/_form-control.scss b/src/scss/free/forms/_form-control.scss
index c3357534..4944a0aa 100644
--- a/src/scss/free/forms/_form-control.scss
+++ b/src/scss/free/forms/_form-control.scss
@@ -1,202 +1,1707 @@
//
-// Material styles for form control - form outline
+// Textual form controls
//
-.form-control {
- min-height: auto;
- padding-top: 5.28px;
- padding-bottom: 3.28px;
- transition: all 0.1s linear;
- &:focus {
- box-shadow: none;
- transition: all 0.1s linear;
- border-color: #1266f1;
- box-shadow: inset 0px 0px 0px 1px #1266f1;
- }
- &.form-control-sm {
- font-size: 0.775rem;
- line-height: 1.5;
- }
- &.form-control-lg {
- line-height: 2.15;
- border-radius: 0.25rem;
- }
+// .form-control {
+// &:focus {
+// border-color: $primary;
+// box-shadow: inset 0 0 0 1px $primary;
+// }
+
+// // Placeholder
+// &::placeholder {
+// opacity: 0;
+// transition: inherit;
+// }
+
+// &:placeholder-shown + .form-label {
+// cursor: text;
+// white-space: nowrap;
+// overflow: hidden;
+// text-overflow: ellipsis;
+// transform: translate(0, 2.5rem) scale(1);
+// }
+
+// &:not(:placeholder-shown) + .form-label,
+// &:focus + .form-label {
+// transform: translate(-0.3rem, 1.25rem) scale(0.8);
+// cursor: pointer;
+// background-color: #fff;
+// color: $primary;
+// font-weight: 500;
+// }
+// }
+
+// .form-group {
+// display: flex;
+// flex-flow: column-reverse;
+// }
+
+// .form-label {
+// padding-left: 0.5rem;
+// padding-right: 0.5rem;
+// width: fit-content;
+// }
+
+// .form-label,
+// .form-control {
+// transition: all 0.2s;
+// touch-action: manipulation;
+// }
+
+// ::-webkit-input-placeholder {
+// opacity: 0;
+// transition: inherit;
+// }
+
+// .form-control:focus::-webkit-input-placeholder {
+// opacity: 1;
+// }
+
+// .form-group {
+// background-color: transparent;
+// -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+// height: 56px;
+// border-radius: 4px 4px 0 0;
+// display: inline-flex;
+// position: relative;
+// box-sizing: border-box;
+// overflow: hidden;
+// will-change: opacity, transform, color;
+// border: none;
+// overflow: visible;
+// }
+
+// .form-control {
+// color: rgba(0, 0, 0, .87);
+// display: flex;
+// padding: 12px 16px 14px;
+// border: none;
+// background-color: transparent;
+// z-index: 1;
+// -webkit-font-smoothing: antialiased;
+// font-size: 1rem;
+// font-weight: 400;
+// letter-spacing: .009375em;
+// text-decoration: inherit;
+// text-transform: inherit;
+// align-self: flex-end;
+// box-sizing: border-box;
+// width: 100%;
+// height: 100%;
+// padding: 20px 16px 6px;
+// transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+// border-radius: 0;
+// background: none;
+// -webkit-appearance: none;
+// -moz-appearance: none;
+// appearance: none;
+// caret-color: #6200ee;
+// outline: 0;
+
+// &:focus {
+// box-shadow: none;
+// }
+// }
+
+// .form-control-notched {
+// display: flex;
+// position: absolute;
+// right: 0;
+// left: 0;
+// box-sizing: border-box;
+// width: 100%;
+// max-width: 100%;
+// height: 100%;
+// text-align: left;
+// pointer-events: none;
+// }
+
+// .form-control-leading {
+// border-radius: 4px 0 0 4px;
+// border-color: rgba(0, 0, 0, .38);
+// border-left: 1px solid;
+// border-right: none;
+// width: 12px;
+// box-sizing: border-box;
+// height: 100%;
+// border-top: 1px solid;
+// border-bottom: 1px solid;
+// pointer-events: none;
+
+// &:focus {
+// border-color: #6200ee;
+// border-width: 2px;
+// }
+// }
+
+// .form-control-notch {
+// border-color: rgba(0, 0, 0, .38);
+// flex: 0 0 auto;
+// width: auto;
+// max-width: calc(100% - 12px * 2);
+// box-sizing: border-box;
+// height: 100%;
+// border-top: 1px solid;
+// border-bottom: 1px solid;
+// pointer-events: none;
+// width: 37.25px;
+// padding-top: 1px;
+
+// &:focus {
+// padding-top: 2px;
+// border-color: #6200ee;
+// border-width: 2px;
+// }
+// }
+
+// .form-label {
+// color: rgba(0, 0, 0, .6);
+// display: inline-block;
+// position: relative;
+// max-width: 100%;
+// left: 4px;
+// right: initial;
+// top: 50%;
+// transform: translateY(-50%);
+// pointer-events: none;
+// font-family: Roboto, sans-serif;
+// -webkit-font-smoothing: antialiased;
+// font-size: 1rem;
+// font-weight: 400;
+// letter-spacing: .009375em;
+// text-decoration: inherit;
+// text-transform: inherit;
+// transform-origin: left top;
+// transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+// line-height: 1.15rem;
+// text-align: left;
+// text-overflow: ellipsis;
+// white-space: nowrap;
+// cursor: text;
+// overflow: hidden;
+// will-change: transform;
+
+// &:focus {
+// color: #6200ee;
+// font-size: 1rem;
+// transform: translateY(-34.75px) scale(0.75);
+// max-width: calc(100% / .75);
+// text-overflow: clip;
+// }
+// }
+
+// .form-control-trailing {
+// border-radius: 0 4px 4px 0;
+// border-color: rgba(0, 0, 0, .38);
+// border-left: none;
+// border-right: 1px solid;
+// flex-grow: 1;
+// box-sizing: border-box;
+// height: 100%;
+// border-top: 1px solid;
+// border-bottom: 1px solid;
+// pointer-events: none;
+
+// &:focus {
+// color: #6200ee;
+// border-width: 2px;
+// }
+// }
+
+.mdc-form-field {
+ font-family: Roboto, sans-serif;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ font-weight: 400;
+ letter-spacing: 0.0178571429em;
+ text-decoration: inherit;
+ text-transform: inherit;
+ color: rgba(0, 0, 0, 0.87);
+ color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
+ display: inline-flex;
+ align-items: center;
+ vertical-align: middle;
}
-.form-outline {
+.mdc-form-field > label {
+ margin-left: 0;
+ margin-right: auto;
+ padding-left: 4px;
+ padding-right: 0;
+ order: 0;
+}
+
+[dir='rtl'] .mdc-form-field > label,
+.mdc-form-field > label[dir='rtl'] {
+ margin-left: auto;
+ margin-right: 0;
+}
+
+[dir='rtl'] .mdc-form-field > label,
+.mdc-form-field > label[dir='rtl'] {
+ padding-left: 0;
+ padding-right: 4px;
+}
+
+.mdc-form-field--align-end > label {
+ margin-left: auto;
+ margin-right: 0;
+ padding-left: 0;
+ padding-right: 4px;
+ order: -1;
+}
+
+[dir='rtl'] .mdc-form-field--align-end > label,
+.mdc-form-field--align-end > label[dir='rtl'] {
+ margin-left: 0;
+ margin-right: auto;
+}
+
+[dir='rtl'] .mdc-form-field--align-end > label,
+.mdc-form-field--align-end > label[dir='rtl'] {
+ padding-left: 4px;
+ padding-right: 0;
+}
+
+.mdc-form-field {
+ font-family: Roboto, sans-serif;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ font-weight: 400;
+ letter-spacing: 0.0178571429em;
+ text-decoration: inherit;
+ text-transform: inherit;
+ color: rgba(0, 0, 0, 0.87);
+ color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
+ display: inline-flex;
+ align-items: center;
+ vertical-align: middle;
+}
+
+.mdc-form-field > label {
+ margin-left: 0;
+ margin-right: auto;
+ padding-left: 4px;
+ padding-right: 0;
+ order: 0;
+}
+
+[dir='rtl'] .mdc-form-field > label,
+.mdc-form-field > label[dir='rtl'] {
+ margin-left: auto;
+ margin-right: 0;
+}
+
+[dir='rtl'] .mdc-form-field > label,
+.mdc-form-field > label[dir='rtl'] {
+ padding-left: 0;
+ padding-right: 4px;
+}
+
+.mdc-form-field--align-end > label {
+ margin-left: auto;
+ margin-right: 0;
+ padding-left: 0;
+ padding-right: 4px;
+ order: -1;
+}
+
+[dir='rtl'] .mdc-form-field--align-end > label,
+.mdc-form-field--align-end > label[dir='rtl'] {
+ margin-left: 0;
+ margin-right: auto;
+}
+
+[dir='rtl'] .mdc-form-field--align-end > label,
+.mdc-form-field--align-end > label[dir='rtl'] {
+ padding-left: 4px;
+ padding-right: 0;
+}
+
+.mdc-text-field-helper-text {
+ font-family: Roboto, sans-serif;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-size: 0.75rem;
+ line-height: 1.25rem;
+ font-weight: 400;
+ letter-spacing: 0.0333333333em;
+ text-decoration: inherit;
+ text-transform: inherit;
+ display: block;
+ margin-top: 0;
+ line-height: normal;
+ margin: 0;
+ transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+ opacity: 0;
+ will-change: opacity;
+}
+
+.mdc-text-field-helper-text::before {
+ display: inline-block;
+ width: 0;
+ height: 16px;
+ content: '';
+ vertical-align: 0;
+}
+
+.mdc-text-field-helper-text--persistent {
+ transition: none;
+ opacity: 1;
+ will-change: initial;
+}
+
+.mdc-text-field-character-counter {
+ font-family: Roboto, sans-serif;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-size: 0.75rem;
+ line-height: 1.25rem;
+ font-weight: 400;
+ letter-spacing: 0.0333333333em;
+ text-decoration: inherit;
+ text-transform: inherit;
+ display: block;
+ margin-top: 0;
+ line-height: normal;
+ margin-left: auto;
+ margin-right: 0;
+ padding-left: 16px;
+ padding-right: 0;
+ white-space: nowrap;
+}
+
+.mdc-text-field-character-counter::before {
+ display: inline-block;
+ width: 0;
+ height: 16px;
+ content: '';
+ vertical-align: 0;
+}
+
+[dir='rtl'] .mdc-text-field-character-counter,
+.mdc-text-field-character-counter[dir='rtl'] {
+ margin-left: 0;
+ margin-right: auto;
+}
+
+[dir='rtl'] .mdc-text-field-character-counter,
+.mdc-text-field-character-counter[dir='rtl'] {
+ padding-left: 0;
+ padding-right: 16px;
+}
+
+.mdc-text-field--with-leading-icon .mdc-text-field__icon,
+.mdc-text-field--with-trailing-icon .mdc-text-field__icon {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ cursor: pointer;
+}
+
+.mdc-text-field__icon:not([tabindex]),
+.mdc-text-field__icon[tabindex='-1'] {
+ cursor: default;
+ pointer-events: none;
+}
+
+// need
+.mdc-text-field {
+ --mdc-ripple-fg-size: 0;
+ --mdc-ripple-left: 0;
+ --mdc-ripple-top: 0;
+ --mdc-ripple-fg-scale: 1;
+ --mdc-ripple-fg-translate-end: 0;
+ --mdc-ripple-fg-translate-start: 0;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ will-change: transform, opacity;
+ height: 56px;
+ border-radius: 4px 4px 0 0;
+ display: inline-flex;
position: relative;
- .form-control {
- min-height: auto;
- padding-top: $input-padding-top;
- padding-bottom: $input-padding-bottom;
- padding-left: $input-padding-left;
- padding-right: $input-padding-right;
- border: 0;
- background: transparent;
- transition: $input-transition;
- ~ .form-label {
- position: absolute;
- top: 0;
- left: $form-label-left;
- padding-top: $form-label-padding-top;
- pointer-events: none;
- transform-origin: 0 0;
- transition: $form-label-transition;
- color: $form-label-color;
- margin-bottom: 0;
- }
- ~ .form-notch {
- display: flex;
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- max-width: 100%;
- height: 100%;
- text-align: left;
- pointer-events: none;
- div {
- pointer-events: none;
- border: $border-width solid;
- border-color: $form-notch-div-border-color;
- box-sizing: border-box;
- background: transparent;
- }
- .form-notch-leading {
- left: 0;
- top: 0;
- height: 100%;
- width: $form-notch-leading-width;
- border-right: none;
- border-radius: $form-notch-leading-border-radius 0 0 $form-notch-leading-border-radius;
- }
- .form-notch-middle {
- flex: 0 0 auto;
- width: auto;
- max-width: calc(100% - #{$form-notch-middle-max-width});
- height: 100%;
- border-right: none;
- border-left: none;
- }
- .form-notch-trailing {
- flex-grow: 1;
- height: 100%;
- border-left: none;
- border-radius: 0 $form-notch-trailing-border-radius $form-notch-trailing-border-radius 0;
- }
- }
- &:not(.placeholder-active)::placeholder {
- opacity: 0;
- }
- &:focus,
- &.active {
- &::placeholder {
- opacity: 1;
- }
- }
- &:focus {
- box-shadow: none !important;
- }
- &:focus ~ .form-label,
- &.active ~ .form-label {
- transform: $input-focus-active-label-transform;
- }
- &:focus ~ .form-label {
- color: $input-focus-label-color;
- }
- &:focus ~ .form-notch .form-notch-middle,
- &.active ~ .form-notch .form-notch-middle {
- border-top: none;
- border-right: none;
- border-left: none;
- transition: $input-transition;
- }
- &:focus ~ .form-notch .form-notch-middle {
- border-bottom: $input-focus-border-width solid;
- border-color: $input-focus-border-color;
- }
- &:focus ~ .form-notch .form-notch-leading,
- &.active ~ .form-notch .form-notch-leading {
- border-right: none;
- transition: $input-transition;
- }
- &:focus ~ .form-notch .form-notch-leading {
- border-top: $input-focus-border-width solid $input-focus-border-color;
- border-bottom: $input-focus-border-width solid $input-focus-border-color;
- border-left: $input-focus-border-width solid $input-focus-border-color;
- }
- &:focus ~ .form-notch .form-notch-trailing,
- &.active ~ .form-notch .form-notch-trailing {
- border-left: none;
- transition: $input-transition;
- }
- &:focus ~ .form-notch .form-notch-trailing {
- border-top: $input-focus-border-width solid;
- border-bottom: $input-focus-border-width solid;
- border-right: $input-focus-border-width solid;
- border-color: $input-focus-border-color;
- }
- &:disabled,
- &.disabled,
- &[readonly] {
- background-color: $input-disabled-background-color;
- }
- &.form-control-lg {
- font-size: $input-font-size-lg;
- line-height: $input-line-height-lg;
- padding-left: $input-padding-left-lg;
- padding-right: $input-padding-right-lg;
- ~ .form-label {
- padding-top: $form-label-padding-top-lg;
- }
- &:focus ~ .form-label,
- &.active ~ .form-label {
- transform: $input-focus-active-label-transform-lg;
- }
- }
- &.form-control-sm {
- padding-left: $input-padding-left-sm;
- padding-right: $input-padding-right-sm;
- padding-top: $input-padding-top-sm;
- padding-bottom: $input-padding-bottom-sm;
- font-size: $input-font-size-sm;
- line-height: $input-line-height-sm;
- ~ .form-label {
- padding-top: $form-label-padding-top-sm;
- font-size: $form-label-font-size-sm;
- }
- &:focus ~ .form-label,
- &.active ~ .form-label {
- transform: $input-focus-active-label-transform-sm;
- }
- }
- }
-
- &.form-white {
- .form-control {
- color: $form-white-input-color;
- ~ .form-label {
- color: $form-white-label-color;
- }
- ~ .form-notch {
- div {
- border-color: $form-white-notch-div-border-color;
- }
- }
- &:focus ~ .form-label {
- color: $form-white-input-focus-label-color;
- }
- &:focus ~ .form-notch .form-notch-middle {
- border-color: $form-white-input-focus-border-color;
- }
- &:focus ~ .form-notch .form-notch-leading {
- border-top: $input-focus-border-width solid $form-white-input-focus-border-color;
- border-bottom: $input-focus-border-width solid $form-white-input-focus-border-color;
- border-left: $input-focus-border-width solid $form-white-input-focus-border-color;
- }
- &:focus ~ .form-notch .form-notch-trailing {
- border-color: $form-white-input-focus-border-color;
- }
- }
- }
+ box-sizing: border-box;
+ overflow: hidden;
+ will-change: opacity, transform, color;
+}
+
+.mdc-text-field::before,
+.mdc-text-field::after {
+ position: absolute;
+ border-radius: 50%;
+ opacity: 0;
+ pointer-events: none;
+ content: '';
+}
+
+.mdc-text-field::before {
+ transition: opacity 15ms linear, background-color 15ms linear;
+ z-index: 1;
+}
+
+.mdc-text-field::before,
+.mdc-text-field::after {
+ background-color: rgba(0, 0, 0, 0.87);
+}
+
+.mdc-text-field:hover::before {
+ opacity: 0.04;
+}
+
+.mdc-text-field.mdc-ripple-upgraded--background-focused::before,
+.mdc-text-field:not(.mdc-ripple-upgraded):focus::before {
+ transition-duration: 75ms;
+ opacity: 0.12;
+}
+
+.mdc-text-field::before,
+.mdc-text-field::after {
+ top: calc(50% - 100%);
+ left: calc(50% - 100%);
+ width: 200%;
+ height: 200%;
+}
+
+.mdc-text-field.mdc-ripple-upgraded::after {
+ width: var(--mdc-ripple-fg-size, 100%);
+ height: var(--mdc-ripple-fg-size, 100%);
+}
+
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
+ color: rgba(0, 0, 0, 0.6);
+}
+
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
+ color: rgba(0, 0, 0, 0.87);
+}
+
+// need
+.mdc-text-field .mdc-text-field__input {
+ caret-color: #6200ee;
+ caret-color: var(--mdc-theme-primary, #6200ee);
+}
+
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
+ border-bottom-color: rgba(0, 0, 0, 0.42);
+}
+
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:hover {
+ border-bottom-color: rgba(0, 0, 0, 0.87);
+}
+
+.mdc-text-field:not(.mdc-text-field--disabled)
+ + .mdc-text-field-helper-line
+ .mdc-text-field-helper-text {
+ color: rgba(0, 0, 0, 0.6);
+}
+
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,
+.mdc-text-field:not(.mdc-text-field--disabled)
+ + .mdc-text-field-helper-line
+ .mdc-text-field-character-counter {
+ color: rgba(0, 0, 0, 0.6);
+}
+
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
+ color: rgba(0, 0, 0, 0.54);
+}
+
+.mdc-text-field:not(.mdc-text-field--disabled) {
+ background-color: #f5f5f5;
+}
+
+// need
+.mdc-text-field .mdc-floating-label {
+ left: 16px;
+ right: initial;
+ top: 50%;
+ transform: translateY(-50%);
+ pointer-events: none;
+}
+
+// need
+.mdc-text-field .mdc-floating-label--float-above {
+ transform: translateY(-106%) scale(0.75);
+}
+
+.mdc-text-field--textarea .mdc-floating-label {
+ left: 4px;
+ right: initial;
+}
+
+// need
+.mdc-text-field--outlined .mdc-floating-label {
+ left: 4px;
+ right: initial;
+}
+
+.mdc-text-field--outlined--with-leading-icon .mdc-floating-label {
+ left: 36px;
+ right: initial;
+}
+
+.mdc-text-field--outlined--with-leading-icon .mdc-floating-label--float-above {
+ left: 40px;
+ right: initial;
+}
+
+.mdc-text-field__input {
+ font-family: Roboto, sans-serif;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-size: 1rem;
+ font-weight: 400;
+ letter-spacing: 0.009375em;
+ text-decoration: inherit;
+ text-transform: inherit;
+ align-self: flex-end;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ padding: 20px 16px 6px;
+ transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+ border: none;
+ border-bottom: 1px solid;
+ border-radius: 0;
+ background: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+
+.mdc-text-field__input:-ms-input-placeholder {
+ transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1);
+ opacity: 0;
+ color: rgba(0, 0, 0, 0.54);
+}
+
+.mdc-text-field__input::-ms-input-placeholder {
+ transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1);
+ opacity: 0;
+ color: rgba(0, 0, 0, 0.54);
+}
+
+.mdc-text-field__input::placeholder {
+ transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1);
+ opacity: 0;
+ color: rgba(0, 0, 0, 0.54);
+}
+
+.mdc-text-field__input:-ms-input-placeholder {
+ color: rgba(0, 0, 0, 0.54) !important;
+}
+
+.mdc-text-field--fullwidth .mdc-text-field__input:-ms-input-placeholder,
+.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder,
+.mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder {
+ transition-delay: 40ms;
+ transition-duration: 110ms;
+ opacity: 1;
+}
+
+.mdc-text-field--fullwidth .mdc-text-field__input::-ms-input-placeholder,
+.mdc-text-field--no-label .mdc-text-field__input::-ms-input-placeholder,
+.mdc-text-field--focused .mdc-text-field__input::-ms-input-placeholder {
+ transition-delay: 40ms;
+ transition-duration: 110ms;
+ opacity: 1;
+}
+
+.mdc-text-field--fullwidth .mdc-text-field__input::placeholder,
+.mdc-text-field--no-label .mdc-text-field__input::placeholder,
+.mdc-text-field--focused .mdc-text-field__input::placeholder {
+ transition-delay: 40ms;
+ transition-duration: 110ms;
+ opacity: 1;
+}
+
+.mdc-text-field__input:focus {
+ outline: none;
+}
+
+.mdc-text-field__input:invalid {
+ box-shadow: none;
+}
+
+.mdc-text-field__input:-webkit-autofill {
+ z-index: auto !important;
+}
+
+.mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)
+ .mdc-text-field__input {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.mdc-text-field__input:-webkit-autofill + .mdc-floating-label {
+ transform: translateY(-50%) scale(0.75);
+ cursor: auto;
+}
+
+// need
+.mdc-text-field--outlined {
+ border: none;
+ overflow: visible;
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
+ border-color: rgba(0, 0, 0, 0.38);
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__input:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__leading,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__input:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__notch,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__input:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__trailing,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__icon:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__leading,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__icon:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__notch,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__icon:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__trailing {
+ border-color: rgba(0, 0, 0, 0.87);
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-notched-outline__leading,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-notched-outline__notch,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-notched-outline__trailing {
+ border-color: #6200ee;
+ border-color: var(--mdc-theme-primary, #6200ee);
+}
+
+.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
+ border-radius: 4px 0 0 4px;
+}
+
+.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
+ border-radius: 0 4px 4px 0;
+}
+
+[dir='rtl'] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,
+.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir='rtl'] {
+ border-radius: 4px 0 0 4px;
+}
+
+.mdc-text-field--outlined .mdc-floating-label--float-above {
+ transform: translateY(-37.25px) scale(1);
+}
+
+.mdc-text-field--outlined .mdc-floating-label--float-above {
+ font-size: 0.75rem;
+}
+
+.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
+.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+ transform: translateY(-34.75px) scale(0.75);
+}
+
+.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
+.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+ font-size: 1rem;
+}
+
+.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
+ padding-top: 1px;
+}
+
+.mdc-text-field--outlined::before,
+.mdc-text-field--outlined::after {
+ content: none;
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled) {
+ background-color: transparent;
+}
+
+.mdc-text-field--outlined .mdc-text-field__input {
+ display: flex;
+ padding: 12px 16px 14px;
+ border: none !important;
+ background-color: transparent;
+ z-index: 1;
+}
+
+.mdc-text-field--outlined .mdc-text-field__icon {
+ z-index: 2;
+}
+
+.mdc-text-field--outlined.mdc-text-field--focused
+ .mdc-notched-outline--notched
+ .mdc-notched-outline__notch {
+ padding-top: 2px;
+}
+
+.mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading,
+.mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch,
+.mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing {
+ border-width: 2px;
+}
+
+.mdc-text-field--outlined.mdc-text-field--disabled {
+ background-color: transparent;
+}
+
+.mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__leading,
+.mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__notch,
+.mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__trailing {
+ border-color: rgba(0, 0, 0, 0.06);
+}
+
+.mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input {
+ border-bottom: none;
+}
+
+.mdc-text-field--outlined.mdc-text-field--dense {
+ height: 48px;
+}
+
+.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label--float-above {
+ transform: translateY(-134%) scale(1);
+}
+
+.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label--float-above {
+ font-size: 0.8rem;
+}
+
+.mdc-text-field--outlined.mdc-text-field--dense.mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above,
+.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above {
+ transform: translateY(-120%) scale(0.8);
+}
+
+.mdc-text-field--outlined.mdc-text-field--dense.mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above,
+.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above {
+ font-size: 1rem;
+}
+
+.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label--shake {
+ animation: mdc-floating-label-shake-float-above-text-field-outlined-dense 250ms 1;
+}
+
+.mdc-text-field--outlined.mdc-text-field--dense .mdc-text-field__input {
+ padding: 12px 12px 7px;
+}
+
+.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label {
+ top: 14px;
+}
+
+.mdc-text-field--outlined.mdc-text-field--dense .mdc-text-field__icon {
+ top: 12px;
+}
+
+.mdc-text-field--with-leading-icon .mdc-text-field__icon {
+ left: 16px;
+ right: initial;
+}
+
+[dir='rtl'] .mdc-text-field--with-leading-icon .mdc-text-field__icon,
+.mdc-text-field--with-leading-icon .mdc-text-field__icon[dir='rtl'] {
+ left: initial;
+ right: 16px;
+}
+
+.mdc-text-field--with-leading-icon .mdc-text-field__input {
+ padding-left: 48px;
+ padding-right: 16px;
+}
+
+[dir='rtl'] .mdc-text-field--with-leading-icon .mdc-text-field__input,
+.mdc-text-field--with-leading-icon .mdc-text-field__input[dir='rtl'] {
+ padding-left: 16px;
+ padding-right: 48px;
+}
+
+.mdc-text-field--with-leading-icon .mdc-floating-label {
+ left: 48px;
+ right: initial;
+}
+
+[dir='rtl'] .mdc-text-field--with-leading-icon .mdc-floating-label,
+.mdc-text-field--with-leading-icon .mdc-floating-label[dir='rtl'] {
+ left: initial;
+ right: 48px;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__icon {
+ left: 16px;
+ right: initial;
+}
+
+[dir='rtl'] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__icon,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__icon[dir='rtl'] {
+ left: initial;
+ right: 16px;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__input {
+ padding-left: 48px;
+ padding-right: 16px;
+}
+
+[dir='rtl'] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__input,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__input[dir='rtl'] {
+ padding-left: 16px;
+ padding-right: 48px;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
+ transform: translateY(-37.25px) translateX(-32px) scale(1);
+}
+
+[dir='rtl']
+ .mdc-text-field--with-leading-icon.mdc-text-field--outlined
+ .mdc-floating-label--float-above,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined
+ .mdc-floating-label--float-above[dir='rtl'] {
+ transform: translateY(-37.25px) translateX(32px) scale(1);
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
+ font-size: 0.75rem;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined
+ .mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above {
+ transform: translateY(-34.75px) translateX(-32px) scale(0.75);
+}
+
+[dir='rtl']
+ .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above[dir='rtl'],
+[dir='rtl']
+ .mdc-text-field--with-leading-icon.mdc-text-field--outlined
+ .mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined
+ .mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above[dir='rtl'] {
+ transform: translateY(-34.75px) translateX(32px) scale(0.75);
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined
+ .mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above {
+ font-size: 1rem;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake {
+ animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;
+}
+
+[dir='rtl'] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir='rtl'] .mdc-floating-label--shake {
+ animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl 250ms 1;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label {
+ left: 36px;
+ right: initial;
+}
+
+[dir='rtl'] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label[dir='rtl'] {
+ left: initial;
+ right: 36px;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-floating-label--float-above {
+ transform: translateY(-134%) translateX(-21px) scale(1);
+}
+
+[dir='rtl']
+ .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-floating-label--float-above,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-floating-label--float-above[dir='rtl'] {
+ transform: translateY(-134%) translateX(21px) scale(1);
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-floating-label--float-above {
+ font-size: 0.8rem;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense.mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above {
+ transform: translateY(-120%) translateX(-21px) scale(0.8);
+}
+
+[dir='rtl']
+ .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense.mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense.mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above[dir='rtl'],
+[dir='rtl']
+ .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above[dir='rtl'] {
+ transform: translateY(-120%) translateX(21px) scale(0.8);
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense.mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-notched-outline--upgraded
+ .mdc-floating-label--float-above {
+ font-size: 1rem;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-floating-label--shake {
+ animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-dense 250ms 1;
+}
+
+[dir='rtl']
+ .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-floating-label--shake,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense[dir='rtl']
+ .mdc-floating-label--shake {
+ animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-dense-rtl 250ms 1;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-floating-label {
+ left: 32px;
+ right: initial;
+}
+
+[dir='rtl']
+ .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-floating-label,
+.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense
+ .mdc-floating-label[dir='rtl'] {
+ left: initial;
+ right: 32px;
+}
+
+.mdc-text-field--with-trailing-icon .mdc-text-field__icon {
+ left: initial;
+ right: 12px;
+}
+
+[dir='rtl'] .mdc-text-field--with-trailing-icon .mdc-text-field__icon,
+.mdc-text-field--with-trailing-icon .mdc-text-field__icon[dir='rtl'] {
+ left: 12px;
+ right: initial;
+}
+
+.mdc-text-field--with-trailing-icon .mdc-text-field__input {
+ padding-left: 16px;
+ padding-right: 48px;
+}
+
+[dir='rtl'] .mdc-text-field--with-trailing-icon .mdc-text-field__input,
+.mdc-text-field--with-trailing-icon .mdc-text-field__input[dir='rtl'] {
+ padding-left: 48px;
+ padding-right: 16px;
+}
+
+.mdc-text-field--with-trailing-icon.mdc-text-field--outlined .mdc-text-field__icon {
+ left: initial;
+ right: 16px;
+}
+
+[dir='rtl'] .mdc-text-field--with-trailing-icon.mdc-text-field--outlined .mdc-text-field__icon,
+.mdc-text-field--with-trailing-icon.mdc-text-field--outlined .mdc-text-field__icon[dir='rtl'] {
+ left: 16px;
+ right: initial;
+}
+
+.mdc-text-field--with-trailing-icon.mdc-text-field--outlined .mdc-text-field__input {
+ padding-left: 16px;
+ padding-right: 48px;
+}
+
+[dir='rtl'] .mdc-text-field--with-trailing-icon.mdc-text-field--outlined .mdc-text-field__input,
+.mdc-text-field--with-trailing-icon.mdc-text-field--outlined .mdc-text-field__input[dir='rtl'] {
+ padding-left: 48px;
+ padding-right: 16px;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon .mdc-text-field__icon {
+ left: 16px;
+ right: auto;
+}
+
+[dir='rtl']
+ .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon
+ .mdc-text-field__icon,
+.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon
+ .mdc-text-field__icon[dir='rtl'] {
+ left: auto;
+ right: 16px;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon
+ .mdc-text-field__icon
+ ~ .mdc-text-field__icon {
+ right: 12px;
+ left: auto;
+}
+
+[dir='rtl']
+ .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon
+ .mdc-text-field__icon
+ ~ .mdc-text-field__icon,
+.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon
+ .mdc-text-field__icon
+ ~ .mdc-text-field__icon[dir='rtl'] {
+ right: auto;
+ left: 12px;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon .mdc-text-field__input {
+ padding-left: 48px;
+ padding-right: 48px;
+}
+
+[dir='rtl']
+ .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon
+ .mdc-text-field__input,
+.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon
+ .mdc-text-field__input[dir='rtl'] {
+ padding-left: 48px;
+ padding-right: 48px;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__icon,
+.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon {
+ bottom: 16px;
+ transform: scale(0.8);
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__icon {
+ left: 12px;
+ right: initial;
+}
+
+[dir='rtl'] .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__icon,
+.mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__icon[dir='rtl'] {
+ left: initial;
+ right: 12px;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__input {
+ padding-left: 44px;
+ padding-right: 16px;
+}
+
+[dir='rtl'] .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__input,
+.mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__input[dir='rtl'] {
+ padding-left: 16px;
+ padding-right: 44px;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-floating-label {
+ left: 44px;
+ right: initial;
+}
+
+[dir='rtl'] .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-floating-label,
+.mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-floating-label[dir='rtl'] {
+ left: initial;
+ right: 44px;
+}
+
+.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon {
+ left: initial;
+ right: 12px;
+}
+
+[dir='rtl'] .mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon,
+.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon[dir='rtl'] {
+ left: 12px;
+ right: initial;
+}
+
+.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__input {
+ padding-left: 16px;
+ padding-right: 44px;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense
+ .mdc-text-field__icon {
+ left: 12px;
+ right: auto;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense
+ .mdc-text-field__icon
+ ~ .mdc-text-field__icon {
+ right: 12px;
+ left: auto;
+}
+
+.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense
+ .mdc-text-field__input {
+ padding-left: 44px;
+ padding-right: 44px;
+}
+
+.mdc-text-field--dense .mdc-floating-label--float-above {
+ transform: translateY(-70%) scale(0.8);
+}
+
+.mdc-text-field--dense .mdc-floating-label--shake {
+ animation: mdc-floating-label-shake-float-above-text-field-dense 250ms 1;
+}
+
+.mdc-text-field--dense .mdc-text-field__input {
+ padding: 12px 12px 0;
+}
+
+.mdc-text-field--dense .mdc-floating-label {
+ font-size: 0.813rem;
+}
+
+.mdc-text-field--dense .mdc-floating-label--float-above {
+ font-size: 0.813rem;
+}
+
+.mdc-text-field__input:required ~ .mdc-floating-label::after,
+.mdc-text-field__input:required ~ .mdc-notched-outline .mdc-floating-label::after {
+ margin-left: 1px;
+ content: '*';
+}
+
+.mdc-text-field--textarea {
+ display: inline-flex;
+ width: auto;
+ height: auto;
+ transition: none;
+ overflow: visible;
+}
+
+.mdc-text-field--textarea:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
+.mdc-text-field--textarea:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
+.mdc-text-field--textarea:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
+ border-color: rgba(0, 0, 0, 0.38);
+}
+
+.mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__input:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__leading,
+.mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__input:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__notch,
+.mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__input:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__trailing,
+.mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__icon:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__leading,
+.mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__icon:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__notch,
+.mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__icon:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__trailing {
+ border-color: rgba(0, 0, 0, 0.87);
+}
+
+.mdc-text-field--textarea:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-notched-outline__leading,
+.mdc-text-field--textarea:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-notched-outline__notch,
+.mdc-text-field--textarea:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-notched-outline__trailing {
+ border-color: #6200ee;
+ border-color: var(--mdc-theme-primary, #6200ee);
+}
+
+.mdc-text-field--textarea .mdc-notched-outline .mdc-notched-outline__leading {
+ border-radius: 4px 0 0 4px;
+}
+
+.mdc-text-field--textarea .mdc-notched-outline .mdc-notched-outline__trailing {
+ border-radius: 0 4px 4px 0;
+}
+
+[dir='rtl'] .mdc-text-field--textarea .mdc-notched-outline .mdc-notched-outline__trailing,
+.mdc-text-field--textarea .mdc-notched-outline .mdc-notched-outline__trailing[dir='rtl'] {
+ border-radius: 4px 0 0 4px;
+}
+
+.mdc-text-field--textarea::before,
+.mdc-text-field--textarea::after {
+ content: none;
+}
+
+.mdc-text-field--textarea:not(.mdc-text-field--disabled) {
+ background-color: transparent;
+}
+
+.mdc-text-field--textarea .mdc-floating-label--float-above {
+ transform: translateY(-144%) scale(1);
+}
+
+.mdc-text-field--textarea .mdc-floating-label--float-above {
+ font-size: 0.75rem;
+}
+
+.mdc-text-field--textarea.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
+.mdc-text-field--textarea .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+ transform: translateY(-130%) scale(0.75);
+}
+
+.mdc-text-field--textarea.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
+.mdc-text-field--textarea .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+ font-size: 1rem;
+}
+
+.mdc-text-field--textarea .mdc-text-field-character-counter {
+ left: initial;
+ right: 16px;
+ position: absolute;
+ bottom: 13px;
+}
+
+[dir='rtl'] .mdc-text-field--textarea .mdc-text-field-character-counter,
+.mdc-text-field--textarea .mdc-text-field-character-counter[dir='rtl'] {
+ left: 16px;
+ right: initial;
+}
+
+.mdc-text-field--textarea .mdc-text-field__input {
+ align-self: auto;
+ box-sizing: border-box;
+ height: auto;
+ margin: 8px 1px 1px 0;
+ padding: 0 16px 16px;
+ border: none;
+ line-height: 1.75rem;
+}
+
+.mdc-text-field--textarea .mdc-text-field-character-counter + .mdc-text-field__input {
+ margin-bottom: 28px;
+ padding-bottom: 0;
+}
+
+.mdc-text-field--textarea .mdc-floating-label {
+ top: 17px;
+ width: auto;
+ pointer-events: none;
+}
+
+.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above) {
+ transform: none;
+}
+
+.mdc-text-field--textarea.mdc-text-field--focused .mdc-notched-outline__leading,
+.mdc-text-field--textarea.mdc-text-field--focused .mdc-notched-outline__notch,
+.mdc-text-field--textarea.mdc-text-field--focused .mdc-notched-outline__trailing {
+ border-width: 2px;
+}
+
+.mdc-text-field--fullwidth {
+ width: 100%;
+}
+
+.mdc-text-field--fullwidth:not(.mdc-text-field--disabled) .mdc-text-field__input {
+ border-bottom-color: rgba(0, 0, 0, 0.42);
+}
+
+.mdc-text-field--fullwidth.mdc-text-field--disabled .mdc-text-field__input {
+ border-bottom-color: rgba(0, 0, 0, 0.42);
+}
+
+.mdc-text-field--fullwidth:not(.mdc-text-field--textarea) {
+ display: block;
+}
+
+.mdc-text-field--fullwidth:not(.mdc-text-field--textarea)::before,
+.mdc-text-field--fullwidth:not(.mdc-text-field--textarea)::after {
+ content: none;
+}
+
+.mdc-text-field--fullwidth:not(.mdc-text-field--textarea):not(.mdc-text-field--disabled) {
+ background-color: transparent;
+}
+
+.mdc-text-field--fullwidth:not(.mdc-text-field--textarea) .mdc-text-field__input {
+ padding: 0;
+}
+
+.mdc-text-field--fullwidth.mdc-text-field--textarea .mdc-text-field__input {
+ resize: vertical;
+}
+
+.mdc-text-field--fullwidth.mdc-text-field--invalid:not(.mdc-text-field--disabled)
+ .mdc-text-field__input {
+ border-bottom-color: #b00020;
+ border-bottom-color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field-helper-line {
+ display: flex;
+ justify-content: space-between;
+ box-sizing: border-box;
+}
+
+.mdc-text-field--dense + .mdc-text-field-helper-line {
+ margin-bottom: 4px;
+}
+
+.mdc-text-field + .mdc-text-field-helper-line {
+ padding-right: 16px;
+ padding-left: 16px;
+}
+
+.mdc-form-field > .mdc-text-field + label {
+ align-self: flex-start;
+}
+
+.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
+ color: rgba(98, 0, 238, 0.87);
+}
+
+.mdc-text-field--focused
+ + .mdc-text-field-helper-line
+ .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg) {
+ opacity: 1;
+}
+
+.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input {
+ border-bottom-color: #b00020;
+ border-bottom-color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input:hover {
+ border-bottom-color: #b00020;
+ border-bottom-color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple {
+ background-color: #b00020;
+ background-color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
+ color: #b00020;
+ color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid
+ + .mdc-text-field-helper-line
+ .mdc-text-field-helper-text--validation-msg {
+ color: #b00020;
+ color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--invalid .mdc-text-field__input {
+ caret-color: #b00020;
+ caret-color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--invalid.mdc-text-field--with-trailing-icon:not(.mdc-text-field--with-leading-icon):not(.mdc-text-field--disabled)
+ .mdc-text-field__icon {
+ color: #b00020;
+ color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--invalid.mdc-text-field--with-trailing-icon.mdc-text-field--with-leading-icon:not(.mdc-text-field--disabled)
+ .mdc-text-field__icon
+ ~ .mdc-text-field__icon {
+ color: #b00020;
+ color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
+ opacity: 1;
+}
+
+.mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled)
+ .mdc-notched-outline__leading,
+.mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled)
+ .mdc-notched-outline__notch,
+.mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled)
+ .mdc-notched-outline__trailing {
+ border-color: #b00020;
+ border-color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__input:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__leading,
+.mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__input:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__notch,
+.mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__input:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__trailing,
+.mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__icon:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__leading,
+.mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__icon:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__notch,
+.mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__icon:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__trailing {
+ border-color: #b00020;
+ border-color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-notched-outline__leading,
+.mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-notched-outline__notch,
+.mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-notched-outline__trailing {
+ border-color: #b00020;
+ border-color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled)
+ .mdc-notched-outline__leading,
+.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled)
+ .mdc-notched-outline__notch,
+.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled)
+ .mdc-notched-outline__trailing {
+ border-color: #b00020;
+ border-color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__input:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__leading,
+.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__input:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__notch,
+.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__input:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__trailing,
+.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__icon:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__leading,
+.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__icon:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__notch,
+.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused)
+ .mdc-text-field__icon:hover
+ ~ .mdc-notched-outline
+ .mdc-notched-outline__trailing {
+ border-color: #b00020;
+ border-color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-notched-outline__leading,
+.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-notched-outline__notch,
+.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-notched-outline__trailing {
+ border-color: #b00020;
+ border-color: var(--mdc-theme-error, #b00020);
+}
+
+.mdc-text-field--disabled {
+ background-color: #fafafa;
+ border-bottom: none;
+ pointer-events: none;
+}
+
+.mdc-text-field--disabled .mdc-text-field__input {
+ border-bottom-color: rgba(0, 0, 0, 0.06);
+}
+
+.mdc-text-field--disabled .mdc-text-field__input {
+ color: rgba(0, 0, 0, 0.37);
+}
+
+.mdc-text-field--disabled .mdc-floating-label {
+ color: rgba(0, 0, 0, 0.37);
+}
+
+.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-helper-text {
+ color: rgba(0, 0, 0, 0.37);
+}
+
+.mdc-text-field--disabled .mdc-text-field-character-counter,
+.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-character-counter {
+ color: rgba(0, 0, 0, 0.37);
+}
+
+.mdc-text-field--disabled .mdc-text-field__icon {
+ color: rgba(0, 0, 0, 0.3);
+}
+
+.mdc-text-field--disabled .mdc-floating-label {
+ cursor: default;
+}
+
+.mdc-text-field--textarea.mdc-text-field--disabled {
+ background-color: transparent;
+ background-color: #f9f9f9;
+}
+
+.mdc-text-field--textarea.mdc-text-field--disabled .mdc-notched-outline__leading,
+.mdc-text-field--textarea.mdc-text-field--disabled .mdc-notched-outline__notch,
+.mdc-text-field--textarea.mdc-text-field--disabled .mdc-notched-outline__trailing {
+ border-color: rgba(0, 0, 0, 0.06);
+}
+
+.mdc-text-field--textarea.mdc-text-field--disabled .mdc-text-field__input {
+ border-bottom: none;
+}
+
+.mdc-floating-label {
+ font-family: Roboto, sans-serif;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-size: 1rem;
+ line-height: 1.75rem;
+ font-weight: 400;
+ letter-spacing: 0.009375em;
+ text-decoration: inherit;
+ text-transform: inherit;
+ position: absolute;
+ left: 0;
+ transform-origin: left top;
+ transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+ line-height: 1.15rem;
+ text-align: left;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ cursor: text;
+ overflow: hidden;
+ will-change: transform;
+}
+
+.mdc-floating-label--float-above {
+ cursor: auto;
+}
+
+.mdc-floating-label--float-above {
+ transform: translateY(-106%) scale(0.75);
+}
+
+.mdc-notched-outline {
+ display: flex;
+ position: absolute;
+ right: 0;
+ left: 0;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 100%;
+ height: 100%;
+ text-align: left;
+ pointer-events: none;
+}
+
+.mdc-notched-outline__leading,
+.mdc-notched-outline__notch,
+.mdc-notched-outline__trailing {
+ box-sizing: border-box;
+ height: 100%;
+ border-top: 1px solid;
+ border-bottom: 1px solid;
+ pointer-events: none;
+}
+
+.mdc-notched-outline__leading {
+ border-left: 1px solid;
+ border-right: none;
+ width: 12px;
+}
+
+.mdc-notched-outline__trailing {
+ border-left: none;
+ border-right: 1px solid;
+ flex-grow: 1;
+}
+
+.mdc-notched-outline__notch {
+ flex: 0 0 auto;
+ width: auto;
+ max-width: calc(100% - 12px * 2);
+}
+
+.mdc-notched-outline .mdc-floating-label {
+ display: inline-block;
+ position: relative;
+ max-width: 100%;
+}
+
+.mdc-notched-outline .mdc-floating-label--float-above {
+ text-overflow: clip;
+}
+
+.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+ max-width: calc(100% / 0.75);
+}
+
+.mdc-notched-outline--notched .mdc-notched-outline__notch {
+ padding-left: 0;
+ padding-right: 8px;
+ border-top: none;
+}
+
+.mdc-notched-outline--no-label .mdc-notched-outline__notch {
+ padding: 0;
+}
+
+// need
+.inline-text-field-container {
+ display: flex;
+ flex-direction: column;
}
diff --git a/src/scss/free/forms/_form-file.scss b/src/scss/free/forms/_form-file.scss
index fab9b6de..5c332f24 100644
--- a/src/scss/free/forms/_form-file.scss
+++ b/src/scss/free/forms/_form-file.scss
@@ -1,80 +1,95 @@
.form-file {
- height: $form-file-height;
+ height: calc(1.8em + 0.33rem + 2px);
}
.form-file-input {
- height: $form-file-height;
+ height: calc(1.8em + 0.33rem + 2px);
&:focus-within ~ .form-file-label {
border: none;
- border-color: $form-file-label-focus-border-color;
- box-shadow: 0px 0px 0px 1px $primary;
+ box-shadow: none;
}
&:focus-within ~ .form-file-label .form-file-text,
&:focus-within ~ .form-file-label .form-file-button {
- transition: $form-file-label-focus-transition;
+ border-style: solid;
+ border-color: $primary;
+ transition: all 0.2s linear;
}
+
+ &:focus-within ~ .form-file-label .form-file-text {
+ border-width: 2px 1px 2px 2px;
+ }
+
+ &:focus-within ~ .form-file-label .form-file-button {
+ border-width: 2px 2px 2px 1px;
+ }
+
&[disabled] ~ .form-file-label .form-file-text,
&:disabled ~ .form-file-label .form-file-text,
&[disabled] ~ .form-file-label .form-file-button,
&:disabled ~ .form-file-label .form-file-button {
- background-color: $form-file-label-disabled-background-color;
+ background-color: #e9ecef;
}
}
.form-file-label {
- height: $form-file-label-height;
- border-color: $form-file-label-border-color;
- border-radius: $form-file-label-border-radius;
+ height: calc(1.8em + 0.33rem + 2px);
+ border-color: rgba(0, 0, 0, 0.38);
}
.form-file-text {
- padding-top: $form-file-text-padding-y;
- padding-bottom: $form-file-text-padding-y;
+ padding-top: 0.33rem;
+ padding-bottom: 0.33rem;
+ border-color: #bdbdbd;
}
.form-file-button {
- line-height: $form-file-button-line-height;
- background-color: $form-file-button-background-color;
+ line-height: 1.5;
+ background-color: #fff;
+ border-color: #bdbdbd;
}
.form-file-sm {
- height: $form-file-sm-height;
- font-size: $form-file-sm-font-size;
+ height: calc(1.7em + 0.33rem + 2px);
+ font-size: 0.775rem;
.form-file-input {
- height: $form-file-sm-height;
+ height: calc(1.7em + 0.33rem + 2px);
}
.form-file-label {
- height: $form-file-sm-height;
+ height: calc(1.7em + 0.33rem + 2px);
}
.form-file-text,
.form-file-button {
- line-height: $form-file-sm-line-height;
- padding-top: $form-file-sm-padding-y;
- padding-bottom: $form-file-sm-padding-y;
+ line-height: 1.5;
+ padding-top: 0.33rem;
+ padding-bottom: 0.33rem;
}
}
.form-file-lg {
- height: $form-file-lg-height;
- font-size: $form-file-lg-font-size;
+ height: calc(2.315em + 0.33rem + 2px);
+ font-size: 1rem;
.form-file-input {
- height: $form-file-lg-height;
+ height: calc(2.315em + 0.33rem + 2px);
}
.form-file-label {
- height: $form-file-lg-height;
+ height: calc(2.315em + 0.33rem + 2px);
}
.form-file-text,
.form-file-button {
- line-height: $form-file-lg-line-height;
- padding-top: $form-file-lg-padding-y;
- padding-bottom: $form-file-lg-padding-y;
+ line-height: 2.15;
+ padding-top: 0.33rem;
+ padding-bottom: 0.33rem;
}
}
+
+.form-file.test .form-file-input:focus-within ~ .form-file-label .form-file-text {
+ border-width: 2px;
+}
diff --git a/src/scss/free/forms/_form-outline.scss b/src/scss/free/forms/_form-outline.scss
new file mode 100644
index 00000000..92e7a451
--- /dev/null
+++ b/src/scss/free/forms/_form-outline.scss
@@ -0,0 +1,146 @@
+.form-outline {
+ position: relative;
+ .form-control {
+ min-height: auto;
+ padding-top: 0.33rem;
+ padding-bottom: 0.33rem;
+ border: 0;
+ background: transparent;
+ transition: all 0.2s linear;
+ ~ .form-label {
+ position: absolute;
+ top: 0;
+ left: 0.75rem;
+ padding-top: 0.37rem;
+ pointer-events: none;
+ transform-origin: 0 0;
+ transition: all 0.2s ease-out;
+ color: rgba(0, 0, 0, 0.6);
+ 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: 1px solid;
+ border-color: #bdbdbd;
+ box-sizing: border-box;
+ background: transparent;
+ }
+ .form-notch-leading {
+ left: 0;
+ top: 0;
+ height: 100%;
+ width: 8px;
+ border-right: none;
+ border-radius: 4px 0 0 4px;
+ }
+ .form-notch-middle {
+ flex: 0 0 auto;
+ width: auto;
+ max-width: calc(100% - 16px);
+ height: 100%;
+ border-right: none;
+ border-left: none;
+ }
+ .form-notch-trailing {
+ flex-grow: 1;
+ height: 100%;
+ border-left: none;
+ border-radius: 0 4px 4px 0;
+ }
+ }
+ &:focus,
+ &.active {
+ &::placeholder {
+ opacity: 1;
+ }
+ }
+ &:focus {
+ box-shadow: none !important;
+ }
+ &:focus ~ .form-label,
+ &.active ~ .form-label {
+ transform: translateY(-1rem) translateY(0.1rem) scale(0.8);
+ }
+ &:focus ~ .form-label {
+ color: $primary;
+ }
+ &:focus ~ .form-notch .form-notch-middle,
+ &.active ~ .form-notch .form-notch-middle {
+ border-top: none;
+ border-right: none;
+ border-left: none;
+ }
+ &:focus ~ .form-notch .form-notch-middle {
+ border-bottom: 2px solid;
+ border-color: $primary;
+ transition: all 0.2s linear;
+ }
+ &:focus ~ .form-notch .form-notch-leading,
+ &.active ~ .form-notch .form-notch-leading {
+ border-right: none;
+ }
+ &:focus ~ .form-notch .form-notch-leading {
+ border-top: 2px solid;
+ border-bottom: 2px solid;
+ border-left: 2px solid;
+ border-color: $primary;
+ transition: all 0.2s linear;
+ }
+ &:focus ~ .form-notch .form-notch-trailing,
+ &.active ~ .form-notch .form-notch-trailing {
+ border-left: none;
+ }
+ &:focus ~ .form-notch .form-notch-trailing {
+ border-top: 2px solid;
+ border-bottom: 2px solid;
+ border-right: 2px solid;
+ border-color: $primary;
+ transition: all 0.2s linear;
+ }
+ &:disabled,
+ &.disabled,
+ &[readonly] {
+ background-color: #e9ecef;
+ }
+ &::placeholder {
+ opacity: 0;
+ }
+ &.form-control-lg {
+ font-size: 1rem;
+ line-height: 2.15;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ ~ .form-label {
+ padding-top: 0.7rem;
+ }
+ &:focus ~ .form-label,
+ &.active ~ .form-label {
+ transform: translateY(-1.25rem) translateY(0.1rem) scale(0.8);
+ }
+ }
+ &.form-control-sm {
+ font-size: 0.775rem;
+ line-height: 1.5;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ ~ .form-label {
+ padding-top: 0.33rem;
+ font-size: 0.775rem;
+ }
+ &:focus ~ .form-label,
+ &.active ~ .form-label {
+ transform: translateY(-0.83rem) translateY(0.1rem) scale(0.8);
+ }
+ }
+ }
+}
diff --git a/src/scss/free/forms/_form-range.scss b/src/scss/free/forms/_form-range.scss
index e1952dba..0f574d22 100644
--- a/src/scss/free/forms/_form-range.scss
+++ b/src/scss/free/forms/_form-range.scss
@@ -26,13 +26,13 @@
}
&::-webkit-slider-thumb {
- margin-top: $form-range-webkit-slider-thumb-margin-top; // Webkit specific
+ margin-top: -6px; // Webkit specific
box-shadow: none;
appearance: none;
}
&::-webkit-slider-runnable-track {
- height: $form-range-webkit-slider-runnable-track-height;
+ height: 4px;
border-radius: 0;
}
diff --git a/src/scss/free/forms/_form-select.scss b/src/scss/free/forms/_form-select.scss
index 1f9b1ddb..ce3da11f 100644
--- a/src/scss/free/forms/_form-select.scss
+++ b/src/scss/free/forms/_form-select.scss
@@ -1,9 +1 @@
// Select
-
-.select-input {
- &.form-control {
- &[readonly]:not([disabled]) {
- background-color: transparent;
- }
- }
-}
diff --git a/src/scss/free/forms/_form-text.scss b/src/scss/free/forms/_form-text.scss
new file mode 100644
index 00000000..f080d1a2
--- /dev/null
+++ b/src/scss/free/forms/_form-text.scss
@@ -0,0 +1,11 @@
+//
+// Form text
+//
+
+.form-text {
+ margin-top: $form-text-margin-top;
+ @include font-size($form-text-font-size);
+ font-style: $form-text-font-style;
+ font-weight: $form-text-font-weight;
+ color: $form-text-color;
+}
diff --git a/src/scss/free/forms/_input-group.scss b/src/scss/free/forms/_input-group.scss
index dab10568..35ca13d7 100644
--- a/src/scss/free/forms/_input-group.scss
+++ b/src/scss/free/forms/_input-group.scss
@@ -4,52 +4,48 @@
.input-group {
> .form-control {
- min-height: $input-group-min-height;
- height: $input-group-height;
- padding-top: $input-group-padding-y;
- padding-bottom: $input-group-padding-y;
- transition: $input-group-transition;
+ min-height: calc(1.5em + 0.33rem + 2px);
+ padding-top: 0.27rem;
+ padding-bottom: 0.27rem;
&:focus {
- transition: $input-group-focus-transition;
- border-color: $input-group-focus-border-color;
+ border-color: $primary;
outline: 0;
- box-shadow: $input-group-focus-box-shadow;
+ box-shadow: inset 0 0 0 1px $primary;
}
}
}
.input-group-text {
background-color: transparent;
- padding-top: $input-group-text-padding-y;
- padding-bottom: $input-group-text-padding-y;
+ padding-top: 0.27rem;
+ padding-bottom: 0.27rem;
}
.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;
+ height: calc(2.315em + 0.33rem + 2px);
+ font-size: 1rem;
+ padding-top: 0.33rem;
+ padding-bottom: 0.33rem;
}
.input-group-text {
- font-size: $input-group-lg-text-font-size;
+ font-size: 1rem;
}
}
.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;
+ height: calc(1.7em + 0.33rem + 2px);
+ font-size: 0.775rem;
+ padding-top: 0.33rem;
+ padding-bottom: 0.33rem;
}
.input-group-text {
- font-size: $input-group-sm-text-font-size;
- line-height: $input-group-sm-text-line-height;
+ font-size: 0.775rem;
+ line-height: 1.5;
}
}
@@ -58,14 +54,5 @@
.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;
- }
}
}
-
-.input-group > [class*='btn-outline-'] + [class*='btn-outline-'] {
- border-left: 0;
-}
diff --git a/src/scss/free/forms/_labels.scss b/src/scss/free/forms/_labels.scss
new file mode 100644
index 00000000..39ecafcd
--- /dev/null
+++ b/src/scss/free/forms/_labels.scss
@@ -0,0 +1,36 @@
+//
+// Labels
+//
+
+.form-label {
+ margin-bottom: $form-label-margin-bottom;
+ @include font-size($form-label-font-size);
+ font-style: $form-label-font-style;
+ font-weight: $form-label-font-weight;
+ color: $form-label-color;
+}
+
+// For use with horizontal and inline forms, when you need the label (or legend)
+// text to align with the form controls.
+.col-form-label {
+ padding-top: add($input-padding-y, $input-border-width);
+ padding-bottom: add($input-padding-y, $input-border-width);
+ margin-bottom: 0; // Override the `` default
+ @include font-size(inherit); // Override the `` default
+ font-style: $form-label-font-style;
+ font-weight: $form-label-font-weight;
+ line-height: $input-line-height;
+ color: $form-label-color;
+}
+
+.col-form-label-lg {
+ padding-top: add($input-padding-y-lg, $input-border-width);
+ padding-bottom: add($input-padding-y-lg, $input-border-width);
+ @include font-size($input-font-size-lg);
+}
+
+.col-form-label-sm {
+ padding-top: add($input-padding-y-sm, $input-border-width);
+ padding-bottom: add($input-padding-y-sm, $input-border-width);
+ @include font-size($input-font-size-sm);
+}
diff --git a/src/scss/free/forms/_validation.scss b/src/scss/free/forms/_validation.scss
index b899ce5d..48d46e78 100644
--- a/src/scss/free/forms/_validation.scss
+++ b/src/scss/free/forms/_validation.scss
@@ -1,142 +1,45 @@
+// Form validation
//
-// Material styles for form validation
-//
+.was-validated :valid ~ .valid-feedback,
+.was-validated :valid ~ .valid-tooltip,
+.is-valid ~ .valid-feedback,
+.is-valid ~ .valid-tooltip {
+ position: absolute;
+}
+
+.was-validated .form-control:valid,
+.form-control.is-valid,
+.was-validated .form-control:invalid,
+.form-control.is-invalid {
+ margin-bottom: 1rem;
+}
+
+.valid-feedback,
+.invalid-feedback {
+ margin-top: -0.75rem;
+}
+
+.was-validated :invalid ~ .invalid-feedback,
+.was-validated :invalid ~ .invalid-tooltip,
+.is-invalid ~ .invalid-feedback,
+.is-invalid ~ .invalid-tooltip {
+ position: absolute;
+}
+
+.was-validated .form-control:valid,
+.form-control.is-valid,
+.was-validated .form-control:invalid,
+.form-control.is-invalid,
+.was-validated .form-select:invalid,
+.form-select.is-invalid {
+ background-image: none;
+}
.was-validated {
- :valid {
- ~ .valid-feedback,
- ~ .valid-tooltip {
- position: absolute;
- }
- &.form-check-input {
- &:focus {
- box-shadow: none;
- &:before {
- box-shadow: 0px 0px 0px 13px $success;
- }
- }
- &:checked {
- &:focus {
- &:before {
- box-shadow: 0px 0px 0px 13px $success;
- }
- }
- }
- &[type='checkbox'] {
- &:checked {
- &:focus {
- background-color: $success;
- border-color: $success;
- }
- }
- }
- &[type='radio'] {
- &:checked {
- border-color: $success;
- background-color: $white;
- &:focus {
- &:before {
- box-shadow: 0px 0px 0px 13px $success;
- }
- }
- &:after {
- border-color: $success;
- background-color: $success;
- }
- }
- }
- ~ .form-check-label {
- margin-bottom: 1rem;
- }
- }
- &.form-file-input {
- &:focus {
- ~ .form-file-label {
- box-shadow: none;
- }
- }
- &:focus-within {
- ~ .form-file-label {
- .form-file-text,
- .form-file-button {
- border-color: $success;
- }
- }
- }
- }
- }
- :invalid {
- ~ .invalid-feedback,
- ~ .invalid-tooltip {
- position: absolute;
- }
- &.form-check-input {
- &:focus {
- box-shadow: none;
- &:before {
- box-shadow: 0px 0px 0px 13px $danger;
- }
- }
- &:checked {
- &:focus {
- &:before {
- box-shadow: 0px 0px 0px 13px $danger;
- }
- }
- }
- &[type='checkbox'] {
- &:checked {
- &:focus {
- background-color: $danger;
- border-color: $danger;
- }
- }
- }
- &[type='radio'] {
- &:checked {
- border-color: $danger;
- background-color: $white;
- &:focus {
- &:before {
- box-shadow: 0px 0px 0px 13px $danger;
- }
- }
- &:after {
- border-color: $danger;
- background-color: $danger;
- }
- }
- }
- ~ .form-check-label {
- margin-bottom: 1rem;
- }
- }
- &.form-file-input {
- &:focus {
- ~ .form-file-label {
- box-shadow: none;
- }
- }
- &:focus-within {
- ~ .form-file-label {
- .form-file-text,
- .form-file-button {
- border-color: $danger;
- }
- }
- }
- }
- }
- .form-control {
- &:valid,
- &:invalid {
- margin-bottom: 1rem;
- background-image: none;
- }
- }
.form-outline {
.form-control {
- &:valid {
+ &:valid,
+ &.is-valid {
~ .form-label {
color: $success;
}
@@ -147,7 +50,8 @@
}
}
- &:invalid {
+ &:invalid,
+ &.is-invalid {
~ .form-label {
color: $danger;
}
@@ -159,268 +63,42 @@
}
}
}
- .input-group {
- .form-control {
- &:valid,
- &:invalid {
- margin-bottom: 0;
- }
- }
- .valid-feedback,
- .invalid-feedback {
- margin-top: 2.5rem;
- }
- .valid-tooltip,
- .invalid-tooltip {
- border-radius: 0.25rem !important;
- }
- }
- .form-file {
- margin-bottom: 2.5rem;
- .form-file-input {
- &:focus-within {
- ~ .form-file-label {
- border: none;
- box-shadow: none;
- }
- }
- &:valid {
- ~ .form-file-label {
- .form-file-text,
- .form-file-button {
- border-color: $success;
- }
- }
- }
- &:invalid {
- ~ .form-file-label {
- .form-file-text,
- .form-file-button {
- border-color: $danger;
- }
- }
- }
- }
- }
}
-.is-valid {
- ~ .valid-feedback,
- ~ .valid-tooltip {
- position: absolute;
- }
- &.form-control {
- margin-bottom: 1rem;
- background-image: none;
- }
- &.form-select {
- background-image: none;
- }
- &.form-check-input {
- &:focus {
- box-shadow: none;
- &:before {
- box-shadow: 0px 0px 0px 13px $success;
- }
- }
- &:checked {
- &:focus {
- &:before {
- box-shadow: 0px 0px 0px 13px $success;
- }
- }
- }
- &[type='checkbox'] {
- border-color: $success;
- &:before {
- border-color: $white;
- }
- &:checked {
- background-color: $success;
- border-color: $success;
- &:before {
- border-color: $white;
- }
- &:focus {
- background-color: $success;
- border-color: $success;
- }
- }
- }
- &[type='radio'] {
- &:checked {
- border-color: $success;
- background-color: $white;
- &:focus {
- &:before {
- box-shadow: 0px 0px 0px 13px $success;
- }
- }
- &:after {
- border-color: $success;
- background-color: $success;
- }
- }
- }
- ~ .form-check-label {
- margin-bottom: 1rem;
- }
- }
- &.form-file-input {
- &:focus {
- ~ .form-file-label {
- box-shadow: none;
- }
- }
- &:focus-within {
- ~ .form-file-label {
- .form-file-text,
- .form-file-button {
- border-color: $success;
- }
- }
- }
- }
+.was-validated
+ .form-check
+ .form-check-input[type='checkbox']:valid:checked
+ + .form-check-label:before,
+.was-validated
+ .form-check
+ .form-check-input[type='checkbox'].is-valid:checked
+ + .form-check-label:before {
+ background-color: $success;
+ border-color: $success;
}
-.is-invalid {
- ~ .invalid-feedback,
- ~ .invalid-tooltip {
- position: absolute;
- }
- &.form-control {
- margin-bottom: 1rem;
- background-image: none;
- }
- &.form-select {
- background-image: none;
- }
- &.form-check-input {
- &:focus {
- box-shadow: none;
- &:before {
- box-shadow: 0px 0px 0px 13px $danger;
- }
- }
- &:checked {
- &:focus {
- &:before {
- box-shadow: 0px 0px 0px 13px $danger;
- }
- }
- }
- &[type='checkbox'] {
- border-color: $danger;
- &:before {
- border-color: $white;
- }
- &:checked {
- background-color: $danger;
- border-color: $danger;
- &:before {
- border-color: $white;
- }
- &:focus {
- background-color: $danger;
- border-color: $danger;
- }
- }
- }
- &[type='radio'] {
- &:checked {
- border-color: $danger;
- background-color: $white;
- &:focus {
- &:before {
- box-shadow: 0px 0px 0px 13px $danger;
- }
- }
- &:after {
- border-color: $danger;
- background-color: $danger;
- }
- }
- }
- ~ .form-check-label {
- margin-bottom: 1rem;
- }
- }
- &.form-file-input {
- &:focus {
- ~ .form-file-label {
- box-shadow: none;
- }
- }
- &:focus-within {
- ~ .form-file-label {
- .form-file-text,
- .form-file-button {
- border-color: $danger;
- }
- }
- }
- }
+.was-validated .form-check .form-check-input[type='checkbox']:invalid + .form-check-label:before,
+.was-validated
+ .form-check
+ .form-check-input[type='checkbox'].is-invalid
+ + .form-check-label:before {
+ background-color: $white;
+ border-color: $danger;
}
-.valid-feedback,
-.invalid-feedback {
- margin-top: -0.75rem;
+.was-validated .form-check-input:valid ~ .form-check-label,
+.form-check-input.is-valid ~ .form-check-label,
+.was-validated .form-check-input:invalid ~ .form-check-label,
+.form-check-input.is-invalid ~ .form-check-label {
+ margin-bottom: 1rem;
}
-.form-outline {
- .form-control {
- &.is-valid {
- ~ .form-label {
- color: $success;
- }
- ~ .form-notch .form-notch-leading,
- ~ .form-notch .form-notch-middle,
- ~ .form-notch .form-notch-trailing {
- border-color: $success;
- }
- }
-
- &.is-invalid {
- ~ .form-label {
- color: $danger;
- }
- ~ .form-notch .form-notch-leading,
- ~ .form-notch .form-notch-middle,
- ~ .form-notch .form-notch-trailing {
- border-color: $danger;
- }
- }
- }
+.was-validated .form-check-input:valid:checked,
+.form-check-input.is-valid:checked {
+ background-color: $success;
}
-.input-group {
- .form-control {
- &.is-valid,
- &.is-invalid {
- margin-bottom: 0;
- }
- }
- .valid-feedback,
- .invalid-feedback {
- margin-top: 2.5rem;
- }
- .valid-tooltip,
- .invalid-tooltip {
- border-radius: 0.25rem !important;
- }
-}
-
-.form-file {
- .valid-feedback,
- .invalid-feedback {
- margin-top: 0.25rem;
- }
-}
-
-.valid-tooltip {
- color: $form-feedback-valid-tooltip-color;
-}
-
-.invalid-feedback {
- width: auto;
+.was-validated .form-check-input:invalid,
+.form-check-input.is-invalid {
+ background-color: $danger;
}
diff --git a/src/scss/free/mixins/_alert.scss b/src/scss/free/mixins/_alert.scss
new file mode 100644
index 00000000..725e31a4
--- /dev/null
+++ b/src/scss/free/mixins/_alert.scss
@@ -0,0 +1,9 @@
+.alert {
+ border: 0;
+}
+
+@each $color, $value in $theme-colors {
+ .alert-#{$color} {
+ @include alert-variant(color-level($value, $alert-bg-level), color-level($value, $alert-border-level), color-level($value, $alert-color-level));
+ }
+}
\ No newline at end of file
diff --git a/src/scss/free/mixins/_buttons.scss b/src/scss/free/mixins/_buttons.scss
index 2575f60e..b38ddb28 100644
--- a/src/scss/free/mixins/_buttons.scss
+++ b/src/scss/free/mixins/_buttons.scss
@@ -1,4 +1,5 @@
// Button variant
+
@mixin button-variant-mdb($background) {
color: set-notification-text-color($background);
background-color: $background;
@@ -14,17 +15,11 @@
background-color: darken($background, 7.5%);
}
- .btn-check:checked + &,
- .btn-check:active + &,
&:active,
&.active,
.show > &.dropdown-toggle {
color: set-notification-text-color($background);
- background-color: darken($background, 20%);
-
- &:focus {
- box-shadow: $btn-focus-box-shadow;
- }
+ background-color: darken($background, 10%);
}
&:disabled,
@@ -35,6 +30,7 @@
}
// Button variant outline
+
@mixin button-outline-variant-mdb($color) {
color: $color;
border-color: $color;
@@ -66,22 +62,3 @@
color: $color;
}
}
-
-// Button sizes
-@mixin button-size-mdb(
- $padding-top,
- $padding-right,
- $padding-bottom,
- $padding-left,
- $font-size,
- $line-height
-) {
- padding: $padding-top $padding-right $padding-bottom $padding-left;
- font-size: $font-size;
- line-height: $line-height;
-}
-
-// Button size variant outline
-@mixin button-outline-size-mdb($padding-top, $padding-right, $padding-bottom, $padding-left) {
- padding: $padding-top $padding-right $padding-bottom $padding-left;
-}
diff --git a/src/scss/free/mixins/_colors.scss b/src/scss/free/mixins/_colors.scss
new file mode 100644
index 00000000..1f5e4c3a
--- /dev/null
+++ b/src/scss/free/mixins/_colors.scss
@@ -0,0 +1 @@
+// Colors
\ No newline at end of file
diff --git a/src/scss/free/mixins/_table-variants.scss b/src/scss/free/mixins/_table-variants.scss
deleted file mode 100644
index cc03a1ab..00000000
--- a/src/scss/free/mixins/_table-variants.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// scss-docs-start table-variant
-@mixin table-variant-mdb($state, $background) {
- .table-#{$state} {
- background-color: $background;
- }
-}
-// scss-docs-end table-variant
diff --git a/src/scss/mdb.free.scss b/src/scss/mdb.free.scss
index 89abf333..a544fc61 100644
--- a/src/scss/mdb.free.scss
+++ b/src/scss/mdb.free.scss
@@ -3,7 +3,6 @@
@import './free/functions';
// CORE VARIABLES
-@import './custom/variables';
@import './free/variables';
@import './bootstrap/variables';
@@ -33,7 +32,6 @@
@import './bootstrap/pagination';
@import './bootstrap/badge';
@import './bootstrap/alert';
-@import './bootstrap/accordion';
@import './bootstrap/progress';
@import './bootstrap/list-group';
@import './bootstrap/close';
@@ -43,7 +41,6 @@
@import './bootstrap/popover';
@import './bootstrap/carousel';
@import './bootstrap/spinners';
-@import './bootstrap/tooltip';
// Helpers
@import './bootstrap/helpers';
@@ -61,10 +58,10 @@
@import './free/colors';
@import './free/shadows';
@import './free/flag';
-@import './free/images';
// MDB FORMS
@import './free/forms/form-control';
+@import './free/forms/form-outline';
@import './free/forms/form-select';
@import './free/forms/form-check';
@import './free/forms/form-file';
@@ -73,27 +70,20 @@
@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/animate';
@import './free/ripple';
-@import './free/range';
-@import './free/accordion';
-@import './free/carousel';