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

Fix dropdown panel in viewer toolbar because of z-index (#3472)

Browse Source
This commit is contained in:
Popovics András
2018-06-12 16:58:13 +01:00
committed by Eugenio Romano
parent eda43aa9ae
commit 9221d1d0d0
2 changed files with 97 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell/src/app/app.component.scss
View File

@@ -1,7 +1,7 @@
router-outlet[name="overlay"] + * {
width: 100%;
height: 100%;
z-index: 999999;
z-index: 999;
position: absolute;
top: 0;
right: 0;

196
demo-shell/src/app/components/app-layout/app-layout.component.scss
View File

@@ -1,114 +1,110 @@
@mixin adf-app-layout-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$minimumAppWidth: 320px;
$toolbarHeight: 64px;
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$minimumAppWidth: 320px;
$toolbarHeight: 64px;
@media screen and ($mat-xsmall) {
app-search-bar {
width: 150px;
}
}
@media screen and ($mat-xsmall) {
app-search-bar {
width: 150px;
}
}
@media screen and (max-width: 350px) {
app-search-bar {
width: 100px;
}
}
.adf-app-layout-toolbar {
z-index: 1001;
position: relative;
overflow: visible !important;
}
.adf-menu {
padding-top: 55px;
}
.adf-app-layout {
display: flex;
flex: 1;
min-width: $minimumAppWidth;
height: 100%;
.adf-nav-container {
display: block;
min-width: $minimumAppWidth;
height: 100%;
}
.adf-sidenav-linklist {
height: 100%;
overflow: auto;
padding-bottom: 8px;
box-sizing: border-box;
}
.adf-sidenav-link {
&.active {
color: mat-color($primary);
}
.sidenav-menu-icon {
margin-right: 20px;
font-size: 14px;
}
.sidenav-menu-label {
font-size: 14px;
white-space: nowrap;
}
}
.mat-nav-list .mat-list-item.adf-sidenav-link {
height: 40px;
}
&-user-profile {
margin-right: 10px;
}
&-menu-spacer {
flex: 1 1 auto;
}
&-toolbar {
height: $toolbarHeight;
line-height: $toolbarHeight;
overflow: hidden;
mat-toolbar-row {
height: $toolbarHeight;
align-items: stretch;
justify-content: space-between;
}
.adf-toolbar-link {
min-width: 0;
line-height: $toolbarHeight;
&.active {
background-color: rgba(0, 0, 0, .12);
app-search-bar {
width: 100px;
}
}
}
}
@media screen and ($mat-small) {
.adf-userinfo-name {
display: none;
.adf-app-layout-toolbar {
z-index: 998;
position: relative;
overflow: visible !important;
}
.adf-menu {
padding-top: 0px;
padding-top: 55px;
}
}
@media screen and ($mat-xsmall) {
}
.adf-app-layout {
display: flex;
flex: 1;
min-width: $minimumAppWidth;
height: 100%;
.adf-nav-container {
display: block;
min-width: $minimumAppWidth;
height: 100%;
}
.adf-sidenav-linklist {
height: 100%;
overflow: auto;
padding-bottom: 8px;
box-sizing: border-box;
}
.adf-sidenav-link {
&.active {
color: mat-color($primary);
}
.sidenav-menu-icon {
margin-right: 20px;
font-size: 14px;
}
.sidenav-menu-label {
font-size: 14px;
white-space: nowrap;
}
}
.mat-nav-list .mat-list-item.adf-sidenav-link {
height: 40px;
}
&-user-profile {
margin-right: 10px;
}
&-menu-spacer {
flex: 1 1 auto;
}
&-toolbar {
height: $toolbarHeight;
line-height: $toolbarHeight;
overflow: hidden;
mat-toolbar-row {
height: $toolbarHeight;
align-items: stretch;
justify-content: space-between;
}
.adf-toolbar-link {
min-width: 0;
line-height: $toolbarHeight;
&.active {
background-color: rgba(0, 0, 0, 0.12);
}
}
}
}
@media screen and ($mat-small) {
.adf-userinfo-name {
display: none;
}
.adf-menu {
padding-top: 0px;
}
}
@media screen and ($mat-xsmall) {}
}