70 lines
1.9 KiB
CSS
70 lines
1.9 KiB
CSS
cl-cart[type=mini]{
|
|
--cl-cart-mini-backdrop-bg: #000;
|
|
--cl-cart-mini-backdrop-opacity: 0.4;
|
|
--cl-cart-mini-backdrop-shadow: -1px 0px 10px rgba(0, 0, 0, .3);
|
|
--cl-cart-mini-modal-z-index: 100;
|
|
--cl-cart-mini-modal-bg: #fff;
|
|
--cl-cart-mini-modal-width: 400px;
|
|
--cl-cart-mini-modal-max-width: calc(100vw - 40px);
|
|
--cl-cart-mini-transition-duration: .3s;
|
|
--cl-cart-mini-transition-timing-function: ease-in-out;
|
|
display:flex;
|
|
cursor:auto;
|
|
position:fixed;
|
|
z-index:var(--cl-cart-mini-modal-z-index);
|
|
top:0;
|
|
width:var(--cl-cart-mini-modal-width);
|
|
max-width:var(--cl-cart-mini-modal-max-width);
|
|
height:100%;
|
|
pointer-events:none;
|
|
box-sizing:border-box;
|
|
box-shadow:none;
|
|
transition:box-shadow var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
|
|
}
|
|
|
|
cl-cart[type=mini]::before,cl-cart[type=mini]::after{
|
|
position:fixed;
|
|
content:" ";
|
|
opacity:0;
|
|
width:100%;
|
|
height:100%;
|
|
top:0;
|
|
right:0;
|
|
z-index:-1;
|
|
transition:opacity var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
|
|
}
|
|
|
|
cl-cart[type=mini]::before{
|
|
background:var(--cl-cart-mini-backdrop-bg)
|
|
}
|
|
|
|
cl-cart[type=mini]::after{
|
|
position:fixed;
|
|
width:var(--cl-cart-mini-modal-width);
|
|
max-width:var(--cl-cart-mini-modal-max-width);
|
|
box-shadow:var(--cl-cart-mini-backdrop-shadow)
|
|
}
|
|
|
|
cl-cart[type=mini],cl-cart[type=mini]::after{
|
|
right:calc(var(--cl-cart-mini-modal-width)*-1 + 0px);
|
|
transition:right var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function),opacity var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
|
|
}
|
|
|
|
cl-cart[type=mini][open]:not([open=false]){
|
|
right:0;
|
|
pointer-events:initial
|
|
}
|
|
|
|
cl-cart[type=mini][open]:not([open=false])::before{
|
|
opacity:var(--cl-cart-mini-backdrop-opacity)
|
|
}
|
|
|
|
cl-cart[type=mini][open]:not([open=false])::after{
|
|
right:0;
|
|
opacity:1
|
|
}
|
|
|
|
body.cl-cart--open{
|
|
overflow:hidden
|
|
}
|