From cb1dbece97229f216cd3927c9c0f3c4d0ca9eb7b Mon Sep 17 00:00:00 2001
From: Dave Redfern <dave@daveredfern.com>
Date: Thu, 25 Aug 2016 14:13:43 +0100
Subject: [PATCH] Moving overlay to it's own HTML pattern

---
 html/atom/overlay.php                            |  8 ++++++++
 html/molecule/drawer/1-toggles.php               |  4 +++-
 html/molecule/drawer/4-overlay.php               |  7 -------
 html/molecule/modal/{3-modal.php => 2-modal.php} |  2 ++
 html/molecule/modal/2-overlay.php                |  7 -------
 src/scss/chopchop-ui.scss                        | 16 ++++++++++++++++
 6 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 html/atom/overlay.php
 delete mode 100644 html/molecule/drawer/4-overlay.php
 rename html/molecule/modal/{3-modal.php => 2-modal.php} (96%)
 delete mode 100644 html/molecule/modal/2-overlay.php

diff --git a/html/atom/overlay.php b/html/atom/overlay.php
new file mode 100644
index 00000000..fcab6c6b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/html/molecule/drawer/1-toggles.php b/html/molecule/drawer/1-toggles.php
index fd658079..102f0cd2 100644
--- a/html/molecule/drawer/1-toggles.php
+++ b/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>
\ No newline at end of file
+<p><a href="#" data-cc-target="drawer-right-1" data-cc-action="activate">Right Drawer Panel 1</a></p>
+
+<?php printPattern('atom/overlay'); ?>
\ No newline at end of file
diff --git a/html/molecule/drawer/4-overlay.php b/html/molecule/drawer/4-overlay.php
deleted file mode 100644
index 21011691..00000000
--- a/html/molecule/drawer/4-overlay.php
+++ /dev/null
@@ -1,7 +0,0 @@
-<?php /*
-Title: Overlay
-Class: .overlay
-Description: The overlay is hidden off screen by default, it shows when the drawers are active.
-*/ ?>
-
-<div class="overlay" id="overlay" data-cc-action="deactivate" data-cc-target="overlay" data-cc-cascade-deactivate="drawer-left drawer-right"></div>
\ No newline at end of file
diff --git a/html/molecule/modal/3-modal.php b/html/molecule/modal/2-modal.php
similarity index 96%
rename from html/molecule/modal/3-modal.php
rename to html/molecule/modal/2-modal.php
index edac814a..2454fb8f 100644
--- a/html/molecule/modal/3-modal.php
+++ b/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">
diff --git a/html/molecule/modal/2-overlay.php b/html/molecule/modal/2-overlay.php
deleted file mode 100644
index 88baf578..00000000
--- a/html/molecule/modal/2-overlay.php
+++ /dev/null
@@ -1,7 +0,0 @@
-<?php /*
-Title: Overlay
-Class: .overlay
-Description: The overlay is hidden off screen by default, it shows when the modals are active.
-*/ ?>
-
-<div class="overlay" id="overlay" data-cc-action="deactivate" data-cc-target="modal"></div>
\ No newline at end of file
diff --git a/src/scss/chopchop-ui.scss b/src/scss/chopchop-ui.scss
index f5371d57..a5d44972 100644
--- a/src/scss/chopchop-ui.scss
+++ b/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;
+    }
 }
\ No newline at end of file