inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* IE11 vertical centering fix

* Material design way of typography

* Remove material design lite from demo shell
This commit is contained in:
Popovics András 2017-10-31 10:10:00 +00:00 committed by Eugenio Romano
parent 3240929dd3
commit 641c382711
17 changed files with 201 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demo-shell-ng2/.angular-cli.json
View File

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

1
demo-shell-ng2/package.json
View File

@ -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",

7
demo-shell-ng2/src/custom-style.scss
View File

@ -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);

14
demo-shell-ng2/src/styles.scss
View File

@ -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;
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);
}

7
ng2-components/ng2-alfresco-core/styles/_theming.scss
View File

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

19
ng2-components/ng2-alfresco-core/styles/_typography.scss Normal file
View File

@ -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)
);

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

@ -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);

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

@ -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);

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

@ -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);

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

@ -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);

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

@ -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);

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

@ -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);

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

@ -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);

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

@ -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);

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

@ -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);

9
ng2-components/ng2-alfresco-login/src/components/login.component.html
View File

@ -1,5 +1,7 @@
<div class="adf-login-content"
[style.background-image]="'url(' + backgroundImageUrl + ')'">
<div class="adf-login-content" [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>

61
ng2-components/ng2-alfresco-login/src/components/login.component.scss
View File

@ -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;
min-height: 100%;
min-width: 450px;
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;
}