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      float: left;
68      clear: left;
69      margin-right: $spacer / 2;
70    }
71    dd {
72      line-height: 1.2
73    }
74  }
75
76  .table-row-expand {
77    width: 50px;
78    .btn {
79      padding: 0;
80      width: 50px;
81    }
82    svg {
83      fill: theme-color("dark");
84    }
85  }
86  .b-table-sort-icon-left {
87    background-position: left calc(1.5rem / 2) center !important;
88    padding-left: calc(1.2rem + 0.65em) !important;
89    &:focus {
90      outline: none;
91      box-shadow: inset 0 0 0 2px theme-color('primary') !important;
92    }
93    &:hover {
94      background-color: theme-color-dark('light');
95    }
96  }
97}
98
99.b-table-sticky-header td {
100  border-top: none;
101}
102
103// Table stacked style for small screen only
104@include media-breakpoint-down(xs) {
105  .b-table-stacked-sm {
106    border: 1px solid gray("300");
107
108    tr {
109
110      &:not(:first-child) > td[aria-colindex='1'] {
111        border-top: 1px solid gray("300");
112        padding-top: 0.625rem;
113      }
114
115      &:not(.b-table-empty-row) {
116        position: relative; // Restrict background color to get zebra striping for the row
117
118        &::before,
119        &::after {
120          position: absolute;
121          top: 0;
122          height: 100%;
123          z-index: -1;
124        }
125
126        &:before {
127          content: '';
128          background-color: gray("200");
129          width: 40%;
130          border-right: 1px solid gray("300");
131        }
132
133        &:after {
134          content: '';
135          right: 0;
136          width: 60%;
137        }
138
139        &:nth-child(even)::after {
140          background-color: gray("100"); // Zebra striping for the row
141        }
142      }
143
144      td {
145        border: 0;
146        padding: 0.75rem;
147        text-align: left !important;
148
149        &:last-of-type {
150          border-right: 0;
151        }
152      }
153    }
154  }
155
156  .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
157    &::before {
158      text-align: left;
159      padding-left: $spacer /2;
160    }
161
162    > div {
163      padding-left: 1rem;
164    }
165  }
166
167  .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
168    border-top-width: 1px;
169  }
170}
171