diff options
| author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-09-06 08:52:35 -0700 |
|---|---|---|
| committer | Gunnar Mills <gmills@us.ibm.com> | 2019-09-20 16:38:28 +0000 |
| commit | 1d83af072eb4c047ef08fae79775a34599ed5ed3 (patch) | |
| tree | ba2c10b30e94e73a6e0dddfff4e57f75cd905f1b /app/common/styles/components | |
| parent | b1f64248b47e6a26ae38f36ebcf67f5955e9e92c (diff) | |
| download | phosphor-webui-1d83af072eb4c047ef08fae79775a34599ed5ed3.tar.gz phosphor-webui-1d83af072eb4c047ef08fae79775a34599ed5ed3.zip | |
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
Diffstat (limited to 'app/common/styles/components')
| -rw-r--r-- | app/common/styles/components/table.scss | 29 |
1 files changed, 25 insertions, 4 deletions
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 |
