Jelajahi Sumber

FB finished 1 19.10.2

takahiros 6 tahun lalu
induk
melakukan
d6d91c92de
1 mengubah file dengan 31 tambahan dan 27 penghapusan
  1. 31 27
      src/client/styles/scss/_layout.scss

+ 31 - 27
src/client/styles/scss/_layout.scss

@@ -104,33 +104,37 @@
 // fix tab width to 95 pixels
 // fix tab width to 95 pixels
 // see also '_on-edit.scss'
 // see also '_on-edit.scss'
 $nav-main-left-tab-width: 95px;
 $nav-main-left-tab-width: 95px;
-
-.nav.nav-tabs {
-  .nav-main-left-tab {
-    $active-tab-border-width: 1px;
-    $active-tab-border-bg: white;
-    position: relative;
-    min-width: $nav-main-left-tab-width;
-    text-align: center;
-    a {
-      padding-right: 0;
-      padding-left: 0;
-    }
-    &.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;
-      top: 100%;
-      left: 0;
-      display: block;
-      width: $nav-main-left-tab-width - $active-tab-border-width * 2;
-      content: '';
-      border-bottom: 3px solid $active-tab-border-bg;
-    }
+$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;
   }
   }
 }
 }