[ADF-1846] Fix IE11, add material typography, remove design lite (#2570)

* IE11 vertical centering fix

* Material design way of typography

* Remove material design lite from demo shell

demo-shell-ng2/.angular-cli.json

@@ -113,8 +113,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.scss",
-        "custom-style.scss"
+        "styles.scss"
       ],
       "stylePreprocessorOptions": {
         "includePaths": [

demo-shell-ng2/package.json

@@ -79,7 +79,6 @@
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "hammerjs": "2.0.8",
     "intl": "1.2.5",
-    "material-design-lite": "1.2.1",
     "minimatch": "3.0.4",
     "moment": "2.15.2",
     "ng2-3d-editor": "0.0.18",

demo-shell-ng2/src/custom-style.scss

@@ -16,12 +16,7 @@
 
 @import '~@angular/material/theming';
 
-@include mat-core();
-
-$custom-typography: mat-typography-config(
-  $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
+@include mat-core($alfresco-typography);
 
 $primary: mat-palette($alfresco-accent-orange);
 $accent:  mat-palette($alfresco-accent-purple);

demo-shell-ng2/src/styles.scss

@@ -1,12 +1,10 @@
-.mat-form-field input.mat-input-element {
-  line-height: normal;
-}
+@import '~@angular/material/theming';
+@import './custom-style.scss';
 
 body, html {
-  height: 100%;
-  font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-body {
-  margin: 0;
-}
+    margin: 0;
+    height: 100%;
+    font-size: mat-font-size($alfresco-typography, body-1);
+    font-family: mat-font-family($alfresco-typography);
+    line-height: mat-line-height($alfresco-typography, body-1);
+}

ng2-components/ng2-alfresco-core/styles/_theming.scss

@@ -1,5 +1,6 @@
-@import './mixins';
-@import './variables';
-@import './colors';
 @import '~@angular/material/theming';
+@import './colors';
+@import './variables';
+@import './mixins';
+@import './typography';
 

ng2-components/ng2-alfresco-core/styles/_typography.scss

@@ -0,0 +1,19 @@
+@import '~@angular/material/theming';
+
+$alfresco-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
+    $display-4:     mat-typography-level(112px, 112px, 300),
+    $display-3:     mat-typography-level(56px, 56px, 400),
+    $display-2:     mat-typography-level(45px, 48px, 400),
+    $display-1:     mat-typography-level(34px, 40px, 400),
+    $headline:      mat-typography-level(24px, 32px, 400),
+    $title:         mat-typography-level(20px, 32px, 500),
+    $subheading-2:  mat-typography-level(16px, 28px, 400),
+    $subheading-1:  mat-typography-level(15px, 24px, 400),
+    $body-2:        mat-typography-level(14px, 24px, 500),
+    $body-1:        mat-typography-level(14px, 20px, 400),
+    $caption:       mat-typography-level(12px, 20px, 400),
+    $button:        mat-typography-level(14px, 14px, 500),
+    // Line-height must be unit-less fraction of the font-size.
+    $input:         mat-typography-level(16px, 1.25, 400)
+);

ng2-components/ng2-alfresco-core/styles/prebuilt/adf-blue-orange.scss

@@ -1,12 +1,7 @@
 @import '../theming';
 @import './all-theme';
 
-$custom-typography: mat-typography-config(
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
+@include mat-core($alfresco-typography);
 
 $primary: mat-palette($alfresco-ecm-blue);
 $accent:  mat-palette($alfresco-accent-orange);

ng2-components/ng2-alfresco-core/styles/prebuilt/adf-blue-purple.scss

@@ -1,12 +1,7 @@
 @import '../theming';
 @import './all-theme';
 
-$custom-typography: mat-typography-config(
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
+@include mat-core($alfresco-typography);
 
 $primary: mat-palette($alfresco-ecm-blue);
 $accent:  mat-palette($alfresco-accent-purple);

ng2-components/ng2-alfresco-core/styles/prebuilt/adf-cyan-orange.scss

@@ -1,12 +1,7 @@
 @import '../theming';
 @import './all-theme';
 
-$custom-typography: mat-typography-config(
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
+@include mat-core($alfresco-typography);
 
 $primary: mat-palette($alfresco-ecm-cyan);
 $accent:  mat-palette($alfresco-accent-orange);

ng2-components/ng2-alfresco-core/styles/prebuilt/adf-cyan-purple.scss

@@ -1,12 +1,7 @@
 @import '../theming';
 @import './all-theme';
 
-$custom-typography: mat-typography-config(
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
+@include mat-core($alfresco-typography);
 
 $primary: mat-palette($alfresco-ecm-cyan);
 $accent:  mat-palette($alfresco-accent-purple);

ng2-components/ng2-alfresco-core/styles/prebuilt/adf-green-orange.scss

@@ -1,12 +1,7 @@
 @import '../theming';
 @import './all-theme';
 
-$custom-typography: mat-typography-config(
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
+@include mat-core($alfresco-typography);
 
 $primary: mat-palette($alfresco-bpm-green);
 $accent:  mat-palette($alfresco-accent-orange);

ng2-components/ng2-alfresco-core/styles/prebuilt/adf-green-purple.scss

@@ -1,12 +1,7 @@
 @import '../theming';
 @import './all-theme';
 
-$custom-typography: mat-typography-config(
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
+@include mat-core($alfresco-typography);
 
 $primary: mat-palette($alfresco-bpm-green);
 $accent:  mat-palette($alfresco-accent-purple);

ng2-components/ng2-alfresco-core/styles/prebuilt/adf-indigo-pink.scss

@@ -1,12 +1,7 @@
 @import '../theming';
 @import './all-theme';
 
-$custom-typography: mat-typography-config(
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
+@include mat-core($alfresco-typography);
 
 $primary: mat-palette($mat-indigo);
 $accent:  mat-palette($mat-pink, A200, A100, A400);

ng2-components/ng2-alfresco-core/styles/prebuilt/adf-pink-bluegrey.scss

@@ -1,12 +1,7 @@
 @import '../theming';
 @import './all-theme';
 
-$custom-typography: mat-typography-config(
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
+@include mat-core($alfresco-typography);
 
 $primary: mat-palette($mat-pink, 700, 500, 900);
 $accent:  mat-palette($mat-blue-grey, A200, A100, A400);

ng2-components/ng2-alfresco-core/styles/prebuilt/adf-purple-green.scss

@@ -1,12 +1,7 @@
 @import '../theming';
 @import './all-theme';
 
-$custom-typography: mat-typography-config(
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
+@include mat-core($alfresco-typography);
 
 $primary: mat-palette($mat-purple, 700, 500, 800);
 $accent:  mat-palette($mat-green, A200, A100, A400);

ng2-components/ng2-alfresco-login/src/components/login.component.html

@@ -1,127 +1,132 @@
-<div class="adf-login-content"
-     [style.background-image]="'url(' + backgroundImageUrl + ')'">
-    <mat-card class="adf-login-card-wide">
-        <form [formGroup]="form" (submit)="onSubmit(form.value)">
+<div class="adf-login-content" [style.background-image]="'url(' + backgroundImageUrl + ')'">
+     <div class="ie11FixerParent">
+         <div class="ie11FixerChild">
 
-            <mat-card-header>
-                <mat-card-title>
-                    <div class="adf-alfresco-logo">
-                        <!--HEADER TEMPLATE-->
-                        <ng-template *ngIf="headerTemplate"
-                                     ngFor [ngForOf]="[data]"
-                                     [ngForTemplate]="headerTemplate">
-                        </ng-template>
-                        <img *ngIf="!headerTemplate" class="adf-img-logo" [src]="logoImageUrl"
-                             alt="{{'LOGIN.LOGO' | translate }}">
-                    </div>
-                </mat-card-title>
-            </mat-card-header>
+            <mat-card class="adf-login-card-wide">
+                <form [formGroup]="form" (submit)="onSubmit(form.value)">
 
-            <mat-card-content class="adf-login-controls">
+                    <mat-card-header>
+                        <mat-card-title>
+                            <div class="adf-alfresco-logo">
+                                <!--HEADER TEMPLATE-->
+                                <ng-template *ngIf="headerTemplate"
+                                            ngFor [ngForOf]="[data]"
+                                            [ngForTemplate]="headerTemplate">
+                                </ng-template>
+                                <img *ngIf="!headerTemplate" class="adf-img-logo" [src]="logoImageUrl"
+                                    alt="{{'LOGIN.LOGO' | translate }}">
+                            </div>
+                        </mat-card-title>
+                    </mat-card-header>
 
-                <!--ERRORS AREA-->
-                <div class="adf-error-container">
-                    <div *ngIf="isError" id="login-error" data-automation-id="login-error"
-                         class="error  adf-error-message">
-                        <mat-icon class="error-icon">warning</mat-icon>
-                        <span class="login-error-message">{{errorMsg | translate }}</span>
-                    </div>
-                </div>
+                    <mat-card-content class="adf-login-controls">
 
-                <!--USERNAME FIELD-->
-                <div class="adf-login__field" [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}">
-                    <mat-form-field class="adf-full-width" floatPlaceholder="never" color="primary">
-                        <input matInput placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
-                               type="text"
-                               class="adf-full-width"
-                               [formControl]="form.controls['username']"
-                               autocapitalize="none"
-                               id="username"
-                               data-automation-id="username"
-                               (blur)="trimUsername($event)"
-                               tabindex="1">
-                    </mat-form-field>
-
-                    <span class="adf-login-validation" for="username" *ngIf="formError.username">
-                        <span id="username-error" class="adf-login-error" data-automation-id="username-error">{{formError.username | translate }}</span>
-                    </span>
-                </div>
-
-                <!--PASSWORD FIELD-->
-                <div class="adf-login__field">
-                    <mat-form-field class="adf-full-width" floatPlaceholder="never" color="primary">
-                        <input matInput placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
-                               type="password"
-                               [formControl]="form.controls['password']"
-                               id="password"
-                               data-automation-id="password"
-                               tabindex="2">
-                        <mat-icon *ngIf="isPasswordShow" matSuffix class="adf-login-password-icon"
-                                 data-automation-id="hide_password" (click)="toggleShowPassword()">visibility
-                        </mat-icon>
-                        <mat-icon *ngIf="!isPasswordShow" matSuffix class="adf-login-password-icon"
-                                 data-automation-id="show_password" (click)="toggleShowPassword()">visibility_off
-                        </mat-icon>
-                    </mat-form-field>
-                    <span class="adf-login-validation" for="password" *ngIf="formError.password">
-                        <span id="password-required" class="adf-login-error"
-                              data-automation-id="password-required">{{formError.password | translate }}</span>
-                    </span>
-                </div>
-
-                <!--CUSTOM CONTENT-->
-                <ng-content></ng-content>
-
-                <br>
-                <button type="submit" id="login-button" tabindex="3"
-                        class="adf-login-button"
-                        mat-raised-button color="primary"
-                        [class.isChecking]="actualLoginStep === LoginSteps.Checking"
-                        [class.isWelcome]="actualLoginStep === LoginSteps.Welcome"
-                        data-automation-id="login-button" [disabled]="!form.valid">
-
-                    <span *ngIf="actualLoginStep === LoginSteps.Landing" class="adf-login-button-label">{{ 'LOGIN.BUTTON.LOGIN' | translate }}</span>
-
-                    <div *ngIf="actualLoginStep === LoginSteps.Checking" class="adf-interactive-login-label">
-                        <span class="adf-login-button-label">{{ 'LOGIN.BUTTON.CHECKING' | translate }}</span>
-                        <mat-spinner id="checking-spinner" class="adf-login-checking-spinner" diameter="30"></mat-spinner>
-                    </div>
-
-                    <div *ngIf="actualLoginStep === LoginSteps.Welcome" class="adf-interactive-login-label">
-                        <span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
-                        <mat-icon class="welcome-icon">done</mat-icon>
-                    </div>
-
-                </button>
-                <div *ngIf="showRememberMe" class="adf-login__remember-me">
-                    <mat-checkbox id="adf-login-remember" color="primary" class="adf-login-rememberme" [checked]="rememberMe"
-                                 (change)="rememberMe = !rememberMe">{{ 'LOGIN.LABEL.REMEMBER' | translate }}
-                    </mat-checkbox>
-                </div>
-            </mat-card-content>
-            <mat-card-actions *ngIf="footerTemplate || showLoginActions">
-
-                <div class="adf-login-action-container">
-                    <!--FOOTER TEMPLATE-->
-                    <ng-template *ngIf="footerTemplate"
-                                 ngFor [ngForOf]="[data]"
-                                 [ngForTemplate]="footerTemplate">
-                    </ng-template>
-                    <div class="adf-login-action" *ngIf="!footerTemplate && showLoginActions">
-                        <div id="adf-login-action-left" class="adf-login-action-left">
-                            <a href="{{needHelpLink}}">{{'LOGIN.ACTION.HELP' | translate }}</a>
+                        <!--ERRORS AREA-->
+                        <div class="adf-error-container">
+                            <div *ngIf="isError" id="login-error" data-automation-id="login-error"
+                                class="error  adf-error-message">
+                                <mat-icon class="error-icon">warning</mat-icon>
+                                <span class="login-error-message">{{errorMsg | translate }}</span>
+                            </div>
                         </div>
-                        <div id="adf-login-action-right" class="adf-login-action-right">
-                            <a href="{{registerLink}}">{{'LOGIN.ACTION.REGISTER' | translate }}</a>
+
+                        <!--USERNAME FIELD-->
+                        <div class="adf-login__field" [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}">
+                            <mat-form-field class="adf-full-width" floatPlaceholder="never" color="primary">
+                                <input matInput placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
+                                    type="text"
+                                    class="adf-full-width"
+                                    [formControl]="form.controls['username']"
+                                    autocapitalize="none"
+                                    id="username"
+                                    data-automation-id="username"
+                                    (blur)="trimUsername($event)"
+                                    tabindex="1">
+                            </mat-form-field>
+
+                            <span class="adf-login-validation" for="username" *ngIf="formError.username">
+                                <span id="username-error" class="adf-login-error" data-automation-id="username-error">{{formError.username | translate }}</span>
+                            </span>
                         </div>
-                    </div>
-                </div>
-            </mat-card-actions>
 
-        </form>
-    </mat-card>
+                        <!--PASSWORD FIELD-->
+                        <div class="adf-login__field">
+                            <mat-form-field class="adf-full-width" floatPlaceholder="never" color="primary">
+                                <input matInput placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
+                                    type="password"
+                                    [formControl]="form.controls['password']"
+                                    id="password"
+                                    data-automation-id="password"
+                                    tabindex="2">
+                                <mat-icon *ngIf="isPasswordShow" matSuffix class="adf-login-password-icon"
+                                        data-automation-id="hide_password" (click)="toggleShowPassword()">visibility
+                                </mat-icon>
+                                <mat-icon *ngIf="!isPasswordShow" matSuffix class="adf-login-password-icon"
+                                        data-automation-id="show_password" (click)="toggleShowPassword()">visibility_off
+                                </mat-icon>
+                            </mat-form-field>
+                            <span class="adf-login-validation" for="password" *ngIf="formError.password">
+                                <span id="password-required" class="adf-login-error"
+                                    data-automation-id="password-required">{{formError.password | translate }}</span>
+                            </span>
+                        </div>
 
-    <div class="copyright" data-automation-id="login-copyright">
-        {{ copyrightText }}
-    </div>
+                        <!--CUSTOM CONTENT-->
+                        <ng-content></ng-content>
+
+                        <br>
+                        <button type="submit" id="login-button" tabindex="3"
+                                class="adf-login-button"
+                                mat-raised-button color="primary"
+                                [class.isChecking]="actualLoginStep === LoginSteps.Checking"
+                                [class.isWelcome]="actualLoginStep === LoginSteps.Welcome"
+                                data-automation-id="login-button" [disabled]="!form.valid">
+
+                            <span *ngIf="actualLoginStep === LoginSteps.Landing" class="adf-login-button-label">{{ 'LOGIN.BUTTON.LOGIN' | translate }}</span>
+
+                            <div *ngIf="actualLoginStep === LoginSteps.Checking" class="adf-interactive-login-label">
+                                <span class="adf-login-button-label">{{ 'LOGIN.BUTTON.CHECKING' | translate }}</span>
+                                <mat-spinner id="checking-spinner" class="adf-login-checking-spinner" diameter="30"></mat-spinner>
+                            </div>
+
+                            <div *ngIf="actualLoginStep === LoginSteps.Welcome" class="adf-interactive-login-label">
+                                <span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
+                                <mat-icon class="welcome-icon">done</mat-icon>
+                            </div>
+
+                        </button>
+                        <div *ngIf="showRememberMe" class="adf-login__remember-me">
+                            <mat-checkbox id="adf-login-remember" color="primary" class="adf-login-rememberme" [checked]="rememberMe"
+                                        (change)="rememberMe = !rememberMe">{{ 'LOGIN.LABEL.REMEMBER' | translate }}
+                            </mat-checkbox>
+                        </div>
+                    </mat-card-content>
+                    <mat-card-actions *ngIf="footerTemplate || showLoginActions">
+
+                        <div class="adf-login-action-container">
+                            <!--FOOTER TEMPLATE-->
+                            <ng-template *ngIf="footerTemplate"
+                                        ngFor [ngForOf]="[data]"
+                                        [ngForTemplate]="footerTemplate">
+                            </ng-template>
+                            <div class="adf-login-action" *ngIf="!footerTemplate && showLoginActions">
+                                <div id="adf-login-action-left" class="adf-login-action-left">
+                                    <a href="{{needHelpLink}}">{{'LOGIN.ACTION.HELP' | translate }}</a>
+                                </div>
+                                <div id="adf-login-action-right" class="adf-login-action-right">
+                                    <a href="{{registerLink}}">{{'LOGIN.ACTION.REGISTER' | translate }}</a>
+                                </div>
+                            </div>
+                        </div>
+                    </mat-card-actions>
+
+                </form>
+            </mat-card>
+
+            <div class="copyright" data-automation-id="login-copyright">
+                {{ copyrightText }}
+            </div>
+
+        </div>
+     </div>
 </div>

ng2-components/ng2-alfresco-login/src/components/login.component.scss

@@ -6,36 +6,45 @@
     $foreground: map-get($theme, foreground);
     $text-color-primary: mat-color($foreground, text);
 
-    .ie11FlexCenterAlignFix {
-        height: 100%;
-    }
-
     .adf-login-content {
-        @extend .ie11FlexCenterAlignFix;
-        min-height: 100%;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-flow: row wrap;
-        -ms-flex-flow: row wrap;
-        flex-flow: row wrap;
-        margin: 0 auto;
-        -webkit-align-items: stretch;
-        -ms-flex-align: stretch;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-flow: row wrap;
-        -ms-flex-flow: row wrap;
-        flex-flow: row wrap;
         background-size: cover;
         background-position: center;
-        padding: 0;
-        -webkit-box-orient: vertical;
-        -moz-box-orient: vertical;
-        flex-direction: column;
+        min-height: 100%;
+        min-width: 450px;
+        display: flex;
         justify-content: center;
-        align-items: center;
+        flex-direction: column;
+
+        // IE11 vertical centering
+        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+            & {
+                display: table;
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .ie11FixerParent {
+            margin-top: 16px;
+            min-width: 350px;
+
+            // IE11 vertical centering
+            @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+                display: table-cell;
+                vertical-align: middle;
+                width: 100%;
+                padding-top: 16px;
+            }
+        }
+
+        // IE11 vertical centering
+        .ie11FixerChild {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center
+        }
 
         .show {
             display: block !important;
@@ -196,7 +205,7 @@
         .copyright {
             width: 450px;
             text-align: center;
-            padding-top: 16px;
+            padding: 16px 0;
             font-size: 12px;
             opacity: 0.54;
         }