mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-25 11:04:09 +03:00
release 5.0.0
This commit is contained in:
Mikolaj Smolenski
parent
e561504aa1
commit
ed3cddbc9f
|
|
@ -1,5 +1,5 @@
|
|||
MDB5
|
||||
Version: FREE 4.4.0
|
||||
Version: FREE 5.0.0
|
||||
|
||||
Documentation:
|
||||
https://mdbootstrap.com/docs/standard/
|
||||
|
|
|
|||
8
css/mdb.dark.min.css
vendored
8
css/mdb.dark.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.dark.rtl.min.css
vendored
4
css/mdb.dark.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
10
css/mdb.min.css
vendored
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
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
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
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
top: 0;
|
||||
border-radius: 50% 50% 50% 0;
|
||||
transform: rotate(-45deg);
|
||||
background: #1266f1;
|
||||
background: $primary;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user