Merge branch 'support/apply-bootstrap4' into imprv/gw2081-fix-table-width

src/client/styles/scss/_layout_kibela.scss

@@ -40,13 +40,13 @@ body.kibela {
 
   .kibela-block {
     position: relative;
-    top: 0px;
+    top: 20px;
     right: 100px;
     bottom: 0px;
     left: 0px;
     z-index: absolute;
     max-width: 840px;
-    height: 11em;
+    height: 8em;
     margin: auto;
     border-radius: 0.35em;
   }

src/client/styles/scss/theme/_apply-colors-kibela.scss

@@ -15,6 +15,10 @@ body.kibela {
     background-color: $primary !important;
   }
 
+  .grw-subnavbar {
+    background-color: rgba(lighten($bgcolor-global, 50%), 1);
+  }
+
   /* kibela block */
   .kibela-block {
     border-top: solid 0.4em $thickborder;

src/client/styles/scss/theme/_apply-colors.scss

@@ -116,6 +116,17 @@ $link-hover-color: $color-link-hover;
       border-right-color: darken($bgcolor-global, 4%);
     }
   }
+  div[data-testid='GlobalNavigation'] {
+    div {
+      background-color: $bgcolor-sidebar;
+    }
+  }
+  div[data-testid='ContextualNavigation'] {
+    div {
+      color: $color-sidebar-context;
+      background-color: $bgcolor-sidebar-context;
+    }
+  }
 }
 
 /*

src/client/styles/scss/theme/antarctic.scss

@@ -91,6 +91,11 @@ html[light] {
   // badge
   $color-badge: $color-reversal;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   @import 'apply-colors';
   @import 'apply-colors-light';
 }
@@ -147,6 +152,11 @@ html[dark] {
   // badge
   $color-badge: $color-global;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+
   @import 'apply-colors';
   @import 'apply-colors-dark';
 }

src/client/styles/scss/theme/default.scss

@@ -62,6 +62,11 @@ html[light] {
   // badge
   $color-badge: $color-reversal;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-context: darken($bgcolor-global, 10%);
+
   @import 'apply-colors';
   @import 'apply-colors-light';
 }
@@ -118,6 +123,11 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+
   @import 'apply-colors';
   @import 'apply-colors-dark';
 }

src/client/styles/scss/theme/kibela.scss

@@ -59,6 +59,11 @@ html[light] {
   // badge
   $color-badge: $color-reversal;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-theme;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-theme, 10%);
+
   @import 'apply-colors';
   @import 'apply-colors-light';
   @import 'apply-colors-kibela';
@@ -117,6 +122,11 @@ html[dark] {
   // badge
   $color-badge: $color-global;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-theme;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-theme, 5%);
+
   @import 'apply-colors';
   @import 'apply-colors-light';
   @import 'apply-colors-kibela';

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

@@ -11,9 +11,9 @@
 
   <div class="row body m-0 p-0">
 
-    <div id="main" class="main col-12 kibela-block bg-white round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
+    <div id="main" class="main col-12 kibela-block round-corner border-0 {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
       <div class="row grw-subnav d-edit-none">
-        <div class="col-12">
+        <div class="col-9 px-0 mx-0 kibela-block">
           {% block content_header %} {% endblock %}
         </div>
       </div>

src/server/views/layout-kibela/widget/comments.html

@@ -1,6 +1,6 @@
 <div class="page-comments-row row d-edit-none">
 
-    <div class="page-comments">
+    <div class="page-comments col-12">
 
       <h4 class="my-2"><i class="icon-fw icon-bubbles"></i> Comments</h4>