Samuele Locatelli
110 lines
2.3 KiB
CSS
110 lines
2.3 KiB
CSS
.btn-toggle {
|
|
--y: 0;
|
|
--z: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: linear-gradient(to top, #3f4c6b, #606c88);
|
|
padding: 0.75rem 3rem;
|
|
border-radius: 1.5rem 1.5rem 0 0;
|
|
border: none;
|
|
box-shadow: 0 2px 40px -10px #000;
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
left: 50%;
|
|
transform: translate3d(var(--x), var(--y), var(--z));
|
|
cursor: pointer;
|
|
z-index: 105;
|
|
}
|
|
.btn-show {
|
|
--x: -50%;
|
|
--y: 0;
|
|
--z: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: linear-gradient(to top, #3f4c6b, #606c88);
|
|
padding: 0.75rem 3rem;
|
|
border-radius: 1.5rem 1.5rem 0 0;
|
|
border: none;
|
|
box-shadow: 0 2px 40px -10px #000;
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
left: 50%;
|
|
transform: translate3d(var(--x), var(--y), var(--z));
|
|
cursor: pointer;
|
|
z-index: 105;
|
|
position: fixed;
|
|
bottom: 0rem;
|
|
}
|
|
.btn-hide {
|
|
--y: 0;
|
|
--z: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: linear-gradient(to top, #3f4c6b, #606c88);
|
|
padding: 0.75rem 3rem;
|
|
border-radius: 1.5rem 1.5rem 0 0;
|
|
border: none;
|
|
box-shadow: 0 2px 40px -10px #000;
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
left: 50%;
|
|
transform: translate3d(var(--x), var(--y), var(--z));
|
|
cursor: pointer;
|
|
z-index: 105;
|
|
}
|
|
.menuArea {
|
|
position: fixed;
|
|
bottom: 0;
|
|
animation-name: menuShow;
|
|
animation-duration: 0.8s;
|
|
}
|
|
.tagOnly {
|
|
animation-name: menuHide;
|
|
animation-duration: 0.2s;
|
|
}
|
|
.choiceArea {
|
|
border-radius: 1.5rem 1.5rem 0 0;
|
|
padding: 0.2rem 0.4rem 0.2rem 0.4rem;
|
|
box-shadow: 0px -9px 50px -30px black;
|
|
transition: height 200ms ease-in-out 400ms, opacity 700ms;
|
|
background: linear-gradient(to bottom, #606c88, #3f4c6b);
|
|
}
|
|
.rapid-buttons {
|
|
display: flex;
|
|
padding: 0.4rem 0.2rem;
|
|
justify-content: center;
|
|
}
|
|
.rapid-buttons a {
|
|
flex: 1 1 30%;
|
|
padding: 1.5rem;
|
|
margin: 5px;
|
|
border-radius: 8px;
|
|
background: #d1d1d1;
|
|
color: var(--color);
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
@keyframes menuShow {
|
|
0% {
|
|
opacity: 0.6;
|
|
transform: translateY(8rem);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes menuHide {
|
|
0% {
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
/*transform: rotateY(180deg);*/
|
|
}
|
|
} |