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