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