Add dividers between table batch action buttons
Signed-off-by: Sneha Patel <Snehaben.Patel@ibm.com>
Change-Id: I54ddce13b1fc02138f42141c636453f499d35b96
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 85c11a4..a928174 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -96,6 +96,26 @@
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;
}