Align sidenavs better, use sky to highlight

Summary: Simplifies the UI here by removing various borders, instead using just background colors and better alignment.

Test Plan: Test instances, settings, home, projects, workboards.

Reviewers: epriestley

Reviewed By: epriestley

Spies: Korvin

Differential Revision: https://secure.phabricator.com/D18488

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'e68cf1fa',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => 'b324663c',
+    'core.pkg.css' => '2bee293d',
     'core.pkg.js' => '6c085267',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => '45951e9e',
@@ -141,7 +141,7 @@ return array(
     'rsrc/css/phui/phui-action-list.css' => 'e7eba156',
     'rsrc/css/phui/phui-action-panel.css' => 'b4798122',
     'rsrc/css/phui/phui-badge.css' => '22c0cf4f',
-    'rsrc/css/phui/phui-basic-nav-view.css' => 'a0705f53',
+    'rsrc/css/phui/phui-basic-nav-view.css' => '98c11ab3',
     'rsrc/css/phui/phui-big-info-view.css' => 'acc3492c',
     'rsrc/css/phui/phui-box.css' => '745e881d',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
@@ -178,7 +178,7 @@ return array(
     'rsrc/css/phui/phui-status.css' => 'd5263e49',
     'rsrc/css/phui/phui-tag-view.css' => 'b4719c50',
     'rsrc/css/phui/phui-timeline-view.css' => 'f21db7ca',
-    'rsrc/css/phui/phui-two-column-view.css' => '76dcd3d4',
+    'rsrc/css/phui/phui-two-column-view.css' => 'bf86c483',
     'rsrc/css/phui/workboards/phui-workboard-color.css' => '783cdff5',
     'rsrc/css/phui/workboards/phui-workboard.css' => '3bc85455',
     'rsrc/css/phui/workboards/phui-workcard.css' => 'cca5fa92',
@@ -820,7 +820,7 @@ return array(
     'phriction-document-css' => '4282e4ad',
     'phui-action-panel-css' => 'b4798122',
     'phui-badge-view-css' => '22c0cf4f',
-    'phui-basic-nav-view-css' => 'a0705f53',
+    'phui-basic-nav-view-css' => '98c11ab3',
     'phui-big-info-view-css' => 'acc3492c',
     'phui-box-css' => '745e881d',
     'phui-button-bar-css' => 'f1ff5494',
@@ -874,7 +874,7 @@ return array(
     'phui-tag-view-css' => 'b4719c50',
     'phui-theme-css' => '9f261c6b',
     'phui-timeline-view-css' => 'f21db7ca',
-    'phui-two-column-view-css' => '76dcd3d4',
+    'phui-two-column-view-css' => 'bf86c483',
     'phui-workboard-color-css' => '783cdff5',
     'phui-workboard-view-css' => '3bc85455',
     'phui-workcard-view-css' => 'cca5fa92',

webroot/rsrc/css/phui/phui-basic-nav-view.css

@@ -64,7 +64,7 @@
 
 .phui-basic-nav .phabricator-side-menu .phui-list-item-href {
   display: block;
-  padding: 6px 8px 6px 20px;
+  padding: 6px 8px 6px 12px;
   color: {$darkbluetext};
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -72,13 +72,8 @@
   text-overflow: ellipsis
 }
 
-.phui-basic-nav .phabricator-side-menu .phui-list-item-has-icon
-  .phui-list-item-href {
-    padding-left: 12px;
-  }
-
 .phui-basic-nav .phabricator-side-menu .phui-list-item-icon {
-  margin-left: -4px;
+  margin-left: -8px;
   text-align: center;
   width: 30px;
 }
@@ -100,7 +95,6 @@
 
 .phui-basic-nav .phabricator-side-menu .phui-list-item-selected {
   background-color: rgba({$alphablack},.05);
-  border-left: 4px solid {$sky};
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
   font-weight: bold;
@@ -112,11 +106,6 @@
     background-color: rgba({$alphablack},.05);
 }
 
-.phui-basic-nav .phabricator-side-menu .phui-list-item-selected
-  .phui-list-item-href {
-  margin-left: -4px;
-}
-
 .phui-basic-nav .phabricator-side-menu .phui-list-item-type-label {
   padding: 6px 8px 4px 12px;
   color: {$darkbluetext};
@@ -124,6 +113,7 @@
   font-size: 12px;
   font-weight: bold;
   border-style: solid;
+  letter-spacing: 0.02em;
 }
 
 .device-desktop .phui-basic-nav .phabricator-side-menu

webroot/rsrc/css/phui/phui-two-column-view.css

@@ -281,9 +281,7 @@
 .phui-two-column-fixed.phui-two-column-view
   .phui-basic-nav .phabricator-side-menu .phui-list-item-selected {
     border-radius: 3px;
-    background-color: #f5f9ff;
+    background-color: {$sky};
-    border: 1px solid {$sky};
-    padding-left: 3px;
 }
 
 .phui-two-column-fixed.phui-two-column-view .phui-basic-nav
@@ -291,6 +289,16 @@
     border-radius: 3px;
 }
 
+.phui-two-column-fixed.phui-two-column-view .phui-basic-nav
+  .phabricator-side-menu .phui-list-item-selected a {
+    color: #fff;
+}
+
+.phui-two-column-fixed.phui-two-column-view .phui-basic-nav
+  .phabricator-side-menu .phui-list-item-selected a .phui-icon-view {
+    color: #fff;
+}
+
 .phui-two-column-fixed.phui-two-column-view .phui-header-action-links
   .phui-mobile-menu {
     display: block;