@nguyenmv2/buy-button
Version:
BuyButton.js allows merchants to build Shopify interfaces into any website
92 lines (81 loc) • 1.68 kB
CSS
.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%));
}
}