diff --git a/images/logo-scout-on-dark.png b/images/logo-scout-on-dark.png new file mode 100644 index 00000000000..a363c2c2a5d Binary files /dev/null and b/images/logo-scout-on-dark.png differ diff --git a/src/home/collection.jade b/src/home/collection.jade index da60805dd61..679e8e76baa 100644 --- a/src/home/collection.jade +++ b/src/home/collection.jade @@ -14,10 +14,12 @@ .splitter button.btn.btn-link.splitter-button.splitter-button-open i.fa.fa-caret-left + | i.fa.fa-file-text-o button.btn.btn-link.splitter-button.splitter-button-close i.fa.fa-file-text-o + | i.fa.fa-caret-right .column.side div(data-hook='documents-subview') diff --git a/src/sidebar/collection-filter.jade b/src/sidebar/collection-filter.jade index c5ea5998ea5..590b7f0633f 100644 --- a/src/sidebar/collection-filter.jade +++ b/src/sidebar/collection-filter.jade @@ -1,3 +1,3 @@ -.panel-heading.list-filter +.list-filter i.search.octicon-search input(type='search', placeholder='filter sources', data-hook='search') diff --git a/src/sidebar/index.jade b/src/sidebar/index.jade index c537fff5b62..889792f5617 100644 --- a/src/sidebar/index.jade +++ b/src/sidebar/index.jade @@ -1,5 +1,6 @@ div .sidebar.panel + div.scout-logo div(data-hook='collection-filter-subview') div(data-hook='collection-list-subview') div(data-hook='sidebar-control-subview') diff --git a/src/sidebar/sidebar-controls.jade b/src/sidebar/sidebar-controls.jade index 437ba0ce60c..9f0afe37fec 100644 --- a/src/sidebar/sidebar-controls.jade +++ b/src/sidebar/sidebar-controls.jade @@ -1,4 +1,4 @@ .sidebar-controls - .panel-heading.list-filter + .list-filter i.search.octicon-search input(type='search', placeholder='filter fields', data-hook='search') diff --git a/styles/palette.less b/styles/palette.less index 6de8cb559a1..840a0261318 100644 --- a/styles/palette.less +++ b/styles/palette.less @@ -2,8 +2,8 @@ /* commented colors have been deprecated */ @green0: #365221; @green1: #507b32; -@green2: #6ba442; -@green3: #89b668; +@green2: #67b144; +@green3: #86bc63; @green4: #a6c88e; @green5: #c4dbb3; @@ -19,6 +19,9 @@ @gray7: #ebebed; @gray8: #f5f6f7; +@slate0: #4c5259; +@slate1: #70757a; + @blue3: #5b81a9; // TODO: deprecate @blue4: #84a1bf; // TODO: deprecate @blue5: #adc0d4; // TODO: deprecate diff --git a/styles/sidebar.less b/styles/sidebar.less index ec190f65943..9934dd0a448 100644 --- a/styles/sidebar.less +++ b/styles/sidebar.less @@ -1,5 +1,4 @@ -@sidebar-bg: @pw; -@sidebar-border: @gray7; +@sidebar-bg: @slate0; @sidebar-width: 220px; .sidebar { @@ -9,58 +8,72 @@ -webkit-transform: translateZ(0); margin-bottom: 0; + .scout-logo { + background: @slate1 url("/images/logo-scout-on-dark.png") center center no-repeat; + background-size: 140px 28px; + width: @sidebar-width; + height: 72px; + } + .list-filter { - margin: 12px 0; + padding: 12px; + box-shadow: 0 2px 0 rgba(0,0,0,0.2); i.search { .octicon; position: absolute; margin-top: 9px; margin-left: 10px; - color: @gray3; + color: @gray5; } input { - .form-control; padding: 5px 5px 5px 30px; height: auto; - background: @pw; - // border-color: @gray6; + background: @slate0; + color: @pw; + width: 100%; + border: 1px solid lighten(@slate0, 5%); } input[type=search] { border-radius: 18px; } } + .panel-title { + color: @gray5; + } .list-group { line-height: 24px; - // height: 100%; position: absolute; - top: 72px; - bottom: 180px; + top: 128px; + bottom: 60px; overflow-y: auto; width: 100%; + z-index: -1; .list-group-item { cursor: pointer; border-top-width: 0; border-bottom-width: 0; - padding: 0 6px; - color: @gray3; - border-left: 4px solid transparent; + padding: 0; + background: none; + color: @gray5; a { display: block; - color: @gray3; + color: @gray5; + padding: 0 6px; text-decoration: none; - max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + border-left: 4px solid transparent; &:hover { - color: @gray3; + color: @pw; text-decoration: none; - background: @gray8; + background: lighten(@slate0, 5%); + border-left: 4px solid lighten(@slate0, 5%); } } i { @@ -70,13 +83,13 @@ } &.active { background: none; - border-left: 4px solid @green2; a { - color: @green2; + color: @green3; + border-left: 4px solid @green3; } i { - color: @green2; + color: @green3; } .list-group-item-heading { color: @green2; @@ -88,12 +101,13 @@ } .sidebar-controls { position: absolute; + width: @sidebar-width; bottom: 0; - width: 218px; - height: 174px; - border-top: 2px solid @sidebar-border; - // background: url(/images/fake-sidebar-controls.png) 0 0 no-repeat; - // background-size: 218px 174px; + height: 60px; + + .list-filter { + box-shadow: 0 -2px 0 rgba(0,0,0,0.2); + } } } @@ -103,7 +117,6 @@ bottom: 0; width: 220px; background: @sidebar-bg; - border-right: 2px solid @sidebar-border; border-left-width: 0; border-top-width: 0; border-bottom-width: 0;