Add expand/collapse functionality to table Component
This commit will add optional expand/collapse functionality
to the shared table component. Expand/collapse is not
implemented on any existing table but will be used on the
redesigned event log table.
Tested on Chrome, Safari, Firefox, Edge, IE
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ia7ecde7b5525c11c68ebdf9f609c8d690c312969
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index 613d88a..0178486 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -178,6 +178,31 @@
.bmc-table__row {
border-bottom: 1px solid $border-color-01;
+ .btn {
+ padding-top: 0;
+ padding-bottom: 0;
+ .icon {
+ margin: 0;
+ }
+ }
+ .btn--expand {
+ padding: 0;
+ .icon {
+ transition: transform $duration--moderate-01;
+ transform: rotate(90deg);
+ }
+ }
+}
+
+.bmc-table__row--expanded {
+ border-style: none;
+ .btn--expand .icon {
+ transform: rotate(0deg);
+ }
+}
+
+.bmc-table__expansion-row {
+ border-bottom: 1px solid $border-color-01;
}
.bmc-table__column-header {
@@ -198,8 +223,4 @@
.bmc-table__row-actions {
text-align: right;
- .btn {
- padding-top: 0;
- padding-bottom: 0;
- }
}
\ No newline at end of file