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
commit 2f08918ede
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 3 deletions

View File

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