xref: /openbmc/webui-vue/src/assets/styles/bmc/custom/_tables.scss (revision 5e9c391cab08fc34f85776427b35a82853e7b617) 
1.table {
2  position: relative;
3  z-index: $zindex-dropdown;
4
5  td {
6    border-top: 1px solid gray("300");
7    border-bottom: 1px solid gray("300");
8    &:first-of-type {
9      border-left: 1px solid gray("300");
10    }
11    &:last-of-type {
12      border-right: 1px solid gray("300");
13    }
14  }
15
16  // thead-light added for specificiy
17  .thead-light th {
18    border: none;
19    color: theme-color("dark");
20  }
21
22  .status-icon svg {
23    width: 1rem;
24    height: auto;
25  }
26
27  .b-table-has-details {
28    td {
29      border-bottom: none;
30    }
31    .table-row-expand svg {
32      transform: rotate(180deg);
33    }
34  }
35
36  .b-table-details {
37    background-color: theme-color("light");
38    td {
39      padding-left: calc(50px + (#{$table-cell-padding} * 2));
40    }
41    dl {
42      margin: 0;
43    }
44    dt {
45      display: inline-block;
46      margin-right: $spacer / 2;
47    }
48    dd {
49      display: inline-block;
50    }
51  }
52
53  .table-row-expand {
54    width: 50px;
55    .btn {
56      padding: 0;
57      width: 50px;
58    }
59    svg {
60      fill: theme-color("dark");
61    }
62  }
63}
64
65.b-table-sticky-header td {
66  border-top: none;
67}
68
69// Table stacked style for small screen only
70@include media-breakpoint-down(xs) {
71  .b-table-stacked-sm {
72    border: 1px solid gray("300");
73
74    tr {
75
76      &:not(:first-child) > td[aria-colindex='1'] {
77        border-top: 1px solid gray("300");
78        padding-top: 0.625rem;
79      }
80
81      &:not(.b-table-empty-row) {
82        position: relative; // Restrict background color to get zebra striping for the row
83
84        &::before,
85        &::after {
86          position: absolute;
87          top: 0;
88          height: 100%;
89          z-index: -1;
90        }
91
92        &:before {
93          content: '';
94          background-color: gray("200");
95          width: 40%;
96          border-right: 1px solid gray("300");
97        }
98
99        &:after {
100          content: '';
101          right: 0;
102          width: 60%;
103        }
104
105        &:nth-child(even)::after {
106          background-color: gray("100"); // Zebra striping for the row
107        }
108      }
109
110      td {
111        border: 0;
112        padding: 0.75rem;
113        text-align: left !important;
114
115        &:last-of-type {
116          border-right: 0;
117        }
118      }
119    }
120  }
121
122  .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
123    &::before {
124      text-align: left;
125      padding-left: $spacer /2;
126    }
127
128    > div {
129      padding-left: 1rem;
130    }
131  }
132
133  .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
134    border-top-width: 1px;
135  }
136}