Adding basic form switcher in a popup [ WIP ]

content/unique-pages/start-here.md

@@ -24,6 +24,8 @@ Every day, you'll get an email with carefully selected tutorials and guides to g
 
 {{< mailing-signup-get-started >}}
 
+{{< mailing-signup-newsletter-switcher >}}
+
 ## The problem with most tutorials
 
 There's a ton of free tutorials out there, but they often just teach you one trick in isolation and rarely go past beginner-level.

layouts/partials/components/mailing-signup-newsletter-switcher.html

@@ -0,0 +1,192 @@
+<script>
+	(function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
+	.push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
+	n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
+	(window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
+	ml('account', '107775');
+</script>
+<div class="margin-top-base">
+	<label for="modal_1" class="button-link -yellow -center -large -tall button">Show modal</label>
+</div>
+
+<div class="modal">
+	<input id="modal_1" type="checkbox" />
+	<label for="modal_1" class="overlay"></label>
+	<article>
+		<div class="tabs two">
+			<input id='tab-1' type='radio' name='mailing-forms' checked />
+			<label for="tab-1">Fleps</label>
+			<input id='tab-2' type='radio' name='mailing-forms' />
+			<label for="tab-2">Flips</label>
+			<div class="tabs-row">
+				<div class="ml-embedded" data-form="zxgnHv"></div>
+				<div class="ml-embedded" data-form="VZlDQU"></div>
+			</div>
+		</div>
+		<label for="modal_1" class="modal-close">&times;</label>
+	</article>
+</div>
+<style>
+:root {
+  --form-control-color: rebeccapurple;
+}
+.modal .overlay ~ *{
+  position: relative;
+  box-shadow: none;
+  border-radius: 0.2em;
+  border: 1px solid #aaa;
+  overflow: hidden;
+  text-align: left;
+  background: #fff;
+  margin-bottom: 0.6em;
+  padding: 0;
+  transition: all 0.3s ease;
+}
+.modal .overlay ~ * .modal-close {
+  position: absolute;
+  top: 0.4em;
+  right: 0.3em;
+  font-size: 1.2em;
+  padding: 0 0.5em;
+  cursor: pointer;
+  width: auto;
+}
+.modal .overlay ~ * .modal-close:hover {
+  color: #ff4136;
+}
+.modal > input ~ * {
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+}
+.modal .overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: fixed;
+  margin: 0;
+  border-radius: 0;
+  background: rgba(17, 17, 17, 0.2);
+  transition: all 0.3s;
+  z-index: 100000;
+}
+.modal .overlay ~ * {
+  border: 0;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%) scale(0.2, 0.2);
+  z-index: 1000000;
+  transition: all 0.3s;
+}
+.modal > input:checked ~ * {
+  display: block;
+  opacity: 1;
+  max-height: 10000px;
+  transition: all 0.3s;
+}
+.modal > input:checked ~ .overlay ~ * {
+  max-height: 90%;
+  overflow: auto;
+  -webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
+  transform: translateX(-50%) translateY(-50%) scale(1, 1);
+}
+
+@media (max-width: 60em) {
+  .modal .overlay ~ * {
+    min-width: 90%;
+  }
+}
+
+.tabs {
+  position: relative;
+  overflow: hidden;
+	padding: 1em;
+}
+.tabs > .tabs-row {
+  width: calc(100% + 1.2em);
+  display: table;
+  table-layout: fixed;
+  position: relative;
+  padding-left: 0;
+  border-spacing: 0;
+  margin: 0;
+}
+.tabs > .tabs-row > * {
+  display: table-cell;
+  vertical-align: top;
+  margin: 0;
+  width: 100%;
+}
+
+label.button, .modal > input[type=checkbox], .tabs > input[type=radio]{
+	cursor: pointer;
+}
+
+.tabs{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.tabs input[type="radio"], .modal > input[type=checkbox] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  margin: 0;
+}
+
+.tabs input[type=radio] + label::before {
+  content: "";
+  background: #f4f4f4;
+  border-radius: 100%;
+  border: 1px solid #b4b4b4;
+  display: inline-block;
+  width: 1.4em;
+  height: 1.4em;
+  position: relative;
+  top: -0.2em;
+  margin-right: 1em;
+  vertical-align: top;
+  cursor: pointer;
+  text-align: center;
+  transition: all 250ms ease;
+}
+
+.tabs input[type=radio]:checked + label:before {
+  background-color: var(--form-control-color);
+  box-shadow: inset 0 0 0 4px #f4f4f4;
+}
+
+.tabs input[type=radio]:checked + label {
+  color: var(--form-control-color);
+}
+
+.tabs input[type=radio]:focus + label:before {
+  outline: none;
+  border-color: var(--form-control-color);
+}
+
+.two.tabs > .tabs-row {
+  width: 200%;
+  left: -100%;
+}
+.two.tabs > input:nth-of-type(1):checked ~ .tabs-row {
+  margin-left: 100%;
+}
+.three.tabs > .tabs-row {
+  width: 300%;
+  left: -200%;
+}
+.three.tabs > input:nth-of-type(1):checked ~ .tabs-row {
+  margin-left: 200%;
+}
+.three.tabs > input:nth-of-type(2):checked ~ .tabs-row {
+  margin-left: 100%;
+}
+.three.tabs > label img {
+  width: 30%;
+  margin: 5% 0 5% 5%;
+}
+</style>

layouts/shortcodes/mailing-signup-newsletter-switcher.html

@@ -0,0 +1 @@
+{{ partialCached "components/mailing-signup-newsletter-switcher" . }}