diff --git a/dev/styles/customVariables.less b/dev/styles/customVariables.less index f317c8c..790ad9f 100644 --- 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 index 1ee291a..5de20fc 100644 --- a/dev/styles/main/nav/subNavigation.less +++ b/dev/styles/main/nav/subNavigation.less @@ -4,12 +4,13 @@ .sub-navigation { background: @sub-navigation-background; padding-bottom: 20px; - + } .sub-navigation__wrp { } + .sub-navigation__item-list { list-style: none; padding: 0; @@ -17,61 +18,54 @@ } .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 index 3da31e6..3cc7f09 100644 --- 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 -
+