adjust spacing

src/client/styles/scss/_layout_growi.scss

@@ -8,7 +8,7 @@
 
   .liker-and-seenusers {
     // adjusting position with negative margin
-    height: $nav-main-tab-height;
+    height: $grw-nav-main-tab-height;
     line-height: 1.25;
     border-bottom: 1px solid $grw-line-gray;
 

src/client/styles/scss/_layout_kibela.scss

@@ -1,7 +1,7 @@
 body.kibela {
   .icon-link,
   .CodeMirror-hint-active,
-  .nav-main-left-tab,
+  .grw-nav-main-left-tab,
   .tav-pane,
   .active {
     color: #5882fa;

src/client/styles/scss/_layout_variable.scss

@@ -30,8 +30,3 @@ $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: 42px;

src/client/styles/scss/_nav.scss

@@ -0,0 +1,9 @@
+.nav-tabs .grw-main-nav-item-left {
+  width: $grw-nav-main-left-tab-width;
+  text-align: center;
+
+  .nav-link {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}

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

@@ -85,8 +85,8 @@ body.on-edit {
   }
 
   .row.bg-title {
-    $left-margin: $nav-main-left-tab-width * 2 + 25px; // width of .nav-main-left-tab x 2 + some margin
-    $right-margin: 128px + 94px + 46px; //                width of all of nav-main-right-tab
+    $left-margin: $grw-nav-main-left-tab-width * 2 + 25px; // width of .grw-nav-main-left-tab x 2 + some margin
+    $right-margin: 128px + 94px + 46px; //                    width of all of grw-nav-main-right-tab
 
     position: absolute;
     left: $left-margin;

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

@@ -29,10 +29,8 @@ $font-family-serif:       Georgia, "Times New Roman", Times, serif;
 $font-family-monospace:   Osaka-Mono, "MS Gothic", Monaco, Menlo, Consolas, "Courier New", monospace;
 $font-family-base:        $font-family-sans-serif;
 
-// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
-// $font-size-base effects the font size of the body text
 $font-size-root:          14px;
-
+$line-height-base:        1.42857;
 
 //== Components
 //
@@ -70,3 +68,10 @@ $theme-colors: (
   'warning': #8a6d3b,
   'danger': #ff0a54
 );
+
+
+// Navs
+
+$nav-link-padding-y:              0.75rem;
+$nav-link-padding-x:              1rem;
+$nav-tabs-border-radius:          0;

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

@@ -25,3 +25,10 @@
     }
   }
 }
+
+// Navs
+.nav-tabs {
+  .nav-item {
+    margin-right: 0.15rem;
+  }
+}

src/client/styles/scss/_variables.scss

@@ -1,2 +1,6 @@
-// override bootstrap
 $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
+
+// fix tab width to 95 pixels
+// see also '_on-edit.scss'
+$grw-nav-main-left-tab-width: 95px;
+$grw-nav-main-tab-height: 42px;

src/client/styles/scss/style-app.scss

@@ -32,6 +32,7 @@
 @import 'layout_variable';
 @import 'theme/override-agileadmin';
 @import 'login';
+@import 'nav';
 @import 'notification';
 @import 'on-edit';
 @import 'page_list';

src/server/views/layout-crowi/base/layout.html

@@ -37,7 +37,7 @@
   </div><!-- /.bg-title -->
 
   <div class="row">
-    <div id="main" class="main m-t-15 col-md-9 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
+    <div id="main" class="main mt-4 col-md-9 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
       {% block content_main_before %}
       {% endblock %}
 

src/server/views/layout-growi/base/layout.html

@@ -18,7 +18,7 @@
   </div><!-- /.row -->
 
   <div class="row">
-    <div id="main" class="main m-t-15 col-md-12 mt-2 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
+    <div id="main" class="main mt-4 col-md-12 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
       {% block content_main_before %}
       {% endblock %}
 

src/server/views/layout-kibela/base/layout.html

@@ -10,7 +10,7 @@
 
   <div class="row body m-0 p-0">
 
-    <div id="main" class="main col-md-7 col-xs-12 kibela-block bg-white m-t-30 round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
+    <div id="main" class="main mt-5 col-md-7 col-xs-12 kibela-block bg-white round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
       <div class="row bg-title d-none d-md-block">
         <div class="col-xs-12 header-container">
           {% block content_header %} {% endblock %}

src/server/views/tags.html

@@ -14,7 +14,7 @@
     </div>
   </div>
   <div class="row">
-    <div id="main" class="main m-t-15 col-md-12 tags-page">
+    <div id="main" class="main mt-3 col-md-12 tags-page">
       <div class="" id="tags-page"></div>
     </div>
   </div>

src/server/views/widget/forbidden_content.html

@@ -1,4 +1,4 @@
-<div class="row not-found-message-row m-b-20">
+<div class="row not-found-message-row mb-4">
   <div class="col-md-12">
     <h2 class="text-muted">
       <i class="icon-ban" aria-hidden="true"></i>
@@ -21,8 +21,8 @@
   </div>
 
   <ul class="nav nav-tabs hidden-print">
-    <li class="nav-main-left-tab active">
-      <a href="#revision-body" data-toggle="tab">
+    <li class="nav-item grw-nav-main-left-tab">
+      <a class="nav-link active" href="#revision-body" data-toggle="tab">
         <i class="icon-notebook"></i> List
       </a>
     </li>

src/server/views/widget/not_creatable_content.html

@@ -1,4 +1,4 @@
-<div class="row not-found-message-row m-b-20">
+<div class="row not-found-message-row mb-4">
   <div class="col-md-12">
     <h2 class="text-muted">
       <i class="icon-ban" aria-hidden="true"></i>
@@ -13,7 +13,7 @@
   >
 
   <ul class="nav nav-tabs hidden-print">
-    <li class="nav-main-left-tab active">
+    <li class="grw-nav-main-left-tab active">
       <a href="#revision-body" data-toggle="tab">
         <i class="icon-notebook"></i> List
       </a>

src/server/views/widget/not_found_content.html

@@ -1,4 +1,4 @@
-<div class="row not-found-message-row m-b-20">
+<div class="row not-found-message-row mb-4">
   <div class="col-md-12">
     <h2 class="text-muted">
       <i class="icon-info" aria-hidden="true"></i>

src/server/views/widget/not_found_tabs.html

@@ -1,13 +1,13 @@
 <ul class="nav nav-tabs hidden-print">
-  <li class="nav-main-left-tab active">
-    <a href="#revision-body" data-toggle="tab">
+  <li class="nav-item grw-nav-main-left-tab">
+    <a class="nav-link active" href="#revision-body" data-toggle="tab">
       <i class="icon-notebook"></i> List
     </a>
   </li>
 
   {% if !isTrashPage() and !page.isDeleted() %}
-  <li class="nav-main-left-tab">
-    <a {% if user %}href="#edit" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
+  <li class="nav-item grw-nav-main-left-tab">
+    <a {% if user %}href="#edit" data-toggle="tab"{% endif %} class="nav-link edit-button {% if not user %}edit-button-disabled{% endif %}">
       <i class="icon-note"></i> {{ t('Create') }}
     </a>
   </li>

src/server/views/widget/page_list_and_timeline.html

@@ -1,8 +1,12 @@
 <div class="page-list-container">
   <ul class="nav nav-tabs" role="tablist">
-      <li class="nav-item"><a class="nav-link active" href="#view-list" role="tab" data-toggle="tab">{{ t('List View') }}</a></li>
+      <li class="nav-item">
+        <a class="nav-link active" href="#view-list" role="tab" data-toggle="tab">{{ t('List View') }}</a>
+      </li>
       {% if getConfig('crowi', 'customize:isEnabledTimeline') %}
-      <li class="nav-item"><a class="nav-link" href="#view-timeline" role="tab" data-toggle="tab">{{ t('Timeline View') }}</a></li>
+      <li class="nav-item">
+        <a class="nav-link" href="#view-timeline" role="tab" data-toggle="tab">{{ t('Timeline View') }}</a>
+      </li>
       {% endif %}
   </ul>
 

src/server/views/widget/page_list_and_timeline_kibela.html

@@ -1,8 +1,12 @@
 <div class="page-list-container">
   <ul class="nav nav-tabs customtab" role="tablist">
-      <li class="nav-item"><a class="nav-link active" href="#view-list" role="tab" data-toggle="tab">{{ t('List View') }}</a></li>
+      <li class="nav-item">
+        <a class="nav-link active" href="#view-list" role="tab" data-toggle="tab">{{ t('List View') }}</a>
+      </li>
       {% if getConfig('crowi', 'customize:isEnabledTimeline') %}
-      <li class="nav-item"><a class="nav-link" href="#view-timeline" role="tab" data-toggle="tab">{{ t('Timeline View') }}</a></li>
+      <li class="nav-item">
+        <a class="nav-link" href="#view-timeline" role="tab" data-toggle="tab">{{ t('Timeline View') }}</a>
+      </li>
       {% endif %}
   </ul>
 

src/server/views/widget/page_tabs.html

@@ -4,20 +4,20 @@
   {#
     Left Tabs
   #}
-  <li class="nav-item">
-    <a href="#revision-body" class="nav-link active" role="tab" data-toggle="tab">
+  <li class="nav-item grw-main-nav-item-left">
+    <a class="nav-link active" href="#revision-body" role="tab" data-toggle="tab">
       <i class="icon-control-play"></i> View
     </a>
   </li>
 
   {% if !isTrashPage() %}
-  <li class="nav-item nav-tab-edit">
+  <li class="nav-item grw-main-nav-item-left grw-nav-item-edit">
     <a {% if user %}href="#edit" role="tab" data-toggle="tab" {% endif %} class="nav-link edit-button {% if not user %}edit-button-disabled{% endif %}">
       <i class="icon-note"></i> {{ t('Edit') }}
     </a>
   </li>
   {% if isHackmdSetup() %}
-  <li class="nav-item nav-tab-hackmd">
+  <li class="nav-item grw-main-nav-item-left grw-nav-item-hackmd">
     <a {% if user %}href="#hackmd" role="tab" data-toggle="tab" {% endif %} class="nav-link {% if not user %}edit-button-disabled{% endif %}">
       <i class="fa fa-file-text-o"></i> {{ t('HackMD') }}
     </a>
@@ -30,7 +30,7 @@
   #}
 
   <li class="nav-item ml-md-auto">
-    <a href="#revision-history" role="tab" data-toggle="tab" class="nav-link">
+    <a class="nav-link" href="#revision-history" role="tab" data-toggle="tab">
       <i class="icon-layers"></i><span class="hidden-xs"> {{ t('History') }}</span>
     </a>
   </li>

src/server/views/widget/page_tabs_kibela.html

@@ -4,21 +4,21 @@
   {#
     Left Tabs
   #}
-  <li class="nav-main-left-tab active">
-    <a href="#revision-body" data-toggle="tab">
+  <li class="nav-item grw-nav-main-left-tab active">
+    <a class="nav-link active" href="#revision-body" data-toggle="tab">
       <i class="icon-control-play"></i> View
     </a>
   </li>
 
   {% if !isTrashPage() %}
-  <li class="nav-main-left-tab nav-tab-edit">
-    <a {% if user %}href="#edit" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
+  <li class="grw-nav-main-left-tab nav-tab-edit">
+    <a {% if user %}href="#edit" data-toggle="tab"{% endif %} class="nav-link edit-button {% if not user %}edit-button-disabled{% endif %}">
       <i class="icon-note"></i> {{ t('Edit') }}
     </a>
   </li>
   {% if isHackmdSetup() %}
-  <li class="nav-main-left-tab nav-tab-hackmd">
-    <a {% if user %}href="#hackmd" data-toggle="tab"{% endif %} class="{% if not user %}edit-button-disabled{% endif %}">
+  <li class="grw-nav-main-left-tab nav-tab-hackmd">
+    <a {% if user %}href="#hackmd" data-toggle="tab"{% endif %} class="nav-link {% if not user %}edit-button-disabled{% endif %}">
       <i class="fa fa-file-text-o"></i> {{ t('HackMD') }}
     </a>
   </li>
@@ -30,7 +30,7 @@
   #}
   {% if !isTrashPage() %}
     {% if page.isPortal() %}
-    <li class="nav-main-right-tab dropdown pull-right">
+    <li class="dropdown pull-right">
       <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
         <i class="icon-options-vertical"></i>
       </a>
@@ -43,7 +43,7 @@
       </ul>
     </li>
     {% else %}
-    <li class="nav-main-right-tab dropdown pull-right">
+    <li class="dropdown pull-right">
       <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
         <i class="icon-options-vertical"></i>
       </a>
@@ -61,13 +61,13 @@
     {% endif %}
   {% endif %}
 
-  <li class="nav-main-right-tab pull-right">
+  <li class="pull-right">
     <a href="#revision-history" data-toggle="tab">
       <i class="icon-layers"></i><span class="hidden-xs"> {{ t('History') }}</span>
     </a>
   </li>
   {% if not page.isPortal() %}
-    <li class="nav-main-right-tab pull-right">
+    <li class="pull-right">
       <a href="?presentation=1" class="toggle-presentation">
         <i class="icon-film"></i><span class="hidden-xs"> {{ t('Presentation Mode') }}</span>
       </a>
@@ -80,14 +80,14 @@
 
 <ul class="nav nav-tabs customtab nav-tabs-create-portal hidden-print">
 
-  <li class="nav-main-left-tab">
-    <a id="portal-form-close" href="#" data-toggle="tab">
+  <li class="nav-item grw-nav-main-left-tab">
+    <a id="portal-form-close" class="nav-link" href="#" data-toggle="tab">
       <i class="icon-action-undo"></i> {{ t('Cancel') }}
     </a>
   </li>
 
-  <li class="nav-main-left-tab active">
-    <a>
+  <li class="nav-item grw-nav-main-left-tab active">
+    <a class="nav-link">
       <i class="icon-note"></i> {{ t('Create') }}
     </a>
   </li>

src/server/views/widget/user_page_content.html

@@ -1,10 +1,14 @@
 <div class="user-page-content mb-4">
   <ul class="nav nav-tabs user-page-content-menu mb-4" role="tablist">
     <li class="nav-item">
-      <a class="nav-link active" href="#user-bookmark-list" role="tab" data-toggle="tab"><i class="icon-star"></i> Bookmarks</a>
+      <a class="nav-link active" href="#user-bookmark-list" role="tab" data-toggle="tab">
+        <i class="icon-star"></i> Bookmarks
+      </a>
     </li>
     <li class="nav-item">
-      <a class="nav-link" href="#user-created-list" role="tab" data-toggle="tab"><i class="icon-clock"></i> Recently Created</a>
+      <a class="nav-link" href="#user-created-list" role="tab" data-toggle="tab">
+        <i class="icon-clock"></i> Recently Created
+      </a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#user-draft-list" role="tab" data-toggle="tab"><i class="icon-docs"></i> My Drafts</a>