You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
wiki/client/scss/components/navigator.scss

292 lines
5.9 KiB

.navigator {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
&-bar {
display: flex;
justify-content: flex-start;
align-items: stretch;
background-color: rgba(mc('grey', '900'), .7);
}
&-fab {
&-button {
width: 50px;
height: 50px;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all .4s ease;
svg use {
transition: all .4s ease;
}
&:hover {
svg use {
color: mc('blue', '500');
fill: mc('blue', '500');
}
}
}
}
&-title {
background-image: linear-gradient(to bottom right, mc('blue', '500') 0%, mc('blue', '700') 50%, mc('blue', '900') 100%);
background-size: 200%;
background-repeat: no-repeat;
padding: 0 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .4s ease;
cursor: pointer;
&:hover {
background-position-y: -50px;
}
h1 {
font-size: 1.2rem;
color: #FFF;
font-weight: 500;
}
}
&-subtitle {
background-repeat: no-repeat;
background-position-x: -100vw;
color: #FFF;
flex: 1 1 auto;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 1rem;
transition: background-position-x 1s ease;
&.is-error {
background-image: linear-gradient(to right, rgba(mc('red', '500'), 1), rgba(mc('red', '500'), 0));
}
&.is-warning {
background-image: linear-gradient(to right, rgba(mc('orange', '500'), 1), rgba(mc('orange', '500'), 0));
}
&.is-success {
background-image: linear-gradient(to right, rgba(mc('green', '500'), 1), rgba(mc('green', '500'), 0));
}
&.is-info {
background-image: linear-gradient(to right, rgba(mc('blue', '500'), 1), rgba(mc('blue', '500'), 0));
}
&.is-active {
background-position-x: 0;
}
svg {
margin-right: .5rem;
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;
fill: #FFF;
stroke: #FFF;
transition: all .4s ease;
}
}
h2 {
font-size: 1rem;
font-weight: 400;
}
}
&-action {
display: flex;
justify-content: flex-end;
align-items: stretch;
position: relative;
&-item {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
cursor: pointer;
transition: all .4s ease;
svg use {
color: #FFF;
fill: #FFF;
transition: all .4s ease;
}
&:hover {
svg use {
color: mc('blue', '500');
fill: mc('blue', '500');
}
}
&.is-active {
background-color: #FFF;
svg use {
color: mc('grey', '500');
fill: mc('grey', '500');
}
}
&-dropdown {
position: absolute;
right: 0;
top: 100%;
width: 250px;
border-radius: 0 0 0 5px;
transition: all .4s ease;
transform-origin: top right;
&-enter-active, &-leave-active {
transform: scale(1);
}
&-enter, &-leave-to {
transform: scale(.1, 0);
}
li {
background-color: #FFF;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .8rem 0 1rem;
& + li {
border-top: 1px solid mc('grey', '100');
}
&:hover {
background-color: mc('grey', '100');
}
label {
font-size: .8rem;
font-weight: 600;
color: mc('blue', '800');
text-transform: uppercase;
}
&:last-child {
border-radius: 0 0 0 5px;
}
}
}
}
}
&-sd {
width: 350px;
background-color: #FFF;
border-radius: 0 0 5px 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;
}
}
}
&-search {
position: relative;
input {
display: block;
width: 100%;
padding: 0 3rem 0 1rem;
height: 40px;
border: 0;
font-size: .9rem;
color: mc('grey', '700');
position: relative;
&:focus {
outline: none;
border: 0;
}
}
&::after {
content: " ";
@include spinner(mc('blue', '200'),0.5s,18px);
position: absolute;
display: block;
top: 11px;
right: 1rem;
}
}
&-footer {
background-color: mc('blue-grey', '100');
border-top: 5px solid mc('blue-grey', '200');
border-radius: 0 0 5px 0;
display: flex;
justify-content: center;
a {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
transition: all .4s ease;
&:hover {
background-color: mc('blue-grey', '200');
}
}
}
}
}