variables optimization

src/client/styles/scss/_layout.scss

@@ -101,43 +101,6 @@
   }
 } // }}}
 
-// fix tab width to 95 pixels
-// see also '_on-edit.scss'
-$nav-main-left-tab-width: 95px;
-$nav-main-tab-height: 44px;
-$nav-main-tab-font-size: 16px;
-
-//** override bootstrap nav nav-tabs nav-item
-.nav.nav-tabs > .nav-item {
-  position: relative;
-  min-width: $nav-main-left-tab-width;
-  padding: auto;
-  text-align: center;
-  $active-tab-border-width: 1px;
-  $active-tab-border-bg: white;
-  a {
-    display: block;
-    height: $nav-main-tab-height;
-    padding: ($nav-main-tab-height - $nav-main-tab-font-size)/2 0;
-    font-size: $nav-main-tab-font-size;
-  }
-  &.active {
-    // TODO：Active class must be switching by user control.
-    border: $active-tab-border-width solid $grw-line-light-gray;
-    border-bottom: initial;
-  }
-  // border for tab is hidden as inner width white border, and then become unevenness.
-  &.active::before {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: block;
-    width: $nav-main-left-tab-width - $active-tab-border-width * 2;
-    content: '';
-    border-bottom: $active-tab-border-width solid $active-tab-border-bg;
-  }
-}
-
 // printable style
 @media print {
   .main-container {

src/client/styles/scss/_layout_variable.scss

@@ -27,3 +27,9 @@ $grw-line-light-gray: #ddd;
 
 /* white */
 $grw-floral-white: floralwhite;
+
+// fix tab width to 95 pixels
+// see also '_on-edit.scss'
+$nav-main-left-tab-width: 95px;
+$nav-main-tab-height: 44px;
+$nav-main-tab-font-size: 16px;

src/client/styles/scss/_on-edit.scss

@@ -1,4 +1,5 @@
 @import 'editor-overlay';
+@import 'layout_variable';
 
 body:not(.on-edit) {
   // hide .page-editor-footer

src/client/styles/scss/_override-bootstrap.scss

@@ -1,4 +1,6 @@
 @import 'override-bootstrap-variables';
+@import 'layout_variable';
+
 //** alert with custom color
 .alert {
   a:not(.btn) {
@@ -19,3 +21,34 @@
     }
   }
 }
+
+//** override bootstrap nav nav-tabs nav-item
+.nav.nav-tabs > .nav-item {
+  position: relative;
+  min-width: $nav-main-left-tab-width;
+  padding: auto;
+  text-align: center;
+  $active-tab-border-width: 1px;
+  $active-tab-border-bg: white;
+  a {
+    display: block;
+    height: $nav-main-tab-height;
+    padding: ($nav-main-tab-height - $nav-main-tab-font-size)/2 0;
+    font-size: $nav-main-tab-font-size;
+  }
+  &.active {
+    // TODO：Active class must be switching by user control.
+    border: $active-tab-border-width solid $grw-line-light-gray;
+    border-bottom: initial;
+  }
+  // border for tab is hidden as inner width white border, and then become unevenness.
+  &.active::before {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: $nav-main-left-tab-width - $active-tab-border-width * 2;
+    content: '';
+    border-bottom: $active-tab-border-width solid $active-tab-border-bg;
+  }
+}