wait #4183 @1

diff --git a/public/packages/fluidbook/toolbox/css/style.less b/public/packages/fluidbook/toolbox/css/style.less
index c1f3ab24ec2b37ef8d570c1f9bfdca03ac31726e..014d49f3abd9087a2dfafc5239faf683bc2ad3c0 100644 (file)
--- a/public/packages/fluidbook/toolbox/css/style.less
+++ b/public/packages/fluidbook/toolbox/css/style.less
@@ -14,6 +14,8 @@
 @secondary-focus: darken(@secondary, 10%);
 @secondary-active: darken(@secondary, 12%);
 @secondary-active-border: darken(@secondary, 15%);
+@sidebar-breakpoint: ~"(max-width:991.98px)";
+@sidebar-over-breakpoint: ~"(min-width:991.98px)";
 
 body {
     background-color: #fafafa;
@@ -46,10 +48,23 @@ main {
     .navbar-brand {
         width: 300px;
         padding: 20px 15px;
+
+        @media @sidebar-breakpoint {
+            margin-left: -135px;
+            top: 3px;
+        }
+    }
+
+    &.navbar-color .navbar-toggler {
+        color: #fff;
+        border: 0;
     }
 
     .navbar-toggler {
         display: none;
+        @media @sidebar-breakpoint {
+            display: block;
+        }
     }
 }
 
@@ -190,6 +205,24 @@ a, a.btn-link {
 .sidebar.sidebar-pills {
     padding-left: 0;
 
+    @media @sidebar-over-breakpoint {
+        margin-left: 0 !important;
+    }
+
+    .sidebar-nav, .sidebar-nav ul.nav {
+        @media @sidebar-breakpoint {
+            width: 225px;
+        }
+    }
+
+    &.bg-light {
+        @media @sidebar-breakpoint {
+            background-color: #fff !important;
+            padding-right: 0;
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
+        }
+    }
+
     .nav-dropdown {
         &.open {
             background-color: transparent;