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