diff --git a/src/CartToggle.ts b/src/CartToggle.ts index f34c2c3..667687f 100644 --- a/src/CartToggle.ts +++ b/src/CartToggle.ts @@ -7,51 +7,66 @@ export class CartToggle extends LitElement { static styles = [ sharedStyles, css` - :host { - outline: none; - border: none; - color: var(--text-dark); - margin: var(--margin-x); - display: flex; - align-items: flex-start; - cursor: pointer; - -webkit-tap-highlight-color: transparent; - position: relative; - min-width: 50px; - } + :host { + outline: none; + border: none; + color: var(--text-dark); + margin: var(--margin-x); + display: flex; + align-items: flex-start; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + position: relative; + min-width: 50px; + } - button { - width: 100%; - background: none; - height: 100%; - outline: none; - border:none; - cursor: pointer; - font-size: var(--font-size); - padding: var(--padding-y); - -webkit-tap-highlight-color: transparent; - } + button { + width: 100%; + background: none; + height: 100%; + outline: none; + border:none; + cursor: pointer; + font-size: var(--font-size); + padding: var(--padding-y); + -webkit-tap-highlight-color: transparent; + } - div { - position: absolute; - top: 0; - right: -10px; - width: 20px; - height: 20px; - background: var(--text-light); - color: var(--color-primary); - border-radius: var(--br-big); - display: flex; - align-items: center; - justify-content: center; - } + div { + position: absolute; + top: 0; + right: -10px; + width: 20px; + height: 20px; + background: var(--text-light); + color: var(--color-primary); + border-radius: var(--br-big); + display: flex; + align-items: center; + justify-content: center; + } img { height: 50px; } - `]; + + .nudge { + position: relative; + animation: nudge 0.5s infinite alternate; + } + + @keyframes nudge { + 0% { transform: translateX(-2px); } + 25% { transform: translateX(2px); } + 50% { transform: translateX(-2px); } + 75% { transform: translateX(2px); } + 100% { transform: translateX(0); } + } + `]; @property({ type: Boolean }) count = true; @state() cartItems = 0; + @state() nudge = false; + @state() disableInitialNudge = true; __toggle() { if (this.cartItems) { @@ -60,6 +75,13 @@ export class CartToggle extends LitElement { } __updateCount = (count: number) => { + if (!this.disableInitialNudge) { + this.nudge = true; + } else { + this.disableInitialNudge = false; + } + + setTimeout(() => this.nudge = false, 500); this.cartItems = count; } @@ -75,8 +97,7 @@ export class CartToggle extends LitElement { render() { return html` - - ${this.count ? this.cartItems && html`
${this.cartItems}
` : ''}