Add batch action functionality to table Component

These changes aren't currently implemented on any table.
It will be added to event logs and local user table.

- Create tableCheckbox component to handle custom styles
  and indeterminate state which needs to be set with JS
- Update tableComponent layout to allow transition for
  toolbar. Updated user-accounts layout and styles to
  account for these changes

Tested on Chrome, Safari, Firefox, Edge, IE

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic57a090db1ef66f9d33facfdc425db868ae8d8c6

1 files changed, 126 insertions, 0 deletions

diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index 0178486..5aa4915 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -147,6 +147,10 @@
   }
 }
 
+.bmc-table__container {
+  position: relative;
+}
+
 .bmc-table {
   width: 100%;
   &.small {
@@ -223,4 +227,126 @@
 
 .bmc-table__row-actions {
   text-align: right;
+}
+
+.bmc-table__checkbox-container {
+  position: relative;
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
+
+.bmc-table__checkbox {
+  margin: 0;
+  line-height: 1;
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  &::before {
+    // checkbox border
+    box-sizing: border-box;
+    content: "";
+    width: 1rem;
+    height: 1rem;
+    position: absolute;
+    left: 0;
+    top: 0.15rem;
+    background-color: transparent;
+    border: 2px solid $border-color-02;
+    border-radius: 1px;
+  }
+  &::after {
+    // checkbox check mark
+    content: "";
+    position: absolute;
+    left: 0.2rem;
+    top: 0.15rem;
+    width: 0.6rem;
+    height: 0.3rem;
+    background: none;
+    border-left: 2px solid $primary-light;
+    border-bottom: 2px solid $primary-light;
+    transform: scale(0) rotate(-45deg);
+    transform-origin: bottom right;
+  }
+  &.checked::before ,
+  &.indeterminate::before {
+      background: $primary-accent;
+      border-color: $primary-accent;
+  }
+  &.checked::after {
+    transform: scale(1) rotate(-45deg);
+  }
+  &.indeterminate::after {
+    transform: scale(1) rotate(0deg);
+    border-left: 0 solid $primary-light;
+    border-bottom: 2px solid $primary-light;
+    top: 0.4rem;
+  }
+}
+
+.bmc-table__checkbox-input {
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
+  margin: 0;
+}
+
+.bmc-table__toolbar {
+  position: absolute;
+  left: 0;
+  right: 1px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  color: $text-03;
+  background-color: $primary-accent;
+  max-height: 40px;
+  padding-left: 1em;
+  padding-top: 0.5em;
+  padding-right: 0;
+  padding-bottom: 0.5em;
+  transform: translateY(-40px);
+  &.ng-animate {
+    transition: transform $duration--moderate-02 $standard-easing--productive;
+  }
+  &.ng-enter {
+    transform: translateY(0);
+  }
+  &.ng-enter.ng-enter-active {
+    transform: translateY(-40px);
+  }
+  &.ng-leave {
+    transform: translateY(-40px);
+  }
+  &.ng-leave.ng-leave-active {
+    transform: translateY(0);
+  }
+  .btn-tertiary {
+    color: $text-03;
+    padding-top:0;
+    padding-bottom:0;
+    position: relative;
+    .icon {
+      fill: $text-03;
+      margin: 0;
+    }
+  }
+}
+
+.toolbar__batch-actions {
+  .btn-close {
+    border-top: none;
+    border-bottom: none;
+    border-left: 2px solid $primary-light;
+    margin-left: 0.5em;
+  }
+}
+
+.toolbar__selection-count {
+  margin: 0;
 }
\ No newline at end of file