diff options
Diffstat (limited to 'src/assets/styles/bmc/_sila/_tables.scss')
-rw-r--r-- | src/assets/styles/bmc/_sila/_tables.scss | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss new file mode 100644 index 00000000..e8b5a832 --- /dev/null +++ b/src/assets/styles/bmc/_sila/_tables.scss @@ -0,0 +1,171 @@ +.table { + position: relative; + z-index: $zindex-dropdown; + + td { + border-top: 1px solid gray("300"); + border-bottom: 1px solid gray("300"); + &:first-of-type { + border-left: 1px solid gray("300"); + } + &:last-of-type { + border-right: 1px solid gray("300"); + } + vertical-align: middle; + + // Table action buttons + .btn-link { + width: 40px; + height: 40px; + padding: 5px !important; + display: inline-flex; + justify-content: center; + align-items: center; + } + } + + // thead-light added for specificity + .thead-light th { + vertical-align: middle; + border-top: 1px solid gray("300"); + border-bottom: 1px solid gray("300"); + &:first-of-type { + border-left: 1px solid gray("300"); + } + &:last-of-type { + border-right: 1px solid gray("300"); + } + color: theme-color("dark"); + &:focus { + outline: none; + } + } + + .status-icon svg { + width: 1rem; + height: auto; + } + + .b-table-has-details { + td { + border-bottom: none; + } + .table-row-expand svg { + transform: rotate(180deg); + } + } + + .b-table-details { + background-color: theme-color("light"); + td { + padding-left: calc(50px + (#{$table-cell-padding} * 2)); + padding-right: calc(50px + (#{$table-cell-padding} * 2)); + } + dl { + margin: 0; + } + dt { + float: left; + clear: left; + margin-right: $spacer / 2; + } + dd { + line-height: 1.2 + } + } + + .table-row-expand { + width: 50px; + .btn { + padding: 0; + width: 50px; + } + svg { + fill: theme-color("dark"); + } + } + .b-table-sort-icon-left { + background-position: left calc(1.5rem / 2) center !important; + padding-left: calc(1.2rem + 0.65em) !important; + &:focus { + outline: none; + box-shadow: inset 0 0 0 2px theme-color('primary') !important; + } + &:hover { + background-color: theme-color-dark('light'); + } + } +} + +.b-table-sticky-header td { + 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; + } +} |