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