From e516d4d9e8d14a826cd98b1b8ce5f5b117597a5a Mon Sep 17 00:00:00 2001
From: Sneha Patel <Snehaben.Patel@ibm.com>
Date: Mon, 24 May 2021 14:11:26 -0500
Subject: Add dividers between table batch action buttons

Signed-off-by: Sneha Patel <Snehaben.Patel@ibm.com>
Change-Id: I54ddce13b1fc02138f42141c636453f499d35b96
---
 src/components/Global/TableToolbar.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

(limited to 'src/components')

diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 85c11a46..a9281748 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -96,6 +96,26 @@ $toolbar-height: 46px;
   padding: 0 $spacer;
 }
 
+// Using v-deep to style export slot child-element
+// depricated and vue-js 3
+.toolbar-actions ::v-deep .btn {
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    height: 1.5rem;
+    width: 1px;
+    background: rgba($white, 0.6);
+  }
+  &:last-child,
+  &:first-child {
+    &:after {
+      width: 0;
+    }
+  }
+}
+
 .slide-enter-active {
   transition: transform $duration--moderate-02 $entrance-easing--productive;
 }
-- 
cgit v1.2.3