inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2174] Menus background color is not properly displayed in black themes (#2859)

Browse Source 
* [ADF-2174] Menus background color is not properly displayed in black themes

* Removed global mat-menu-panel class style overriding

* * Refactored styles

* * Changed opacity property to rgba so that injected coponents will not be affected

* Removed fixed menu width
This commit is contained in:
Deepak Paul
2018-01-23 21:41:33 +05:30
committed by Eugenio Romano
parent 441d1e648e
commit 2e27662eb2
2 changed files with 41 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/sidebar/sidebar-action-menu.component.html
View File

@@ -8,7 +8,7 @@
<ng-content select="[sidebar-menu-expand-icon]"></ng-content> <ng-content select="[sidebar-menu-expand-icon]"></ng-content>
</div> </div>
<mat-menu #adfSidebarMenu="matMenu" [overlapTrigger]="false" yPosition="below"> <mat-menu #adfSidebarMenu="matMenu" class="adf-sidebar-action-menu-panel" [overlapTrigger]="false" yPosition="below">
<div class="adf-sidebar-action-menu-options"> <div class="adf-sidebar-action-menu-options">
<ng-content select="[sidebar-menu-options]"></ng-content> <ng-content select="[sidebar-menu-options]"></ng-content>
</div> </div>

26
lib/core/sidebar/sidebar-action-menu.component.scss
View File

@@ -2,20 +2,18 @@
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$background: map-get($theme, background);
$adf-sidebar-action-menu-button-option-width: 205px;
$adf-sidebar-action-menu-button-height: 37.5px; $adf-sidebar-action-menu-button-height: 37.5px;
$adf-sidebar-action-menu-button-border-radius: 4px; $adf-sidebar-action-menu-button-border-radius: 4px;
$adf-sidebar-action-menu-opacity: 0.54; $adf-sidebar-action-menu-opacity: 0.54;
$adf-sidebar-action-menu-item-opacity: 0.87; $adf-sidebar-action-menu-item-opacity: 0.87;
$adf-sidebar-action-menu-item-line-spacing: -0.4px; $adf-sidebar-action-menu-item-line-spacing: -0.4px;
.adf { .adf {
&-sidebar-action-menu { &-sidebar-action-menu {
& .mat-raised-button { & .mat-raised-button {
width: 100%; width: 100%;
height: 37.5px; height: $adf-sidebar-action-menu-button-height;
font-weight: bold; font-weight: bold;
background-color: mat-color($primary); background-color: mat-color($primary);
color: mat-color($primary, default-contrast) !important; color: mat-color($primary, default-contrast) !important;
@@ -34,38 +32,30 @@
} }
&-sidebar-action-menu-icon { &-sidebar-action-menu-icon {
margin: 18px 0px 0px 20px; margin: 18px 0px 0px 20px;
opacity: $adf-sidebar-action-menu-opacity; color: mat-color($foreground, text, $adf-sidebar-action-menu-opacity);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: mat-color($primary); color: mat-color($primary);
opacity: inherit;
} }
} }
&-sidebar-action-menu-options { &-sidebar-action-menu-options {
width: $adf-sidebar-action-menu-button-option-width;
opacity: 0.87;
text-align: left; text-align: left;
letter-spacing: -0.4px; letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
color: #000000;
.mat-menu-item { .mat-menu-item {
width: $adf-sidebar-action-menu-button-option-width; color: mat-color($foreground, text, $adf-sidebar-action-menu-item-opacity);
opacity: $adf-sidebar-action-menu-item-opacity;
text-align: left; text-align: left;
line-height: 1.5; line-height: 1.5;
letter-spacing: $adf-sidebar-action-menu-item-line-spacing; letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
color: #000000;
} }
.mat-menu-item:hover { .mat-menu-item:hover {
color: mat-color($primary); color: mat-color($primary);
opacity: inherit; opacity: inherit;
} }
} }
} &-sidebar-action-menu-panel {
.mat-menu-panel {
margin-top: 7.5px; margin-top: 7.5px;
border-radius: 2px; border-radius: 2px;
background-color: mat-color($primary, default-contrast) !important;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.26), 0 0 8px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.26), 0 0 8px 0 rgba(0, 0, 0, 0.12);
} }
}
} }