diff --git a/src/app/ui/application.scss b/src/app/ui/application.scss index 4fe5b50a7..461c404ff 100644 --- a/src/app/ui/application.scss +++ b/src/app/ui/application.scss @@ -28,8 +28,4 @@ ng-component { @import './overrides/adf-sidenav-layout'; @import './overrides/alfresco-document-list'; @import './overrides/alfresco-upload-drag-area'; -@import './overrides/alfresco-upload-button'; @import './overrides/alfresco-upload-dialog'; -@import './overrides/toolbar'; -@import './overrides/_adf-sidebar-action-menu'; - diff --git a/src/app/ui/custom-theme.scss b/src/app/ui/custom-theme.scss index c1ce61c98..0a6b0020c 100644 --- a/src/app/ui/custom-theme.scss +++ b/src/app/ui/custom-theme.scss @@ -2,9 +2,11 @@ @import '~@alfresco/adf-content-services/theming'; @import '../components/sidenav/sidenav.component.theme'; -@import './overrides/toolbar'; +@import './overrides/adf-toolbar.theme'; @import './overrides/adf-search-filter.theme'; @import './overrides/adf-info-drawer.theme'; +@import './overrides/adf-upload-button.theme'; +@import './overrides/adf-sidebar-action-menu.theme'; @import 'snackbar'; $grey-scale: ( @@ -49,8 +51,10 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent); @mixin custom-theme($theme) { @include sidenav-component-theme($custom-theme); - @include toolbar-component-theme($custom-theme); + @include adf-toolbar-theme($custom-theme); @include snackbar-theme($custom-theme); @include adf-search-filter-theme($custom-theme); @include adf-info-drawer-theme($custom-theme); + @include adf-upload-button-theme($custom-theme); + @include adf-sidebar-action-menu-theme($custom-theme); } diff --git a/src/app/ui/overrides/_adf-sidebar-action-menu.scss b/src/app/ui/overrides/_adf-sidebar-action-menu.scss deleted file mode 100644 index 35dc19ae3..000000000 --- a/src/app/ui/overrides/_adf-sidebar-action-menu.scss +++ /dev/null @@ -1,39 +0,0 @@ -.adf-sidebar-action-menu-options div .mat-menu-item { - display: flex; - flex-direction: row; - align-items: center; -} - -.mat-menu-item[disabled], -.mat-menu-item[disabled]:hover { - color: rgba(0, 0, 0, 0.38); -} - -.mat-menu-panel.adf-sidebar-action-menu-panel { - max-width: 290px !important; -} - -.adf-sidebar-action-menu-panel { - width: 290px; - display: flex; - align-items: center; - justify-content: center; -} - -.adf-sidebar-action-menu-panel .mat-menu-content { - width: 100%; -} - -.adf-sidebar-action-menu-icon { - margin: 0; -} - -.adf-sidebar-action-menu-icon div[sidebar-menu-expand-icon] { - display: flex; - align-items: center; - justify-content: center; -} - -.adf-sidebar-action-menu { - width: 100%; -} diff --git a/src/app/ui/overrides/_alfresco-upload-button.scss b/src/app/ui/overrides/_alfresco-upload-button.scss deleted file mode 100644 index 896211be3..000000000 --- a/src/app/ui/overrides/_alfresco-upload-button.scss +++ /dev/null @@ -1,49 +0,0 @@ -@import '../_variables.scss'; - -adf-upload-button { - .mat-raised-button.mat-primary { - width: 100%; - border-radius: 0; - text-align: left; - line-height: 48px; - box-shadow: none; - transform: none; - transition: unset; - background-color: $alfresco-white; - } - - .mat-raised-button.mat-primary:hover:not([disabled]) { - background-color: rgba(0, 0, 0, 0.04); - } - - .mat-raised-button.mat-primary[disabled] { - background: none; - } - - .mat-raised-button.mat-primary[disabled] label { - color: rgba(0, 0, 0, 0.38); - } - - .mat-raised-button:not([disabled]):active { - box-shadow: none; - } - - mat-icon { - color: rgba(0, 0, 0, 0.54); - } - - label { - text-transform: capitalize; - font-family: Muli; - font-size: 16px; - font-weight: normal; - text-align: left; - margin-left: 12px; - color: $alfresco-primary-text-color; - } - - &:hover label { - color: #ff9800; - opacity: inherit; - } -} diff --git a/src/app/ui/overrides/adf-sidebar-action-menu.theme.scss b/src/app/ui/overrides/adf-sidebar-action-menu.theme.scss new file mode 100644 index 000000000..b245c1b02 --- /dev/null +++ b/src/app/ui/overrides/adf-sidebar-action-menu.theme.scss @@ -0,0 +1,70 @@ +@mixin adf-sidebar-action-menu-theme($theme) { + $foreground: map-get($theme, foreground); + $accent: map-get($theme, accent); + $primary: map-get($theme, primary); + + .adf-sidebar-action-menu { + .adf-sidebar-action-menu-button { + font-size: 12.7px; + font-weight: normal; + text-transform: uppercase; + } + } + + .mat-menu-panel.adf-sidebar-action-menu-panel { + max-width: 290px !important; + } + + .adf-sidebar-action-menu-panel { + width: 290px; + display: flex; + align-items: center; + justify-content: center; + } + + .adf-sidebar-action-menu-panel .mat-menu-content { + width: 100%; + } + + .adf-sidebar-action-menu-icon { + margin: 0; + } + + .adf-sidebar-action-menu-icon div[sidebar-menu-expand-icon] { + display: flex; + align-items: center; + justify-content: center; + } + + .adf-sidebar-action-menu { + width: 100%; + } + + .adf-sidebar-action-menu-options { + width: 100% !important; + + .mat-menu-item { + display: flex; + flex-direction: row; + align-items: center; + font-size: 14px; + color: mat-color($foreground, text, 0.54); + line-height: 48px; + box-shadow: none; + transform: none; + transition: unset; + font-weight: normal; + text-transform: capitalize; + color: mat-color($primary); + + &:hover { + color: mat-color($accent); + } + } + + .mat-menu-item[disabled], + .mat-menu-item[disabled]:hover { + color: mat-color($foreground, text, 0.38); + } + } +} diff --git a/src/app/ui/overrides/_toolbar.scss b/src/app/ui/overrides/adf-toolbar.theme.scss similarity index 89% rename from src/app/ui/overrides/_toolbar.scss rename to src/app/ui/overrides/adf-toolbar.theme.scss index 9a8c46193..b2fa28225 100644 --- a/src/app/ui/overrides/_toolbar.scss +++ b/src/app/ui/overrides/adf-toolbar.theme.scss @@ -1,4 +1,4 @@ -@mixin toolbar-component-theme($theme) { +@mixin adf-toolbar-theme($theme) { .adf-toolbar { @include angular-material-theme($theme); diff --git a/src/app/ui/overrides/adf-upload-button.theme.scss b/src/app/ui/overrides/adf-upload-button.theme.scss new file mode 100644 index 000000000..8ee04c650 --- /dev/null +++ b/src/app/ui/overrides/adf-upload-button.theme.scss @@ -0,0 +1,53 @@ +@mixin adf-upload-button-theme($theme) { + $foreground: map-get($theme, foreground); + $accent: map-get($theme, accent); + $primary: map-get($theme, primary); + + adf-upload-button { + .mat-raised-button.mat-primary { + width: 100%; + border-radius: 0; + text-align: left; + line-height: 48px; + box-shadow: none; + transform: none; + transition: unset; + background-color: transparent; + } + + .mat-raised-button.mat-primary:hover:not([disabled]) { + background-color: mat-color($foreground, text, 0.04); + } + + .mat-raised-button.mat-primary[disabled] { + background: none; + } + + .mat-raised-button.mat-primary[disabled] label { + color: mat-color($foreground, text, 0.38); + } + + .mat-raised-button:not([disabled]):active { + box-shadow: none; + } + + mat-icon { + color: mat-color($foreground, text, 0.54); + } + + label { + text-transform: capitalize; + font-family: Muli; + font-size: 14px; + font-weight: normal; + text-align: left; + margin-left: 12px; + color: mat-color($primary); + } + + &:hover label { + color: mat-color($accent); + opacity: inherit; + } + } +}