.navigation__checkbox {
display: none;
}
.navigation{
position: relative;
width: 100%;
}
.navigation__button {
background-color: #fff;
height: 4rem;
width: 4rem;
position: fixed;
top: 1rem;
right: 1.5rem;
border-radius: 50%;
z-index: 2000;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
text-align: center;
cursor: pointer;
}
.navigation__background {
height: 100%;
width: 400px;
/* border-radius: 50%; */
position: fixed;
top: 0;
right: -400px;
background-image: radial-gradient(#03A9F4, #03A9F4);
z-index: 1000;
transition:right 0.3s linear;
}
.navigation__nav {
height: 100vh;
position: fixed;
top: 0;
right: -430px;
overflow-y: scroll;
z-index: 1500;
opacity: 0;
width: 0;
}
.navigation__list {
margin: 0;
list-style: none;
padding: 20px 0px;
position: relative;
}
.navigation__item {
margin: 1rem;
}
.navigation__link:link, .navigation__link:visited {
display: inline-block;
position: relative;
font-size: 2rem;
font-weight: 300;
padding: 1rem 4rem;
color: #fff;
text-decoration: none;
text-transform: uppercase;
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
background-size: 220%;
transition: all 0.4s;
}
.navigation__link:link span, .navigation__link:visited span {
margin-right: 1.5rem;
display: inline-block;
position: absolute;
left: 20px;
}
.navigation__link:hover, .navigation__link:active {
background-position: 100%;
color: #90CAF9;
transform: translateX(1rem);
}
.navigation__nav.active .navigation__background {
right: 0px;
}
.pseudo-search {
margin-left: 40px;
display: inline;
background-color: #fff;
border-radius: 100px;
padding: 10px 15px;
transition: background-color 0.5 ease-in-out;
}
.pseudo-search input {
border: 0;
font-size: 1rem;
background-color: transparent;
width: 200px;
}
.pseudo-search input:focus {
outline: none;
}
.pseudo-search button,
.pseudo-search i {
border: none;
background: none;
cursor: pointer;
}
.pseudo-search select {
border: none;
}
.navigation__nav.active {
opacity: 1;
width: 430px;
right: 0px;
background-image: radial-gradient(#03A9F4, #03A9F4);
padding-top: 120px;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.navigation__icon {
position: relative;
margin-top: 32px;
}
.navigation__icon, .navigation__icon::before, .navigation__icon::after {
width: 2rem;
height: 3px;
background-color: #B0BEC5;
display: inline-block;
}
.navigation__icon::before, .navigation__icon::after {
content: "";
position: absolute;
left: 0;
transition: all 0.2s;
}
.navigation__icon::before {
top: -0.5rem;
}
.navigation__icon::after {
top: 0.5rem;
}
.navigation__button:hover .navigation__icon::before {
top: -0.8rem;
}
.navigation__button:hover .navigation__icon::after {
top: 0.8rem;
}
.navigation__button.active .navigation__icon {
background-color: transparent;
}
.navigation__button.active .navigation__icon::before {
top: 0;
transform: rotate(135deg);
}
.navigation__button.active .navigation__icon::after {
top: 0;
transform: rotate(-135deg);
}
@media (max-width: 768px){
.navigation__nav.active{
width: 100%;
overflow: scroll;
}
.pseudo-search {
margin-left: 40px;
}
.navigation__background {
right: -100%;
width: 100%;
}
.navigation__list {
padding: 0;
padding-top: 20px;
}
.navigation__checkbox:checked ~ .navigation__nav {
width: 100%;
}
}