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>
</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">
<ng-content select="[sidebar-menu-options]"></ng-content>
</div>

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

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