wip #539 @6

diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml
index 45bbca99d6617e81edc5d58b5101be7466ebe317..adde5c049adfaea2a52686db8e9e5fce21558b0c 100644 (file)
--- a/framework/application/views/scripts/common/header.phtml
+++ b/framework/application/views/scripts/common/header.phtml
@@ -14,7 +14,7 @@ if (!is_null($homepage)) {
 $header = $this->headerLogo();\r
 $header .= $this->headerNav();\r
 $header .= $this->headerContactNav();\r
-$header .= '<div class="nav-icon"><div></div></div>';\r
+$header .= '<div class="nav-icon"></div>';\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

diff --git a/js/101-header.js b/js/101-header.js
index c13f7b5a7a1d08287246b03a201d74376ae80103..36a01ed83aab640013e58bb0dc81098882508450 100644 (file)
--- a/js/101-header.js
+++ b/js/101-header.js
@@ -13,18 +13,20 @@ function load_header() {
     htl = new TimelineMax();\r
     // Background-color & height\r
     htl.add(TweenMax.fromTo(h, 1.5, {height: 90}, {height: 75}), 0);\r
+    htl.add(TweenMax.fromTo(h, 1, {backgroundColor: 'transparent', boxShadow: '0 0 0 rgba(0,0,0,0)'}, {backgroundColor: "#fff", boxShadow: '0 0 120px rgba(0,0,0,0.3)'}), 1);\r
     htl.add(TweenMax.fromTo($(h).find('#header'), 1.5, {height: 90}, {height: 56}), 0);\r
+\r
     // Logo\r
     var logo = $(h).find('.logo');\r
-    htl.add(TweenMax.fromTo($(logo), 1.5, {top: 35}, {top: 12}), 0);\r
+    htl.add(TweenMax.fromTo($(logo), 1, {top: 35}, {top: 12}), 0);\r
     // Navigation\r
     var nav = $(h).find('#menu');\r
     htl.add(TweenMax.fromTo(nav, 1.5, {top: 57}, {top: 24}), 0);\r
     //Typo logo\r
-    htl.add(TweenMax.fromTo($(logo).find('.text'), 1, {opacity: 1}, {opacity: 0}), 1.5);\r
+    htl.add(TweenMax.fromTo($(logo).find('.text'), 1, {opacity: 1}, {opacity: 0}), 0);\r
     // Menu position\r
-    htl.add(TweenMax.fromTo(nav, 1, {left: '50%'}, {left: 312}), 2);\r
-    htl.add(TweenMax.fromTo(h, 1, {backgroundColor: 'transparent', boxShadow: '0 0 0 rgba(0,0,0,0)'}, {backgroundColor: "rgba(255, 255, 255, 1)", boxShadow: '0 0 120px rgba(0,0,0,0.3)'}), 2);\r
+    htl.add(TweenMax.fromTo(nav, 1, {left: '43.5%'}, {left: 312}), 2);\r
+\r
     htl.stop();\r
 \r
     $(window).on('cubeitresize', resizeHeader);\r
@@ -36,7 +38,9 @@ function load_header() {
 }\r
 \r
 function resizeHeader() {\r
-    headerScroll();\r
+    setTimeout(function () {\r
+        headerScroll();\r
+    }, 100);\r
 }\r
 \r
 \r
@@ -53,7 +57,10 @@ function headerScroll() {
     if (formerScroll < s) {\r
         goingUp = false;\r
     }\r
-    var adminHeight = $("#adminBar").outerHeight();\r
+    var adminHeight = 0;\r
+    if ($("#adminBar:visible").length > 0) {\r
+        adminHeight = $("#adminBar").outerHeight()\r
+    }\r
     var headerHeight = $("header").outerHeight() * zoom;\r
     if (scrollUp != goingUp) {\r
         lastDirChange = s;\r

diff --git a/less/001-variables.less b/less/001-variables.less
index dc99949787eed392727056506f1f2aa9c9572dce..8142d5d2cf0f87e081120f410494fa30b48bd0db 100644 (file)
--- a/less/001-variables.less
+++ b/less/001-variables.less
@@ -26,4 +26,12 @@
 @content-max-width: 1680px;
 
 // -- transition times
-@transition-time-buttons:200ms;
\ No newline at end of file
+@transition-time-buttons: 200ms;
+
+//-- Break points
+@m1280: ~"(max-width: 1280px)";
+@m1024: ~"(max-width: 1024px)";
+@m900: ~"(max-width: 900px)";
+@m768: ~"(max-width: 768px)";
+@m640: ~"(max-width: 640px)";
+@m320: ~"(max-width: 320px)";
\ No newline at end of file

diff --git a/less/010-admin.less b/less/010-admin.less
index 25a4c861e35b967367a929f9a99391b61a6b2ee7..1f4f8d20a2ed2e8def95d4a0068a03e4847319e5 100644 (file)
--- a/less/010-admin.less
+++ b/less/010-admin.less
@@ -14,6 +14,10 @@
                        color:#c00;\r
                }\r
        }\r
+\r
+       @media @m1280{\r
+               display: none;\r
+       }\r
 }\r
 \r
 \r

diff --git a/less/101-header.less b/less/101-header.less
index d2a3f3c63fc80bcaad959a3ef5d420386bf5fa03..16228e264a450dee7973d7dd6e2c009267261cf9 100644 (file)
--- a/less/101-header.less
+++ b/less/101-header.less
@@ -15,12 +15,26 @@ header {
        padding: 0 5%;\r
        vertical-align: bottom;\r
 \r
+       @media @m1280 {\r
+               height: 75px !important;\r
+       }\r
+\r
+       @media @m900 {\r
+               height: 96px !important;\r
+       }\r
+\r
+       @media @m320 {\r
+               height: 50px !important;\r
+       }\r
 \r
        #header {\r
                height: 90px;\r
                width: 100%;\r
                position: relative;\r
                transform-origin: 0 0 0;\r
+               @media @m1280 {\r
+                       height: 56px !important;\r
+               }\r
        }\r
 \r
        nav {\r
@@ -42,18 +56,29 @@ header {
                                display: inline-block;\r
                        }\r
                }\r
-\r
        }\r
 \r
        nav#menu {\r
                position: relative;\r
                top: 57px;\r
-               left: 50%;\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
@@ -68,6 +93,14 @@ header {
                                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
@@ -118,14 +151,13 @@ header {
 \r
                                                margin: 10px 20px;\r
 \r
-                                               a{\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
@@ -138,19 +170,47 @@ header {
                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
@@ -161,12 +221,41 @@ header {
                height: 50px;\r
                width: 220px;\r
 \r
+               @media @m1280 {\r
+                       top: 12px !important;\r
+               }\r
+\r
+               @media @m900 {\r
+                       left: 50%;\r
+                       margin-left: -110px;\r
+                       top: 15px !important;\r
+               }\r
+\r
+               @media @m768 {\r
+                       transform: scale(0.75);\r
+               }\r
+\r
+               @media @m320 {\r
+                       transform: scale(0.5);\r
+                       top: -5px !important;\r
+               }\r
+\r
                .leave {\r
                        position: absolute;\r
                        top: 0;\r
                        left: 0;\r
                }\r
 \r
+               .text {\r
+                       @media @m1280 {\r
+                               display: none;\r
+                       }\r
+                       @media @m900 {\r
+                               display: block;\r
+                               opacity: 1 !important;\r
+                       }\r
+               }\r
+\r
                .text-white, .text-dark {\r
                        position: absolute;\r
                        left: 35px;\r
@@ -204,4 +293,45 @@ 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