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