UNPKG

@nguyenmv2/buy-button

Version:

BuyButton.js allows merchants to build Shopify interfaces into any website

92 lines (81 loc) 1.68 kB
.shopify-buy__btn { color: #fff; font-size: 15px; background-color: var(--color-primary); padding: 12px 40px; letter-spacing: .3px; display: block; border-radius: 3px; cursor: pointer; transition: background 200ms ease; max-width: 100%; text-overflow: ellipsis; overflow: hidden; line-height: 1.2; border: 0; -moz-appearance: none; -webkit-appearance: none; &:hover, &:focus { background-color: var(--color-primary-hover); } } .shopify-buy__btn--parent { background-color: transparent; border: 0; padding: 0; cursor: pointer; &:hover, &:focus { & .product__variant-img { opacity: .7; } } } .shopify-buy__btn--cart-tab { padding: 5px 11px; border-radius: 3px 0 0 3px; position: fixed; right: 0; top: 50%; transform: translate(100%, -50%); opacity: 0; min-width: inherit; width: auto; height: auto; z-index: var(--max-z-index); &.is-active { transform: translateY(-50%); opacity: 1; } } .shopify-buy__btn__counter { display: block; margin: 0 auto 10px auto; font-size: 18px; } .shopify-buy__icon-cart--side { height: 20px; width: 20px; } .shopify-buy__btn[disabled] { background-color: #999; pointer-events: none; } .shopify-buy__btn--close { position: absolute; right: 9px; top: 8px; font-size: 35px; color: var(--color-cart-title); border: none; background-color: transparent; transition: transform 100ms ease, color 100ms ease; cursor: pointer; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding-right: 9px; &:hover { transform: scale(1.2); color: color-mod(var(--color-cart-title) lightness(-5%)); } }