-
-
Save jacopo-nosto/0a06c561e0b4caf8c85322012dcd6031 to your computer and use it in GitHub Desktop.
40/60 popup template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#* | |
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">✖</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