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

Merge pull request #22924 from nextcloud/design/fix-appname-display 

Make sure most app names don’t ellipsize, fix #22845, fix #22219
This commit is contained in:
Morris Jobke 2020-09-18 18:16:53 +02:00 committed by GitHub
parent c364b0cb19 b9807e0633
commit 2f08918ede
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
core/css/header.scss
View File

@ -433,7 +433,7 @@ nav[role='navigation'] {
li { li {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
margin: 0 2px; padding: 0 2px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -446,6 +446,9 @@ nav[role='navigation'] {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: .6; opacity: .6;
// Make sure most app names don’t ellipsize
letter-spacing: -0.5px;
font-size: 12px;
} }
/* focused app visual feedback */ /* focused app visual feedback */
@ -453,19 +456,28 @@ nav[role='navigation'] {
a:focus, a:focus,
a.active { a.active {
opacity: 1; opacity: 1;
font-weight: bold;
}
// Text size back to normal for hover/focus
&:hover a,
a:focus {
font-size: 14px;
} }
&:hover a + span, &:hover a + span,
a:focus + span, a:focus + span,
&:hover span, &:hover span,
&:focus span, &:focus span,
a:focus span { a:focus span,
a.active span {
display: inline-block; display: inline-block;
text-overflow: initial; text-overflow: initial;
width: auto; width: auto;
overflow: hidden; overflow: hidden;
padding: 0 5px; padding: 0 5px;
z-index: 2; z-index: 2;
margin-bottom: -1px; // for vertical alignment
} }
/* hidden apps menu */ /* hidden apps menu */
@ -482,7 +494,7 @@ nav[role='navigation'] {
position: absolute; position: absolute;
color: var(--color-primary-text); color: var(--color-primary-text);
bottom: 2px; bottom: 2px;
width: calc(100% - 4px); width: 100%;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;