feat(cart): update cart layout styles for improved responsiveness and structure
This commit is contained in:
@@ -21,6 +21,8 @@
|
|||||||
|
|
||||||
.store-layout__cart-dropdown {
|
.store-layout__cart-dropdown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
top: 100px;
|
top: 100px;
|
||||||
right: calc((100% - 1320px) / 2 + 1.5rem);
|
right: calc((100% - 1320px) / 2 + 1.5rem);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -34,6 +36,10 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
animation: store-layout-slide-down 0.2s ease-out;
|
animation: store-layout-slide-down 0.2s ease-out;
|
||||||
|
|
||||||
|
> app-cart {
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
@media (max-width: 1400px) {
|
||||||
right: 1.5rem;
|
right: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<section
|
<section
|
||||||
class="d-flex flex-column h-100 overflow-hidden text-secondary"
|
class="d-flex flex-column overflow-hidden text-secondary cart-shell"
|
||||||
[style.background-color]="backgroundColor()"
|
[style.background-color]="backgroundColor()"
|
||||||
>
|
>
|
||||||
<header class="d-flex align-items-center p-3 justify-content-between bg-transparent cart-header">
|
<header class="d-flex align-items-center p-3 justify-content-between bg-transparent cart-header">
|
||||||
|
|||||||
@@ -1,7 +1,15 @@
|
|||||||
:host {
|
:host {
|
||||||
display: block;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
min-height: 0;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-shell {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
min-height: 0;
|
||||||
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-header {
|
.cart-header {
|
||||||
|
|||||||
Reference in New Issue
Block a user