From e02705c3f1a01f3abca1158f513a25273a9dc727 Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Mon, 27 Feb 2023 16:07:46 +0100
Subject: [PATCH] Update actions toolbar styles [SCI-7996]

---
 app/assets/stylesheets/protocols/index.scss  |  1 +
 app/assets/stylesheets/shared/datatable.scss | 28 ++++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/protocols/index.scss b/app/assets/stylesheets/protocols/index.scss
index eaf29b46f..23e346339 100644
--- a/app/assets/stylesheets/protocols/index.scss
+++ b/app/assets/stylesheets/protocols/index.scss
@@ -46,6 +46,7 @@
       flex-direction: column;
       flex-grow: 1;
       height: calc(100% - var(--datatable-pagination-row) - var(--protocol-toolbar-size));
+      padding-bottom: 12px;
     }
 
     .dataTables_scrollBody {
diff --git a/app/assets/stylesheets/shared/datatable.scss b/app/assets/stylesheets/shared/datatable.scss
index 6b5ea33c4..c641c5bcc 100644
--- a/app/assets/stylesheets/shared/datatable.scss
+++ b/app/assets/stylesheets/shared/datatable.scss
@@ -39,8 +39,10 @@
   .pagination-row {
     align-items: center;
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
-    min-height: var(--datatable-pagination-row);
+    height: var(--datatable-pagination-row);
+    box-shadow: inset 0px 1px 0px $color-concrete;
     position: relative;
     width: 100%;
 
@@ -48,16 +50,34 @@
       align-items: center;
       background-color: $color-concrete;
       border-bottom: 1px solid $color-alto;
+      box-shadow: 0px -12px 24px -12px rgba(35, 31, 32, 0.2);
+      border-radius: 6px 6px 0px 0px;
       display: none;
       height: 70px;
       overflow-x: auto;
       padding: 0 1em;
       position: absolute;
-      top: 0;
+      bottom: var(--datatable-pagination-row);
       width: 100%;
+      z-index: 10;
 
       .btn {
-        margin-right: .25em;
+        margin-right: .5em;
+
+        &:focus {
+          box-shadow: 0 0 0 4px rgba(96, 159, 255, .5);
+        }
+
+        &:not(.btn-primary) {
+          &:hover {
+            background-color: $color-white;
+          }
+
+          &:active {
+            outline-color: transparent;
+            background-color: $color-alto;
+          }
+        }
       }
     }
 
@@ -127,10 +147,8 @@
   }
 
   &.show-actions {
-    --datatable-pagination-row: 139px;
 
     .pagination-row {
-      padding-top: 71px;
 
       .actions-toolbar {
         display: flex;