Browse Source

Merge pull request #673 from spoorthyv/newsearch

Updated search bar design
Steven Silvester 8 years ago
parent
commit
76823f989a
2 changed files with 13 additions and 9 deletions
  1. 2 0
      src/commandpalette/plugin.ts
  2. 11 9
      src/default-theme/commandpalette.css

+ 2 - 0
src/commandpalette/plugin.ts

@@ -129,6 +129,8 @@ function activateCommandPalette(app: JupyterLab): ICommandPalette {
     label: 'Toggle Command Palette'
   });
 
+  palette.inputNode.placeholder = "SEARCH";
+
   app.shell.addToLeftArea(palette);
 
   return new Palette(palette);

+ 11 - 9
src/default-theme/commandpalette.css

@@ -8,24 +8,26 @@
   background: #FAFAFA;
 }
 
-
-.p-CommandPalette-search {
-  padding: 8px;
-}
-
-
 .p-CommandPalette-wrapper {
-  padding: 4px 6px;
+  padding: 14px 12px;
   background: white;
-  border: 1px solid #E0E0E0;
+  border-bottom: 2px solid #E0E0E0;
+  overflow: overlay;
 }
 
+.p-CommandPalette-wrapper::after {
+    font-family: FontAwesome;
+    content: "\f002"; /* search */
+    color: #2196F3;
+}
 
 .p-CommandPalette-input {
-  width: 100%;
+  width: calc(100% - 18px);
+  float: left;
   border: none;
   outline: none;
   font-size: 16px;
+  padding: 0;
 }