[FEATURE] Add new sub-navigation-design.

t3kit · Jun 9, 2016 · 0a502e2 · 0a502e2
1 parent 7b4536c
commit 0a502e2
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 32 deletions.
diff --git a/dev/styles/customVariables.less b/dev/styles/customVariables.less
@@ -67,10 +67,10 @@
 @sub-navigation-link-color:         darken(@main-text-color, 20%);
 // @sub-navigation-link-color:         @main-text-color;
 @sub-navigation-link-hover-color:   @sub-navigation-link-color;
-@sub-navigation-link-hover-bg:      darken(@main-body-bg, 10%);
+@sub-navigation-link-hover-bg:      darken(@main-body-bg, 5%);
 
-@sub-navigation-link-active-color:  @sub-navigation-link-color;
-@sub-navigation-link-active-bg:     fade(@main-color, 20%);
+@sub-navigation-link-active-color:  @nav-link-color; //@sub-navigation-link-color;
+@sub-navigation-link-active-bg:     @main-color; //fade(@main-color, 20%);
 
 
 

diff --git a/dev/styles/main/nav/subNavigation.less b/dev/styles/main/nav/subNavigation.less
@@ -8,7 +8,8 @@
 }
 
 .sub-navigation__wrp {
-
+    border: 1px solid shade(@sub-navigation-border, 5%);
+    border-width: 1px 0 0 0;
 }
 
 .sub-navigation__item-list {
@@ -18,52 +19,60 @@
 }
 .sub-navigation__link {
     display: block;
-    padding: 10px 30px;
-    padding-left: 18px;
+    padding: 19px 15px 19px 20px;
     color: @sub-navigation-link-color;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-tap-highlight-color: rgba(120, 120, 120, 0.3);
     letter-spacing: 0.2px;
-    transition: all 0.2s linear;
-    border-bottom: 1px solid @sub-navigation-border;
+    transition: all 0.1s linear;
+    border: 1px solid shade(@sub-navigation-border, 5%);
+    border-width: 0 0 1px 0;
+}
+
+.sub-navigation__link._sub-level-2 {
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.no-touch .sub-navigation__link:hover {
+    color: @sub-navigation-link-hover-color;
+    background: @sub-navigation-link-hover-bg;
+}
+
+.no-touch .sub-navigation__link._active:hover {
+    background-color: @sub-navigation-link-hover-bg;
 }
 
 .sub-navigation__link._sub-level-3 {
-    padding: 8px 15px;
-    padding-left: 25px;
-    font-size: 14px;
-    background-color: darken(@sub-navigation-background, 6%);
+    padding-left: 27px;
+    background-color: shade(@sub-navigation-background, 6%);
+    border-color: shade(@sub-navigation-border, 11%);
+    text-transform: uppercase;
+}
 
+.no-touch .sub-navigation__link._sub-level-3:hover {
+    background-color: shade(@sub-navigation-link-hover-bg, 6%);
 }
 
 .sub-navigation__link._sub-level-4 {
-    padding: 8px 17px;
-    padding-left: 25px;
-    font-size: 14px;
-    margin-left: 18px;
+    padding-left: 34px;
+    background-color: shade(@sub-navigation-background, 9%);
+    border-color: shade(@sub-navigation-border, 14%);
 }
 
-.sub-navigation__link._sub-level-5 {
-    padding: 8px 19px;
-    padding-left: 25px;
-    font-size: 14px;
-    margin-left: 26px;
+.no-touch .sub-navigation__link._sub-level-4:hover {
+    background-color: shade(@sub-navigation-link-hover-bg, 9%);
 }
 
-.no-touch .sub-navigation__link:hover {
-    color: @sub-navigation-link-hover-color;
-    background: @sub-navigation-link-hover-bg;
+.sub-navigation__link._sub-level-5 {
+    padding-left: 41px;
+    background-color: shade(@sub-navigation-background, 12%);
+    border-color: shade(@sub-navigation-border, 17%);
 }
 
-.sub-navigation__link._active {
-        background-color: @sub-navigation-link-hover-bg;
-        z-index: 2;
-        position: relative;
-        border-left: 3px solid fade(@sub-navigation-active-border, 30%);
-}
-.no-touch .sub-navigation__link._active:hover {
-        background-color: @sub-navigation-link-hover-bg;
+.no-touch .sub-navigation__link._sub-level-5:hover {
+    background-color: shade(@sub-navigation-link-hover-bg, 12%);
 }
 
 .sub-navigation__link._curent {
@@ -72,5 +81,10 @@
     background: @sub-navigation-link-active-bg;
 }
 
+.no-touch .sub-navigation__link._curent:hover {
+    background: shade(@sub-navigation-link-active-bg, 9%);
+    color: @sub-navigation-link-active-color;
+}
+
 // =========================================================
 // =========================================================