<div id="ATM-container" class="ATM"></div>
<div id="ATM-container" class="ATM"></div>
/* No context defined for this component. */
const React = require('react');
const ReactDOM = require('react-dom');
import ATM from './Components/ATM';
const container = document.getElementById('ATM-container');
if (container) {
ReactDOM.render(<ATM />, container);
}
.ATM {
font-family: sans-serif;
line-height: 1.5;
@media #{$desktop-media} {
padding: 1em;
overflow: hidden;
background-color: get-color(neutral, 200);
border-radius: 1em;
}
}
.ATM-console {
position: relative;
display: flex;
padding: 1em .5em 3em;
flex-wrap: wrap;
background-color: get-color(neutral, 900);
border-width: .75em;
border-style: solid;
border-color: get-color(neutral, 300);
border-radius: 1em;
}
.ATM-console::after {
position: absolute;
right: 1em;
bottom: 1em;
left: 1em;
display: block;
padding: .5em;
clear: both;
background-color: get-color(neutral, 1000);
border-width: .5em;
border-style: solid;
border-color: get-color(neutral, 800);
border-radius: 1em;
content: "";
}
.ATM-header {
display: flex;
max-width: 100%;
padding: 1em 2em;
margin-bottom: 1em;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
font-size: 1em;
color: get-color(neutral, 0);
background-color: get-color(teal, 800);
background-image: url("//media.sproutsocial.com/uploads/svgz/atm-swish.svgz");
background-size: cover;
border-width: .75em;
border-style: solid;
border-color: get-color(neutral, 300);
border-radius: 1em;
}
.ATM-heading {
max-width: 5em;
margin: 0;
font-size: 1em;
line-height: 1.25;
color: inherit;
text-transform: uppercase;
}
.ATM-subheading {
margin: 0;
font-size: 4.5em;
font-weight: bold;
line-height: 1.25;
}
.ATM-screen {
display: flex;
padding: 1em 1em 0;
margin: 0 .5em 1em;
flex-basis: 85%;
flex-grow: 1;
flex-wrap: wrap;
order: 1;
font-family: "Lucida Console", Monaco, monospace;
color: get-color(neutral, 900);
background-color: get-color(neutral, 0);
border-radius: 1em;
letter-spacing: .1em;
}
.ATM-screenHeading {
margin: 0;
font-family: inherit;
font-size: 1em;
line-height: 1.5;
text-align: center;
}
.ATM-screenInnerWrapper {
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
}
.ATM-input {
width: 100%;
min-height: 5em;
padding: 1em;
margin: 1em 0 0;
flex-basis: 100%;
font-family: inherit;
font-size: .75em;
border-top: none;
border-top: none;
border-right: .25em solid get-color(neutral, 300);
border-bottom: .25em solid get-color(neutral, 300);
border-left: none;
resize: none;
}
.ATM-startLinks {
width: 100%;
align-self: flex-end;
text-align: right;
}
.ATM-startLink {
display: block;
width: 100%;
padding: 1.25em;
margin: .5em 0;
font-size: 1em;
line-height: 1;
color: get-color(neutral, 800);
text-align: right;
text-decoration: none;
background-color: transparent;
border: none;
}
.ATM-nav {
display: flex;
width: 4em;
margin: 1.25em auto;
flex-basis: 4em;
flex-grow: 1;
flex-wrap: wrap;
order: 2;
align-self: flex-end;
}
.ATM-button {
display: block;
width: 3em;
padding: 1em;
margin: .5em auto;
font-size: 1em;
line-height: 1;
color: get-color(neutral, 0);
text-decoration: none;
background-color: get-color(neutral, 300);
border: none;
border-radius: 50%;
outline: none;
&._cancel::before {
content: "×";
}
&.icon._facebook.is-active {
background-color: get-network-color("facebook");
}
&.icon._instagram.is-active {
background-color: get-network-color("instagram");
}
&.icon._linkedin.is-active {
background-color: get-network-color("linkedin");
}
&.icon._twitter.is-active {
background-color: get-network-color("twitter");
}
}
.ATM-counter {
min-height: 5em;
margin: 3em 0 0;
.is-over {
color: get-color(red, 800);
}
}
.ATM-counter + .ATM-counter {
margin-top: 0;
}
.ATM-progressBarStats {
display: flex;
margin: 0;
font-size: .625em;
}
.ATM-progressBarHeading {
margin: 0;
flex-grow: 1;
}
.ATM-count {
margin: 0;
}
.ATM-progressBarNote {
margin: .75em 0 0;
font-size: .625em;
text-align: center;
}
.ATM-progressBar {
display: block;
width: 100%;
height: .5em;
overflow: hidden;
background-image: linear-gradient(to right, rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 33.3%, rgba(0,0,0,0) 33.3%, rgba(0,0,0,0) 66.7%, rgba(0,0,0,.2) 66.7%);
background-size: cover;
}
.ATM-indicator {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: get-color(neutral, 0);
border-bottom: .2em solid get-color(neutral, 300);
transition: transform $transition-time-200 $transition-in-default;
transform: scaleX(1);
transform-origin: right;
}
<svg xmlns="http://www.w3.org/2000/svg" width="709" height="219">
<path fill="#0b968f" d="M228-1c8 22 22.4 43 42 63 7.6-20 13-41 16.6-63H228zm61.6 207c-7.5 5.2-15.2 10-23 14.5h53c-10.2-4.5-20.3-9.3-30-14.5z"/>
<path fill="#08c4b2" d="M286.6-1c-3.4 22-9 43-16.6 63l-54.5 92c-23 27-50.5 49.4-81.3 66.4h132c8-4.5 15.5-9.4 23-14.5l76.3-77C380 108 392 85 401 61c7.7-20 13-40.8 16.5-62.4h-131z"/>
<path fill="#24e0c5" d="M710-1C602.7 8 494.7 32.8 406 60l-4.7 1.5v.4L199 137l16.6 17 156-22c86 42 202.3 71.7 333.7 81.6 3-3.3 4.6-7.6 4.6-12.4V-.8zM216 154c-5.8-5.5-11.4-11-16.8-16.7-80.8 34.2-152.8 69-200 83h135c30.8-17 58.3-39.5 81.4-66.4z"/>
<path fill="#00a99c" d="M366 129c-21.7-11-41-22.8-58.5-35.3C293.5 83.7 281 73 270 62c-19.4-20-33.6-41-41.7-63H127.6c9 51.3 34.3 98.5 71.4 138l1-.5-1 .5c5 5.8 10.6 11.3 16.5 16.7 21.6 19.7 46.3 37.2 73.6 51.8 1-.4 1-.8 2-1l-1.3 1c10 5.3 20 10.2 30 14.6h372c5.8 0 11-2 14.5-6-134.5-10-253.2-41-339.6-84.5zm-125-9h-1l1-.4v.2z"/>
</svg>
There are no notes for this item.
