[PYT-220] Update left side menu (Lightning-AI#45)

- Padding on left/right sides should be equal
- Increase space between lists in left nav
- New styles for search box
- Search prompt should be either 'Docs' or 'Tutorials'

pytorch_sphinx_theme/searchbox.html

@@ -1,7 +1,14 @@
 {%- if builder != 'singlehtml' %}
+
+{% if theme_pytorch_project == 'tutorials' %}
+  {% set search_project = 'Tutorials' %}
+{% else %}
+  {% set search_project = 'Docs' %}
+{% endif %}
+
 <div role="search">
   <form id="rtd-search-form" class="wy-form" action="{{ pathto('search') }}" method="get">
-    <input type="text" name="q" placeholder="{{ _('Search docs') }}" />
+    <input type="text" name="q" placeholder="Search {{ search_project }}" />
     <input type="hidden" name="check_keywords" value="yes" />
     <input type="hidden" name="area" value="default" />
   </form>

scss/_sphinx_base.scss

@@ -2,7 +2,7 @@ $sphinx_full_width: 1600px;
 $sphinx_medium_width: 1101px;
 $sphinx_full_width_content_width: 700px;
 
-$sphinx_left_menu_wrapper_padding_right: 15%;
+$sphinx_left_menu_wrapper_padding_right: 13.5%;
 $sphinx_left_menu_width: 25%;
 $sphinx_left_menu_scroll_wrapper_width: 120%;
 

scss/_sphinx_layout.scss

@@ -78,7 +78,7 @@
   }
 
   @include sphinx-full-size {
-    padding-right: rem(30px);
+    padding-right: rem(65px);
   }
 }
 
@@ -127,13 +127,12 @@
     padding: 0 rem(30px) 0 0;
     position: fixed;
     top: 90px;
-    min-width: 280px;
     width: $sphinx_left_menu_width;
     z-index: 200;
   }
 
   @include sphinx-full-size {
-    padding: 0 rem(60px) 0 rem(30px);
+    padding: 0 0 0 rem(30px);
     width: $desktop_menu_width;
   }
 }
@@ -171,18 +170,46 @@
   }
 
   @include sphinx-full-size {
-    margin: rem(40px) 0 rem(60px) 0;
+    margin: rem(40px) 0;
+  }
+}
+
+.pytorch-left-menu-search {
+  ::-webkit-input-placeholder {
+    color: $not_quite_black;
+  }
+
+  ::-moz-placeholder {
+    color: $not_quite_black;
+  }
+
+  :-ms-input-placeholder {
+    color: $not_quite_black;
+  }
+
+  :-moz-placeholder {
+    color: $not_quite_black;
+  }
+
+  ::placeholder {
+    color: $not_quite_black;
   }
 }
 
 .pytorch-left-menu-search input[type=text] {
   border-radius: 0;
   padding: rem(8px) rem(12px);
   border-color: $orange;
-  color: $orange;
+  color: $not_quite_black;
   border-style: solid;
   font-size: rem(16px);
   width: 100%;
+  background-color: $light_grey;
+  text-align: center;
+
+  &:focus {
+    outline: 0;
+  }
 }
 
 .pytorch-left-menu .pytorch-side-scroll {
@@ -228,7 +255,7 @@
   ul {
     list-style-type: none;
     padding-left: 0;
-    margin-bottom: rem(20px);
+    margin-bottom: rem(40px);
   }
 
   > ul {