diff --git a/demo-shell-ng2/app/components/files/files.component.ts b/demo-shell-ng2/app/components/files/files.component.ts index af6eae15a1..3fa085b210 100644 --- a/demo-shell-ng2/app/components/files/files.component.ts +++ b/demo-shell-ng2/app/components/files/files.component.ts @@ -133,7 +133,7 @@ export class FilesComponent implements OnInit { }); } - this.uploadService.fileUploadComplete.debounceTime(300).subscribe(value => this.onFileUploadEvent(value)); + this.uploadService.fileUploadComplete.asObservable().debounceTime(300).subscribe(value => this.onFileUploadEvent(value)); this.uploadService.fileUploadDeleted.subscribe((value) => this.onFileUploadEvent(value)); this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value)); diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json index 1a16863320..9a53670601 100644 --- a/demo-shell-ng2/package.json +++ b/demo-shell-ng2/package.json @@ -143,7 +143,7 @@ "ts-loader": "2.2.1", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json index ff16f377a5..8179ed5918 100644 --- a/ng2-components/ng2-activiti-analytics/package.json +++ b/ng2-components/ng2-activiti-analytics/package.json @@ -110,7 +110,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-activiti-diagrams/package.json b/ng2-components/ng2-activiti-diagrams/package.json index 7381044fdb..6b06f70aaa 100644 --- a/ng2-components/ng2-activiti-diagrams/package.json +++ b/ng2-components/ng2-activiti-diagrams/package.json @@ -102,7 +102,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-activiti-form/package.json b/ng2-components/ng2-activiti-form/package.json index 22164e75a6..674c11f04b 100644 --- a/ng2-components/ng2-activiti-form/package.json +++ b/ng2-components/ng2-activiti-form/package.json @@ -109,7 +109,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-activiti-processlist/package.json b/ng2-components/ng2-activiti-processlist/package.json index c1ac3d41b1..bf20d2b1b8 100644 --- a/ng2-components/ng2-activiti-processlist/package.json +++ b/ng2-components/ng2-activiti-processlist/package.json @@ -111,7 +111,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-activiti-tasklist/package.json b/ng2-components/ng2-activiti-tasklist/package.json index 04b67af598..958b585025 100644 --- a/ng2-components/ng2-activiti-tasklist/package.json +++ b/ng2-components/ng2-activiti-tasklist/package.json @@ -115,7 +115,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json index cc4235ef51..a366dcc521 100644 --- a/ng2-components/ng2-alfresco-core/package.json +++ b/ng2-components/ng2-alfresco-core/package.json @@ -117,7 +117,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css index f808aeda21..57beb2be35 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #2196f3; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #ff9800; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #2196f3; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #ff9800; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #2196f3; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #2196f3; + color: white; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #ff9800; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #2196f3; - color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #ff9800; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #2196f3; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #ff9800; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #ff9800; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #2196f3; } + .mat-form-field-ripple.mat-accent { + background-color: #ff9800; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #2196f3; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #2196f3; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #ff9800; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #ff9800; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #2196f3; } - .mat-input-ripple.mat-accent { - background-color: #ff9800; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #2196f3; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #ff9800; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(187, 222, 251, 0.3); } - -.mat-ink-bar { - background-color: #2196f3; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(187, 222, 251, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #2196f3; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(255, 224, 178, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #ff9800; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(187, 222, 251, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #2196f3; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(255, 224, 178, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #ff9800; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #ff9800; } + .adf-panel-heading { float: left; font-size: 14px; @@ -2630,7 +2870,7 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { - color: #33afdfnpm np; } + color: #ff9800; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { @@ -3108,8 +3348,7 @@ adf-file-uploading-list-row:not(:first-child) { line-height: 18px; display: block; padding: 0; - margin: 0; - color: #82b1ff; } + margin: 0; } .adf-userinfo__detail-title { text-overflow: ellipsis; @@ -3160,8 +3399,8 @@ adf-file-uploading-list-row:not(:first-child) { margin-right: 10px; border-radius: 50%; height: 32px; - min-width: 20px; width: 32px; + min-width: 20px; padding: 0; overflow: hidden; color: inherit; @@ -3178,6 +3417,8 @@ adf-file-uploading-list-row:not(:first-child) { width: 100%; } .adf-search-container .adf-search-field .mat-input-underline .mat-input-ripple { background-color: white; } + .adf-search-container .adf-search-field .mat-form-field-underline { + background-color: white; } .adf-search-container .adf-search-field .mat-input-element { font-size: 16px; } .adf-search-container .adf-search-field .mat-input-infix { diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css index 1912ae3c3b..86361b6287 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #2196f3; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #3f51b5; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #2196f3; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #3f51b5; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #2196f3; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #2196f3; + color: white; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #3f51b5; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #2196f3; - color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #3f51b5; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #2196f3; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #3f51b5; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #3f51b5; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #2196f3; } + .mat-form-field-ripple.mat-accent { + background-color: #3f51b5; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #2196f3; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #2196f3; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #3f51b5; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #3f51b5; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #2196f3; } - .mat-input-ripple.mat-accent { - background-color: #3f51b5; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #2196f3; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #3f51b5; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(187, 222, 251, 0.3); } - -.mat-ink-bar { - background-color: #2196f3; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(187, 222, 251, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #2196f3; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #3f51b5; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(187, 222, 251, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #2196f3; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #3f51b5; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #3f51b5; } + .adf-panel-heading { float: left; font-size: 14px; @@ -2630,7 +2870,7 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { - color: #33afdfnpm np; } + color: #3f51b5; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { @@ -3108,8 +3348,7 @@ adf-file-uploading-list-row:not(:first-child) { line-height: 18px; display: block; padding: 0; - margin: 0; - color: #82b1ff; } + margin: 0; } .adf-userinfo__detail-title { text-overflow: ellipsis; @@ -3160,8 +3399,8 @@ adf-file-uploading-list-row:not(:first-child) { margin-right: 10px; border-radius: 50%; height: 32px; - min-width: 20px; width: 32px; + min-width: 20px; padding: 0; overflow: hidden; color: inherit; @@ -3178,6 +3417,8 @@ adf-file-uploading-list-row:not(:first-child) { width: 100%; } .adf-search-container .adf-search-field .mat-input-underline .mat-input-ripple { background-color: white; } + .adf-search-container .adf-search-field .mat-form-field-underline { + background-color: white; } .adf-search-container .adf-search-field .mat-input-element { font-size: 16px; } .adf-search-container .adf-search-field .mat-input-infix { diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css index 9003d394ac..4c8acca0a4 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #00bcd4; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #ff9800; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #00bcd4; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #ff9800; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #00bcd4; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #00bcd4; + color: white; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #ff9800; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #00bcd4; - color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #ff9800; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #00bcd4; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #ff9800; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #ff9800; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #00bcd4; } + .mat-form-field-ripple.mat-accent { + background-color: #ff9800; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #00bcd4; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #00bcd4; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #ff9800; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #ff9800; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #00bcd4; } - .mat-input-ripple.mat-accent { - background-color: #ff9800; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #00bcd4; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #ff9800; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(178, 235, 242, 0.3); } - -.mat-ink-bar { - background-color: #00bcd4; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(178, 235, 242, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #00bcd4; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(255, 224, 178, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #ff9800; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(178, 235, 242, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #00bcd4; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(255, 224, 178, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #ff9800; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #ff9800; } + .adf-panel-heading { float: left; font-size: 14px; @@ -2630,7 +2870,7 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { - color: #33afdfnpm np; } + color: #ff9800; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { @@ -3108,8 +3348,7 @@ adf-file-uploading-list-row:not(:first-child) { line-height: 18px; display: block; padding: 0; - margin: 0; - color: #84ffff; } + margin: 0; } .adf-userinfo__detail-title { text-overflow: ellipsis; @@ -3160,8 +3399,8 @@ adf-file-uploading-list-row:not(:first-child) { margin-right: 10px; border-radius: 50%; height: 32px; - min-width: 20px; width: 32px; + min-width: 20px; padding: 0; overflow: hidden; color: inherit; @@ -3178,6 +3417,8 @@ adf-file-uploading-list-row:not(:first-child) { width: 100%; } .adf-search-container .adf-search-field .mat-input-underline .mat-input-ripple { background-color: white; } + .adf-search-container .adf-search-field .mat-form-field-underline { + background-color: white; } .adf-search-container .adf-search-field .mat-input-element { font-size: 16px; } .adf-search-container .adf-search-field .mat-input-infix { diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css index e3aa775937..ff79c4ee9c 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #00bcd4; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #3f51b5; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #00bcd4; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #3f51b5; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #00bcd4; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #00bcd4; + color: white; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #3f51b5; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #00bcd4; - color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #3f51b5; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #00bcd4; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #3f51b5; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #3f51b5; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #00bcd4; } + .mat-form-field-ripple.mat-accent { + background-color: #3f51b5; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #00bcd4; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #00bcd4; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #3f51b5; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #3f51b5; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #00bcd4; } - .mat-input-ripple.mat-accent { - background-color: #3f51b5; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #00bcd4; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #3f51b5; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(178, 235, 242, 0.3); } - -.mat-ink-bar { - background-color: #00bcd4; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(178, 235, 242, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #00bcd4; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #3f51b5; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(178, 235, 242, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #00bcd4; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #3f51b5; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #3f51b5; } + .adf-panel-heading { float: left; font-size: 14px; @@ -2630,7 +2870,7 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { - color: #33afdfnpm np; } + color: #3f51b5; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { @@ -3108,8 +3348,7 @@ adf-file-uploading-list-row:not(:first-child) { line-height: 18px; display: block; padding: 0; - margin: 0; - color: #84ffff; } + margin: 0; } .adf-userinfo__detail-title { text-overflow: ellipsis; @@ -3160,8 +3399,8 @@ adf-file-uploading-list-row:not(:first-child) { margin-right: 10px; border-radius: 50%; height: 32px; - min-width: 20px; width: 32px; + min-width: 20px; padding: 0; overflow: hidden; color: inherit; @@ -3178,6 +3417,8 @@ adf-file-uploading-list-row:not(:first-child) { width: 100%; } .adf-search-container .adf-search-field .mat-input-underline .mat-input-ripple { background-color: white; } + .adf-search-container .adf-search-field .mat-form-field-underline { + background-color: white; } .adf-search-container .adf-search-field .mat-input-element { font-size: 16px; } .adf-search-container .adf-search-field .mat-input-infix { diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css index 3024494b67..9ab7c89dfa 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #8bc34a; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #ff9800; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #8bc34a; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #ff9800; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #8bc34a; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #8bc34a; + color: rgba(0, 0, 0, 0.87); } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #ff9800; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #8bc34a; - color: rgba(0, 0, 0, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #ff9800; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #8bc34a; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #ff9800; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #ff9800; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #8bc34a; } + .mat-form-field-ripple.mat-accent { + background-color: #ff9800; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #8bc34a; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #8bc34a; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #ff9800; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #ff9800; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #8bc34a; } - .mat-input-ripple.mat-accent { - background-color: #ff9800; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #8bc34a; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #ff9800; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(220, 237, 200, 0.3); } - -.mat-ink-bar { - background-color: #8bc34a; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(220, 237, 200, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #8bc34a; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(255, 224, 178, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #ff9800; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(220, 237, 200, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #8bc34a; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: rgba(0, 0, 0, 0.87); } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(255, 224, 178, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #ff9800; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #ff9800; } + .adf-panel-heading { float: left; font-size: 14px; @@ -2630,7 +2870,7 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { - color: #33afdfnpm np; } + color: #ff9800; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { @@ -3108,8 +3348,7 @@ adf-file-uploading-list-row:not(:first-child) { line-height: 18px; display: block; padding: 0; - margin: 0; - color: #ccff90; } + margin: 0; } .adf-userinfo__detail-title { text-overflow: ellipsis; @@ -3160,8 +3399,8 @@ adf-file-uploading-list-row:not(:first-child) { margin-right: 10px; border-radius: 50%; height: 32px; - min-width: 20px; width: 32px; + min-width: 20px; padding: 0; overflow: hidden; color: inherit; @@ -3178,6 +3417,8 @@ adf-file-uploading-list-row:not(:first-child) { width: 100%; } .adf-search-container .adf-search-field .mat-input-underline .mat-input-ripple { background-color: white; } + .adf-search-container .adf-search-field .mat-form-field-underline { + background-color: white; } .adf-search-container .adf-search-field .mat-input-element { font-size: 16px; } .adf-search-container .adf-search-field .mat-input-infix { diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css index 4c768ac0c4..ec8b6ceba1 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #8bc34a; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #3f51b5; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #8bc34a; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #3f51b5; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #8bc34a; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #8bc34a; + color: rgba(0, 0, 0, 0.87); } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #3f51b5; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #8bc34a; - color: rgba(0, 0, 0, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #3f51b5; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #8bc34a; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #3f51b5; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #3f51b5; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #8bc34a; } + .mat-form-field-ripple.mat-accent { + background-color: #3f51b5; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #8bc34a; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #8bc34a; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #3f51b5; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #3f51b5; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #8bc34a; } - .mat-input-ripple.mat-accent { - background-color: #3f51b5; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #8bc34a; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #3f51b5; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(220, 237, 200, 0.3); } - -.mat-ink-bar { - background-color: #8bc34a; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(220, 237, 200, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #8bc34a; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #3f51b5; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(220, 237, 200, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #8bc34a; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: rgba(0, 0, 0, 0.87); } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #3f51b5; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #3f51b5; } + .adf-panel-heading { float: left; font-size: 14px; @@ -2630,7 +2870,7 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { - color: #33afdfnpm np; } + color: #3f51b5; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { @@ -3108,8 +3348,7 @@ adf-file-uploading-list-row:not(:first-child) { line-height: 18px; display: block; padding: 0; - margin: 0; - color: #ccff90; } + margin: 0; } .adf-userinfo__detail-title { text-overflow: ellipsis; @@ -3160,8 +3399,8 @@ adf-file-uploading-list-row:not(:first-child) { margin-right: 10px; border-radius: 50%; height: 32px; - min-width: 20px; width: 32px; + min-width: 20px; padding: 0; overflow: hidden; color: inherit; @@ -3178,6 +3417,8 @@ adf-file-uploading-list-row:not(:first-child) { width: 100%; } .adf-search-container .adf-search-field .mat-input-underline .mat-input-ripple { background-color: white; } + .adf-search-container .adf-search-field .mat-form-field-underline { + background-color: white; } .adf-search-container .adf-search-field .mat-input-element { font-size: 16px; } .adf-search-container .adf-search-field .mat-input-infix { diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css index 87bcdb9c22..dfadd8a74c 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #3f51b5; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #ff4081; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #3f51b5; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #ff4081; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #3f51b5; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #3f51b5; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #3f51b5; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #ff4081; - color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #ff4081; + color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #3f51b5; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #ff4081; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #ff4081; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #3f51b5; } + .mat-form-field-ripple.mat-accent { + background-color: #ff4081; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #3f51b5; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #3f51b5; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #ff4081; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #ff4081; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #3f51b5; } - .mat-input-ripple.mat-accent { - background-color: #ff4081; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #3f51b5; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #ff4081; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(197, 202, 233, 0.3); } - -.mat-ink-bar { - background-color: #3f51b5; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #3f51b5; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(255, 128, 171, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #ff4081; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #3f51b5; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(255, 128, 171, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #ff4081; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #ff4081; } + .adf-panel-heading { float: left; font-size: 14px; @@ -2630,7 +2870,7 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { - color: #33afdfnpm np; } + color: #ff4081; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { @@ -3108,8 +3348,7 @@ adf-file-uploading-list-row:not(:first-child) { line-height: 18px; display: block; padding: 0; - margin: 0; - color: #8c9eff; } + margin: 0; } .adf-userinfo__detail-title { text-overflow: ellipsis; @@ -3160,8 +3399,8 @@ adf-file-uploading-list-row:not(:first-child) { margin-right: 10px; border-radius: 50%; height: 32px; - min-width: 20px; width: 32px; + min-width: 20px; padding: 0; overflow: hidden; color: inherit; @@ -3178,6 +3417,8 @@ adf-file-uploading-list-row:not(:first-child) { width: 100%; } .adf-search-container .adf-search-field .mat-input-underline .mat-input-ripple { background-color: white; } + .adf-search-container .adf-search-field .mat-form-field-underline { + background-color: white; } .adf-search-container .adf-search-field .mat-input-element { font-size: 16px; } .adf-search-container .adf-search-field .mat-input-infix { diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css index ef9d7e24a8..9941f10968 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: white; } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(255, 255, 255, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #c2185b; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #b0bec5; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(255, 255, 255, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #303030; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #c2185b; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #b0bec5; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #c2185b; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #686868; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #212121; - color: white; } + color: rgba(255, 255, 255, 0.7); } .mat-button-toggle-disabled { background-color: black; @@ -1018,21 +1113,40 @@ background-color: rgba(244, 67, 54, 0.26); } .mat-chip:not(.mat-basic-chip) { - background-color: #424242; + background-color: #616161; color: white; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #212121; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #c2185b; + color: rgba(255, 255, 255, 0.87); } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #c2185b; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #b0bec5; - color: rgba(0, 0, 0, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #b0bec5; + color: rgba(0, 0, 0, 0.87); } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: #424242; } @@ -1103,19 +1217,68 @@ .mat-action-row { border-top-color: rgba(255, 255, 255, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(255, 255, 255, 0.04); } .mat-expansion-panel-header-title { color: white; } -.mat-expansion-panel-header-description { - color: rgba(255, 255, 255, 0.7); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(255, 255, 255, 0.7); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(255, 255, 255, 0.3); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(255, 255, 255, 0.7); } + +.mat-hint { + color: rgba(255, 255, 255, 0.7); } + +.mat-focused .mat-form-field-placeholder { + color: #c2185b; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #b0bec5; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #b0bec5; } + +.mat-form-field-underline { + background-color: rgba(255, 255, 255, 0.7); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #c2185b; } + .mat-form-field-ripple.mat-accent { + background-color: #b0bec5; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #c2185b; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(255, 255, 255, 0.3); } - -.mat-focused .mat-input-placeholder { - color: #c2185b; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #b0bec5; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.7); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #b0bec5; } - -.mat-input-underline { - background-color: rgba(255, 255, 255, 0.12); } - -.mat-input-ripple { - background-color: #c2185b; } - .mat-input-ripple.mat-accent { - background-color: #b0bec5; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: white; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: white; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(255, 255, 255, 0.7); } +.mat-list-item-disabled { + background-color: black; } + .mat-divider { border-top-color: rgba(255, 255, 255, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(255, 255, 255, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(255, 255, 255, 0.04); } + +.mat-menu-panel { background: #424242; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: white; } .mat-menu-item[disabled] { color: rgba(255, 255, 255, 0.3); } - .mat-menu-item .mat-icon { - color: white; - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(255, 255, 255, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: white; } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(255, 255, 255, 0.04); } .mat-paginator { background: #424242; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.7); } .mat-select-underline { - background-color: rgba(255, 255, 255, 0.12); } + background-color: rgba(255, 255, 255, 0.7); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.7); } .mat-select-content, .mat-select-panel-done-animating { background: #424242; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: white; } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(255, 255, 255, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #c2185b; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #b0bec5; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #303030; color: white; } -.mat-sidenav { +.mat-drawer { background-color: #424242; color: white; } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: #424242; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(189, 189, 189, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(233, 30, 99, 0.3); } - -.mat-ink-bar { - background-color: #c2185b; } - .mat-tab-label, .mat-tab-link { color: white; } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(255, 255, 255, 0.3); } +.mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.3); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(233, 30, 99, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #c2185b; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(207, 216, 220, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #b0bec5; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(233, 30, 99, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #c2185b; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(207, 216, 220, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #b0bec5; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(0, 0, 0, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: #212121; color: white; } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #fafafa; + color: rgba(0, 0, 0, 0.87); } + +.mat-simple-snackbar-action { + color: inherit; } + .adf-panel-heading { float: left; font-size: 14px; @@ -2630,7 +2870,7 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { - color: #33afdfnpm np; } + color: #b0bec5; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { @@ -3108,8 +3348,7 @@ adf-file-uploading-list-row:not(:first-child) { line-height: 18px; display: block; padding: 0; - margin: 0; - color: #ff80ab; } + margin: 0; } .adf-userinfo__detail-title { text-overflow: ellipsis; @@ -3160,8 +3399,8 @@ adf-file-uploading-list-row:not(:first-child) { margin-right: 10px; border-radius: 50%; height: 32px; - min-width: 20px; width: 32px; + min-width: 20px; padding: 0; overflow: hidden; color: inherit; @@ -3178,6 +3417,8 @@ adf-file-uploading-list-row:not(:first-child) { width: 100%; } .adf-search-container .adf-search-field .mat-input-underline .mat-input-ripple { background-color: #424242; } + .adf-search-container .adf-search-field .mat-form-field-underline { + background-color: #424242; } .adf-search-container .adf-search-field .mat-input-element { font-size: 16px; } .adf-search-container .adf-search-field .mat-input-infix { diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css index 5ccdb09424..00a93c96b8 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: white; } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(255, 255, 255, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #7b1fa2; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #69f0ae; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(255, 255, 255, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #303030; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #7b1fa2; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #69f0ae; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #7b1fa2; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #686868; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #212121; - color: white; } + color: rgba(255, 255, 255, 0.7); } .mat-button-toggle-disabled { background-color: black; @@ -1018,21 +1113,40 @@ background-color: rgba(244, 67, 54, 0.26); } .mat-chip:not(.mat-basic-chip) { - background-color: #424242; + background-color: #616161; color: white; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #212121; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #7b1fa2; + color: rgba(255, 255, 255, 0.87); } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #7b1fa2; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #69f0ae; - color: rgba(0, 0, 0, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #69f0ae; + color: rgba(0, 0, 0, 0.87); } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: #424242; } @@ -1103,19 +1217,68 @@ .mat-action-row { border-top-color: rgba(255, 255, 255, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(255, 255, 255, 0.04); } .mat-expansion-panel-header-title { color: white; } -.mat-expansion-panel-header-description { - color: rgba(255, 255, 255, 0.7); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(255, 255, 255, 0.7); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(255, 255, 255, 0.3); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(255, 255, 255, 0.7); } + +.mat-hint { + color: rgba(255, 255, 255, 0.7); } + +.mat-focused .mat-form-field-placeholder { + color: #7b1fa2; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #69f0ae; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #69f0ae; } + +.mat-form-field-underline { + background-color: rgba(255, 255, 255, 0.7); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #7b1fa2; } + .mat-form-field-ripple.mat-accent { + background-color: #69f0ae; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #7b1fa2; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(255, 255, 255, 0.3); } - -.mat-focused .mat-input-placeholder { - color: #7b1fa2; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #69f0ae; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.7); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #69f0ae; } - -.mat-input-underline { - background-color: rgba(255, 255, 255, 0.12); } - -.mat-input-ripple { - background-color: #7b1fa2; } - .mat-input-ripple.mat-accent { - background-color: #69f0ae; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: white; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: white; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(255, 255, 255, 0.7); } +.mat-list-item-disabled { + background-color: black; } + .mat-divider { border-top-color: rgba(255, 255, 255, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(255, 255, 255, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(255, 255, 255, 0.04); } + +.mat-menu-panel { background: #424242; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: white; } .mat-menu-item[disabled] { color: rgba(255, 255, 255, 0.3); } - .mat-menu-item .mat-icon { - color: white; - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(255, 255, 255, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: white; } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(255, 255, 255, 0.04); } .mat-paginator { background: #424242; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.7); } .mat-select-underline { - background-color: rgba(255, 255, 255, 0.12); } + background-color: rgba(255, 255, 255, 0.7); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.7); } .mat-select-content, .mat-select-panel-done-animating { background: #424242; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: white; } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(255, 255, 255, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #7b1fa2; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #69f0ae; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #303030; color: white; } -.mat-sidenav { +.mat-drawer { background-color: #424242; color: white; } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: #424242; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(189, 189, 189, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(156, 39, 176, 0.3); } - -.mat-ink-bar { - background-color: #7b1fa2; } - .mat-tab-label, .mat-tab-link { color: white; } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(255, 255, 255, 0.3); } +.mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.3); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(156, 39, 176, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #7b1fa2; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(185, 246, 202, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #69f0ae; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(156, 39, 176, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #7b1fa2; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(185, 246, 202, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #69f0ae; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(0, 0, 0, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: #212121; color: white; } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #fafafa; + color: rgba(0, 0, 0, 0.87); } + +.mat-simple-snackbar-action { + color: inherit; } + .adf-panel-heading { float: left; font-size: 14px; @@ -2630,7 +2870,7 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { - color: #33afdfnpm np; } + color: #69f0ae; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { @@ -3108,8 +3348,7 @@ adf-file-uploading-list-row:not(:first-child) { line-height: 18px; display: block; padding: 0; - margin: 0; - color: #ea80fc; } + margin: 0; } .adf-userinfo__detail-title { text-overflow: ellipsis; @@ -3160,8 +3399,8 @@ adf-file-uploading-list-row:not(:first-child) { margin-right: 10px; border-radius: 50%; height: 32px; - min-width: 20px; width: 32px; + min-width: 20px; padding: 0; overflow: hidden; color: inherit; @@ -3178,6 +3417,8 @@ adf-file-uploading-list-row:not(:first-child) { width: 100%; } .adf-search-container .adf-search-field .mat-input-underline .mat-input-ripple { background-color: #424242; } + .adf-search-container .adf-search-field .mat-form-field-underline { + background-color: #424242; } .adf-search-container .adf-search-field .mat-input-element { font-size: 16px; } .adf-search-container .adf-search-field .mat-input-infix { diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json index b47d26de88..894b12f282 100644 --- a/ng2-components/ng2-alfresco-datatable/package.json +++ b/ng2-components/ng2-alfresco-datatable/package.json @@ -107,7 +107,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md index a553d3e164..1ea7378ab1 100644 --- a/ng2-components/ng2-alfresco-documentlist/README.md +++ b/ng2-components/ng2-alfresco-documentlist/README.md @@ -12,6 +12,7 @@ Contains the Document List component and other related components and classes. + [Events](#events) * [Details](#details) + [DOM Events](#dom-events) + + [Pagination strategy](#pagination-strategy) + [Data Sources](#data-sources) - [Node ID](#node-id) - [Repository aliases](#repository-aliases) diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json index 6da174abe2..58650c4ec3 100644 --- a/ng2-components/ng2-alfresco-documentlist/package.json +++ b/ng2-components/ng2-alfresco-documentlist/package.json @@ -116,7 +116,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts index ca1b7395ad..ace9279741 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts @@ -50,7 +50,7 @@ describe('ContentColumnList', () => { })); beforeEach(() => { - documentList = TestBed.createComponent(DocumentListComponent).componentInstance; + documentList = (TestBed.createComponent(DocumentListComponent).componentInstance as DocumentListComponent); actionList = new ContentActionListComponent(documentList); }); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts index cbfd14e653..62e78e6566 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts @@ -71,7 +71,7 @@ describe('ContentAction', () => { documentActions = new DocumentActionsService(nodeActionsService); folderActions = new FolderActionsService(nodeActionsService, null, contentService); - documentList = TestBed.createComponent(DocumentListComponent).componentInstance; + documentList = (TestBed.createComponent(DocumentListComponent).componentInstance as DocumentListComponent); actionList = new ContentActionListComponent(documentList); }); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts index 9620725001..068c0fb549 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts @@ -50,7 +50,7 @@ describe('ContentColumnList', () => { })); beforeEach(() => { - documentList = TestBed.createComponent(DocumentListComponent).componentInstance; + documentList = (TestBed.createComponent(DocumentListComponent).componentInstance as DocumentListComponent); columnList = new ContentColumnListComponent(documentList); documentList.ngOnInit(); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts index 0fcb863d7c..82691c24be 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts @@ -50,7 +50,7 @@ describe('ContentColumn', () => { })); beforeEach(() => { - documentList = TestBed.createComponent(DocumentListComponent).componentInstance; + documentList = (TestBed.createComponent(DocumentListComponent).componentInstance as DocumentListComponent); columnList = new ContentColumnListComponent(documentList); documentList.ngOnInit(); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.directive.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.directive.spec.ts index dc8a015e85..2aaba46c73 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.directive.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.directive.spec.ts @@ -50,7 +50,7 @@ describe('EmptyFolderContent', () => { })); beforeEach(() => { - documentList = TestBed.createComponent(DocumentListComponent).componentInstance; + documentList = (TestBed.createComponent(DocumentListComponent).componentInstance as DocumentListComponent); documentList.dataTable = new DataTableComponent(null, null); emptyFolderContent = new EmptyFolderContentDirective(documentList); }); diff --git a/ng2-components/ng2-alfresco-login/package.json b/ng2-components/ng2-alfresco-login/package.json index 1edaabe571..d60f3b0062 100644 --- a/ng2-components/ng2-alfresco-login/package.json +++ b/ng2-components/ng2-alfresco-login/package.json @@ -118,7 +118,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-alfresco-search/package.json b/ng2-components/ng2-alfresco-search/package.json index 7a557ea927..e89bc4105b 100644 --- a/ng2-components/ng2-alfresco-search/package.json +++ b/ng2-components/ng2-alfresco-search/package.json @@ -117,7 +117,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-alfresco-search/src/components/search-control.component.ts b/ng2-components/ng2-alfresco-search/src/components/search-control.component.ts index 7b2bb4aad1..ac391e9552 100644 --- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.ts +++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.ts @@ -94,7 +94,7 @@ export class SearchControlComponent implements OnInit, OnDestroy { private focusSubject = new Subject(); - private toggleSearch = new Subject(); + private toggleSearch = new Subject(); subscriptAnimationState: string; @@ -104,7 +104,7 @@ export class SearchControlComponent implements OnInit, OnDestroy { Validators.compose([Validators.required, SearchTermValidator.minAlphanumericChars(3)]) ); - this.toggleSearch.debounceTime(200).subscribe(() => { + this.toggleSearch.asObservable().debounceTime(200).subscribe(() => { if (this.expandable) { this.subscriptAnimationState = this.subscriptAnimationState === 'inactive' ? 'active' : 'inactive'; diff --git a/ng2-components/ng2-alfresco-social/package.json b/ng2-components/ng2-alfresco-social/package.json index 7b5e51e11b..6f1d4e22d2 100644 --- a/ng2-components/ng2-alfresco-social/package.json +++ b/ng2-components/ng2-alfresco-social/package.json @@ -95,7 +95,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-alfresco-tag/package.json b/ng2-components/ng2-alfresco-tag/package.json index b21f113ee9..31abf6589e 100644 --- a/ng2-components/ng2-alfresco-tag/package.json +++ b/ng2-components/ng2-alfresco-tag/package.json @@ -95,7 +95,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-alfresco-upload/package.json b/ng2-components/ng2-alfresco-upload/package.json index fdc0bd8500..1cc24a6c2b 100644 --- a/ng2-components/ng2-alfresco-upload/package.json +++ b/ng2-components/ng2-alfresco-upload/package.json @@ -117,7 +117,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-alfresco-userinfo/package.json b/ng2-components/ng2-alfresco-userinfo/package.json index e0cd2d18fd..93b7fbe513 100644 --- a/ng2-components/ng2-alfresco-userinfo/package.json +++ b/ng2-components/ng2-alfresco-userinfo/package.json @@ -95,7 +95,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json index 34ec2ef4cf..a13d6550cb 100644 --- a/ng2-components/ng2-alfresco-viewer/package.json +++ b/ng2-components/ng2-alfresco-viewer/package.json @@ -111,7 +111,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/ng2-alfresco-webscript/package.json b/ng2-components/ng2-alfresco-webscript/package.json index ec07c6d643..969658c23a 100644 --- a/ng2-components/ng2-alfresco-webscript/package.json +++ b/ng2-components/ng2-alfresco-webscript/package.json @@ -96,7 +96,7 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", diff --git a/ng2-components/package.json b/ng2-components/package.json index c4aad7908e..edfe4271c9 100644 --- a/ng2-components/package.json +++ b/ng2-components/package.json @@ -129,6 +129,8 @@ "karma-systemjs": "0.16.0", "karma-webpack": "2.0.3", "loader-utils": "1.1.0", + "markdown-toc": "1.1.0", + "markdownlint-cli": "^0.3.1", "merge-stream": "1.0.1", "node-sass": "4.5.3", "null-loader": "0.1.1", @@ -148,13 +150,11 @@ "ts-node": "1.7.0", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.3.4", + "typescript": "2.5.2", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", - "wsrv": "0.1.7", - "markdown-toc": "1.1.0", - "markdownlint-cli": "^0.3.1" + "wsrv": "0.1.7" }, "license": "Apache-2.0", "module": "./index.js",