feat: navigator sidebar
This commit is contained in:
@@ -88,7 +88,22 @@
|
||||
|
||||
svg {
|
||||
margin-right: .5rem;
|
||||
animation: flash 1s linear;
|
||||
animation: flash 1s linear 1s;
|
||||
|
||||
&.navigator-subtitle-icon {
|
||||
transition: all 1s ease;
|
||||
|
||||
&-enter-active, &-leave-active {
|
||||
transform: scale(1);
|
||||
width: 24px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
&-enter, &-leave-to {
|
||||
transform: scale(0);
|
||||
width: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
use {
|
||||
color: #FFF;
|
||||
@@ -130,4 +145,83 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-sd {
|
||||
width: 350px;
|
||||
background-color: #FFF;
|
||||
border-radius: 0 0 5px 0;
|
||||
padding: 0 0 1rem 0;
|
||||
transition: all .4s ease;
|
||||
transform-origin: top left;
|
||||
|
||||
&-enter-active, &-leave-active {
|
||||
transform: scale(1);
|
||||
}
|
||||
&-enter, &-leave-to {
|
||||
transform: scale(.1, 0);
|
||||
}
|
||||
|
||||
&-actions {
|
||||
background-color: mc('blue-grey', '50');
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transition: all .4s ease;
|
||||
|
||||
&.is-active {
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
svg {
|
||||
use {
|
||||
color: mc('blue-grey', '500');
|
||||
fill: mc('blue-grey', '500');
|
||||
transition: all .4s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-search {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0 1rem 0 1rem;
|
||||
height: 40px;
|
||||
border: 0;
|
||||
font-size: .9rem;
|
||||
color: mc('grey', '700');
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 9px;
|
||||
left: 15px;
|
||||
|
||||
use {
|
||||
color: mc('grey', '500');
|
||||
fill: mc('grey', '500');
|
||||
transition: all .4s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user