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