diff --git a/src/AddToCart.ts b/src/AddToCart.ts index 2e897b4..36dacdb 100644 --- a/src/AddToCart.ts +++ b/src/AddToCart.ts @@ -14,9 +14,9 @@ export class AddToCart extends LitElement { border: none; font-size: var(--font-size); margin: var(--margin-x); - display: flex; align-items: center; cursor: pointer; + display: inline-flex; } button { diff --git a/src/Cart.ts b/src/Cart.ts index 6a2b975..5325e5f 100644 --- a/src/Cart.ts +++ b/src/Cart.ts @@ -10,7 +10,6 @@ export class Cart extends LitElement { sharedStyles, css` :host { - width: 100%; } .cart { @@ -21,7 +20,11 @@ export class Cart extends LitElement { width: 100%; border: 1px solid var(--color-primary); padding: var(--padding-all-20); - border-radius: var(--br-medium);; + border-radius: var(--br-medium); + color:var(--text-light); + position: absolute; + right: 0px; + top: 5rem; } .product-wrapper { @@ -140,7 +143,6 @@ export class Cart extends LitElement { render() { return this.open ? html` -
Cart
${this.cart?.items?.map( item => html` diff --git a/src/CheckoutButton.ts b/src/CheckoutButton.ts index 1a06978..bffc88b 100644 --- a/src/CheckoutButton.ts +++ b/src/CheckoutButton.ts @@ -5,19 +5,26 @@ export class CheckoutButton extends LitElement { static styles = [ sharedStyles, css` - :host { - - } + :host { + background: var(--color-primary); + border-radius: var(--br-small); + padding: var(--btn-padding); + outline: none; + border: none; + font-size: var(--font-size); + color: var(--text-dark); + margin: var(--margin-x); + display: flex; + align-items: center; + cursor: pointer; + } + + button { + background: none; + outline: none; + border:none; + cursor: pointer; + } `]; connectedCallback() { diff --git a/src/utils/shared-styles.ts b/src/utils/shared-styles.ts index 95dcf24..6e303ee 100644 --- a/src/utils/shared-styles.ts +++ b/src/utils/shared-styles.ts @@ -21,10 +21,10 @@ export const sharedStyles = css` --font-size-md: 20px; --quantity-btn-w: 30px; } - //body { - // background: rgb(18, 18, 18); - // color:var(--text-light) - //} + body { + background: rgb(18, 18, 18); + color:var(--text-light) + } #demo { display: flex; flex-wrap: wrap;