leftmenu responsive ui

This commit is contained in:
Virginie Ky 2019-09-03 12:29:12 +02:00
parent 746d7e0ca5
commit a3e044da87

View File

@ -1,5 +1,5 @@
// Import // Import
@import "../../styles/variables/variables"; @import '../../styles/variables/variables';
.item { .item {
position: relative; position: relative;
@ -12,13 +12,14 @@
.plugin { .plugin {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 10px; left: calc(100% - 4px); top: 10px;
left: calc(100% - 4px);
display: inline-block; display: inline-block;
width: auto; width: auto;
height: 20px; height: 20px;
transition: right 1s ease-in-out; transition: right 1s ease-in-out;
span{ span {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
width: auto; width: auto;
@ -29,10 +30,10 @@
line-height: 20px; line-height: 20px;
background: #0097f7; background: #0097f7;
border-radius: 3px; border-radius: 3px;
transition: transform .3s ease-in-out; transition: transform 0.3s ease-in-out;
white-space: pre; white-space: pre;
&:hover{ &:hover {
transform: translateX(calc(-100% + 9px)); transform: translateX(calc(-100% + 9px));
} }
} }
@ -40,7 +41,8 @@
} }
.link { .link {
padding-top: .9rem; position: relative;
padding-top: 0.8rem;
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
padding-left: 1.6rem; padding-left: 1.6rem;
min-height: 3.6rem; min-height: 3.6rem;
@ -66,6 +68,15 @@
&:visited { &:visited {
color: $left-menu-link-color; color: $left-menu-link-color;
} }
span {
display: inline-block;
padding-right: 1rem;
padding-left: 2.6rem;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
.linkActive { .linkActive {
@ -74,7 +85,9 @@
} }
.linkIcon { .linkIcon {
position: relative; position: absolute;
top: calc(50% - 0.9rem + 0.6rem);
left: 1.6rem;
margin-right: 1.2rem; margin-right: 1.2rem;
font-size: 1.2rem; font-size: 1.2rem;
width: 1.4rem; width: 1.4rem;
@ -86,4 +99,6 @@
.linkLabel { .linkLabel {
display: inline-block; display: inline-block;
padding-right: 1rem; padding-right: 1rem;
padding-left: 2.6rem;
width: 100%;
} }