mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
79 lines
2.0 KiB
SCSS
79 lines
2.0 KiB
SCSS
@import "../../../styles/utilities";
|
|
.menuNavigationProductListDesktop{
|
|
@screen sm {
|
|
@apply hidden;
|
|
}
|
|
|
|
@screen xl {
|
|
@apply block;
|
|
}
|
|
}
|
|
.menuNavigationProductListMobile{
|
|
@apply relative transition-all duration-100;
|
|
&.isShow{
|
|
&::after{
|
|
content: "";
|
|
background: rgba(0, 0, 0, 0.5);
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
z-index: 99999999999;
|
|
}
|
|
}
|
|
.menuNavigationProductModal{
|
|
@apply transition-all duration-200;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
z-index: 999999999999;
|
|
transform: translateY(100%);
|
|
|
|
&.animation{
|
|
transform: translateY(0%)
|
|
}
|
|
.content{
|
|
@apply absolute w-full h-full;
|
|
margin-top: 3rem;
|
|
padding-top: 10rem ;
|
|
padding-bottom: 10rem;
|
|
background-color: white;
|
|
overflow-y: auto;
|
|
height: 96%;
|
|
bottom: 0;
|
|
border-radius: 2.4rem 2.4rem 0 0;
|
|
.head{
|
|
@apply flex justify-between fixed;
|
|
top:0;
|
|
left:0;
|
|
margin-top: 3rem;
|
|
border-radius: 2.4rem 2.4rem 0 0;
|
|
padding: 4rem 2rem 2rem 2rem;
|
|
width: 100%;
|
|
background-color: white;
|
|
z-index: 10000;
|
|
h3{
|
|
@apply heading-3 font-bold;
|
|
color:var(--text-base);
|
|
}
|
|
}
|
|
.foot{
|
|
@apply fixed;
|
|
bottom: 0;
|
|
left:0;
|
|
width: 100%;
|
|
background-color: white;
|
|
padding: 0 1rem 3rem 1rem;
|
|
|
|
}
|
|
button{
|
|
margin-top: 2rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
} |