Left menu design

7 files changed, 413 insertions, 237 deletions

diff --git a/plugins/CoreHome/stylesheets/coreHome.less b/plugins/CoreHome/stylesheets/coreHome.less
index f9659cb85b..2e0277acf9 100644
--- a/plugins/CoreHome/stylesheets/coreHome.less
+++ b/plugins/CoreHome/stylesheets/coreHome.less
@@ -1,8 +1,7 @@
 .home {
     h2 {
         font-size: 18px;
-        padding: 12px 0 7px 0;
-        clear: both;
+        padding: 16px 0 16px 0;
         border: none;
         margin: 0;
     }
@@ -18,21 +17,19 @@
     }
 }
 
-.nav_sep {
-    height: 39px;
-    border-radius: 0 4px 0 0;
-    border: 1px solid #DDD;
-}
-
-.pageWrap {
-    margin-top: 15px;
-    font-size: 13px;
-}
-
 /* Content */
 #content.home {
-    padding-top: 5px;
     font-size: 14px;
+    display: inline-block;
+    width: 100%;
+
+    > h2:first-child {
+        padding-top: 7px;
+    }
+}
+
+#content.admin {
+    display: inline-block;
 }
 
 /* 2 columns reports */
@@ -203,10 +200,6 @@ a.Piwik_Popover_Error_Back {
     margin: 10px auto 5px !important;
 }
 
-.header_short #updateCheckLinkContainer .icon {
-  display: none;
-}
-
 .header_full #updateCheckLinkContainer {
   margin-top: -2px;
 }
@@ -222,39 +215,6 @@ a.Piwik_Popover_Error_Back {
   width: 160px;
 }
 
-#updateCheckLinkContainer {
-  opacity: 0.7;
-}
-
-#updateCheckLinkContainer:hover {
-  opacity: 1;
-}
-
-#updateCheckLinkContainer {
-    float: right;
-    cursor: pointer;
-}
-
-#updateCheckLinkContainer>* {
-    vertical-align: middle;
-}
-
-#header_message #checkForUpdates {
-    font-size: 10px;
-    line-height: 16px;
-    display: inline-block;
-    vertical-align: middle;
-    text-transform: uppercase;
-}
-
-#header_message #checkForUpdates {
-  text-decoration: none;
-}
-
-#header_message #checkForUpdates:hover {
-    text-decoration: underline;
-}
-
 /* Used to link within content text, without adding visual clutter */
 .linkContent { color:#333; text-decoration:none}
 .linkContent:hover { text-decoration:underline;}
diff --git a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
index 3544f17723..4b5f8321b2 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
@@ -168,7 +168,7 @@ div.dataTable, div.dataTable > .dataTableWrapper {
   color: #888;
   text-align: left;
   margin: 10px;
-  margin-left: 12px;
+  margin-left: 1px;
 }
 
 .dataTablePages {
@@ -593,7 +593,7 @@ tr td.label img.plusMinus {
 .pk-emptyDataTable {
   padding-top: 20px;
   padding-bottom: 10px;
-  padding-left: 11px;
+  padding-left: 1px;
 }
 
 .widget .pk-emptyDataTable {
diff --git a/plugins/CoreHome/stylesheets/jquery.ui.autocomplete.css b/plugins/CoreHome/stylesheets/jquery.ui.autocomplete.css
index c3077b7b5f..8bac824f1c 100644
--- a/plugins/CoreHome/stylesheets/jquery.ui.autocomplete.css
+++ b/plugins/CoreHome/stylesheets/jquery.ui.autocomplete.css
@@ -59,7 +59,7 @@
 }
 
 .ui-corner-all {
-    border-radius: 4px;
+    border-radius: 0;
 }
 
 .ui-menu .ui-menu-item a.ui-state-focus {
diff --git a/plugins/CoreHome/stylesheets/layout.less b/plugins/CoreHome/stylesheets/layout.less
new file mode 100644
index 0000000000..7b140d3ab3
--- /dev/null
+++ b/plugins/CoreHome/stylesheets/layout.less
@@ -0,0 +1,390 @@
+ #header {
+  padding: 0 15px;
+  background-color: @theme-color-background-base;
+  height: 50px;
+
+  /* Clear fix */
+  &:after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+
+  .icon-menu-hamburger {
+     display: none;
+  }
+
+  #logo {
+  }
+
+  #topRightBar {
+    li {
+      display: inline-block;
+    }
+
+    .topBarElem {
+      color: @theme-color-text;
+      text-decoration: none;
+      padding: 14px 12px;
+      display: inline-block;
+      height: 100%;
+      transition: background-color 150ms linear;
+
+      &:hover {
+        background-color: @theme-color-menu-contrast-background;
+      }
+
+      &.active {
+        color: @theme-color-brand;
+      }
+
+      .menuDropdown {
+        color: @theme-color-text;
+        .title:after {
+          color: @theme-color-text;
+          border-top-color: @theme-color-text;
+        }
+      }
+    }
+
+    .navbar-right {
+        height: 48px;
+        position: absolute;
+        right: 10px;
+        font-size: 13px;
+    }
+  }
+}
+
+ .navbar {
+   a {
+     text-decoration: none;
+     &:hover, &:focus, &:active {
+       text-decoration: none;
+     }
+   }
+ }
+
+ // start #secondNavBar fadeInLeft animation
+ @-webkit-keyframes fadeInLeft {
+   0% {
+     opacity: 0;
+     -webkit-transform: translateX(-20px);
+   }
+   100% {
+     opacity: 1;
+     -webkit-transform: translateX(0);
+   }
+ }
+ @keyframes fadeInLeft {
+   0% {
+     opacity: 0;
+     transform: translateX(-20px);
+   }
+   100% {
+     opacity: 1;
+     transform: translateX(0);
+   }
+ }
+ // end #secondNavBar fadeInLeft animation
+
+#root {
+
+  .pageWrap {
+    padding-left: 18px;
+    padding-right: 15px;
+  }
+
+  #secondNavBar + .pageWrap {
+    margin-left: 224px;
+  }
+
+  #root>.top_controls {
+    margin-left:15px;
+    margin-right:15px;
+  }
+
+  @media all and (max-width: 749px) {
+    .pageWrap {
+      margin-left: 0 !important;
+    }
+
+    #header {
+      min-height: 50px;
+      height: auto;
+    }
+
+    #topRightBar {
+      .navbar-right {
+        text-align: left;
+        margin-left: 2px;
+        display: inline-block;
+        position: relative;
+        height: auto;
+        min-height: 48px;
+      }
+    }
+
+    #navbar-collapse1 {
+      margin-left: 45px;
+    }
+
+    #secondNavBar {
+      z-index: 9999;
+      position: absolute;
+      border-right: 1px solid @theme-color-background-tinyContrast;
+      border-top: 1px solid @theme-color-background-tinyContrast;
+      -webkit-box-shadow: 4px 4px 18px 1px rgba(0,0,0,0.75);
+      -moz-box-shadow: 4px 4px 18px 1px rgba(0,0,0,0.75);
+      box-shadow: 4px 4px 18px 1px rgba(0,0,0,0.75);
+      -webkit-animation-duration: 0.3s;
+      animation-duration: 0.3s;
+      -webkit-animation-fill-mode: both;
+      animation-fill-mode: both;
+      -webkit-animation-timing-function: linear;
+      animation-timing-function: linear;
+
+      display: none;
+      &.open {
+        display: block;
+        -webkit-animation-name: fadeInLeft;
+        animation-name: fadeInLeft;
+      }
+
+      #search {
+        display: none;
+      }
+    }
+
+
+    .top_controls {
+      height: auto;
+    }
+
+    .top_controls .piwikTopControl {
+      position: static !important;
+      margin: 0 0 10px;
+      float: none;
+    }
+
+    .icon-menu-hamburger {
+      padding: 10px 10px 10px;
+      display: inline-block;
+      float: left;
+      cursor: pointer;
+      font-size: 23px;
+    }
+
+    #logo {
+      display: none;
+    }
+
+  }
+
+  #ajaxLoadingDiv {
+    margin-top: 10px;
+  }
+
+  #secondNavBar {
+    width: 224px;
+    float:left;
+
+    #search {
+      padding: 8px 0 13px 8px;
+      height: 61px;
+
+      .quick-access {
+        z-index: 1000;
+        position: absolute;
+        width: 216px;
+        input {
+          height: 33px;
+          font-size: 11px;
+          padding: 10px 12px 10px 10px;
+        }
+      }
+    }
+
+    .navbar {
+      background-color: @theme-color-menu-contrast-background;
+      border-bottom: 1px solid @theme-color-menu-contrast-background;
+
+      .menu-icon {
+        padding-right: 13px;
+      }
+
+      > li {
+        display: inline-block;
+        width: 100%;
+        .border-radius(0px);
+        border: 0;
+        background: none;
+
+        .item {
+          display: inline-block;
+          width: 100%;
+          font-family: Verdana, sans-serif;
+          .font-default(13px, 21px);
+          padding: 12px 21px 12px 19px;
+          color: @theme-color-menu-contrast-text;
+          decoration: none !important;
+          word-break: break-word;
+
+          &:hover, &:focus {
+            decoration: none !important;
+          }
+        }
+
+        > .item {
+          cursor: default;
+          font-weight: bold;
+          &:hover {
+            text-decoration: none;
+          }
+        }
+
+        > ul {
+
+          li {
+            .item {
+              .font-default(13px, 16px);
+              padding: 11px 22px 11px 45px;
+              decoration: none;
+              transition: background-color 200ms linear;
+              &:hover {
+                text-decoration: none;
+                color: @theme-color-menu-contrast-textActive;
+              }
+            }
+
+            &.sfActive {
+              .item {
+                background-color: @theme-color-background-base;
+                decoration: none;
+              }
+            }
+          }
+        }
+      }
+
+
+      .menuDropdown {
+
+        .items {
+          width: 224px;
+          background-color: @theme-color-background-base;
+          border: 1px solid @theme-color-background-tinyContrast;
+          box-shadow: 0 1px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+          border: 1px solid #f2f2f2 !important;
+
+          .search {
+            margin: 15px 16px 10px 17px;
+          }
+
+          .item {
+            padding: 10px 16px 4px !important;
+            min-height: 25px;
+            height: auto;
+          }
+        }
+
+        .title {
+          color: @theme-color-menu-contrast-text;
+          display: block;
+          padding: 15px 22px 11px 45px;
+          font-size: 13px;
+          font-weight: normal;
+
+          &:hover {
+            color: @theme-color-menu-contrast-textActive;
+          }
+
+          &:after {
+            color: @theme-color-menu-contrast-text;
+            border-top: 5px solid @theme-color-menu-contrast-text;
+            top: 20px;
+            right: 3px;
+          }
+        }
+      }
+    }
+
+    &.Menu--dashboard .navbar > li {
+      > ul {
+        display: none;
+
+        @media all and (max-width: 749px) {
+          display: block;
+        }
+      }
+
+      > .item {
+        cursor: pointer;
+        &:hover {
+          color: @theme-color-menu-contrast-textActive;
+        }
+      }
+
+      &.sfActive {
+        ul {
+          display: block;
+        }
+
+        .icon-arrow-right:before {
+          content: "\e63b";
+        }
+      }
+    }
+
+    &.Menu--admin .navbar > li {
+      > .item {
+        padding: 14px 21px 6px 14px;
+      }
+      .item .icon-arrow-right:before {
+        content: "\e63b";
+      }
+    }
+  }
+}
+
+#root {
+  .top_controls {
+    .piwikTopControl {
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+  }
+}
+
+#root, #standalone {
+  .top_controls {
+    min-height: 51px;
+    position: relative;
+    background-color: @theme-color-background-base;
+    height: auto;
+    margin-bottom: 10px;
+
+    .piwikTopControl {
+      display: inline-block;
+      float: none;
+      position: absolute;
+      margin-right: 18px;
+      vertical-align: top;
+      font-size: 11px;
+    }
+  }
+
+  .borderedControl {
+    background-color: @theme-color-background-base;
+    border: 1px solid @theme-color-background-tinyContrast;
+    transition: box-shadow 150ms linear;
+    &.expanded,
+    &:hover {
+      box-shadow: 0 1px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+    }
+  }
+}
+
+.widgetize {
+  width: auto;
+}
diff --git a/plugins/CoreHome/stylesheets/menu.less b/plugins/CoreHome/stylesheets/menu.less
deleted file mode 100644
index 76c8b90238..0000000000
--- a/plugins/CoreHome/stylesheets/menu.less
+++ /dev/null
@@ -1,177 +0,0 @@
-.Menu--dashboard {
-  position: relative;
-
-  .menuDropdown {
-
-    .items {
-      width: 250px;
-
-      .search {
-        margin: 15px 16px 10px 17px;
-      }
-
-      .item {
-        padding: 10px 16px 4px !important;
-        min-height: 25px;
-        height: auto;
-      }
-    }
-
-    .title {
-      color: @theme-color-menu-contrast-text;
-      display: block;
-      padding: 15px 22px 11px;
-      font-size: 15px;
-      font-weight: normal;
-
-      &:hover {
-        color: @theme-color-menu-contrast-textActive;
-      }
-
-      &:after {
-        color: @theme-color-menu-contrast-text;
-        border-top: 5px solid @theme-color-menu-contrast-text;
-        top: 20px;
-        right: 3px;
-      }
-    }
-  }
-}
-
-.Menu--dashboard > .Menu-tabList {
-    line-height: 1;
-    display: table;      // The nav has the height og his children
-    margin-bottom: -1px; // Allow tabs to merge with the submenu
-}
-
-.Menu--dashboard > .Menu-tabList ul {
-    background: @theme-color-background-base; /*IE6 needs this*/
-    float: left;
-    position: relative;
-}
-
-/* LEVEL1 NORMAL */
-.Menu--dashboard > .Menu-tabList > li {
-    background: #f1f1f1;
-    float: left;
-    list-style: none;
-    z-index: 49;
-    margin-right: -1px;
-    border: 1px solid #ddd;
-    border-bottom: 0;
-    border-radius: 4px 4px 0 0;
-}
-
-.Menu--dashboard > .Menu-tabList a {
-    color: @theme-color-text-light;
-    font-size: 18px;
-    display: block;
-    float: left;
-    padding: 8px 27px 0;
-    height: 50px;
-    text-decoration: none;
-    font-weight: normal;
-}
-
-/* LEVEL1 HOVER */
-.Menu--dashboard > .Menu-tabList > li:hover,
-.Menu--dashboard > .Menu-tabList > li.sfHover {
-    background: @theme-color-background-base;
-}
-
-.Menu--dashboard > .Menu-tabList > li:hover > a,
-.Menu--dashboard > .Menu-tabList > li.sfHover > a,
-.Menu--dashboard > .Menu-tabList > li.sfActive > a,
-.Menu--dashboard > .Menu-tabList a:hover {
-    color: @theme-color-link;
-}
-
-.Menu--dashboard > .Menu-tabList > li:hover > a {
-    text-decoration: underline;
-}
-
-.Menu--dashboard > .Menu-tabList > li.sfHover > a {
-    border-bottom: 1px solid #fff;
-}
-
-/* LEVEL2 NORMAL */
-.Menu--dashboard > .Menu-tabList > li ul {
-  padding: 9px 0 5px 0;
-  left: 0;
-  top: -999em;
-  position: absolute;
-  min-height: 25px;
-  width: 100%;
-  background: none;
-}
-
-.Menu--dashboard > .Menu-tabList > li li {
-    float: left;
-    background: none;
-    border: 0;
-    text-align: center;
-}
-
-.Menu--dashboard > .Menu-tabList > li li > a {
-    padding: 5px 15px;
-    font-size: 14px;
-    border: 0;
-    float: none;
-    display: inline-block;
-    height: auto;
-    background: none;
-    color: @theme-color-text-light;
-    text-decoration: none;
-}
-
-/* LEVEL2 HOVER */
-.Menu--dashboard > .Menu-tabList > li.sfHover ul,
-.Menu--dashboard > .Menu-tabList > li:hover ul {
-  z-index: 130;
-  top: 100%;
-  opacity: 1;
-  -webkit-transition: opacity 300ms ease-out 10ms; /* property duration timing-function delay */
-  -moz-transition: opacity 300ms ease-out 10ms;
-  -o-transition: opacity 300ms ease-out 10ms;
-  transition: opacity 300ms ease-out 10ms;
-}
-
-/* for screen readers */
-.Menu--dashboard a span.hidden {
-  height: 1px;
-  width: 1px;
-  position: absolute;
-  overflow: hidden;
-  top: 0;
-}
-
-
-.Menu--dashboard > .Menu-tabList > li li:hover > a,
-.Menu--dashboard > .Menu-tabList > li li.sfHover > a {
-    color: @theme-color-link;
-}
-
-.Menu--dashboard > .Menu-tabList > li li.sfHover > a {
-    font-weight: bold;
-    text-decoration: none !important;
-}
-
-@media all and (max-width: 949px) {
-  .nav {
-    clear: right;
-  }
-}
-
-@media all and (max-width: 749px) {
-  .Menu--dashboard > .Menu-tabList a {
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-}
-
-@media all and (max-width: 549px) {
-  .Menu--dashboard > ul.Menu-tabList > li.sfHover > a,
-  .Menu--dashboard > ul.Menu-tabList > li.sfActive.sfHover > a {
-    border-bottom: 0;
-  }
-}
\ No newline at end of file
diff --git a/plugins/CoreHome/stylesheets/notification.less b/plugins/CoreHome/stylesheets/notification.less
index 36f7085f6f..cab47a40a5 100644
--- a/plugins/CoreHome/stylesheets/notification.less
+++ b/plugins/CoreHome/stylesheets/notification.less
@@ -1,8 +1,5 @@
 #content.admin #notificationContainer {
-  width: 750px;
-  display: table-header-group; /* no overlap with About Piwik box */
-
   .notification {
-    margin: 10px;
+    margin: 0 0 10px 0;
   }
 }
\ No newline at end of file
diff --git a/plugins/CoreHome/stylesheets/zen-mode.less b/plugins/CoreHome/stylesheets/zen-mode.less
index 124c3395ff..0b9f619ea7 100644
--- a/plugins/CoreHome/stylesheets/zen-mode.less
+++ b/plugins/CoreHome/stylesheets/zen-mode.less
@@ -82,13 +82,19 @@
   }
 
   h2 {
+    padding-left: 0;
+    font-size: 21px;
+    padding: 16px 0 12px 0;
+  }
+}
+
+#root #dashboard .widget {
+  h2 {
     padding-left: 10px;
-    font-size: 24px;
   }
 }
 
 .widget {
-
   h2:nth-of-type(n+2) {
     padding-top: 40px!important;
     margin-top: 0!important;