[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",
+        "styles.scss"
-        "custom-style.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();
+@include mat-core($alfresco-typography);
-
-$custom-typography: mat-typography-config(
-  $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-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 {
+@import '~@angular/material/theming';
-  line-height: normal;
+@import './custom-style.scss';
-}
 
 body, html {
-  height: 100%;
-  font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-body {
     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(
+@include mat-core($alfresco-typography);
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
 
 $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(
+@include mat-core($alfresco-typography);
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
 
 $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(
+@include mat-core($alfresco-typography);
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
 
 $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(
+@include mat-core($alfresco-typography);
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
 
 $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(
+@include mat-core($alfresco-typography);
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
 
 $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(
+@include mat-core($alfresco-typography);
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
 
 $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(
+@include mat-core($alfresco-typography);
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
 
 $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(
+@include mat-core($alfresco-typography);
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
 
 $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(
+@include mat-core($alfresco-typography);
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
-);
-@include angular-material-typography($custom-typography);
-
-@include mat-core();
 
 $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,5 +1,7 @@
-<div class="adf-login-content"
+<div class="adf-login-content" [style.background-image]="'url(' + backgroundImageUrl + ')'">
-     [style.background-image]="'url(' + backgroundImageUrl + ')'">
+     <div class="ie11FixerParent">
+         <div class="ie11FixerChild">
+
             <mat-card class="adf-login-card-wide">
                 <form [formGroup]="form" (submit)="onSubmit(form.value)">
 
@@ -124,4 +126,7 @@
             <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;
+        min-height: 100%;
-        -webkit-box-orient: vertical;
+        min-width: 450px;
-        -moz-box-orient: vertical;
+        display: flex;
+        justify-content: 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;
+            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;
         }