Moving overlay to it's own HTML pattern

html/atom/overlay.php

@@ -0,0 +1,8 @@
+<?php /*
+Title: Overlay
+Class: .overlay
+Description: Styles have been added to stop it going fullscreen. This will not affect anything includes.
+Section: cc-overlay
+*/ ?>
+
+<div class="overlay" id="overlay" data-cc-action="deactivate" data-cc-target="modal drawer-left drawer-right"></div>

html/molecule/drawer/1-toggles.php

@@ -3,4 +3,6 @@
 */ ?>
 
 <p><a href="#" data-cc-target="drawer-left-1" data-cc-action="activate">Left Drawer Panel 1</a></p>
-<p><a href="#" data-cc-target="drawer-right-1" data-cc-action="activate">Right Drawer Panel 1</a></p>
+<p><a href="#" data-cc-target="drawer-right-1" data-cc-action="activate">Right Drawer Panel 1</a></p>
+
+<?php printPattern('atom/overlay'); ?>

html/molecule/modal/3-modal.php → html/molecule/modal/2-modal.php

@@ -1,5 +1,7 @@
 <?php /*
 Title: Modal
+Class: .modal
+Description: The modal is hidden off screen by default, use the modal toggles to show.
 */ ?>
 
 <div class="modal" id="modal" data-cc-cascade="overlay" data-cc-trigger-on="direct-only" data-cc-action="deactivate" data-cc-target="modal">

src/scss/chopchop-ui.scss

@@ -265,4 +265,20 @@
 
 .cc-shape-ring {
     @include ring;
+}
+
+
+// =============================================
+// Overlay override
+// =============================================
+
+.cc-overlay {
+    position: relative;
+    height: 50vh;
+
+    .overlay {
+        top: 200px;
+        display: block;
+        position: absolute;
+    }
 }