[REFACTOR] restyling sub-navigation

t3kit · May 19, 2016 · 021025c · 021025c
1 parent 21cea7b
commit 021025c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 39 deletions.
diff --git a/dev/styles/customVariables.less b/dev/styles/customVariables.less
@@ -55,7 +55,7 @@
 
 // Breadcrumbs
 @breadcrumbs-background:        @main-body-bg;
-@breadcrumbs-link-color:        @main-text-color;
+@breadcrumbs-link-color:        darken(@main-text-color, 20%);
 @breadcrumbs-link-active-color: @main-color;
 @breadcrumbs-link-hover-color:  lighten(@main-text-color, 15%);
 
@@ -64,12 +64,13 @@
 @sub-navigation-background:         @main-body-bg;
 @sub-navigation-border:             @border-color;
 @sub-navigation-active-border:      @main-color;
-@sub-navigation-link-color:         @main-text-color;
+@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, 15%);
+@sub-navigation-link-hover-bg:      darken(@main-body-bg, 10%);
 
 @sub-navigation-link-active-color:  @sub-navigation-link-color;
-@sub-navigation-link-active-bg:     @sub-navigation-link-hover-bg;
+@sub-navigation-link-active-bg:     fade(@main-color, 20%);
 
 
 

diff --git a/dev/styles/main/nav/subNavigation.less b/dev/styles/main/nav/subNavigation.less
@@ -4,74 +4,68 @@
 .sub-navigation {
     background: @sub-navigation-background;
     padding-bottom: 20px;
-    
+
 }
 
 .sub-navigation__wrp {
 
 }
+
 .sub-navigation__item-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 .sub-navigation__link {
     display: block;
-    padding: 6px 30px;
+    padding: 10px 30px;
+    padding-left: 18px;
     color: @sub-navigation-link-color;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-tap-highlight-color: rgba(120, 120, 120, 0.3);
-    font-size: 14px;
     letter-spacing: 0.2px;
-    transition: all 0.1s linear;
-    border: 1px solid @sub-navigation-border;
-    margin-bottom: -1px;
-}
-
-.no-touch .sub-navigation__link:hover {
-    color: @sub-navigation-link-hover-color;
-    background: @sub-navigation-link-hover-bg;
-}
-
-.sub-navigation__link._active {
-        background-color: @sub-navigation-link-hover-bg;
-        border-color: @border-color;
-        z-index: 2;
-        position: relative;
-}
-.no-touch .sub-navigation__link._active:hover {
-        background-color: @sub-navigation-link-hover-bg;
-        // border-color: @sub-navigation-link-hover-bg;
+    transition: all 0.2s linear;
+    border-bottom: 1px solid @sub-navigation-border;
 }
 
 .sub-navigation__link._sub-level-3 {
-    padding: 6px 15px;
+    padding: 8px 15px;
     padding-left: 25px;
-    font-size: 13px;
-    border: 1px dotted @sub-navigation-border;
-    margin: 4px 10px;
+    font-size: 14px;
+    background-color: darken(@sub-navigation-background, 6%);
 
 }
 
 .sub-navigation__link._sub-level-4 {
-    padding: 6px 17px;
+    padding: 8px 17px;
     padding-left: 25px;
-    font-size: 13px;
-    border: 1px dotted @sub-navigation-border;
-    margin: 4px 10px;
+    font-size: 14px;
     margin-left: 18px;
 }
 
 .sub-navigation__link._sub-level-5 {
-    padding: 6px 19px;
+    padding: 8px 19px;
     padding-left: 25px;
-    font-size: 13px;
-    border: 1px dotted @sub-navigation-border;
-    margin: 4px 10px;
+    font-size: 14px;
     margin-left: 26px;
 }
 
+.no-touch .sub-navigation__link:hover {
+    color: @sub-navigation-link-hover-color;
+    background: @sub-navigation-link-hover-bg;
+}
+
+.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;
+}
+
 .sub-navigation__link._curent {
     border-left: 3px solid @sub-navigation-active-border;
     color: @sub-navigation-link-active-color;

diff --git a/dev/templates/pages/index.hbs b/dev/templates/pages/index.hbs
@@ -78,7 +78,7 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
     </div>
 </div>
 
-<div class="parallax parallax-video" data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0" style=" background-image: url('images/slider_image.jpg'); height:auto;">
+<div class="parallax parallax-video" data-jarallax-video="https://www.youtube.com/watch?v=9IWvfhGL-S4" style=" background-image: url('images/slider_image.jpg'); height:auto;">
     <div class="inverse">
     <div id="c181" class="container ">
             <div class="row">