xref: /openbmc/webui-vue/src/assets/styles/bmc/custom/_tables.scss (revision a04d46f7cad356da22d794e994195e801f5998b7) 
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    vertical-align: middle;
15
16    // Table action buttons
17    .btn-link {
18      width: 40px;
19      height: 40px;
20      padding: 5px !important;
21      display: inline-flex;
22      justify-content: center;
23      align-items: center;
24    }
25  }
26
27  // thead-light added for specificity
28  .thead-light th {
29    vertical-align: middle;
30    border-top: 1px solid gray("300");
31    border-bottom: 1px solid gray("300");
32    &:first-of-type {
33      border-left: 1px solid gray("300");
34    }
35    &:last-of-type {
36      border-right: 1px solid gray("300");
37    }
38    color: theme-color("dark");
39    &:focus {
40      outline: none;
41    }
42  }
43
44  .status-icon svg {
45    width: 1rem;
46    height: auto;
47  }
48
49  .b-table-has-details {
50    td {
51      border-bottom: none;
52    }
53    .table-row-expand svg {
54      transform: rotate(180deg);
55    }
56  }
57
58  .b-table-details {
59    background-color: theme-color("light");
60    td {
61      padding-left: calc(50px + (#{$table-cell-padding} * 2));
62    }
63    dl {
64      margin: 0;
65    }
66    dt {
67      display: inline-block;
68      margin-right: $spacer / 2;
69    }
70    dd {
71      display: inline-block;
72    }
73  }
74
75  .table-row-expand {
76    width: 50px;
77    .btn {
78      padding: 0;
79      width: 50px;
80    }
81    svg {
82      fill: theme-color("dark");
83    }
84  }
85  .b-table-sort-icon-left {
86    background-position: left calc(1.5rem / 2) center !important;
87    padding-left: calc(1.2rem + 0.65em) !important;
88    &:focus {
89      outline: none;
90      box-shadow: inset 0 0 0 2px theme-color('primary') !important;
91    }
92    &:hover {
93      background-color: theme-color-dark('light');
94    }
95  }
96}
97
98.b-table-sticky-header td {
99  border-top: none;
100}
101
102// Table stacked style for small screen only
103@include media-breakpoint-down(xs) {
104  .b-table-stacked-sm {
105    border: 1px solid gray("300");
106
107    tr {
108
109      &:not(:first-child) > td[aria-colindex='1'] {
110        border-top: 1px solid gray("300");
111        padding-top: 0.625rem;
112      }
113
114      &:not(.b-table-empty-row) {
115        position: relative; // Restrict background color to get zebra striping for the row
116
117        &::before,
118        &::after {
119          position: absolute;
120          top: 0;
121          height: 100%;
122          z-index: -1;
123        }
124
125        &:before {
126          content: '';
127          background-color: gray("200");
128          width: 40%;
129          border-right: 1px solid gray("300");
130        }
131
132        &:after {
133          content: '';
134          right: 0;
135          width: 60%;
136        }
137
138        &:nth-child(even)::after {
139          background-color: gray("100"); // Zebra striping for the row
140        }
141      }
142
143      td {
144        border: 0;
145        padding: 0.75rem;
146        text-align: left !important;
147
148        &:last-of-type {
149          border-right: 0;
150        }
151      }
152    }
153  }
154
155  .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
156    &::before {
157      text-align: left;
158      padding-left: $spacer /2;
159    }
160
161    > div {
162      padding-left: 1rem;
163    }
164  }
165
166  .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
167    border-top-width: 1px;
168  }
169}
170