Browse Source

Use icon styles in tab manager.

Brian E. Granger 5 years ago
parent
commit
4e27992e9d
1 changed files with 56 additions and 1 deletions
  1. 56 1
      packages/tabmanager-extension/style/base.css

+ 56 - 1
packages/tabmanager-extension/style/base.css

@@ -70,10 +70,13 @@
 }
 
 #tab-manager .p-TabBar-tab .p-TabBar-tabIcon {
-  width: 14px;
   background-position: left center;
   background-repeat: no-repeat;
   margin-right: 2px;
+  min-width: 16px;
+  min-height: 16px;
+  background-size: 16px;
+  vertical-align: middle;
 }
 
 #tab-manager .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
@@ -117,3 +120,55 @@
   background-size: 16px;
   background-image: var(--jp-icon-inverse-close-circle);
 }
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-FileIcon {
+  background-image: var(--jp-icon-file-selected);
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-TextEditorIcon {
+  background-image: var(--jp-icon-text-editor-selected);
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-NotebookIcon {
+  background-image: var(--jp-icon-notebook-selected);
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-FolderIcon {
+  background-image: var(--jp-icon-folder-selected);
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-MarkdownIcon {
+  background-image: var(--jp-icon-markdown-selected);
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-PythonIcon {
+  background-image: var(--jp-icon-python-selected);
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-JSONIcon {
+  background-image: var(--jp-icon-json-selected);
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-SpreadsheetIcon {
+  background-image: var(--jp-icon-spreadsheet-selected);
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-RKernelIcon {
+  background-image: var(--jp-icon-r-selected);
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-YAMLIcon {
+  background-image: var(--jp-icon-yaml-selected);
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-ImageIcon {
+  background-image: var(--jp-icon-image-selected);
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-CodeConsoleIcon {
+  background-image: var(--jp-icon-console-selected);
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .p-TabBar-tabIcon.jp-LauncherIcon {
+  background-image: var(--jp-icon-launcher-selected);
+}