From f24ab3e7ad57c21d82597b42e053ec8555a869e0 Mon Sep 17 00:00:00 2001 From: idzark Date: Mon, 9 Jan 2023 10:08:51 +0100 Subject: [PATCH] Release 4.0.0 --- CHANGELOG.md | 48 ++ README.md | 4 +- README.txt | 2 +- package.json | 4 +- projects/mdb-angular-ui-kit/CHANGELOG.md | 48 ++ .../accordion/accordion-item.component.ts | 1 + .../accordion/accordion.component.ts | 16 + .../accordion/accordion.spec.ts | 14 +- .../assets/scss/bootstrap/_functions.scss | 2 +- .../scss/bootstrap/forms/_form-check.scss | 2 +- .../assets/scss/free/_accordion.scss | 27 +- .../assets/scss/free/_alert.scss | 19 + .../assets/scss/free/_badge.scss | 10 +- .../assets/scss/free/_buttons.scss | 186 +++++++- .../assets/scss/free/_carousel.scss | 4 - .../assets/scss/free/_dropdown.scss | 56 +++ .../assets/scss/free/_list-group.scss | 37 +- .../assets/scss/free/_modal.scss | 2 + .../assets/scss/free/_nav.scss | 7 +- .../assets/scss/free/_pagination.scss | 6 +- .../assets/scss/free/_popover.scss | 6 + .../assets/scss/free/_range.scss | 2 +- .../assets/scss/free/_ripple.scss | 6 +- .../assets/scss/free/_scrollspy.scss | 8 + .../assets/scss/free/_shadows.scss | 17 - .../assets/scss/free/_toasts.scss | 16 +- .../assets/scss/free/_tooltip.scss | 14 + .../assets/scss/free/_type.scss | 8 +- .../assets/scss/free/_utilities.scss | 11 - .../assets/scss/free/_variables.scss | 411 ++++++++++++++---- .../assets/scss/free/forms/_form-check.scss | 1 + .../assets/scss/free/forms/_form-control.scss | 71 +-- .../assets/scss/free/forms/_form-select.scss | 10 + .../assets/scss/free/forms/_input-group.scss | 2 +- .../assets/scss/free/forms/_validation.scss | 52 +++ .../assets/scss/mdb.free.scss | 3 +- .../mdb-angular-ui-kit/assets/scss/mdb.scss | 2 + .../carousel/carousel.component.ts | 3 + .../dropdown/dropdown.directive.ts | 3 +- .../forms/form-control.component.ts | 5 +- projects/mdb-angular-ui-kit/package.json | 12 +- .../schematics/ng-add/index.ts | 2 +- 42 files changed, 943 insertions(+), 217 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c636cdf5..27409dae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,50 @@ +## 4.0.0 (09.01.2023) + +### Design updates: + +Our basic color palette has been updated. We toned down our colors to be less flashy and more elegant and subtle. This affects virtually all of our components, so be aware of this before upgrading your project to v4.0.0. + +Read [colors docs](https://mdbootstrap.com/docs/angular/content-styles/colors/) to learn more about new palette. + +### Breaking changes: + +- Added support for Angular 15, this Angular version is now required, +- Improved [buttons](https://mdbootstrap.com/docs/angular/components/buttons/) +- Improved existing [accordion](https://mdbootstrap.com/docs/angular/components/accordion/) and added new examples +- Improved [stepper](https://mdbootstrap.com/docs/angular/components/stepper/) design +- Improved [badges](https://mdbootstrap.com/docs/angular/components/badges/) design and added new examples +- Improved [popovers](https://mdbootstrap.com/docs/angular/components/popovers/) and [popconfirm](https://mdbootstrap.com/docs/angular/components/popconfirm/) design +- Removed default configuration of `chartjs-plugin-datalabels` from [charts](https://mdbootstrap.com/docs/angular/data/charts/), all plugins must be now registered before use + +### Fixes and improvements: + +- Resolved problem with [scrollbar](https://mdbootstrap.com/docs/angular/methods/scrollbar/) initialization on element with a `mdbScrollbar` directive +- Removed unnecessary border animation on initialization of `mdb-form-control` component +- Resolved problem with global registration of controllers and plugins in [charts](https://mdbootstrap.com/docs/angular/data/charts/) +- Improved types in `mdbChart` directive inputs +- Added some fixes to the [transfer plugin](https://mdbootstrap.com/docs/angular/plugins/transfer/) + - Improved 'select all' option implementation + - Resolved problems with value updates in search bar input + - Resolved problems with component view updates when using pagination +- Improved theme styles in the following components: + - List group + - Pagination + - Datepicker + +### New: + +- Addew new [color picker plugin](https://mdbootstrap.com/docs/angular/plugins/color-picker/) plugin +- Addew new [multi item carousel plugin](https://mdbootstrap.com/docs/angular/plugins/multi-item-carousel/) +- Addew new [ecommerce gallery plugin](https://mdbootstrap.com/docs/angular/plugins/ecommerce-gallery/) +- Addew new `[borderless]` input to [accordion](https://mdbootstrap.com/docs/angular/components/accordion/) +- Added new `[withPush]` input to [dropdown](https://mdbootstrap.com/docs/angular/components/dropdown/) +- Added new `[plugins]` input to [charts](https://mdbootstrap.com/docs/angular/data/charts/) +- Added public access to the chart instance in `mdbChart` directive +- Added new `[ofText]` input to [datatables](https://mdbootstrap.com/docs/angular/data/datatables/) +- Added new `[titleSource]` and `[titleTarget]` inputs to [transfer plugin](https://mdbootstrap.com/docs/angular/plugins/transfer/) + +--- + ## 3.0.1 (05.12.2022) ### Fixes and improvements: @@ -19,6 +66,7 @@ ### New: +- Addew new [color picker plugin](https://mdbootstrap.com/docs/angular/plugins/color-picker/) - Addew new [scroll status plugin](https://mdbootstrap.com/docs/angular/plugins/scroll-status/) --- diff --git a/README.md b/README.md index d0889076..3a0894c7 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -Bootstrap 5 & Angular 14 UI KIT - 700+ components, MIT license, simple installation. +Bootstrap 5 & Angular 15 UI KIT - 700+ components, MIT license, simple installation. MDB is a collection of free Bootstrap templates, themes, design tools & resources. @@ -17,7 +17,7 @@ One click setup! MDB GO allows you to create a WordPress page with a single clic Regardless whether you want to create a Travel Blog or an e-commerce shop to sell your product you can easily do that. You can even combine both into single page. -## About Material Design for Bootstrap 5 & Angular 14 +## About Material Design for Bootstrap 5 & Angular 15

Created by Downloads diff --git a/README.txt b/README.txt index b48c24d8..ae0d05cf 100644 --- a/README.txt +++ b/README.txt @@ -1,6 +1,6 @@ MDB 5 Angular -Version: FREE 3.0.0 +Version: FREE 4.0.0 Documentation: https://mdbootstrap.com/docs/angular/ diff --git a/package.json b/package.json index a9c0b2f9..a5a1b02c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mdb-angular-ui-kit-free", - "version": "3.0.1", + "version": "4.0.0", "scripts": { "ng": "ng", "start": "ng serve", @@ -31,7 +31,7 @@ "zone.js": "~0.11.4" }, "devDependencies": { - "@angular-builders/jest": "13.0.3", + "@angular-builders/jest": "15.0.0", "@angular-devkit/build-angular": "^15.0.2", "@angular/cli": "^15.0.2", "@angular/compiler-cli": "^15.0.2", diff --git a/projects/mdb-angular-ui-kit/CHANGELOG.md b/projects/mdb-angular-ui-kit/CHANGELOG.md index c636cdf5..27409dae 100644 --- a/projects/mdb-angular-ui-kit/CHANGELOG.md +++ b/projects/mdb-angular-ui-kit/CHANGELOG.md @@ -1,3 +1,50 @@ +## 4.0.0 (09.01.2023) + +### Design updates: + +Our basic color palette has been updated. We toned down our colors to be less flashy and more elegant and subtle. This affects virtually all of our components, so be aware of this before upgrading your project to v4.0.0. + +Read [colors docs](https://mdbootstrap.com/docs/angular/content-styles/colors/) to learn more about new palette. + +### Breaking changes: + +- Added support for Angular 15, this Angular version is now required, +- Improved [buttons](https://mdbootstrap.com/docs/angular/components/buttons/) +- Improved existing [accordion](https://mdbootstrap.com/docs/angular/components/accordion/) and added new examples +- Improved [stepper](https://mdbootstrap.com/docs/angular/components/stepper/) design +- Improved [badges](https://mdbootstrap.com/docs/angular/components/badges/) design and added new examples +- Improved [popovers](https://mdbootstrap.com/docs/angular/components/popovers/) and [popconfirm](https://mdbootstrap.com/docs/angular/components/popconfirm/) design +- Removed default configuration of `chartjs-plugin-datalabels` from [charts](https://mdbootstrap.com/docs/angular/data/charts/), all plugins must be now registered before use + +### Fixes and improvements: + +- Resolved problem with [scrollbar](https://mdbootstrap.com/docs/angular/methods/scrollbar/) initialization on element with a `mdbScrollbar` directive +- Removed unnecessary border animation on initialization of `mdb-form-control` component +- Resolved problem with global registration of controllers and plugins in [charts](https://mdbootstrap.com/docs/angular/data/charts/) +- Improved types in `mdbChart` directive inputs +- Added some fixes to the [transfer plugin](https://mdbootstrap.com/docs/angular/plugins/transfer/) + - Improved 'select all' option implementation + - Resolved problems with value updates in search bar input + - Resolved problems with component view updates when using pagination +- Improved theme styles in the following components: + - List group + - Pagination + - Datepicker + +### New: + +- Addew new [color picker plugin](https://mdbootstrap.com/docs/angular/plugins/color-picker/) plugin +- Addew new [multi item carousel plugin](https://mdbootstrap.com/docs/angular/plugins/multi-item-carousel/) +- Addew new [ecommerce gallery plugin](https://mdbootstrap.com/docs/angular/plugins/ecommerce-gallery/) +- Addew new `[borderless]` input to [accordion](https://mdbootstrap.com/docs/angular/components/accordion/) +- Added new `[withPush]` input to [dropdown](https://mdbootstrap.com/docs/angular/components/dropdown/) +- Added new `[plugins]` input to [charts](https://mdbootstrap.com/docs/angular/data/charts/) +- Added public access to the chart instance in `mdbChart` directive +- Added new `[ofText]` input to [datatables](https://mdbootstrap.com/docs/angular/data/datatables/) +- Added new `[titleSource]` and `[titleTarget]` inputs to [transfer plugin](https://mdbootstrap.com/docs/angular/plugins/transfer/) + +--- + ## 3.0.1 (05.12.2022) ### Fixes and improvements: @@ -19,6 +66,7 @@ ### New: +- Addew new [color picker plugin](https://mdbootstrap.com/docs/angular/plugins/color-picker/) - Addew new [scroll status plugin](https://mdbootstrap.com/docs/angular/plugins/scroll-status/) --- diff --git a/projects/mdb-angular-ui-kit/accordion/accordion-item.component.ts b/projects/mdb-angular-ui-kit/accordion/accordion-item.component.ts index 4ba28176..51f9ef2c 100644 --- a/projects/mdb-angular-ui-kit/accordion/accordion-item.component.ts +++ b/projects/mdb-angular-ui-kit/accordion/accordion-item.component.ts @@ -63,6 +63,7 @@ export class MdbAccordionItemComponent implements OnInit { @Output() itemHidden: EventEmitter = new EventEmitter(); @HostBinding('class.accordion-item') accordionItem = true; + @HostBinding('class.d-block') accordionItemDisplayBlock = true; ngOnInit(): void { this._isInitialized = true; diff --git a/projects/mdb-angular-ui-kit/accordion/accordion.component.ts b/projects/mdb-angular-ui-kit/accordion/accordion.component.ts index 9fb3711e..5894e773 100644 --- a/projects/mdb-angular-ui-kit/accordion/accordion.component.ts +++ b/projects/mdb-angular-ui-kit/accordion/accordion.component.ts @@ -20,6 +20,15 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; export class MdbAccordionComponent implements AfterContentInit { @ContentChildren(MdbAccordionItemComponent) items: QueryList; + @Input() + get borderless(): boolean { + return this._borderless; + } + set borderless(value: boolean) { + this._borderless = coerceBooleanProperty(value); + } + private _borderless = false; + @Input() get flush(): boolean { return this._flush; @@ -39,6 +48,12 @@ export class MdbAccordionComponent implements AfterContentInit { private _multiple = false; @HostBinding('class.accordion') accordion = true; + + @HostBinding('class.accordion-borderless') + get addBorderlessClass(): boolean { + return this.borderless; + } + @HostBinding('class.accordion-flush') get addFlushClass(): boolean { return this.flush; @@ -69,6 +84,7 @@ export class MdbAccordionComponent implements AfterContentInit { } } + static ngAcceptInputType_borderless: BooleanInput; static ngAcceptInputType_flush: BooleanInput; static ngAcceptInputType_multiple: BooleanInput; } diff --git a/projects/mdb-angular-ui-kit/accordion/accordion.spec.ts b/projects/mdb-angular-ui-kit/accordion/accordion.spec.ts index 2c07a9ff..3412e923 100644 --- a/projects/mdb-angular-ui-kit/accordion/accordion.spec.ts +++ b/projects/mdb-angular-ui-kit/accordion/accordion.spec.ts @@ -6,7 +6,7 @@ import { MdbAccordionModule } from './accordion.module'; const ANIMATION_TIME = 350; // animation time from collapse directive const template = ` - + Accordion Item #1 @@ -53,6 +53,7 @@ class TestAccordionComponent { @ViewChildren(MdbAccordionItemComponent) _accordionItems: QueryList; multiple = false; flush = false; + borderless = false; get accordionItems(): MdbAccordionItemComponent[] { return this._accordionItems.toArray(); @@ -172,6 +173,17 @@ describe('MDB Accordion', () => { expect(accordion.classList).toContain('accordion-flush'); }); + it('should add accordion-borderless class if borderless is set to true', () => { + const accordion = document.querySelector('.accordion'); + + expect(accordion.classList).not.toContain('accordion-borderless'); + + component.borderless = true; + fixture.detectChanges(); + + expect(accordion.classList).toContain('accordion-borderless'); + }); + it('should emit correct events on item collapse and expand', fakeAsync(() => { const item = component.accordionItems[0]; diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss index e011dbeb..b0db3991 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss @@ -252,7 +252,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0 // Return opaque color // opaque(#fff, rgba(0, 0, 0, .5)) => #808080 @function opaque($background, $foreground) { - @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100); + @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%); } // scss-docs-start color-functions diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss index bc6378d1..ac6548c5 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss @@ -25,7 +25,7 @@ background-size: contain; border: $form-check-input-border; appearance: none; - color-adjust: exact; // Keep themed appearance for print + print-color-adjust: exact; // Keep themed appearance for print @include transition($form-check-transition); &[type='checkbox'] { diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_accordion.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_accordion.scss index 3fb87147..7fa2a327 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_accordion.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_accordion.scss @@ -1,9 +1,5 @@ // Accordion -.accordion-item { - display: block; -} - .accordion-button { &:not(.collapsed) { &:focus { @@ -17,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; + } + } + } +} diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_alert.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_alert.scss index a33b51bf..0a6f23f2 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_alert.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_alert.scss @@ -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%); + } + } + } +} diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_badge.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_badge.scss index 9f7ee694..345ad551 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_badge.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_badge.scss @@ -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); } } } diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_buttons.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_buttons.scss index e426d267..628ad523 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_buttons.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_buttons.scss @@ -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,9 +234,44 @@ // 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: map-get($value, text-color); + border-color: map-get($value, border-color); + background-color: rgba(map-get($value, background-color), 0.02); + } } } @@ -177,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, @@ -189,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; } } @@ -206,6 +342,7 @@ &.disabled, fieldset:disabled & { box-shadow: none; + color: $link-color; } } @@ -328,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; + } +} diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_carousel.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_carousel.scss index 1a664415..bcd30739 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_carousel.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_carousel.scss @@ -1,7 +1,3 @@ -mdb-carousel { - display: block; -} - .carousel-control-prev-icon { &::after { content: '\f053'; diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_dropdown.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_dropdown.scss index 98bb5494..cafbf94d 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_dropdown.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_dropdown.scss @@ -43,6 +43,13 @@ } } } + + // &.animation { + // display: block; + // /* Speed up animations */ + // animation-duration: $dropdown-menu-animated-animation-duration; + // animation-timing-function: $dropdown-menu-animated-animation-timing-function; + // } } .dropdown-item { @@ -69,7 +76,56 @@ } } +// .animation { +// animation-duration: 1s; +// animation-fill-mode: both; +// padding: auto; +// } +// +// @media (prefers-reduced-motion) { +// .animation { +// transition: none !important; +// animation: unset !important; +// } +// } + +// @keyframes fade-in { +// from { +// opacity: 0; +// } + +// to { +// opacity: 1; +// } +// } + +// .fade-in { +// animation-name: fade-in; +// } + +// @keyframes fade-out { +// from { +// opacity: 1; +// } + +// to { +// opacity: 0; +// } +// } + +// .fade-out { +// animation-name: fade-out; +// } + .dropdown-divider { border-top: 2px solid $dropdown-divider-bg; opacity: 1; } + +// .dropdown-menu { +// INPUT:not(:-webkit-autofill), +// SELECT:not(:-webkit-autofill), +// TEXTAREA:not(:-webkit-autofill) { +// animation-name: none !important; +// } +// } diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_list-group.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_list-group.scss index a1e9eeb2..649dc974 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_list-group.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_list-group.scss @@ -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); + } } } diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_modal.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_modal.scss index c252c4fa..e141009b 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_modal.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_modal.scss @@ -4,6 +4,7 @@ box-shadow: $modal-box-shadow; } +// Additional MDB Angular styles .modal-open { overflow: hidden; } @@ -34,3 +35,4 @@ overflow-y: auto; } } +// Additional MDB Angular styles \ No newline at end of file diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_nav.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_nav.scss index 43fb796c..7ede488f 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_nav.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_nav.scss @@ -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; } } diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_pagination.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_pagination.scss index 9e740cc9..5aecc8f7 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_pagination.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_pagination.scss @@ -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 { diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_popover.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_popover.scss index 02b53262..d9a659aa 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_popover.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_popover.scss @@ -3,8 +3,14 @@ .popover { border: 0; box-shadow: $popover-box-shadow; + // Additional MDB Angular styles position: unset; opacity: 0; + // Additional MDB Angular styles + + // .popover-arrow { + // display: none; + // } } .popover-header { diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_range.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_range.scss index fd70d926..f155d188 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_range.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_range.scss @@ -25,7 +25,7 @@ top: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); - background: #1266f1; + background: $primary; z-index: -1; } diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_ripple.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_ripple.scss index 3e8877ef..8c8698ce 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_ripple.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_ripple.scss @@ -31,7 +31,11 @@ @include ripple-variant(white); } -@each $color, $value in $theme-colors { +// .input-wrapper .ripple-wave { +// @include ripple-variant(white); +// } + +@each $color, $value in $ripple { .ripple-surface-#{$color} { .ripple-wave { @include ripple-variant($value); diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_scrollspy.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_scrollspy.scss index 3163e79a..1d78c0a9 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_scrollspy.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_scrollspy.scss @@ -1,7 +1,10 @@ // Scrollspy + +// Additional MDB Angular styles .scrollspy-link { cursor: pointer; } + // Additional MDB Angular styles .nav-pills { &.menu-sidebar { @@ -28,5 +31,10 @@ $scrollspy-menu-sidebar-active-border-color; border-radius: 0; } + + // .collapsible-scrollspy ~ .nav { + // transition: height 0.5s ease; + // flex-wrap: nowrap; + // } } } diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_shadows.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_shadows.scss index 266dee47..0c011bec 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_shadows.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_shadows.scss @@ -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; -// } -// } diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss index d0ce34f7..76a643db 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss @@ -4,15 +4,19 @@ background-color: $toast-background-color; border: 0; box-shadow: $toast-box-shadow; + // Additional MDB Angular styles margin-bottom: 10px; + // Additional MDB Angular styles .btn-close { width: 1.3em; } + // Additional MDB Angular styles &:not(.show) { display: block; } + // Additional MDB Angular styles } .toast-header { @@ -38,14 +42,16 @@ z-index: $zindex-toast; } +// Additional MDB Angular styles .toast:not(.showing):not(.show) { opacity: 1; } +// Additional MDB Angular styles -@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); } } diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_tooltip.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_tooltip.scss index 2603da0c..02ac31f9 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_tooltip.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_tooltip.scss @@ -1,14 +1,28 @@ // Tooltip +// .tooltip { +// &.show { +// opacity: 1; +// } +// +// .tooltip-arrow { +// display: none; +// } +// } + .tooltip-inner { color: $tooltip-inner-color; padding: $tooltip-inner-padding-y $tooltip-inner-padding-x; font-size: $tooltip-inner-font-size; background-color: $tooltip-inner-background-color; border-radius: $tooltip-inner-border-radius; + // Additional MDB Angular styles opacity: 0; + // Additional MDB Angular styles } +// Additional MDB Angular styles .notification-open .cdk-overlay-container { z-index: $zindex-toast; } +// Additional MDB Angular styles diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_type.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_type.scss index 75304746..c7ba7781 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_type.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_type.scss @@ -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); } } diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_utilities.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_utilities.scss index 404b374b..f9c0e088 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_utilities.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_utilities.scss @@ -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; - } -} diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss index 0c024ad9..9ca1877a 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss @@ -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 note-colors-map -$note: () !default; -$note: map-merge( +// 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': ( - 'bgc': lighten($primary, 43%), + 'text-color': $primary, 'border-color': $primary, + 'background-color': $primary, ), 'secondary': ( - 'bgc': lighten($secondary, 33%), - 'border-color': $secondary, + 'text-color': #285192, + 'border-color': #e3ebf7, + 'background-color': #e3ebf7, ), 'success': ( - 'bgc': lighten($success, 53%), + 'text-color': $success, 'border-color': $success, + 'background-color': $success, ), 'danger': ( - 'bgc': lighten($danger, 36%), + 'text-color': $danger, 'border-color': $danger, + 'background-color': $danger, ), 'warning': ( - 'bgc': lighten($warning, 42%), + 'text-color': $warning, 'border-color': $warning, + 'background-color': $warning, ), 'info': ( - 'bgc': lighten($info, 36%), + 'text-color': $info, 'border-color': $info, + 'background-color': $info, ), 'light': ( - 'bgc': $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': ( + 'background-color': rgb(223, 231, 246), + 'border-color': rgb(55, 111, 200), + ), + 'secondary': ( + 'background-color': rgb(235, 237, 239), + 'border-color': rgb(86, 94, 108), + ), + 'success': ( + 'background-color': rgb(214, 240, 224), + 'border-color': rgb(19, 150, 71), + ), + 'danger': ( + 'background-color': rgb(249, 225, 229), + 'border-color': rgb(214, 46, 74), + ), + 'warning': ( + 'background-color': rgb(251, 240, 218), + 'border-color': rgb(161, 113, 18), + ), + 'info': ( + 'background-color': rgb(222, 241, 247), + 'border-color': rgb(38, 134, 166), + ), + 'light': ( + '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; diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-check.scss b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-check.scss index 8b9a93f2..09dce406 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-check.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-check.scss @@ -196,6 +196,7 @@ } .form-check-label { + // padding-left: 0.15rem; &:hover { cursor: pointer; } diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-control.scss b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-control.scss index cab065fd..680c4c77 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-control.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-control.scss @@ -2,10 +2,6 @@ // Material styles for form control - form outline // -mdb-form-control { - display: block; -} - .form-control { min-height: auto; padding-top: 4px; @@ -15,8 +11,8 @@ mdb-form-control { &: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; @@ -56,6 +52,7 @@ mdb-form-control { border-color: $form-notch-div-border-color; box-sizing: border-box; background: transparent; + transition: $input-transition; } .form-notch-leading { left: 0; @@ -101,35 +98,32 @@ mdb-form-control { } & .form-control:focus ~ .form-notch .form-notch-middle, & .form-control.active ~ .form-notch .form-notch-middle { - border-top: none; border-right: none; border-left: none; - transition: $input-transition; + border-top: none; } &:focus ~ .form-notch .form-notch-middle { - border-bottom: $input-focus-border-width solid; border-color: $input-focus-border-color; + box-shadow: 0 1px 0 0 $input-focus-border-color; + border-top: 1px solid transparent; } &:focus ~ .form-notch .form-notch-leading, &.active ~ .form-notch .form-notch-leading { border-right: none; - 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; + border-color: $input-focus-border-color; + box-shadow: -1px 0 0 0 $input-focus-border-color, 0 1px 0 0 $input-focus-border-color, + 0 -1px 0 0 $input-focus-border-color; } &:focus ~ .form-notch .form-notch-trailing, &.active ~ .form-notch .form-notch-trailing { border-left: none; - 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; + box-shadow: 1px 0 0 0 $input-focus-border-color, 0 -1px 0 0 $input-focus-border-color, + 0 1px 0 0 $input-focus-border-color; } &:disabled, &.disabled, @@ -233,6 +227,7 @@ mdb-form-control { border-color: $form-notch-div-border-color; box-sizing: border-box; background: transparent; + transition: $input-transition; } .form-notch-leading { left: 0; @@ -278,34 +273,32 @@ mdb-form-control { } &:focus ~ .form-notch .form-notch-middle, &.active ~ .form-notch .form-notch-middle { - border-top: none; border-right: none; border-left: none; - transition: $input-transition; + border-top: 1px solid transparent; } &:focus ~ .form-notch .form-notch-middle { - border-bottom: $input-focus-border-width solid; border-color: $input-focus-border-color; + box-shadow: 0 1px 0 0 $input-focus-border-color; + border-top: 1px solid transparent; } &:focus ~ .form-notch .form-notch-leading, &.active ~ .form-notch .form-notch-leading { border-right: none; - 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; + border-color: $input-focus-border-color; + box-shadow: -1px 0 0 0 $input-focus-border-color, 0 1px 0 0 $input-focus-border-color, + 0 -1px 0 0 $input-focus-border-color; } &:focus ~ .form-notch .form-notch-trailing, &.active ~ .form-notch .form-notch-trailing { border-left: none; - transition: $input-transition; } &:focus ~ .form-notch .form-notch-trailing { - border-top: $input-focus-border-width solid $input-focus-border-color; - border-bottom: $input-focus-border-width solid $input-focus-border-color; - border-right: $input-focus-border-width solid $input-focus-border-color; + border-color: $input-focus-border-color; + box-shadow: 1px 0 0 0 $input-focus-border-color, 0 -1px 0 0 $input-focus-border-color, + 0 1px 0 0 $input-focus-border-color; } &:disabled, &.disabled, @@ -359,15 +352,29 @@ mdb-form-control { } &:focus ~ .form-notch .form-notch-middle { border-color: $form-white-input-focus-border-color; + box-shadow: 0 1px 0 0 $form-white-input-focus-border-color; + border-top: 1px solid transparent; } &:focus ~ .form-notch .form-notch-leading { - border-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; + border-color: $form-white-input-focus-border-color; + box-shadow: -1px 0 0 0 $form-white-input-focus-border-color, + 0 1px 0 0 $form-white-input-focus-border-color, + 0 -1px 0 0 $form-white-input-focus-border-color; } &:focus ~ .form-notch .form-notch-trailing { border-color: $form-white-input-focus-border-color; + box-shadow: 1px 0 0 0 $form-white-input-focus-border-color, + 0 -1px 0 0 $form-white-input-focus-border-color, + 0 1px 0 0 $form-white-input-focus-border-color; + } + &::placeholder { + color: $form-white-placeholder-color; + } + &:disabled, + &.disabled, + &[readonly] { + background-color: $form-white-disabled-bgc; } } } -} +} \ No newline at end of file diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-select.scss b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-select.scss index 1f9b1ddb..50890dce 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-select.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-select.scss @@ -7,3 +7,13 @@ } } } + +// .form-select { +// transition: $form-select-transition; +// } + +// .form-select:focus { +// border-color: $form-select-focus-border-color; +// outline: 0; +// box-shadow: $form-select-focus-border-box-shadow; +// } diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_input-group.scss b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_input-group.scss index 80d0e429..4c190516 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_input-group.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_input-group.scss @@ -97,7 +97,7 @@ .input-group { &.input-group-lg { - .input-group-text { + .input-group-text { height: $input-group-lg-height; } } diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_validation.scss b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_validation.scss index 8c343a18..34a9453d 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_validation.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_validation.scss @@ -36,6 +36,19 @@ textarea ~ .success-message { ~ .form-notch .form-notch-trailing { border-color: $success; } + &:focus ~ .form-notch .form-notch-middle, + &.active ~ .form-notch .form-notch-middle { + border-top: 1px solid transparent; + } + &:focus ~ .form-notch .form-notch-middle { + box-shadow: 0 1px 0 0 $success; + } + &:focus ~ .form-notch .form-notch-leading { + box-shadow: -1px 0 0 0 $success, 0 1px 0 0 $success, 0 -1px 0 0 $success; + } + &:focus ~ .form-notch .form-notch-trailing { + box-shadow: 1px 0 0 0 $success, 0 -1px 0 0 $success, 0 1px 0 0 $success; + } } .form-outline .validate-error.ng-invalid.ng-dirty, @@ -48,6 +61,19 @@ textarea ~ .success-message { ~ .form-notch .form-notch-trailing { border-color: $danger; } + &:focus ~ .form-notch .form-notch-middle, + &.active ~ .form-notch .form-notch-middle { + border-top: 1px solid transparent; + } + &:focus ~ .form-notch .form-notch-middle { + box-shadow: 0 1px 0 0 $danger; + } + &:focus ~ .form-notch .form-notch-leading { + box-shadow: -1px 0 0 0 $danger, 0 1px 0 0 $danger, 0 -1px 0 0 $danger; + } + &:focus ~ .form-notch .form-notch-trailing { + box-shadow: 1px 0 0 0 $danger, 0 -1px 0 0 $danger, 0 1px 0 0 $danger; + } } .select.validate-success.ng-valid.ng-dirty, @@ -60,6 +86,19 @@ textarea ~ .success-message { ~ .form-notch .form-notch-trailing { border-color: $success; } + &.focused ~ .form-notch .form-notch-middle, + &.active ~ .form-notch .form-notch-middle { + border-top: 1px solid transparent; + } + &.focused ~ .form-notch .form-notch-middle { + box-shadow: 0 1px 0 0 $success; + } + &.focused ~ .form-notch .form-notch-leading { + box-shadow: -1px 0 0 0 $success, 0 1px 0 0 $success, 0 -1px 0 0 $success; + } + &.focused ~ .form-notch .form-notch-trailing { + box-shadow: 1px 0 0 0 $success, 0 -1px 0 0 $success, 0 1px 0 0 $success; + } } .select.validate-error.ng-invalid.ng-dirty, @@ -72,6 +111,19 @@ textarea ~ .success-message { ~ .form-notch .form-notch-trailing { border-color: $danger; } + &.focused ~ .form-notch .form-notch-middle, + &.active ~ .form-notch .form-notch-middle { + border-top: 1px solid transparent; + } + &.focused ~ .form-notch .form-notch-middle { + box-shadow: 0 1px 0 0 $danger; + } + &.focused ~ .form-notch .form-notch-leading { + box-shadow: -1px 0 0 0 $danger, 0 1px 0 0 $danger, 0 -1px 0 0 $danger; + } + &.focused ~ .form-notch .form-notch-trailing { + box-shadow: 1px 0 0 0 $danger, 0 -1px 0 0 $danger, 0 1px 0 0 $danger; + } } .form-check .validate-success.ng-valid.ng-dirty, diff --git a/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss b/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss index 286885df..439f6845 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss @@ -54,7 +54,6 @@ // MDB CORE @import './free/mixins'; -@import './free/utilities'; // MDB CORE COMPONENTS @import './free/root'; @@ -64,6 +63,8 @@ @import './free/shadows'; @import './free/flag'; @import './free/images'; + +// MDB ANGULAR OVERLAY Z-INDEX @import './free/overlay'; // MDB FORMS diff --git a/projects/mdb-angular-ui-kit/assets/scss/mdb.scss b/projects/mdb-angular-ui-kit/assets/scss/mdb.scss index 4805a4fb..e09ab134 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/mdb.scss +++ b/projects/mdb-angular-ui-kit/assets/scss/mdb.scss @@ -63,6 +63,8 @@ @import './free/shadows'; @import './free/flag'; @import './free/images'; + +// MDB ANGULAR OVERLAY Z-INDEX @import './free/overlay'; // MDB FORMS diff --git a/projects/mdb-angular-ui-kit/carousel/carousel.component.ts b/projects/mdb-angular-ui-kit/carousel/carousel.component.ts index bf80eda8..f1307758 100644 --- a/projects/mdb-angular-ui-kit/carousel/carousel.component.ts +++ b/projects/mdb-angular-ui-kit/carousel/carousel.component.ts @@ -7,6 +7,7 @@ import { ContentChildren, ElementRef, EventEmitter, + HostBinding, HostListener, Input, OnDestroy, @@ -124,6 +125,8 @@ export class MdbCarouselComponent implements AfterViewInit, OnDestroy { } } + @HostBinding('class.d-block') display = true; + constructor(private _elementRef: ElementRef, private _cdRef: ChangeDetectorRef) {} ngAfterViewInit(): void { diff --git a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts b/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts index b3cffb40..adca75d8 100644 --- a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts +++ b/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts @@ -63,6 +63,7 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit { @Input() closeOnOutsideClick = true; @Input() closeOnItemClick = true; @Input() closeOnEsc = true; + @Input() withPush = false; @Output() dropdownShow: EventEmitter = new EventEmitter(); @Output() dropdownShown: EventEmitter = new EventEmitter(); @@ -137,7 +138,7 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit { .flexibleConnectedTo(this._dropdownToggle) .withPositions(this._getPosition()) .withFlexibleDimensions(false) - .withPush(false); + .withPush(this.withPush); return positionStrategy; } diff --git a/projects/mdb-angular-ui-kit/forms/form-control.component.ts b/projects/mdb-angular-ui-kit/forms/form-control.component.ts index fe2bdbbf..da4a520a 100644 --- a/projects/mdb-angular-ui-kit/forms/form-control.component.ts +++ b/projects/mdb-angular-ui-kit/forms/form-control.component.ts @@ -28,6 +28,7 @@ export class MdbFormControlComponent implements AfterContentInit, OnDestroy { @ContentChild(MdbLabelDirective, { static: true, read: ElementRef }) _label: ElementRef; @HostBinding('class.form-outline') outline = true; + @HostBinding('class.d-block') display = true; get input(): HTMLInputElement { return this._formControl.input; @@ -50,7 +51,9 @@ export class MdbFormControlComponent implements AfterContentInit, OnDestroy { ngAfterContentInit(): void { if (this._label) { - this._updateBorderGap(); + setTimeout(() => { + this._updateBorderGap(); + }, 0); } else { this._renderer.addClass(this.input, 'placeholder-active'); } diff --git a/projects/mdb-angular-ui-kit/package.json b/projects/mdb-angular-ui-kit/package.json index 833e8b68..2bf0c28d 100644 --- a/projects/mdb-angular-ui-kit/package.json +++ b/projects/mdb-angular-ui-kit/package.json @@ -4,13 +4,13 @@ "homepage": "https://mdbootstrap.com/docs/b5/angular/", "author": "MDBootstrap", "license": "MIT", - "version": "3.0.1", + "version": "4.0.0", "peerDependencies": { - "@angular/common": "^14.0.0", - "@angular/core": "^14.0.0", - "@angular/animations": "^14.0.0", - "@angular/forms": "^14.0.0", - "@angular/cdk": "^14.0.0" + "@angular/common": "^15.0.0", + "@angular/core": "^15.0.0", + "@angular/animations": "^15.0.0", + "@angular/forms": "^15.0.0", + "@angular/cdk": "^15.0.0" }, "schematics": "./schematics/collection.json", "dependencies": { diff --git a/projects/mdb-angular-ui-kit/schematics/ng-add/index.ts b/projects/mdb-angular-ui-kit/schematics/ng-add/index.ts index 7c2491dc..0d4de223 100644 --- a/projects/mdb-angular-ui-kit/schematics/ng-add/index.ts +++ b/projects/mdb-angular-ui-kit/schematics/ng-add/index.ts @@ -6,7 +6,7 @@ import { addPackageToPackageJson } from './package'; // Just return the tree export function ngAdd(options: Schema): Rule { return (tree: Tree, context: SchematicContext) => { - const angularDependencyVersion = '^14.0.0'; + const angularDependencyVersion = '^15.0.0'; addPackageToPackageJson(tree, '@angular/cdk', angularDependencyVersion); addPackageToPackageJson(tree, '@angular/forms', angularDependencyVersion);