diff --git a/docs/document-list.component.md b/docs/document-list.component.md index 235da38a68..f59232fd99 100644 --- a/docs/document-list.component.md +++ b/docs/document-list.component.md @@ -73,6 +73,7 @@ The properties currentFolderId, folderNode and node are the entry initialization | currentFolderId | string | null | The ID of the folder node to display or a reserved string alias for special sources (see **Data Sources**) | | folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | null | Currently displayed folder node | | permissionsStyle | [PermissionStyleModel[]](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/src/models/permissions-style.model.ts) | null | with this array you can define different styles depending on the permission of the user on that node. The PermissionStyleModel allows you to select also if you want to apply the style only on the file or folder nodes. PermissionStyleModel.permission accepts the following values [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/development/ng2-components/ng2-alfresco-core/src/models/permissions.enum.ts) [see more](#custom-row-permissions-style). | +| paginationStrategy | PaginationStrategy | PaginationStrategy.Finite | The pagination type to be shown, can be Finite or Infinite | | node | [NodePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodePaging.md) | null | Document list will show all the nodes contained in the NodePaging entity | | navigate | boolean | true | Toggles navigation to folder content or file preview | | loading | boolean | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. | @@ -140,6 +141,13 @@ Below is a basic example of handling DOM events in the parent elements. ``` +### Pagination strategy + +The Document List by default supports 2 type of pagination, the **finite** and the **infinite** pagination. + +- With the **finite** pagination you got a normal pagination ui with information about the result's count, pages, and stepper arrows. On every pagination event the results will replace the previous list. +- With the **infinite** pagination there is only a "Load more" button at the end of your document list, and on every click (pagination event), the new results will be appended to the previous list. + ### Data Sources For the Document List data sources you can use one of the following options: 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 5e9dea53a0..c1e8888ec2 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-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,14 +137,9 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -171,66 +166,6 @@ .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; } @@ -245,14 +180,62 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -261,7 +244,6 @@ input.mat-input-element { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -271,7 +253,6 @@ input.mat-input-element { 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; } @@ -302,62 +283,33 @@ input.mat-input-element { .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -511,7 +463,7 @@ input.mat-input-element { font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -537,14 +489,9 @@ input.mat-input-element { .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -571,66 +518,6 @@ input.mat-input-element { .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; } @@ -645,14 +532,62 @@ input.mat-input-element { .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -661,7 +596,6 @@ input.mat-input-element { font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -671,7 +605,6 @@ input.mat-input-element { 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; } @@ -702,62 +635,33 @@ input.mat-input-element { .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -778,9 +682,6 @@ input.mat-input-element { .mat-ripple { overflow: hidden; } - @media screen and (-ms-high-contrast: active) { - .mat-ripple { - display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -827,11 +728,11 @@ input.mat-input-element { padding-right: 32px; } .mat-option-ripple { + position: absolute; top: 0; left: 0; - right: 0; bottom: 0; - position: absolute; + right: 0; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -876,6 +777,7 @@ input.mat-input-element { overflow: hidden; padding: 0; position: absolute; + text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -932,11 +834,11 @@ input.mat-input-element { 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-primary .mat-option.mat-selected { + .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { color: #2196f3; } - .mat-accent .mat-option.mat-selected { + .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { color: #ff9800; } - .mat-warn .mat-option.mat-selected { + .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -957,22 +859,25 @@ input.mat-input-element { .mat-pseudo-checkbox::after { color: #fafafa; } -.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-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-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-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 { @@ -1058,7 +963,7 @@ input.mat-input-element { .mat-button-toggle-checked { background-color: #e0e0e0; - color: rgba(0, 0, 0, 0.54); } + color: black; } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1115,38 +1020,19 @@ input.mat-input-element { .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.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; +.mat-chip.mat-chip-selected:not(.mat-basic-chip) { + background-color: #808080; color: rgba(255, 255, 255, 0.87); } - .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-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-table { background: white; } @@ -1212,73 +1098,24 @@ input.mat-input-element { .mat-expansion-panel { background: white; - color: rgba(0, 0, 0, 0.87); } + color: black; } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.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 { +.mat-expansion-panel-header:focus, +.mat-expansion-panel-header: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, +.mat-expansion-panel-header-description { + color: rgba(0, 0, 0, 0.54); } + .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; } @@ -1288,21 +1125,51 @@ input.mat-input-element { .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.42); } + color: rgba(0, 0, 0, 0.38); } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { +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 { color: rgba(0, 0, 0, 0.87); } -.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 { +.mat-list .mat-subheader, .mat-nav-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); } @@ -1311,12 +1178,7 @@ input.mat-input-element { .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-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 { +.mat-menu-content { background: white; } .mat-menu-item { @@ -1324,15 +1186,11 @@ input.mat-input-element { color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - -.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-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-paginator { background: white; } @@ -1427,20 +1285,15 @@ input.mat-input-element { .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-underline { - 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; } + background-color: rgba(0, 0, 0, 0.12); } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1448,9 +1301,6 @@ input.mat-input-element { .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; } @@ -1463,26 +1313,26 @@ input.mat-input-element { .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #ff9800; } -.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { +.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 { color: #f44336; } -.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 { +.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 { background-color: #f44336; } -.mat-drawer-container { +.mat-sidenav-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-drawer { +.mat-sidenav { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-drawer.mat-drawer-push { + .mat-sidenav.mat-sidenav-push { background-color: white; } -.mat-drawer-backdrop.mat-drawer-shown { +.mat-sidenav-backdrop.mat-sidenav-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1580,7 +1430,7 @@ input.mat-input-element { .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: rgba(0, 0, 0, 0.87); } + background-color: black; } .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 { @@ -1615,100 +1465,17 @@ input.mat-input-element { 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); } @@ -1725,13 +1492,6 @@ input.mat-input-element { .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; 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 a5715b1c9e..daf5b69f58 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-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,14 +137,9 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -171,66 +166,6 @@ .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; } @@ -245,14 +180,62 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -261,7 +244,6 @@ input.mat-input-element { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -271,7 +253,6 @@ input.mat-input-element { 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; } @@ -302,62 +283,33 @@ input.mat-input-element { .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -511,7 +463,7 @@ input.mat-input-element { font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -537,14 +489,9 @@ input.mat-input-element { .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -571,66 +518,6 @@ input.mat-input-element { .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; } @@ -645,14 +532,62 @@ input.mat-input-element { .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -661,7 +596,6 @@ input.mat-input-element { font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -671,7 +605,6 @@ input.mat-input-element { 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; } @@ -702,62 +635,33 @@ input.mat-input-element { .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -778,9 +682,6 @@ input.mat-input-element { .mat-ripple { overflow: hidden; } - @media screen and (-ms-high-contrast: active) { - .mat-ripple { - display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -827,11 +728,11 @@ input.mat-input-element { padding-right: 32px; } .mat-option-ripple { + position: absolute; top: 0; left: 0; - right: 0; bottom: 0; - position: absolute; + right: 0; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -876,6 +777,7 @@ input.mat-input-element { overflow: hidden; padding: 0; position: absolute; + text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -932,11 +834,11 @@ input.mat-input-element { 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-primary .mat-option.mat-selected { + .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { color: #2196f3; } - .mat-accent .mat-option.mat-selected { + .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { color: #3f51b5; } - .mat-warn .mat-option.mat-selected { + .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -957,22 +859,25 @@ input.mat-input-element { .mat-pseudo-checkbox::after { color: #fafafa; } -.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-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-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-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 { @@ -1058,7 +963,7 @@ input.mat-input-element { .mat-button-toggle-checked { background-color: #e0e0e0; - color: rgba(0, 0, 0, 0.54); } + color: black; } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1115,38 +1020,19 @@ input.mat-input-element { .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.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; +.mat-chip.mat-chip-selected:not(.mat-basic-chip) { + background-color: #808080; color: rgba(255, 255, 255, 0.87); } - .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-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-table { background: white; } @@ -1212,73 +1098,24 @@ input.mat-input-element { .mat-expansion-panel { background: white; - color: rgba(0, 0, 0, 0.87); } + color: black; } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.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 { +.mat-expansion-panel-header:focus, +.mat-expansion-panel-header: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, +.mat-expansion-panel-header-description { + color: rgba(0, 0, 0, 0.54); } + .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; } @@ -1288,21 +1125,51 @@ input.mat-input-element { .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.42); } + color: rgba(0, 0, 0, 0.38); } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { +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 { color: rgba(0, 0, 0, 0.87); } -.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 { +.mat-list .mat-subheader, .mat-nav-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); } @@ -1311,12 +1178,7 @@ input.mat-input-element { .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-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 { +.mat-menu-content { background: white; } .mat-menu-item { @@ -1324,15 +1186,11 @@ input.mat-input-element { color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - -.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-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-paginator { background: white; } @@ -1427,20 +1285,15 @@ input.mat-input-element { .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-underline { - 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; } + background-color: rgba(0, 0, 0, 0.12); } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1448,9 +1301,6 @@ input.mat-input-element { .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; } @@ -1463,26 +1313,26 @@ input.mat-input-element { .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #3f51b5; } -.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { +.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 { color: #f44336; } -.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 { +.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 { background-color: #f44336; } -.mat-drawer-container { +.mat-sidenav-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-drawer { +.mat-sidenav { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-drawer.mat-drawer-push { + .mat-sidenav.mat-sidenav-push { background-color: white; } -.mat-drawer-backdrop.mat-drawer-shown { +.mat-sidenav-backdrop.mat-sidenav-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1580,7 +1430,7 @@ input.mat-input-element { .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: rgba(0, 0, 0, 0.87); } + background-color: black; } .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 { @@ -1615,100 +1465,17 @@ input.mat-input-element { 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); } @@ -1725,13 +1492,6 @@ input.mat-input-element { .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; 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 5e73de67e5..d21590ce78 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-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,14 +137,9 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -171,66 +166,6 @@ .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; } @@ -245,14 +180,62 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -261,7 +244,6 @@ input.mat-input-element { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -271,7 +253,6 @@ input.mat-input-element { 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; } @@ -302,62 +283,33 @@ input.mat-input-element { .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -511,7 +463,7 @@ input.mat-input-element { font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -537,14 +489,9 @@ input.mat-input-element { .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -571,66 +518,6 @@ input.mat-input-element { .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; } @@ -645,14 +532,62 @@ input.mat-input-element { .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -661,7 +596,6 @@ input.mat-input-element { font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -671,7 +605,6 @@ input.mat-input-element { 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; } @@ -702,62 +635,33 @@ input.mat-input-element { .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -778,9 +682,6 @@ input.mat-input-element { .mat-ripple { overflow: hidden; } - @media screen and (-ms-high-contrast: active) { - .mat-ripple { - display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -827,11 +728,11 @@ input.mat-input-element { padding-right: 32px; } .mat-option-ripple { + position: absolute; top: 0; left: 0; - right: 0; bottom: 0; - position: absolute; + right: 0; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -876,6 +777,7 @@ input.mat-input-element { overflow: hidden; padding: 0; position: absolute; + text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -932,11 +834,11 @@ input.mat-input-element { 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-primary .mat-option.mat-selected { + .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { color: #00bcd4; } - .mat-accent .mat-option.mat-selected { + .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { color: #ff9800; } - .mat-warn .mat-option.mat-selected { + .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -957,22 +859,25 @@ input.mat-input-element { .mat-pseudo-checkbox::after { color: #fafafa; } -.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-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-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-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 { @@ -1058,7 +963,7 @@ input.mat-input-element { .mat-button-toggle-checked { background-color: #e0e0e0; - color: rgba(0, 0, 0, 0.54); } + color: black; } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1115,38 +1020,19 @@ input.mat-input-element { .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.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; +.mat-chip.mat-chip-selected:not(.mat-basic-chip) { + background-color: #808080; color: rgba(255, 255, 255, 0.87); } - .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-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-table { background: white; } @@ -1212,73 +1098,24 @@ input.mat-input-element { .mat-expansion-panel { background: white; - color: rgba(0, 0, 0, 0.87); } + color: black; } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.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 { +.mat-expansion-panel-header:focus, +.mat-expansion-panel-header: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, +.mat-expansion-panel-header-description { + color: rgba(0, 0, 0, 0.54); } + .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; } @@ -1288,21 +1125,51 @@ input.mat-input-element { .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.42); } + color: rgba(0, 0, 0, 0.38); } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { +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 { color: rgba(0, 0, 0, 0.87); } -.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 { +.mat-list .mat-subheader, .mat-nav-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); } @@ -1311,12 +1178,7 @@ input.mat-input-element { .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-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 { +.mat-menu-content { background: white; } .mat-menu-item { @@ -1324,15 +1186,11 @@ input.mat-input-element { color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - -.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-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-paginator { background: white; } @@ -1427,20 +1285,15 @@ input.mat-input-element { .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-underline { - 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; } + background-color: rgba(0, 0, 0, 0.12); } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1448,9 +1301,6 @@ input.mat-input-element { .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; } @@ -1463,26 +1313,26 @@ input.mat-input-element { .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #ff9800; } -.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { +.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 { color: #f44336; } -.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 { +.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 { background-color: #f44336; } -.mat-drawer-container { +.mat-sidenav-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-drawer { +.mat-sidenav { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-drawer.mat-drawer-push { + .mat-sidenav.mat-sidenav-push { background-color: white; } -.mat-drawer-backdrop.mat-drawer-shown { +.mat-sidenav-backdrop.mat-sidenav-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1580,7 +1430,7 @@ input.mat-input-element { .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: rgba(0, 0, 0, 0.87); } + background-color: black; } .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 { @@ -1615,100 +1465,17 @@ input.mat-input-element { 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); } @@ -1725,13 +1492,6 @@ input.mat-input-element { .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; 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 7daa158940..601a220177 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-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,14 +137,9 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -171,66 +166,6 @@ .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; } @@ -245,14 +180,62 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -261,7 +244,6 @@ input.mat-input-element { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -271,7 +253,6 @@ input.mat-input-element { 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; } @@ -302,62 +283,33 @@ input.mat-input-element { .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -511,7 +463,7 @@ input.mat-input-element { font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -537,14 +489,9 @@ input.mat-input-element { .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -571,66 +518,6 @@ input.mat-input-element { .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; } @@ -645,14 +532,62 @@ input.mat-input-element { .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -661,7 +596,6 @@ input.mat-input-element { font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -671,7 +605,6 @@ input.mat-input-element { 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; } @@ -702,62 +635,33 @@ input.mat-input-element { .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -778,9 +682,6 @@ input.mat-input-element { .mat-ripple { overflow: hidden; } - @media screen and (-ms-high-contrast: active) { - .mat-ripple { - display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -827,11 +728,11 @@ input.mat-input-element { padding-right: 32px; } .mat-option-ripple { + position: absolute; top: 0; left: 0; - right: 0; bottom: 0; - position: absolute; + right: 0; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -876,6 +777,7 @@ input.mat-input-element { overflow: hidden; padding: 0; position: absolute; + text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -932,11 +834,11 @@ input.mat-input-element { 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-primary .mat-option.mat-selected { + .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { color: #00bcd4; } - .mat-accent .mat-option.mat-selected { + .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { color: #3f51b5; } - .mat-warn .mat-option.mat-selected { + .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -957,22 +859,25 @@ input.mat-input-element { .mat-pseudo-checkbox::after { color: #fafafa; } -.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-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-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-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 { @@ -1058,7 +963,7 @@ input.mat-input-element { .mat-button-toggle-checked { background-color: #e0e0e0; - color: rgba(0, 0, 0, 0.54); } + color: black; } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1115,38 +1020,19 @@ input.mat-input-element { .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.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; +.mat-chip.mat-chip-selected:not(.mat-basic-chip) { + background-color: #808080; color: rgba(255, 255, 255, 0.87); } - .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-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-table { background: white; } @@ -1212,73 +1098,24 @@ input.mat-input-element { .mat-expansion-panel { background: white; - color: rgba(0, 0, 0, 0.87); } + color: black; } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.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 { +.mat-expansion-panel-header:focus, +.mat-expansion-panel-header: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, +.mat-expansion-panel-header-description { + color: rgba(0, 0, 0, 0.54); } + .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; } @@ -1288,21 +1125,51 @@ input.mat-input-element { .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.42); } + color: rgba(0, 0, 0, 0.38); } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { +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 { color: rgba(0, 0, 0, 0.87); } -.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 { +.mat-list .mat-subheader, .mat-nav-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); } @@ -1311,12 +1178,7 @@ input.mat-input-element { .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-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 { +.mat-menu-content { background: white; } .mat-menu-item { @@ -1324,15 +1186,11 @@ input.mat-input-element { color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - -.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-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-paginator { background: white; } @@ -1427,20 +1285,15 @@ input.mat-input-element { .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-underline { - 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; } + background-color: rgba(0, 0, 0, 0.12); } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1448,9 +1301,6 @@ input.mat-input-element { .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; } @@ -1463,26 +1313,26 @@ input.mat-input-element { .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #3f51b5; } -.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { +.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 { color: #f44336; } -.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 { +.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 { background-color: #f44336; } -.mat-drawer-container { +.mat-sidenav-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-drawer { +.mat-sidenav { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-drawer.mat-drawer-push { + .mat-sidenav.mat-sidenav-push { background-color: white; } -.mat-drawer-backdrop.mat-drawer-shown { +.mat-sidenav-backdrop.mat-sidenav-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1580,7 +1430,7 @@ input.mat-input-element { .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: rgba(0, 0, 0, 0.87); } + background-color: black; } .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 { @@ -1615,100 +1465,17 @@ input.mat-input-element { 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); } @@ -1725,13 +1492,6 @@ input.mat-input-element { .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; 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 0289f7b96d..48455652d4 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-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,14 +137,9 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -171,66 +166,6 @@ .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; } @@ -245,14 +180,62 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -261,7 +244,6 @@ input.mat-input-element { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -271,7 +253,6 @@ input.mat-input-element { 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; } @@ -302,62 +283,33 @@ input.mat-input-element { .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -511,7 +463,7 @@ input.mat-input-element { font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -537,14 +489,9 @@ input.mat-input-element { .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -571,66 +518,6 @@ input.mat-input-element { .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; } @@ -645,14 +532,62 @@ input.mat-input-element { .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -661,7 +596,6 @@ input.mat-input-element { font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -671,7 +605,6 @@ input.mat-input-element { 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; } @@ -702,62 +635,33 @@ input.mat-input-element { .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -778,9 +682,6 @@ input.mat-input-element { .mat-ripple { overflow: hidden; } - @media screen and (-ms-high-contrast: active) { - .mat-ripple { - display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -827,11 +728,11 @@ input.mat-input-element { padding-right: 32px; } .mat-option-ripple { + position: absolute; top: 0; left: 0; - right: 0; bottom: 0; - position: absolute; + right: 0; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -876,6 +777,7 @@ input.mat-input-element { overflow: hidden; padding: 0; position: absolute; + text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -932,11 +834,11 @@ input.mat-input-element { 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-primary .mat-option.mat-selected { + .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { color: #8bc34a; } - .mat-accent .mat-option.mat-selected { + .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { color: #ff9800; } - .mat-warn .mat-option.mat-selected { + .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -957,22 +859,25 @@ input.mat-input-element { .mat-pseudo-checkbox::after { color: #fafafa; } -.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-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-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-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 { @@ -1058,7 +963,7 @@ input.mat-input-element { .mat-button-toggle-checked { background-color: #e0e0e0; - color: rgba(0, 0, 0, 0.54); } + color: black; } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1115,38 +1020,19 @@ input.mat-input-element { .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.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; +.mat-chip.mat-chip-selected:not(.mat-basic-chip) { + background-color: #808080; color: rgba(255, 255, 255, 0.87); } - .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-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-table { background: white; } @@ -1212,73 +1098,24 @@ input.mat-input-element { .mat-expansion-panel { background: white; - color: rgba(0, 0, 0, 0.87); } + color: black; } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.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 { +.mat-expansion-panel-header:focus, +.mat-expansion-panel-header: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, +.mat-expansion-panel-header-description { + color: rgba(0, 0, 0, 0.54); } + .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; } @@ -1288,21 +1125,51 @@ input.mat-input-element { .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.42); } + color: rgba(0, 0, 0, 0.38); } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { +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 { color: rgba(0, 0, 0, 0.87); } -.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 { +.mat-list .mat-subheader, .mat-nav-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); } @@ -1311,12 +1178,7 @@ input.mat-input-element { .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-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 { +.mat-menu-content { background: white; } .mat-menu-item { @@ -1324,15 +1186,11 @@ input.mat-input-element { color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - -.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-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-paginator { background: white; } @@ -1427,20 +1285,15 @@ input.mat-input-element { .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-underline { - 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; } + background-color: rgba(0, 0, 0, 0.12); } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1448,9 +1301,6 @@ input.mat-input-element { .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; } @@ -1463,26 +1313,26 @@ input.mat-input-element { .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #ff9800; } -.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { +.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 { color: #f44336; } -.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 { +.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 { background-color: #f44336; } -.mat-drawer-container { +.mat-sidenav-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-drawer { +.mat-sidenav { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-drawer.mat-drawer-push { + .mat-sidenav.mat-sidenav-push { background-color: white; } -.mat-drawer-backdrop.mat-drawer-shown { +.mat-sidenav-backdrop.mat-sidenav-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1580,7 +1430,7 @@ input.mat-input-element { .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: rgba(0, 0, 0, 0.87); } + background-color: black; } .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 { @@ -1615,100 +1465,17 @@ input.mat-input-element { 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); } @@ -1725,13 +1492,6 @@ input.mat-input-element { .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; 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 cf19b237e6..c1516d427b 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-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,14 +137,9 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -171,66 +166,6 @@ .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; } @@ -245,14 +180,62 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -261,7 +244,6 @@ input.mat-input-element { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -271,7 +253,6 @@ input.mat-input-element { 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; } @@ -302,62 +283,33 @@ input.mat-input-element { .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -511,7 +463,7 @@ input.mat-input-element { font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -537,14 +489,9 @@ input.mat-input-element { .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -571,66 +518,6 @@ input.mat-input-element { .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; } @@ -645,14 +532,62 @@ input.mat-input-element { .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -661,7 +596,6 @@ input.mat-input-element { font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -671,7 +605,6 @@ input.mat-input-element { 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; } @@ -702,62 +635,33 @@ input.mat-input-element { .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -778,9 +682,6 @@ input.mat-input-element { .mat-ripple { overflow: hidden; } - @media screen and (-ms-high-contrast: active) { - .mat-ripple { - display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -827,11 +728,11 @@ input.mat-input-element { padding-right: 32px; } .mat-option-ripple { + position: absolute; top: 0; left: 0; - right: 0; bottom: 0; - position: absolute; + right: 0; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -876,6 +777,7 @@ input.mat-input-element { overflow: hidden; padding: 0; position: absolute; + text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -932,11 +834,11 @@ input.mat-input-element { 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-primary .mat-option.mat-selected { + .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { color: #8bc34a; } - .mat-accent .mat-option.mat-selected { + .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { color: #3f51b5; } - .mat-warn .mat-option.mat-selected { + .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -957,22 +859,25 @@ input.mat-input-element { .mat-pseudo-checkbox::after { color: #fafafa; } -.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-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-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-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 { @@ -1058,7 +963,7 @@ input.mat-input-element { .mat-button-toggle-checked { background-color: #e0e0e0; - color: rgba(0, 0, 0, 0.54); } + color: black; } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1115,38 +1020,19 @@ input.mat-input-element { .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.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; +.mat-chip.mat-chip-selected:not(.mat-basic-chip) { + background-color: #808080; color: rgba(255, 255, 255, 0.87); } - .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-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-table { background: white; } @@ -1212,73 +1098,24 @@ input.mat-input-element { .mat-expansion-panel { background: white; - color: rgba(0, 0, 0, 0.87); } + color: black; } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.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 { +.mat-expansion-panel-header:focus, +.mat-expansion-panel-header: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, +.mat-expansion-panel-header-description { + color: rgba(0, 0, 0, 0.54); } + .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; } @@ -1288,21 +1125,51 @@ input.mat-input-element { .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.42); } + color: rgba(0, 0, 0, 0.38); } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { +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 { color: rgba(0, 0, 0, 0.87); } -.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 { +.mat-list .mat-subheader, .mat-nav-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); } @@ -1311,12 +1178,7 @@ input.mat-input-element { .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-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 { +.mat-menu-content { background: white; } .mat-menu-item { @@ -1324,15 +1186,11 @@ input.mat-input-element { color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - -.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-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-paginator { background: white; } @@ -1427,20 +1285,15 @@ input.mat-input-element { .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-underline { - 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; } + background-color: rgba(0, 0, 0, 0.12); } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1448,9 +1301,6 @@ input.mat-input-element { .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; } @@ -1463,26 +1313,26 @@ input.mat-input-element { .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #3f51b5; } -.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { +.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 { color: #f44336; } -.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 { +.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 { background-color: #f44336; } -.mat-drawer-container { +.mat-sidenav-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-drawer { +.mat-sidenav { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-drawer.mat-drawer-push { + .mat-sidenav.mat-sidenav-push { background-color: white; } -.mat-drawer-backdrop.mat-drawer-shown { +.mat-sidenav-backdrop.mat-sidenav-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1580,7 +1430,7 @@ input.mat-input-element { .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: rgba(0, 0, 0, 0.87); } + background-color: black; } .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 { @@ -1615,100 +1465,17 @@ input.mat-input-element { 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); } @@ -1725,13 +1492,6 @@ input.mat-input-element { .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; 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 ff1e860a2e..0f5e5cbee0 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-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,14 +137,9 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -171,66 +166,6 @@ .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; } @@ -245,14 +180,62 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -261,7 +244,6 @@ input.mat-input-element { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -271,7 +253,6 @@ input.mat-input-element { 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; } @@ -302,62 +283,33 @@ input.mat-input-element { .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -511,7 +463,7 @@ input.mat-input-element { font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -537,14 +489,9 @@ input.mat-input-element { .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -571,66 +518,6 @@ input.mat-input-element { .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; } @@ -645,14 +532,62 @@ input.mat-input-element { .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -661,7 +596,6 @@ input.mat-input-element { font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -671,7 +605,6 @@ input.mat-input-element { 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; } @@ -702,62 +635,33 @@ input.mat-input-element { .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -778,9 +682,6 @@ input.mat-input-element { .mat-ripple { overflow: hidden; } - @media screen and (-ms-high-contrast: active) { - .mat-ripple { - display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -827,11 +728,11 @@ input.mat-input-element { padding-right: 32px; } .mat-option-ripple { + position: absolute; top: 0; left: 0; - right: 0; bottom: 0; - position: absolute; + right: 0; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -876,6 +777,7 @@ input.mat-input-element { overflow: hidden; padding: 0; position: absolute; + text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -932,11 +834,11 @@ input.mat-input-element { 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-primary .mat-option.mat-selected { + .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { color: #3f51b5; } - .mat-accent .mat-option.mat-selected { + .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { color: #ff4081; } - .mat-warn .mat-option.mat-selected { + .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -957,22 +859,25 @@ input.mat-input-element { .mat-pseudo-checkbox::after { color: #fafafa; } -.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-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-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-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 { @@ -1058,7 +963,7 @@ input.mat-input-element { .mat-button-toggle-checked { background-color: #e0e0e0; - color: rgba(0, 0, 0, 0.54); } + color: black; } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1115,38 +1020,19 @@ input.mat-input-element { .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.mat-primary { - background-color: #3f51b5; +.mat-chip.mat-chip-selected:not(.mat-basic-chip) { + background-color: #808080; 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.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-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-table { background: white; } @@ -1212,73 +1098,24 @@ input.mat-input-element { .mat-expansion-panel { background: white; - color: rgba(0, 0, 0, 0.87); } + color: black; } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.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 { +.mat-expansion-panel-header:focus, +.mat-expansion-panel-header: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, +.mat-expansion-panel-header-description { + color: rgba(0, 0, 0, 0.54); } + .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; } @@ -1288,21 +1125,51 @@ input.mat-input-element { .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.42); } + color: rgba(0, 0, 0, 0.38); } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { +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 { color: rgba(0, 0, 0, 0.87); } -.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 { +.mat-list .mat-subheader, .mat-nav-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); } @@ -1311,12 +1178,7 @@ input.mat-input-element { .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-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 { +.mat-menu-content { background: white; } .mat-menu-item { @@ -1324,15 +1186,11 @@ input.mat-input-element { color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - -.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-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-paginator { background: white; } @@ -1427,20 +1285,15 @@ input.mat-input-element { .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-underline { - 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; } + background-color: rgba(0, 0, 0, 0.12); } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.54); } + color: rgba(0, 0, 0, 0.38); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1448,9 +1301,6 @@ input.mat-input-element { .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; } @@ -1463,26 +1313,26 @@ input.mat-input-element { .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #ff4081; } -.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { +.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 { color: #f44336; } -.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 { +.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 { background-color: #f44336; } -.mat-drawer-container { +.mat-sidenav-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-drawer { +.mat-sidenav { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-drawer.mat-drawer-push { + .mat-sidenav.mat-sidenav-push { background-color: white; } -.mat-drawer-backdrop.mat-drawer-shown { +.mat-sidenav-backdrop.mat-sidenav-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1580,7 +1430,7 @@ input.mat-input-element { .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: rgba(0, 0, 0, 0.87); } + background-color: black; } .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 { @@ -1615,100 +1465,17 @@ input.mat-input-element { 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); } @@ -1725,13 +1492,6 @@ input.mat-input-element { .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; 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 3dd752adb3..69acf6f1fb 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-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,14 +137,9 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -171,66 +166,6 @@ .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; } @@ -245,14 +180,62 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -261,7 +244,6 @@ input.mat-input-element { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -271,7 +253,6 @@ input.mat-input-element { 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; } @@ -302,62 +283,33 @@ input.mat-input-element { .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -511,7 +463,7 @@ input.mat-input-element { font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -537,14 +489,9 @@ input.mat-input-element { .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -571,66 +518,6 @@ input.mat-input-element { .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; } @@ -645,14 +532,62 @@ input.mat-input-element { .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -661,7 +596,6 @@ input.mat-input-element { font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -671,7 +605,6 @@ input.mat-input-element { 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; } @@ -702,62 +635,33 @@ input.mat-input-element { .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -778,9 +682,6 @@ input.mat-input-element { .mat-ripple { overflow: hidden; } - @media screen and (-ms-high-contrast: active) { - .mat-ripple { - display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -827,11 +728,11 @@ input.mat-input-element { padding-right: 32px; } .mat-option-ripple { + position: absolute; top: 0; left: 0; - right: 0; bottom: 0; - position: absolute; + right: 0; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -876,6 +777,7 @@ input.mat-input-element { overflow: hidden; padding: 0; position: absolute; + text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -932,11 +834,11 @@ input.mat-input-element { color: white; } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(255, 255, 255, 0.04); } - .mat-primary .mat-option.mat-selected { + .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { color: #c2185b; } - .mat-accent .mat-option.mat-selected { + .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { color: #b0bec5; } - .mat-warn .mat-option.mat-selected { + .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(255, 255, 255, 0.04); } @@ -957,22 +859,25 @@ input.mat-input-element { .mat-pseudo-checkbox::after { color: #303030; } -.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-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-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-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 { @@ -1058,7 +963,7 @@ input.mat-input-element { .mat-button-toggle-checked { background-color: #212121; - color: rgba(255, 255, 255, 0.7); } + color: white; } .mat-button-toggle-disabled { background-color: black; @@ -1113,40 +1018,21 @@ input.mat-input-element { background-color: rgba(244, 67, 54, 0.26); } .mat-chip:not(.mat-basic-chip) { - background-color: #616161; + background-color: #424242; 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.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; +.mat-chip.mat-chip-selected:not(.mat-basic-chip) { + background-color: #212121; 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-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-table { background: #424242; } @@ -1217,68 +1103,19 @@ input.mat-input-element { .mat-action-row { border-top-color: rgba(255, 255, 255, 0.12); } -.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 { +.mat-expansion-panel-header:focus, +.mat-expansion-panel-header:hover { background: rgba(255, 255, 255, 0.04); } .mat-expansion-panel-header-title { color: white; } -.mat-expansion-panel-header-description, +.mat-expansion-panel-header-description { + color: rgba(255, 255, 255, 0.7); } + .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; } @@ -1288,21 +1125,51 @@ input.mat-input-element { .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.7); } + color: rgba(255, 255, 255, 0.3); } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { +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 { color: white; } -.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 { +.mat-list .mat-subheader, .mat-nav-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); } @@ -1311,12 +1178,7 @@ input.mat-input-element { .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-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 { +.mat-menu-content { background: #424242; } .mat-menu-item { @@ -1324,15 +1186,11 @@ input.mat-input-element { color: white; } .mat-menu-item[disabled] { color: rgba(255, 255, 255, 0.3); } - -.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-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-paginator { background: #424242; } @@ -1427,20 +1285,15 @@ input.mat-input-element { .mat-select-trigger, .mat-select-arrow { - color: rgba(255, 255, 255, 0.7); } + color: rgba(255, 255, 255, 0.3); } .mat-select-underline { - 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; } + background-color: rgba(255, 255, 255, 0.12); } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(255, 255, 255, 0.7); } + color: rgba(255, 255, 255, 0.3); } .mat-select-content, .mat-select-panel-done-animating { background: #424242; } @@ -1448,9 +1301,6 @@ input.mat-input-element { .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; } @@ -1463,26 +1313,26 @@ input.mat-input-element { .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #b0bec5; } -.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { +.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 { color: #f44336; } -.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 { +.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 { background-color: #f44336; } -.mat-drawer-container { +.mat-sidenav-container { background-color: #303030; color: white; } -.mat-drawer { +.mat-sidenav { background-color: #424242; color: white; } - .mat-drawer.mat-drawer-push { + .mat-sidenav.mat-sidenav-push { background-color: #424242; } -.mat-drawer-backdrop.mat-drawer-shown { +.mat-sidenav-backdrop.mat-sidenav-shown { background-color: rgba(189, 189, 189, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1615,100 +1465,17 @@ input.mat-input-element { 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; } @@ -1725,13 +1492,6 @@ input.mat-input-element { .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; 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 4f41595b71..44baae18fd 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-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,14 +137,9 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -171,66 +166,6 @@ .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; } @@ -245,14 +180,62 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -261,7 +244,6 @@ input.mat-input-element { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -271,7 +253,6 @@ input.mat-input-element { 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; } @@ -302,62 +283,33 @@ input.mat-input-element { .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -511,7 +463,7 @@ input.mat-input-element { font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { +.mat-button, .mat-raised-button, .mat-icon-button { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -537,14 +489,9 @@ input.mat-input-element { .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip { +.mat-chip:not(.mat-basic-chip) { font-size: 13px; - line-height: 18px; } - .mat-chip .mat-chip-remove.mat-icon { - font-size: 18px; } - -.mat-table { - font-family: Roboto, "Helvetica Neue", sans-serif; } + line-height: 16px; } .mat-header-cell { font-size: 12px; @@ -571,66 +518,6 @@ input.mat-input-element { .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; } @@ -645,14 +532,62 @@ input.mat-input-element { .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -input.mat-input-element { - margin-top: -0.0625em; } +.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); } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator, +.mat-paginator { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; } + .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -661,7 +596,6 @@ input.mat-input-element { font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { - padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -671,7 +605,6 @@ input.mat-input-element { 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; } @@ -702,62 +635,33 @@ input.mat-input-element { .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.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 { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-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-selection-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) { font-size: 14px; } -.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 .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 { + font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } -.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 { +.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-selection-list[dense] .mat-list-item .mat-line { + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-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) { + .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) { font-size: 12px; } -.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-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { + font: 500 12px Roboto, "Helvetica Neue", sans-serif; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -778,9 +682,6 @@ input.mat-input-element { .mat-ripple { overflow: hidden; } - @media screen and (-ms-high-contrast: active) { - .mat-ripple { - display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -827,11 +728,11 @@ input.mat-input-element { padding-right: 32px; } .mat-option-ripple { + position: absolute; top: 0; left: 0; - right: 0; bottom: 0; - position: absolute; + right: 0; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -876,6 +777,7 @@ input.mat-input-element { overflow: hidden; padding: 0; position: absolute; + text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -932,11 +834,11 @@ input.mat-input-element { color: white; } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(255, 255, 255, 0.04); } - .mat-primary .mat-option.mat-selected { + .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { color: #7b1fa2; } - .mat-accent .mat-option.mat-selected { + .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { color: #69f0ae; } - .mat-warn .mat-option.mat-selected { + .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(255, 255, 255, 0.04); } @@ -957,22 +859,25 @@ input.mat-input-element { .mat-pseudo-checkbox::after { color: #303030; } -.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-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-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-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 { @@ -1058,7 +963,7 @@ input.mat-input-element { .mat-button-toggle-checked { background-color: #212121; - color: rgba(255, 255, 255, 0.7); } + color: white; } .mat-button-toggle-disabled { background-color: black; @@ -1113,40 +1018,21 @@ input.mat-input-element { background-color: rgba(244, 67, 54, 0.26); } .mat-chip:not(.mat-basic-chip) { - background-color: #616161; + background-color: #424242; 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.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; +.mat-chip.mat-chip-selected:not(.mat-basic-chip) { + background-color: #212121; 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-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-table { background: #424242; } @@ -1217,68 +1103,19 @@ input.mat-input-element { .mat-action-row { border-top-color: rgba(255, 255, 255, 0.12); } -.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 { +.mat-expansion-panel-header:focus, +.mat-expansion-panel-header:hover { background: rgba(255, 255, 255, 0.04); } .mat-expansion-panel-header-title { color: white; } -.mat-expansion-panel-header-description, +.mat-expansion-panel-header-description { + color: rgba(255, 255, 255, 0.7); } + .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; } @@ -1288,21 +1125,51 @@ input.mat-input-element { .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.7); } + color: rgba(255, 255, 255, 0.3); } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { +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 { color: white; } -.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 { +.mat-list .mat-subheader, .mat-nav-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); } @@ -1311,12 +1178,7 @@ input.mat-input-element { .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-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 { +.mat-menu-content { background: #424242; } .mat-menu-item { @@ -1324,15 +1186,11 @@ input.mat-input-element { color: white; } .mat-menu-item[disabled] { color: rgba(255, 255, 255, 0.3); } - -.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-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-paginator { background: #424242; } @@ -1427,20 +1285,15 @@ input.mat-input-element { .mat-select-trigger, .mat-select-arrow { - color: rgba(255, 255, 255, 0.7); } + color: rgba(255, 255, 255, 0.3); } .mat-select-underline { - 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; } + background-color: rgba(255, 255, 255, 0.12); } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(255, 255, 255, 0.7); } + color: rgba(255, 255, 255, 0.3); } .mat-select-content, .mat-select-panel-done-animating { background: #424242; } @@ -1448,9 +1301,6 @@ input.mat-input-element { .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; } @@ -1463,26 +1313,26 @@ input.mat-input-element { .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #69f0ae; } -.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { +.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 { color: #f44336; } -.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 { +.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 { background-color: #f44336; } -.mat-drawer-container { +.mat-sidenav-container { background-color: #303030; color: white; } -.mat-drawer { +.mat-sidenav { background-color: #424242; color: white; } - .mat-drawer.mat-drawer-push { + .mat-sidenav.mat-sidenav-push { background-color: #424242; } -.mat-drawer-backdrop.mat-drawer-shown { +.mat-sidenav-backdrop.mat-sidenav-shown { background-color: rgba(189, 189, 189, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1615,100 +1465,17 @@ input.mat-input-element { 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; } @@ -1725,13 +1492,6 @@ input.mat-input-element { .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; diff --git a/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.html b/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.html new file mode 100644 index 0000000000..5b1559bb1b --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.html @@ -0,0 +1,14 @@ +
+ + + +
\ No newline at end of file diff --git a/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.scss b/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.scss new file mode 100644 index 0000000000..04fbea089d --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.scss @@ -0,0 +1,10 @@ +.adf-infinite-pagination { + display: flex; + justify-content: space-around; + min-height: 56px; + + &-load-more { + margin-bottom: 10px; + margin-top: 10px; + } +} \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.spec.ts b/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.spec.ts new file mode 100644 index 0000000000..aa7897c74d --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.spec.ts @@ -0,0 +1,119 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { MdDatepickerModule, MdIconModule, MdInputModule, MdNativeDateModule } from '@angular/material'; +import { By } from '@angular/platform-browser'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { Pagination } from 'alfresco-js-api'; +import { InfinitePaginationComponent } from './infinite-pagination.component'; + +describe('InfinitePaginationComponent', () => { + + let fixture: ComponentFixture; + let component: InfinitePaginationComponent; + let pagination: Pagination; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + NoopAnimationsModule, + MdDatepickerModule, + MdIconModule, + MdInputModule, + MdNativeDateModule + ], + declarations: [ + InfinitePaginationComponent + ] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InfinitePaginationComponent); + component = fixture.componentInstance; + + pagination = { + skipCount: 0, + hasMoreItems: false + }; + }); + + afterEach(() => { + fixture.destroy(); + TestBed.resetTestingModule(); + }); + + it('should show the loading spinner if loading', () => { + pagination.hasMoreItems = true; + component.pagination = pagination; + component.isLoading = true; + fixture.detectChanges(); + + let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]')); + expect(loadingSpinner).not.toBeNull(); + }); + + it('should NOT show the loading spinner if NOT loading', () => { + pagination.hasMoreItems = true; + component.pagination = pagination; + component.isLoading = false; + fixture.detectChanges(); + + let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]')); + expect(loadingSpinner).toBeNull(); + }); + + it('should show the load more button if NOT loading and has more items', () => { + pagination.hasMoreItems = true; + component.pagination = pagination; + component.isLoading = false; + fixture.detectChanges(); + + let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]')); + expect(loadMoreButton).not.toBeNull(); + }); + + it('should NOT show anything if pagination has NO more items', () => { + pagination.hasMoreItems = false; + component.pagination = pagination; + fixture.detectChanges(); + + let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]')); + expect(loadMoreButton).toBeNull(); + let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]')); + expect(loadingSpinner).toBeNull(); + }); + + it('should trigger the loadMore event with the proper pagination object', (done) => { + pagination.hasMoreItems = true; + pagination.skipCount = 5; + component.pagination = pagination; + component.isLoading = false; + component.pageSize = 5; + fixture.detectChanges(); + + component.loadMore.subscribe((newPagination: Pagination) => { + expect(newPagination.skipCount).toBe(10); + done(); + }); + + let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]')); + loadMoreButton.triggerEventHandler('click', {}); + }); + +}); diff --git a/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.ts b/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.ts new file mode 100644 index 0000000000..891813ab64 --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.ts @@ -0,0 +1,69 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + ChangeDetectionStrategy, + Component, + EventEmitter, + Input, + OnInit, + Output, + ViewEncapsulation +} from '@angular/core'; + +import { Pagination } from 'alfresco-js-api'; + +@Component({ + selector: 'adf-infinite-pagination', + host: { 'class': 'infinite-adf-pagination' }, + templateUrl: './infinite-pagination.component.html', + styleUrls: [ './infinite-pagination.component.scss' ], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class InfinitePaginationComponent implements OnInit { + + static DEFAULT_PAGE_SIZE: number = 25; + + static DEFAULT_PAGINATION: Pagination = { + skipCount: 0, + hasMoreItems: false + }; + + @Input() + pagination: Pagination; + + @Input() + pageSize: number = InfinitePaginationComponent.DEFAULT_PAGE_SIZE; + + @Input('loading') + isLoading: boolean = false; + + @Output() + loadMore: EventEmitter = new EventEmitter(); + + ngOnInit() { + if (!this.pagination) { + this.pagination = InfinitePaginationComponent.DEFAULT_PAGINATION; + } + } + + onLoadMore() { + this.pagination.skipCount += this.pageSize; + this.loadMore.next(this.pagination); + } +} diff --git a/ng2-components/ng2-alfresco-core/src/components/pagination/pagination.module.ts b/ng2-components/ng2-alfresco-core/src/components/pagination/pagination.module.ts index 7e4c7b11e6..7b0d326ea4 100644 --- a/ng2-components/ng2-alfresco-core/src/components/pagination/pagination.module.ts +++ b/ng2-components/ng2-alfresco-core/src/components/pagination/pagination.module.ts @@ -21,6 +21,7 @@ import { MaterialModule } from '@angular/material'; import { TranslateModule } from '@ngx-translate/core'; +import { InfinitePaginationComponent } from './infinite-pagination.component'; import { PaginationComponent } from './pagination.component'; @NgModule({ @@ -30,10 +31,12 @@ import { PaginationComponent } from './pagination.component'; MaterialModule ], declarations: [ - PaginationComponent + PaginationComponent, + InfinitePaginationComponent ], exports: [ - PaginationComponent + PaginationComponent, + InfinitePaginationComponent ] }) export class PaginationModule {} diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts index 17d4994799..84f11adddd 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts @@ -23,7 +23,7 @@ import { DataColumn, DataRow, DataTableAdapter } from '../../data/datatable-adap changeDetection: ChangeDetectionStrategy.OnPush, template: ` - {{value}} + {{value}} `, encapsulation: ViewEncapsulation.None, host: { class: 'adf-datatable-cell' } diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts index d2c7ffe302..39696bd295 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts @@ -631,4 +631,31 @@ describe('DataTable', () => { expect(dataTable.getCellTooltip(row, col)).toBeNull(); }); + it('should cache the rows menu', () => { + let emitted = 0; + dataTable.showRowActionsMenu.subscribe(() => { emitted++; }); + + const column = {}; + const row = { getValue: function (key: string) { return 'id'; } }; + + dataTable.getRowActions(row, column); + dataTable.getRowActions(row, column); + dataTable.getRowActions(row, column); + + expect(emitted).toBe(1); + }); + + it('should reset the menu cache after rows change', () => { + let emitted = 0; + dataTable.showRowActionsMenu.subscribe(() => { emitted++; }); + + const column = {}; + const row = { getValue: function (key: string) { return 'id'; } }; + + dataTable.getRowActions(row, column); + dataTable.ngOnChanges({'data': new SimpleChange('123', {}, true)}); + dataTable.getRowActions(row, column); + + expect(emitted).toBe(2); + }); }); diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts index 67e58997d0..47c0a4da0c 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts @@ -102,6 +102,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck private schema: DataColumn[] = []; private differ: any; + private rowMenuCache: object = {}; private singleClickStreamSub: Subscription; private multiClickStreamSub: Subscription; @@ -208,6 +209,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck private initTable() { this.data = new ObjectDataTableAdapter(this.rows, this.schema); + this.rowMenuCache = {}; } isTableEmpty() { @@ -375,9 +377,15 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck } getRowActions(row: DataRow, col: DataColumn): any[] { - let event = new DataCellEvent(row, col, []); - this.showRowActionsMenu.emit(event); - return event.value.actions; + const id = row.getValue('id'); + + if (!this.rowMenuCache[id]) { + let event = new DataCellEvent(row, col, []); + this.showRowActionsMenu.emit(event); + this.rowMenuCache[id] = event.value.actions; + } + + return this.rowMenuCache[id]; } onExecuteRowAction(row: DataRow, action: any) { diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md index 6ea5c8cee5..a553d3e164 100644 --- a/ng2-components/ng2-alfresco-documentlist/README.md +++ b/ng2-components/ng2-alfresco-documentlist/README.md @@ -94,6 +94,7 @@ The properties currentFolderId, folderNode and node are the entry initialization | currentFolderId | string | null | The ID of the folder node to display or a reserved string alias for special sources (see **Data Sources**) | | folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | null | Currently displayed folder node | | permissionsStyle | [PermissionStyleModel[]](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/src/models/permissions-style.model.ts) | null | with this array you can define different styles depending on the permission of the user on that node. The PermissionStyleModel allows you to select also if you want to apply the style only on the file or folder nodes. PermissionStyleModel.permission accepts the following values [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-core/src/models/permissions.enum.ts) [see more](#custom-row-permissions-style). | +| paginationStrategy | PaginationStrategy | PaginationStrategy.Finite | The pagination type to be shown, can be Finite or Infinite | | node | [NodePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodePaging.md) | null | Document list will show all the nodes contained in the NodePaging entity | | navigate | boolean | true | Toggles navigation to folder content or file preview | | loading | boolean | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. | @@ -165,6 +166,13 @@ Below is a basic example of handling DOM events in the parent elements. ``` +#### Pagination strategy + +The Document List by default supports 2 type of pagination, the **finite** and the **infinite** pagination. + +- With the **finite** pagination you got a normal pagination ui with information about the result's count, pages, and stepper arrows. On every pagination event the results will replace the previous list. +- With the **infinite** pagination there is only a "Load more" button at the end of your document list, and on every click (pagination event), the new results will be appended to the previous list. + #### Data Sources For the Document List data sources you can use one of the following options: diff --git a/ng2-components/ng2-alfresco-documentlist/index.ts b/ng2-components/ng2-alfresco-documentlist/index.ts index c46e136feb..07ea75257c 100644 --- a/ng2-components/ng2-alfresco-documentlist/index.ts +++ b/ng2-components/ng2-alfresco-documentlist/index.ts @@ -35,6 +35,7 @@ import { DocumentActionsService } from './src/services/document-actions.service' import { DocumentListService } from './src/services/document-list.service'; import { FolderActionsService } from './src/services/folder-actions.service'; import { NodeActionsService } from './src/services/node-actions.service'; +import { ContentNodeSelectorService } from './src/components/content-node-selector/content-node-selector.service'; // components export * from './src/components/document-list.component'; @@ -81,7 +82,8 @@ export const DOCUMENT_LIST_PROVIDERS: any[] = [ DocumentListService, FolderActionsService, DocumentActionsService, - NodeActionsService + NodeActionsService, + ContentNodeSelectorService ]; @NgModule({ diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.html b/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.html index f44e3d2cca..83441fada1 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.html +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.html @@ -45,7 +45,7 @@ @@ -64,6 +66,16 @@ + + + {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }} + diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.scss b/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.scss index 349fedd5a6..3cbce1af6f 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.scss +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.scss @@ -1,5 +1,6 @@ @mixin mat-content-node-selector-theme($theme) { $primary: map-get($theme, primary); + $accent: map-get($theme, accent); .adf-content-node-selector-dialog { @@ -60,7 +61,7 @@ border: 1px solid rgba(0, 0, 0, 0.07); .adf-highlight { - color: #33afdfnpm np; + color: mat-color($accent);; } .adf-data-table { diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.spec.ts index 11c879aae1..09ea492ad1 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.spec.ts @@ -29,6 +29,7 @@ import { DocumentListComponent } from '../document-list.component'; import { EmptyFolderContentDirective } from '../empty-folder/empty-folder-content.directive'; import { DropdownSitesComponent } from '../site-dropdown/sites-dropdown.component'; import { ContentNodeSelectorComponent } from './content-node-selector.component'; +import { ContentNodeSelectorService } from './content-node-selector.service'; const ONE_FOLDER_RESULT = { list: { @@ -40,7 +41,10 @@ const ONE_FOLDER_RESULT = { modifiedByUser: { displayName: 'John Doe' } } } - ] + ], + pagination: { + hasMoreItems: true + } } }; @@ -85,6 +89,7 @@ describe('ContentNodeSelectorComponent', () => { AlfrescoTranslationService, DocumentListService, SearchService, + ContentNodeSelectorService, ...plusProviders ], schemas: [CUSTOM_ELEMENTS_SCHEMA] @@ -324,13 +329,13 @@ describe('ContentNodeSelectorComponent', () => { describe('Search functionality', () => { - function defaultSearchOptions(rootNodeId = undefined) { + function defaultSearchOptions(rootNodeId = undefined, skipCount = 0) { return { include: ['path', 'allowableOperations'], - skipCount: 0, + skipCount, rootNodeId, nodeType: 'cm:folder', - maxItems: 200, + maxItems: 10, orderBy: null }; } @@ -397,14 +402,16 @@ describe('ContentNodeSelectorComponent', () => { it('should clear the search field, nodes and chosenNode when clicking on the X (clear) icon', () => { component.chosenNode = {}; - component.nodes = [ component.chosenNode ]; + component.nodes = { list: { + entries: [ { entry: component.chosenNode } ] + } }; component.searchTerm = 'piccolo'; component.showingSearchResults = true; component.clear(); expect(component.searchTerm).toBe(''); - expect(component.nodes).toEqual([]); + expect(component.nodes).toEqual(null); expect(component.chosenNode).toBeNull(); expect(component.showingSearchResults).toBeFalsy(); }); @@ -503,8 +510,74 @@ describe('ContentNodeSelectorComponent', () => { expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku'); }); - xit('should do something with pagination or with many results', () => { + describe('Pagination "Load more" button', () => { + it('should NOT be shown by default', () => { + fixture.detectChanges(); + const pagination = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-pagination"]')); + expect(pagination).toBeNull(); + }); + + it('should be shown when diplaying search results', async(() => { + typeToSearchBox('shenron'); + respondWithSearchResults(ONE_FOLDER_RESULT); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + const pagination = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-pagination"]')); + expect(pagination).not.toBeNull(); + }); + })); + + it('should NOT be shown when modifying searchTerm to be less then 4 characters after search results have been diplayed', async(() => { + typeToSearchBox('shenron'); + respondWithSearchResults(ONE_FOLDER_RESULT); + + fixture.whenStable().then(() => { + typeToSearchBox('sh'); + fixture.detectChanges(); + + const pagination = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-pagination"]')); + expect(pagination).toBeNull(); + }); + })); + + it('button\'s callback should load the next batch of results by calling the search api', () => { + const skipCount = 8; + component.searchTerm = 'kakarot'; + + component.getNextPageOfSearch({skipCount}); + + expect(searchSpy).toHaveBeenCalledWith('kakarot*', defaultSearchOptions(undefined, skipCount)); + }); + + it('should set its loading state to true after search was started', () => { + component.showingSearchResults = true; + component.pagination = { hasMoreItems: true }; + + typeToSearchBox('shenron'); + fixture.detectChanges(); + + const spinnerSelector = By.css('[data-automation-id="content-node-selector-search-pagination"] [data-automation-id="adf-infinite-pagination-spinner"]'); + const paginationLoading = fixture.debugElement.query(spinnerSelector); + expect(paginationLoading).not.toBeNull(); + }); + + it('should set its loading state to true after search was performed', async(() => { + component.showingSearchResults = true; + component.pagination = { hasMoreItems: true }; + + typeToSearchBox('shenron'); + fixture.detectChanges(); + respondWithSearchResults(ONE_FOLDER_RESULT); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + const spinnerSelector = By.css('[data-automation-id="content-node-selector-search-pagination"] [data-automation-id="adf-infinite-pagination-spinner"]'); + const paginationLoading = fixture.debugElement.query(spinnerSelector); + expect(paginationLoading).toBeNull(); + }); + })); }); xit('should trigger some kind of error when error happened during search', () => { @@ -602,13 +675,5 @@ describe('ContentNodeSelectorComponent', () => { expect(chooseButton.nativeElement.disabled).toBe(true); }); }); - - describe('Mini integration test', () => { - - xit('should trigger the select event properly when search results are loaded, one element is selected and choose button is clicked', () => { - - }); - }); - }); }); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts index 7ccf305383..f53b0da51f 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts @@ -17,10 +17,11 @@ import { Component, EventEmitter, Inject, Input, OnInit, Optional, Output, ViewChild, ViewEncapsulation } from '@angular/core'; import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material'; -import { MinimalNodeEntryEntity, NodePaging } from 'alfresco-js-api'; -import { AlfrescoContentService, HighlightDirective, SearchOptions, SearchService, SiteModel } from 'ng2-alfresco-core'; +import { MinimalNodeEntryEntity, NodePaging, Pagination } from 'alfresco-js-api'; +import { AlfrescoContentService, HighlightDirective, SiteModel } from 'ng2-alfresco-core'; import { ImageResolver, RowFilter } from '../../data/share-datatable-adapter'; -import { DocumentListComponent } from '../document-list.component'; +import { DocumentListComponent, PaginationStrategy } from '../document-list.component'; +import { ContentNodeSelectorService } from './content-node-selector.service'; export interface ContentNodeSelectorComponentData { title: string; @@ -38,13 +39,17 @@ export interface ContentNodeSelectorComponentData { }) export class ContentNodeSelectorComponent implements OnInit { - nodes: NodePaging | Array; + nodes: NodePaging | null = null; siteId: null | string; searchTerm: string = ''; showingSearchResults: boolean = false; + loadingSearchResults: boolean = false; inDialog: boolean = false; chosenNode: MinimalNodeEntryEntity | null = null; folderIdToShow: string | null = null; + paginationStrategy: PaginationStrategy; + pagination: Pagination; + skipCount: number = 0; @Input() title: string; @@ -58,6 +63,9 @@ export class ContentNodeSelectorComponent implements OnInit { @Input() imageResolver: ImageResolver = null; + @Input() + pageSize: number = 10; + @Output() select: EventEmitter = new EventEmitter(); @@ -67,7 +75,7 @@ export class ContentNodeSelectorComponent implements OnInit { @ViewChild(HighlightDirective) highlighter: HighlightDirective; - constructor(private searchService: SearchService, + constructor(private contentNodeSelectorService: ContentNodeSelectorService, private contentService: AlfrescoContentService, @Optional() @Inject(MD_DIALOG_DATA) data?: ContentNodeSelectorComponentData, @Optional() private containingDialog?: MdDialogRef) { @@ -86,6 +94,7 @@ export class ContentNodeSelectorComponent implements OnInit { ngOnInit() { this.folderIdToShow = this.currentFolderId; + this.paginationStrategy = PaginationStrategy.Infinite; } /** @@ -134,7 +143,8 @@ export class ContentNodeSelectorComponent implements OnInit { */ clear(): void { this.searchTerm = ''; - this.nodes = []; + this.nodes = null; + this.skipCount = 0; this.chosenNode = null; this.showingSearchResults = false; this.folderIdToShow = this.currentFolderId; @@ -143,46 +153,78 @@ export class ContentNodeSelectorComponent implements OnInit { /** * Update the result list depending on the criterias */ - private updateResults() { + private updateResults(): void { if (this.searchTerm.length === 0) { this.folderIdToShow = this.siteId || this.currentFolderId; } else { - this.querySearch(); + this.startNewSearch(); } } + /** + * Load the first page of a new search result + */ + private startNewSearch(): void { + this.nodes = null; + this.skipCount = 0; + this.chosenNode = null; + this.folderIdToShow = null; + this.querySearch(); + } + + /** + * Loads the next batch of search results + * + * @param event Pagination object + */ + getNextPageOfSearch(event: Pagination): void { + this.skipCount = event.skipCount; + this.querySearch(); + } + /** * Perform the call to searchService with the proper parameters */ private querySearch(): void { - if (this.searchTerm.length > 3) { - this.chosenNode = null; + if (this.isSearchTermLongEnough()) { + this.loadingSearchResults = true; - const searchTerm = this.searchTerm + '*'; - let searchOpts: SearchOptions = { - include: ['path', 'allowableOperations'], - skipCount: 0, - rootNodeId: this.siteId, - nodeType: 'cm:folder', - maxItems: 200, - orderBy: null - }; - this.searchService.getNodeQueryResults(searchTerm, searchOpts) - .subscribe( - results => { - this.showingSearchResults = true; - this.folderIdToShow = null; - this.nodes = results; - this.highlight(); - } - ); + this.contentNodeSelectorService.search(this.searchTerm, this.siteId, this.skipCount, this.pageSize) + .subscribe(this.showSearchResults.bind(this)); } } + /** + * Show the results of the search + * + * @param results Search results + */ + private showSearchResults(results: NodePaging): void { + this.showingSearchResults = true; + this.loadingSearchResults = false; + + // Documentlist hack, since data displaying for preloaded nodes is a little bit messy there + if (!this.nodes) { + this.nodes = results; + } else { + this.documentList.data.loadPage(results, true); + } + + this.pagination = results.list.pagination; + this.highlight(); + } + + /** + * Predicate method to decide whether searchTerm fulfills the necessary criteria + */ + isSearchTermLongEnough(): boolean { + return this.searchTerm.length > 3; + } + /** * Hightlight the actual searchterm in the next frame */ - highlight() { + highlight(): void { setTimeout(() => { this.highlighter.highlight(this.searchTerm); }, 0); @@ -200,14 +242,14 @@ export class ContentNodeSelectorComponent implements OnInit { /** * Sets showingSearchResults state to be able to differentiate between search results or folder results */ - onFolderChange() { + onFolderChange(): void { this.showingSearchResults = false; } /** * Attempts to set the currently loaded node */ - onFolderLoaded() { + onFolderLoaded(): void { this.attemptNodeSelection(this.documentList.folderNode); } diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.service.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.service.ts new file mode 100644 index 0000000000..d7409cd787 --- /dev/null +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.service.ts @@ -0,0 +1,54 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Injectable } from '@angular/core'; +import { NodePaging } from 'alfresco-js-api'; +import { SearchOptions, SearchService } from 'ng2-alfresco-core'; +import { Observable } from 'rxjs/Rx'; + +/** + * Internal service used by ContentNodeSelector component. + */ +@Injectable() +export class ContentNodeSelectorService { + + constructor(private searchService: SearchService) {} + + /** + * Performs a search for content node selection + * + * @param searchTerm The term to search for + * @param skipCount From where to start the loading + * @param rootNodeId The root is to start the search from + * @param maxItems How many items to load + */ + public search(searchTerm: string, rootNodeId: string, skipCount: number, maxItems: number): Observable { + + searchTerm = searchTerm + '*'; + + let searchOpts: SearchOptions = { + include: ['path', 'allowableOperations'], + skipCount, + rootNodeId, + nodeType: 'cm:folder', + maxItems, + orderBy: null + }; + + return this.searchService.getNodeQueryResults(searchTerm, searchOpts); + } +} diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html index 88399276c9..db754a46d2 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html @@ -50,12 +50,23 @@ - - + + + + + + {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }} + + \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts index 374781fd1d..71f41b57ea 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts @@ -31,6 +31,11 @@ import { NodeEntityEvent, NodeEntryEvent } from './node.event'; declare var require: any; +export enum PaginationStrategy { + Finite, + Infinite +} + @Component({ selector: 'adf-document-list, alfresco-document-list', styleUrls: ['./document-list.component.scss'], @@ -99,6 +104,11 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni @Input() loading: boolean = false; + @Input() + paginationStrategy: PaginationStrategy = PaginationStrategy.Finite; + + infiniteLoading: boolean = false; + selection = new Array(); skipCount: number = 0; pagination: Pagination; @@ -268,12 +278,12 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni } } - reload() { + reload(merge: boolean = false) { this.ngZone.run(() => { this.resetSelection(); if (this.folderNode) { - this.loadFolder(); + this.loadFolder(merge); } else if (this.currentFolderId) { this.loadFolderByNodeId(this.currentFolderId); } else if (this.node) { @@ -304,6 +314,10 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni return this.enablePagination && !this.isEmpty(); } + isPaginationNeeded() { + return this.paginationStrategy === PaginationStrategy.Finite; + } + getNodeActions(node: MinimalNodeEntity | any): ContentActionModel[] { let target = null; @@ -391,11 +405,16 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni } } - loadFolder() { - this.loading = true; + loadFolder(merge: boolean = false) { + if (merge) { + this.infiniteLoading = true; + } else { + this.loading = true; + } + let nodeId = this.folderNode ? this.folderNode.id : this.currentFolderId; if (nodeId) { - this.loadFolderNodesByFolderNodeId(nodeId, this.pageSize, this.skipCount).catch(err => this.error.emit(err)); + this.loadFolderNodesByFolderNodeId(nodeId, this.pageSize, this.skipCount, merge).catch(err => this.error.emit(err)); } } @@ -427,7 +446,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni } } - loadFolderNodesByFolderNodeId(id: string, maxItems: number, skipCount: number): Promise { + loadFolderNodesByFolderNodeId(id: string, maxItems: number, skipCount: number, merge: boolean = false): Promise { return new Promise((resolve, reject) => { this.resetSelection(); this.documentListService @@ -445,9 +464,10 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni error => reject(error) ); } else { - this.data.loadPage( val); + this.data.loadPage( val, merge); this.pagination = val.list.pagination; this.loading = false; + this.infiniteLoading = false; this.ready.emit(); resolve(true); } @@ -712,6 +732,11 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni this.reload(); } + loadNextBatch(event: Pagination) { + this.skipCount = event.skipCount; + this.reload(true); + } + onPrevPage(event: Pagination): void { this.skipCount = event.skipCount; this.reload(); diff --git a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts index 4e1a3c5882..6348451ab9 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts @@ -194,7 +194,7 @@ export class ShareDataTableAdapter implements DataTableAdapter { } } - public loadPage(page: NodePaging) { + public loadPage(page: NodePaging, merge: boolean = false) { this.page = page; let rows = []; @@ -225,9 +225,12 @@ export class ShareDataTableAdapter implements DataTableAdapter { } } - this.rows = rows; + if (merge) { + this.rows = this.rows.concat(rows); + } else { + this.rows = rows; + } } - } export class ShareDataRow implements DataRow { diff --git a/ng2-components/ng2-alfresco-documentlist/src/i18n/en.json b/ng2-components/ng2-alfresco-documentlist/src/i18n/en.json index 822f931eee..42f1888ebf 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/i18n/en.json +++ b/ng2-components/ng2-alfresco-documentlist/src/i18n/en.json @@ -13,7 +13,8 @@ "STATUS": "Status", "MODIFIED_ON": "Modified", "MODIFIED_BY": "Modified by", - "SHARED_BY": "Shared by" + "SHARED_BY": "Shared by", + "LOAD_MORE": "Load more" } }, "ALFRESCO_DOCUMENT_LIST": {