Skip to content

Instantly share code, notes, and snippets.

@Dimls Dimls/Quick Buy
Created Mar 17, 2018

Embed
What would you like to do?
/*============================================================================
#Quick Buy
==============================================================================*/
.popup-quick-buy {
.wrapper {
padding: 0;
}
.mfp-content {
max-width: 1000px;
margin: 50px 0;
padding: 30px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.4);
.product-single {
background: #fff;
.product-form {
visibility: visible;
.qtydiv {
display: none !important;
}
}
}
.grid-uniform {
margin: 0 -5px;
display: flex;
flex-wrap: wrap;
.grid__item {
float: none;
width: 20%;
flex: 0 0 20%;
padding: 0 5px !important;
img {
width: 100%; height: auto;
}
}
}
.product-description.rte {
width: 100% !important;
}
.product-description-wrapper {
text-align: left !important;
}
.product-description.rte {
div {
text-align: left !important;
}
}
#AddToCart {
margin-left: 0;
margin-right: 0;
}
}
@media(max-width: 1023px){
.mfp-content {
margin: 0;
}
@media(max-width: 767px){
.selector-wrapper {
& + .selector-wrapper {
margin-top: 10px;
}
}
}
}
}
.grid__item {
.table {
&:hover {
.quick_buy_button {
visibility: visible;
}
}
.product-image {
position: relative;
}
.quick_buy_button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
width: auto;
transition: background-color .3s;
visibility: hidden;
}
}
}
/* overlay at start */
.mfp-fade.mfp-bg {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.