diff options
author | SurenNeware <sneware9@in.ibm.com> | 2020-09-25 13:19:16 +0300 |
---|---|---|
committer | SurenNeware <sneware9@in.ibm.com> | 2020-10-06 20:52:08 +0300 |
commit | 5e9c391cab08fc34f85776427b35a82853e7b617 (patch) | |
tree | a9c981cd15571fad22b2978898edc317a326c2cb /src/assets/styles | |
parent | b53e086876138f065bd0d976432a7eb75d254cd6 (diff) | |
download | webui-vue-5e9c391cab08fc34f85776427b35a82853e7b617.tar.xz |
Add stacked table style for small screen
- Add style to the stacked table type for small screen only.
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I79fb44b20c8436df5734f89e60c98966c9c6a591
Diffstat (limited to 'src/assets/styles')
-rw-r--r-- | src/assets/styles/bmc/custom/_tables.scss | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss index e754520b..b3ef0565 100644 --- a/src/assets/styles/bmc/custom/_tables.scss +++ b/src/assets/styles/bmc/custom/_tables.scss @@ -66,3 +66,71 @@ border-top: none; } +// Table stacked style for small screen only +@include media-breakpoint-down(xs) { + .b-table-stacked-sm { + border: 1px solid gray("300"); + + tr { + + &:not(:first-child) > td[aria-colindex='1'] { + border-top: 1px solid gray("300"); + padding-top: 0.625rem; + } + + &:not(.b-table-empty-row) { + position: relative; // Restrict background color to get zebra striping for the row + + &::before, + &::after { + position: absolute; + top: 0; + height: 100%; + z-index: -1; + } + + &:before { + content: ''; + background-color: gray("200"); + width: 40%; + border-right: 1px solid gray("300"); + } + + &:after { + content: ''; + right: 0; + width: 60%; + } + + &:nth-child(even)::after { + background-color: gray("100"); // Zebra striping for the row + } + } + + td { + border: 0; + padding: 0.75rem; + text-align: left !important; + + &:last-of-type { + border-right: 0; + } + } + } + } + + .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] { + &::before { + text-align: left; + padding-left: $spacer /2; + } + + > div { + padding-left: 1rem; + } + } + + .table.b-table.b-table-stacked-sm > tbody > tr > :first-child { + border-top-width: 1px; + } +}
\ No newline at end of file |