diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
index d532318f..dec24764 100644
--- a/demo/src/app/app.component.html
+++ b/demo/src/app/app.component.html
@@ -14,16 +14,18 @@ ngx-markdown
-
-
+
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/demo/src/app/app.component.scss b/demo/src/app/app.component.scss
index 19608ecc..fd803132 100644
--- a/demo/src/app/app.component.scss
+++ b/demo/src/app/app.component.scss
@@ -23,54 +23,58 @@ $viewport-offset-x: 16px;
display: block;
}
-.mat-tab-nav-bar--sticky {
+.mat-mdc-tab-nav-bar--sticky {
@include mat.elevation(6);
transition: box-shadow .3s ease-out;
}
-.mat-tab-nav-bar ::ng-deep {
+.mat-mdc-tab-nav-bar ::ng-deep {
position: sticky;
top: 0;
z-index: 24;
- .mat-ink-bar {
+ .mdc-tab-indicator__content--underline {
border-radius: 3px 3px 0 0;
- height: 3px;
+ border-top-width: 3px;
+ transition-duration: 500ms;
}
- .mat-tab-link {
+ .mat-mdc-tab-link {
font-size: 14px;
font-weight: 500;
+ letter-spacing: normal;
margin: 0 $viewport-offset-x;
min-width: 0;
+ opacity: 0.6;
padding: 0;
text-decoration: none;
transition: all 0.2s ease-out;
}
- .mat-tab-link:not(.mat-tab-label-active):hover {
+ .mat-mdc-tab-link:not(.mdc-tab--active):hover {
transform: translateY(-1px);
}
- .mat-tab-link:hover,
- .mat-tab-label-active {
+ .mat-mdc-tab-link:hover,
+ .mdc-tab--active {
opacity: 1;
}
- .mat-tab-link-container {
+ .mat-mdc-tab-link-container {
@include viewport-width($padding: false);
+ overflow: auto;
}
- // start - workaround for responsive tabs
- .mat-tab-header-pagination {
- display: none !important;
+ .mdc-tab__ripple {
+ opacity: 0;
}
- .mat-tab-link-container {
- overflow: auto;
+ // start - workaround for responsive tabs
+ .mat-mdc-tab-header-pagination {
+ display: none !important;
}
- .mat-tab-list {
+ .mat-mdc-tab-list {
transform: unset !important;
}
// end - workaround
@@ -93,6 +97,7 @@ $viewport-offset-x: 16px;
.outlet-wrapper {
@include viewport-width();
+ display: block;
margin-top: $viewport-offset-x;
margin-bottom: $viewport-offset-x;
position: relative;
diff --git a/demo/src/app/app.component.theme.scss b/demo/src/app/app.component.theme.scss
index ddba1d63..0e74dacf 100644
--- a/demo/src/app/app.component.theme.scss
+++ b/demo/src/app/app.component.theme.scss
@@ -11,7 +11,7 @@
background: linear-gradient(90deg, $primary-color 15%, darken($primary-color, 4%) 100%);
}
- .mat-tab-nav-bar.mat-background-primary {
+ .mat-mdc-tab-nav-bar.mat-background-primary {
background: $primary-color;
}
}
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
index 8daa2388..eb89637d 100644
--- a/demo/src/app/app.component.ts
+++ b/demo/src/app/app.component.ts
@@ -16,13 +16,13 @@ import { isTheme, Theme } from './app.models';
})
export class AppComponent implements OnInit {
- private readonly stickyClassName = 'mat-tab-nav-bar--sticky';
+ private readonly stickyClassName = 'mat-mdc-tab-nav-bar--sticky';
routes: Route[];
theme = DEFAULT_THEME;
@ViewChild('tabHeader', { read: ElementRef, static: true })
- tabHeader: ElementRef | undefined;
+ tabHeader: ElementRef | undefined;
@HostListener('document:click', ['$event'])
onDocumentClick(event: Event): void {
@@ -34,7 +34,7 @@ export class AppComponent implements OnInit {
if (this.tabHeader == null) {
return;
}
- const tabHeader = this.tabHeader.nativeElement as HTMLElement;
+ const tabHeader = this.tabHeader.nativeElement;
const tabHeaderOffset = Math.ceil(tabHeader.offsetTop);
const windowOffset = Math.ceil(window.pageYOffset);
const hasStickyClass = tabHeader.classList.contains(this.stickyClassName);
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
index b4f4fa98..c5f40a60 100644
--- a/demo/src/app/app.module.ts
+++ b/demo/src/app/app.module.ts
@@ -1,8 +1,8 @@
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule, SecurityContext } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ClipboardOptions, MarkdownModule, MarkedOptions, MarkedRenderer } from 'ngx-markdown';
diff --git a/demo/src/app/bindings/bindings.module.ts b/demo/src/app/bindings/bindings.module.ts
index 77714aae..7ba6bd32 100644
--- a/demo/src/app/bindings/bindings.module.ts
+++ b/demo/src/app/bindings/bindings.module.ts
@@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
import { MarkdownModule } from 'ngx-markdown';
import { ScrollspyNavLayoutModule } from '@shared/scrollspy-nav-layout/scrollspy-nav-layout.module';
diff --git a/demo/src/app/plugins/plugins.component.ts b/demo/src/app/plugins/plugins.component.ts
index eb2cd4ff..dbef4bfd 100644
--- a/demo/src/app/plugins/plugins.component.ts
+++ b/demo/src/app/plugins/plugins.component.ts
@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
import { ClipboardOptions, MermaidAPI } from 'ngx-markdown';
import { ClipboardButtonComponent } from '@shared/clipboard-button';
diff --git a/demo/src/app/plugins/plugins.module.ts b/demo/src/app/plugins/plugins.module.ts
index 72224cce..218f78c3 100644
--- a/demo/src/app/plugins/plugins.module.ts
+++ b/demo/src/app/plugins/plugins.module.ts
@@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
-import { MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatInputModule} from '@angular/material/input';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MarkdownModule } from 'ngx-markdown';
import { ClipboardButtonModule } from '@shared/clipboard-button';
diff --git a/demo/src/app/rerender/rerender.module.ts b/demo/src/app/rerender/rerender.module.ts
index 634376ad..54f2e554 100644
--- a/demo/src/app/rerender/rerender.module.ts
+++ b/demo/src/app/rerender/rerender.module.ts
@@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
import { MarkdownModule } from 'ngx-markdown';
import { ScrollspyNavLayoutModule } from '@shared/scrollspy-nav-layout/scrollspy-nav-layout.module';
diff --git a/demo/src/app/shared/clipboard-button/clipboard-button.component.scss b/demo/src/app/shared/clipboard-button/clipboard-button.component.scss
index 58f8638c..ac559a7a 100644
--- a/demo/src/app/shared/clipboard-button/clipboard-button.component.scss
+++ b/demo/src/app/shared/clipboard-button/clipboard-button.component.scss
@@ -1,9 +1,7 @@
.btn-clipboard {
- height: 30px;
- width: 30px;
- line-height: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: #1E1E1E;
+ &.mat-mdc-icon-button {
+ height: 30px;
+ width: 30px;
+ padding: 0;
+ }
}
diff --git a/demo/src/app/shared/clipboard-button/clipboard-button.component.ts b/demo/src/app/shared/clipboard-button/clipboard-button.component.ts
index 5fc5bb5e..c61b3280 100644
--- a/demo/src/app/shared/clipboard-button/clipboard-button.component.ts
+++ b/demo/src/app/shared/clipboard-button/clipboard-button.component.ts
@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-clipboard-button',
diff --git a/demo/src/app/shared/clipboard-button/clipboard-button.module.ts b/demo/src/app/shared/clipboard-button/clipboard-button.module.ts
index b8a9c44c..e6f81a97 100644
--- a/demo/src/app/shared/clipboard-button/clipboard-button.module.ts
+++ b/demo/src/app/shared/clipboard-button/clipboard-button.module.ts
@@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import { MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/legacy-snack-bar';
+import { MatButtonModule} from '@angular/material/button';
+import { MatSnackBarModule} from '@angular/material/snack-bar';
import { ClipboardButtonComponent } from './clipboard-button.component';
diff --git a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.scss b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.scss
index 899d57ae..91748f01 100644
--- a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.scss
+++ b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.scss
@@ -8,13 +8,6 @@
}
}
-.mat-fab,
-.mat-mini-fab {
- img {
- margin-bottom: 2px;
- }
-}
-
.sticky {
position: sticky;
top: 80px;
@@ -28,4 +21,8 @@
bottom: 16px;
right: 16px;
}
+
+ img {
+ display: flex;
+ }
}
diff --git a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.module.ts b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.module.ts
index 20f7ecf3..70304060 100644
--- a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.module.ts
+++ b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.module.ts
@@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MarkdownModule } from 'ngx-markdown';
import { ScrollspyNavModule } from '@shared/scrollspy-nav/scrollspy-nav.module';
diff --git a/demo/src/scss/_typography.scss b/demo/src/scss/_typography.scss
index 115e493f..1c435108 100644
--- a/demo/src/scss/_typography.scss
+++ b/demo/src/scss/_typography.scss
@@ -1,5 +1,9 @@
@use '@angular/material' as mat;
$font-family: "Google Sans", "Helvetica Neue", sans-serif;
+$body-1: mat.define-typography-level($font-size: 15px);
-$mat-typography-config: mat.define-typography-config($font-family);
+$mat-typography-config: mat.define-typography-config(
+ $font-family,
+ $body-1,
+);
\ No newline at end of file
diff --git a/demo/src/scss/material-theme.scss b/demo/src/scss/material-theme.scss
index 4a1b3178..a531248c 100644
--- a/demo/src/scss/material-theme.scss
+++ b/demo/src/scss/material-theme.scss
@@ -72,13 +72,6 @@
// all components
@include mat.all-component-themes($theme);
- // legacy components
- @include mat.legacy-button-theme($theme);
- @include mat.legacy-form-field-theme($theme);
- @include mat.legacy-input-theme($theme);
- @include mat.legacy-snack-bar-theme($theme);
- @include mat.legacy-tabs-theme($theme);
-
// app components
@include app-component.theme($theme);
@include scrollspy-nav-component.theme($theme);
diff --git a/demo/src/styles.scss b/demo/src/styles.scss
index 4aa82801..0657c424 100644
--- a/demo/src/styles.scss
+++ b/demo/src/styles.scss
@@ -71,8 +71,11 @@ table {
}
}
+input,
textarea {
font-family: monospace !important;
+ font-size: 15px !important;
+ line-height: 1.125 !important;
}
[hidden] {