mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #12559 from nextcloud/heading-menu-spacing 

Better header navigation display
This commit is contained in:
Morris Jobke 2018-11-22 10:13:59 +01:00 committed by GitHub
parent 745ceff67a 28afcaad03
commit bebdb19ac2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
core/css/header.scss
View File

@ -461,6 +461,9 @@ nav[role='navigation'] {
li {
position: relative;
cursor: pointer;
margin: 0 2px;
display: flex;
justify-content: center;
a {
position: relative;
@ -472,6 +475,59 @@ nav[role='navigation'] {
justify-content: center;
opacity: .6;
}
/* focused app visual feedback */
&:hover a,
a:focus,
a.active {
opacity: 1;
}
&:hover a + span,
a:focus + span,
&:hover span,
&:focus span,
a:focus span {
display: inline-block;
text-overflow: initial;
width: auto;
overflow: hidden;
background-color: var(--color-primary-element);
padding: 0 5px;
}
/* hidden apps menu */
img,
.icon-more-white {
display: inline-block;
width: 20px;
height: 20px;
}
/* App title */
span {
opacity: 0;
position: absolute;
color: var(--color-primary-text);
bottom: -5px;
width: calc(100% - 4px);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
transition: all var(--animation-quick) ease;
}
/* Set up transitions for showing app titles on hover */
/* App icon */
svg,
.icon-more-white {
transition: transform var(--animation-quick) ease;
}
/* Triangle */
a::before {
transition: border var(--animation-quick) ease;
}
}
.app-loading {
@ -485,68 +541,6 @@ nav[role='navigation'] {
}
}
/* focused app visual feedback */
li:hover a,
li a:focus,
li a.active {
opacity: 1;
}
li:hover a,
li a:focus {
+ span {
display: inline-block;
}
}
li:hover span,
li:focus span,
li a:focus span {
display: inline-block;
}
/* hidden apps menu */
li img,
.icon-more-white {
display: inline-block;
width: 20px;
height: 20px;
}
/* App title */
li span {
opacity: 0;
position: absolute;
color: var(--color-primary-text);
bottom: -5px;
width: 100%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
/* Set up transitions for showing app titles on hover */
li {
/* Prevent flicker effect because of low-hanging span element */
overflow-y: hidden;
/* App icon */
svg,
.icon-more-white {
transition: transform var(--animation-quick) ease;
}
/* App title */
span {
transition: all var(--animation-quick) ease;
}
/* Triangle */
a::before {
transition: border var(--animation-quick) ease;
}
}
/* Show all app titles on hovering app menu area */
&:hover {