Browse Source

Styled dropdowns in both the dialog and in the notebook to not rely on browser styling

cameronoelsen 8 years ago
parent
commit
7a1f5238f2
3 changed files with 25 additions and 1 deletions
  1. 1 0
      src/commandpalette/index.css
  2. 6 0
      src/common/dialog.css
  3. 18 1
      src/notebook/toolbar.css

+ 1 - 0
src/commandpalette/index.css

@@ -39,6 +39,7 @@
   padding: 0px 8px;
   border: 1px solid var(--jp-border-color1);
   background-color: white;
+  height: 30px;
 }
 
 

+ 6 - 0
src/common/dialog.css

@@ -173,4 +173,10 @@
   color: var(--jp-ui-font-color0);
   border: none;
   outline: none;
+  -webkit-appearance: none;
+  padding-left: 8px;
+  background-image: url('../default-theme/images/down_caret.svg');
+  background-repeat: no-repeat;
+  background-position: 224px 50%;
+  background-size: 20px;
 }

+ 18 - 1
src/notebook/toolbar.css

@@ -18,6 +18,12 @@
 }
 
 
+.jp-Notebook-toolbarCellType:hover {
+    background-color: #EEEEEE;
+    box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.5);
+}
+
+
 .jp-Notebook-toolbarCellType select.jp-Notebook-toolbarCellTypeDropdown {
   border: var(--jp-border-width) solid var(--jp-border-color4);
   border-radius: 0;
@@ -27,6 +33,18 @@
   height: 20px;
   margin-top: 2px;
   margin-bottom: 2px;
+  -webkit-appearance: none;
+  padding-left: 4px;
+  padding-right: 16px;
+  background-image: url('../default-theme/images/down_caret.svg');
+  background-repeat: no-repeat;
+  background-position: right;
+  background-size: 16px;
+}
+
+
+.jp-Notebook-toolbarCellType:hover > .jp-Notebook-toolbarCellTypeDropdown {
+    background-color: #EEEEEE;
 }
 
 
@@ -174,4 +192,3 @@
 .jp-NBToolbar-item.jp-NBToolbar-kernelIndicator.jp-mod-busy::before {
     content: "\f111";  /* Circle */
 }
-