btcpayserver/BTCPayServer/wwwroot/pos/cart.css
d11n 64bd493996
POS: Unify item display (#5252)
Display unifications for static and cart view.
2023-08-11 15:37:43 +02:00

108 lines
2.1 KiB
CSS

#PosCart {
--sidebar-width: 480px;
}
#PosCart .public-page-wrap {
padding: 0 0 var(--btcpay-space-l);
}
#PosCart .offcanvas-backdrop {
top: var(--mobile-header-height);
transition-duration: var(--btcpay-transition-duration-fast);
}
.cart-toggle-btn {
--button-width: 40px;
--button-height: 40px;
--button-padding: 7px;
--icon-size: 1rem;
position: absolute;
top: calc(50% - var(--button-height) / 2);
right: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--button-width);
height: var(--button-height);
padding: var(--button-padding);
background: transparent;
border: none;
cursor: pointer;
outline: none;
}
header .cart-toggle-btn {
--icon-size: 32px;
}
.cart-toggle-btn .icon-pos-cart {
width: var(--icon-size);
height: var(--icon-size);
color: var(--btcpay-header-link);
}
.cart-toggle-btn:disabled svg {
color: var(--btcpay-body-text-muted);
}
.cart-toggle-btn:not(:disabled):hover svg {
color: var(--btcpay-header-link-accent);
}
#SearchTerm {
max-width: 47em;
margin: 0 auto;
}
#cart {
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 1045;
height: 100vh;
overflow-y: auto;
color: var(--btcpay-body-text);
background-color: var(--btcpay-bg-tile);
}
#cart .quantity .btn {
width: 2rem;
height: 2rem;
}
#cart .quantity .btn .icon{
--btn-icon-size: .75rem;
}
#CartBadge {
position: absolute;
top: 0;
right: 0;
min-width: 1.75em;
}
@media (max-width: 991px) {
#cart {
left: 0;
transform: translateX(100%);
transition: transform var(--btcpay-transition-duration-fast) ease-in-out;
}
#cart.show {
transform: none;
}
#CartClose {
color: var(--btcpay-body-text);
}
}
@media (min-width: 992px) {
#content {
margin-right: var(--sidebar-width);
}
#cart {
width: var(--sidebar-width);
border-left: 1px solid var(--btcpay-body-border-light);
}
.cart-toggle-btn {
display: none;
}
}