Fixing layout of tabs, using base less variables.

src/basestyle/phosphor.less

@@ -4,6 +4,8 @@
 |----------------------------------------------------------------------------*/
 
 
+@import './variables.less';
+
 /*-----------------------------------------------------------------------------
 | General
 |----------------------------------------------------------------------------*/
@@ -174,12 +176,12 @@
 .p-TabBar {
   overflow: visible;
   color: #777777;
-  font-size: 13px;
+  font-size: @jp-ui-font-size;
 }
 
 
 .p-TabBar.p-mod-horizontal {
-  min-height: 24px;
+  min-height: @jp-tab-height;
 }
 
 
@@ -189,22 +191,22 @@
 
 
 .p-TabBar.p-mod-top {
-  border-bottom: 1px solid #BDBDBD;
+  border-bottom: @jp-tab-border-width solid #BDBDBD;
 }
 
 
 .p-TabBar.p-mod-bottom {
-  border-top: 1px solid #BDBDBD;
+  border-top: @jp-tab-border-width solid #BDBDBD;
 }
 
 
 .p-TabBar.p-mod-left {
-  border-right: 1px solid #BDBDBD;
+  border-right: @jp-tab-border-width solid #BDBDBD;
 }
 
 
 .p-TabBar.p-mod-right {
-  border-left: 1px solid #BDBDBD;
+  border-left: @jp-tab-border-width solid #BDBDBD;
 }
 
 
@@ -227,7 +229,7 @@
 .p-TabBar-tab {
   padding: 0px 10px;
   background: #EEEEEE;
-  border: 1px solid #BDBDBD;
+  border: @jp-tab-border-width solid #BDBDBD;
 }
 
 
@@ -243,11 +245,11 @@
 
 .p-TabBar.p-mod-top .p-TabBar-tab,
 .p-TabBar.p-mod-bottom .p-TabBar-tab {
-  flex: 0 1 125px;
-  min-height: 20px;
+  flex: 0 1 @jp-tab-width;
+  min-height: @jp-tab-height - 2*@jp-tab-border-width;
   min-width: 35px;
-  margin-left: -1px;
-  line-height: 20px;
+  margin-left: -1*@jp-tab-border-width;
+  line-height: @jp-tab-height - 3*@jp-tab-border-width;
 }
 
 
@@ -269,18 +271,18 @@
 
 .p-TabBar.p-mod-top .p-TabBar-tab.p-mod-current,
 .p-TabBar.p-mod-bottom .p-TabBar-tab.p-mod-current {
-  min-height: 23px;
+  min-height: @jp-tab-height - @jp-tab-border-width;
 }
 
 
 
 .p-TabBar.p-mod-top .p-TabBar-tab.p-mod-current {
-  transform: translateY(1px);
+  transform: translateY(@jp-tab-border-width);
 }
 
 
 .p-TabBar.p-mod-bottom .p-TabBar-tab.p-mod-current {
-  transform: translateY(-1px);
+  transform: translateY(-1*@jp-tab-border-width);
 }
 
 
@@ -346,13 +348,14 @@
 
 
 .p-TabBar-tab.p-mod-drag-image {
-  min-height: 24px;
-  min-width: 124px;
+  min-height: @jp-tab-height;
+  min-width: @jp-tab-width;
+  line-height: @jp-tab-height;
   color: #777777;
   background: white;
-  border: 1px solid #BDBDBD;
-  border-top: 1px solid #2196F3;
-  font-size: 14px;
+  border: @jp-tab-border-width solid #BDBDBD;
+  border-top: @jp-tab-border-width solid #2196F3;
+  font-size: @jp-ui-font-size;
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
   transform: translateX(-40%) translateY(-58%);
 }
@@ -361,7 +364,7 @@
 .p-TabPanel-stackedPanel {
   padding: 0px;
   background: white;
-  border: 1px solid #C0C0C0;
+  border: @jp-tab-border-width solid #C0C0C0;
   // This shadow requires a bottom/right padding on the .p-DockPanel-tabPanel
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 }

src/basestyle/variables.less

@@ -0,0 +1,11 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+@jp-tab-border-width: 1px;
+@jp-tab-height: 24px;
+@jp-tab-width: 144px;
+
+@jp-ui-font-size: 13px;
+@jp-ui-icon-size: 14px;