diff --git a/.gitignore b/.gitignore index fd08a755ee..1d7f61df3b 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,4 @@ src/environments/ .happypack/ .history package-lock.* +/ng2-components/ng2-alfresco-core/prebuilt-themes/ diff --git a/demo-shell-ng2/config/webpack.dev.js b/demo-shell-ng2/config/webpack.dev.js index 782d0dcd32..38881bdaa1 100644 --- a/demo-shell-ng2/config/webpack.dev.js +++ b/demo-shell-ng2/config/webpack.dev.js @@ -58,7 +58,7 @@ module.exports = webpackMerge(commonConfig, { includePaths: [path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/styles')] } }] - }, + } ] }, diff --git a/demo-shell-ng2/config/webpack.style.js b/demo-shell-ng2/config/webpack.style.js new file mode 100644 index 0000000000..0c01d1c0a5 --- /dev/null +++ b/demo-shell-ng2/config/webpack.style.js @@ -0,0 +1,37 @@ +const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const path = require('path'); + +const extractScss = new ExtractTextPlugin('../ng2-components/ng2-alfresco-core/prebuilt-themes/[name].css'); + +module.exports = { + + entry: { + 'adf-blue-orange': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-blue-orange.scss', + 'adf-blue-purple': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-blue-purple.scss', + 'adf-cyan-orange': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-cyan-orange.scss', + 'adf-cyan-purple': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-cyan-purple.scss', + 'adf-green-purple': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-green-purple.scss', + 'adf-green-orange': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-green-orange.scss', + 'adf-pink-bluegrey': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-pink-bluegrey.scss', + 'adf-indigo-pink': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-indigo-pink.scss', + 'adf-purple-green': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-purple-green.scss' + }, + + output: { + filename: '../dist/[name].js' + }, + + module: { + rules: [{ + test: /\.scss$/, + use: extractScss.extract([{ + loader: "raw-loader" + }, { + loader: "sass-loader" + }]) + }] + }, + plugins: [ + extractScss + ] +}; diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json index dfb6f0ac66..bbadb77d21 100644 --- a/demo-shell-ng2/package.json +++ b/demo-shell-ng2/package.json @@ -5,10 +5,11 @@ "author": "Alfresco Software, Ltd.", "scripts": { "build": "npm run server-versions && rimraf dist && npm run webpack -- --config config/webpack.prod.js --progress --profile --bail", - "build:dev": "npm run server-versions && rimraf dist && npm run webpack -- --config config/webpack.dev.js --progress --profile --bail", - "start:dist": "npm run server-versions && wsrv", - "start": "npm run server-versions && npm run webpack-dev-server -- --config config/webpack.prod.js --progress --content-base app/", - "start:dev": "npm run server-versions && npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/", + "build:dev": "npm run server-versions && rimraf dist && npm run style:dev && npm run webpack -- --config config/webpack.dev.js --progress --profile --bail", + "style:dev": "npm run webpack -- --config config/webpack.style.js --progress --profile --bail", + "start:dist": "npm run server-versions && wsrv -s dist/ -p 3000 -a 0.0.0.0", + "start": "npm run server-versions && npm run webpack-dev-server -- --config config/webpack.prod.js --progress --content-base app/ ", + "start:dev": "npm run server-versions && npm run style:dev && npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base ", "test": "rimraf coverage && karma start --single-run", "clean": "npm run clean-build && rimraf dist node_modules typings dist", "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'", @@ -143,10 +144,10 @@ "ts-loader": "2.2.1", "tslint": "5.5.0", "tslint-loader": "3.5.3", - "typescript": "2.5.2", + "typescript": "2.3.4", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", "webpack-merge": "2.6.1", - "wsrv": "0.2.2" + "wsrv": "0.1.7" } } diff --git a/ng2-components/config/prebuilt/_all-theme.scss b/ng2-components/config/prebuilt/_all-theme.scss deleted file mode 100644 index e9791048f1..0000000000 --- a/ng2-components/config/prebuilt/_all-theme.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import 'ng2-alfresco-core/styles/index'; -@import 'ng2-activiti-analytics/styles/index'; -@import 'ng2-activiti-diagrams/styles/index'; -@import 'ng2-activiti-form/styles/index'; -@import 'ng2-activiti-processlist/styles/index'; -@import 'ng2-activiti-tasklist/styles/index'; -@import 'ng2-alfresco-datatable/styles/index'; -@import 'ng2-alfresco-documentlist/styles/index'; -@import 'ng2-alfresco-login/styles/index'; -@import 'ng2-alfresco-upload/styles/index'; -@import 'ng2-alfresco-userinfo/styles/index'; -@import 'ng2-alfresco-search/styles/index'; - -@mixin alfresco-material-theme($theme) { - @include alfresco-core-theme($theme); - @include alfresco-activity-analytics-theme($theme); - @include alfresco-activity-diagrams-theme($theme); - @include alfresco-activity-form-theme($theme); - @include alfresco-activity-processlist-theme($theme); - @include alfresco-activity-tasklist-theme($theme); - @include alfresco-datatable-theme($theme); - @include alfresco-documentlist-theme($theme); - @include alfresco-login-theme($theme); - @include alfresco-upload-theme($theme); - @include alfresco-userinfo-theme($theme); - @include alfresco-search-theme($theme); -} diff --git a/ng2-components/config/webpack.style.js b/ng2-components/config/webpack.style.js index a8fa182925..610b2da45f 100644 --- a/ng2-components/config/webpack.style.js +++ b/ng2-components/config/webpack.style.js @@ -6,42 +6,21 @@ const extractScss = new ExtractTextPlugin('./ng2-alfresco-core/prebuilt-themes/[ module.exports = { entry: { - 'adf-blue-orange': './config/prebuilt/adf-blue-orange.scss', - 'adf-blue-purple': './config/prebuilt/adf-blue-purple.scss', - 'adf-cyan-orange': './config/prebuilt/adf-cyan-orange.scss', - 'adf-cyan-purple': './config/prebuilt/adf-cyan-purple.scss', - 'adf-green-purple': './config/prebuilt/adf-green-purple.scss', - 'adf-green-orange': './config/prebuilt/adf-green-orange.scss', - 'adf-pink-bluegrey': './config/prebuilt/adf-pink-bluegrey.scss', - 'adf-indigo-pink': './config/prebuilt/adf-indigo-pink.scss', - 'adf-purple-green': './config/prebuilt/adf-purple-green.scss' + 'adf-blue-orange': './ng2-alfresco-core/styles/prebuilt/adf-blue-orange.scss', + 'adf-blue-purple': './ng2-alfresco-core/styles/prebuilt/adf-blue-purple.scss', + 'adf-cyan-orange': './ng2-alfresco-core/styles/prebuilt/adf-cyan-orange.scss', + 'adf-cyan-purple': './ng2-alfresco-core/styles/prebuilt/adf-cyan-purple.scss', + 'adf-green-purple': './ng2-alfresco-core/styles/prebuilt/adf-green-purple.scss', + 'adf-green-orange': './ng2-alfresco-core/styles/prebuilt/adf-green-orange.scss', + 'adf-pink-bluegrey': './ng2-alfresco-core/styles/prebuilt/adf-pink-bluegrey.scss', + 'adf-indigo-pink': './ng2-alfresco-core/styles/prebuilt/adf-indigo-pink.scss', + 'adf-purple-green': './ng2-alfresco-core/styles/prebuilt/adf-purple-green.scss' }, output: { filename: './dist/[name].js' }, - resolve: { - alias: { - "ng2-alfresco-core": path.resolve(__dirname, '../ng2-alfresco-core'), - "ng2-alfresco-datatable": path.resolve(__dirname, '../ng2-alfresco-datatable'), - "ng2-activiti-diagrams": path.resolve(__dirname, '../ng2-activiti-diagrams'), - "ng2-activiti-analytics": path.resolve(__dirname, '../ng2-activiti-analytics'), - "ng2-activiti-form": path.resolve(__dirname, '../ng2-activiti-form'), - "ng2-activiti-tasklist": path.resolve(__dirname, '../ng2-activiti-tasklist'), - "ng2-activiti-processlist": path.resolve(__dirname, '../ng2-activiti-processlist'), - "ng2-alfresco-documentlist": path.resolve(__dirname, '../ng2-alfresco-documentlist'), - "ng2-alfresco-login": path.resolve(__dirname, '../ng2-alfresco-login'), - "ng2-alfresco-search": path.resolve(__dirname, '../ng2-alfresco-search'), - "ng2-alfresco-social": path.resolve(__dirname, '../ng2-alfresco-social'), - "ng2-alfresco-tag": path.resolve(__dirname, '../ng2-alfresco-tag'), - "ng2-alfresco-upload": path.resolve(__dirname, '../ng2-alfresco-upload'), - "ng2-alfresco-viewer": path.resolve(__dirname, '../ng2-alfresco-viewer'), - "ng2-alfresco-webscript": path.resolve(__dirname, '../ng2-alfresco-webscript'), - "ng2-alfresco-userinfo": path.resolve(__dirname, '../ng2-alfresco-userinfo'), - } - }, - module: { rules: [{ test: /\.scss$/, diff --git a/ng2-components/ng2-alfresco-core/config/webpack.style.js b/ng2-components/ng2-alfresco-core/config/webpack.style.js new file mode 100644 index 0000000000..a8312b80bc --- /dev/null +++ b/ng2-components/ng2-alfresco-core/config/webpack.style.js @@ -0,0 +1,37 @@ +const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const path = require('path'); + +const extractScss = new ExtractTextPlugin('./ng2-alfresco-core/prebuilt-themes/[name].css'); + +module.exports = { + + entry: { + 'adf-blue-orange': './styles/prebuilt/adf-blue-orange.scss', + 'adf-blue-purple': './styles/prebuilt/adf-blue-purple.scss', + 'adf-cyan-orange': './styles/prebuilt/adf-cyan-orange.scss', + 'adf-cyan-purple': './styles/prebuilt/adf-cyan-purple.scss', + 'adf-green-purple': './styles/prebuilt/adf-green-purple.scss', + 'adf-green-orange': './styles/prebuilt/adf-green-orange.scss', + 'adf-pink-bluegrey': './styles/prebuilt/adf-pink-bluegrey.scss', + 'adf-indigo-pink': './styles/prebuilt/adf-indigo-pink.scss', + 'adf-purple-green': './styles/prebuilt/adf-purple-green.scss' + }, + + output: { + filename: './dist/[name].js' + }, + + module: { + rules: [{ + test: /\.scss$/, + use: extractScss.extract([{ + loader: "raw-loader" + }, { + loader: "sass-loader" + }]) + }] + }, + plugins: [ + extractScss + ] +}; diff --git a/ng2-components/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json index a366dcc521..1f59d3fcb0 100644 --- a/ng2-components/ng2-alfresco-core/package.json +++ b/ng2-components/ng2-alfresco-core/package.json @@ -7,8 +7,9 @@ "clean": "rimraf dist node_modules typings bundles coverage .npmrc", "clean-lock": "rimraf package-lock.json", "rimraf": "rimraf", - "build": "webpack --config webpack.build.js --progress --profile --bail", + "build": "npm run build-style && webpack --config webpack.build.js --progress --profile --bail", "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --mode coverage", + "build-style": "webpack --config webpack.style.js --progress --profile --bail", "test-browser": "karma start karma.conf.js --reporters kjhtml --component", "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report", "prepublishOnly": "npm run build" 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 be77bb7f2f..ab69fb1a8d 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #2196f3; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #ff9800; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #2196f3; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #ff9800; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #2196f3; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #2196f3; + color: white; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #ff9800; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #2196f3; - color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #ff9800; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #2196f3; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #ff9800; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #ff9800; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #2196f3; } + .mat-form-field-ripple.mat-accent { + background-color: #ff9800; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #2196f3; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #2196f3; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #ff9800; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #ff9800; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #2196f3; } - .mat-input-ripple.mat-accent { - background-color: #ff9800; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #2196f3; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #ff9800; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(187, 222, 251, 0.3); } - -.mat-ink-bar { - background-color: #2196f3; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(187, 222, 251, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #2196f3; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(255, 224, 178, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #ff9800; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(187, 222, 251, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #2196f3; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(255, 224, 178, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #ff9800; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #ff9800; } + .adf-panel-heading { float: left; font-size: 14px; @@ -1510,6 +1750,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-panel-heading-icon { float: left; } +.adf-panel-collapse { + display: inline-block; } + .adf-panel-heading-text { float: left; padding-left: 20px; @@ -3192,7 +3435,6 @@ adf-file-uploading-list-row:not(:first-child) { z-index: 5; } .adf-search-result { - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); min-width: 112px; max-width: 280px; overflow: auto; @@ -3207,6 +3449,8 @@ adf-file-uploading-list-row:not(:first-child) { border-collapse: collapse; white-space: nowrap; font-size: 14px; } + .adf-search-result:not([class*='mat-elevation-z']) { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .adf-search-result a { color: rgba(0, 0, 0, 0.87); text-decoration: none; } 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 6dbb7a6a35..2e427567ba 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #2196f3; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #3f51b5; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #2196f3; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #3f51b5; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #2196f3; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #2196f3; + color: white; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #3f51b5; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #2196f3; - color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #3f51b5; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #2196f3; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #3f51b5; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #3f51b5; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #2196f3; } + .mat-form-field-ripple.mat-accent { + background-color: #3f51b5; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #2196f3; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #2196f3; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #3f51b5; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #3f51b5; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #2196f3; } - .mat-input-ripple.mat-accent { - background-color: #3f51b5; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #2196f3; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #3f51b5; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(187, 222, 251, 0.3); } - -.mat-ink-bar { - background-color: #2196f3; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(187, 222, 251, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #2196f3; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #3f51b5; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(187, 222, 251, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #2196f3; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #3f51b5; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #3f51b5; } + .adf-panel-heading { float: left; font-size: 14px; @@ -1510,6 +1750,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-panel-heading-icon { float: left; } +.adf-panel-collapse { + display: inline-block; } + .adf-panel-heading-text { float: left; padding-left: 20px; @@ -3192,7 +3435,6 @@ adf-file-uploading-list-row:not(:first-child) { z-index: 5; } .adf-search-result { - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); min-width: 112px; max-width: 280px; overflow: auto; @@ -3207,6 +3449,8 @@ adf-file-uploading-list-row:not(:first-child) { border-collapse: collapse; white-space: nowrap; font-size: 14px; } + .adf-search-result:not([class*='mat-elevation-z']) { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .adf-search-result a { color: rgba(0, 0, 0, 0.87); text-decoration: none; } 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 65a3027c67..80cba55504 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #00bcd4; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #ff9800; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #00bcd4; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #ff9800; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #00bcd4; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #00bcd4; + color: white; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #ff9800; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #00bcd4; - color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #ff9800; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #00bcd4; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #ff9800; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #ff9800; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #00bcd4; } + .mat-form-field-ripple.mat-accent { + background-color: #ff9800; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #00bcd4; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #00bcd4; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #ff9800; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #ff9800; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #00bcd4; } - .mat-input-ripple.mat-accent { - background-color: #ff9800; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #00bcd4; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #ff9800; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(178, 235, 242, 0.3); } - -.mat-ink-bar { - background-color: #00bcd4; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(178, 235, 242, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #00bcd4; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(255, 224, 178, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #ff9800; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(178, 235, 242, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #00bcd4; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(255, 224, 178, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #ff9800; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #ff9800; } + .adf-panel-heading { float: left; font-size: 14px; @@ -1510,6 +1750,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-panel-heading-icon { float: left; } +.adf-panel-collapse { + display: inline-block; } + .adf-panel-heading-text { float: left; padding-left: 20px; @@ -3192,7 +3435,6 @@ adf-file-uploading-list-row:not(:first-child) { z-index: 5; } .adf-search-result { - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); min-width: 112px; max-width: 280px; overflow: auto; @@ -3207,6 +3449,8 @@ adf-file-uploading-list-row:not(:first-child) { border-collapse: collapse; white-space: nowrap; font-size: 14px; } + .adf-search-result:not([class*='mat-elevation-z']) { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .adf-search-result a { color: rgba(0, 0, 0, 0.87); text-decoration: none; } 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 6f1370b526..eb16ae38d6 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #00bcd4; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #3f51b5; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #00bcd4; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #3f51b5; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #00bcd4; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #00bcd4; + color: white; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #3f51b5; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #00bcd4; - color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #3f51b5; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #00bcd4; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #3f51b5; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #3f51b5; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #00bcd4; } + .mat-form-field-ripple.mat-accent { + background-color: #3f51b5; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #00bcd4; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #00bcd4; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #3f51b5; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #3f51b5; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #00bcd4; } - .mat-input-ripple.mat-accent { - background-color: #3f51b5; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #00bcd4; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #3f51b5; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(178, 235, 242, 0.3); } - -.mat-ink-bar { - background-color: #00bcd4; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(178, 235, 242, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #00bcd4; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #3f51b5; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(178, 235, 242, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #00bcd4; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #3f51b5; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #3f51b5; } + .adf-panel-heading { float: left; font-size: 14px; @@ -1510,6 +1750,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-panel-heading-icon { float: left; } +.adf-panel-collapse { + display: inline-block; } + .adf-panel-heading-text { float: left; padding-left: 20px; @@ -3192,7 +3435,6 @@ adf-file-uploading-list-row:not(:first-child) { z-index: 5; } .adf-search-result { - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); min-width: 112px; max-width: 280px; overflow: auto; @@ -3207,6 +3449,8 @@ adf-file-uploading-list-row:not(:first-child) { border-collapse: collapse; white-space: nowrap; font-size: 14px; } + .adf-search-result:not([class*='mat-elevation-z']) { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .adf-search-result a { color: rgba(0, 0, 0, 0.87); text-decoration: none; } 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 ee6ea3a7a2..c6084404ff 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #8bc34a; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #ff9800; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #8bc34a; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #ff9800; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #8bc34a; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #8bc34a; + color: rgba(0, 0, 0, 0.87); } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #ff9800; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #8bc34a; - color: rgba(0, 0, 0, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #ff9800; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #8bc34a; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #ff9800; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #ff9800; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #8bc34a; } + .mat-form-field-ripple.mat-accent { + background-color: #ff9800; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #8bc34a; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #8bc34a; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #ff9800; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #ff9800; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #8bc34a; } - .mat-input-ripple.mat-accent { - background-color: #ff9800; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #8bc34a; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #ff9800; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(220, 237, 200, 0.3); } - -.mat-ink-bar { - background-color: #8bc34a; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(220, 237, 200, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #8bc34a; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(255, 224, 178, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #ff9800; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(220, 237, 200, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #8bc34a; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: rgba(0, 0, 0, 0.87); } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(255, 224, 178, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #ff9800; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #ff9800; } + .adf-panel-heading { float: left; font-size: 14px; @@ -1510,6 +1750,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-panel-heading-icon { float: left; } +.adf-panel-collapse { + display: inline-block; } + .adf-panel-heading-text { float: left; padding-left: 20px; @@ -3192,7 +3435,6 @@ adf-file-uploading-list-row:not(:first-child) { z-index: 5; } .adf-search-result { - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); min-width: 112px; max-width: 280px; overflow: auto; @@ -3207,6 +3449,8 @@ adf-file-uploading-list-row:not(:first-child) { border-collapse: collapse; white-space: nowrap; font-size: 14px; } + .adf-search-result:not([class*='mat-elevation-z']) { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .adf-search-result a { color: rgba(0, 0, 0, 0.87); text-decoration: none; } 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 adacb1f9cc..5fca34bcc7 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #8bc34a; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #3f51b5; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #8bc34a; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #3f51b5; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #8bc34a; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #8bc34a; + color: rgba(0, 0, 0, 0.87); } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #3f51b5; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #8bc34a; - color: rgba(0, 0, 0, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #3f51b5; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #8bc34a; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #3f51b5; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #3f51b5; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #8bc34a; } + .mat-form-field-ripple.mat-accent { + background-color: #3f51b5; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #8bc34a; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #8bc34a; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #3f51b5; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #3f51b5; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #8bc34a; } - .mat-input-ripple.mat-accent { - background-color: #3f51b5; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #8bc34a; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #3f51b5; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(220, 237, 200, 0.3); } - -.mat-ink-bar { - background-color: #8bc34a; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(220, 237, 200, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #8bc34a; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #3f51b5; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(220, 237, 200, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #8bc34a; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: rgba(0, 0, 0, 0.87); } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #3f51b5; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #3f51b5; } + .adf-panel-heading { float: left; font-size: 14px; @@ -1510,6 +1750,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-panel-heading-icon { float: left; } +.adf-panel-collapse { + display: inline-block; } + .adf-panel-heading-text { float: left; padding-left: 20px; @@ -3192,7 +3435,6 @@ adf-file-uploading-list-row:not(:first-child) { z-index: 5; } .adf-search-result { - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); min-width: 112px; max-width: 280px; overflow: auto; @@ -3207,6 +3449,8 @@ adf-file-uploading-list-row:not(:first-child) { border-collapse: collapse; white-space: nowrap; font-size: 14px; } + .adf-search-result:not([class*='mat-elevation-z']) { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .adf-search-result a { color: rgba(0, 0, 0, 0.87); text-decoration: none; } 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 6155b0b081..bbd8947918 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: rgba(0, 0, 0, 0.87); } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(0, 0, 0, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #3f51b5; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #ff4081; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(0, 0, 0, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #fafafa; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #3f51b5; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #ff4081; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #3f51b5; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #b0b0b0; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #e0e0e0; - color: black; } + color: rgba(0, 0, 0, 0.54); } .mat-button-toggle-disabled { background-color: #eeeeee; @@ -1020,19 +1115,38 @@ .mat-chip:not(.mat-basic-chip) { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.87); } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #808080; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #3f51b5; color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #3f51b5; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #ff4081; - color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #ff4081; + color: white; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: white; } @@ -1098,24 +1212,73 @@ .mat-expansion-panel { background: white; - color: black; } + color: rgba(0, 0, 0, 0.87); } .mat-action-row { border-top-color: rgba(0, 0, 0, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(0, 0, 0, 0.04); } .mat-expansion-panel-header-title { color: rgba(0, 0, 0, 0.87); } -.mat-expansion-panel-header-description { - color: rgba(0, 0, 0, 0.54); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(0, 0, 0, 0.54); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(0, 0, 0, 0.38); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, 0.54); } + +.mat-hint { + color: rgba(0, 0, 0, 0.54); } + +.mat-focused .mat-form-field-placeholder { + color: #3f51b5; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #ff4081; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #ff4081; } + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, 0.42); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #3f51b5; } + .mat-form-field-ripple.mat-accent { + background-color: #ff4081; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #3f51b5; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(0, 0, 0, 0.38); } - -.mat-focused .mat-input-placeholder { - color: #3f51b5; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #ff4081; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.42); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #ff4081; } - -.mat-input-underline { - background-color: rgba(0, 0, 0, 0.12); } - -.mat-input-ripple { - background-color: #3f51b5; } - .mat-input-ripple.mat-accent { - background-color: #ff4081; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: rgba(0, 0, 0, 0.87); } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, 0.87); } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(0, 0, 0, 0.54); } +.mat-list-item-disabled { + background-color: #eeeeee; } + .mat-divider { border-top-color: rgba(0, 0, 0, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(0, 0, 0, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(0, 0, 0, 0.04); } + +.mat-menu-panel { background: white; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: rgba(0, 0, 0, 0.87); } .mat-menu-item[disabled] { color: rgba(0, 0, 0, 0.38); } - .mat-menu-item .mat-icon { - color: rgba(0, 0, 0, 0.54); - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(0, 0, 0, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, 0.54); } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(0, 0, 0, 0.04); } .mat-paginator { background: white; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-underline { - background-color: rgba(0, 0, 0, 0.12); } + background-color: rgba(0, 0, 0, 0.42); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(0, 0, 0, 0.38); } + color: rgba(0, 0, 0, 0.54); } .mat-select-content, .mat-select-panel-done-animating { background: white; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: rgba(0, 0, 0, 0.87); } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #3f51b5; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #ff4081; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #fafafa; color: rgba(0, 0, 0, 0.87); } -.mat-sidenav { +.mat-drawer { background-color: white; color: rgba(0, 0, 0, 0.87); } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: white; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(0, 0, 0, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1430,7 +1580,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { - background-color: black; } + background-color: rgba(0, 0, 0, 0.87); } .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(197, 202, 233, 0.3); } - -.mat-ink-bar { - background-color: #3f51b5; } - .mat-tab-label, .mat-tab-link { color: rgba(0, 0, 0, 0.87); } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(0, 0, 0, 0.38); } +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.38); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #3f51b5; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(255, 128, 171, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #ff4081; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(197, 202, 233, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #3f51b5; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(255, 128, 171, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #ff4081; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: whitesmoke; color: rgba(0, 0, 0, 0.87); } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #323232; + color: white; } + +.mat-simple-snackbar-action { + color: #ff4081; } + .adf-panel-heading { float: left; font-size: 14px; @@ -1510,6 +1750,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-panel-heading-icon { float: left; } +.adf-panel-collapse { + display: inline-block; } + .adf-panel-heading-text { float: left; padding-left: 20px; @@ -3192,7 +3435,6 @@ adf-file-uploading-list-row:not(:first-child) { z-index: 5; } .adf-search-result { - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); min-width: 112px; max-width: 280px; overflow: auto; @@ -3207,6 +3449,8 @@ adf-file-uploading-list-row:not(:first-child) { border-collapse: collapse; white-space: nowrap; font-size: 14px; } + .adf-search-result:not([class*='mat-elevation-z']) { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .adf-search-result a { color: rgba(0, 0, 0, 0.87); text-decoration: none; } 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 edda7a8c33..cf7bfd4a1b 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: white; } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(255, 255, 255, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #c2185b; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #b0bec5; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(255, 255, 255, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #303030; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #c2185b; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #b0bec5; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #c2185b; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #686868; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #212121; - color: white; } + color: rgba(255, 255, 255, 0.7); } .mat-button-toggle-disabled { background-color: black; @@ -1018,21 +1113,40 @@ background-color: rgba(244, 67, 54, 0.26); } .mat-chip:not(.mat-basic-chip) { - background-color: #424242; + background-color: #616161; color: white; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #212121; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #c2185b; + color: rgba(255, 255, 255, 0.87); } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #c2185b; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #b0bec5; - color: rgba(0, 0, 0, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #b0bec5; + color: rgba(0, 0, 0, 0.87); } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: #424242; } @@ -1103,19 +1217,68 @@ .mat-action-row { border-top-color: rgba(255, 255, 255, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(255, 255, 255, 0.04); } .mat-expansion-panel-header-title { color: white; } -.mat-expansion-panel-header-description { - color: rgba(255, 255, 255, 0.7); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(255, 255, 255, 0.7); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(255, 255, 255, 0.3); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(255, 255, 255, 0.7); } + +.mat-hint { + color: rgba(255, 255, 255, 0.7); } + +.mat-focused .mat-form-field-placeholder { + color: #c2185b; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #b0bec5; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #b0bec5; } + +.mat-form-field-underline { + background-color: rgba(255, 255, 255, 0.7); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #c2185b; } + .mat-form-field-ripple.mat-accent { + background-color: #b0bec5; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #c2185b; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(255, 255, 255, 0.3); } - -.mat-focused .mat-input-placeholder { - color: #c2185b; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #b0bec5; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.7); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #b0bec5; } - -.mat-input-underline { - background-color: rgba(255, 255, 255, 0.12); } - -.mat-input-ripple { - background-color: #c2185b; } - .mat-input-ripple.mat-accent { - background-color: #b0bec5; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: white; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: white; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(255, 255, 255, 0.7); } +.mat-list-item-disabled { + background-color: black; } + .mat-divider { border-top-color: rgba(255, 255, 255, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(255, 255, 255, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(255, 255, 255, 0.04); } + +.mat-menu-panel { background: #424242; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: white; } .mat-menu-item[disabled] { color: rgba(255, 255, 255, 0.3); } - .mat-menu-item .mat-icon { - color: white; - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(255, 255, 255, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: white; } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(255, 255, 255, 0.04); } .mat-paginator { background: #424242; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.7); } .mat-select-underline { - background-color: rgba(255, 255, 255, 0.12); } + background-color: rgba(255, 255, 255, 0.7); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.7); } .mat-select-content, .mat-select-panel-done-animating { background: #424242; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: white; } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(255, 255, 255, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #c2185b; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #b0bec5; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #303030; color: white; } -.mat-sidenav { +.mat-drawer { background-color: #424242; color: white; } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: #424242; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(189, 189, 189, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(233, 30, 99, 0.3); } - -.mat-ink-bar { - background-color: #c2185b; } - .mat-tab-label, .mat-tab-link { color: white; } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(255, 255, 255, 0.3); } +.mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.3); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(233, 30, 99, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #c2185b; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(207, 216, 220, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #b0bec5; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(233, 30, 99, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #c2185b; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(207, 216, 220, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #b0bec5; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(0, 0, 0, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: #212121; color: white; } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #fafafa; + color: rgba(0, 0, 0, 0.87); } + +.mat-simple-snackbar-action { + color: inherit; } + .adf-panel-heading { float: left; font-size: 14px; @@ -1510,6 +1750,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-panel-heading-icon { float: left; } +.adf-panel-collapse { + display: inline-block; } + .adf-panel-heading-text { float: left; padding-left: 20px; @@ -3192,7 +3435,6 @@ adf-file-uploading-list-row:not(:first-child) { z-index: 5; } .adf-search-result { - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); min-width: 112px; max-width: 280px; overflow: auto; @@ -3207,6 +3449,8 @@ adf-file-uploading-list-row:not(:first-child) { border-collapse: collapse; white-space: nowrap; font-size: 14px; } + .adf-search-result:not([class*='mat-elevation-z']) { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .adf-search-result a { color: white; text-decoration: none; } 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 bf0eb37d79..ab74a2ff6b 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css @@ -111,7 +111,7 @@ font: 400 34px/40px Muli, Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -137,9 +137,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -166,6 +171,66 @@ .mat-dialog-title { font: 500 20px/32px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -180,62 +245,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Muli, Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -244,6 +261,7 @@ font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -253,6 +271,7 @@ font: 400 14px/20px Muli, Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -283,33 +302,62 @@ .mat-list-item { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Muli, Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Muli, Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Muli, Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Muli, Roboto, "Helvetica Neue", sans-serif; @@ -463,7 +511,7 @@ font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; margin: 0 0 64px; } -.mat-button, .mat-raised-button, .mat-icon-button { +.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 500; } @@ -489,9 +537,14 @@ .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; } -.mat-chip:not(.mat-basic-chip) { +.mat-chip { font-size: 13px; - line-height: 16px; } + line-height: 18px; } + .mat-chip .mat-chip-remove.mat-icon { + font-size: 18px; } + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-header-cell { font-size: 12px; @@ -518,6 +571,66 @@ .mat-dialog-title { font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; } +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400; } + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125; } + +.mat-form-field-wrapper { + padding-bottom: 1.25em; } + +.mat-form-field-prefix .mat-icon, +.mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125; } + +.mat-form-field-prefix .mat-icon-button, +.mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em; } + .mat-form-field-prefix .mat-icon-button .mat-icon, + .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125; } + +.mat-form-field-infix { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-placeholder-wrapper { + top: -0.84375em; + padding-top: 0.84375em; } + +.mat-form-field-placeholder { + top: 1.28125em; } + .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty), + .mat-focused .mat-form-field-placeholder.mat-form-field-float { + transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); + -ms-transform: translateY(-1.28125em) scale(0.75); + width: 133.33333%; } + +.mat-form-field-underline { + bottom: 1.25em; } + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: 0.54167em; + top: calc(100% - 1.66667em); } + .mat-grid-tile-header, .mat-grid-tile-footer { font-size: 14px; } @@ -532,62 +645,14 @@ .mat-grid-tile-footer .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-input-container { - font: 400 inherit/1.125 Roboto, "Helvetica Neue", sans-serif; } - -.mat-input-wrapper { - padding-bottom: 1.29688em; } - -.mat-input-prefix .mat-icon, -.mat-input-prefix .mat-datepicker-toggle, -.mat-input-suffix .mat-icon, -.mat-input-suffix .mat-datepicker-toggle { - font-size: 150%; } - -.mat-input-prefix .mat-icon-button, -.mat-input-suffix .mat-icon-button { - height: 1.5em; - width: 1.5em; } - .mat-input-prefix .mat-icon-button .mat-icon, - .mat-input-suffix .mat-icon-button .mat-icon { - line-height: 1.5; } - -.mat-input-infix { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; } - -.mat-input-element:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-placeholder-wrapper { - top: -0.84375em; - padding-top: 0.84375em; } - -.mat-input-placeholder { - top: 1.28125em; } - .mat-input-placeholder.mat-float:not(.mat-empty), .mat-focused .mat-input-placeholder.mat-float { - transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px); - -ms-transform: translateY(-1.28125em) scale(0.75); - width: 133.33333%; } - -.mat-input-underline { - bottom: 1.29688em; } - -.mat-input-subscript-wrapper { - font-size: 75%; - margin-top: 0.60417em; - top: calc(100% - 1.72917em); } +input.mat-input-element { + margin-top: -0.0625em; } .mat-menu-item { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 16px; } -.mat-paginator { - font-family: Roboto, "Helvetica Neue", sans-serif; - font-size: 12px; } - +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; } @@ -596,6 +661,7 @@ font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select { + padding-top: 16px; font-family: Roboto, "Helvetica Neue", sans-serif; } .mat-select-trigger { @@ -605,6 +671,7 @@ font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif; } .mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; } @@ -635,33 +702,62 @@ .mat-list-item { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif; } + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { font-size: 16px; } - .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { + .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { font-size: 14px; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { - font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif; } - -.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item { - font-size: 12px; } - .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px; } + .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } - .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; } + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px; } + .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { font-size: 12px; } -.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader { - font: 500 12px Roboto, "Helvetica Neue", sans-serif; } +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px; } + .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box; } + .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px; } + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; } .mat-option { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -682,6 +778,9 @@ .mat-ripple { overflow: hidden; } + @media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none; } } .mat-ripple.mat-ripple-unbounded { overflow: visible; } @@ -728,11 +827,11 @@ padding-right: 32px; } .mat-option-ripple { - position: absolute; top: 0; left: 0; - bottom: 0; right: 0; + bottom: 0; + position: absolute; pointer-events: none; } @media screen and (-ms-high-contrast: active) { .mat-option-ripple { @@ -777,7 +876,6 @@ overflow: hidden; padding: 0; position: absolute; - text-transform: none; width: 1px; } .cdk-overlay-container, .cdk-global-overlay-wrapper { @@ -834,11 +932,11 @@ color: white; } .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) { background: rgba(255, 255, 255, 0.04); } - .mat-option.mat-selected.mat-primary, .mat-primary .mat-option.mat-selected { + .mat-primary .mat-option.mat-selected { color: #7b1fa2; } - .mat-option.mat-selected.mat-accent, .mat-accent .mat-option.mat-selected { + .mat-accent .mat-option.mat-selected { color: #69f0ae; } - .mat-option.mat-selected.mat-warn, .mat-warn .mat-option.mat-selected { + .mat-warn .mat-option.mat-selected { color: #f44336; } .mat-option.mat-selected:not(.mat-option-multiple) { background: rgba(255, 255, 255, 0.04); } @@ -859,25 +957,22 @@ .mat-pseudo-checkbox::after { color: #303030; } -.mat-pseudo-checkbox-checked.mat-primary, -.mat-pseudo-checkbox-indeterminate.mat-primary, -.mat-primary .mat-pseudo-checkbox-checked, -.mat-primary .mat-pseudo-checkbox-indeterminate { - background: #7b1fa2; } - -.mat-pseudo-checkbox-checked.mat-accent, -.mat-pseudo-checkbox-indeterminate.mat-accent, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate { background: #69f0ae; } -.mat-pseudo-checkbox-checked.mat-warn, -.mat-pseudo-checkbox-indeterminate.mat-warn, +.mat-primary .mat-pseudo-checkbox-checked, +.mat-primary .mat-pseudo-checkbox-indeterminate { + background: #7b1fa2; } + .mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { background: #f44336; } -.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, +.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { background: #686868; } .mat-app-background { @@ -963,7 +1058,7 @@ .mat-button-toggle-checked { background-color: #212121; - color: white; } + color: rgba(255, 255, 255, 0.7); } .mat-button-toggle-disabled { background-color: black; @@ -1018,21 +1113,40 @@ background-color: rgba(244, 67, 54, 0.26); } .mat-chip:not(.mat-basic-chip) { - background-color: #424242; + background-color: #616161; color: white; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: 0.54; } -.mat-chip.mat-chip-selected:not(.mat-basic-chip) { - background-color: #212121; +.mat-chip.mat-chip-selected.mat-primary { + background-color: #7b1fa2; + color: rgba(255, 255, 255, 0.87); } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: rgba(255, 255, 255, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; color: white; } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-primary { - background-color: #7b1fa2; - color: rgba(255, 255, 255, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-accent { - background-color: #69f0ae; - color: rgba(0, 0, 0, 0.87); } - .mat-chip.mat-chip-selected:not(.mat-basic-chip).mat-warn { - background-color: #f44336; - color: white; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: white; + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: 0.54; } + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #69f0ae; + color: rgba(0, 0, 0, 0.87); } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(0, 0, 0, 0.87); + opacity: 0.4; } + .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: 0.54; } .mat-table { background: #424242; } @@ -1103,19 +1217,68 @@ .mat-action-row { border-top-color: rgba(255, 255, 255, 0.12); } -.mat-expansion-panel-header:focus, -.mat-expansion-panel-header:hover { +.mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: rgba(255, 255, 255, 0.04); } .mat-expansion-panel-header-title { color: white; } -.mat-expansion-panel-header-description { - color: rgba(255, 255, 255, 0.7); } - +.mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: rgba(255, 255, 255, 0.7); } +.mat-expansion-panel-header[aria-disabled='true'] { + color: rgba(255, 255, 255, 0.3); } + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title, + .mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description { + color: inherit; } + +.mat-form-field { + width: 200px; } + +.mat-form-field-placeholder { + color: rgba(255, 255, 255, 0.7); } + +.mat-hint { + color: rgba(255, 255, 255, 0.7); } + +.mat-focused .mat-form-field-placeholder { + color: #7b1fa2; } + .mat-focused .mat-form-field-placeholder.mat-accent { + color: #69f0ae; } + .mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336; } + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker, +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #69f0ae; } + +.mat-form-field-underline { + background-color: rgba(255, 255, 255, 0.7); } + .mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } + +.mat-form-field-ripple { + background-color: #7b1fa2; } + .mat-form-field-ripple.mat-accent { + background-color: #69f0ae; } + .mat-form-field-ripple.mat-warn { + background-color: #f44336; } + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336; } + .mat-form-field-invalid .mat-form-field-placeholder.mat-accent, + .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336; } + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336; } + +.mat-error { + color: #f44336; } + .mat-icon.mat-primary { color: #7b1fa2; } @@ -1125,51 +1288,21 @@ .mat-icon.mat-warn { color: #f44336; } -.mat-input-placeholder { - color: rgba(255, 255, 255, 0.3); } - -.mat-focused .mat-input-placeholder { - color: #7b1fa2; } - .mat-focused .mat-input-placeholder.mat-accent { - color: #69f0ae; } - .mat-focused .mat-input-placeholder.mat-warn { - color: #f44336; } - .mat-input-element:disabled { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.7); } -input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placeholder-required, -.mat-focused .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #69f0ae; } - -.mat-input-underline { - background-color: rgba(255, 255, 255, 0.12); } - -.mat-input-ripple { - background-color: #7b1fa2; } - .mat-input-ripple.mat-accent { - background-color: #69f0ae; } - .mat-input-ripple.mat-warn { - background-color: #f44336; } - -.mat-input-invalid .mat-input-placeholder { - color: #f44336; } - .mat-input-invalid .mat-input-placeholder.mat-accent, - .mat-input-invalid .mat-input-placeholder.mat-float .mat-placeholder-required { - color: #f44336; } - -.mat-input-invalid .mat-input-ripple { - background-color: #f44336; } - -.mat-input-error { - color: #f44336; } - -.mat-list .mat-list-item, .mat-nav-list .mat-list-item { +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { color: white; } -.mat-list .mat-subheader, .mat-nav-list .mat-subheader { +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: white; } + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { color: rgba(255, 255, 255, 0.7); } +.mat-list-item-disabled { + background-color: black; } + .mat-divider { border-top-color: rgba(255, 255, 255, 0.12); } @@ -1178,7 +1311,12 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus { background: rgba(255, 255, 255, 0.04); } -.mat-menu-content { +.mat-list-option { + outline: none; } + .mat-list-option:hover, .mat-list-option.mat-list-item-focus { + background: rgba(255, 255, 255, 0.04); } + +.mat-menu-panel { background: #424242; } .mat-menu-item { @@ -1186,11 +1324,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold color: white; } .mat-menu-item[disabled] { color: rgba(255, 255, 255, 0.3); } - .mat-menu-item .mat-icon { - color: white; - vertical-align: middle; } - .mat-menu-item:hover:not([disabled]), .mat-menu-item:focus:not([disabled]) { - background: rgba(255, 255, 255, 0.04); } + +.mat-menu-item .mat-icon, +.mat-menu-item-submenu-trigger::after { + color: white; } + +.mat-menu-item:hover:not([disabled]), +.mat-menu-item:focus:not([disabled]), +.mat-menu-item-highlighted:not([disabled]) { + background: rgba(255, 255, 255, 0.04); } .mat-paginator { background: #424242; } @@ -1285,15 +1427,20 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-trigger, .mat-select-arrow { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.7); } .mat-select-underline { - background-color: rgba(255, 255, 255, 0.12); } + background-color: rgba(255, 255, 255, 0.7); } + +[aria-disabled='true'] .mat-select-underline { + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 33%, transparent 0%); + background-size: 4px 1px; + background-repeat: repeat-x; } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.7); } .mat-select-content, .mat-select-panel-done-animating { background: #424242; } @@ -1301,6 +1448,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select-value { color: white; } +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(255, 255, 255, 0.12); } + .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow { color: #7b1fa2; } @@ -1313,26 +1463,26 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { background-color: #69f0ae; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-trigger, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-arrow { +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { color: #f44336; } -.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, -.mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) .mat-select-underline { +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select-invalid .mat-select-arrow { + color: #f44336; } + +.mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline, .mat-select-invalid .mat-select-underline { background-color: #f44336; } -.mat-sidenav-container { +.mat-drawer-container { background-color: #303030; color: white; } -.mat-sidenav { +.mat-drawer { background-color: #424242; color: white; } - .mat-sidenav.mat-sidenav-push { + .mat-drawer.mat-drawer-push { background-color: #424242; } -.mat-sidenav-backdrop.mat-sidenav-shown { +.mat-drawer-backdrop.mat-drawer-shown { background-color: rgba(189, 189, 189, 0.6); } .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { @@ -1465,17 +1615,100 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: none; } -.mat-tab-label:focus { - background-color: rgba(156, 39, 176, 0.3); } - -.mat-ink-bar { - background-color: #7b1fa2; } - .mat-tab-label, .mat-tab-link { color: white; } .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { color: rgba(255, 255, 255, 0.3); } +.mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.3); } + +.mat-tab-group[class*='mat-background-'] .mat-tab-header, +.mat-tab-nav-bar[class*='mat-background-'] { + border-bottom: none; + border-top: none; } + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(156, 39, 176, 0.3); } + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #7b1fa2; } + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(185, 246, 202, 0.3); } + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #69f0ae; } + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336; } + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: white; } + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(156, 39, 176, 0.3); } + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #7b1fa2; } + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: rgba(255, 255, 255, 0.87); } + .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.87); } + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(185, 246, 202, 0.3); } + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #69f0ae; } + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(0, 0, 0, 0.87); } + .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.87); } + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, 0.3); } + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336; } + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: white; } + .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, 0.4); } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: white; } + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, 0.4); } + .mat-toolbar { background: #212121; color: white; } @@ -1492,6 +1725,13 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .mat-tooltip { background: rgba(97, 97, 97, 0.9); } +.mat-snack-bar-container { + background: #fafafa; + color: rgba(0, 0, 0, 0.87); } + +.mat-simple-snackbar-action { + color: inherit; } + .adf-panel-heading { float: left; font-size: 14px; @@ -1510,6 +1750,9 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-panel-heading-icon { float: left; } +.adf-panel-collapse { + display: inline-block; } + .adf-panel-heading-text { float: left; padding-left: 20px; @@ -3192,7 +3435,6 @@ adf-file-uploading-list-row:not(:first-child) { z-index: 5; } .adf-search-result { - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); min-width: 112px; max-width: 280px; overflow: auto; @@ -3207,6 +3449,8 @@ adf-file-uploading-list-row:not(:first-child) { border-collapse: collapse; white-space: nowrap; font-size: 14px; } + .adf-search-result:not([class*='mat-elevation-z']) { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .adf-search-result a { color: white; text-decoration: none; } diff --git a/ng2-components/ng2-alfresco-core/styles/prebuilt/_all-theme.scss b/ng2-components/ng2-alfresco-core/styles/prebuilt/_all-theme.scss new file mode 100644 index 0000000000..c0a95e496b --- /dev/null +++ b/ng2-components/ng2-alfresco-core/styles/prebuilt/_all-theme.scss @@ -0,0 +1,27 @@ +@import '../../../ng2-alfresco-core/styles/index'; +@import '../../../ng2-activiti-analytics/styles/index'; +@import '../../../ng2-activiti-diagrams/styles/index'; +@import '../../../ng2-activiti-form/styles/index'; +@import '../../../ng2-activiti-processlist/styles/index'; +@import '../../../ng2-activiti-tasklist/styles/index'; +@import '../../../ng2-alfresco-datatable/styles/index'; +@import '../../../ng2-alfresco-documentlist/styles/index'; +@import '../../../ng2-alfresco-login/styles/index'; +@import '../../../ng2-alfresco-upload/styles/index'; +@import '../../../ng2-alfresco-userinfo/styles/index'; +@import '../../../ng2-alfresco-search/styles/index'; + +@mixin alfresco-material-theme($theme) { + @include alfresco-core-theme($theme); + @include alfresco-activity-analytics-theme($theme); + @include alfresco-activity-diagrams-theme($theme); + @include alfresco-activity-form-theme($theme); + @include alfresco-activity-processlist-theme($theme); + @include alfresco-activity-tasklist-theme($theme); + @include alfresco-datatable-theme($theme); + @include alfresco-documentlist-theme($theme); + @include alfresco-login-theme($theme); + @include alfresco-upload-theme($theme); + @include alfresco-userinfo-theme($theme); + @include alfresco-search-theme($theme); +} diff --git a/ng2-components/config/prebuilt/adf-blue-orange.scss b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-blue-orange.scss similarity index 91% rename from ng2-components/config/prebuilt/adf-blue-orange.scss rename to ng2-components/ng2-alfresco-core/styles/prebuilt/adf-blue-orange.scss index cbf02cad9f..bce33734a2 100644 --- a/ng2-components/config/prebuilt/adf-blue-orange.scss +++ b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-blue-orange.scss @@ -1,4 +1,4 @@ -@import '~ng2-alfresco-core/styles/theming'; +@import '../theming'; @import './all-theme'; $custom-typography: mat-typography-config( diff --git a/ng2-components/config/prebuilt/adf-blue-purple.scss b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-blue-purple.scss similarity index 91% rename from ng2-components/config/prebuilt/adf-blue-purple.scss rename to ng2-components/ng2-alfresco-core/styles/prebuilt/adf-blue-purple.scss index 00d3e80b68..fac7339cdf 100644 --- a/ng2-components/config/prebuilt/adf-blue-purple.scss +++ b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-blue-purple.scss @@ -1,4 +1,4 @@ -@import '~ng2-alfresco-core/styles/theming'; +@import '../theming'; @import './all-theme'; $custom-typography: mat-typography-config( diff --git a/ng2-components/config/prebuilt/adf-cyan-orange.scss b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-cyan-orange.scss similarity index 91% rename from ng2-components/config/prebuilt/adf-cyan-orange.scss rename to ng2-components/ng2-alfresco-core/styles/prebuilt/adf-cyan-orange.scss index 56b8948b5f..cfee8e332a 100644 --- a/ng2-components/config/prebuilt/adf-cyan-orange.scss +++ b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-cyan-orange.scss @@ -1,4 +1,4 @@ -@import '~ng2-alfresco-core/styles/theming'; +@import '../theming'; @import './all-theme'; $custom-typography: mat-typography-config( diff --git a/ng2-components/config/prebuilt/adf-cyan-purple.scss b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-cyan-purple.scss similarity index 91% rename from ng2-components/config/prebuilt/adf-cyan-purple.scss rename to ng2-components/ng2-alfresco-core/styles/prebuilt/adf-cyan-purple.scss index 37dd132237..acae9b8c2e 100644 --- a/ng2-components/config/prebuilt/adf-cyan-purple.scss +++ b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-cyan-purple.scss @@ -1,4 +1,4 @@ -@import '~ng2-alfresco-core/styles/theming'; +@import '../theming'; @import './all-theme'; $custom-typography: mat-typography-config( diff --git a/ng2-components/config/prebuilt/adf-green-orange.scss b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-green-orange.scss similarity index 91% rename from ng2-components/config/prebuilt/adf-green-orange.scss rename to ng2-components/ng2-alfresco-core/styles/prebuilt/adf-green-orange.scss index 3d07dc8ecd..b5e5abf168 100644 --- a/ng2-components/config/prebuilt/adf-green-orange.scss +++ b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-green-orange.scss @@ -1,4 +1,4 @@ -@import '~ng2-alfresco-core/styles/theming'; +@import '../theming'; @import './all-theme'; $custom-typography: mat-typography-config( diff --git a/ng2-components/config/prebuilt/adf-green-purple.scss b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-green-purple.scss similarity index 91% rename from ng2-components/config/prebuilt/adf-green-purple.scss rename to ng2-components/ng2-alfresco-core/styles/prebuilt/adf-green-purple.scss index e3ad5b3cca..774218e3eb 100644 --- a/ng2-components/config/prebuilt/adf-green-purple.scss +++ b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-green-purple.scss @@ -1,4 +1,4 @@ -@import '~ng2-alfresco-core/styles/theming'; +@import '../theming'; @import './all-theme'; $custom-typography: mat-typography-config( diff --git a/ng2-components/config/prebuilt/adf-indigo-pink.scss b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-indigo-pink.scss similarity index 90% rename from ng2-components/config/prebuilt/adf-indigo-pink.scss rename to ng2-components/ng2-alfresco-core/styles/prebuilt/adf-indigo-pink.scss index f7ef96f962..d39956a444 100644 --- a/ng2-components/config/prebuilt/adf-indigo-pink.scss +++ b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-indigo-pink.scss @@ -1,4 +1,4 @@ -@import '~ng2-alfresco-core/styles/theming'; +@import '../theming'; @import './all-theme'; $custom-typography: mat-typography-config( diff --git a/ng2-components/config/prebuilt/adf-pink-bluegrey.scss b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-pink-bluegrey.scss similarity index 90% rename from ng2-components/config/prebuilt/adf-pink-bluegrey.scss rename to ng2-components/ng2-alfresco-core/styles/prebuilt/adf-pink-bluegrey.scss index c39f1d1f58..40ddfdb627 100644 --- a/ng2-components/config/prebuilt/adf-pink-bluegrey.scss +++ b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-pink-bluegrey.scss @@ -1,4 +1,4 @@ -@import '~ng2-alfresco-core/styles/theming'; +@import '../theming'; @import './all-theme'; $custom-typography: mat-typography-config( diff --git a/ng2-components/config/prebuilt/adf-purple-green.scss b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-purple-green.scss similarity index 90% rename from ng2-components/config/prebuilt/adf-purple-green.scss rename to ng2-components/ng2-alfresco-core/styles/prebuilt/adf-purple-green.scss index f92973fb7b..fa167e28e7 100644 --- a/ng2-components/config/prebuilt/adf-purple-green.scss +++ b/ng2-components/ng2-alfresco-core/styles/prebuilt/adf-purple-green.scss @@ -1,4 +1,4 @@ -@import '~ng2-alfresco-core/styles/theming'; +@import '../theming'; @import './all-theme'; $custom-typography: mat-typography-config( diff --git a/ng2-components/ng2-alfresco-core/webpack.style.js b/ng2-components/ng2-alfresco-core/webpack.style.js new file mode 100644 index 0000000000..02535ed1e8 --- /dev/null +++ b/ng2-components/ng2-alfresco-core/webpack.style.js @@ -0,0 +1 @@ +module.exports = require('./config/webpack.style.js');