release 5.0.0

This commit is contained in:
Mikolaj Smolenski 2022-08-29 08:35:21 +02:00
parent e561504aa1
commit ed3cddbc9f
29 changed files with 617 additions and 190 deletions

View File

@ -1,5 +1,5 @@
MDB5
Version: FREE 4.4.0
Version: FREE 5.0.0
Documentation:
https://mdbootstrap.com/docs/standard/

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

10
css/mdb.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

4
css/mdb.rtl.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

4
js/mdb.min.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{
"name": "mdb-ui-kit",
"version": "4.4.0",
"version": "5.0.0",
"main": "js/mdb.min.js",
"homepage": "https://mdbootstrap.com/docs/standard/",
"repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",

View File

@ -134,7 +134,7 @@ class Ripple {
}
if (!this._element.style.minWidth) {
Manipulator.style(this._element, { 'min-width': `${this._element.offsetWidth}px` });
Manipulator.style(this._element, { 'min-width': `${getComputedStyle(this._element).width}` });
this._isMinWidthSet = true;
}

View File

@ -13,3 +13,26 @@
box-shadow: none;
}
}
.accordion-flush {
.accordion-button:not(.collapsed) {
box-shadow: $accordion-flush-button-box-shadow;
}
.accordion-item {
border-bottom: $accordion-flush-item-border-bottom;
}
}
.accordion-borderless {
.accordion-item {
border: 0;
.accordion-button {
border-radius: $accordion-borderless-button-border-radius;
&:not(.collapsed) {
background-color: $accordion-borderless-button-bgc;
color: $accordion-borderless-button-color;
box-shadow: none;
}
}
}
}

View File

@ -17,3 +17,22 @@
.parent-alert-relative {
position: relative;
}
@each $color, $value in $alerts {
.alert-#{$color} {
background-color: map-get($value, background-color);
color: map-get($value, text-color);
i {
color: map-get($value, icon-color);
}
.alert-link {
color: map-get($value, text-color);
&:hover {
color: shift-color(map-get($value, text-color), 20%);
}
}
}
}

View File

@ -25,13 +25,13 @@
padding: $badge-notification-padding-y $badge-notification-padding-x;
}
@each $name, $color in $badges {
.badge-#{$name} {
background-color: map-get($color, background-color);
color: map-get($color, text-color);
@each $color, $value in $badges {
.badge-#{$color} {
background-color: map-get($value, background-color);
color: map-get($value, text-color);
i {
color: map-get($color, icon-color);
color: map-get($value, icon-color);
}
}
}

View File

@ -128,9 +128,105 @@
// Alternate buttons
//
@each $color, $value in $theme-colors {
@each $color, $value in $buttons {
.btn-#{$color} {
@include button-variant-mdb($value);
background-color: map-get($value, background-color);
color: map-get($value, text-color);
box-shadow: $btn-contextual-box-shadow map-get($value, shadow-color);
&:hover,
&:focus,
&.focus {
background-color: darken(map-get($value, background-color), 5%);
color: map-get($value, text-color);
box-shadow: $btn-contextual-box-shadow-state-first-part
rgba(map-get($value, shadow-color), 0.3),
$btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
}
&:active,
&.active {
box-shadow: $btn-contextual-box-shadow-state-first-part
rgba(map-get($value, shadow-color), 0.3),
$btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
&:focus {
box-shadow: $btn-contextual-box-shadow-state-first-part
rgba(map-get($value, shadow-color), 0.3),
$btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
}
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
.show > &.dropdown-toggle {
background-color: darken(map-get($value, background-color), 10%);
color: map-get($value, text-color);
&:focus {
box-shadow: $btn-contextual-box-shadow-state-first-part
rgba(map-get($value, shadow-color), 0.3),
$btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
}
}
&:disabled,
&.disabled {
background-color: map-get($value, background-color);
color: map-get($value, text-color);
box-shadow: $btn-contextual-box-shadow map-get($value, shadow-color);
}
.btn-check:focus + &,
&:focus {
box-shadow: $btn-contextual-box-shadow-state-first-part
rgba(map-get($value, shadow-color), 0.3),
$btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
}
}
}
.btn-secondary {
box-shadow: none;
&:hover,
&:focus,
&.focus {
background-color: $btn-secondary-hover-focus-bgc;
box-shadow: none;
}
&:active,
&.active {
box-shadow: none;
&:focus {
box-shadow: none;
}
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
.show > &.dropdown-toggle {
background-color: $btn-secondary-active-bgc;
&:focus {
box-shadow: none;
}
}
&:disabled,
&.disabled {
box-shadow: none;
}
.btn-check:focus + &,
&:focus {
box-shadow: none;
}
}
@ -138,14 +234,43 @@
// Alternate buttons outline
//
@each $color, $value in $theme-colors {
@each $color, $value in $buttons-outline {
.btn-outline-#{$color} {
@include button-outline-variant-mdb($value);
color: map-get($value, text-color);
border-color: map-get($value, border-color);
&:hover {
color: map-get($value, text-color);
background-color: rgba(map-get($value, background-color), 0.02);
}
&:focus,
&.focus {
color: map-get($value, text-color);
background-color: transparent;
}
&:active,
&.active,
&.dropdown-toggle.show {
color: map-get($value, text-color);
background-color: transparent;
&:focus {
box-shadow: none;
}
}
&:disabled,
&.disabled {
color: map-get($value, text-color);
}
.btn-check:checked + &,
.btn-check:active + & {
color: set-notification-text-color($value);
background-color: $value;
color: map-get($value, text-color);
border-color: map-get($value, border-color);
background-color: rgba(map-get($value, background-color), 0.02);
}
}
}
@ -183,11 +308,13 @@
.btn-link {
box-shadow: none;
text-decoration: none;
color: $link-color;
&:hover {
box-shadow: none;
text-decoration: none;
background-color: $btn-link-bgc;
color: $link-hover-color;
}
&:focus,
@ -195,16 +322,19 @@
box-shadow: none;
text-decoration: none;
background-color: $btn-link-bgc;
color: $link-hover-color;
}
&:active,
&.active {
box-shadow: none;
background-color: $btn-link-bgc;
color: $link-hover-color;
&:focus {
box-shadow: none;
background-color: $btn-link-bgc;
color: $link-hover-color;
}
}
@ -212,6 +342,7 @@
&.disabled,
fieldset:disabled & {
box-shadow: none;
color: $link-color;
}
}
@ -334,27 +465,68 @@
opacity: 0;
transition: transform 0.4s, opacity 0.4s;
z-index: -1;
li {
z-index: 0;
display: flex;
margin-right: auto;
margin-bottom: $fixed-action-btn-li-margin-bottom;
margin-left: auto;
&:first-of-type {
margin-top: $fixed-action-btn-li-margin-bottom * 0.5;
}
}
a {
&.btn {
opacity: 0;
transition: opacity 0.4s ease-in;
&.shown {
opacity: 1;
}
}
}
}
&.active ul {
opacity: 1;
}
}
.btn-tertiary {
box-shadow: none;
text-decoration: none;
color: $link-color;
padding-left: 0px;
padding-right: 0px;
&:hover,
&:focus,
&.focus {
box-shadow: none;
text-decoration: none;
background-color: transparent;
color: $link-hover-color;
}
&:active,
&.active {
box-shadow: none;
background-color: transparent;
color: $link-hover-color;
&:focus {
box-shadow: none;
background-color: transparent;
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
box-shadow: none;
color: $link-color;
}
}

View File

@ -11,33 +11,52 @@
.list-group-light {
.list-group-item {
padding: 1rem 0;
border: 2px solid hsl(0, 0%, 96%);
padding: $list-group-light-item-py 0;
border: $list-group-light-item-border;
}
> .list-group-item {
border-width: 0 0 2px;
border-width: 0 0 $list-group-light-item-border-width;
&:last-of-type {
border: none;
}
}
.active {
border: none;
border-radius: 0.5rem;
background-color: hsl(217, 88.2%, 90%);
color: hsl(217, 88.8%, 35.1%);
border-radius: $list-group-light-active-border-radius;
background-color: $list-group-light-active-bgc;
color: $list-group-light-active-color;
}
.list-group-item-action {
&:hover {
border-radius: 0.5rem;
border-radius: $list-group-light-active-border-radius;
}
&:focus {
border-radius: 0.5rem;
border-radius: $list-group-light-active-border-radius;
}
}
}
.list-group-small {
.list-group-item {
padding: 0.5rem 0;
padding: $list-group-small-item-py 0;
}
}
.list-group-item {
&.active {
background-color: $list-group-item-active-bgc;
color: $list-group-item-active-color;
border-color: $list-group-item-active-border-color;
}
}
@each $color, $value in $alerts {
.list-group-item-#{$color} {
background-color: map-get($value, background-color);
color: map-get($value, text-color);
i {
color: map-get($value, icon-color);
}
}
}

View File

@ -21,7 +21,7 @@
$nav-tabs-link-padding-x;
&:hover {
background-color: $nav-tabs-link-hover-background-color;
background-color: $nav-tabs-link-hover-bgc;
border-color: transparent;
}
@ -51,7 +51,7 @@
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;
background-color: $nav-pills-link-hover-bgc;
font-weight: $nav-pills-link-font-weight;
color: $nav-pills-link-color;
margin: $nav-pills-margin;
@ -59,9 +59,8 @@
.nav-link.active,
.show > .nav-link {
background-color: $nav-pills-link-active-bgc;
color: $nav-pills-link-active-color;
background-color: $nav-pills-link-active-bg;
box-shadow: $btn-box-shadow;
}
}

View File

@ -21,10 +21,12 @@
.page-item {
&.active .page-link {
background-color: $pagination-active-bg;
background-color: $page-item-active-link-bgc;
color: $page-item-active-link-color;
border: 0;
box-shadow: $pagination-active-box-shadow;
box-shadow: $page-item-active-link-box-shadow;
transition: $pagination-active-transition;
font-weight: $page-item-active-link-font-weight;
}
&:first-child {

View File

@ -1,8 +1,8 @@
// Popover
.popover {
border: 0;
box-shadow: $popover-box-shadow;
border: 1px solid #f5f5f5;
box-shadow: $box-shadow-2;
.popover-arrow {
display: none;

View File

@ -25,7 +25,7 @@
top: 0;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
background: #1266f1;
background: $primary;
z-index: -1;
}

View File

@ -35,7 +35,7 @@
@include ripple-variant(white);
}
@each $color, $value in $theme-colors {
@each $color, $value in $ripple {
.ripple-surface-#{$color} {
.ripple-wave {
@include ripple-variant($value);

View File

@ -1,18 +1 @@
// Shadows
// @each $shadow, $value in $shadows {
// .shadow-#{$shadow} {
// box-shadow: $value !important;
// }
// }
// @each $shadow, $value in $shadows-soft {
// .shadow-#{$shadow}-soft {
// box-shadow: $value !important;
// }
// }
// @each $shadow, $value in $shadows-strong {
// .shadow-#{$shadow}-strong {
// box-shadow: $value !important;
// }
// }

View File

@ -33,10 +33,10 @@
z-index: $zindex-toast;
}
@each $name, $color in $toasts {
.toast-#{$name} {
background-color: map-get($color, background-color);
color: map-get($color, text-color);
border-color: map-get($color, border-color);
@each $color, $value in $toasts {
.toast-#{$color} {
background-color: map-get($value, background-color);
color: map-get($value, text-color);
border-color: map-get($value, border-color);
}
}

View File

@ -11,10 +11,10 @@
}
}
@each $name, $color in $note {
.note-#{$name} {
background-color: map-get($color, bgc);
border-color: map-get($color, border-color);
@each $color, $value in $note {
.note-#{$color} {
background-color: map-get($value, background-color);
border-color: map-get($value, border-color);
}
}

View File

@ -239,14 +239,3 @@ $utilities: map-merge(
transition: color 0.15s;
}
}
.navbar-light .navbar-nav .nav-link.link-grayish,
.navbar-dark .navbar-nav .nav-link.link-grayish,
.link-grayish {
color: #9fa6b2;
&:hover,
&:focus {
color: #798497;
}
}

View File

@ -281,63 +281,174 @@ $blue-gray-900: #263238 !default;
// Material Design Color System - end
// Theme colors
$primary: #1266f1 !default;
$secondary: #b23cfd !default;
$success: #00b74a !default;
$info: #39c0ed !default;
$warning: #ffa900 !default;
$danger: #f93154 !default;
$light: #f9f9f9 !default;
$dark: $gray-900 !default;
$grayish: #9fa6b2 !default;
$primary: #3b71ca !default;
$secondary: #9fa6b2 !default;
$success: #14a44d !default;
$danger: #dc4c64 !default;
$warning: #e4a11b !default;
$info: #54b4d3 !default;
$light: #fbfbfb !default;
$dark: #332d2d !default;
// scss-docs-start theme-colors-map
$theme-colors: (
'primary': $primary,
'secondary': $secondary,
'success': $success,
'info': $info,
'warning': $warning,
'danger': $danger,
'warning': $warning,
'info': $info,
'light': $light,
'dark': $dark,
'white': $white,
'black': $black,
'grayish': $grayish,
) !default;
// scss-docs-end theme-colors-map
// scss-docs-start ripple-colors-map
$ripple: (
'primary': $primary,
'secondary': #e3ebf7,
'success': $success,
'danger': $danger,
'warning': $warning,
'info': $info,
'light': $light,
'dark': $dark,
) !default;
// scss-docs-end ripple-colors-map
// scss-docs-start buttons-colors-map
$buttons: () !default;
$buttons: map-merge(
(
'primary': (
'background-color': $primary,
'text-color': $white,
'shadow-color': $primary,
),
'secondary': (
'background-color': #e3ebf7,
'text-color': #285192,
'shadow-color': #e3ebf7,
),
'success': (
'background-color': $success,
'text-color': $white,
'shadow-color': $success,
),
'danger': (
'background-color': $danger,
'text-color': $white,
'shadow-color': $danger,
),
'warning': (
'background-color': $warning,
'text-color': $white,
'shadow-color': $warning,
),
'info': (
'background-color': $info,
'text-color': $white,
'shadow-color': $info,
),
'light': (
'background-color': $light,
'text-color': #4f4f4f,
'shadow-color': $light,
),
'dark': (
'background-color': $dark,
'text-color': $white,
'shadow-color': $dark,
),
),
$buttons
);
// scss-docs-end buttons-colors-map
// scss-docs-start buttons-outline-colors-map
$buttons-outline: () !default;
$buttons-outline: map-merge(
(
'primary': (
'text-color': $primary,
'border-color': $primary,
'background-color': $primary,
),
'secondary': (
'text-color': #285192,
'border-color': #e3ebf7,
'background-color': #e3ebf7,
),
'success': (
'text-color': $success,
'border-color': $success,
'background-color': $success,
),
'danger': (
'text-color': $danger,
'border-color': $danger,
'background-color': $danger,
),
'warning': (
'text-color': $warning,
'border-color': $warning,
'background-color': $warning,
),
'info': (
'text-color': $info,
'border-color': $info,
'background-color': $info,
),
'light': (
'text-color': $light,
'border-color': $light,
'background-color': $light,
),
'dark': (
'text-color': $dark,
'border-color': $dark,
'background-color': $dark,
),
),
$buttons-outline
);
// scss-docs-end buttons-outline-colors-map
// scss-docs-start note-colors-map
$note: () !default;
$note: map-merge(
(
'primary': (
'bgc': lighten($primary, 43%),
'border-color': $primary,
'background-color': rgb(223, 231, 246),
'border-color': rgb(55, 111, 200),
),
'secondary': (
'bgc': lighten($secondary, 33%),
'border-color': $secondary,
'background-color': rgb(235, 237, 239),
'border-color': rgb(86, 94, 108),
),
'success': (
'bgc': lighten($success, 53%),
'border-color': $success,
'background-color': rgb(214, 240, 224),
'border-color': rgb(19, 150, 71),
),
'danger': (
'bgc': lighten($danger, 36%),
'border-color': $danger,
'background-color': rgb(249, 225, 229),
'border-color': rgb(214, 46, 74),
),
'warning': (
'bgc': lighten($warning, 42%),
'border-color': $warning,
'background-color': rgb(251, 240, 218),
'border-color': rgb(161, 113, 18),
),
'info': (
'bgc': lighten($info, 36%),
'border-color': $info,
'background-color': rgb(222, 241, 247),
'border-color': rgb(38, 134, 166),
),
'light': (
'bgc': $light,
'border-color': $dark,
'background-color': rgb(245, 245, 245),
'border-color': rgb(140, 140, 140),
),
'dark': (
'background-color': rgb(51, 46, 46),
'border-color': rgb(232, 232, 232),
),
),
$note
@ -349,109 +460,166 @@ $badges: () !default;
$badges: map-merge(
(
'primary': (
'background-color': hsl(217, 88.8%, 90%),
'text-color': hsl(217, 88.8%, 35%),
'icon-color': hsl(217, 88.8%, 65%),
'border-color': hsl(217, 88.8%, 85%),
'background-color': rgb(223, 231, 246),
'text-color': rgb(44, 88, 160),
'icon-color': rgb(55, 111, 200),
'border-color': rgb(199, 214, 240),
),
'secondary': (
'background-color': hsl(277, 98%, 90%),
'text-color': hsl(277, 98%, 35%),
'icon-color': hsl(277, 98%, 55%),
'border-color': hsl(277, 98%, 85%),
'background-color': rgb(235, 237, 239),
'text-color': rgb(64, 70, 79),
'icon-color': rgb(86, 94, 108),
'border-color': rgb(218, 222, 225),
),
'success': (
'background-color': hsl(144, 70%, 87%),
'text-color': hsl(144, 70%, 15%),
'icon-color': hsl(144, 70%, 35%),
'border-color': hsl(144, 70%, 77%),
'background-color': rgb(214, 240, 224),
'text-color': rgb(13, 104, 50),
'icon-color': rgb(19, 150, 71),
'border-color': rgb(192, 231, 208),
),
'danger': (
'background-color': hsl(350, 90.3%, 92%),
'text-color': hsl(350, 90.3%, 25%),
'icon-color': hsl(350, 90.3%, 55%),
'border-color': hsl(350, 90.3%, 87%),
'background-color': rgb(249, 225, 229),
'text-color': rgb(175, 35, 58),
'icon-color': rgb(214, 46, 74),
'border-color': rgb(244, 200, 207),
),
'warning': (
'background-color': hsl(40, 100%, 88%),
'text-color': hsl(40, 80%, 15%),
'icon-color': hsl(40, 100%, 40%),
'border-color': hsl(40, 100%, 80%),
'background-color': rgb(251, 240, 218),
'text-color': rgb(115, 81, 13),
'icon-color': rgb(161, 113, 18),
'border-color': rgb(249, 228, 190),
),
'info': (
'background-color': hsl(195, 83.3%, 90%),
'text-color': hsl(195, 83.3%, 18%),
'icon-color': hsl(195, 83.3%, 45%),
'border-color': hsl(195, 83.3%, 85%),
'background-color': rgb(222, 241, 247),
'text-color': rgb(28, 101, 125),
'icon-color': rgb(38, 134, 166),
'border-color': rgb(198, 230, 241),
),
'light': (
'background-color': hsl(0, 0%, 96%),
'text-color': hsl(0, 0%, 25%),
'icon-color': hsl(0, 0%, 55%),
'border-color': hsl(0, 0%, 88%),
'background-color': rgb(245, 245, 245),
'text-color': rgb(79, 79, 79),
'icon-color': rgb(140, 140, 140),
'border-color': rgb(230, 230, 230),
),
'dark': (
'background-color': hsl(0, 0%, 16%),
'text-color': hsl(0, 0%, 96%),
'icon-color': hsl(0, 0%, 85%),
'border-color': hsl(0, 0%, 20%),
'background-color': rgb(51, 46, 46),
'text-color': rgb(245, 245, 245),
'icon-color': rgb(232, 232, 232),
'border-color': rgb(68, 60, 60),
),
),
$badges
);
// scss-docs-end badges-colors-map
// scss-docs-start alerts-colors-map
$alerts: () !default;
$alerts: map-merge(
(
'primary': (
'background-color': rgb(223, 231, 246),
'text-color': rgb(44, 88, 160),
'icon-color': rgb(55, 111, 200),
'border-color': rgb(199, 214, 240),
),
'secondary': (
'background-color': rgb(235, 237, 239),
'text-color': rgb(64, 70, 79),
'icon-color': rgb(86, 94, 108),
'border-color': rgb(218, 222, 225),
),
'success': (
'background-color': rgb(214, 240, 224),
'text-color': rgb(13, 104, 50),
'icon-color': rgb(19, 150, 71),
'border-color': rgb(192, 231, 208),
),
'danger': (
'background-color': rgb(249, 225, 229),
'text-color': rgb(175, 35, 58),
'icon-color': rgb(214, 46, 74),
'border-color': rgb(244, 200, 207),
),
'warning': (
'background-color': rgb(251, 240, 218),
'text-color': rgb(115, 81, 13),
'icon-color': rgb(161, 113, 18),
'border-color': rgb(249, 228, 190),
),
'info': (
'background-color': rgb(222, 241, 247),
'text-color': rgb(28, 101, 125),
'icon-color': rgb(38, 134, 166),
'border-color': rgb(198, 230, 241),
),
'light': (
'background-color': rgb(245, 245, 245),
'text-color': rgb(79, 79, 79),
'icon-color': rgb(140, 140, 140),
'border-color': rgb(230, 230, 230),
),
'dark': (
'background-color': rgb(51, 46, 46),
'text-color': rgb(245, 245, 245),
'icon-color': rgb(232, 232, 232),
'border-color': rgb(68, 60, 60),
),
),
$alerts
);
// scss-docs-end alerts-colors-map
// scss-docs-start toasts-colors-map
$toasts: () !default;
$toasts: map-merge(
(
'primary': (
'background-color': hsl(217, 88.8%, 90%),
'text-color': hsl(217, 88.8%, 35%),
'icon-color': hsl(217, 88.8%, 65%),
'border-color': hsl(217, 88.8%, 87%),
'background-color': rgb(223, 231, 246),
'text-color': rgb(44, 88, 160),
'icon-color': rgb(55, 111, 200),
'border-color': rgb(199, 214, 240),
),
'secondary': (
'background-color': hsl(277, 98%, 90%),
'text-color': hsl(277, 98%, 35%),
'icon-color': hsl(277, 98%, 55%),
'border-color': hsl(277, 98%, 87%),
'background-color': rgb(235, 237, 239),
'text-color': rgb(64, 70, 79),
'icon-color': rgb(86, 94, 108),
'border-color': rgb(218, 222, 225),
),
'success': (
'background-color': hsl(144, 70%, 87%),
'text-color': hsl(144, 70%, 15%),
'icon-color': hsl(144, 70%, 35%),
'border-color': hsl(144, 70%, 81%),
'background-color': rgb(214, 240, 224),
'text-color': rgb(13, 104, 50),
'icon-color': rgb(19, 150, 71),
'border-color': rgb(192, 231, 208),
),
'danger': (
'background-color': hsl(350, 90.3%, 92%),
'text-color': hsl(350, 90.3%, 25%),
'icon-color': hsl(350, 90.3%, 55%),
'border-color': hsl(350, 90.3%, 89%),
'background-color': rgb(249, 225, 229),
'text-color': rgb(175, 35, 58),
'icon-color': rgb(214, 46, 74),
'border-color': rgb(244, 200, 207),
),
'warning': (
'background-color': hsl(40, 100%, 88%),
'text-color': hsl(40, 80%, 15%),
'icon-color': hsl(40, 100%, 40%),
'border-color': hsl(40, 100%, 82%),
'background-color': rgb(251, 240, 218),
'text-color': rgb(115, 81, 13),
'icon-color': rgb(161, 113, 18),
'border-color': rgb(249, 228, 190),
),
'info': (
'background-color': hsl(195, 83.3%, 90%),
'text-color': hsl(195, 83.3%, 18%),
'icon-color': hsl(195, 83.3%, 45%),
'border-color': hsl(195, 83.3%, 85%),
'background-color': rgb(222, 241, 247),
'text-color': rgb(28, 101, 125),
'icon-color': rgb(38, 134, 166),
'border-color': rgb(198, 230, 241),
),
'light': (
'background-color': hsl(0, 0%, 96%),
'text-color': hsl(0, 0%, 25%),
'icon-color': hsl(0, 0%, 55%),
'border-color': hsl(0, 0%, 90%),
'background-color': rgb(245, 245, 245),
'text-color': rgb(79, 79, 79),
'icon-color': rgb(140, 140, 140),
'border-color': rgb(230, 230, 230),
),
'dark': (
'background-color': hsl(0, 0%, 16%),
'text-color': hsl(0, 0%, 96%),
'icon-color': hsl(0, 0%, 85%),
'border-color': hsl(0, 0%, 13%),
'background-color': rgb(51, 46, 46),
'text-color': rgb(245, 245, 245),
'icon-color': rgb(232, 232, 232),
'border-color': rgb(68, 60, 60),
),
),
$toasts
@ -559,8 +727,8 @@ $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-box-shadow: 0 4px 9px -4px rgba(0, 0, 0, 0.35) !default;
$btn-hover-box-shadow: 0 8px 9px -4px rgba(0, 0, 0, 0.15), 0 4px 18px 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;
@ -594,6 +762,10 @@ $btn-padding-bottom-sm: 0.3125rem !default;
$btn-padding-right-sm: 1rem !default;
$btn-padding-left-sm: 1rem !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;
$btn-link-bgc: #f5f5f5 !default;
$btn-rounded-border-radius: 10rem !default;
@ -632,6 +804,12 @@ $fixed-action-btn-bottom: 2.1875rem !default;
$fixed-action-btn-padding-top: 0.9375rem !default;
$fixed-action-btn-li-margin-bottom: 1.5rem !default;
$btn-contextual-box-shadow: 0 4px 9px -4px !default;
$btn-contextual-box-shadow-state-first-part: 0 8px 9px -4px !default;
$btn-contextual-box-shadow-state-second-part: 0 4px 18px 0 !default;
$btn-secondary-hover-focus-bgc: shade-color(#e3ebf7, 3%) !default;
$btn-secondary-active-bgc: shade-color(#e3ebf7, 6%) !default;
// Button group
//
// Material styling for group of buttons
@ -902,7 +1080,6 @@ $zindex-tooltip: 1090 !default;
$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;
@ -917,7 +1094,14 @@ $nav-pills-link-padding-x: $nav-tabs-link-padding-x !default;
$nav-pills-link-line-height: 1 !default;
$nav-pills-link-background-color: $nav-tabs-link-hover-background-color !default;
$nav-pills-link-font-weight: $nav-tabs-link-font-weight !default;
$nav-tabs-link-color: rgba(0, 0, 0, 0.55) !default;
$nav-tabs-link-hover-bgc: #f7f7f7 !default;
$nav-pills-link-color: $nav-tabs-link-color !default;
$nav-pills-link-hover-bgc: $nav-tabs-link-hover-bgc !default;
$nav-pills-link-active-bgc: #e3ebf7 !default;
$nav-pills-link-active-color: #285192 !default;
// Navbar
@ -965,6 +1149,11 @@ $pagination-circle-lg-padding-right: 1.399415rem !default;
$pagination-circle-sm-padding-left: 0.696rem !default;
$pagination-circle-sm-padding-right: 0.688rem !default;
$page-item-active-link-bgc: #e3ebf7 !default;
$page-item-active-link-color: #285192 !default;
$page-item-active-link-box-shadow: 0 4px 9px -4px #e3ebf7 !default;
$page-item-active-link-font-weight: 500 !default;
// Cards
$card-spacer-y: 1.5rem !default;
@ -987,6 +1176,11 @@ $accordion-button-active-bg: $white !default;
$accordion-button-active-color: $primary !default;
$accordion-button-focus-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125) !default;
$accordion-border-radius: $border-radius-xl;
$accordion-flush-button-box-shadow: inset 0 -2px 0 #f5f5f5 !default;
$accordion-flush-item-border-bottom: 2px solid #f5f5f5 !default;
$accordion-borderless-button-border-radius: 0.5rem !default;
$accordion-borderless-button-bgc: rgb(223, 231, 246) !default;
$accordion-borderless-button-color: rgb(44, 88, 160) !default;
// Tooltips
@ -1054,6 +1248,19 @@ $list-group-border-radius: $border-radius-xl !default;
$list-group-item-padding-x: 1.5rem !default;
$list-group-color: $body-color !default;
$list-group-light-item-py: 1rem !default;
$list-group-light-item-border: 2px solid hsl(0, 0%, 96%) !default;
$list-group-light-item-border-width: 2px !default;
$list-group-light-active-border-radius: 0.5rem !default;
$list-group-light-active-bgc: hsl(217, 88.2%, 90%) !default;
$list-group-light-active-color: hsl(217, 88.8%, 35.1%) !default;
$list-group-small-item-py: 0.5 !default;
$list-group-item-active-bgc: rgb(223, 231, 246) !default;
$list-group-item-active-color: rgb(44, 88, 160) !default;
$list-group-item-active-border-color: $list-group-item-active-bgc !default;
// Carousel
$carousel-control-prev-icon-bg: none;
@ -1112,8 +1319,22 @@ $table-cell-padding-y-sm: 0.5rem !default;
$table-cell-padding-x-sm: $table-cell-padding-x !default;
$table-striped-bg: rgba(0, 0, 0, 0.02) !default;
$table-hover-bg: rgba(0, 0, 0, 0.025) !default;
$table-bg-scale: -80% !default;
// scss-docs-start table-loop
$table-variants: (
'primary': shift-color($primary, $table-bg-scale),
'secondary': shift-color($secondary, $table-bg-scale),
'success': shift-color($success, $table-bg-scale),
'info': shift-color($info, $table-bg-scale),
'warning': shift-color($warning, $table-bg-scale),
'danger': shift-color($danger, $table-bg-scale),
'light': $light,
'dark': $dark,
) !default;
// scss-docs-end table-loop
// Select
$form-select-transition: all 0.2s linear;
$form-select-focus-border-color: #1266f1;
$form-select-focus-border-box-shadow: inset 0px 0px 0px 1px #1266f1;
$form-select-transition: all 0.2s linear !default;
$form-select-focus-border-color: $primary !default;
$form-select-focus-border-box-shadow: inset 0px 0px 0px 1px $primary !default;

View File

@ -11,8 +11,8 @@
&:focus {
box-shadow: none;
transition: all 0.1s linear;
border-color: #1266f1;
box-shadow: inset 0px 0px 0px 1px #1266f1;
border-color: $primary;
box-shadow: inset 0px 0px 0px 1px $primary;
}
&.form-control-sm {
font-size: 0.775rem;