build(aio): upgrade to @angular/{material,cdk}@2.0.0-beta.11 + md->mat migration (#19702)
all the non-npm changes were made by the angular-material-prefix-updater tool. the tool missed a few things, which I'll fix in a separate commit to preserve the diff. -rw-r--r-- 1 iminar eng 14942 Oct 13 13:09 dist/0.b19e913fbdd6507d346b.chunk.js -rw-r--r-- 1 iminar eng 1535 Oct 13 13:09 dist/inline.0592c25ceb544d6aca3d.bundle.js -rw-r--r-- 1 iminar eng 578250 Oct 13 13:09 dist/main.45d4edca3facc6d621e7.bundle.js -rw-r--r-- 1 iminar eng 37402 Oct 13 13:09 dist/polyfills.f8409a9eb69060ac1aa6.bundle.js PR Close #19702
This commit is contained in:
Igor Minar
Matias Niemelä
parent
3216abee2e
commit
415e75716a
|
|
@ -66,13 +66,13 @@
|
|||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^5.0.0-beta.3",
|
||||
"@angular/cdk": "^2.0.0-beta.8",
|
||||
"@angular/cdk": "2.0.0-beta.11",
|
||||
"@angular/common": "^5.0.0-beta.3",
|
||||
"@angular/compiler": "^5.0.0-beta.3",
|
||||
"@angular/core": "^5.0.0-beta.3",
|
||||
"@angular/forms": "^5.0.0-beta.3",
|
||||
"@angular/http": "^5.0.0-beta.3",
|
||||
"@angular/material": "^2.0.0-beta.8",
|
||||
"@angular/material": "2.0.0-beta.11",
|
||||
"@angular/platform-browser": "^5.0.0-beta.3",
|
||||
"@angular/platform-browser-dynamic": "^5.0.0-beta.3",
|
||||
"@angular/platform-server": "^5.0.0-beta.3",
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
<div id="top-of-page"></div>
|
||||
|
||||
<div *ngIf="isFetching" class="progress-bar-container">
|
||||
<md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
|
||||
<mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
|
||||
</div>
|
||||
|
||||
<md-toolbar color="primary" class="app-toolbar">
|
||||
<button class="hamburger" [class.starting]="isStarting" md-button
|
||||
<mat-toolbar color="primary" class="app-toolbar">
|
||||
<button class="hamburger" [class.starting]="isStarting" mat-button
|
||||
(click)="sidenav.toggle()" title="Docs menu">
|
||||
<md-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></md-icon>
|
||||
<mat-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></mat-icon>
|
||||
</button>
|
||||
<a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a>
|
||||
<aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
|
||||
<aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
|
||||
</md-toolbar>
|
||||
</mat-toolbar>
|
||||
<aio-search-results #searchResultsView *ngIf="showSearchResults" [searchResults]="searchResults | async" (resultSelected)="hideSearchResults()"></aio-search-results>
|
||||
|
||||
<md-sidenav-container class="sidenav-container" [class.starting]="isStarting" [class.has-floating-toc]="hasFloatingToc" role="main">
|
||||
<mat-sidenav-container class="sidenav-container" [class.starting]="isStarting" [class.has-floating-toc]="hasFloatingToc" role="main">
|
||||
|
||||
<md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode" (open)="updateHostClasses()" (close)="updateHostClasses()">
|
||||
<mat-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode" (open)="updateHostClasses()" (close)="updateHostClasses()">
|
||||
<aio-nav-menu *ngIf="!isSideBySide" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="false"></aio-nav-menu>
|
||||
<aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="isSideBySide"></aio-nav-menu>
|
||||
|
||||
<div class="doc-version">
|
||||
<aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="currentDocVersion"></aio-select>
|
||||
</div>
|
||||
</md-sidenav>
|
||||
</mat-sidenav>
|
||||
|
||||
<section class="sidenav-content" [id]="pageId" role="content">
|
||||
<aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
|
||||
</section>
|
||||
|
||||
</md-sidenav-container>
|
||||
</mat-sidenav-container>
|
||||
|
||||
<div *ngIf="hasFloatingToc" class="toc-container" [style.max-height.px]="tocMaxHeight" (mousewheel)="restrainScrolling($event)">
|
||||
<aio-toc></aio-toc>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { inject, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/cor
|
|||
import { Title } from '@angular/platform-browser';
|
||||
import { APP_BASE_HREF } from '@angular/common';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { MdProgressBar, MdSidenav } from '@angular/material';
|
||||
import { MatProgressBar, MatSidenav } from '@angular/material';
|
||||
import { By } from '@angular/platform-browser';
|
||||
|
||||
import { of } from 'rxjs/observable/of';
|
||||
|
|
@ -51,7 +51,7 @@ describe('AppComponent', () => {
|
|||
docViewer = de.query(By.css('aio-doc-viewer')).nativeElement;
|
||||
hamburger = de.query(By.css('.hamburger')).nativeElement;
|
||||
locationService = de.injector.get(LocationService) as any as MockLocationService;
|
||||
sidenav = de.query(By.css('md-sidenav')).nativeElement;
|
||||
sidenav = de.query(By.css('mat-sidenav')).nativeElement;
|
||||
tocService = de.injector.get(TocService);
|
||||
};
|
||||
|
||||
|
|
@ -376,7 +376,7 @@ describe('AppComponent', () => {
|
|||
});
|
||||
|
||||
it('should set the css class of the host container based on the open/closed state of the side nav', () => {
|
||||
const sideNav = fixture.debugElement.query(By.directive(MdSidenav));
|
||||
const sideNav = fixture.debugElement.query(By.directive(MatSidenav));
|
||||
|
||||
locationService.go('guide/pipes');
|
||||
fixture.detectChanges();
|
||||
|
|
@ -882,7 +882,7 @@ describe('AppComponent', () => {
|
|||
|
||||
describe('initial rendering', () => {
|
||||
it('should initially add the starting class until the first document is rendered', fakeAsync(() => {
|
||||
const getSidenavContainer = () => fixture.debugElement.query(By.css('md-sidenav-container'));
|
||||
const getSidenavContainer = () => fixture.debugElement.query(By.css('mat-sidenav-container'));
|
||||
|
||||
initializeTest();
|
||||
|
||||
|
|
@ -909,7 +909,7 @@ describe('AppComponent', () => {
|
|||
describe('progress bar', () => {
|
||||
const SHOW_DELAY = 200;
|
||||
const HIDE_DELAY = 500;
|
||||
const getProgressBar = () => fixture.debugElement.query(By.directive(MdProgressBar));
|
||||
const getProgressBar = () => fixture.debugElement.query(By.directive(MatProgressBar));
|
||||
const initializeAndCompleteNavigation = () => {
|
||||
initializeTest();
|
||||
triggerDocRendered();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, ElementRef, HostBinding, HostListener, OnInit,
|
||||
QueryList, ViewChild, ViewChildren } from '@angular/core';
|
||||
import { MdSidenav } from '@angular/material';
|
||||
import { MatSidenav } from '@angular/material';
|
||||
|
||||
import { CurrentNodes, NavigationService, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
|
||||
import { DocumentService, DocumentContents } from 'app/documents/document.service';
|
||||
|
|
@ -95,8 +95,8 @@ export class AppComponent implements OnInit {
|
|||
@ViewChild(SearchBoxComponent)
|
||||
searchBox: SearchBoxComponent;
|
||||
|
||||
@ViewChild(MdSidenav)
|
||||
sidenav: MdSidenav;
|
||||
@ViewChild(MatSidenav)
|
||||
sidenav: MatSidenav;
|
||||
|
||||
constructor(
|
||||
public deployment: Deployment,
|
||||
|
|
@ -291,7 +291,7 @@ export class AppComponent implements OnInit {
|
|||
const el = this.hostElement.nativeElement as Element;
|
||||
this.tocMaxHeightOffset =
|
||||
el.querySelector('footer').clientHeight +
|
||||
el.querySelector('md-toolbar.app-toolbar').clientHeight +
|
||||
el.querySelector('mat-toolbar.app-toolbar').clientHeight +
|
||||
24; // fudge margin
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|||
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
|
||||
|
||||
import {
|
||||
MdButtonModule,
|
||||
MdIconModule,
|
||||
MdIconRegistry,
|
||||
MdInputModule,
|
||||
MdProgressBarModule,
|
||||
MdSidenavModule,
|
||||
MdTabsModule,
|
||||
MdToolbarModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatIconRegistry,
|
||||
MatInputModule,
|
||||
MatProgressBarModule,
|
||||
MatSidenavModule,
|
||||
MatTabsModule,
|
||||
MatToolbarModule,
|
||||
Platform
|
||||
} from '@angular/material';
|
||||
|
||||
|
|
@ -77,13 +77,13 @@ export const svgIconProviders = [
|
|||
EmbeddedModule,
|
||||
HttpClientModule,
|
||||
BrowserAnimationsModule,
|
||||
MdButtonModule,
|
||||
MdIconModule,
|
||||
MdInputModule,
|
||||
MdProgressBarModule,
|
||||
MdSidenavModule,
|
||||
MdTabsModule,
|
||||
MdToolbarModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatProgressBarModule,
|
||||
MatSidenavModule,
|
||||
MatTabsModule,
|
||||
MatToolbarModule,
|
||||
SwUpdatesModule,
|
||||
SharedModule
|
||||
],
|
||||
|
|
@ -107,7 +107,7 @@ export const svgIconProviders = [
|
|||
Location,
|
||||
{ provide: LocationStrategy, useClass: PathLocationStrategy },
|
||||
LocationService,
|
||||
{ provide: MdIconRegistry, useClass: CustomMdIconRegistry },
|
||||
{ provide: MatIconRegistry, useClass: CustomMdIconRegistry },
|
||||
NavigationService,
|
||||
Platform,
|
||||
ScrollService,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { CommonModule } from '@angular/common';
|
||||
import { Component, DebugElement, Input, NO_ERRORS_SCHEMA } from '@angular/core';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { MdTabGroup, MdTabsModule } from '@angular/material';
|
||||
import { MatTabGroup, MatTabsModule } from '@angular/material';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ describe('CodeTabsComponent', () => {
|
|||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [ MdTabsModule, NoopAnimationsModule ]
|
||||
imports: [ MatTabsModule, NoopAnimationsModule ]
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -86,7 +86,7 @@ describe('CodeTabsComponent', () => {
|
|||
|
||||
it('should disable ripple effect on tab labels', () => {
|
||||
createComponent();
|
||||
const tabsGroupComponent = codeTabsDe.query(By.directive(MdTabGroup)).componentInstance;
|
||||
const tabsGroupComponent = codeTabsDe.query(By.directive(MatTabGroup)).componentInstance;
|
||||
|
||||
expect(tabsGroupComponent.disableRipple).toBe(true);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@ export interface TabInfo {
|
|||
@Component({
|
||||
selector: 'code-tabs',
|
||||
template: `
|
||||
<md-tab-group class="code-tab-group" disableRipple>
|
||||
<md-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
|
||||
<ng-template md-tab-label>
|
||||
<mat-tab-group class="code-tab-group" disableRipple>
|
||||
<mat-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
|
||||
<ng-template mat-tab-label>
|
||||
<span class="{{ tab.class }}">{{ tab.title }}</span>
|
||||
</ng-template>
|
||||
<aio-code class="{{ tab.class }}"
|
||||
|
|
@ -34,8 +34,8 @@ export interface TabInfo {
|
|||
[region]="tab.region"
|
||||
[title]="tab.title">
|
||||
</aio-code>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
`
|
||||
})
|
||||
export class CodeTabsComponent implements OnInit {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, DebugElement } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { MdSnackBarModule, MdSnackBar } from '@angular/material';
|
||||
import { MatSnackBarModule, MatSnackBar } from '@angular/material';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ describe('CodeComponent', () => {
|
|||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [ MdSnackBarModule, NoopAnimationsModule ],
|
||||
imports: [ MatSnackBarModule, NoopAnimationsModule ],
|
||||
declarations: [ CodeComponent, HostComponent ],
|
||||
providers: [
|
||||
PrettyPrinter,
|
||||
|
|
@ -243,7 +243,7 @@ describe('CodeComponent', () => {
|
|||
});
|
||||
|
||||
it('should display a message when copy succeeds', () => {
|
||||
const snackBar: MdSnackBar = TestBed.get(MdSnackBar);
|
||||
const snackBar: MatSnackBar = TestBed.get(MatSnackBar);
|
||||
const copierService: CopierService = TestBed.get(CopierService);
|
||||
spyOn(snackBar, 'open');
|
||||
spyOn(copierService, 'copyText').and.returnValue(true);
|
||||
|
|
@ -252,7 +252,7 @@ describe('CodeComponent', () => {
|
|||
});
|
||||
|
||||
it('should display an error when copy fails', () => {
|
||||
const snackBar: MdSnackBar = TestBed.get(MdSnackBar);
|
||||
const snackBar: MatSnackBar = TestBed.get(MatSnackBar);
|
||||
const copierService: CopierService = TestBed.get(CopierService);
|
||||
spyOn(snackBar, 'open');
|
||||
spyOn(copierService, 'copyText').and.returnValue(false);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { Component, ElementRef, ViewChild, OnChanges, Input } from '@angular/cor
|
|||
import { Logger } from 'app/shared/logger.service';
|
||||
import { PrettyPrinter } from './pretty-printer.service';
|
||||
import { CopierService } from 'app/shared/copier.service';
|
||||
import { MdSnackBar } from '@angular/material';
|
||||
import { MatSnackBar } from '@angular/material';
|
||||
|
||||
const defaultLineNumsCount = 10; // by default, show linenums over this number
|
||||
|
||||
|
|
@ -100,7 +100,7 @@ export class CodeComponent implements OnChanges {
|
|||
@ViewChild('codeContainer') codeContainer: ElementRef;
|
||||
|
||||
constructor(
|
||||
private snackbar: MdSnackBar,
|
||||
private snackbar: MatSnackBar,
|
||||
private pretty: PrettyPrinter,
|
||||
private copier: CopierService,
|
||||
private logger: Logger) {}
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
|
|||
|
||||
<div class="contributor-image" [style.background-image]="'url('+pictureBase+(person.picture || noPicture)+')'">
|
||||
<div class="contributor-info">
|
||||
<a *ngIf="person.bio" md-button>
|
||||
<a *ngIf="person.bio" mat-button>
|
||||
View Bio
|
||||
</a>
|
||||
<a *ngIf="person.twitter" md-button class="icon"
|
||||
<a *ngIf="person.twitter" mat-button class="icon"
|
||||
href="https://twitter.com/{{person.twitter}}" target="_blank" (click)="$event.stopPropagation()">
|
||||
<span class="fa fa-twitter fa-2x"></span>
|
||||
</a>
|
||||
<a *ngIf="person.website" md-button class="icon"
|
||||
<a *ngIf="person.website" mat-button class="icon"
|
||||
href="{{person.website}}" target="_blank" (click)="$event.stopPropagation()">
|
||||
<span class="fa fa-link fa-2x"></span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { PrettyPrinter } from './code/pretty-printer.service';
|
|||
// It is not enough just to import them inside the AppModule
|
||||
|
||||
// Reusable components (used inside embedded components)
|
||||
import { MdIconModule, MdSnackBarModule, MdTabsModule } from '@angular/material';
|
||||
import { MatIconModule, MatSnackBarModule, MatTabsModule } from '@angular/material';
|
||||
import { CodeComponent } from './code/code.component';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
|
||||
|
|
@ -43,9 +43,9 @@ export class EmbeddedComponents {
|
|||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
MdIconModule,
|
||||
MdSnackBarModule,
|
||||
MdTabsModule,
|
||||
MatIconModule,
|
||||
MatSnackBarModule,
|
||||
MatTabsModule,
|
||||
SharedModule
|
||||
],
|
||||
declarations: [
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
aria-label="Expand/collapse contents"
|
||||
[attr.aria-pressed]="!isCollapsed">
|
||||
Contents
|
||||
<md-icon class="rotating-icon" svgIcon="keyboard_arrow_right" [class.collapsed]="isCollapsed"></md-icon>
|
||||
<mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right" [class.collapsed]="isCollapsed"></mat-icon>
|
||||
</button>
|
||||
|
||||
<ul class="toc-list" [class.embedded]="type !== 'Floating'">
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
<a *ngIf="node.url != null" href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
|
||||
(click)="headerClicked()" class="vertical-menu-item heading">
|
||||
{{node.title}}
|
||||
<md-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></md-icon>
|
||||
<mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></mat-icon>
|
||||
</a>
|
||||
|
||||
<button *ngIf="node.url == null" type="button" [ngClass]="classes" title="{{node.tooltip}}"
|
||||
(click)="headerClicked()" class="vertical-menu-item heading"
|
||||
[attr.aria-pressed]="isExpanded">
|
||||
{{node.title}}
|
||||
<md-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></md-icon>
|
||||
<mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></mat-icon>
|
||||
</button>
|
||||
|
||||
<div class="heading-children" [ngClass]="classes">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { MdIconRegistry } from '@angular/material';
|
||||
import { MatIconRegistry } from '@angular/material';
|
||||
import { CustomMdIconRegistry, SvgIconInfo } from './custom-md-icon-registry';
|
||||
|
||||
describe('CustomMdIconRegistry', () => {
|
||||
|
|
@ -24,15 +24,15 @@ describe('CustomMdIconRegistry', () => {
|
|||
const svgIcons: SvgIconInfo[] = [
|
||||
{ name: 'test_icon', svgSource: svgSrc }
|
||||
];
|
||||
spyOn(MdIconRegistry.prototype, 'getNamedSvgIcon');
|
||||
spyOn(MatIconRegistry.prototype, 'getNamedSvgIcon');
|
||||
|
||||
const registry = new CustomMdIconRegistry(mockHttp, mockSanitizer, svgIcons);
|
||||
|
||||
registry.getNamedSvgIcon('other_icon');
|
||||
expect(MdIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', undefined);
|
||||
expect(MatIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', undefined);
|
||||
|
||||
registry.getNamedSvgIcon('other_icon', 'foo');
|
||||
expect(MdIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', 'foo');
|
||||
expect(MatIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', 'foo');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { InjectionToken, Inject, Injectable } from '@angular/core';
|
||||
import { of } from 'rxjs/observable/of';
|
||||
import { MdIconRegistry } from '@angular/material';
|
||||
import { MatIconRegistry } from '@angular/material';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ function createFakeHttp(http: HttpClient): any {
|
|||
* us to provide preloaded icon SVG sources.
|
||||
*/
|
||||
@Injectable()
|
||||
export class CustomMdIconRegistry extends MdIconRegistry {
|
||||
export class CustomMdIconRegistry extends MatIconRegistry {
|
||||
private preloadedSvgElements: SvgIconMap = {};
|
||||
|
||||
constructor(http: HttpClient, sanitizer: DomSanitizer, @Inject(SVG_ICONS) svgIcons: SvgIconInfo[]) {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export class ScrollService {
|
|||
// at the top (e.g. toolbar) + some margin
|
||||
get topOffset() {
|
||||
if (!this._topOffset) {
|
||||
const toolbar = this.document.querySelector('md-toolbar.app-toolbar');
|
||||
const toolbar = this.document.querySelector('mat-toolbar.app-toolbar');
|
||||
this._topOffset = (toolbar && toolbar.clientHeight || 0) + topMargin;
|
||||
}
|
||||
return this._topOffset;
|
||||
|
|
|
|||
|
|
@ -311,7 +311,7 @@ aio-shell {
|
|||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
md-sidenav-container.sidenav-container {
|
||||
mat-sidenav-container.sidenav-container {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -336,7 +336,7 @@ aio-shell {
|
|||
}
|
||||
|
||||
aio-shell:not(.view-SideNav) {
|
||||
md-sidenav-container.sidenav-container {
|
||||
mat-sidenav-container.sidenav-container {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ aio-nav-menu {
|
|||
}
|
||||
}
|
||||
|
||||
md-sidenav.mat-sidenav.sidenav {
|
||||
mat-sidenav.mat-sidenav.sidenav {
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
bottom: 0;
|
||||
|
|
@ -42,7 +42,7 @@ md-sidenav.mat-sidenav.sidenav {
|
|||
}
|
||||
}
|
||||
|
||||
md-sidenav-container.sidenav-container {
|
||||
mat-sidenav-container.sidenav-container {
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
max-width: 100%;
|
||||
|
|
@ -54,7 +54,7 @@ md-sidenav-container.sidenav-container {
|
|||
}
|
||||
}
|
||||
|
||||
md-sidenav-container div.mat-sidenav-content {
|
||||
mat-sidenav-container div.mat-sidenav-content {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
|
@ -176,7 +176,7 @@ aio-nav-menu.top-menu {
|
|||
}
|
||||
|
||||
// Angular Version Selector
|
||||
md-sidenav .doc-version {
|
||||
mat-sidenav .doc-version {
|
||||
padding: 8px;
|
||||
border-top: 1px solid $lightgray;
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ aio-top-menu {
|
|||
}
|
||||
|
||||
// HOME PAGE OVERRIDE: TOPNAV TOOLBAR HAMBURGER MENU
|
||||
aio-shell.page-home md-toolbar.app-toolbar.mat-toolbar {
|
||||
aio-shell.page-home mat-toolbar.app-toolbar.mat-toolbar {
|
||||
background-color: transparent;
|
||||
transition: background-color .2s linear .3s;
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ aio-shell.page-home md-toolbar.app-toolbar.mat-toolbar {
|
|||
}
|
||||
|
||||
// DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED
|
||||
md-toolbar.mat-toolbar {
|
||||
mat-toolbar.mat-toolbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -76,16 +76,16 @@ md-toolbar.mat-toolbar {
|
|||
padding: 0 16px 0 0;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
|
||||
|
||||
md-icon {
|
||||
mat-icon {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
|
||||
aio-shell.page-home md-toolbar.mat-toolbar,
|
||||
aio-shell.page-features md-toolbar.mat-toolbar,
|
||||
aio-shell.page-events md-toolbar.mat-toolbar,
|
||||
aio-shell.page-resources md-toolbar.mat-toolbar {
|
||||
aio-shell.page-home mat-toolbar.mat-toolbar,
|
||||
aio-shell.page-features mat-toolbar.mat-toolbar,
|
||||
aio-shell.page-events mat-toolbar.mat-toolbar,
|
||||
aio-shell.page-resources mat-toolbar.mat-toolbar {
|
||||
// FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
|
||||
@media (min-width: 481px) {
|
||||
position: absolute;
|
||||
|
|
@ -99,9 +99,9 @@ aio-shell.page-resources md-toolbar.mat-toolbar {
|
|||
}
|
||||
|
||||
// REMOVE BOX SHADOW ON CERTAIN MARKETING PAGES
|
||||
aio-shell.page-home md-toolbar.mat-toolbar,
|
||||
aio-shell.page-events md-toolbar.mat-toolbar,
|
||||
aio-shell.page-resources md-toolbar.mat-toolbar {
|
||||
aio-shell.page-home mat-toolbar.mat-toolbar,
|
||||
aio-shell.page-events mat-toolbar.mat-toolbar,
|
||||
aio-shell.page-resources mat-toolbar.mat-toolbar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -105,6 +105,6 @@ a.filter-button {
|
|||
}
|
||||
}
|
||||
|
||||
[md-button], [md-raised-button], [mat-button], [mat-raised-button] {
|
||||
[mat-button], [mat-raised-button], [mat-button], [mat-raised-button] {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ code-example, code-tabs {
|
|||
}
|
||||
|
||||
code-example,
|
||||
code-tabs md-tab-body {
|
||||
code-tabs mat-tab-body {
|
||||
&:not(.no-box) {
|
||||
background-color: rgba($backgroundgray, 0.2);
|
||||
border: 0.5px solid $lightgray;
|
||||
|
|
@ -49,8 +49,8 @@ code-example.avoidFile header {
|
|||
|
||||
code-example.avoid,
|
||||
code-example.avoidFile,
|
||||
code-tabs.avoid md-tab-body,
|
||||
code-tabs.avoidFile md-tab-body {
|
||||
code-tabs.avoid mat-tab-body,
|
||||
code-tabs.avoidFile mat-tab-body {
|
||||
border: 0.5px solid $anti-pattern;
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ code-tabs div .mat-tab-body-content {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
code-tabs .mat-tab-body-wrapper md-tab-body .mat-tab-body {
|
||||
code-tabs .mat-tab-body-wrapper mat-tab-body .mat-tab-body {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ aio-contributor {
|
|||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
|
||||
[md-button] {
|
||||
[mat-button] {
|
||||
color: $white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
body::-webkit-scrollbar, md-sidenav.sidenav::-webkit-scrollbar, .mat-sidenav-content::-webkit-scrollbar {
|
||||
body::-webkit-scrollbar, mat-sidenav.sidenav::-webkit-scrollbar, .mat-sidenav-content::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track, md-sidenav.sidenav::-webkit-scrollbar-trac, .mat-sidenav-content::-webkit-scrollbar-trac {
|
||||
body::-webkit-scrollbar-track, mat-sidenav.sidenav::-webkit-scrollbar-trac, .mat-sidenav-content::-webkit-scrollbar-trac {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb, md-sidenav.sidenav::-webkit-scrollbar-thumb, .mat-sidenav-content::-webkit-scrollbar-thumb {
|
||||
body::-webkit-scrollbar-thumb, mat-sidenav.sidenav::-webkit-scrollbar-thumb, .mat-sidenav-content::-webkit-scrollbar-thumb {
|
||||
background-color: $mediumgray;
|
||||
outline: 1px solid $darkgray;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ aio-toc {
|
|||
}
|
||||
|
||||
button.toc-heading {
|
||||
md-icon.rotating-icon {
|
||||
mat-icon.rotating-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -32,9 +32,9 @@
|
|||
dependencies:
|
||||
tslib "^1.7.1"
|
||||
|
||||
"@angular/cdk@^2.0.0-beta.8":
|
||||
version "2.0.0-beta.8"
|
||||
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-2.0.0-beta.8.tgz#71961c851dfbeb19e085e898bf5e4461408f8b57"
|
||||
"@angular/cdk@2.0.0-beta.11":
|
||||
version "2.0.0-beta.11"
|
||||
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-2.0.0-beta.11.tgz#b9e799574786272c63b6334c837c5ee2445bc933"
|
||||
dependencies:
|
||||
tslib "^1.7.1"
|
||||
|
||||
|
|
@ -140,9 +140,9 @@
|
|||
dependencies:
|
||||
tslib "^1.7.1"
|
||||
|
||||
"@angular/material@^2.0.0-beta.8":
|
||||
version "2.0.0-beta.8"
|
||||
resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.8.tgz#a92852abc9261aea26c2401f576645470be2cf38"
|
||||
"@angular/material@2.0.0-beta.11":
|
||||
version "2.0.0-beta.11"
|
||||
resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.11.tgz#9124a1f50f3eb7dc28640317ee1e875f71da753a"
|
||||
dependencies:
|
||||
tslib "^1.7.1"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue