Merge branch 'gh-pages' into keyes-suggestions-marcel

* gh-pages: Task #91: #91: fix the site messaging icons add class while element is stuck Task #91: #91: fix the site messaging icons deleting searchDrawer js plugin and adding it into our sticky header plugin; ensuring search drawer is visible when you are down a ways on a page # Conflicts: # css/styles.css # css/styles.css.map # css/styles.scss
imarc · Dec 3, 2017 · c28f40a · c28f40a
2 parents da77e04 + 5e163d5
commit c28f40a
Show file tree

Hide file tree

Showing 12 changed files with 141 additions and 127 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/css/styles.scss b/css/styles.scss
@@ -98,8 +98,9 @@ $mq-xl:     1200px;     $mq-xl-color:     red;
 $medium: $mq-medium;
 $large:  $mq-large;
 
+
 ///
-/// Imports
+///  = Imports =
 ///
 
 @import "mixins";
@@ -247,31 +248,6 @@ img {
     @include visuallyhidden;
 }
 
-.search-drawer {
-    background-color: $darkgray;
-    > div {
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 150ms ease;
-        &.open {
-            max-height: 80px;
-        }
-    }
-    form {
-        display: flex;
-        padding: 1rem 0;
-        > * {
-            margin-bottom: 0;
-        }
-        .text {
-            flex: 1 1 auto;
-        }
-        .submit input {
-            height: 100%;
-        }
-    }
-}
-
 .branding {
     img {
         max-width: 180px;
@@ -280,11 +256,38 @@ img {
 
 header.primary {
     background-color: $charcoal;
-    padding: 1rem 0;
     position: relative;
+    .search-drawer {
+        background-color: $darkgray;
+        display: none;
+        > div {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 150ms ease;
+            &.open {
+                max-height: 80px;
+            }
+        }
+        form {
+            display: flex;
+            padding: 1rem 0;
+            > * {
+                margin-bottom: 0;
+            }
+            .text {
+                flex: 1 1 auto;
+            }
+            .submit input {
+                height: 100%;
+            }
+        }
+    }
     .container {
         position: static;
     }
+    .header-content {
+        padding: 1rem 0;
+    }
     .branding {
         flex-basis: 180px;
         flex-shrink: 0;
@@ -950,10 +953,15 @@ table {
     ///
 
     header.primary {
-        padding-bottom: 0;
+        .search-drawer {
+            display: block;
+        }
         .branding {
             margin-right: 2rem;
         }
+        .header-content {
+            padding-bottom: 0;
+        }
     }
 
     nav {

diff --git a/demo/dropdown-mega.html b/demo/dropdown-mega.html
@@ -246,12 +246,11 @@ <h1>Dropdown (mega)</h1>
         <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
         <script src="../js/mobileNavigation.plugin.js"></script>
         <script src="../js/dropdown.plugin.js"></script>
-        <script src="../js/searchDrawer.plugin.js"></script>
         <script src="../js/stickyHeader.plugin.js"></script>
         <script>
             $(function() {
+                $('header.primary').stickyHeader();
                 $('nav.primary').dropdown();
-                $('.search-drawer').searchDrawer();
                 $('.mobile').mobileNavigation();
             });
         </script>

diff --git a/demo/dropdown-simple.html b/demo/dropdown-simple.html
@@ -247,9 +247,8 @@ <h1>Dropdown (simple)</h1>
         <script src="../js/stickyHeader.plugin.js"></script>
         <script>
             $(function() {
-                $('header.primary.sticky').stickyHeader();
+                $('header.primary').stickyHeader();
                 $('nav.primary').dropdown();
-                $('.search-drawer').searchDrawer();
                 $('.mobile').mobileNavigation();
             });
         </script>

diff --git a/demo/mobile-navigation.html b/demo/mobile-navigation.html
@@ -11,22 +11,22 @@
     </head>
     <body>
         <div class="shell">
-            <div class="search-drawer">
-                <div>
-                    <div class="container">
-                        <form action="">
-                            <div class="text">
-                                <label class="sr-only" for="">Search the website</label>
-                                <input type="text" />
-                            </div>
-                            <div class="submit">
-                                <input type="submit" />
-                            </div>
-                        </form>
+            <header class="primary">
+                <div class="search-drawer">
+                    <div>
+                        <div class="container">
+                            <form action="">
+                                <div class="text">
+                                    <label class="sr-only" for="">Search the website</label>
+                                    <input type="text" />
+                                </div>
+                                <div class="submit">
+                                    <input type="submit" />
+                                </div>
+                            </form>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <header class="primary">
                 <div class="container">
                     <div class="header-content">
                         <div class="branding">
@@ -498,12 +498,12 @@ <h2>Plugin Methods</h2>
 
         <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
         <script src="../js/mobileNavigation.plugin.js" type="text/javascript"></script>
+        <script src="../js/stickyHeader.plugin.js"></script>
         <script src="../js/dropdown.plugin.js"></script>
-        <script src="../js/searchDrawer.plugin.js"></script>
         <script>
             $(function() {
+                $('header.primary').stickyHeader();
                 $('nav.primary').dropdown();
-                $('.search-drawer').searchDrawer();
                 $('.mobile').mobileNavigation();
             });
         </script>

diff --git a/demo/sticky-element.html b/demo/sticky-element.html
@@ -102,6 +102,13 @@ <h2>Options</h2>
                                     If specified, unsticks the element when it reaches this distance
                                     from the top of an 'until' element.
                                 </dd>
+
+                                <dt>
+                                    classWhileFixed (string, default "element-fixed")
+                                </dt>
+                                <dd>
+                                    This lets you specify a class to add to the element while it's stuck. Defaults to "element-fixed".
+                                </dd>
                             </dl>
                         </section>
                         <section>

diff --git a/demo/sticky-header.html b/demo/sticky-header.html
@@ -358,14 +358,12 @@ <h4>
         </div>
         <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
         <script src="../js/mobileNavigation.plugin.js"></script>
-        <script src="../js/searchDrawer.plugin.js"></script>
         <script src="../js/stickyHeader.plugin.js"></script>
         <script src="../js/dropdown.plugin.js"></script>
         <script>
             $(function() {
-                $('header.primary.sticky').stickyHeader();
+                $('header.primary').stickyHeader();
                 $('nav.primary').dropdown();
-                $('.search-drawer').searchDrawer();
                 $('.mobile').mobileNavigation();
             });
         </script>

diff --git a/index.html b/index.html
@@ -11,22 +11,23 @@
     </head>
     <body>
         <div class="shell">
-            <div class="search-drawer">
-                <div>
-                    <div class="container">
-                        <form action="">
-                            <div class="text">
-                                <label class="sr-only" for="">Search the website</label>
-                                <input type="text" />
-                            </div>
-                            <div class="submit">
-                                <input type="submit" />
-                            </div>
-                        </form>
+            <header class="primary">
+                <div class="search-drawer">
+                    <div>
+                        <div class="container">
+                            <form action="">
+                                <div class="text">
+                                    <label class="sr-only" for="">Search the website</label>
+                                    <input type="text" />
+                                </div>
+                                <div class="submit">
+                                    <input type="submit" />
+                                </div>
+                            </form>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <header class="primary sticky">
+
                 <div class="container">
                     <div class="header-content">
                         <div class="branding">
@@ -642,8 +643,7 @@ <h3 id="Pseudo-element">Pseudo Element</h3>
         <script src="js/stickyHeader.plugin.js"></script>
         <script>
             $(function () {
-                $('header.primary.sticky').stickyHeader();
-                $('.search-drawer').searchDrawer();
+                $('header.primary').stickyHeader();
                 $('nav.primary').dropdown();
                 $('.mobile').mobileNavigation();
             });

diff --git a/js/searchDrawer.plugin.js b/js/searchDrawer.plugin.js