Skip to content
Snippets Groups Projects
Commit 74af645a authored by Eric Bremner's avatar Eric Bremner
Browse files

ISTWCMS-5724: adding mailchimp

parent 7f38df56
No related branches found
No related tags found
1 merge request!28Feature/istwcms 5724 ebremner embeds
:where(html) {
--size-xs: 0.063rem; // 1px
--size-sm: 0.125rem; // 2px
--size-03: 0.188rem; // 3px
--size-05: 0.25rem; // 4px xxs
--size-1: 0.5rem; // 8px xs
--size-110: 0.625rem; // 10px
--size-105: 0.75rem; // 12px
--size-2: 1rem; // 16px sm
--size-205: 1.25rem; // 20px
......
......@@ -24,6 +24,7 @@
@forward 'icon/icon--button/icon--button';
@forward 'image/image';
@forward 'image-gallery/image-gallery';
@forward 'mailchimp/mailchimp';
@forward 'menu/menu';
@forward 'message/message';
@forward 'menu/menu--header/menu--header';
......
@use '../../01-core' as *;
$support-for-rtl: true !default;
.uw-mailchimp {
&__wrapper {
.mc-field-group {
margin: 0 0 var(--size-sm);
input {
background-color: var(--uw-white);
border: var(--size-xs) solid var(--gray-3);
border-radius: var(--size-03);
box-shadow: inset 0 var(--size-xs) var(--size-03) var(--gray-3);
box-sizing: border-box;
color: var(--gray-6);
font-family: var(--font-systemmedium);
font-size: var(--font-size-0);
max-width: inherit;
padding: 0.46667rem;
transition: border-color;
width: 100%;
&:focus {
border: var(--size-xs) solid var(--gray-3) !important;
box-shadow: inset 0 var(--size-xs) var(--size-03) rgba(0, 0, 0, 0.06), 0 0 5px rgba(104, 104, 104, 0.7);
outline: var(--gray-3);
}
[type="submit"] {
@include button();
font-weight: 200 !important;
}
}
}
.brandingLogo{
margin: var(--size-xs) auto;
}
.indicates-required{
text-align: right;
}
.asterisk{
color: #e00;
font-family: var(--font-system);
font-size: var(--font-size-2);
font-weight: var(--font-weight-400);
}
.datefield{
input{
width: inherit;
}
}
select {
@include svg-background(select-arrows);
appearance: none;
background-color: var(--gray-1);
background-position: right var(--size-110) center; // LTR
background-repeat: no-repeat;
background-size: var(--size-205);
border: var(--size-xs) solid var(--gray-3);
border-radius: var(--size-03);
box-shadow: inset 0 var(--size-xs) var(--size-03) var(--gray-3);
box-sizing: border-box;
height: 2.369rem;
padding-left: var(--size-1); // LTR
padding-right: var(--size-5); // LTR
width: 100%;
@if $support-for-rtl {
[dir='rtl'] & {
background-position: left var(--size-110) center;
padding-left: var(--size-5);
padding-right: 0;
}
}
// Remove inner focus styling on Firefox.
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
&::-ms-expand {
display: none;
}
}
}
}
---
el: .uw-mailchimp
title: Mailchimp
---
__Variables:__
* mailchimp: [array] Variables for mailchimp.
* sourcecode: [string] Mailchimp sourcecode.
* uniqueid: [string] Unique id of the mailchimp component.
<div id="uw-mailchimp-{{ mailchimp.uniqueid }}" class="uw-mailchimp">
<div class="uw-mailchimp__wrapper {{ width }}">
{{ mailchimp.sourcecode|raw }}
</div>
</div>
mailchimp:
sourcecode: '<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://twitter.us12.list-manage.com/subscribe/post?u=9026a2566cf71cb4773088fdb&amp;id=0b02bfdf36" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to SDSN Canada</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE5">Organization </label>
<input type="text" value="" name="MMERGE5" class="" id="mce-MMERGE5">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE4">City </label>
<input type="text" value="" name="MMERGE4" class="" id="mce-MMERGE4">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE3">Province </label>
<input type="text" value="" name="MMERGE3" class="" id="mce-MMERGE3">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9026a2566cf71cb4773088fdb_0b02bfdf36" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->'
uniqueid: '1111111'
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment