diff --git a/public/docs/_includes/_side-nav.jade b/public/docs/_includes/_side-nav.jade index 374acc5215..894333eacd 100644 --- a/public/docs/_includes/_side-nav.jade +++ b/public/docs/_includes/_side-nav.jade @@ -38,6 +38,18 @@ - var guide = sections('guide', function(item) { return !item.basics; }); - var qs = sections('', function(item) { return item.slug === 'quickstart'; })[0] || {}; - var reference = sections('', function(item) { return item.reference; }); +- var anyItemSelected = function(items) { +- var selectedCount = items.filter(function(item) { return !!item.class; }).length; +- return selectedCount > 0 ? 'is-nav-title-selected' : ''; +- } +- var isQuickstartSelected = function(_cur) { +- var splitted = cur.split('/'); +- var bit = splitted[splitted.length - 1].replace('.html', ''); +- return bit === 'quickstart' ? 'is-nav-title-selected' : ''; +-} +- var isCollapsed = function(titleStyle) { +- return titleStyle === 'is-nav-title-selected' ? '' : 'is-hidden'; +- } nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav // SEARCH BAR @@ -49,42 +61,51 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''") .nav-blocks - .nav-title Tutorial - .nav-primary-link(class="#{qs.class}") - a(href="#{qs.href}" title="#{qs.tooltip}") #{qs.navTitle} - .nav-sub-title Case Study: Tour of Heroes - .nav-ordered-lists - ol - each item in tutorial - li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} + a(class="nav-title #{isQuickstartSelected(cur)}" href="#{qs.href}" title="#{qs.tooltip}") Quickstart .nav-blocks - .nav-title Basics - .nav-ordered-lists - ol - each item in basics - li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} + a(class="nav-title #{anyItemSelected(tutorial)}" href="#{tutorial[0].href}" title="#{tutorial[0].tooltip}") Tutorial + img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg") + .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(tutorial))}") + ul + each item, index in tutorial + li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle} .nav-blocks - .nav-title Developer Guide - .nav-unordered-lists + a(class="nav-title #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Basics + img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg") + + .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(basics))}") + ul + each item, index in basics + li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle} + + .nav-blocks + a(class="nav-title #{anyItemSelected(guide)}" href="#{guide[0].href}" title="#{guide[0].tooltip}") Developer Guide + img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg") + + .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(guide))}") ul each item in guide - li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} + li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} .nav-blocks - .nav-title Cookbook - .nav-unordered-lists + a(class="nav-title #{anyItemSelected(cookbook)}" href="#{cookbook[0].href}" title="#{cookbook[0].tooltip}") Cookbook + img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg") + + .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(cookbook))}") ul each item in cookbook - li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} + li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} .nav-blocks - .nav-title Reference - .nav-unordered-lists + a(class="nav-title #{anyItemSelected(reference)}" href="#{reference[0].href}" title="#{reference[0].tooltip}") Reference + img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg") + + .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(reference))}") ul each item in reference - li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} + li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} script. // Could put in appCtrl but only needed here and clear here diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss index 53f11d1ab5..0372c5de84 100644 --- a/public/resources/css/module/_side-nav.scss +++ b/public/resources/css/module/_side-nav.scss @@ -20,6 +20,9 @@ bottom: auto; } + .is-hidden { + display: none; + } // SEARCH BOX .side-nav-search { @@ -77,6 +80,10 @@ } } + .is-nav-title-selected { + color: $regal !important; + background-color: #DCE2E5 !important; + } // PRIMARY SIDENAV BUTTON .side-nav-primary { @@ -135,8 +142,7 @@ // SECONDARY SIDENAV .side-nav-secondary { @extend .side-nav-primary; - background: $mist; - box-shadow: inset 0px 2px 2px rgba($coal, .24); + background-color: #DCE2E5; @media handheld and (max-width: $phone-breakpoint), screen and (max-device-width: $phone-breakpoint), @@ -144,40 +150,35 @@ display: none; max-height: ($phone-breakpoint * 0.60); } - + // FLAT NAV (.nav) .nav-blocks { - margin: 0 ($unit * 1.5); - padding: ($unit * 2) 0; + margin: 0; + padding: 0; border-bottom: 1px solid $fog; color: $heather; - + a { text-decoration: none; color: $metal; display: block; } - - ol { - padding-left: ($unit * 2); - margin: 0 - } - + ul { list-style: none; padding: 0; margin: 0 } - + div, li { &.is-selected { > a { - background: white; - color: $regal; + background: #CDD5DA; + color: #1E88E5; } } } - + li { min-height: ($unit * 2); position: relative; @@ -191,17 +192,35 @@ .nav-title, .nav-sub-title { text-transform: uppercase; - font-weight: bold; + font-weight: 500; //medium + color: #78909C; } .nav-title { - font-size: ($unit * 2); - padding: ($unit * 0.5) 0 ($unit * 1) 0; + font-size: 14px; + + padding: ($unit * 2) ($unit * 2); + margin: 0; + background-color: #ECEFF1; + + .inline-arrow-down-svg { + float: right; + opacity: 0.56; + } + + a { + display: inline; + } } .nav-primary-link { - margin-bottom: ($unit * 1); position: relative; + + a { + padding-left: 16px; + padding-top: 16px; + padding-bottom: 16px; + } } .nav-sub-title { @@ -212,42 +231,51 @@ .nav-active a { color: $regal; background: $lightgrey; - font-weight: bold; + font-weight: 500; //medium } - .nav-ordered-lists li a, - .nav-unordered-lists li a, - .nav-primary-link a { - margin-left: ($unit * -3); - padding-left: ($unit * 3); - padding-top: ($unit * 0.5); - padding-bottom: ($unit * 0.5); + .nav-unordered-lists, .nav-ordered-lists { + // Apply inset shadows to the list under the title + box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24), inset 0 -2px 2px rgba(0, 0, 0, 0.08); + + // -- First Child + // Apply inset shadows on the first child when hovering, since the background color will cover the shadow + .nav-list-item:first-child { + &:hover { + box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24); + } + } + + // Apply inset shadows on the first child when selected, since the background color will cover the shadow + .is-selected:first-child a { + box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24); + } + + // -- Last Child + // Apply inset shadows on the last child when hovering, since the background color will cover the shadow + .nav-list-item:last-child { + &:hover { + box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08); + } + } + + // Apply inset shadows on the last child when selected, since the background color will cover the shadow + .is-selected:last-child a { + box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08); + } } - .nav-blocks li a:hover, - .nav-primary-link a:hover { - background: $fog; - } + .nav-list-item { + a { + font-size: 13px; + font-weight: 400; //medium + padding-left: $unit * 2; + line-height: 32px; + } - .nav-primary-link a:hover { - padding-top: ($unit * 0.5); - padding-bottom: ($unit * 0.5); + &:hover { + background-color: #CFD8DC; + } } - - .nav-blocks li a:hover:before, - .nav-primary-link a:hover:before { - position: absolute; - top: 50%; - content: ""; - display: inline-block; - width: 0.4em; - height: 0.4em; - border-right: 0.2em solid $tin; - border-top: 0.2em solid $tin; - transform: rotate(45deg); - right: -5px; - margin-top: -3px; - margin-right: 14px; - } } } diff --git a/public/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg b/public/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg new file mode 100644 index 0000000000..b4fcfad0b3 --- /dev/null +++ b/public/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file