From a3d43121f83737f8124414bc4f18fa49921388d8 Mon Sep 17 00:00:00 2001
From: Pete Schuster <pas5027@gmail.com>
Date: Mon, 28 Aug 2017 11:51:14 -0400
Subject: [PATCH] adds shame fixes from MAW to patterns (#1)

* update hgroups

* update margin on card-group

* init form toggle
---
 assets/sass/all-digital/_components.scss      |  1 +
 assets/sass/all-digital/base/_headings.scss   | 11 +--
 .../all-digital/components/_card-group.scss   |  2 +-
 .../all-digital/components/_form-toggle.scss  | 87 +++++++++++++++++++
 4 files changed, 93 insertions(+), 8 deletions(-)
 create mode 100644 assets/sass/all-digital/components/_form-toggle.scss

diff --git a/assets/sass/all-digital/_components.scss b/assets/sass/all-digital/_components.scss
index c33da1c..4bcb4f2 100755
--- a/assets/sass/all-digital/_components.scss
+++ b/assets/sass/all-digital/_components.scss
@@ -16,3 +16,4 @@
 @import 'components/form-control-groups';
 @import 'components/link-group';
 @import 'components/badge';
+@import 'components/form-toggle';
diff --git a/assets/sass/all-digital/base/_headings.scss b/assets/sass/all-digital/base/_headings.scss
index 3808be6..d4d9abc 100755
--- a/assets/sass/all-digital/base/_headings.scss
+++ b/assets/sass/all-digital/base/_headings.scss
@@ -67,6 +67,8 @@ h6 {
   .display1,
   .display2,
   .display3,
+  .heading1,
+  .heading2,
   .heading3,
   .heading4,
   .heading5,
@@ -75,6 +77,8 @@ h6 {
   .body2,
   .body3,
   .body4,
+  h1,
+  h2,
   h3,
   h4,
   h5,
@@ -82,13 +86,6 @@ h6 {
   p {
     margin-bottom: 0;
   }
-
-  .heading1,
-  .heading2,
-  h1,
-  h2 {
-    margin-bottom: 6px;
-  }
 }
 
 .hgroup--spaced {
diff --git a/assets/sass/all-digital/components/_card-group.scss b/assets/sass/all-digital/components/_card-group.scss
index a838a4a..77e91a9 100755
--- a/assets/sass/all-digital/components/_card-group.scss
+++ b/assets/sass/all-digital/components/_card-group.scss
@@ -1,5 +1,5 @@
 .card-group {
-  margin-bottom: 30px;
+  margin-bottom: 24px;
 }
 
 .card-group__item {
diff --git a/assets/sass/all-digital/components/_form-toggle.scss b/assets/sass/all-digital/components/_form-toggle.scss
new file mode 100644
index 0000000..a27f8f4
--- /dev/null
+++ b/assets/sass/all-digital/components/_form-toggle.scss
@@ -0,0 +1,87 @@
+.form-toggle {
+  margin-bottom: 12px;
+
+  .form-toggle__label {
+    // needs higher specifity
+    // to overcome all digital
+    display: block;
+  }
+}
+
+.form-toggle__input > input {
+  @include visually-hidden;
+}
+
+
+.form-toggle__label {
+  display: block;
+  position: relative;
+  outline: none;
+  user-select: none;
+  margin-bottom: 0;
+
+  &:before,
+  &:after {
+    display: block;
+  }
+
+  &:before {
+    width: 54px;
+    height: 30px;
+    background-color: $cool-grey8;
+    border-radius: 30px;
+    transition: background 0.4s;
+    content: 'OFF ';
+    line-height: 30px;
+    padding-left: 27px;
+    text-align: center;
+    font-size: 9px;
+    font-weight: bold;
+    color: $white;
+  }
+
+  &:after {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    content: '';
+    background-color: $white;
+    border-radius: 100%;
+    transition: transform 0.4s;
+    top: 3px;
+    margin: 0 3px;
+  }
+
+  input:checked ~ & {
+    &:before {
+      background-color: $blue-sky;
+      content: 'ON ';
+      padding-right: 27px;
+      padding-left: 0;
+    }
+
+    &:after {
+      transform: translateX(24px);
+    }
+  }
+
+  input:disabled ~ & {
+    opacity: 0.8;
+  }
+
+  input:focus ~ & {
+    &:after {
+      animation: gradient 0.2s linear 1 forwards;
+    }
+  }
+}
+
+@keyframes gradient {
+  from {
+    box-shadow: inset 0 0 0 $blue-sky;
+  }
+
+  to {
+    box-shadow: inset 0 0 6px $blue-sky;
+  }
+}