Skip to content

Instantly share code, notes, and snippets.

@jacopo-nosto

jacopo-nosto/.html Secret

Created October 7, 2016 12:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jacopo-nosto/0a06c561e0b4caf8c85322012dcd6031 to your computer and use it in GitHub Desktop.
Save jacopo-nosto/0a06c561e0b4caf8c85322012dcd6031 to your computer and use it in GitHub Desktop.
Download ZIP
40/60 popup template
Raw
.html
#*
Following classes and IDs need to be present for the
pop-up to function properly.
IDs name | Description
---------------------------
NostoPopUp | Identifies the pop-up
NostoPopUpWrapper | Identifies the wrapper for content
NostoPopUpContent | Identifies the container element for the pop-up content
nostoOverlaySend | Identifies the call to action button
nostoCouponCopyBtn | Identifies copy to clip-board button
nostoContinueBtn | Identifies continue shopping button
NostoRibbon | Identifies a ribbon for the pop-up
NostoRibbonContent | Identifies a container for the ribbon content
Class names | Description
---------------------------
.NostoOverlayClose | Defines the pop-up close button element
.NostoRibbonPopUp | The element inside the ribbon to open the pop-up
.NostoRibbonClose | Defines the ribbon close element
.NostoOverlayClosePermanently | Defines the close permanently element
.NostoThankYou | Defines the message element that will be displayed after email
| is submitted when no coupons are in use
You can access the customer's cart with the following variables:
Variable name | Description
---------------------------------------------------
$cartTotalSize | The number of products in the cart
$cartTotalValue | The total value of products in cart
*#
<style>
@import 'https://fonts.googleapis.com/css?family=Fjalla+One';
#NostoPopUp * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
outline: none !important;
}
#NostoPopUp {
position: fixed !important;
top: 0px !important;
left: 0px !important;
width: 100% !important;
height: 100% !important;
padding: 30px !important;
padding-top: 7% !important;
z-index: 99999 !important;
display: none;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
#if($props.style.textFont && $props.style.textFont != '')
font-family: $props.style.textFont !important;
#else
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif !important;
#end
overflow-y: auto !important;
}
#NostoPopUp #NostoPopUpWrapper {
max-width: 790px !important;
margin: 0 auto !important;
text-align: center !important;
background: transparent !important;
}
#NostoPopUp #NostoPopUpContent {
position: relative !important;
#if($props.style.popupTextColor && $props.style.popupTextColor != '')
color: $props.style.popupTextColor !important;
#end
text-align: center !important;
padding: 60px 25px 100px 363px !important;
background-position-x: -60px !important;
z-index: 999999 !important;
background: url(http://praetexto.com/wp-content/uploads/2016/04/fashion-tips-to-look-slimmer-vertical-stripes-outfit.jpg) no-repeat left center #ffffff;
background-size: contain;
border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
-ms-border-radius: 10px !important;
box-shadow: 0 5px 10px rgba(0,0,0,0.2) !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#NostoPopUp .NostoCloseButton {
position: absolute !important;
right: -20px !important;
top: -20px !important;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
#if($props.config.closeButtonBorder)
border: 3px solid rgba(255, 255, 255, 1) !important;
line-height: 40px !important;
#else
border: 0 !important;
line-height: 46px !important;
#end
font-size: 19px !important;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif !important;
color: white !important;
background: black !important;
padding: 0px !important;
margin: 0px !important;
width: 46px !important;
height: 46px !important;
outline: none !important;
cursor: pointer !important;
text-decoration: none !important;
text-align: center !important;
}
#NostoPopUp .NostoTitle {
font-family: 'Fjalla One', sans-serif;
font-size: 74px;
font-weight: 400 !important;
padding-top: 20px !important;
padding-bottom: 10px !important;
line-height: 90px;
text-transform: uppercase;
color: #B5995A;
}
#NostoPopUp .NostoThankYou {
color: black !important;
#if($props.style.textFont && $props.style.textFont != '')
font-family: $props.style.titleFont !important;
#else
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
#end
font-size: 30px !important;
padding-top: 25px !important;
padding-bottom: 25px !important;
}
#NostoPopUp .NostoSubTitle {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
font-size: 30px;
font-weight: 200;
opacity: 0.7 !important;
padding: 0 45px;
}
#NostoPopUp .NostoDescription {
margin: 30px auto 30px auto !important;
font-family: 'Lato', sans-serif;
font-size: 25px !important;
font-weight: 300 !important;
color: #000000 !important;
letter-spacing: 1px;
}
#NostoPopUp .NostoTack {
margin: 30px auto 30px auto !important;
font-family: 'Lato', sans-serif;
font-size: 30px !important;
display: none;
line-height: 30px !important;
font-weight: 300 !important;
color: #000000 !important;
letter-spacing: 1px;
}
#NostoPopUp .NostoInputText {
font-family: 'Lato', sans-serif;
display: block;
#if ($props.style.popupTextColor && $props.style.popupTextColor != '')
color: $props.style.popupTextColor !important;
#end
font-size: 20px !important;
font-weight: 400 !important;
padding: 20px 0 !important;
margin: 0 auto !important;
vertical-align: top !important;
margin-bottom: 20px !important;
border-radius: 5px !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-ms-border-radius: 5px !important;
line-height: 20px !important;
letter-spacing: 1px !important;
width: 315px;
text-align: center !important;
}
#NostoPopUp .NostoCheckboxWrap {
padding-top: 10px;
margin: 0 auto;
}
#NostoPopUp .NostoCheckbox {
display: inline-block;
float: left;
margin: 15px 0 20px;
}
#NostoPopUp .NostoCheckboxText {
#if($props.style.textFont && $props.style.textFont != '')
font-family: $props.style.textFont !important;
#else
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
#end
opacity: 0.5 !important;
line-height: 22px !important;
font-size: 16px !important;
font-weight: normal;
}
#NostoPopUp .LogosContainer{
width: 100%;
display: block;
padding: 0 30px;
position: absolute;
bottom: 0;
border-top: 1px solid #e3e3e3;
}
#NostoPopUp .LogosContainer span{
float: left;
display: block;
background-size: contain;
font-family: 'Lato', sans-serif;
font-size: 10px;
color: #4a4a4a;
}
#NostoPopUp .NostoInputButton {
font-family: 'Lato', sans-serif;
height: 69px;
display: inline-block;
color: #B5995A !important;
background: #000 !important;
font-size: 16px !important;
text-transform: uppercase !important;
padding: 20px 0;
border: none !important;
margin: 0 auto !important;
vertical-align: top !important;
cursor: pointer !important;
line-height: 20px !important;
letter-spacing: 1px !important;
width: 315px;
text-align: center !important;
#if($props.style.buttonTextColor && ($props.style.buttonTextColor != ''))
color: $props.style.buttonTextColor !important;
#end
position: relative !important;
z-index: 10 !important;
}
#NostoPopUp .NostoClosePermanentlyText {
#if($props.style.textFont && $props.style.textFont != '')
font-family: $props.style.textFont !important;
#else
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
#end
font-weight: 300 !important;
color: #ffffff;
margin: 15px 0 !important;
opacity: 0.8 !important;
font-size: 14px !important;
letter-spacing: 1px !important;
display: block !important;
text-decoration: none !important;
}
#NostoPopUp .NostoOverlayCopyAlert {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100px !important;
overflow: hidden !important;
padding-top: 35px !important;
-webkit-border-bottom-right-radius: 10px !important;
-moz-border-bottom-right-radius: 10px !important;
-ms-border-bottom-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
-webkit-border-bottom-left-radius: 10px !important;
-moz-border-bottom-left-radius: 10px !important;
-ms-border-bottom-left-radius: 10px !important;
}
#NostoPopUp .NostoOverlayCopyAlertContent {
width: 100% !important;
height: 80px !important;
#if($props.config.copyAlertBackgroundColor && ($props.config.copyAlertBackgroundColor != ''))
background: $props.config.copyAlertBackgroundColor !important;
#else
background: #89C566;
#end
-webkit-animation: animationdown 1000ms linear both !important;
animation: animationdown 1000ms linear both !important;
position: relative;
z-index: 8 !important;
-webkit-border-bottom-right-radius: 10px !important;
-moz-border-bottom-right-radius: 10px !important;
-ms-border-bottom-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
-webkit-border-bottom-left-radius: 10px !important;
-moz-border-bottom-left-radius: 10px !important;
-ms-border-bottom-left-radius: 10px !important;
}
#NostoPopUp .NostoOverlayCopyAlertContent.shown {
-webkit-animation: animationup 1000ms linear both !important;
animation: animationup 1000ms linear both !important;
position: relative;
z-index: 12 !important;
}
#NostoPopUp #nostoSelectPrompt {
display: none;
}
#NostoPopUp .NostoOverlayCopyAlert p {
#if($props.config.copyAlertTextColor && ($props.config.copyAlertTextColor != ''))
color: $props.config.copyAlertTextColor !important;
#else
color: #FFFFFF !important;
#end
margin: 0 !important;
padding: 0 !important;
font-size: 15px !important;
#if($props.style.textFont && $props.style.textFont != '')
font-family: $props.style.textFont !important;
#else
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
#end
font-weight: 300 !important;
line-height: 70px !important;
letter-spacing: 0.8px !important;
}
/* Bouncejs */
/* Generated with Bounce.js. Edit at http://goo.gl/RftDxu */
@-webkit-keyframes animationup {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); }
3.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 173.342, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 173.342, 0, 1); }
5.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 146.079, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 146.079, 0, 1); }
7.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.977, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.977, 0, 1); }
11.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.743, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.743, 0, 1); }
15.42% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.992, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.992, 0, 1); }
16.52% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.282, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.282, 0, 1); }
21.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.809, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.809, 0, 1); }
23.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.7, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.7, 0, 1); }
32.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.296, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.296, 0, 1); }
36.24% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.337, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.337, 0, 1); }
40.34% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.909, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.909, 0, 1); }
50.55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.581, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.581, 0, 1); }
73.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.019, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.019, 0, 1); }
79.08% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.047, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.047, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
@keyframes animationup {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); }
3.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 173.342, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 173.342, 0, 1); }
5.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 146.079, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 146.079, 0, 1); }
7.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.977, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.977, 0, 1); }
11.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.743, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.743, 0, 1); }
15.42% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.992, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.992, 0, 1); }
16.52% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.282, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.282, 0, 1); }
21.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.809, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.809, 0, 1); }
23.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.7, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.7, 0, 1); }
32.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.296, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.296, 0, 1); }
36.24% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.337, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.337, 0, 1); }
40.34% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.909, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.909, 0, 1); }
50.55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.581, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.581, 0, 1); }
73.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.019, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.019, 0, 1); }
79.08% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.047, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.047, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
/* Generated with Bounce.js. Edit at http://goo.gl/kv1Ywz */
@-webkit-keyframes animationdown {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
3.2% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.637, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.637, 0, 1); }
3.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 131.467, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 131.467, 0, 1); }
6.31% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 182.965, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 182.965, 0, 1); }
7.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 191, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 191, 0, 1); }
9.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 208.562, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 208.562, 0, 1); }
12.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 216.301, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 216.301, 0, 1); }
15.42% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 215.81, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 215.81, 0, 1); }
18.82% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 211.691, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 211.691, 0, 1); }
23.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 205.289, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 205.289, 0, 1); }
25.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 203.936, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 203.936, 0, 1); }
32.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.688, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.688, 0, 1); }
40.34% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 198.915, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 198.915, 0, 1); }
50.05% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.518, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.518, 0, 1); }
73.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200.015, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200.015, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); }
}
@keyframes animationdown {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
3.2% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.637, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.637, 0, 1); }
3.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 131.467, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 131.467, 0, 1); }
6.31% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 182.965, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 182.965, 0, 1); }
7.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 191, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 191, 0, 1); }
9.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 208.562, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 208.562, 0, 1); }
12.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 216.301, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 216.301, 0, 1); }
15.42% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 215.81, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 215.81, 0, 1); }
18.82% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 211.691, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 211.691, 0, 1); }
23.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 205.289, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 205.289, 0, 1); }
25.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 203.936, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 203.936, 0, 1); }
32.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.688, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.688, 0, 1); }
40.34% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 198.915, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 198.915, 0, 1); }
50.05% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.518, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.518, 0, 1); }
73.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200.015, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200.015, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); }
}
#NostoPopUp .NostoFooter {
width: 100% !important;
padding: 20px 10px !important;
position: absolute !important;
bottom: 0px !important;
left: 0px !important;
border-radius: 0px 0px 10px 10px !important;
background: $!props.style.footerColor !important;
}
#NostoPopUp .NostoFooter ul li a{
color: rgba(0,0,0,0.4) !important;
text-decoration: none !important;
font-size: 15px !important;
}
#NostoPopUp .NostoFooter ul {
padding: 0px !important;
margin: 0px !important;
}
#NostoPopUp .NostoFooter li {
display: inline-block !important;
margin: 10px !important;
}
@media only screen and (max-width: 875px) {
#NostoPopUp { padding: 50px 10px 10px 10px !important;}
#NostoPopUp .NostoCloseButton {
right: 5px !important;
top: 5px !important;
width: 30px !important;
height: 30px !important;
line-height: 30px !important;
font-size: 16px !important;
border: 0 !important;
}
#NostoPopUp #NostoPopUpContent {
max-width: 475px;
padding: 25px 15px 55px 15px !important;
background: #FFFFFF;
width: 90%;
margin: 0 auto;
}
#NostoPopUpContent > div.ciao {
width: 90%;
margin: 0 auto;
}
#NostoPopUp .NostoTitle {
font-size: 50px !important;
width: 90%;
margin: 0 auto;
}
#NostoPopUp .NostoSubTitle {
font-size: 22px !important;
padding: 0px;
}
#NostoPopUp .NostoDescription { font-size: 14px !important;}
#NostoPopUp .NostoInputText,
#NostoPopUp .NostoInputButton {
width: 100% !important;
margin: 0px !important;
font-size: 18px !important;
word-break: break-word;
padding: 15px 15px !important;
}
#NostoPopUp .NostoInputText { margin-bottom: 10px !important; }
#NostoPopUp .NostoFooter li { margin: 5px !important; font-size: 13px !important; }
#NostoRibbon {
width: 100% !important;
right: 0 !important;
text-align: center !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
-moz-border-top-left-radius: 0px !important;
-moz-border-top-right-radius: 0px !important;
}
#NostoRibbon .NostoRibbonPopUp {
padding-left: 0;
}
}
#if ($Cart && $Cart.items.size() > 0)
#NostoPopUp .NostoProducts {
margin-top: 10px !important;
border-top: solid 1px rgba(0,0,0,0.1) !important;
}
#NostoPopUp .NostoProducts ul {
padding: 0px !important;
height: 130px !important;
overflow: hidden !important;
list-style: none !important;
}
#NostoPopUp .NostoProducts li {
display: inline-block !important;
margin: 10px !important;
}
#NostoPopUp .NostoProducts li img{
max-width: 110px !important;
max-height: 110px !important;
margin: 0 5px !important;
}
#end
#if ($ribbonAvailable)
#NostoRibbon {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
bottom: 0px;
#if($props.config.ribbonWidth && $props.config.ribbonWidth != '')
width: ${props.config.ribbonWidth}px;
#else
width: auto;
#end
#if($props.config.ribbonHeight && $props.config.ribbonHeight != '')
height: ${props.config.ribbonHeight}px;
#else
height: 45px;
#end
position: fixed;
#if($props.config.ribbonPosition == 'left')
#if($props.config.ribbonOffset && $props.config.ribbonOffset != '')
left: ${props.config.ribbonOffset}px;
#else
left: 150px;
#end
#else
#if($props.config.ribbonOffset && $props.config.ribbonOffset != '')
right: ${props.config.ribbonOffset}px;
#else
right: 150px;
#end
#end
z-index: 99999999;
border-radius: 5px 5px 0px 0px !important;
-webkit-border-radius: 5px 5px 0px 0px !important;
-moz-border-radius: 5px 5px 0px 0px !important;
-ms-border-radius: 5px 5px 0px 0px !important;
border: 1px rgb(1, 156, 220) !important;
#if($props.style.ribbonColor && ($props.style.ribbonColor != ''))
background: $props.style.ribbonColor !important;
#else
background: #db4476;
#end
}
#NostoRibbon #NostoRibbonContent {
position: relative !important;
top: 50% !important;
text-align: center !important;
color: white !important;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100% !important;
height: 45px !important;
line-height: 45px !important;
cursor: pointer !important;
#if($props.style.ribbonTextColor && ($props.style.ribbonTextColor != ''))
color: $props.style.ribbonTextColor !important;
#else
color: #FFFFFF !important;
#end
background: url('https://cdn.nosto.com/nosto/assets/popups/coupon-icon.png ') top 45% left 10% no-repeat !important;
}
#NostoRibbon .NostoRibbonPopUpText {
#if($props.style.textFont && $props.style.textFont != '')
font-family: $props.style.textFont !important;
#else
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif !important;
#end
font-size: 16px;
padding-left:36px;
padding-right:10px;
}
#NostoRibbon .NostoRibbonClose {
position: absolute !important;
right: 10px !important;
margin: auto !important;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif !important;
font-size: 16px !important;
cursor: pointer !important;
display: none;
}
#end
#NostoPopUp .disabled {
opacity: 0.5;
}
#NostoPopUp #nostoAddress {
font-weight: normal !important;
border-radius: 0 !important;
border: 3px solid #ccc !important;
}
#nostoCoupon{
width: 315px !important;
border: 2px dashed #222 !important;
font-family: 'Lato', sans-serif !important;
}
#nostoCouponCopyBtn{
height: auto !important;
width: 315px !important;
padding: 20px !important;
}
</style>
<div id="NostoPopUp">
<div id="NostoPopUpWrapper">
<div id="NostoPopUpContent">
<div class="ciao">
<div class="NostoTack">Tack för din anmälan!</div>
<div class="#if(!$ribbonAvailable) NostoOverlayClosePermanently #else NostoOverlayClose #end NostoCloseButton">&#10006;</div>
<div class="NostoTitle">$!props.text.title</div>
#if ($trigger != "abandonedCart")
<div class="NostoSubTitle">$!props.text.subTitle</div>
#end
<div class="NostoDescription desc">$!props.text.campaignDesc</div>
#if ($couponAvailable)
<div class="NostoInputText" style="display:none" id="nostoCoupon"></div>
<div class="NostoDescription cond" style="display: none;"><i style="font-size: 16px; color: #4a4a4a;letter-spacing:0;">* Ange rabattkoden i kassan, giltig t.o.m. 30/4 </i></div>
#end
<div class="NostoForm">
#if ($promptEmail)
<input class="NostoInputText" type="text" id="nostoAddress" placeholder="your@email.com"/>
#end
#if($promptEmail && $props.config.showNewsletterCheckbox)
<div class="NostoCheckboxWrap">
<button type="button" class="NostoInputButton" id="nostoOverlaySend">$!props.text.callToAction</button>
<span class="NostoCheckbox">
<input type="checkbox" id="nostoNewsletter"/>
<label for="nostoNewsletter" class="NostoCheckboxText">$props.text.newsletterLabel</label>
</span>
<div style="clear:both;"></div>
</div>
#else
<button type="button" class="NostoInputButton" id="nostoOverlaySend">$!props.text.callToAction</button>
#end
<button type="button" class="NostoInputButton" id="nostoCouponCopyBtn" style="display:none">$!props.text.copyToClipboard</button>
#if ($props.text.continueShopping && ($props.text.continueShopping != ""))
<button type="button" class="NostoInputButton" id="nostoContinueBtn" style="display:none">$!props.text.continueShopping</button>
#end
</div>
<div class="NostoThankYou" style="display: none;">$!props.text.thankYou</div>
#if ($props.text.successfullyCopied && ($props.text.successfullyCopied != ""))
<div class="NostoOverlayCopyAlert">
<div class="NostoOverlayCopyAlertContent"><p>$props.text.successfullyCopied</p><p id="nostoSelectPrompt">$props.text.selectPrompt</p></div>
</div>
#end
</div>
#if ($Cart && $Cart.items.size() > 0)
<div class="NostoProducts">
<ul>
#foreach($item in $Cart.items)
#if( $velocityCount > 5 )
#break
#end
<li><img src="$item.product.imageUrl" alt=""></li>
#end
</ul>
</div>
#end
#if ($trigger == "abandonedCart")
<div class="NostoFooter">
<ul>
#if($props.config.showCheckoutLink && $props.config.checkoutUrl && ($props.config.checkoutUrl != ''))<li><a class="NostoGoToCheckout" href="$props.config.checkoutUrl">$props.config.checkoutLinkText</a></li>#end
#if($props.text.continueShopping && ($props.text.continueShopping != ''))<li><a class="NostoOverlayClose" href="#">$props.text.continueShopping</a></li>#end
</ul>
</div>
#end
</div>
#if ($ribbonAvailable && $props.text.closePermanently && ($props.text.closePermanently != ""))
<a href="#" class="NostoOverlayClosePermanently NostoClosePermanentlyText">$!props.text.closePermanently</a>
#end
</div>
</div>
#if ($ribbonAvailable)
<div id="NostoRibbon" style="display:none">
<div id="NostoRibbonContent" class="NostoRibbonPopUp">
<span class="NostoRibbonPopUpText">$!props.text.ribbonText</span>
<span class="NostoRibbonClose">x</span>
</div>
</div>
#end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment