wip #539 @8

diff --git a/framework/application/views/helpers/HeaderContactNav.php b/framework/application/views/helpers/HeaderContactNav.php
index e3af51fb8c3df2a64fb542c5465d81eb5257cf5e..e625ace85a402b06987e7a2e7bdf32520f37b9f9 100644 (file)
--- a/framework/application/views/helpers/HeaderContactNav.php
+++ b/framework/application/views/helpers/HeaderContactNav.php
@@ -6,7 +6,7 @@ class Fluidbook_View_Helper_HeaderContactNav extends CubeIT_View_Helper_Abstract
         */\r
        public function headerContactNav() {\r
 \r
-               $this->headScript()->addScriptAndStyle('315-quote'); // Needed for styling and handling the AJAX quote form\r
+               \r
 \r
                $res = array();\r
 \r

diff --git a/framework/application/views/helpers/LinkQuote.php b/framework/application/views/helpers/LinkQuote.php
index 032f1a697a5d07e21f37f5bd5b8d3d4f6369850f..6c7bee648d0f3dd8917ef9d397c583645e8a4a42 100644 (file)
--- a/framework/application/views/helpers/LinkQuote.php
+++ b/framework/application/views/helpers/LinkQuote.php
@@ -5,6 +5,7 @@ class Fluidbook_View_Helper_LinkQuote extends CubeIT_View_Helper_Abstract {
         * @return string\r
         */\r
        public function linkQuote($label) {\r
+               $this->headScript()->addScriptAndStyle('315-quote');\r
                return $this->linkPopup($label, '/ajaxpopup/quoteForm', array('class' => 'quoteLink'));\r
        }\r
 }
\ No newline at end of file

diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml
index adde5c049adfaea2a52686db8e9e5fce21558b0c..659d3e157bd9b9b164d5ae6399cd8c53767b2c66 100644 (file)
--- a/framework/application/views/scripts/common/header.phtml
+++ b/framework/application/views/scripts/common/header.phtml
@@ -12,9 +12,7 @@ if (!is_null($homepage)) {
 }\r
 \r
 $header = $this->headerLogo();\r
-$header .= $this->headerNav();\r
-$header .= $this->headerContactNav();\r
-$header .= '<div class="nav-icon"></div>';\r
+$header .= $this->render('common/nav.phtml');\r
 $header = $this->htmlElement($header, 'div', array('id' => 'header', 'class' => 'content'));\r
 \r
-echo $this->htmlElement($header, 'header', array('class' => $this->headerClass));
\ No newline at end of file
+echo $this->htmlElement($header, 'header', array('id' => 'h', 'class' => CubeIT_Util_Array::merge($this->headerClass, 'fixed')));
\ No newline at end of file

diff --git a/framework/application/views/scripts/common/nav.phtml b/framework/application/views/scripts/common/nav.phtml
new file mode 100644 (file)
index 0000000..6f39b80
--- /dev/null
+++ b/framework/application/views/scripts/common/nav.phtml
@@ -0,0 +1,9 @@
+<?php\r
+$this->headScript()\r
+       ->addMMenu()\r
+       ->addScriptAndStyle('104-nav');\r
+\r
+$nav = $this->headerNav();\r
+$nav .= $this->headerContactNav();\r
+$nav .= '<div id="nav-icon"><span></span><span></span><span></span></div>';\r
+echo $nav;
\ No newline at end of file

diff --git a/js/002-common.js b/js/002-common.js
index 4fbb3dae1ebcf32d3b5c93a721cc15a8c38ea708..8e7c6b0a7e85d938b16d3901ee2cbbb0dd04e953 100644 (file)
--- a/js/002-common.js
+++ b/js/002-common.js
@@ -30,7 +30,12 @@ function setZoom(ww) {
     if (ww >= 1680) {\r
         zoom = ww / 1680;\r
     }\r
-    $('#z,header').css('transform', 'scale(' + zoom + ')');\r
+    var transform = '';\r
+    if (zoom > 1) {\r
+        transform = 'scale(' + zoom + ')';\r
+    }\r
+\r
+    $('#z,header').css('transform', transform);\r
 \r
 \r
 }
\ No newline at end of file

diff --git a/js/101-header.js b/js/101-header.js
index 36a01ed83aab640013e58bb0dc81098882508450..4a9db393ca4f1a66e5c0a5bc817f3c2a294f6965 100644 (file)
--- a/js/101-header.js
+++ b/js/101-header.js
@@ -8,7 +8,7 @@ var htl;
 registerLoader(load_header, true);\r
 \r
 function load_header() {\r
-    var h = $('header');\r
+    var h = $('#h');\r
 \r
     htl = new TimelineMax();\r
     // Background-color & height\r
@@ -46,7 +46,7 @@ function resizeHeader() {
 \r
 function headerScroll() {\r
     var s = $(window).scrollTop();\r
-    var h = $('header');\r
+    var h = $('#h');\r
 \r
     // If no move since last call, nothing to do\r
     if (s == formerScroll) {\r
@@ -61,7 +61,7 @@ function headerScroll() {
     if ($("#adminBar:visible").length > 0) {\r
         adminHeight = $("#adminBar").outerHeight()\r
     }\r
-    var headerHeight = $("header").outerHeight() * zoom;\r
+    var headerHeight = $(h).outerHeight() * zoom;\r
     if (scrollUp != goingUp) {\r
         lastDirChange = s;\r
         scrolledDistance = 0;\r
@@ -89,7 +89,11 @@ function headerScroll() {
         }\r
     }\r
     // Normalize top value\r
-    $("header").css('top', Math.max(-headerHeight, Math.min(adminHeight, htop + adminHeight)));\r
+    var top = Math.max(-headerHeight, Math.min(adminHeight, htop + adminHeight));\r
+    $(h).css('top', top);\r
+    var icon = $("#nav-icon");\r
+    $(icon).css('top', '');\r
+    $(icon).css('top', parseInt($(icon).css('top')) + top);\r
     // Update\r
     formerScroll = s;\r
     scrollUp = goingUp;\r

diff --git a/js/104-nav.js b/js/104-nav.js
new file mode 100644 (file)
index 0000000..16ad0ae
--- /dev/null
+++ b/js/104-nav.js
@@ -0,0 +1,80 @@
+registerLoader(load_nav, true);\r
+\r
+function load_nav() {\r
+    var menu = '<nav id="mmenu"><ul></ul></nav>';\r
+    $("body").append(menu);\r
+\r
+    var mdup = '';\r
+    $("#menu,#contactnav").find('>ul>li').each(function () {\r
+        mdup += $(this)[0].outerHTML;\r
+    });\r
+\r
+    $("#mmenu>ul").append(mdup);\r
+\r
+    var social = [];\r
+\r
+    $(".footer-social a").each(function () {\r
+        social.push($(this)[0].outerHTML);\r
+    });\r
+\r
+    fb(social);\r
+\r
+\r
+    $("#mmenu").mmenu({\r
+        offCanvas: {\r
+            position: "left",\r
+            zposition: "front"\r
+        },\r
+\r
+        dragOpen: {\r
+            open: true,\r
+            maxStart: 50,\r
+            threshold: 0,\r
+        },\r
+        dragClose: {\r
+            close: true,\r
+        },\r
+        extensions: [\r
+            "pagedim-black"\r
+        ],\r
+        navbars: [\r
+            {\r
+                "position": "bottom",\r
+                "content": social,\r
+            }\r
+        ]\r
+    }, {\r
+        dragOpen: {\r
+            width: {\r
+                perc: 1,\r
+                min: 320,\r
+                max: 610,\r
+            }\r
+        },\r
+        classNames: {\r
+            fixedElements: {\r
+                fixed: "header"\r
+            }\r
+        }\r
+    });\r
+    var mmenu = $('#mmenu').data('mmenu');\r
+\r
+    $("#nav-icon").on('click', function () {\r
+        if ($("html").hasClass('mm-opened')) {\r
+            mmenu.close();\r
+        } else {\r
+            mmenu.open();\r
+        }\r
+        return false;\r
+    });\r
+\r
+    // Remove navbar label when it's just a "menu"\r
+    $(".mm-navbar").each(function () {\r
+        if ($(this).find('a[href]').length == 0) {\r
+            $(this).parent().removeClass('mm-hasnavbar');\r
+            $(this).remove();\r
+        }\r
+    });\r
+\r
+    $("body").prepend($("#nav-icon"));\r
+}
\ No newline at end of file

diff --git a/less/002-common.less b/less/002-common.less
index e458e8ae960ace5d2d855e465f76ced625322548..ad0664f79f3568ed2c77e636169db2e4a4b76be9 100644 (file)
--- a/less/002-common.less
+++ b/less/002-common.less
@@ -9,7 +9,7 @@ html {
 }\r
 \r
 body {\r
-       background-color: @color-body-bg;\r
+       background-color: #fff;\r
        font-family: @body-font;\r
        font-size: 14px;\r
        line-height: 26/14;\r

diff --git a/less/101-header.less b/less/101-header.less
index 16228e264a450dee7973d7dd6e2c009267261cf9..54920d77e6aa8fb63df66b4d7696f028c323172d 100644 (file)
--- a/less/101-header.less
+++ b/less/101-header.less
@@ -1,12 +1,14 @@
 @import "000-imports";\r
 \r
-header {\r
+header#h {\r
+       transition: left 0.4s ease 0s;\r
+\r
        position: fixed;\r
        top: 0px;\r
-       //left: 50%;\r
        z-index: 10;\r
        transform-origin: 0 0 0;\r
 \r
+\r
        height: 90px;\r
        width: 100%;\r
        max-width: @content-max-width;\r
@@ -23,8 +25,8 @@ header {
                height: 96px !important;\r
        }\r
 \r
-       @media @m320 {\r
-               height: 50px !important;\r
+       @media @m768 {\r
+               height: 68px !important;\r
        }\r
 \r
        #header {\r
@@ -37,189 +39,17 @@ header {
                }\r
        }\r
 \r
-       nav {\r
-               font-family: @montserrat;\r
-               font-weight: 300;\r
-               a {\r
-                       text-transform: uppercase;\r
-                       text-decoration: none;\r
-                       font-size: 12px;\r
-                       color: @color-header-grey;\r
-\r
-                       &:hover {\r
-                               color: currentColor;\r
-                       }\r
-               }\r
-               ul {\r
-                       list-style: none;\r
-                       li {\r
-                               display: inline-block;\r
-                       }\r
-               }\r
-       }\r
-\r
-       nav#menu {\r
-               position: relative;\r
-               top: 57px;\r
-               left: 43.5%;\r
-               width: 800px;\r
-               margin-left: -400px;\r
-\r
-               display: inline-block;\r
-               text-align: center;\r
-               @media @m1280 {\r
-                       left: 312px !important;\r
-                       top: 24px !important;\r
-               }\r
-\r
-               @media @m1024 {\r
-                       left: 270px !important;\r
-               }\r
-\r
-               @media @m900 {\r
-                       display: none;\r
-               }\r
-\r
-               a {\r
-                       line-height: 9px;\r
-                       border: 1px solid transparent;\r
-                       padding-bottom: 13px;\r
-                       display: inline-block;\r
-               }\r
-\r
-               > ul {\r
-                       > li {\r
-\r
-                               margin: 0 25px;\r
-                               position: relative;\r
-\r
-                               @media @m1024 {\r
-                                       margin: 0 15px;\r
-                               }\r
-\r
-                               @media (max-width: 900px) {\r
-                                       margin: 0 7px;\r
-                               }\r
-\r
-                               > a {\r
-                                       position: relative;\r
-                                       &:after {\r
-                                               content: "";\r
-                                               height: 1px;\r
-                                               width: 0;\r
-                                               position: absolute;\r
-                                               background-color: @color-header-grey;\r
-                                               left: 0;\r
-                                               bottom: 0;\r
-                                               transition: @transition-time-buttons width;\r
-                                       }\r
-                               }\r
-\r
-                               &.active > a, a:hover {\r
-                                       color: @color-header-grey;\r
-                                       &:after {\r
-                                               width: 100%;\r
-                                       }\r
-                               }\r
-                               &:hover {\r
-                                       > ul {\r
-                                               display: block;\r
-                                       }\r
-                               }\r
-\r
-                               > ul {\r
-                                       position: absolute;\r
-                                       top: 40px;\r
-                                       left: -20px;\r
-                                       background-color: #fff;\r
-                                       box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);\r
-                                       white-space: nowrap;\r
-                                       display: none;\r
-                                       &:before {\r
-                                               content: "";\r
-                                               background-color: transparent;\r
-                                               height: 20px;\r
-                                               width: 100%;\r
-                                               top: -20px;\r
-                                               left: 0px;\r
-                                               position: absolute;\r
-                                       }\r
-\r
-                                       > li {\r
-                                               display: block;\r
-                                               text-align: left;\r
-\r
-                                               margin: 10px 20px;\r
-\r
-                                               a {\r
-                                                       transition: @transition-time-buttons color;\r
-                                               }\r
-\r
-                                               &.active a, a:hover {\r
-                                                       border-bottom-color: transparent;\r
-                                                       color: #e86f68;\r
-                                               }\r
-                                       }\r
-                               }\r
-                       }\r
-               }\r
-       }\r
-\r
-       nav#contactnav {\r
-               position: absolute;\r
-               right: 0;\r
-               bottom: 1px;\r
-\r
-               @media @m900 {\r
-                       bottom: -10px;\r
-               }\r
-\r
-               li {\r
-                       margin-left: 19px;\r
-                       @media (max-width: 900px ) {\r
-                               margin-left: 10px;\r
-                       }\r
-               }\r
-               a {\r
-                       .rounded-button();\r
-                       &.quoteLink {\r
-                               .background-button-green();\r
-                               color: #fff;\r
-                               @media @m640 {\r
-                                       display: none;\r
-                               }\r
-                       }\r
-                       &.agencies {\r
-                               .border-button-fill(@color-header-grey, #c2c4c7, 5%);\r
-                               @media @m900 {\r
-                                       display: none;\r
-                               }\r
-                       }\r
-                       .smallarrow-button(10px, 30px, 10px, 7px);\r
-\r
-                       @media @m1024 {\r
-                               padding-left: 15px;\r
-                               padding-right: 15px;\r
-                       }\r
-\r
-                       @media @m900 {\r
-                               padding-left: 29px;\r
-                               padding-right: 29px;\r
-                       }\r
-\r
-                       @media @m768 {\r
-                               padding-left: 15px;\r
-                               padding-right: 15px;\r
-                       }\r
-               }\r
-       }\r
-\r
        .logo {\r
                position: absolute;\r
                display: inline-block;\r
                top: 35px;\r
                height: 50px;\r
                width: 220px;\r
+               transition: all 0.4s;\r
+\r
+               //.mm-opening & {\r
+               //      transform: translateX(440px);\r
+               //}\r
 \r
                @media @m1280 {\r
                        top: 12px !important;\r
@@ -232,12 +62,8 @@ header {
                }\r
 \r
                @media @m768 {\r
-                       transform: scale(0.75);\r
-               }\r
-\r
-               @media @m320 {\r
-                       transform: scale(0.5);\r
-                       top: -5px !important;\r
+                       transform: scale(0.67);\r
+                       top: 6px !important;\r
                }\r
 \r
                .leave {\r
@@ -293,45 +119,4 @@ header {
                        }\r
                }\r
        }\r
-\r
-       .nav-icon {\r
-               display: none;\r
-\r
-               height: 37px;\r
-               color: #343c44;\r
-               text-transform: uppercase;\r
-               font-family: @montserrat;\r
-               font-size: 12px;\r
-               line-height: 9px;\r
-               font-weight: 300;\r
-               cursor: pointer;\r
-               position: absolute;\r
-               left: 0px;\r
-               bottom: 1px;\r
-\r
-               &:after {\r
-                       content: "b";\r
-                       font-family: @icons;\r
-                       text-transform: lowercase;\r
-                       position: absolute;\r
-                       top: 24px;\r
-                       left: 0px;\r
-                       font-size: 37px;\r
-                       @media @m640 {\r
-                               font-size: 30px;\r
-                               top: 20px;\r
-                               left:10px;\r
-                       }\r
-                       @media @m320 {\r
-                               font-size: 18px;\r
-                               top: 0px;\r
-                       }\r
-\r
-               }\r
-\r
-               @media @m900 {\r
-                       display: inline-block;\r
-               }\r
-\r
-       }\r
-}
\ No newline at end of file
+}\r

diff --git a/less/102-footer.less b/less/102-footer.less
index 52b17c225c52ec581079e6cf3573374e11185046..3fb5ca341717b24c6aa9fa71676862e75a5549f9 100644 (file)
--- a/less/102-footer.less
+++ b/less/102-footer.less
@@ -14,11 +14,11 @@ footer {
        a {
                color: #fff;
                text-decoration: none;
-        transition: color 0.2s;
+               transition: color 0.2s;
 
-        &:hover {
-          color: @color-green;
-        }
+               &:hover {
+                       color: @color-green;
+               }
        }
 }
 
@@ -79,27 +79,6 @@ footer.site {
                }
        }
 
-       .social-link {
-               margin-right: 20px;
-               display: inline-block;
-               border-radius: 50%;
-               border: 1px solid #fff;
-               transition: all 0.25s;
-
-               &:last-of-type {
-                       margin-right: 0;
-               }
-
-               &:hover {
-                       background-color: currentColor;
-                       border-color: currentColor;
-               }
-
-               img {
-                       display: block;
-               }
-       }
-
        .workshop {
                text-align: right;
 
@@ -127,6 +106,30 @@ footer.site {
        }
 }
 
+.social-link {
+       margin-right: 20px;
+       display: inline-block;
+       border-radius: 50%;
+       border: 1px solid #fff;
+       transition: all 0.25s;
+       height: 54px;
+       width: 54px;
+       color: #fff;
+
+       &:last-of-type {
+               margin-right: 0;
+       }
+
+       &:hover {
+               background-color: currentColor;
+               border-color: currentColor;
+       }
+
+       img {
+               display: block;
+       }
+}
+
 .footer-menu {
        line-height: 32/14;
        flex-grow: 2;

diff --git a/less/104-nav.less b/less/104-nav.less
new file mode 100644 (file)
index 0000000..f6f02fe
--- /dev/null
+++ b/less/104-nav.less
@@ -0,0 +1,260 @@
+@import "000-imports";\r
+\r
+nav {\r
+       font-family: @montserrat;\r
+       font-weight: 300;\r
+       a {\r
+               text-transform: uppercase;\r
+               text-decoration: none;\r
+               font-size: 12px;\r
+               color: @color-header-grey;\r
+\r
+               &:hover {\r
+                       color: currentColor;\r
+               }\r
+       }\r
+       ul {\r
+               list-style: none;\r
+               li {\r
+                       display: inline-block;\r
+               }\r
+       }\r
+}\r
+\r
+nav#menu {\r
+       position: relative;\r
+       top: 57px;\r
+       left: 43.5%;\r
+       width: 800px;\r
+       margin-left: -400px;\r
+\r
+       display: inline-block;\r
+       text-align: center;\r
+       @media @m1280 {\r
+               left: 312px !important;\r
+               top: 24px !important;\r
+       }\r
+\r
+       @media @m1024 {\r
+               left: 270px !important;\r
+       }\r
+\r
+       @media @m900 {\r
+               display: none;\r
+       }\r
+\r
+       a {\r
+               line-height: 9px;\r
+               border: 1px solid transparent;\r
+               padding-bottom: 13px;\r
+               display: inline-block;\r
+       }\r
+\r
+       > ul {\r
+               > li {\r
+\r
+                       margin: 0 25px;\r
+                       position: relative;\r
+\r
+                       @media @m1024 {\r
+                               margin: 0 15px;\r
+                       }\r
+\r
+                       @media (max-width: 900px) {\r
+                               margin: 0 7px;\r
+                       }\r
+\r
+                       > a {\r
+                               position: relative;\r
+                               &:after {\r
+                                       content: "";\r
+                                       height: 1px;\r
+                                       width: 0;\r
+                                       position: absolute;\r
+                                       background-color: @color-header-grey;\r
+                                       left: 0;\r
+                                       bottom: 0;\r
+                                       transition: @transition-time-buttons width;\r
+                               }\r
+                       }\r
+\r
+                       &.active > a, a:hover {\r
+                               color: @color-header-grey;\r
+                               &:after {\r
+                                       width: 100%;\r
+                               }\r
+                       }\r
+                       &:hover {\r
+                               > ul {\r
+                                       display: block;\r
+                               }\r
+                       }\r
+\r
+                       > ul {\r
+                               position: absolute;\r
+                               top: 40px;\r
+                               left: -20px;\r
+                               background-color: #fff;\r
+                               box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);\r
+                               white-space: nowrap;\r
+                               display: none;\r
+                               &:before {\r
+                                       content: "";\r
+                                       background-color: transparent;\r
+                                       height: 20px;\r
+                                       width: 100%;\r
+                                       top: -20px;\r
+                                       left: 0px;\r
+                                       position: absolute;\r
+                               }\r
+\r
+                               > li {\r
+                                       display: block;\r
+                                       text-align: left;\r
+\r
+                                       margin: 10px 20px;\r
+\r
+                                       a {\r
+                                               transition: @transition-time-buttons color;\r
+                                       }\r
+\r
+                                       &.active a, a:hover {\r
+                                               border-bottom-color: transparent;\r
+                                               color: #e86f68;\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+       }\r
+}\r
+\r
+nav#contactnav {\r
+       position: absolute;\r
+       right: 0;\r
+       bottom: 1px;\r
+\r
+       @media @m900 {\r
+               bottom: -10px;\r
+       }\r
+\r
+       @media @m768 {\r
+               bottom: 5px;\r
+       }\r
+\r
+       li {\r
+               margin-left: 19px;\r
+               @media (max-width: 900px ) {\r
+                       margin-left: 10px;\r
+               }\r
+       }\r
+       a {\r
+               .rounded-button();\r
+               &.quoteLink {\r
+                       .background-button-green();\r
+                       color: #fff;\r
+                       @media @m640 {\r
+                               display: none;\r
+                       }\r
+               }\r
+               &.agencies {\r
+                       .border-button-fill(@color-header-grey, #c2c4c7, 5%);\r
+                       @media @m900 {\r
+                               display: none;\r
+                       }\r
+               }\r
+               .smallarrow-button(10px, 30px, 10px, 7px);\r
+\r
+               @media @m1024 {\r
+                       padding-left: 15px;\r
+                       padding-right: 15px;\r
+               }\r
+\r
+               @media @m900 {\r
+                       padding-left: 29px;\r
+                       padding-right: 29px;\r
+               }\r
+\r
+               @media @m768 {\r
+                       padding-left: 15px;\r
+                       padding-right: 15px;\r
+               }\r
+       }\r
+}\r
+\r
+#nav-icon {\r
+       width: 31px;\r
+       height: 26px;\r
+       position: fixed;\r
+       transform: rotate(0deg);\r
+       cursor: pointer;\r
+       top: 36px;\r
+       left: 50px;\r
+       display: none;\r
+       z-index: 12;\r
+\r
+       @media @m900 {\r
+               display: block;\r
+       }\r
+\r
+       @media @m768 {\r
+               width: 18px;\r
+               height: 18px;\r
+               top: 25px;\r
+               left: 25px;\r
+       }\r
+\r
+       span {\r
+               display: block;\r
+               position: absolute;\r
+               height: 2px;\r
+               width: 100%;\r
+               background: #2a3743;\r
+               border-radius: 0px;\r
+               opacity: 1;\r
+               left: 0;\r
+               transform: rotate(0deg);\r
+               transition: .25s ease-in-out;\r
+\r
+               &:nth-child(1) {\r
+                       top: 0px;\r
+               }\r
+               &:nth-child(2) {\r
+                       top: 12px;\r
+                       @media @m768 {\r
+                               top: 8px;\r
+                       }\r
+               }\r
+\r
+               &:nth-child(3) {\r
+                       top: 24px;\r
+                       @media @m768 {\r
+                               top: 16px;\r
+                       }\r
+               }\r
+       }\r
+\r
+       .mm-opened & {\r
+               span {\r
+                       &:nth-child(1) {\r
+                               top: 12px;\r
+                               transform: rotate(135deg);\r
+                               @media @m768 {\r
+                                       top: 8px;\r
+                               }\r
+                       }\r
+                       &:nth-child(2) {\r
+                               opacity: 0;\r
+                               left: -30px;\r
+                       }\r
+                       &:nth-child(3) {\r
+                               top: 12px;\r
+                               transform: rotate(-135deg);\r
+                               @media @m768 {\r
+                                       top: 8px;\r
+                               }\r
+                       }\r
+               }\r
+       }\r
+}\r
+\r
+@import "105-mmenu";
\ No newline at end of file

diff --git a/less/105-mmenu.less b/less/105-mmenu.less
new file mode 100644 (file)
index 0000000..224b233
--- /dev/null
+++ b/less/105-mmenu.less
@@ -0,0 +1,150 @@
+@import "000-imports";\r
+\r
+#mmenu {\r
+       border-top: 90px solid #fff;\r
+       z-index: 11;\r
+       box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);\r
+\r
+       @media @m768 {\r
+               border-top-width: 68px;\r
+       }\r
+}\r
+\r
+.mm-menu {\r
+       background-color: #fff;\r
+}\r
+\r
+html.mm-front #mm-blocker {\r
+       z-index: 10;\r
+}\r
+\r
+#mm-0 {\r
+       transform: none !important;\r
+}\r
+\r
+.mm-listview > li:not(.mm-divider)::after {\r
+       left: 9px;\r
+       right: 9px;\r
+       border-color: #d6d8da;\r
+}\r
+\r
+.mm-listview > li > a, .mm-listview > li > span {\r
+       color: #343c44;\r
+       font-size: 12px;\r
+       padding: 20px 50px;\r
+       @media @m768 {\r
+               padding: 20px 25px;\r
+       }\r
+       transition: color @transition-time-buttons;\r
+       &:hover {\r
+               color: #86a542;\r
+       }\r
+}\r
+\r
+.mm-listview .mm-next::before {\r
+       border-left-width: 0;\r
+}\r
+\r
+.mm-arrow::after, .mm-next::after {\r
+       right: 45px;\r
+}\r
+\r
+.mm-arrow, .mm-next, .mm-prev {\r
+       &:after {\r
+               content: ">";\r
+               border: 0;\r
+               font-family: @icons;\r
+               color: #343c44;\r
+               transform: translate3d(0, 0, 0);\r
+               font-size: 20px;\r
+               top: -10px;\r
+       }\r
+       &:hover {\r
+               &:after {\r
+                       color: #86a542;\r
+               }\r
+       }\r
+}\r
+\r
+.mm-prev {\r
+       &:before {\r
+               border: 0;\r
+       }\r
+       &:after {\r
+               content: "<";\r
+       }\r
+}\r
+\r
+.mm-navbar {\r
+       left: 9px;\r
+       right: 9px;\r
+       height: 60px;\r
+       padding-left: 0;\r
+       padding-right: 0;\r
+\r
+       .mm-prev {\r
+               display: none;\r
+       }\r
+\r
+       .mm-title {\r
+               font-size: 12px;\r
+               padding: 20px 20px 20px 60px;\r
+               @media @m768 {\r
+                       padding: 20px;\r
+               }\r
+               text-align: left;\r
+               color: #a5acb2;\r
+               top: -5px;\r
+               position: relative;\r
+\r
+               &:before {\r
+                       content: "<";\r
+                       font-family: @icons;\r
+                       font-size: 22px;\r
+                       position: relative;\r
+                       left: -22px;\r
+                       top: 5px;\r
+\r
+                       @media @m768 {\r
+                               left: -10px;\r
+                       }\r
+               }\r
+       }\r
+\r
+       &:hover {\r
+\r
+               .mm-title {\r
+                       color: #86a542 !important;\r
+               }\r
+       }\r
+}\r
+\r
+.mm-panels > .mm-panel > .mm-navbar + .mm-listview {\r
+       margin-top: 0px;\r
+}\r
+\r
+.mm-panel > *:first-child {\r
+\r
+       &:before {\r
+               content: "";\r
+               position: absolute;\r
+               border-top: 1px solid #d6d8da;\r
+               left: 9px;\r
+               right: 9px;\r
+               top: 0;\r
+               display: block;\r
+       }\r
+}\r
+\r
+.mm-panel > .mm-navbar:first-child {\r
+       &:before {\r
+               left: 0;\r
+               right: 0;\r
+       }\r
+}\r
+\r
+#mmenu {\r
+       .social-link {\r
+               color: #a5acb2;\r
+       }\r
+}\r