From 2fc9b63f5c6f1c9eb5c6c2002fb58a0f46462d16 Mon Sep 17 00:00:00 2001 From: Vito Date: Mon, 11 Sep 2017 03:42:01 -0700 Subject: [PATCH] [ADF-1238] Removed mdl from alfresco search component (#2309) * [ADF-1328] removed mdl from adf search * [ADF-11328] removed mdl from search added theme style * Fix failing tests * Fix the last bit of stylings --- demo-shell-ng2/app/app.component.html | 2 +- demo-shell-ng2/app/app.component.ts | 10 - demo-shell-ng2/app/theme.scss | 2 + .../config/prebuilt/_all-theme.scss | 2 + .../prebuilt-themes/adf-blue-orange.css | 480 ++++++++++-------- .../prebuilt-themes/adf-blue-purple.css | 480 ++++++++++-------- .../prebuilt-themes/adf-cyan-orange.css | 480 ++++++++++-------- .../prebuilt-themes/adf-cyan-purple.css | 480 ++++++++++-------- .../prebuilt-themes/adf-green-orange.css | 480 ++++++++++-------- .../prebuilt-themes/adf-green-purple.css | 480 ++++++++++-------- .../prebuilt-themes/adf-indigo-pink.css | 480 ++++++++++-------- .../prebuilt-themes/adf-pink-bluegrey.css | 480 ++++++++++-------- .../prebuilt-themes/adf-purple-green.css | 480 ++++++++++-------- .../search-autocomplete.component.html | 6 +- .../search-autocomplete.component.scss | 117 +++-- .../search-autocomplete.component.ts | 5 +- .../components/search-control.component.html | 52 +- .../components/search-control.component.scss | 75 ++- .../search-control.component.spec.ts | 22 +- .../components/search-control.component.ts | 34 +- .../src/components/search.component.html | 2 +- .../src/components/search.component.scss | 6 +- .../ng2-alfresco-search/styles/index.scss | 7 + 23 files changed, 2544 insertions(+), 2118 deletions(-) create mode 100644 ng2-components/ng2-alfresco-search/styles/index.scss diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html index 92feb69098..a788cb75e7 100644 --- a/demo-shell-ng2/app/app.component.html +++ b/demo-shell-ng2/app/app.component.html @@ -9,7 +9,7 @@
- + Home Content Services diff --git a/demo-shell-ng2/app/app.component.ts b/demo-shell-ng2/app/app.component.ts index c95712a3c2..8e0ea788fb 100644 --- a/demo-shell-ng2/app/app.component.ts +++ b/demo-shell-ng2/app/app.component.ts @@ -71,16 +71,6 @@ export class AppComponent { this.router.navigate(['/login']); } - onToggleSearch(event) { - let expandedHeaderClass = 'header-search-expanded', - header = document.querySelector('header'); - if (event.expanded) { - header.classList.add(expandedHeaderClass); - } else { - header.classList.remove(expandedHeaderClass); - } - } - changeLanguage(lang: string) { this.translateService.use(lang); } diff --git a/demo-shell-ng2/app/theme.scss b/demo-shell-ng2/app/theme.scss index 4665606589..5b41ff3b6e 100644 --- a/demo-shell-ng2/app/theme.scss +++ b/demo-shell-ng2/app/theme.scss @@ -10,6 +10,7 @@ @import '~ng2-alfresco-login/styles/index'; @import '~ng2-alfresco-upload/styles/index'; @import '~ng2-alfresco-userinfo/styles/index'; +@import '~ng2-alfresco-search/styles/index'; @include mat-core(); @@ -32,3 +33,4 @@ $theme: mat-light-theme($primary, $accent, $warn); @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/_all-theme.scss b/ng2-components/config/prebuilt/_all-theme.scss index 6b1cea1641..e9791048f1 100644 --- a/ng2-components/config/prebuilt/_all-theme.scss +++ b/ng2-components/config/prebuilt/_all-theme.scss @@ -9,6 +9,7 @@ @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); @@ -22,4 +23,5 @@ @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/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css index 27641fe59f..3b31e6d180 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 @@ -1243,38 +1243,38 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-textitem-editable textarea:focus { border: 1px solid #EEE; } -.adf-textitem-editable /deep/ .mat-input-wrapper { +.adf-textitem-editable .mat-input-wrapper { margin: 0; padding-bottom: 0; } -.adf-textitem-editable /deep/ .mat-input-underline { +.adf-textitem-editable .mat-input-underline { display: none; } -.adf-textitem-editable /deep/ .mat-input-infix { +.adf-textitem-editable .mat-input-infix { padding: 0; border-top: none; } -.adf-textitem-editable /deep/ .mat-input-placeholder-wrapper { +.adf-textitem-editable .mat-input-placeholder-wrapper { padding-top: 2em; position: static; } -.adf-textitem-editable /deep/ .mat-input-placeholder { +.adf-textitem-editable .mat-input-placeholder { top: 0; } -.adf-textitem-editable /deep/ .mat-input-element { +.adf-textitem-editable .mat-input-element { font-family: inherit; position: relative; padding-top: 3px; } -.adf-textitem-editable /deep/ .mat-input-element:focus { +.adf-textitem-editable .mat-input-element:focus { padding: 5px; left: -6px; top: -6px; } -.adf-textitem-editable /deep/ input.mat-input-element { +.adf-textitem-editable input.mat-input-element { margin-bottom: 2px; } -.adf-textitem-editable /deep/ input.mat-input-element:focus { +.adf-textitem-editable input.mat-input-element:focus { margin-bottom: -8px; } .adf-invisible-date-input { @@ -1305,7 +1305,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-property { display: table-row; } -.adf-property /deep/ .adf-property-label { +.adf-property .adf-property-label { display: table-cell; min-width: 100px; padding-right: 30px; @@ -1314,7 +1314,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold vertical-align: top; padding-bottom: 20px; } -.adf-property /deep/ .adf-property-value { +.adf-property .adf-property-value { width: 100%; display: table-cell; color: #656565; @@ -2345,38 +2345,38 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric cursor: pointer; } .adf-content-node-selector-dialog .adf-content-node-selector-content-input-icon:hover { color: black; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .mat-input-underline .mat-input-ripple { + .adf-content-node-selector-dialog .adf-content-node-selector-content .mat-input-underline .mat-input-ripple { height: 1px; transition: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element { width: 100%; margin-bottom: 20px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-trigger { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-trigger { font-size: 14px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element.mat-select { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element.mat-select { font-family: 'Muli', "Helvetica", "Arial", sans-serif; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-toolbar .mat-toolbar { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-toolbar .mat-toolbar { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list { height: 200px; overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-highlight { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { color: #33afdfnpm np; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-no-content-container { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { text-align: center; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table thead { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table thead { display: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-data-table-cell { padding-top: 8px; padding-bottom: 8px; border-top: none; height: 30px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr { height: auto !important; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr:last-child .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr:last-child .adf-data-table-cell { border-bottom: none; } .adf-content-node-selector-dialog .adf-content-node-selector-actions { @@ -2499,20 +2499,6 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric object-fit: contain; margin-top: 17px; } -.show { - display: block !important; } - -.hide { - display: none !important; } - -.icon-inline { - position: absolute; - display: block; - top: 31%; - left: 82%; - width: 30px; - overflow: hidden; } - .adf-login-content { display: -webkit-flex; display: -ms-flexbox; @@ -2538,186 +2524,156 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric flex-direction: column; justify-content: center; align-items: center; } - -.adf-login-card-wide { - border-radius: 8px; - background-color: white; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - width: 450px; - min-width: 350px; - padding: 21px 64px 34px 64px; - box-sizing: border-box; } - -@media (max-width: 482px) { - .adf-login-card-wide { - width: calc(100% - 32px); } } - -.error { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: flex-start; - -moz-box-pack: flex-start; - box-pack: flex-start; - justify-content: flex-start; - color: #f44336; - padding: 0px; - margin-bottom: 4px; - font-size: 13px; } - -.error .error-icon { - margin-right: 10px; } - -.adf-img-logo { - display: block; - margin-left: auto; - margin-right: auto; } - -.adf-alfresco-logo { - padding: 24px 16px 24px 16px; } - -.adf-alfresco-logo img { - max-height: 43px; } - -.adf-login-button { - width: 100%; - height: 36px; - line-height: 38px; - box-shadow: none; } - -.adf-login-button-label { - color: white; } - -.adf-login-button.isChecking { - background-color: #e0f7fa; } - -.adf-login-button.isChecking .adf-login-button-label { - color: #00bcd4; } - -.adf-login-button.isWelcome { - background-color: #00bcd4; - color: #ffffff; } - -.adf-login-button.isWelcome .welcome-icon { - margin: 5px 0 0 10px; } - -.adf-interactive-login-label { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - justify-content: center; } - -.adf-login-checking-spinner { - height: 30px !important; - width: 20px !important; - margin-left: 10px; } - -.adf-login-controls { - padding: 0 0 26px 0; - overflow: visible; - width: 100%; } - -.adf-login-action { - margin-top: 20px; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: space-between; - -moz-box-pack: space-between; - box-pack: space-between; - justify-content: space-between; } - -.adf-login-action-left a, .adf-login-action-right a { - text-decoration: none; } - -/* Known issue in angular material design module in betas */ -> > > .rememberme-cb label > div { - margin-right: 8px; } - -.is-active { - background-color: transparent; - font-size: 12px; - font-weight: normal; - line-height: 1.33; - color: #f44336; } - -.copyright { - width: 450px; - text-align: center; - padding-top: 16px; - font-size: 12px; - opacity: 0.54; } - -.mat-input-container .adf-login-password-icon.mat-icon { - font-size: 24px; - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - position: relative; - top: -6px; - height: 20px; - opacity: 0.54; } - -.adf-login__field > > > .mat-input-wrapper { - margin: 1em 0 0 0; - font-size: 16px; } - -.adf-login-validation { - background-color: transparent; - color: #f44336; - font-size: 12px; } - -.adf-login-error { - color: #f44336; - position: absolute; - font-size: 12px; - margin-top: 5px; - display: block; } - -.adf-login-message { - color: blue; } - -.adf-full-width { - width: 100%; } - -.adf-login__remember-me { - padding-top: 22px; } - -.adf-login__remember-me > > > .mat-checkbox-label { - opacity: 0.87; } - -.adf-login__field { - display: block; - margin-left: auto; - margin-right: auto; - padding-bottom: 18px; } - -.adf-login-action-container { - border-top: 1px solid rgba(0, 0, 0, 0.1); - margin-top: 23px; } + .adf-login-content .show { + display: block !important; } + .adf-login-content .hide { + display: none !important; } + .adf-login-content .icon-inline { + position: absolute; + display: block; + top: 31%; + left: 82%; + width: 30px; + overflow: hidden; } + .adf-login-content .adf-login-card-wide { + border-radius: 8px; + background-color: white; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + width: 450px; + min-width: 350px; + padding: 21px 64px 34px 64px; + box-sizing: border-box; } + @media (max-width: 482px) { + .adf-login-content .adf-login-card-wide { + width: calc(100% - 32px); } } + .adf-login-content .adf-error-message { + display: flex; + box-orient: horizontal; + flex-direction: row; + justify-content: flex-start; + color: #f44336; + padding: 0px; + margin-bottom: 4px; + font-size: 13px; } + .adf-login-content .adf-error-message .error-icon { + margin-right: 10px; } + .adf-login-content .adf-img-logo { + display: block; + margin-left: auto; + margin-right: auto; } + .adf-login-content .adf-alfresco-logo { + padding: 24px 16px 24px 16px; } + .adf-login-content .adf-alfresco-logo img { + max-height: 43px; } + .adf-login-content .adf-login-button { + width: 100%; + height: 36px; + line-height: 38px; + box-shadow: none; } + .adf-login-content .adf-login-button-label { + color: white; } + .adf-login-content .adf-login-button.isChecking { + background-color: #e0f7fa; } + .adf-login-content .adf-login-button.isChecking .adf-login-button-label { + color: #00bcd4; } + .adf-login-content .adf-login-button.isWelcome { + background-color: #00bcd4; + color: #ffffff; } + .adf-login-content .adf-login-button.isWelcome .welcome-icon { + margin: 5px 0 0 10px; } + .adf-login-content .adf-interactive-login-label { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; + justify-content: center; } + .adf-login-content .adf-login-checking-spinner { + height: 30px !important; + width: 20px !important; + margin-left: 10px; } + .adf-login-content .adf-login-controls { + padding: 0 0 26px 0; + overflow: visible; + width: 100%; } + .adf-login-content .adf-login-action { + margin-top: 20px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: space-between; + -moz-box-pack: space-between; + box-pack: space-between; + justify-content: space-between; } + .adf-login-content .adf-login-action-left a, .adf-login-content .adf-login-action-right a { + text-decoration: none; } + .adf-login-content .is-active { + background-color: transparent; + font-size: 12px; + font-weight: normal; + line-height: 1.33; + color: #f44336; } + .adf-login-content .copyright { + width: 450px; + text-align: center; + padding-top: 16px; + font-size: 12px; + opacity: 0.54; } + .adf-login-content .mat-input-container .adf-login-password-icon.mat-icon { + font-size: 24px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + position: relative; + top: -6px; + height: 20px; + opacity: 0.54; } + .adf-login-content .adf-login__field .mat-input-wrapper { + margin: 1em 0 0 0; + font-size: 16px; } + .adf-login-content .adf-login__field input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px white inset; } + .adf-login-content .adf-login-validation { + background-color: transparent; + color: #f44336; + font-size: 12px; } + .adf-login-content .adf-login-error { + color: #f44336; + position: absolute; + font-size: 12px; + margin-top: -12px; + display: block; } + .adf-login-content .adf-login-message { + color: blue; } + .adf-login-content .adf-full-width { + width: 100%; } + .adf-login-content .adf-login__remember-me { + padding-top: 22px; } + .adf-login-content .adf-login__remember-me .mat-checkbox-label { + opacity: 0.87; } + .adf-login-content .adf-login__field { + display: block; + margin-left: auto; + margin-right: auto; + padding-bottom: 18px; } + .adf-login-content .adf-login-action-container { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 23px; } adf-file-uploading-list-row:not(:first-child) { display: block; @@ -2830,11 +2786,11 @@ adf-file-uploading-list-row:not(:first-child) { min-width: 40px; height: 40px; } -.adf-userinfo-tab /deep/ .mat-tab-header { +.adf-userinfo-tab .mat-tab-header { align-self: center; width: 100%; } -.adf-userinfo-tab /deep/ .mat-tab-label { +.adf-userinfo-tab .mat-tab-label { flex: auto; font-weight: 500; font-size: 14px; @@ -2926,7 +2882,7 @@ adf-file-uploading-list-row:not(:first-child) { .adf-userinfo-detail { text-align: left; } -.adf-hide-tab /deep/ .mat-tab-label-active { +.adf-hide-tab .mat-tab-label-active { display: none !important; } @media only screen and (min-device-width: 480px) { @@ -2936,5 +2892,87 @@ adf-file-uploading-list-row:not(:first-child) { overflow: auto; padding: 0px; } } -.mat-menu-panel.adf-userinfo-menu /deep/ .mat-menu-content { +.mat-menu-panel.adf-userinfo-menu .mat-menu-content { padding: 0px; } + +.adf-search-button.mat-button { + border-radius: 50%; + height: 32px; + min-width: 20px; + width: 32px; + padding: 0; + overflow: hidden; + color: inherit; + line-height: normal; + border: none; } + +.adf-search-container { + display: flex; + align-items: center; } + .adf-search-container .search-field { + width: 260px; + padding-top: 6px; } + .adf-search-container .search-field .mat-input-container { + width: 100%; } + .adf-search-container .search-field .mat-input-underline .mat-input-ripple { + background-color: white; } + .adf-search-container .search-field .mat-input-element { + font-size: 16px; } + .adf-search-container .search-field .mat-input-infix { + padding: 0px; } + @media only screen and (max-width: 400px) { + .adf-search-container .search-field { + width: 200px; } } + @media only screen and (max-width: 320px) { + .adf-search-container .search-field { + width: 160px; } } + +.adf-search-form { + overflow: hidden; } + +.adf-active-search, .adf-valid-search { + display: block; } + +.adf-search-result { + position: absolute; + z-index: 5; + display: none; + color: rgba(0, 0, 0, 0.87); + background-color: white; + margin: -21px 0px 0px 0px; + border: 1px solid #2196f3; + border-collapse: collapse; + white-space: nowrap; + font-size: 14px; } + .adf-search-result a { + color: rgba(0, 0, 0, 0.87); + text-decoration: none; } + .adf-search-result table { + width: 300px; } + .adf-search-result tbody tr { + height: 32px; } + .adf-search-result tbody tr:hover { + background-color: rgba(0, 0, 0, 0.04); } + .adf-search-result td { + height: 32px; + padding: 8px; + text-align: left; + border-top: none; + border-bottom: none; } + .adf-search-result .highlight { + color: #0d47a1; } + .adf-search-result .img-td { + width: 30px; } + .adf-search-result .truncate { + width: 240px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + @media screen and (max-width: 400px) { + .adf-search-result :host { + right: 0; } + .adf-search-result .truncate { + width: 200px; } } + +.adf-valid-search .adf-search-result { + display: block; } 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 1950d76b19..13824d2785 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 @@ -1243,38 +1243,38 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-textitem-editable textarea:focus { border: 1px solid #EEE; } -.adf-textitem-editable /deep/ .mat-input-wrapper { +.adf-textitem-editable .mat-input-wrapper { margin: 0; padding-bottom: 0; } -.adf-textitem-editable /deep/ .mat-input-underline { +.adf-textitem-editable .mat-input-underline { display: none; } -.adf-textitem-editable /deep/ .mat-input-infix { +.adf-textitem-editable .mat-input-infix { padding: 0; border-top: none; } -.adf-textitem-editable /deep/ .mat-input-placeholder-wrapper { +.adf-textitem-editable .mat-input-placeholder-wrapper { padding-top: 2em; position: static; } -.adf-textitem-editable /deep/ .mat-input-placeholder { +.adf-textitem-editable .mat-input-placeholder { top: 0; } -.adf-textitem-editable /deep/ .mat-input-element { +.adf-textitem-editable .mat-input-element { font-family: inherit; position: relative; padding-top: 3px; } -.adf-textitem-editable /deep/ .mat-input-element:focus { +.adf-textitem-editable .mat-input-element:focus { padding: 5px; left: -6px; top: -6px; } -.adf-textitem-editable /deep/ input.mat-input-element { +.adf-textitem-editable input.mat-input-element { margin-bottom: 2px; } -.adf-textitem-editable /deep/ input.mat-input-element:focus { +.adf-textitem-editable input.mat-input-element:focus { margin-bottom: -8px; } .adf-invisible-date-input { @@ -1305,7 +1305,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-property { display: table-row; } -.adf-property /deep/ .adf-property-label { +.adf-property .adf-property-label { display: table-cell; min-width: 100px; padding-right: 30px; @@ -1314,7 +1314,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold vertical-align: top; padding-bottom: 20px; } -.adf-property /deep/ .adf-property-value { +.adf-property .adf-property-value { width: 100%; display: table-cell; color: #656565; @@ -2345,38 +2345,38 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric cursor: pointer; } .adf-content-node-selector-dialog .adf-content-node-selector-content-input-icon:hover { color: black; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .mat-input-underline .mat-input-ripple { + .adf-content-node-selector-dialog .adf-content-node-selector-content .mat-input-underline .mat-input-ripple { height: 1px; transition: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element { width: 100%; margin-bottom: 20px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-trigger { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-trigger { font-size: 14px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element.mat-select { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element.mat-select { font-family: 'Muli', "Helvetica", "Arial", sans-serif; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-toolbar .mat-toolbar { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-toolbar .mat-toolbar { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list { height: 200px; overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-highlight { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { color: #33afdfnpm np; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-no-content-container { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { text-align: center; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table thead { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table thead { display: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-data-table-cell { padding-top: 8px; padding-bottom: 8px; border-top: none; height: 30px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr { height: auto !important; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr:last-child .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr:last-child .adf-data-table-cell { border-bottom: none; } .adf-content-node-selector-dialog .adf-content-node-selector-actions { @@ -2499,20 +2499,6 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric object-fit: contain; margin-top: 17px; } -.show { - display: block !important; } - -.hide { - display: none !important; } - -.icon-inline { - position: absolute; - display: block; - top: 31%; - left: 82%; - width: 30px; - overflow: hidden; } - .adf-login-content { display: -webkit-flex; display: -ms-flexbox; @@ -2538,186 +2524,156 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric flex-direction: column; justify-content: center; align-items: center; } - -.adf-login-card-wide { - border-radius: 8px; - background-color: white; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - width: 450px; - min-width: 350px; - padding: 21px 64px 34px 64px; - box-sizing: border-box; } - -@media (max-width: 482px) { - .adf-login-card-wide { - width: calc(100% - 32px); } } - -.error { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: flex-start; - -moz-box-pack: flex-start; - box-pack: flex-start; - justify-content: flex-start; - color: #f44336; - padding: 0px; - margin-bottom: 4px; - font-size: 13px; } - -.error .error-icon { - margin-right: 10px; } - -.adf-img-logo { - display: block; - margin-left: auto; - margin-right: auto; } - -.adf-alfresco-logo { - padding: 24px 16px 24px 16px; } - -.adf-alfresco-logo img { - max-height: 43px; } - -.adf-login-button { - width: 100%; - height: 36px; - line-height: 38px; - box-shadow: none; } - -.adf-login-button-label { - color: white; } - -.adf-login-button.isChecking { - background-color: #e0f7fa; } - -.adf-login-button.isChecking .adf-login-button-label { - color: #00bcd4; } - -.adf-login-button.isWelcome { - background-color: #00bcd4; - color: #ffffff; } - -.adf-login-button.isWelcome .welcome-icon { - margin: 5px 0 0 10px; } - -.adf-interactive-login-label { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - justify-content: center; } - -.adf-login-checking-spinner { - height: 30px !important; - width: 20px !important; - margin-left: 10px; } - -.adf-login-controls { - padding: 0 0 26px 0; - overflow: visible; - width: 100%; } - -.adf-login-action { - margin-top: 20px; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: space-between; - -moz-box-pack: space-between; - box-pack: space-between; - justify-content: space-between; } - -.adf-login-action-left a, .adf-login-action-right a { - text-decoration: none; } - -/* Known issue in angular material design module in betas */ -> > > .rememberme-cb label > div { - margin-right: 8px; } - -.is-active { - background-color: transparent; - font-size: 12px; - font-weight: normal; - line-height: 1.33; - color: #f44336; } - -.copyright { - width: 450px; - text-align: center; - padding-top: 16px; - font-size: 12px; - opacity: 0.54; } - -.mat-input-container .adf-login-password-icon.mat-icon { - font-size: 24px; - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - position: relative; - top: -6px; - height: 20px; - opacity: 0.54; } - -.adf-login__field > > > .mat-input-wrapper { - margin: 1em 0 0 0; - font-size: 16px; } - -.adf-login-validation { - background-color: transparent; - color: #f44336; - font-size: 12px; } - -.adf-login-error { - color: #f44336; - position: absolute; - font-size: 12px; - margin-top: 5px; - display: block; } - -.adf-login-message { - color: blue; } - -.adf-full-width { - width: 100%; } - -.adf-login__remember-me { - padding-top: 22px; } - -.adf-login__remember-me > > > .mat-checkbox-label { - opacity: 0.87; } - -.adf-login__field { - display: block; - margin-left: auto; - margin-right: auto; - padding-bottom: 18px; } - -.adf-login-action-container { - border-top: 1px solid rgba(0, 0, 0, 0.1); - margin-top: 23px; } + .adf-login-content .show { + display: block !important; } + .adf-login-content .hide { + display: none !important; } + .adf-login-content .icon-inline { + position: absolute; + display: block; + top: 31%; + left: 82%; + width: 30px; + overflow: hidden; } + .adf-login-content .adf-login-card-wide { + border-radius: 8px; + background-color: white; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + width: 450px; + min-width: 350px; + padding: 21px 64px 34px 64px; + box-sizing: border-box; } + @media (max-width: 482px) { + .adf-login-content .adf-login-card-wide { + width: calc(100% - 32px); } } + .adf-login-content .adf-error-message { + display: flex; + box-orient: horizontal; + flex-direction: row; + justify-content: flex-start; + color: #f44336; + padding: 0px; + margin-bottom: 4px; + font-size: 13px; } + .adf-login-content .adf-error-message .error-icon { + margin-right: 10px; } + .adf-login-content .adf-img-logo { + display: block; + margin-left: auto; + margin-right: auto; } + .adf-login-content .adf-alfresco-logo { + padding: 24px 16px 24px 16px; } + .adf-login-content .adf-alfresco-logo img { + max-height: 43px; } + .adf-login-content .adf-login-button { + width: 100%; + height: 36px; + line-height: 38px; + box-shadow: none; } + .adf-login-content .adf-login-button-label { + color: white; } + .adf-login-content .adf-login-button.isChecking { + background-color: #e0f7fa; } + .adf-login-content .adf-login-button.isChecking .adf-login-button-label { + color: #00bcd4; } + .adf-login-content .adf-login-button.isWelcome { + background-color: #00bcd4; + color: #ffffff; } + .adf-login-content .adf-login-button.isWelcome .welcome-icon { + margin: 5px 0 0 10px; } + .adf-login-content .adf-interactive-login-label { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; + justify-content: center; } + .adf-login-content .adf-login-checking-spinner { + height: 30px !important; + width: 20px !important; + margin-left: 10px; } + .adf-login-content .adf-login-controls { + padding: 0 0 26px 0; + overflow: visible; + width: 100%; } + .adf-login-content .adf-login-action { + margin-top: 20px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: space-between; + -moz-box-pack: space-between; + box-pack: space-between; + justify-content: space-between; } + .adf-login-content .adf-login-action-left a, .adf-login-content .adf-login-action-right a { + text-decoration: none; } + .adf-login-content .is-active { + background-color: transparent; + font-size: 12px; + font-weight: normal; + line-height: 1.33; + color: #f44336; } + .adf-login-content .copyright { + width: 450px; + text-align: center; + padding-top: 16px; + font-size: 12px; + opacity: 0.54; } + .adf-login-content .mat-input-container .adf-login-password-icon.mat-icon { + font-size: 24px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + position: relative; + top: -6px; + height: 20px; + opacity: 0.54; } + .adf-login-content .adf-login__field .mat-input-wrapper { + margin: 1em 0 0 0; + font-size: 16px; } + .adf-login-content .adf-login__field input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px white inset; } + .adf-login-content .adf-login-validation { + background-color: transparent; + color: #f44336; + font-size: 12px; } + .adf-login-content .adf-login-error { + color: #f44336; + position: absolute; + font-size: 12px; + margin-top: -12px; + display: block; } + .adf-login-content .adf-login-message { + color: blue; } + .adf-login-content .adf-full-width { + width: 100%; } + .adf-login-content .adf-login__remember-me { + padding-top: 22px; } + .adf-login-content .adf-login__remember-me .mat-checkbox-label { + opacity: 0.87; } + .adf-login-content .adf-login__field { + display: block; + margin-left: auto; + margin-right: auto; + padding-bottom: 18px; } + .adf-login-content .adf-login-action-container { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 23px; } adf-file-uploading-list-row:not(:first-child) { display: block; @@ -2830,11 +2786,11 @@ adf-file-uploading-list-row:not(:first-child) { min-width: 40px; height: 40px; } -.adf-userinfo-tab /deep/ .mat-tab-header { +.adf-userinfo-tab .mat-tab-header { align-self: center; width: 100%; } -.adf-userinfo-tab /deep/ .mat-tab-label { +.adf-userinfo-tab .mat-tab-label { flex: auto; font-weight: 500; font-size: 14px; @@ -2926,7 +2882,7 @@ adf-file-uploading-list-row:not(:first-child) { .adf-userinfo-detail { text-align: left; } -.adf-hide-tab /deep/ .mat-tab-label-active { +.adf-hide-tab .mat-tab-label-active { display: none !important; } @media only screen and (min-device-width: 480px) { @@ -2936,5 +2892,87 @@ adf-file-uploading-list-row:not(:first-child) { overflow: auto; padding: 0px; } } -.mat-menu-panel.adf-userinfo-menu /deep/ .mat-menu-content { +.mat-menu-panel.adf-userinfo-menu .mat-menu-content { padding: 0px; } + +.adf-search-button.mat-button { + border-radius: 50%; + height: 32px; + min-width: 20px; + width: 32px; + padding: 0; + overflow: hidden; + color: inherit; + line-height: normal; + border: none; } + +.adf-search-container { + display: flex; + align-items: center; } + .adf-search-container .search-field { + width: 260px; + padding-top: 6px; } + .adf-search-container .search-field .mat-input-container { + width: 100%; } + .adf-search-container .search-field .mat-input-underline .mat-input-ripple { + background-color: white; } + .adf-search-container .search-field .mat-input-element { + font-size: 16px; } + .adf-search-container .search-field .mat-input-infix { + padding: 0px; } + @media only screen and (max-width: 400px) { + .adf-search-container .search-field { + width: 200px; } } + @media only screen and (max-width: 320px) { + .adf-search-container .search-field { + width: 160px; } } + +.adf-search-form { + overflow: hidden; } + +.adf-active-search, .adf-valid-search { + display: block; } + +.adf-search-result { + position: absolute; + z-index: 5; + display: none; + color: rgba(0, 0, 0, 0.87); + background-color: white; + margin: -21px 0px 0px 0px; + border: 1px solid #2196f3; + border-collapse: collapse; + white-space: nowrap; + font-size: 14px; } + .adf-search-result a { + color: rgba(0, 0, 0, 0.87); + text-decoration: none; } + .adf-search-result table { + width: 300px; } + .adf-search-result tbody tr { + height: 32px; } + .adf-search-result tbody tr:hover { + background-color: rgba(0, 0, 0, 0.04); } + .adf-search-result td { + height: 32px; + padding: 8px; + text-align: left; + border-top: none; + border-bottom: none; } + .adf-search-result .highlight { + color: #0d47a1; } + .adf-search-result .img-td { + width: 30px; } + .adf-search-result .truncate { + width: 240px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + @media screen and (max-width: 400px) { + .adf-search-result :host { + right: 0; } + .adf-search-result .truncate { + width: 200px; } } + +.adf-valid-search .adf-search-result { + display: block; } 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 fd00844c58..e3d401630a 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 @@ -1243,38 +1243,38 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-textitem-editable textarea:focus { border: 1px solid #EEE; } -.adf-textitem-editable /deep/ .mat-input-wrapper { +.adf-textitem-editable .mat-input-wrapper { margin: 0; padding-bottom: 0; } -.adf-textitem-editable /deep/ .mat-input-underline { +.adf-textitem-editable .mat-input-underline { display: none; } -.adf-textitem-editable /deep/ .mat-input-infix { +.adf-textitem-editable .mat-input-infix { padding: 0; border-top: none; } -.adf-textitem-editable /deep/ .mat-input-placeholder-wrapper { +.adf-textitem-editable .mat-input-placeholder-wrapper { padding-top: 2em; position: static; } -.adf-textitem-editable /deep/ .mat-input-placeholder { +.adf-textitem-editable .mat-input-placeholder { top: 0; } -.adf-textitem-editable /deep/ .mat-input-element { +.adf-textitem-editable .mat-input-element { font-family: inherit; position: relative; padding-top: 3px; } -.adf-textitem-editable /deep/ .mat-input-element:focus { +.adf-textitem-editable .mat-input-element:focus { padding: 5px; left: -6px; top: -6px; } -.adf-textitem-editable /deep/ input.mat-input-element { +.adf-textitem-editable input.mat-input-element { margin-bottom: 2px; } -.adf-textitem-editable /deep/ input.mat-input-element:focus { +.adf-textitem-editable input.mat-input-element:focus { margin-bottom: -8px; } .adf-invisible-date-input { @@ -1305,7 +1305,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-property { display: table-row; } -.adf-property /deep/ .adf-property-label { +.adf-property .adf-property-label { display: table-cell; min-width: 100px; padding-right: 30px; @@ -1314,7 +1314,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold vertical-align: top; padding-bottom: 20px; } -.adf-property /deep/ .adf-property-value { +.adf-property .adf-property-value { width: 100%; display: table-cell; color: #656565; @@ -2345,38 +2345,38 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric cursor: pointer; } .adf-content-node-selector-dialog .adf-content-node-selector-content-input-icon:hover { color: black; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .mat-input-underline .mat-input-ripple { + .adf-content-node-selector-dialog .adf-content-node-selector-content .mat-input-underline .mat-input-ripple { height: 1px; transition: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element { width: 100%; margin-bottom: 20px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-trigger { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-trigger { font-size: 14px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element.mat-select { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element.mat-select { font-family: 'Muli', "Helvetica", "Arial", sans-serif; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-toolbar .mat-toolbar { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-toolbar .mat-toolbar { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list { height: 200px; overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-highlight { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { color: #33afdfnpm np; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-no-content-container { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { text-align: center; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table thead { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table thead { display: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-data-table-cell { padding-top: 8px; padding-bottom: 8px; border-top: none; height: 30px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr { height: auto !important; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr:last-child .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr:last-child .adf-data-table-cell { border-bottom: none; } .adf-content-node-selector-dialog .adf-content-node-selector-actions { @@ -2499,20 +2499,6 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric object-fit: contain; margin-top: 17px; } -.show { - display: block !important; } - -.hide { - display: none !important; } - -.icon-inline { - position: absolute; - display: block; - top: 31%; - left: 82%; - width: 30px; - overflow: hidden; } - .adf-login-content { display: -webkit-flex; display: -ms-flexbox; @@ -2538,186 +2524,156 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric flex-direction: column; justify-content: center; align-items: center; } - -.adf-login-card-wide { - border-radius: 8px; - background-color: white; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - width: 450px; - min-width: 350px; - padding: 21px 64px 34px 64px; - box-sizing: border-box; } - -@media (max-width: 482px) { - .adf-login-card-wide { - width: calc(100% - 32px); } } - -.error { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: flex-start; - -moz-box-pack: flex-start; - box-pack: flex-start; - justify-content: flex-start; - color: #f44336; - padding: 0px; - margin-bottom: 4px; - font-size: 13px; } - -.error .error-icon { - margin-right: 10px; } - -.adf-img-logo { - display: block; - margin-left: auto; - margin-right: auto; } - -.adf-alfresco-logo { - padding: 24px 16px 24px 16px; } - -.adf-alfresco-logo img { - max-height: 43px; } - -.adf-login-button { - width: 100%; - height: 36px; - line-height: 38px; - box-shadow: none; } - -.adf-login-button-label { - color: white; } - -.adf-login-button.isChecking { - background-color: #e0f7fa; } - -.adf-login-button.isChecking .adf-login-button-label { - color: #00bcd4; } - -.adf-login-button.isWelcome { - background-color: #00bcd4; - color: #ffffff; } - -.adf-login-button.isWelcome .welcome-icon { - margin: 5px 0 0 10px; } - -.adf-interactive-login-label { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - justify-content: center; } - -.adf-login-checking-spinner { - height: 30px !important; - width: 20px !important; - margin-left: 10px; } - -.adf-login-controls { - padding: 0 0 26px 0; - overflow: visible; - width: 100%; } - -.adf-login-action { - margin-top: 20px; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: space-between; - -moz-box-pack: space-between; - box-pack: space-between; - justify-content: space-between; } - -.adf-login-action-left a, .adf-login-action-right a { - text-decoration: none; } - -/* Known issue in angular material design module in betas */ -> > > .rememberme-cb label > div { - margin-right: 8px; } - -.is-active { - background-color: transparent; - font-size: 12px; - font-weight: normal; - line-height: 1.33; - color: #f44336; } - -.copyright { - width: 450px; - text-align: center; - padding-top: 16px; - font-size: 12px; - opacity: 0.54; } - -.mat-input-container .adf-login-password-icon.mat-icon { - font-size: 24px; - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - position: relative; - top: -6px; - height: 20px; - opacity: 0.54; } - -.adf-login__field > > > .mat-input-wrapper { - margin: 1em 0 0 0; - font-size: 16px; } - -.adf-login-validation { - background-color: transparent; - color: #f44336; - font-size: 12px; } - -.adf-login-error { - color: #f44336; - position: absolute; - font-size: 12px; - margin-top: 5px; - display: block; } - -.adf-login-message { - color: blue; } - -.adf-full-width { - width: 100%; } - -.adf-login__remember-me { - padding-top: 22px; } - -.adf-login__remember-me > > > .mat-checkbox-label { - opacity: 0.87; } - -.adf-login__field { - display: block; - margin-left: auto; - margin-right: auto; - padding-bottom: 18px; } - -.adf-login-action-container { - border-top: 1px solid rgba(0, 0, 0, 0.1); - margin-top: 23px; } + .adf-login-content .show { + display: block !important; } + .adf-login-content .hide { + display: none !important; } + .adf-login-content .icon-inline { + position: absolute; + display: block; + top: 31%; + left: 82%; + width: 30px; + overflow: hidden; } + .adf-login-content .adf-login-card-wide { + border-radius: 8px; + background-color: white; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + width: 450px; + min-width: 350px; + padding: 21px 64px 34px 64px; + box-sizing: border-box; } + @media (max-width: 482px) { + .adf-login-content .adf-login-card-wide { + width: calc(100% - 32px); } } + .adf-login-content .adf-error-message { + display: flex; + box-orient: horizontal; + flex-direction: row; + justify-content: flex-start; + color: #f44336; + padding: 0px; + margin-bottom: 4px; + font-size: 13px; } + .adf-login-content .adf-error-message .error-icon { + margin-right: 10px; } + .adf-login-content .adf-img-logo { + display: block; + margin-left: auto; + margin-right: auto; } + .adf-login-content .adf-alfresco-logo { + padding: 24px 16px 24px 16px; } + .adf-login-content .adf-alfresco-logo img { + max-height: 43px; } + .adf-login-content .adf-login-button { + width: 100%; + height: 36px; + line-height: 38px; + box-shadow: none; } + .adf-login-content .adf-login-button-label { + color: white; } + .adf-login-content .adf-login-button.isChecking { + background-color: #e0f7fa; } + .adf-login-content .adf-login-button.isChecking .adf-login-button-label { + color: #00bcd4; } + .adf-login-content .adf-login-button.isWelcome { + background-color: #00bcd4; + color: #ffffff; } + .adf-login-content .adf-login-button.isWelcome .welcome-icon { + margin: 5px 0 0 10px; } + .adf-login-content .adf-interactive-login-label { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; + justify-content: center; } + .adf-login-content .adf-login-checking-spinner { + height: 30px !important; + width: 20px !important; + margin-left: 10px; } + .adf-login-content .adf-login-controls { + padding: 0 0 26px 0; + overflow: visible; + width: 100%; } + .adf-login-content .adf-login-action { + margin-top: 20px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: space-between; + -moz-box-pack: space-between; + box-pack: space-between; + justify-content: space-between; } + .adf-login-content .adf-login-action-left a, .adf-login-content .adf-login-action-right a { + text-decoration: none; } + .adf-login-content .is-active { + background-color: transparent; + font-size: 12px; + font-weight: normal; + line-height: 1.33; + color: #f44336; } + .adf-login-content .copyright { + width: 450px; + text-align: center; + padding-top: 16px; + font-size: 12px; + opacity: 0.54; } + .adf-login-content .mat-input-container .adf-login-password-icon.mat-icon { + font-size: 24px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + position: relative; + top: -6px; + height: 20px; + opacity: 0.54; } + .adf-login-content .adf-login__field .mat-input-wrapper { + margin: 1em 0 0 0; + font-size: 16px; } + .adf-login-content .adf-login__field input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px white inset; } + .adf-login-content .adf-login-validation { + background-color: transparent; + color: #f44336; + font-size: 12px; } + .adf-login-content .adf-login-error { + color: #f44336; + position: absolute; + font-size: 12px; + margin-top: -12px; + display: block; } + .adf-login-content .adf-login-message { + color: blue; } + .adf-login-content .adf-full-width { + width: 100%; } + .adf-login-content .adf-login__remember-me { + padding-top: 22px; } + .adf-login-content .adf-login__remember-me .mat-checkbox-label { + opacity: 0.87; } + .adf-login-content .adf-login__field { + display: block; + margin-left: auto; + margin-right: auto; + padding-bottom: 18px; } + .adf-login-content .adf-login-action-container { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 23px; } adf-file-uploading-list-row:not(:first-child) { display: block; @@ -2830,11 +2786,11 @@ adf-file-uploading-list-row:not(:first-child) { min-width: 40px; height: 40px; } -.adf-userinfo-tab /deep/ .mat-tab-header { +.adf-userinfo-tab .mat-tab-header { align-self: center; width: 100%; } -.adf-userinfo-tab /deep/ .mat-tab-label { +.adf-userinfo-tab .mat-tab-label { flex: auto; font-weight: 500; font-size: 14px; @@ -2926,7 +2882,7 @@ adf-file-uploading-list-row:not(:first-child) { .adf-userinfo-detail { text-align: left; } -.adf-hide-tab /deep/ .mat-tab-label-active { +.adf-hide-tab .mat-tab-label-active { display: none !important; } @media only screen and (min-device-width: 480px) { @@ -2936,5 +2892,87 @@ adf-file-uploading-list-row:not(:first-child) { overflow: auto; padding: 0px; } } -.mat-menu-panel.adf-userinfo-menu /deep/ .mat-menu-content { +.mat-menu-panel.adf-userinfo-menu .mat-menu-content { padding: 0px; } + +.adf-search-button.mat-button { + border-radius: 50%; + height: 32px; + min-width: 20px; + width: 32px; + padding: 0; + overflow: hidden; + color: inherit; + line-height: normal; + border: none; } + +.adf-search-container { + display: flex; + align-items: center; } + .adf-search-container .search-field { + width: 260px; + padding-top: 6px; } + .adf-search-container .search-field .mat-input-container { + width: 100%; } + .adf-search-container .search-field .mat-input-underline .mat-input-ripple { + background-color: white; } + .adf-search-container .search-field .mat-input-element { + font-size: 16px; } + .adf-search-container .search-field .mat-input-infix { + padding: 0px; } + @media only screen and (max-width: 400px) { + .adf-search-container .search-field { + width: 200px; } } + @media only screen and (max-width: 320px) { + .adf-search-container .search-field { + width: 160px; } } + +.adf-search-form { + overflow: hidden; } + +.adf-active-search, .adf-valid-search { + display: block; } + +.adf-search-result { + position: absolute; + z-index: 5; + display: none; + color: rgba(0, 0, 0, 0.87); + background-color: white; + margin: -21px 0px 0px 0px; + border: 1px solid #00bcd4; + border-collapse: collapse; + white-space: nowrap; + font-size: 14px; } + .adf-search-result a { + color: rgba(0, 0, 0, 0.87); + text-decoration: none; } + .adf-search-result table { + width: 300px; } + .adf-search-result tbody tr { + height: 32px; } + .adf-search-result tbody tr:hover { + background-color: rgba(0, 0, 0, 0.04); } + .adf-search-result td { + height: 32px; + padding: 8px; + text-align: left; + border-top: none; + border-bottom: none; } + .adf-search-result .highlight { + color: #006064; } + .adf-search-result .img-td { + width: 30px; } + .adf-search-result .truncate { + width: 240px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + @media screen and (max-width: 400px) { + .adf-search-result :host { + right: 0; } + .adf-search-result .truncate { + width: 200px; } } + +.adf-valid-search .adf-search-result { + display: block; } 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 6ed14ce43c..bfb835c126 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 @@ -1243,38 +1243,38 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-textitem-editable textarea:focus { border: 1px solid #EEE; } -.adf-textitem-editable /deep/ .mat-input-wrapper { +.adf-textitem-editable .mat-input-wrapper { margin: 0; padding-bottom: 0; } -.adf-textitem-editable /deep/ .mat-input-underline { +.adf-textitem-editable .mat-input-underline { display: none; } -.adf-textitem-editable /deep/ .mat-input-infix { +.adf-textitem-editable .mat-input-infix { padding: 0; border-top: none; } -.adf-textitem-editable /deep/ .mat-input-placeholder-wrapper { +.adf-textitem-editable .mat-input-placeholder-wrapper { padding-top: 2em; position: static; } -.adf-textitem-editable /deep/ .mat-input-placeholder { +.adf-textitem-editable .mat-input-placeholder { top: 0; } -.adf-textitem-editable /deep/ .mat-input-element { +.adf-textitem-editable .mat-input-element { font-family: inherit; position: relative; padding-top: 3px; } -.adf-textitem-editable /deep/ .mat-input-element:focus { +.adf-textitem-editable .mat-input-element:focus { padding: 5px; left: -6px; top: -6px; } -.adf-textitem-editable /deep/ input.mat-input-element { +.adf-textitem-editable input.mat-input-element { margin-bottom: 2px; } -.adf-textitem-editable /deep/ input.mat-input-element:focus { +.adf-textitem-editable input.mat-input-element:focus { margin-bottom: -8px; } .adf-invisible-date-input { @@ -1305,7 +1305,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-property { display: table-row; } -.adf-property /deep/ .adf-property-label { +.adf-property .adf-property-label { display: table-cell; min-width: 100px; padding-right: 30px; @@ -1314,7 +1314,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold vertical-align: top; padding-bottom: 20px; } -.adf-property /deep/ .adf-property-value { +.adf-property .adf-property-value { width: 100%; display: table-cell; color: #656565; @@ -2345,38 +2345,38 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric cursor: pointer; } .adf-content-node-selector-dialog .adf-content-node-selector-content-input-icon:hover { color: black; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .mat-input-underline .mat-input-ripple { + .adf-content-node-selector-dialog .adf-content-node-selector-content .mat-input-underline .mat-input-ripple { height: 1px; transition: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element { width: 100%; margin-bottom: 20px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-trigger { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-trigger { font-size: 14px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element.mat-select { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element.mat-select { font-family: 'Muli', "Helvetica", "Arial", sans-serif; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-toolbar .mat-toolbar { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-toolbar .mat-toolbar { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list { height: 200px; overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-highlight { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { color: #33afdfnpm np; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-no-content-container { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { text-align: center; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table thead { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table thead { display: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-data-table-cell { padding-top: 8px; padding-bottom: 8px; border-top: none; height: 30px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr { height: auto !important; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr:last-child .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr:last-child .adf-data-table-cell { border-bottom: none; } .adf-content-node-selector-dialog .adf-content-node-selector-actions { @@ -2499,20 +2499,6 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric object-fit: contain; margin-top: 17px; } -.show { - display: block !important; } - -.hide { - display: none !important; } - -.icon-inline { - position: absolute; - display: block; - top: 31%; - left: 82%; - width: 30px; - overflow: hidden; } - .adf-login-content { display: -webkit-flex; display: -ms-flexbox; @@ -2538,186 +2524,156 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric flex-direction: column; justify-content: center; align-items: center; } - -.adf-login-card-wide { - border-radius: 8px; - background-color: white; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - width: 450px; - min-width: 350px; - padding: 21px 64px 34px 64px; - box-sizing: border-box; } - -@media (max-width: 482px) { - .adf-login-card-wide { - width: calc(100% - 32px); } } - -.error { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: flex-start; - -moz-box-pack: flex-start; - box-pack: flex-start; - justify-content: flex-start; - color: #f44336; - padding: 0px; - margin-bottom: 4px; - font-size: 13px; } - -.error .error-icon { - margin-right: 10px; } - -.adf-img-logo { - display: block; - margin-left: auto; - margin-right: auto; } - -.adf-alfresco-logo { - padding: 24px 16px 24px 16px; } - -.adf-alfresco-logo img { - max-height: 43px; } - -.adf-login-button { - width: 100%; - height: 36px; - line-height: 38px; - box-shadow: none; } - -.adf-login-button-label { - color: white; } - -.adf-login-button.isChecking { - background-color: #e0f7fa; } - -.adf-login-button.isChecking .adf-login-button-label { - color: #00bcd4; } - -.adf-login-button.isWelcome { - background-color: #00bcd4; - color: #ffffff; } - -.adf-login-button.isWelcome .welcome-icon { - margin: 5px 0 0 10px; } - -.adf-interactive-login-label { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - justify-content: center; } - -.adf-login-checking-spinner { - height: 30px !important; - width: 20px !important; - margin-left: 10px; } - -.adf-login-controls { - padding: 0 0 26px 0; - overflow: visible; - width: 100%; } - -.adf-login-action { - margin-top: 20px; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: space-between; - -moz-box-pack: space-between; - box-pack: space-between; - justify-content: space-between; } - -.adf-login-action-left a, .adf-login-action-right a { - text-decoration: none; } - -/* Known issue in angular material design module in betas */ -> > > .rememberme-cb label > div { - margin-right: 8px; } - -.is-active { - background-color: transparent; - font-size: 12px; - font-weight: normal; - line-height: 1.33; - color: #f44336; } - -.copyright { - width: 450px; - text-align: center; - padding-top: 16px; - font-size: 12px; - opacity: 0.54; } - -.mat-input-container .adf-login-password-icon.mat-icon { - font-size: 24px; - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - position: relative; - top: -6px; - height: 20px; - opacity: 0.54; } - -.adf-login__field > > > .mat-input-wrapper { - margin: 1em 0 0 0; - font-size: 16px; } - -.adf-login-validation { - background-color: transparent; - color: #f44336; - font-size: 12px; } - -.adf-login-error { - color: #f44336; - position: absolute; - font-size: 12px; - margin-top: 5px; - display: block; } - -.adf-login-message { - color: blue; } - -.adf-full-width { - width: 100%; } - -.adf-login__remember-me { - padding-top: 22px; } - -.adf-login__remember-me > > > .mat-checkbox-label { - opacity: 0.87; } - -.adf-login__field { - display: block; - margin-left: auto; - margin-right: auto; - padding-bottom: 18px; } - -.adf-login-action-container { - border-top: 1px solid rgba(0, 0, 0, 0.1); - margin-top: 23px; } + .adf-login-content .show { + display: block !important; } + .adf-login-content .hide { + display: none !important; } + .adf-login-content .icon-inline { + position: absolute; + display: block; + top: 31%; + left: 82%; + width: 30px; + overflow: hidden; } + .adf-login-content .adf-login-card-wide { + border-radius: 8px; + background-color: white; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + width: 450px; + min-width: 350px; + padding: 21px 64px 34px 64px; + box-sizing: border-box; } + @media (max-width: 482px) { + .adf-login-content .adf-login-card-wide { + width: calc(100% - 32px); } } + .adf-login-content .adf-error-message { + display: flex; + box-orient: horizontal; + flex-direction: row; + justify-content: flex-start; + color: #f44336; + padding: 0px; + margin-bottom: 4px; + font-size: 13px; } + .adf-login-content .adf-error-message .error-icon { + margin-right: 10px; } + .adf-login-content .adf-img-logo { + display: block; + margin-left: auto; + margin-right: auto; } + .adf-login-content .adf-alfresco-logo { + padding: 24px 16px 24px 16px; } + .adf-login-content .adf-alfresco-logo img { + max-height: 43px; } + .adf-login-content .adf-login-button { + width: 100%; + height: 36px; + line-height: 38px; + box-shadow: none; } + .adf-login-content .adf-login-button-label { + color: white; } + .adf-login-content .adf-login-button.isChecking { + background-color: #e0f7fa; } + .adf-login-content .adf-login-button.isChecking .adf-login-button-label { + color: #00bcd4; } + .adf-login-content .adf-login-button.isWelcome { + background-color: #00bcd4; + color: #ffffff; } + .adf-login-content .adf-login-button.isWelcome .welcome-icon { + margin: 5px 0 0 10px; } + .adf-login-content .adf-interactive-login-label { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; + justify-content: center; } + .adf-login-content .adf-login-checking-spinner { + height: 30px !important; + width: 20px !important; + margin-left: 10px; } + .adf-login-content .adf-login-controls { + padding: 0 0 26px 0; + overflow: visible; + width: 100%; } + .adf-login-content .adf-login-action { + margin-top: 20px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: space-between; + -moz-box-pack: space-between; + box-pack: space-between; + justify-content: space-between; } + .adf-login-content .adf-login-action-left a, .adf-login-content .adf-login-action-right a { + text-decoration: none; } + .adf-login-content .is-active { + background-color: transparent; + font-size: 12px; + font-weight: normal; + line-height: 1.33; + color: #f44336; } + .adf-login-content .copyright { + width: 450px; + text-align: center; + padding-top: 16px; + font-size: 12px; + opacity: 0.54; } + .adf-login-content .mat-input-container .adf-login-password-icon.mat-icon { + font-size: 24px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + position: relative; + top: -6px; + height: 20px; + opacity: 0.54; } + .adf-login-content .adf-login__field .mat-input-wrapper { + margin: 1em 0 0 0; + font-size: 16px; } + .adf-login-content .adf-login__field input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px white inset; } + .adf-login-content .adf-login-validation { + background-color: transparent; + color: #f44336; + font-size: 12px; } + .adf-login-content .adf-login-error { + color: #f44336; + position: absolute; + font-size: 12px; + margin-top: -12px; + display: block; } + .adf-login-content .adf-login-message { + color: blue; } + .adf-login-content .adf-full-width { + width: 100%; } + .adf-login-content .adf-login__remember-me { + padding-top: 22px; } + .adf-login-content .adf-login__remember-me .mat-checkbox-label { + opacity: 0.87; } + .adf-login-content .adf-login__field { + display: block; + margin-left: auto; + margin-right: auto; + padding-bottom: 18px; } + .adf-login-content .adf-login-action-container { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 23px; } adf-file-uploading-list-row:not(:first-child) { display: block; @@ -2830,11 +2786,11 @@ adf-file-uploading-list-row:not(:first-child) { min-width: 40px; height: 40px; } -.adf-userinfo-tab /deep/ .mat-tab-header { +.adf-userinfo-tab .mat-tab-header { align-self: center; width: 100%; } -.adf-userinfo-tab /deep/ .mat-tab-label { +.adf-userinfo-tab .mat-tab-label { flex: auto; font-weight: 500; font-size: 14px; @@ -2926,7 +2882,7 @@ adf-file-uploading-list-row:not(:first-child) { .adf-userinfo-detail { text-align: left; } -.adf-hide-tab /deep/ .mat-tab-label-active { +.adf-hide-tab .mat-tab-label-active { display: none !important; } @media only screen and (min-device-width: 480px) { @@ -2936,5 +2892,87 @@ adf-file-uploading-list-row:not(:first-child) { overflow: auto; padding: 0px; } } -.mat-menu-panel.adf-userinfo-menu /deep/ .mat-menu-content { +.mat-menu-panel.adf-userinfo-menu .mat-menu-content { padding: 0px; } + +.adf-search-button.mat-button { + border-radius: 50%; + height: 32px; + min-width: 20px; + width: 32px; + padding: 0; + overflow: hidden; + color: inherit; + line-height: normal; + border: none; } + +.adf-search-container { + display: flex; + align-items: center; } + .adf-search-container .search-field { + width: 260px; + padding-top: 6px; } + .adf-search-container .search-field .mat-input-container { + width: 100%; } + .adf-search-container .search-field .mat-input-underline .mat-input-ripple { + background-color: white; } + .adf-search-container .search-field .mat-input-element { + font-size: 16px; } + .adf-search-container .search-field .mat-input-infix { + padding: 0px; } + @media only screen and (max-width: 400px) { + .adf-search-container .search-field { + width: 200px; } } + @media only screen and (max-width: 320px) { + .adf-search-container .search-field { + width: 160px; } } + +.adf-search-form { + overflow: hidden; } + +.adf-active-search, .adf-valid-search { + display: block; } + +.adf-search-result { + position: absolute; + z-index: 5; + display: none; + color: rgba(0, 0, 0, 0.87); + background-color: white; + margin: -21px 0px 0px 0px; + border: 1px solid #00bcd4; + border-collapse: collapse; + white-space: nowrap; + font-size: 14px; } + .adf-search-result a { + color: rgba(0, 0, 0, 0.87); + text-decoration: none; } + .adf-search-result table { + width: 300px; } + .adf-search-result tbody tr { + height: 32px; } + .adf-search-result tbody tr:hover { + background-color: rgba(0, 0, 0, 0.04); } + .adf-search-result td { + height: 32px; + padding: 8px; + text-align: left; + border-top: none; + border-bottom: none; } + .adf-search-result .highlight { + color: #006064; } + .adf-search-result .img-td { + width: 30px; } + .adf-search-result .truncate { + width: 240px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + @media screen and (max-width: 400px) { + .adf-search-result :host { + right: 0; } + .adf-search-result .truncate { + width: 200px; } } + +.adf-valid-search .adf-search-result { + display: block; } 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 939c69518d..c3045f812f 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 @@ -1243,38 +1243,38 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-textitem-editable textarea:focus { border: 1px solid #EEE; } -.adf-textitem-editable /deep/ .mat-input-wrapper { +.adf-textitem-editable .mat-input-wrapper { margin: 0; padding-bottom: 0; } -.adf-textitem-editable /deep/ .mat-input-underline { +.adf-textitem-editable .mat-input-underline { display: none; } -.adf-textitem-editable /deep/ .mat-input-infix { +.adf-textitem-editable .mat-input-infix { padding: 0; border-top: none; } -.adf-textitem-editable /deep/ .mat-input-placeholder-wrapper { +.adf-textitem-editable .mat-input-placeholder-wrapper { padding-top: 2em; position: static; } -.adf-textitem-editable /deep/ .mat-input-placeholder { +.adf-textitem-editable .mat-input-placeholder { top: 0; } -.adf-textitem-editable /deep/ .mat-input-element { +.adf-textitem-editable .mat-input-element { font-family: inherit; position: relative; padding-top: 3px; } -.adf-textitem-editable /deep/ .mat-input-element:focus { +.adf-textitem-editable .mat-input-element:focus { padding: 5px; left: -6px; top: -6px; } -.adf-textitem-editable /deep/ input.mat-input-element { +.adf-textitem-editable input.mat-input-element { margin-bottom: 2px; } -.adf-textitem-editable /deep/ input.mat-input-element:focus { +.adf-textitem-editable input.mat-input-element:focus { margin-bottom: -8px; } .adf-invisible-date-input { @@ -1305,7 +1305,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-property { display: table-row; } -.adf-property /deep/ .adf-property-label { +.adf-property .adf-property-label { display: table-cell; min-width: 100px; padding-right: 30px; @@ -1314,7 +1314,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold vertical-align: top; padding-bottom: 20px; } -.adf-property /deep/ .adf-property-value { +.adf-property .adf-property-value { width: 100%; display: table-cell; color: #656565; @@ -2345,38 +2345,38 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric cursor: pointer; } .adf-content-node-selector-dialog .adf-content-node-selector-content-input-icon:hover { color: black; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .mat-input-underline .mat-input-ripple { + .adf-content-node-selector-dialog .adf-content-node-selector-content .mat-input-underline .mat-input-ripple { height: 1px; transition: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element { width: 100%; margin-bottom: 20px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-trigger { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-trigger { font-size: 14px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element.mat-select { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element.mat-select { font-family: 'Muli', "Helvetica", "Arial", sans-serif; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-toolbar .mat-toolbar { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-toolbar .mat-toolbar { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list { height: 200px; overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-highlight { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { color: #33afdfnpm np; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-no-content-container { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { text-align: center; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table thead { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table thead { display: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-data-table-cell { padding-top: 8px; padding-bottom: 8px; border-top: none; height: 30px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr { height: auto !important; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr:last-child .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr:last-child .adf-data-table-cell { border-bottom: none; } .adf-content-node-selector-dialog .adf-content-node-selector-actions { @@ -2499,20 +2499,6 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric object-fit: contain; margin-top: 17px; } -.show { - display: block !important; } - -.hide { - display: none !important; } - -.icon-inline { - position: absolute; - display: block; - top: 31%; - left: 82%; - width: 30px; - overflow: hidden; } - .adf-login-content { display: -webkit-flex; display: -ms-flexbox; @@ -2538,186 +2524,156 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric flex-direction: column; justify-content: center; align-items: center; } - -.adf-login-card-wide { - border-radius: 8px; - background-color: white; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - width: 450px; - min-width: 350px; - padding: 21px 64px 34px 64px; - box-sizing: border-box; } - -@media (max-width: 482px) { - .adf-login-card-wide { - width: calc(100% - 32px); } } - -.error { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: flex-start; - -moz-box-pack: flex-start; - box-pack: flex-start; - justify-content: flex-start; - color: #f44336; - padding: 0px; - margin-bottom: 4px; - font-size: 13px; } - -.error .error-icon { - margin-right: 10px; } - -.adf-img-logo { - display: block; - margin-left: auto; - margin-right: auto; } - -.adf-alfresco-logo { - padding: 24px 16px 24px 16px; } - -.adf-alfresco-logo img { - max-height: 43px; } - -.adf-login-button { - width: 100%; - height: 36px; - line-height: 38px; - box-shadow: none; } - -.adf-login-button-label { - color: white; } - -.adf-login-button.isChecking { - background-color: #e0f7fa; } - -.adf-login-button.isChecking .adf-login-button-label { - color: #00bcd4; } - -.adf-login-button.isWelcome { - background-color: #00bcd4; - color: #ffffff; } - -.adf-login-button.isWelcome .welcome-icon { - margin: 5px 0 0 10px; } - -.adf-interactive-login-label { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - justify-content: center; } - -.adf-login-checking-spinner { - height: 30px !important; - width: 20px !important; - margin-left: 10px; } - -.adf-login-controls { - padding: 0 0 26px 0; - overflow: visible; - width: 100%; } - -.adf-login-action { - margin-top: 20px; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: space-between; - -moz-box-pack: space-between; - box-pack: space-between; - justify-content: space-between; } - -.adf-login-action-left a, .adf-login-action-right a { - text-decoration: none; } - -/* Known issue in angular material design module in betas */ -> > > .rememberme-cb label > div { - margin-right: 8px; } - -.is-active { - background-color: transparent; - font-size: 12px; - font-weight: normal; - line-height: 1.33; - color: #f44336; } - -.copyright { - width: 450px; - text-align: center; - padding-top: 16px; - font-size: 12px; - opacity: 0.54; } - -.mat-input-container .adf-login-password-icon.mat-icon { - font-size: 24px; - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - position: relative; - top: -6px; - height: 20px; - opacity: 0.54; } - -.adf-login__field > > > .mat-input-wrapper { - margin: 1em 0 0 0; - font-size: 16px; } - -.adf-login-validation { - background-color: transparent; - color: #f44336; - font-size: 12px; } - -.adf-login-error { - color: #f44336; - position: absolute; - font-size: 12px; - margin-top: 5px; - display: block; } - -.adf-login-message { - color: blue; } - -.adf-full-width { - width: 100%; } - -.adf-login__remember-me { - padding-top: 22px; } - -.adf-login__remember-me > > > .mat-checkbox-label { - opacity: 0.87; } - -.adf-login__field { - display: block; - margin-left: auto; - margin-right: auto; - padding-bottom: 18px; } - -.adf-login-action-container { - border-top: 1px solid rgba(0, 0, 0, 0.1); - margin-top: 23px; } + .adf-login-content .show { + display: block !important; } + .adf-login-content .hide { + display: none !important; } + .adf-login-content .icon-inline { + position: absolute; + display: block; + top: 31%; + left: 82%; + width: 30px; + overflow: hidden; } + .adf-login-content .adf-login-card-wide { + border-radius: 8px; + background-color: white; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + width: 450px; + min-width: 350px; + padding: 21px 64px 34px 64px; + box-sizing: border-box; } + @media (max-width: 482px) { + .adf-login-content .adf-login-card-wide { + width: calc(100% - 32px); } } + .adf-login-content .adf-error-message { + display: flex; + box-orient: horizontal; + flex-direction: row; + justify-content: flex-start; + color: #f44336; + padding: 0px; + margin-bottom: 4px; + font-size: 13px; } + .adf-login-content .adf-error-message .error-icon { + margin-right: 10px; } + .adf-login-content .adf-img-logo { + display: block; + margin-left: auto; + margin-right: auto; } + .adf-login-content .adf-alfresco-logo { + padding: 24px 16px 24px 16px; } + .adf-login-content .adf-alfresco-logo img { + max-height: 43px; } + .adf-login-content .adf-login-button { + width: 100%; + height: 36px; + line-height: 38px; + box-shadow: none; } + .adf-login-content .adf-login-button-label { + color: white; } + .adf-login-content .adf-login-button.isChecking { + background-color: #e0f7fa; } + .adf-login-content .adf-login-button.isChecking .adf-login-button-label { + color: #00bcd4; } + .adf-login-content .adf-login-button.isWelcome { + background-color: #00bcd4; + color: #ffffff; } + .adf-login-content .adf-login-button.isWelcome .welcome-icon { + margin: 5px 0 0 10px; } + .adf-login-content .adf-interactive-login-label { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; + justify-content: center; } + .adf-login-content .adf-login-checking-spinner { + height: 30px !important; + width: 20px !important; + margin-left: 10px; } + .adf-login-content .adf-login-controls { + padding: 0 0 26px 0; + overflow: visible; + width: 100%; } + .adf-login-content .adf-login-action { + margin-top: 20px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: space-between; + -moz-box-pack: space-between; + box-pack: space-between; + justify-content: space-between; } + .adf-login-content .adf-login-action-left a, .adf-login-content .adf-login-action-right a { + text-decoration: none; } + .adf-login-content .is-active { + background-color: transparent; + font-size: 12px; + font-weight: normal; + line-height: 1.33; + color: #f44336; } + .adf-login-content .copyright { + width: 450px; + text-align: center; + padding-top: 16px; + font-size: 12px; + opacity: 0.54; } + .adf-login-content .mat-input-container .adf-login-password-icon.mat-icon { + font-size: 24px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + position: relative; + top: -6px; + height: 20px; + opacity: 0.54; } + .adf-login-content .adf-login__field .mat-input-wrapper { + margin: 1em 0 0 0; + font-size: 16px; } + .adf-login-content .adf-login__field input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px white inset; } + .adf-login-content .adf-login-validation { + background-color: transparent; + color: #f44336; + font-size: 12px; } + .adf-login-content .adf-login-error { + color: #f44336; + position: absolute; + font-size: 12px; + margin-top: -12px; + display: block; } + .adf-login-content .adf-login-message { + color: blue; } + .adf-login-content .adf-full-width { + width: 100%; } + .adf-login-content .adf-login__remember-me { + padding-top: 22px; } + .adf-login-content .adf-login__remember-me .mat-checkbox-label { + opacity: 0.87; } + .adf-login-content .adf-login__field { + display: block; + margin-left: auto; + margin-right: auto; + padding-bottom: 18px; } + .adf-login-content .adf-login-action-container { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 23px; } adf-file-uploading-list-row:not(:first-child) { display: block; @@ -2830,11 +2786,11 @@ adf-file-uploading-list-row:not(:first-child) { min-width: 40px; height: 40px; } -.adf-userinfo-tab /deep/ .mat-tab-header { +.adf-userinfo-tab .mat-tab-header { align-self: center; width: 100%; } -.adf-userinfo-tab /deep/ .mat-tab-label { +.adf-userinfo-tab .mat-tab-label { flex: auto; font-weight: 500; font-size: 14px; @@ -2926,7 +2882,7 @@ adf-file-uploading-list-row:not(:first-child) { .adf-userinfo-detail { text-align: left; } -.adf-hide-tab /deep/ .mat-tab-label-active { +.adf-hide-tab .mat-tab-label-active { display: none !important; } @media only screen and (min-device-width: 480px) { @@ -2936,5 +2892,87 @@ adf-file-uploading-list-row:not(:first-child) { overflow: auto; padding: 0px; } } -.mat-menu-panel.adf-userinfo-menu /deep/ .mat-menu-content { +.mat-menu-panel.adf-userinfo-menu .mat-menu-content { padding: 0px; } + +.adf-search-button.mat-button { + border-radius: 50%; + height: 32px; + min-width: 20px; + width: 32px; + padding: 0; + overflow: hidden; + color: inherit; + line-height: normal; + border: none; } + +.adf-search-container { + display: flex; + align-items: center; } + .adf-search-container .search-field { + width: 260px; + padding-top: 6px; } + .adf-search-container .search-field .mat-input-container { + width: 100%; } + .adf-search-container .search-field .mat-input-underline .mat-input-ripple { + background-color: white; } + .adf-search-container .search-field .mat-input-element { + font-size: 16px; } + .adf-search-container .search-field .mat-input-infix { + padding: 0px; } + @media only screen and (max-width: 400px) { + .adf-search-container .search-field { + width: 200px; } } + @media only screen and (max-width: 320px) { + .adf-search-container .search-field { + width: 160px; } } + +.adf-search-form { + overflow: hidden; } + +.adf-active-search, .adf-valid-search { + display: block; } + +.adf-search-result { + position: absolute; + z-index: 5; + display: none; + color: rgba(0, 0, 0, 0.87); + background-color: white; + margin: -21px 0px 0px 0px; + border: 1px solid #8bc34a; + border-collapse: collapse; + white-space: nowrap; + font-size: 14px; } + .adf-search-result a { + color: rgba(0, 0, 0, 0.87); + text-decoration: none; } + .adf-search-result table { + width: 300px; } + .adf-search-result tbody tr { + height: 32px; } + .adf-search-result tbody tr:hover { + background-color: rgba(0, 0, 0, 0.04); } + .adf-search-result td { + height: 32px; + padding: 8px; + text-align: left; + border-top: none; + border-bottom: none; } + .adf-search-result .highlight { + color: #33691e; } + .adf-search-result .img-td { + width: 30px; } + .adf-search-result .truncate { + width: 240px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + @media screen and (max-width: 400px) { + .adf-search-result :host { + right: 0; } + .adf-search-result .truncate { + width: 200px; } } + +.adf-valid-search .adf-search-result { + display: block; } 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 19da53294d..b739193b55 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 @@ -1243,38 +1243,38 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-textitem-editable textarea:focus { border: 1px solid #EEE; } -.adf-textitem-editable /deep/ .mat-input-wrapper { +.adf-textitem-editable .mat-input-wrapper { margin: 0; padding-bottom: 0; } -.adf-textitem-editable /deep/ .mat-input-underline { +.adf-textitem-editable .mat-input-underline { display: none; } -.adf-textitem-editable /deep/ .mat-input-infix { +.adf-textitem-editable .mat-input-infix { padding: 0; border-top: none; } -.adf-textitem-editable /deep/ .mat-input-placeholder-wrapper { +.adf-textitem-editable .mat-input-placeholder-wrapper { padding-top: 2em; position: static; } -.adf-textitem-editable /deep/ .mat-input-placeholder { +.adf-textitem-editable .mat-input-placeholder { top: 0; } -.adf-textitem-editable /deep/ .mat-input-element { +.adf-textitem-editable .mat-input-element { font-family: inherit; position: relative; padding-top: 3px; } -.adf-textitem-editable /deep/ .mat-input-element:focus { +.adf-textitem-editable .mat-input-element:focus { padding: 5px; left: -6px; top: -6px; } -.adf-textitem-editable /deep/ input.mat-input-element { +.adf-textitem-editable input.mat-input-element { margin-bottom: 2px; } -.adf-textitem-editable /deep/ input.mat-input-element:focus { +.adf-textitem-editable input.mat-input-element:focus { margin-bottom: -8px; } .adf-invisible-date-input { @@ -1305,7 +1305,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-property { display: table-row; } -.adf-property /deep/ .adf-property-label { +.adf-property .adf-property-label { display: table-cell; min-width: 100px; padding-right: 30px; @@ -1314,7 +1314,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold vertical-align: top; padding-bottom: 20px; } -.adf-property /deep/ .adf-property-value { +.adf-property .adf-property-value { width: 100%; display: table-cell; color: #656565; @@ -2345,38 +2345,38 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric cursor: pointer; } .adf-content-node-selector-dialog .adf-content-node-selector-content-input-icon:hover { color: black; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .mat-input-underline .mat-input-ripple { + .adf-content-node-selector-dialog .adf-content-node-selector-content .mat-input-underline .mat-input-ripple { height: 1px; transition: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element { width: 100%; margin-bottom: 20px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-trigger { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-trigger { font-size: 14px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element.mat-select { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element.mat-select { font-family: 'Muli', "Helvetica", "Arial", sans-serif; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-toolbar .mat-toolbar { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-toolbar .mat-toolbar { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list { height: 200px; overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-highlight { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { color: #33afdfnpm np; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-no-content-container { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { text-align: center; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table thead { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table thead { display: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-data-table-cell { padding-top: 8px; padding-bottom: 8px; border-top: none; height: 30px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr { height: auto !important; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr:last-child .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr:last-child .adf-data-table-cell { border-bottom: none; } .adf-content-node-selector-dialog .adf-content-node-selector-actions { @@ -2499,20 +2499,6 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric object-fit: contain; margin-top: 17px; } -.show { - display: block !important; } - -.hide { - display: none !important; } - -.icon-inline { - position: absolute; - display: block; - top: 31%; - left: 82%; - width: 30px; - overflow: hidden; } - .adf-login-content { display: -webkit-flex; display: -ms-flexbox; @@ -2538,186 +2524,156 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric flex-direction: column; justify-content: center; align-items: center; } - -.adf-login-card-wide { - border-radius: 8px; - background-color: white; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - width: 450px; - min-width: 350px; - padding: 21px 64px 34px 64px; - box-sizing: border-box; } - -@media (max-width: 482px) { - .adf-login-card-wide { - width: calc(100% - 32px); } } - -.error { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: flex-start; - -moz-box-pack: flex-start; - box-pack: flex-start; - justify-content: flex-start; - color: #f44336; - padding: 0px; - margin-bottom: 4px; - font-size: 13px; } - -.error .error-icon { - margin-right: 10px; } - -.adf-img-logo { - display: block; - margin-left: auto; - margin-right: auto; } - -.adf-alfresco-logo { - padding: 24px 16px 24px 16px; } - -.adf-alfresco-logo img { - max-height: 43px; } - -.adf-login-button { - width: 100%; - height: 36px; - line-height: 38px; - box-shadow: none; } - -.adf-login-button-label { - color: white; } - -.adf-login-button.isChecking { - background-color: #e0f7fa; } - -.adf-login-button.isChecking .adf-login-button-label { - color: #00bcd4; } - -.adf-login-button.isWelcome { - background-color: #00bcd4; - color: #ffffff; } - -.adf-login-button.isWelcome .welcome-icon { - margin: 5px 0 0 10px; } - -.adf-interactive-login-label { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - justify-content: center; } - -.adf-login-checking-spinner { - height: 30px !important; - width: 20px !important; - margin-left: 10px; } - -.adf-login-controls { - padding: 0 0 26px 0; - overflow: visible; - width: 100%; } - -.adf-login-action { - margin-top: 20px; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: space-between; - -moz-box-pack: space-between; - box-pack: space-between; - justify-content: space-between; } - -.adf-login-action-left a, .adf-login-action-right a { - text-decoration: none; } - -/* Known issue in angular material design module in betas */ -> > > .rememberme-cb label > div { - margin-right: 8px; } - -.is-active { - background-color: transparent; - font-size: 12px; - font-weight: normal; - line-height: 1.33; - color: #f44336; } - -.copyright { - width: 450px; - text-align: center; - padding-top: 16px; - font-size: 12px; - opacity: 0.54; } - -.mat-input-container .adf-login-password-icon.mat-icon { - font-size: 24px; - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - position: relative; - top: -6px; - height: 20px; - opacity: 0.54; } - -.adf-login__field > > > .mat-input-wrapper { - margin: 1em 0 0 0; - font-size: 16px; } - -.adf-login-validation { - background-color: transparent; - color: #f44336; - font-size: 12px; } - -.adf-login-error { - color: #f44336; - position: absolute; - font-size: 12px; - margin-top: 5px; - display: block; } - -.adf-login-message { - color: blue; } - -.adf-full-width { - width: 100%; } - -.adf-login__remember-me { - padding-top: 22px; } - -.adf-login__remember-me > > > .mat-checkbox-label { - opacity: 0.87; } - -.adf-login__field { - display: block; - margin-left: auto; - margin-right: auto; - padding-bottom: 18px; } - -.adf-login-action-container { - border-top: 1px solid rgba(0, 0, 0, 0.1); - margin-top: 23px; } + .adf-login-content .show { + display: block !important; } + .adf-login-content .hide { + display: none !important; } + .adf-login-content .icon-inline { + position: absolute; + display: block; + top: 31%; + left: 82%; + width: 30px; + overflow: hidden; } + .adf-login-content .adf-login-card-wide { + border-radius: 8px; + background-color: white; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + width: 450px; + min-width: 350px; + padding: 21px 64px 34px 64px; + box-sizing: border-box; } + @media (max-width: 482px) { + .adf-login-content .adf-login-card-wide { + width: calc(100% - 32px); } } + .adf-login-content .adf-error-message { + display: flex; + box-orient: horizontal; + flex-direction: row; + justify-content: flex-start; + color: #f44336; + padding: 0px; + margin-bottom: 4px; + font-size: 13px; } + .adf-login-content .adf-error-message .error-icon { + margin-right: 10px; } + .adf-login-content .adf-img-logo { + display: block; + margin-left: auto; + margin-right: auto; } + .adf-login-content .adf-alfresco-logo { + padding: 24px 16px 24px 16px; } + .adf-login-content .adf-alfresco-logo img { + max-height: 43px; } + .adf-login-content .adf-login-button { + width: 100%; + height: 36px; + line-height: 38px; + box-shadow: none; } + .adf-login-content .adf-login-button-label { + color: white; } + .adf-login-content .adf-login-button.isChecking { + background-color: #e0f7fa; } + .adf-login-content .adf-login-button.isChecking .adf-login-button-label { + color: #00bcd4; } + .adf-login-content .adf-login-button.isWelcome { + background-color: #00bcd4; + color: #ffffff; } + .adf-login-content .adf-login-button.isWelcome .welcome-icon { + margin: 5px 0 0 10px; } + .adf-login-content .adf-interactive-login-label { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; + justify-content: center; } + .adf-login-content .adf-login-checking-spinner { + height: 30px !important; + width: 20px !important; + margin-left: 10px; } + .adf-login-content .adf-login-controls { + padding: 0 0 26px 0; + overflow: visible; + width: 100%; } + .adf-login-content .adf-login-action { + margin-top: 20px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: space-between; + -moz-box-pack: space-between; + box-pack: space-between; + justify-content: space-between; } + .adf-login-content .adf-login-action-left a, .adf-login-content .adf-login-action-right a { + text-decoration: none; } + .adf-login-content .is-active { + background-color: transparent; + font-size: 12px; + font-weight: normal; + line-height: 1.33; + color: #f44336; } + .adf-login-content .copyright { + width: 450px; + text-align: center; + padding-top: 16px; + font-size: 12px; + opacity: 0.54; } + .adf-login-content .mat-input-container .adf-login-password-icon.mat-icon { + font-size: 24px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + position: relative; + top: -6px; + height: 20px; + opacity: 0.54; } + .adf-login-content .adf-login__field .mat-input-wrapper { + margin: 1em 0 0 0; + font-size: 16px; } + .adf-login-content .adf-login__field input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px white inset; } + .adf-login-content .adf-login-validation { + background-color: transparent; + color: #f44336; + font-size: 12px; } + .adf-login-content .adf-login-error { + color: #f44336; + position: absolute; + font-size: 12px; + margin-top: -12px; + display: block; } + .adf-login-content .adf-login-message { + color: blue; } + .adf-login-content .adf-full-width { + width: 100%; } + .adf-login-content .adf-login__remember-me { + padding-top: 22px; } + .adf-login-content .adf-login__remember-me .mat-checkbox-label { + opacity: 0.87; } + .adf-login-content .adf-login__field { + display: block; + margin-left: auto; + margin-right: auto; + padding-bottom: 18px; } + .adf-login-content .adf-login-action-container { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 23px; } adf-file-uploading-list-row:not(:first-child) { display: block; @@ -2830,11 +2786,11 @@ adf-file-uploading-list-row:not(:first-child) { min-width: 40px; height: 40px; } -.adf-userinfo-tab /deep/ .mat-tab-header { +.adf-userinfo-tab .mat-tab-header { align-self: center; width: 100%; } -.adf-userinfo-tab /deep/ .mat-tab-label { +.adf-userinfo-tab .mat-tab-label { flex: auto; font-weight: 500; font-size: 14px; @@ -2926,7 +2882,7 @@ adf-file-uploading-list-row:not(:first-child) { .adf-userinfo-detail { text-align: left; } -.adf-hide-tab /deep/ .mat-tab-label-active { +.adf-hide-tab .mat-tab-label-active { display: none !important; } @media only screen and (min-device-width: 480px) { @@ -2936,5 +2892,87 @@ adf-file-uploading-list-row:not(:first-child) { overflow: auto; padding: 0px; } } -.mat-menu-panel.adf-userinfo-menu /deep/ .mat-menu-content { +.mat-menu-panel.adf-userinfo-menu .mat-menu-content { padding: 0px; } + +.adf-search-button.mat-button { + border-radius: 50%; + height: 32px; + min-width: 20px; + width: 32px; + padding: 0; + overflow: hidden; + color: inherit; + line-height: normal; + border: none; } + +.adf-search-container { + display: flex; + align-items: center; } + .adf-search-container .search-field { + width: 260px; + padding-top: 6px; } + .adf-search-container .search-field .mat-input-container { + width: 100%; } + .adf-search-container .search-field .mat-input-underline .mat-input-ripple { + background-color: white; } + .adf-search-container .search-field .mat-input-element { + font-size: 16px; } + .adf-search-container .search-field .mat-input-infix { + padding: 0px; } + @media only screen and (max-width: 400px) { + .adf-search-container .search-field { + width: 200px; } } + @media only screen and (max-width: 320px) { + .adf-search-container .search-field { + width: 160px; } } + +.adf-search-form { + overflow: hidden; } + +.adf-active-search, .adf-valid-search { + display: block; } + +.adf-search-result { + position: absolute; + z-index: 5; + display: none; + color: rgba(0, 0, 0, 0.87); + background-color: white; + margin: -21px 0px 0px 0px; + border: 1px solid #8bc34a; + border-collapse: collapse; + white-space: nowrap; + font-size: 14px; } + .adf-search-result a { + color: rgba(0, 0, 0, 0.87); + text-decoration: none; } + .adf-search-result table { + width: 300px; } + .adf-search-result tbody tr { + height: 32px; } + .adf-search-result tbody tr:hover { + background-color: rgba(0, 0, 0, 0.04); } + .adf-search-result td { + height: 32px; + padding: 8px; + text-align: left; + border-top: none; + border-bottom: none; } + .adf-search-result .highlight { + color: #33691e; } + .adf-search-result .img-td { + width: 30px; } + .adf-search-result .truncate { + width: 240px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + @media screen and (max-width: 400px) { + .adf-search-result :host { + right: 0; } + .adf-search-result .truncate { + width: 200px; } } + +.adf-valid-search .adf-search-result { + display: block; } 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 a24d9a097a..4b5547d4a6 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 @@ -1243,38 +1243,38 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-textitem-editable textarea:focus { border: 1px solid #EEE; } -.adf-textitem-editable /deep/ .mat-input-wrapper { +.adf-textitem-editable .mat-input-wrapper { margin: 0; padding-bottom: 0; } -.adf-textitem-editable /deep/ .mat-input-underline { +.adf-textitem-editable .mat-input-underline { display: none; } -.adf-textitem-editable /deep/ .mat-input-infix { +.adf-textitem-editable .mat-input-infix { padding: 0; border-top: none; } -.adf-textitem-editable /deep/ .mat-input-placeholder-wrapper { +.adf-textitem-editable .mat-input-placeholder-wrapper { padding-top: 2em; position: static; } -.adf-textitem-editable /deep/ .mat-input-placeholder { +.adf-textitem-editable .mat-input-placeholder { top: 0; } -.adf-textitem-editable /deep/ .mat-input-element { +.adf-textitem-editable .mat-input-element { font-family: inherit; position: relative; padding-top: 3px; } -.adf-textitem-editable /deep/ .mat-input-element:focus { +.adf-textitem-editable .mat-input-element:focus { padding: 5px; left: -6px; top: -6px; } -.adf-textitem-editable /deep/ input.mat-input-element { +.adf-textitem-editable input.mat-input-element { margin-bottom: 2px; } -.adf-textitem-editable /deep/ input.mat-input-element:focus { +.adf-textitem-editable input.mat-input-element:focus { margin-bottom: -8px; } .adf-invisible-date-input { @@ -1305,7 +1305,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-property { display: table-row; } -.adf-property /deep/ .adf-property-label { +.adf-property .adf-property-label { display: table-cell; min-width: 100px; padding-right: 30px; @@ -1314,7 +1314,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold vertical-align: top; padding-bottom: 20px; } -.adf-property /deep/ .adf-property-value { +.adf-property .adf-property-value { width: 100%; display: table-cell; color: #656565; @@ -2345,38 +2345,38 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric cursor: pointer; } .adf-content-node-selector-dialog .adf-content-node-selector-content-input-icon:hover { color: black; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .mat-input-underline .mat-input-ripple { + .adf-content-node-selector-dialog .adf-content-node-selector-content .mat-input-underline .mat-input-ripple { height: 1px; transition: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element { width: 100%; margin-bottom: 20px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-trigger { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-trigger { font-size: 14px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element.mat-select { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element.mat-select { font-family: 'Muli', "Helvetica", "Arial", sans-serif; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-toolbar .mat-toolbar { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-toolbar .mat-toolbar { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list { height: 200px; overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-highlight { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { color: #33afdfnpm np; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-no-content-container { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { text-align: center; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table thead { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table thead { display: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-data-table-cell { padding-top: 8px; padding-bottom: 8px; border-top: none; height: 30px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr { height: auto !important; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr:last-child .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr:last-child .adf-data-table-cell { border-bottom: none; } .adf-content-node-selector-dialog .adf-content-node-selector-actions { @@ -2499,20 +2499,6 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric object-fit: contain; margin-top: 17px; } -.show { - display: block !important; } - -.hide { - display: none !important; } - -.icon-inline { - position: absolute; - display: block; - top: 31%; - left: 82%; - width: 30px; - overflow: hidden; } - .adf-login-content { display: -webkit-flex; display: -ms-flexbox; @@ -2538,186 +2524,156 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric flex-direction: column; justify-content: center; align-items: center; } - -.adf-login-card-wide { - border-radius: 8px; - background-color: white; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - width: 450px; - min-width: 350px; - padding: 21px 64px 34px 64px; - box-sizing: border-box; } - -@media (max-width: 482px) { - .adf-login-card-wide { - width: calc(100% - 32px); } } - -.error { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: flex-start; - -moz-box-pack: flex-start; - box-pack: flex-start; - justify-content: flex-start; - color: #f44336; - padding: 0px; - margin-bottom: 4px; - font-size: 13px; } - -.error .error-icon { - margin-right: 10px; } - -.adf-img-logo { - display: block; - margin-left: auto; - margin-right: auto; } - -.adf-alfresco-logo { - padding: 24px 16px 24px 16px; } - -.adf-alfresco-logo img { - max-height: 43px; } - -.adf-login-button { - width: 100%; - height: 36px; - line-height: 38px; - box-shadow: none; } - -.adf-login-button-label { - color: white; } - -.adf-login-button.isChecking { - background-color: #e0f7fa; } - -.adf-login-button.isChecking .adf-login-button-label { - color: #00bcd4; } - -.adf-login-button.isWelcome { - background-color: #00bcd4; - color: #ffffff; } - -.adf-login-button.isWelcome .welcome-icon { - margin: 5px 0 0 10px; } - -.adf-interactive-login-label { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - justify-content: center; } - -.adf-login-checking-spinner { - height: 30px !important; - width: 20px !important; - margin-left: 10px; } - -.adf-login-controls { - padding: 0 0 26px 0; - overflow: visible; - width: 100%; } - -.adf-login-action { - margin-top: 20px; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: space-between; - -moz-box-pack: space-between; - box-pack: space-between; - justify-content: space-between; } - -.adf-login-action-left a, .adf-login-action-right a { - text-decoration: none; } - -/* Known issue in angular material design module in betas */ -> > > .rememberme-cb label > div { - margin-right: 8px; } - -.is-active { - background-color: transparent; - font-size: 12px; - font-weight: normal; - line-height: 1.33; - color: #f44336; } - -.copyright { - width: 450px; - text-align: center; - padding-top: 16px; - font-size: 12px; - opacity: 0.54; } - -.mat-input-container .adf-login-password-icon.mat-icon { - font-size: 24px; - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - position: relative; - top: -6px; - height: 20px; - opacity: 0.54; } - -.adf-login__field > > > .mat-input-wrapper { - margin: 1em 0 0 0; - font-size: 16px; } - -.adf-login-validation { - background-color: transparent; - color: #f44336; - font-size: 12px; } - -.adf-login-error { - color: #f44336; - position: absolute; - font-size: 12px; - margin-top: 5px; - display: block; } - -.adf-login-message { - color: blue; } - -.adf-full-width { - width: 100%; } - -.adf-login__remember-me { - padding-top: 22px; } - -.adf-login__remember-me > > > .mat-checkbox-label { - opacity: 0.87; } - -.adf-login__field { - display: block; - margin-left: auto; - margin-right: auto; - padding-bottom: 18px; } - -.adf-login-action-container { - border-top: 1px solid rgba(0, 0, 0, 0.1); - margin-top: 23px; } + .adf-login-content .show { + display: block !important; } + .adf-login-content .hide { + display: none !important; } + .adf-login-content .icon-inline { + position: absolute; + display: block; + top: 31%; + left: 82%; + width: 30px; + overflow: hidden; } + .adf-login-content .adf-login-card-wide { + border-radius: 8px; + background-color: white; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + width: 450px; + min-width: 350px; + padding: 21px 64px 34px 64px; + box-sizing: border-box; } + @media (max-width: 482px) { + .adf-login-content .adf-login-card-wide { + width: calc(100% - 32px); } } + .adf-login-content .adf-error-message { + display: flex; + box-orient: horizontal; + flex-direction: row; + justify-content: flex-start; + color: #f44336; + padding: 0px; + margin-bottom: 4px; + font-size: 13px; } + .adf-login-content .adf-error-message .error-icon { + margin-right: 10px; } + .adf-login-content .adf-img-logo { + display: block; + margin-left: auto; + margin-right: auto; } + .adf-login-content .adf-alfresco-logo { + padding: 24px 16px 24px 16px; } + .adf-login-content .adf-alfresco-logo img { + max-height: 43px; } + .adf-login-content .adf-login-button { + width: 100%; + height: 36px; + line-height: 38px; + box-shadow: none; } + .adf-login-content .adf-login-button-label { + color: white; } + .adf-login-content .adf-login-button.isChecking { + background-color: #e0f7fa; } + .adf-login-content .adf-login-button.isChecking .adf-login-button-label { + color: #00bcd4; } + .adf-login-content .adf-login-button.isWelcome { + background-color: #00bcd4; + color: #ffffff; } + .adf-login-content .adf-login-button.isWelcome .welcome-icon { + margin: 5px 0 0 10px; } + .adf-login-content .adf-interactive-login-label { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; + justify-content: center; } + .adf-login-content .adf-login-checking-spinner { + height: 30px !important; + width: 20px !important; + margin-left: 10px; } + .adf-login-content .adf-login-controls { + padding: 0 0 26px 0; + overflow: visible; + width: 100%; } + .adf-login-content .adf-login-action { + margin-top: 20px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: space-between; + -moz-box-pack: space-between; + box-pack: space-between; + justify-content: space-between; } + .adf-login-content .adf-login-action-left a, .adf-login-content .adf-login-action-right a { + text-decoration: none; } + .adf-login-content .is-active { + background-color: transparent; + font-size: 12px; + font-weight: normal; + line-height: 1.33; + color: #f44336; } + .adf-login-content .copyright { + width: 450px; + text-align: center; + padding-top: 16px; + font-size: 12px; + opacity: 0.54; } + .adf-login-content .mat-input-container .adf-login-password-icon.mat-icon { + font-size: 24px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + position: relative; + top: -6px; + height: 20px; + opacity: 0.54; } + .adf-login-content .adf-login__field .mat-input-wrapper { + margin: 1em 0 0 0; + font-size: 16px; } + .adf-login-content .adf-login__field input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px white inset; } + .adf-login-content .adf-login-validation { + background-color: transparent; + color: #f44336; + font-size: 12px; } + .adf-login-content .adf-login-error { + color: #f44336; + position: absolute; + font-size: 12px; + margin-top: -12px; + display: block; } + .adf-login-content .adf-login-message { + color: blue; } + .adf-login-content .adf-full-width { + width: 100%; } + .adf-login-content .adf-login__remember-me { + padding-top: 22px; } + .adf-login-content .adf-login__remember-me .mat-checkbox-label { + opacity: 0.87; } + .adf-login-content .adf-login__field { + display: block; + margin-left: auto; + margin-right: auto; + padding-bottom: 18px; } + .adf-login-content .adf-login-action-container { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 23px; } adf-file-uploading-list-row:not(:first-child) { display: block; @@ -2830,11 +2786,11 @@ adf-file-uploading-list-row:not(:first-child) { min-width: 40px; height: 40px; } -.adf-userinfo-tab /deep/ .mat-tab-header { +.adf-userinfo-tab .mat-tab-header { align-self: center; width: 100%; } -.adf-userinfo-tab /deep/ .mat-tab-label { +.adf-userinfo-tab .mat-tab-label { flex: auto; font-weight: 500; font-size: 14px; @@ -2926,7 +2882,7 @@ adf-file-uploading-list-row:not(:first-child) { .adf-userinfo-detail { text-align: left; } -.adf-hide-tab /deep/ .mat-tab-label-active { +.adf-hide-tab .mat-tab-label-active { display: none !important; } @media only screen and (min-device-width: 480px) { @@ -2936,5 +2892,87 @@ adf-file-uploading-list-row:not(:first-child) { overflow: auto; padding: 0px; } } -.mat-menu-panel.adf-userinfo-menu /deep/ .mat-menu-content { +.mat-menu-panel.adf-userinfo-menu .mat-menu-content { padding: 0px; } + +.adf-search-button.mat-button { + border-radius: 50%; + height: 32px; + min-width: 20px; + width: 32px; + padding: 0; + overflow: hidden; + color: inherit; + line-height: normal; + border: none; } + +.adf-search-container { + display: flex; + align-items: center; } + .adf-search-container .search-field { + width: 260px; + padding-top: 6px; } + .adf-search-container .search-field .mat-input-container { + width: 100%; } + .adf-search-container .search-field .mat-input-underline .mat-input-ripple { + background-color: white; } + .adf-search-container .search-field .mat-input-element { + font-size: 16px; } + .adf-search-container .search-field .mat-input-infix { + padding: 0px; } + @media only screen and (max-width: 400px) { + .adf-search-container .search-field { + width: 200px; } } + @media only screen and (max-width: 320px) { + .adf-search-container .search-field { + width: 160px; } } + +.adf-search-form { + overflow: hidden; } + +.adf-active-search, .adf-valid-search { + display: block; } + +.adf-search-result { + position: absolute; + z-index: 5; + display: none; + color: rgba(0, 0, 0, 0.87); + background-color: white; + margin: -21px 0px 0px 0px; + border: 1px solid #3f51b5; + border-collapse: collapse; + white-space: nowrap; + font-size: 14px; } + .adf-search-result a { + color: rgba(0, 0, 0, 0.87); + text-decoration: none; } + .adf-search-result table { + width: 300px; } + .adf-search-result tbody tr { + height: 32px; } + .adf-search-result tbody tr:hover { + background-color: rgba(0, 0, 0, 0.04); } + .adf-search-result td { + height: 32px; + padding: 8px; + text-align: left; + border-top: none; + border-bottom: none; } + .adf-search-result .highlight { + color: #1a237e; } + .adf-search-result .img-td { + width: 30px; } + .adf-search-result .truncate { + width: 240px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + @media screen and (max-width: 400px) { + .adf-search-result :host { + right: 0; } + .adf-search-result .truncate { + width: 200px; } } + +.adf-valid-search .adf-search-result { + display: block; } 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 07aea0b4ef..de1d2ee687 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 @@ -1243,38 +1243,38 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-textitem-editable textarea:focus { border: 1px solid #EEE; } -.adf-textitem-editable /deep/ .mat-input-wrapper { +.adf-textitem-editable .mat-input-wrapper { margin: 0; padding-bottom: 0; } -.adf-textitem-editable /deep/ .mat-input-underline { +.adf-textitem-editable .mat-input-underline { display: none; } -.adf-textitem-editable /deep/ .mat-input-infix { +.adf-textitem-editable .mat-input-infix { padding: 0; border-top: none; } -.adf-textitem-editable /deep/ .mat-input-placeholder-wrapper { +.adf-textitem-editable .mat-input-placeholder-wrapper { padding-top: 2em; position: static; } -.adf-textitem-editable /deep/ .mat-input-placeholder { +.adf-textitem-editable .mat-input-placeholder { top: 0; } -.adf-textitem-editable /deep/ .mat-input-element { +.adf-textitem-editable .mat-input-element { font-family: inherit; position: relative; padding-top: 3px; } -.adf-textitem-editable /deep/ .mat-input-element:focus { +.adf-textitem-editable .mat-input-element:focus { padding: 5px; left: -6px; top: -6px; } -.adf-textitem-editable /deep/ input.mat-input-element { +.adf-textitem-editable input.mat-input-element { margin-bottom: 2px; } -.adf-textitem-editable /deep/ input.mat-input-element:focus { +.adf-textitem-editable input.mat-input-element:focus { margin-bottom: -8px; } .adf-invisible-date-input { @@ -1305,7 +1305,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-property { display: table-row; } -.adf-property /deep/ .adf-property-label { +.adf-property .adf-property-label { display: table-cell; min-width: 100px; padding-right: 30px; @@ -1314,7 +1314,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold vertical-align: top; padding-bottom: 20px; } -.adf-property /deep/ .adf-property-value { +.adf-property .adf-property-value { width: 100%; display: table-cell; color: #656565; @@ -2345,38 +2345,38 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric cursor: pointer; } .adf-content-node-selector-dialog .adf-content-node-selector-content-input-icon:hover { color: black; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .mat-input-underline .mat-input-ripple { + .adf-content-node-selector-dialog .adf-content-node-selector-content .mat-input-underline .mat-input-ripple { height: 1px; transition: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element { width: 100%; margin-bottom: 20px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-trigger { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-trigger { font-size: 14px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element.mat-select { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element.mat-select { font-family: 'Muli', "Helvetica", "Arial", sans-serif; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-toolbar .mat-toolbar { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-toolbar .mat-toolbar { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list { height: 200px; overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-highlight { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { color: #33afdfnpm np; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-no-content-container { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { text-align: center; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table thead { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table thead { display: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-data-table-cell { padding-top: 8px; padding-bottom: 8px; border-top: none; height: 30px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr { height: auto !important; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr:last-child .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr:last-child .adf-data-table-cell { border-bottom: none; } .adf-content-node-selector-dialog .adf-content-node-selector-actions { @@ -2499,20 +2499,6 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric object-fit: contain; margin-top: 17px; } -.show { - display: block !important; } - -.hide { - display: none !important; } - -.icon-inline { - position: absolute; - display: block; - top: 31%; - left: 82%; - width: 30px; - overflow: hidden; } - .adf-login-content { display: -webkit-flex; display: -ms-flexbox; @@ -2538,186 +2524,156 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric flex-direction: column; justify-content: center; align-items: center; } - -.adf-login-card-wide { - border-radius: 8px; - background-color: #424242; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - width: 450px; - min-width: 350px; - padding: 21px 64px 34px 64px; - box-sizing: border-box; } - -@media (max-width: 482px) { - .adf-login-card-wide { - width: calc(100% - 32px); } } - -.error { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: flex-start; - -moz-box-pack: flex-start; - box-pack: flex-start; - justify-content: flex-start; - color: #f44336; - padding: 0px; - margin-bottom: 4px; - font-size: 13px; } - -.error .error-icon { - margin-right: 10px; } - -.adf-img-logo { - display: block; - margin-left: auto; - margin-right: auto; } - -.adf-alfresco-logo { - padding: 24px 16px 24px 16px; } - -.adf-alfresco-logo img { - max-height: 43px; } - -.adf-login-button { - width: 100%; - height: 36px; - line-height: 38px; - box-shadow: none; } - -.adf-login-button-label { - color: white; } - -.adf-login-button.isChecking { - background-color: #e0f7fa; } - -.adf-login-button.isChecking .adf-login-button-label { - color: #00bcd4; } - -.adf-login-button.isWelcome { - background-color: #00bcd4; - color: #ffffff; } - -.adf-login-button.isWelcome .welcome-icon { - margin: 5px 0 0 10px; } - -.adf-interactive-login-label { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - justify-content: center; } - -.adf-login-checking-spinner { - height: 30px !important; - width: 20px !important; - margin-left: 10px; } - -.adf-login-controls { - padding: 0 0 26px 0; - overflow: visible; - width: 100%; } - -.adf-login-action { - margin-top: 20px; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: space-between; - -moz-box-pack: space-between; - box-pack: space-between; - justify-content: space-between; } - -.adf-login-action-left a, .adf-login-action-right a { - text-decoration: none; } - -/* Known issue in angular material design module in betas */ -> > > .rememberme-cb label > div { - margin-right: 8px; } - -.is-active { - background-color: transparent; - font-size: 12px; - font-weight: normal; - line-height: 1.33; - color: #f44336; } - -.copyright { - width: 450px; - text-align: center; - padding-top: 16px; - font-size: 12px; - opacity: 0.54; } - -.mat-input-container .adf-login-password-icon.mat-icon { - font-size: 24px; - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - position: relative; - top: -6px; - height: 20px; - opacity: 0.54; } - -.adf-login__field > > > .mat-input-wrapper { - margin: 1em 0 0 0; - font-size: 16px; } - -.adf-login-validation { - background-color: transparent; - color: #f44336; - font-size: 12px; } - -.adf-login-error { - color: #f44336; - position: absolute; - font-size: 12px; - margin-top: 5px; - display: block; } - -.adf-login-message { - color: blue; } - -.adf-full-width { - width: 100%; } - -.adf-login__remember-me { - padding-top: 22px; } - -.adf-login__remember-me > > > .mat-checkbox-label { - opacity: 0.87; } - -.adf-login__field { - display: block; - margin-left: auto; - margin-right: auto; - padding-bottom: 18px; } - -.adf-login-action-container { - border-top: 1px solid rgba(0, 0, 0, 0.1); - margin-top: 23px; } + .adf-login-content .show { + display: block !important; } + .adf-login-content .hide { + display: none !important; } + .adf-login-content .icon-inline { + position: absolute; + display: block; + top: 31%; + left: 82%; + width: 30px; + overflow: hidden; } + .adf-login-content .adf-login-card-wide { + border-radius: 8px; + background-color: #424242; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + width: 450px; + min-width: 350px; + padding: 21px 64px 34px 64px; + box-sizing: border-box; } + @media (max-width: 482px) { + .adf-login-content .adf-login-card-wide { + width: calc(100% - 32px); } } + .adf-login-content .adf-error-message { + display: flex; + box-orient: horizontal; + flex-direction: row; + justify-content: flex-start; + color: #f44336; + padding: 0px; + margin-bottom: 4px; + font-size: 13px; } + .adf-login-content .adf-error-message .error-icon { + margin-right: 10px; } + .adf-login-content .adf-img-logo { + display: block; + margin-left: auto; + margin-right: auto; } + .adf-login-content .adf-alfresco-logo { + padding: 24px 16px 24px 16px; } + .adf-login-content .adf-alfresco-logo img { + max-height: 43px; } + .adf-login-content .adf-login-button { + width: 100%; + height: 36px; + line-height: 38px; + box-shadow: none; } + .adf-login-content .adf-login-button-label { + color: white; } + .adf-login-content .adf-login-button.isChecking { + background-color: #e0f7fa; } + .adf-login-content .adf-login-button.isChecking .adf-login-button-label { + color: #00bcd4; } + .adf-login-content .adf-login-button.isWelcome { + background-color: #00bcd4; + color: #ffffff; } + .adf-login-content .adf-login-button.isWelcome .welcome-icon { + margin: 5px 0 0 10px; } + .adf-login-content .adf-interactive-login-label { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; + justify-content: center; } + .adf-login-content .adf-login-checking-spinner { + height: 30px !important; + width: 20px !important; + margin-left: 10px; } + .adf-login-content .adf-login-controls { + padding: 0 0 26px 0; + overflow: visible; + width: 100%; } + .adf-login-content .adf-login-action { + margin-top: 20px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: space-between; + -moz-box-pack: space-between; + box-pack: space-between; + justify-content: space-between; } + .adf-login-content .adf-login-action-left a, .adf-login-content .adf-login-action-right a { + text-decoration: none; } + .adf-login-content .is-active { + background-color: transparent; + font-size: 12px; + font-weight: normal; + line-height: 1.33; + color: #f44336; } + .adf-login-content .copyright { + width: 450px; + text-align: center; + padding-top: 16px; + font-size: 12px; + opacity: 0.54; } + .adf-login-content .mat-input-container .adf-login-password-icon.mat-icon { + font-size: 24px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + position: relative; + top: -6px; + height: 20px; + opacity: 0.54; } + .adf-login-content .adf-login__field .mat-input-wrapper { + margin: 1em 0 0 0; + font-size: 16px; } + .adf-login-content .adf-login__field input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px white inset; } + .adf-login-content .adf-login-validation { + background-color: transparent; + color: #f44336; + font-size: 12px; } + .adf-login-content .adf-login-error { + color: #f44336; + position: absolute; + font-size: 12px; + margin-top: -12px; + display: block; } + .adf-login-content .adf-login-message { + color: blue; } + .adf-login-content .adf-full-width { + width: 100%; } + .adf-login-content .adf-login__remember-me { + padding-top: 22px; } + .adf-login-content .adf-login__remember-me .mat-checkbox-label { + opacity: 0.87; } + .adf-login-content .adf-login__field { + display: block; + margin-left: auto; + margin-right: auto; + padding-bottom: 18px; } + .adf-login-content .adf-login-action-container { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 23px; } adf-file-uploading-list-row:not(:first-child) { display: block; @@ -2830,11 +2786,11 @@ adf-file-uploading-list-row:not(:first-child) { min-width: 40px; height: 40px; } -.adf-userinfo-tab /deep/ .mat-tab-header { +.adf-userinfo-tab .mat-tab-header { align-self: center; width: 100%; } -.adf-userinfo-tab /deep/ .mat-tab-label { +.adf-userinfo-tab .mat-tab-label { flex: auto; font-weight: 500; font-size: 14px; @@ -2926,7 +2882,7 @@ adf-file-uploading-list-row:not(:first-child) { .adf-userinfo-detail { text-align: left; } -.adf-hide-tab /deep/ .mat-tab-label-active { +.adf-hide-tab .mat-tab-label-active { display: none !important; } @media only screen and (min-device-width: 480px) { @@ -2936,5 +2892,87 @@ adf-file-uploading-list-row:not(:first-child) { overflow: auto; padding: 0px; } } -.mat-menu-panel.adf-userinfo-menu /deep/ .mat-menu-content { +.mat-menu-panel.adf-userinfo-menu .mat-menu-content { padding: 0px; } + +.adf-search-button.mat-button { + border-radius: 50%; + height: 32px; + min-width: 20px; + width: 32px; + padding: 0; + overflow: hidden; + color: inherit; + line-height: normal; + border: none; } + +.adf-search-container { + display: flex; + align-items: center; } + .adf-search-container .search-field { + width: 260px; + padding-top: 6px; } + .adf-search-container .search-field .mat-input-container { + width: 100%; } + .adf-search-container .search-field .mat-input-underline .mat-input-ripple { + background-color: #424242; } + .adf-search-container .search-field .mat-input-element { + font-size: 16px; } + .adf-search-container .search-field .mat-input-infix { + padding: 0px; } + @media only screen and (max-width: 400px) { + .adf-search-container .search-field { + width: 200px; } } + @media only screen and (max-width: 320px) { + .adf-search-container .search-field { + width: 160px; } } + +.adf-search-form { + overflow: hidden; } + +.adf-active-search, .adf-valid-search { + display: block; } + +.adf-search-result { + position: absolute; + z-index: 5; + display: none; + color: white; + background-color: #424242; + margin: -21px 0px 0px 0px; + border: 1px solid #c2185b; + border-collapse: collapse; + white-space: nowrap; + font-size: 14px; } + .adf-search-result a { + color: white; + text-decoration: none; } + .adf-search-result table { + width: 300px; } + .adf-search-result tbody tr { + height: 32px; } + .adf-search-result tbody tr:hover { + background-color: rgba(255, 255, 255, 0.04); } + .adf-search-result td { + height: 32px; + padding: 8px; + text-align: left; + border-top: none; + border-bottom: none; } + .adf-search-result .highlight { + color: #880e4f; } + .adf-search-result .img-td { + width: 30px; } + .adf-search-result .truncate { + width: 240px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + @media screen and (max-width: 400px) { + .adf-search-result :host { + right: 0; } + .adf-search-result .truncate { + width: 200px; } } + +.adf-valid-search .adf-search-result { + display: block; } 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 845e66c525..ef1aa19885 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 @@ -1243,38 +1243,38 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-textitem-editable textarea:focus { border: 1px solid #EEE; } -.adf-textitem-editable /deep/ .mat-input-wrapper { +.adf-textitem-editable .mat-input-wrapper { margin: 0; padding-bottom: 0; } -.adf-textitem-editable /deep/ .mat-input-underline { +.adf-textitem-editable .mat-input-underline { display: none; } -.adf-textitem-editable /deep/ .mat-input-infix { +.adf-textitem-editable .mat-input-infix { padding: 0; border-top: none; } -.adf-textitem-editable /deep/ .mat-input-placeholder-wrapper { +.adf-textitem-editable .mat-input-placeholder-wrapper { padding-top: 2em; position: static; } -.adf-textitem-editable /deep/ .mat-input-placeholder { +.adf-textitem-editable .mat-input-placeholder { top: 0; } -.adf-textitem-editable /deep/ .mat-input-element { +.adf-textitem-editable .mat-input-element { font-family: inherit; position: relative; padding-top: 3px; } -.adf-textitem-editable /deep/ .mat-input-element:focus { +.adf-textitem-editable .mat-input-element:focus { padding: 5px; left: -6px; top: -6px; } -.adf-textitem-editable /deep/ input.mat-input-element { +.adf-textitem-editable input.mat-input-element { margin-bottom: 2px; } -.adf-textitem-editable /deep/ input.mat-input-element:focus { +.adf-textitem-editable input.mat-input-element:focus { margin-bottom: -8px; } .adf-invisible-date-input { @@ -1305,7 +1305,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold .adf-property { display: table-row; } -.adf-property /deep/ .adf-property-label { +.adf-property .adf-property-label { display: table-cell; min-width: 100px; padding-right: 30px; @@ -1314,7 +1314,7 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold vertical-align: top; padding-bottom: 20px; } -.adf-property /deep/ .adf-property-value { +.adf-property .adf-property-value { width: 100%; display: table-cell; color: #656565; @@ -2345,38 +2345,38 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric cursor: pointer; } .adf-content-node-selector-dialog .adf-content-node-selector-content-input-icon:hover { color: black; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .mat-input-underline .mat-input-ripple { + .adf-content-node-selector-dialog .adf-content-node-selector-content .mat-input-underline .mat-input-ripple { height: 1px; transition: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element { width: 100%; margin-bottom: 20px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-trigger { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-trigger { font-size: 14px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-site-dropdown-list-element.mat-select { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element .mat-select-placeholder, .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-site-dropdown-list-element.mat-select { font-family: 'Muli', "Helvetica", "Arial", sans-serif; } - .adf-content-node-selector-dialog .adf-content-node-selector-content /deep/ .adf-toolbar .mat-toolbar { + .adf-content-node-selector-dialog .adf-content-node-selector-content .adf-toolbar .mat-toolbar { border: none; } .adf-content-node-selector-dialog .adf-content-node-selector-content-list { height: 200px; overflow: auto; border: 1px solid rgba(0, 0, 0, 0.07); } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-highlight { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-highlight { color: #33afdfnpm np; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table { border: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-no-content-container { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-no-content-container { text-align: center; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table thead { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table thead { display: none; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table .adf-data-table-cell { padding-top: 8px; padding-bottom: 8px; border-top: none; height: 30px; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr { height: auto !important; } - .adf-content-node-selector-dialog .adf-content-node-selector-content-list /deep/ .adf-data-table tbody tr:last-child .adf-data-table-cell { + .adf-content-node-selector-dialog .adf-content-node-selector-content-list .adf-data-table tbody tr:last-child .adf-data-table-cell { border-bottom: none; } .adf-content-node-selector-dialog .adf-content-node-selector-actions { @@ -2499,20 +2499,6 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric object-fit: contain; margin-top: 17px; } -.show { - display: block !important; } - -.hide { - display: none !important; } - -.icon-inline { - position: absolute; - display: block; - top: 31%; - left: 82%; - width: 30px; - overflow: hidden; } - .adf-login-content { display: -webkit-flex; display: -ms-flexbox; @@ -2538,186 +2524,156 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric flex-direction: column; justify-content: center; align-items: center; } - -.adf-login-card-wide { - border-radius: 8px; - background-color: #424242; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - width: 450px; - min-width: 350px; - padding: 21px 64px 34px 64px; - box-sizing: border-box; } - -@media (max-width: 482px) { - .adf-login-card-wide { - width: calc(100% - 32px); } } - -.error { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: flex-start; - -moz-box-pack: flex-start; - box-pack: flex-start; - justify-content: flex-start; - color: #f44336; - padding: 0px; - margin-bottom: 4px; - font-size: 13px; } - -.error .error-icon { - margin-right: 10px; } - -.adf-img-logo { - display: block; - margin-left: auto; - margin-right: auto; } - -.adf-alfresco-logo { - padding: 24px 16px 24px 16px; } - -.adf-alfresco-logo img { - max-height: 43px; } - -.adf-login-button { - width: 100%; - height: 36px; - line-height: 38px; - box-shadow: none; } - -.adf-login-button-label { - color: white; } - -.adf-login-button.isChecking { - background-color: #e0f7fa; } - -.adf-login-button.isChecking .adf-login-button-label { - color: #00bcd4; } - -.adf-login-button.isWelcome { - background-color: #00bcd4; - color: #ffffff; } - -.adf-login-button.isWelcome .welcome-icon { - margin: 5px 0 0 10px; } - -.adf-interactive-login-label { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - justify-content: center; } - -.adf-login-checking-spinner { - height: 30px !important; - width: 20px !important; - margin-left: 10px; } - -.adf-login-controls { - padding: 0 0 26px 0; - overflow: visible; - width: 100%; } - -.adf-login-action { - margin-top: 20px; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - -webkit-box-pack: space-between; - -moz-box-pack: space-between; - box-pack: space-between; - justify-content: space-between; } - -.adf-login-action-left a, .adf-login-action-right a { - text-decoration: none; } - -/* Known issue in angular material design module in betas */ -> > > .rememberme-cb label > div { - margin-right: 8px; } - -.is-active { - background-color: transparent; - font-size: 12px; - font-weight: normal; - line-height: 1.33; - color: #f44336; } - -.copyright { - width: 450px; - text-align: center; - padding-top: 16px; - font-size: 12px; - opacity: 0.54; } - -.mat-input-container .adf-login-password-icon.mat-icon { - font-size: 24px; - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - position: relative; - top: -6px; - height: 20px; - opacity: 0.54; } - -.adf-login__field > > > .mat-input-wrapper { - margin: 1em 0 0 0; - font-size: 16px; } - -.adf-login-validation { - background-color: transparent; - color: #f44336; - font-size: 12px; } - -.adf-login-error { - color: #f44336; - position: absolute; - font-size: 12px; - margin-top: 5px; - display: block; } - -.adf-login-message { - color: blue; } - -.adf-full-width { - width: 100%; } - -.adf-login__remember-me { - padding-top: 22px; } - -.adf-login__remember-me > > > .mat-checkbox-label { - opacity: 0.87; } - -.adf-login__field { - display: block; - margin-left: auto; - margin-right: auto; - padding-bottom: 18px; } - -.adf-login-action-container { - border-top: 1px solid rgba(0, 0, 0, 0.1); - margin-top: 23px; } + .adf-login-content .show { + display: block !important; } + .adf-login-content .hide { + display: none !important; } + .adf-login-content .icon-inline { + position: absolute; + display: block; + top: 31%; + left: 82%; + width: 30px; + overflow: hidden; } + .adf-login-content .adf-login-card-wide { + border-radius: 8px; + background-color: #424242; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + width: 450px; + min-width: 350px; + padding: 21px 64px 34px 64px; + box-sizing: border-box; } + @media (max-width: 482px) { + .adf-login-content .adf-login-card-wide { + width: calc(100% - 32px); } } + .adf-login-content .adf-error-message { + display: flex; + box-orient: horizontal; + flex-direction: row; + justify-content: flex-start; + color: #f44336; + padding: 0px; + margin-bottom: 4px; + font-size: 13px; } + .adf-login-content .adf-error-message .error-icon { + margin-right: 10px; } + .adf-login-content .adf-img-logo { + display: block; + margin-left: auto; + margin-right: auto; } + .adf-login-content .adf-alfresco-logo { + padding: 24px 16px 24px 16px; } + .adf-login-content .adf-alfresco-logo img { + max-height: 43px; } + .adf-login-content .adf-login-button { + width: 100%; + height: 36px; + line-height: 38px; + box-shadow: none; } + .adf-login-content .adf-login-button-label { + color: white; } + .adf-login-content .adf-login-button.isChecking { + background-color: #e0f7fa; } + .adf-login-content .adf-login-button.isChecking .adf-login-button-label { + color: #00bcd4; } + .adf-login-content .adf-login-button.isWelcome { + background-color: #00bcd4; + color: #ffffff; } + .adf-login-content .adf-login-button.isWelcome .welcome-icon { + margin: 5px 0 0 10px; } + .adf-login-content .adf-interactive-login-label { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; + justify-content: center; } + .adf-login-content .adf-login-checking-spinner { + height: 30px !important; + width: 20px !important; + margin-left: 10px; } + .adf-login-content .adf-login-controls { + padding: 0 0 26px 0; + overflow: visible; + width: 100%; } + .adf-login-content .adf-login-action { + margin-top: 20px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + -webkit-box-pack: space-between; + -moz-box-pack: space-between; + box-pack: space-between; + justify-content: space-between; } + .adf-login-content .adf-login-action-left a, .adf-login-content .adf-login-action-right a { + text-decoration: none; } + .adf-login-content .is-active { + background-color: transparent; + font-size: 12px; + font-weight: normal; + line-height: 1.33; + color: #f44336; } + .adf-login-content .copyright { + width: 450px; + text-align: center; + padding-top: 16px; + font-size: 12px; + opacity: 0.54; } + .adf-login-content .mat-input-container .adf-login-password-icon.mat-icon { + font-size: 24px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + position: relative; + top: -6px; + height: 20px; + opacity: 0.54; } + .adf-login-content .adf-login__field .mat-input-wrapper { + margin: 1em 0 0 0; + font-size: 16px; } + .adf-login-content .adf-login__field input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px white inset; } + .adf-login-content .adf-login-validation { + background-color: transparent; + color: #f44336; + font-size: 12px; } + .adf-login-content .adf-login-error { + color: #f44336; + position: absolute; + font-size: 12px; + margin-top: -12px; + display: block; } + .adf-login-content .adf-login-message { + color: blue; } + .adf-login-content .adf-full-width { + width: 100%; } + .adf-login-content .adf-login__remember-me { + padding-top: 22px; } + .adf-login-content .adf-login__remember-me .mat-checkbox-label { + opacity: 0.87; } + .adf-login-content .adf-login__field { + display: block; + margin-left: auto; + margin-right: auto; + padding-bottom: 18px; } + .adf-login-content .adf-login-action-container { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 23px; } adf-file-uploading-list-row:not(:first-child) { display: block; @@ -2830,11 +2786,11 @@ adf-file-uploading-list-row:not(:first-child) { min-width: 40px; height: 40px; } -.adf-userinfo-tab /deep/ .mat-tab-header { +.adf-userinfo-tab .mat-tab-header { align-self: center; width: 100%; } -.adf-userinfo-tab /deep/ .mat-tab-label { +.adf-userinfo-tab .mat-tab-label { flex: auto; font-weight: 500; font-size: 14px; @@ -2926,7 +2882,7 @@ adf-file-uploading-list-row:not(:first-child) { .adf-userinfo-detail { text-align: left; } -.adf-hide-tab /deep/ .mat-tab-label-active { +.adf-hide-tab .mat-tab-label-active { display: none !important; } @media only screen and (min-device-width: 480px) { @@ -2936,5 +2892,87 @@ adf-file-uploading-list-row:not(:first-child) { overflow: auto; padding: 0px; } } -.mat-menu-panel.adf-userinfo-menu /deep/ .mat-menu-content { +.mat-menu-panel.adf-userinfo-menu .mat-menu-content { padding: 0px; } + +.adf-search-button.mat-button { + border-radius: 50%; + height: 32px; + min-width: 20px; + width: 32px; + padding: 0; + overflow: hidden; + color: inherit; + line-height: normal; + border: none; } + +.adf-search-container { + display: flex; + align-items: center; } + .adf-search-container .search-field { + width: 260px; + padding-top: 6px; } + .adf-search-container .search-field .mat-input-container { + width: 100%; } + .adf-search-container .search-field .mat-input-underline .mat-input-ripple { + background-color: #424242; } + .adf-search-container .search-field .mat-input-element { + font-size: 16px; } + .adf-search-container .search-field .mat-input-infix { + padding: 0px; } + @media only screen and (max-width: 400px) { + .adf-search-container .search-field { + width: 200px; } } + @media only screen and (max-width: 320px) { + .adf-search-container .search-field { + width: 160px; } } + +.adf-search-form { + overflow: hidden; } + +.adf-active-search, .adf-valid-search { + display: block; } + +.adf-search-result { + position: absolute; + z-index: 5; + display: none; + color: white; + background-color: #424242; + margin: -21px 0px 0px 0px; + border: 1px solid #7b1fa2; + border-collapse: collapse; + white-space: nowrap; + font-size: 14px; } + .adf-search-result a { + color: white; + text-decoration: none; } + .adf-search-result table { + width: 300px; } + .adf-search-result tbody tr { + height: 32px; } + .adf-search-result tbody tr:hover { + background-color: rgba(255, 255, 255, 0.04); } + .adf-search-result td { + height: 32px; + padding: 8px; + text-align: left; + border-top: none; + border-bottom: none; } + .adf-search-result .highlight { + color: #4a148c; } + .adf-search-result .img-td { + width: 30px; } + .adf-search-result .truncate { + width: 240px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + @media screen and (max-width: 400px) { + .adf-search-result :host { + right: 0; } + .adf-search-result .truncate { + width: 200px; } } + +.adf-valid-search .adf-search-result { + display: block; } diff --git a/ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.html b/ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.html index c05055e54f..f2acac5f16 100644 --- a/ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.html +++ b/ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.html @@ -1,5 +1,5 @@ + class="full-width adf-search-result">
+ class="full-width adf-search-result">
@@ -33,7 +33,7 @@
+ class="full-width adf-search-result"> diff --git a/ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.scss b/ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.scss index 1dfb52fcff..059dde2f03 100644 --- a/ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.scss +++ b/ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.scss @@ -1,51 +1,78 @@ -:host { - position: absolute; - z-index: 5; - display: none; - color: #555; - margin: -21px 0px 0px 0px; -} -:host a { - color: #555; - text-decoration: none; -} -:host table { - width: 300px; -} -:host .mdl-data-table tbody tr { - height: 32px; -} -:host .mdl-data-table td { - height: 32px; - padding: 8px; - text-align: left; - border-top: none; - border-bottom: none; -} -:host.active.valid { - display: block; -} +@mixin mat-search-autocomplete-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $foreground: map-get($theme, foreground); + $background: map-get($theme, background); -.img-td{ - width: 30px; -} + .adf { -.truncate{ - width: 240px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} + &-search-result { + position: absolute; + z-index: 5; + display: none; + color: mat-color($foreground, text); + background-color: mat-color($background, card); + margin: -21px 0px 0px 0px; + border: 1px solid mat-color($primary); + border-collapse: collapse; + white-space: nowrap; + font-size: 14px; -:host /deep/ .highlight { - color: #33afdf; -} + a { + color: mat-color($foreground, text); + text-decoration: none; + } -@media screen and (max-width: 400px) { - :host { - right: 0; - } - .truncate{ - width: 200px; + table { + width: 300px; + } + + tbody tr { + height: 32px; + + &:hover { + background-color: mat-color($background, hover); + } + } + + td { + height: 32px; + padding: 8px; + text-align: left; + border-top: none; + border-bottom: none; + } + + .highlight { + color: mat-color($primary, 900); + } + + .img-td{ + width: 30px; + } + + .truncate{ + width: 240px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + @media screen and (max-width: 400px) { + :host { + right: 0; + } + .truncate{ + width: 200px; + } + } + } + + &-valid-search { + .adf-search-result { + display: block; + } + } } } diff --git a/ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.ts b/ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.ts index 4862ffcf31..e54a024ba9 100644 --- a/ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.ts +++ b/ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'; +import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild, ViewEncapsulation } from '@angular/core'; import { MinimalNodeEntity } from 'alfresco-js-api'; import { SearchOptions, SearchService } from 'ng2-alfresco-core'; import { ThumbnailService } from 'ng2-alfresco-core'; @@ -23,7 +23,8 @@ import { ThumbnailService } from 'ng2-alfresco-core'; @Component({ selector: 'adf-search-autocomplete, alfresco-search-autocomplete', templateUrl: './search-autocomplete.component.html', - styleUrls: ['./search-autocomplete.component.scss'] + styleUrls: ['./search-autocomplete.component.scss'], + encapsulation: ViewEncapsulation.None }) export class SearchAutocompleteComponent implements OnChanges { diff --git a/ng2-components/ng2-alfresco-search/src/components/search-control.component.html b/ng2-components/ng2-alfresco-search/src/components/search-control.component.html index ec26373420..af4839af9e 100644 --- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.html +++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.html @@ -1,25 +1,30 @@ - -
- -
- - + +
+ +
+ + + +
@@ -32,7 +37,8 @@ [resultSort]="liveSearchResultSort" [maxResults]="liveSearchMaxResults" [highlight]="highlight" - [ngClass]="{active: searchActive, valid: searchValid}" + [class.adf-active-search]="searchActive" + [class.adf-valid-search]="searchValid" (fileSelect)="onFileClicked($event)" (searchFocus)="onAutoCompleteFocus($event)" (scrollBack)="onAutoCompleteReturn($event)" diff --git a/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss b/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss index 62fe3cc8e1..c439ad8c65 100644 --- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss +++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss @@ -1,13 +1,64 @@ -.search-field { - width: 267px; -} -@media only screen and (max-width: 400px) { - .search-field { - width: 200px; +@mixin mat-search-control-theme($theme) { + $background: map-get($theme, background); + + .adf { + + &-search-button.mat-button { + border-radius: 50%; + height: 32px; + min-width: 20px; + width: 32px; + padding: 0; + overflow: hidden; + color: inherit; + line-height: normal; + border: none; + } + + &-search-container { + display: flex; + align-items: center; + + .search-field { + width: 260px; + padding-top: 6px; + + .mat-input-container { + width: 100%; + } + + .mat-input-underline .mat-input-ripple { + background-color: mat-color($background, card); + } + + .mat-input-element { + font-size: 16px; + } + } + + .search-field .mat-input-infix { + padding: 0px; + } + + @media only screen and (max-width: 400px) { + .search-field { + width: 200px; + } + } + @media only screen and (max-width: 320px) { + .search-field { + width: 160px; + } + } + } + + &-search-form{ + overflow: hidden; + } + + &-active-search, + &-valid-search { + display: block; + } } -} -@media only screen and (max-width: 320px) { - .search-field { - width: 160px; - } -} +} \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-search/src/components/search-control.component.spec.ts b/ng2-components/ng2-alfresco-search/src/components/search-control.component.spec.ts index 24afa17eae..1f05e9bf9f 100644 --- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.spec.ts +++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.spec.ts @@ -128,22 +128,6 @@ describe('SearchControlComponent', () => { fixture.detectChanges(); expect(element.querySelectorAll('input[type="text"]')[0].getAttribute('autocomplete')).toBe('on'); }); - - it('should show an expanding control by default', () => { - fixture.detectChanges(); - expect(element.querySelectorAll('div.mdl-textfield--expandable').length).toBe(1); - expect(element.querySelectorAll('div.mdl-textfield__expandable-holder').length).toBe(1); - expect(element.querySelectorAll('label.mdl-button--icon').length).toBe(1); - }); - - it('should show a normal non-expanding control when configured', () => { - fixture.detectChanges(); - fixture.componentInstance.expandable = false; - fixture.detectChanges(); - expect(element.querySelectorAll('div.mdl-textfield--expandable').length).toBe(0); - expect(element.querySelectorAll('div.mdl-textfield__expandable-holder').length).toBe(0); - expect(element.querySelectorAll('label.mdl-button--icon').length).toBe(0); - }); }); describe('Find as you type', () => { @@ -172,7 +156,7 @@ describe('SearchControlComponent', () => { window.setTimeout(() => { // wait for debounce() to complete fixture.detectChanges(); let autocomplete: Element = element.querySelector('adf-search-autocomplete'); - expect(autocomplete.classList.contains('active')).toBe(true); + expect(autocomplete.classList.contains('adf-active-search')).toBe(true); done(); }, 100); }); @@ -202,7 +186,7 @@ describe('SearchControlComponent', () => { window.setTimeout(() => { // wait for debounce() to complete fixture.detectChanges(); let autocomplete: Element = element.querySelector('adf-search-autocomplete'); - expect(autocomplete.classList.contains('active')).toBe(true); + expect(autocomplete.classList.contains('adf-active-search')).toBe(true); done(); }, 100); }); @@ -229,7 +213,7 @@ describe('SearchControlComponent', () => { })); fixture.detectChanges(); let autocomplete: Element = element.querySelector('adf-search-autocomplete'); - expect(autocomplete.classList.contains('active')).toBe(true); + expect(autocomplete.classList.contains('adf-active-search')).toBe(true); }); it('should select the first result in find-as-you-type when down arrow is pressed and FAYT is visible', (done) => { diff --git a/ng2-components/ng2-alfresco-search/src/components/search-control.component.ts b/ng2-components/ng2-alfresco-search/src/components/search-control.component.ts index 48cfafef88..2ae73ef164 100644 --- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.ts +++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.ts @@ -15,7 +15,8 @@ * limitations under the License. */ -import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core'; import { FormControl, Validators } from '@angular/forms'; import { Observable, Subject } from 'rxjs/Rx'; import { SearchTermValidator } from './../forms/search-term-validator'; @@ -24,7 +25,19 @@ import { SearchAutocompleteComponent } from './search-autocomplete.component'; @Component({ selector: 'adf-search-control, alfresco-search-control', templateUrl: './search-control.component.html', - styleUrls: ['./search-control.component.scss'] + styleUrls: ['./search-control.component.scss'], + animations: [ + trigger('transitionMessages', [ + state('active', style({ transform: 'translateX(0%)'})), + state('inactive', style({ transform: 'translateX(89%)'})), + transition('void => active, inactive => active', + animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')), + transition('active => inactive, void => inactive', + animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')) + ]) + ], + encapsulation: ViewEncapsulation.None + }) export class SearchControlComponent implements OnInit, OnDestroy { @@ -34,6 +47,8 @@ export class SearchControlComponent implements OnInit, OnDestroy { @Input() inputType = 'text'; +// style({ transform: 'translateX(0%)'}) style({ transform: 'translateX(89%)'}), + @Input() autocomplete: boolean = false; @@ -87,6 +102,8 @@ export class SearchControlComponent implements OnInit, OnDestroy { private focusSubject = new Subject(); + _subscriptAnimationState: string = 'inactive'; + constructor() { this.searchControl = new FormControl( this.searchTerm, @@ -132,14 +149,6 @@ export class SearchControlComponent implements OnInit, OnDestroy { }); } - getTextFieldClassName(): string { - return 'mdl-textfield mdl-js-textfield' + (this.expandable ? ' mdl-textfield--expandable' : ''); - } - - getTextFieldHolderClassName(): string { - return this.expandable ? 'search-field mdl-textfield__expandable-holder' : 'search-field'; - } - getAutoComplete(): string { return this.autocomplete ? 'on' : 'off'; } @@ -227,4 +236,9 @@ export class SearchControlComponent implements OnInit, OnDestroy { this.setAutoCompleteDisplayed(false); } + onClickSearch() { + this.searchActive = !this.searchActive; + this._subscriptAnimationState = this.searchActive ? 'active' : 'inactive'; + } + } diff --git a/ng2-components/ng2-alfresco-search/src/components/search.component.html b/ng2-components/ng2-alfresco-search/src/components/search.component.html index 175d1db7a2..d256453210 100644 --- a/ng2-components/ng2-alfresco-search/src/components/search.component.html +++ b/ng2-components/ng2-alfresco-search/src/components/search.component.html @@ -1,5 +1,5 @@
+ class="adf-data-table full-width">

{{ 'SEARCH.RESULTS.ERROR' | translate:{errorMessage: errorMessage} }}

{{ 'SEARCH.RESULTS.ERROR' | translate:{errorMessage: errorMessage} }}