autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: left-menu - ellipsis on large and small screens

Browse Source
This commit is contained in:
gaelle morin 2020-06-03 15:33:10 +02:00
parent ec5326887e
commit 898144fa9a
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
1 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/styles/base/menu-left.scss
View File

@ -107,13 +107,20 @@
} }
.project-customer { .project-customer {
width: 100%;
@include breakpoint(lg) {
width: 150px; width: 150px;
} }
}
.project-name { .project-name {
display: block; display: block;
width: calc(150px - 10px); width: 100%;
/* 10px = padding of the sib-set-default = better alignment */
@include breakpoint(lg) {
width: 150px;
}
} }
} }
@ -222,8 +229,11 @@
display: flex; display: flex;
sib-display-div { sib-display-div {
flex: 3; flex: 3;
@include breakpoint(lg) {
max-width: 150px; max-width: 150px;
} }
}
hubl-counter { hubl-counter {
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -243,9 +253,11 @@
} }
sib-display-div { sib-display-div {
@include breakpoint(lg) {
max-width: 150px; max-width: 150px;
>div[name="name"] { >div[name='name'] {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -254,6 +266,7 @@
} }
} }
} }
}
.divider { .divider {
height: 1px; height: 1px;