feat: navigator sidebar

This commit is contained in:
NGPixel
2017-12-31 01:20:38 -05:00
parent 8b30d31457
commit a4e0e6d35c
4 changed files with 186 additions and 26 deletions

View File

@@ -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;
}
}
}
}
}