From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 19 Jun 2020 14:19:03 +0000 (+0200)
Subject: wip #3717 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=a8a82bb16a1052ced021852713c469a12243a580;p=fluidbook-toolbox.git

wip #3717 @2
---

diff --git a/config/backpack/base.php b/config/backpack/base.php
index 5c3923dcd..991a8d893 100644
--- a/config/backpack/base.php
+++ b/config/backpack/base.php
@@ -46,7 +46,6 @@ return [
         'packages/backpack/base/css/bundle.css',
         'packages/featherlight/featherlight.min.css',
         'packages/fluidbook/toolbox/css/style.css',
-        'packages/@digitallyhappy/backstrap/css/overlay.css',
 
         // Here's what's inside the bundle:
         // 'packages/@digitallyhappy/backstrap/css/style.min.css',
diff --git a/public/images/icons/icon-fluidbook.svg b/public/images/icons/icon-fluidbook.svg
new file mode 100644
index 000000000..d82ff01ae
--- /dev/null
+++ b/public/images/icons/icon-fluidbook.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Mode_Isolation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2.6667;}
+</style>
+<g>
+	<path class="st0" d="M14.5,15.5c0.7-5.9,0.7-8.3-1-10.7c-1.7-2.4-5.6-2.5-8.3-4.3c-0.8,4.8-0.6,7.2,1,9.3"/>
+	<path class="st0" d="M14.5,15.5c-1.4-3.5-2.2-4.8-3.9-5.7c-1.4-0.7-3.1,0-4.8,0.1c-0.4,0-0.8,0-1.1,0c1.4,4.1,3.1,6,5.9,5.6
+		C13.2,15.1,14.5,15.5,14.5,15.5z"/>
+</g>
+</svg>
diff --git a/public/packages/fluidbook/toolbox/css/style.less b/public/packages/fluidbook/toolbox/css/style.less
index 9c1ef1d34..76f6aa53b 100644
--- a/public/packages/fluidbook/toolbox/css/style.less
+++ b/public/packages/fluidbook/toolbox/css/style.less
@@ -1,8 +1,19 @@
+@primary: #467fcf;
+@primary-hover: darken(@primary, 5%);
+@primary-border: darken(@primary, 10%);
+@primary-focus: darken(@primary, 15%);
+@primary-active: darken(@primary, 20%);
+@primary-active-border: darken(@primary, 25%);
+@text-color: #1b2a4e;
+@input-color: lighten(@text-color, 10%);
+@sidebar-active: #9ec400;
+@sidebar-active-background: #f1ecec;
+
 body {
     background-color: #fafafa;
 }
 
-.bg-light{
+.bg-light {
     background-color: transparent !important;
 }
 
@@ -10,14 +21,14 @@ body {
     font-weight: 600;
 }
 
-body:not(.align-items-center){
-    footer>div{
+body:not(.align-items-center) {
+    footer > div {
         width: 100%;
     }
 }
 
-main{
-    nav.d-lg-block{
+main {
+    nav.d-lg-block {
         visibility: hidden;
     }
 }
@@ -40,38 +51,155 @@ main{
     opacity: 0.5;
 }
 
-.table{
+.table {
     border: 0;
+
     &.bg-white {
         background: transparent !important;
     }
-    th{
+
+    th {
         background-color: transparent;
         border: 0;
     }
-    td:first-child{
-        border-left: 1px solid rgba(0,40,100,.12);
+
+    td:first-child {
+        border-left: 1px solid rgba(0, 40, 100, .12);
     }
-    td:last-child{
-        border-right: 1px solid rgba(0,40,100,.12);
+
+    td:last-child {
+        border-right: 1px solid rgba(0, 40, 100, .12);
     }
-    tr:last-child{
-        td{
-            border-bottom: 1px solid rgba(0,40,100,.12);
+
+    tr:last-child {
+        td {
+            border-bottom: 1px solid rgba(0, 40, 100, .12);
         }
     }
-    &#crudTable{
-        tfoot{
+
+    &#crudTable {
+        tfoot {
             display: none;
         }
     }
+
+
 }
 
-.bulk-button{
-    &.disabled{
+table.table-hover {
+    tbody tr {
+        &:hover {
+            background-color: rgba(100, 100, 130, 0.1);
+        }
+    }
+}
+
+.bulk-button {
+    &.disabled {
         visibility: hidden;
     }
 }
-#datatable_button_stack{
+
+#datatable_button_stack {
     visibility: hidden;
 }
+
+
+a, a.btn-link {
+    color: @primary;
+
+    &:hover {
+        color: @primary-hover;
+    }
+}
+
+.btn-primary,
+.dataTables_wrapper .dataTables_paginate .paginate_button.current,
+.page-item.active .page-link {
+    color: #fff;
+    background-color: @primary;
+    border-color: @primary;
+
+    &:hover {
+        color: #fff;
+        background-color: @primary-hover;
+        border-color: @primary-border;
+    }
+}
+
+.page-item .page-link {
+    &:hover {
+        color: @primary;
+        background-color: transparent;
+    }
+}
+
+.btn-primary:focus, .dataTables_wrapper .dataTables_paginate .paginate_button.current:focus, .btn-primary.focus, .dataTables_wrapper .dataTables_paginate .focus.paginate_button.current {
+    box-shadow: 0 0 0 2px @primary-focus;
+}
+
+.btn-primary.disabled, .dataTables_wrapper .dataTables_paginate .disabled.paginate_button.current, .btn-primary:disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.current:disabled {
+    color: #fff;
+    background-color: @primary;
+    border-color: @primary;
+}
+
+.btn-primary:not(:disabled):not(.disabled):active, .dataTables_wrapper .dataTables_paginate .paginate_button.current:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .dataTables_wrapper .dataTables_paginate .paginate_button.current:not(:disabled):not(.disabled).active,
+.show > .btn-primary.dropdown-toggle,
+.dataTables_wrapper .dataTables_paginate .show > .dropdown-toggle.paginate_button.current {
+    color: #fff;
+    background-color: @primary-active;
+    border-color: @primary-active-border;
+}
+
+.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select, .form-control {
+    color: @input-color;
+
+    &:focus {
+        border-color: @primary-border;
+        box-shadow: none;
+    }
+}
+
+.sidebar.sidebar-pills {
+    padding-left: 0;
+
+    .nav-dropdown {
+        &.open {
+            background-color: transparent;
+            border-radius: 0;
+        }
+
+        .nav-link {
+            border-left: 5px solid transparent;
+        }
+    }
+
+    .nav-link {
+        .nav-icon {
+            max-width: 20px;
+            color: @text-color !important;
+
+            img {
+                max-height: 15px;
+                max-width: 20px;
+            }
+        }
+
+        border-left: 5px solid transparent;
+        border-radius: 0;
+
+        &:hover, &.active {
+            color: @text-color !important;
+            background-color: @sidebar-active-background;
+            border-left-color: @sidebar-active;
+
+
+            .nav-icon {
+                color: @text-color !important;
+            }
+
+        }
+    }
+
+}
diff --git a/resources/views/vendor/backpack/base/inc/sidebar_content.blade.php b/resources/views/vendor/backpack/base/inc/sidebar_content.blade.php
index 3235233bd..0305d3f0c 100644
--- a/resources/views/vendor/backpack/base/inc/sidebar_content.blade.php
+++ b/resources/views/vendor/backpack/base/inc/sidebar_content.blade.php
@@ -1,6 +1,6 @@
 <!-- This file is used to store sidebar items, starting with Backpack\Base 0.9.0 -->
 <li class="nav-item"><a class="nav-link" href="{{ backpack_url('dashboard') }}"><i
-            class="la la-dashboard nav-icon"></i> {{ trans('backpack::base.dashboard') }}</a></li>
+            class="nav-icon la"><img src="/images/icons/icon-fluidbook.svg" /></i>{{ trans('backpack::base.dashboard') }}</a></li>
 
 @canany(['toolbox:quiz','toolbox:quiz:translate'])
     <li class='nav-item nav-dropdown open'><a class='nav-link nav-dropdown-toggle' href='#'><i