| @@ -12,233 +12,239 @@ | ||
| 12 | 12 | |
| 13 | 13 | /* Default toggle variable for LTR and RTL CSS. */ |
| 14 | 14 | $direction: "ltr" !default; |
| 15 | 15 | |
| 16 | +/* Import DataTables pagination code. */ | |
| 17 | +@use "default-datatables-pagination" with ($direction: $direction); | |
| 18 | + | |
| 16 | 19 | /* Default variables for the LTR CSS. */ |
| 17 | -$align-side: left !default; | |
| 18 | -$align-side-opposite: right !default; | |
| 19 | -$button-previous-icon: "\f053" !default; | |
| 20 | -$button-next-icon: "\f054" !default; | |
| 21 | -$position: "after" !default; | |
| 20 | +$align-side: left; | |
| 21 | +$align-side-opposite: right; | |
| 22 | 22 | |
| 23 | 23 | /* Variables for the RTL CSS. */ |
| 24 | 24 | @if "rtl" == $direction { |
| 25 | 25 | $align-side: right; |
| 26 | 26 | $align-side-opposite: left; |
| 27 | - $button-previous-icon: "\f054"; | |
| 28 | - $button-next-icon: "\f053"; | |
| 29 | - $position: "before"; | |
| 30 | 27 | } |
| 31 | 28 | |
| 32 | -/* Table wrapper */ | |
| 33 | -.dataTables_wrapper { | |
| 34 | - position: relative; | |
| 35 | - clear: both; | |
| 36 | - margin-bottom: 1rem; | |
| 29 | +/* Scrolling. */ | |
| 30 | +.dt-scroll { | |
| 31 | + width: 100%; | |
| 37 | 32 | |
| 33 | + /* Fix for wrong alignment and width. */ | |
| 38 | 34 | .tablepress { |
| 39 | - clear: both; | |
| 40 | - margin-bottom: 0; | |
| 35 | + width: 100% !important; | |
| 41 | 36 | } |
| 42 | - | |
| 43 | - /* Self clearing */ | |
| 44 | - &:after { | |
| 45 | - content: ""; | |
| 46 | - display: block; | |
| 47 | - clear: both; | |
| 48 | - visibility: hidden; | |
| 49 | - line-height: 0; | |
| 50 | - height: 0; | |
| 51 | - } | |
| 52 | - | |
| 53 | - /* Dropdown and input style */ | |
| 54 | - label input, | |
| 55 | - label select { | |
| 56 | - display: inline; | |
| 57 | - margin: 2px; | |
| 58 | - width: auto; | |
| 59 | - } | |
| 60 | 37 | } |
| 61 | 38 | |
| 62 | -/* Length Change menu */ | |
| 63 | -.dataTables_length { | |
| 64 | - float: $align-side; | |
| 65 | - white-space: nowrap; | |
| 66 | -} | |
| 39 | +div.dt-scroll-body { | |
| 40 | + thead, | |
| 41 | + tfoot { | |
| 42 | + tr { | |
| 43 | + height: 0; | |
| 67 | 44 | |
| 68 | -/* Filter/Search */ | |
| 69 | -.dataTables_filter { | |
| 70 | - float: $align-side-opposite; | |
| 71 | - white-space: nowrap; | |
| 45 | + th { | |
| 46 | + height: 0 !important; | |
| 47 | + padding-top: 0 !important; | |
| 48 | + padding-bottom: 0 !important; | |
| 49 | + border-top-width: 0 !important; | |
| 50 | + border-bottom-width: 0 !important; | |
| 72 | 51 | |
| 73 | - label input { | |
| 74 | - margin-#{$align-side}: 0.5em; | |
| 75 | - margin-#{$align-side-opposite}: 0; | |
| 52 | + div.dt-scroll-sizing { | |
| 53 | + height: 0 !important; | |
| 54 | + overflow: hidden !important; | |
| 55 | + } | |
| 56 | + } | |
| 57 | + } | |
| 76 | 58 | } |
| 77 | 59 | } |
| 78 | 60 | |
| 79 | -/* Table information */ | |
| 80 | -.dataTables_info { | |
| 81 | - clear: both; | |
| 82 | - float: $align-side; | |
| 83 | - margin: 4px 0 0; | |
| 61 | +div.dt-scroll-body > table.dataTable > thead > tr > th { | |
| 62 | + overflow: hidden; | |
| 84 | 63 | } |
| 85 | 64 | |
| 86 | -/* Pagination */ | |
| 87 | -.dataTables_paginate { | |
| 88 | - float: $align-side-opposite; | |
| 89 | - margin: 4px 0 0; | |
| 65 | +/* Sorting. */ | |
| 66 | +.tablepress { | |
| 67 | + /* Custom properties */ | |
| 68 | + --head-active-bg-color: #049cdb; | |
| 69 | + --head-active-text-color: var(--head-text-color); | |
| 70 | + --head-sort-arrow-color: var(--head-active-text-color); | |
| 90 | 71 | |
| 91 | - .paginate_button { | |
| 92 | - color: #111111; | |
| 93 | - display: inline-block; | |
| 94 | - outline: none; | |
| 95 | - position: relative; | |
| 96 | - text-decoration: underline; | |
| 97 | - margin: 0 5px; | |
| 72 | + thead { | |
| 73 | + th:active { | |
| 74 | + outline: none; | |
| 75 | + } | |
| 98 | 76 | |
| 99 | - &:first-child { | |
| 100 | - margin-#{$align-side}: 0; | |
| 101 | - } | |
| 102 | - &:last-child { | |
| 103 | - margin-#{$align-side-opposite}: 0; | |
| 104 | - } | |
| 105 | - &:before, | |
| 106 | - &:after { | |
| 107 | - color: #d9edf7; | |
| 108 | - } | |
| 109 | - &:hover { | |
| 110 | - cursor: pointer; | |
| 111 | - text-decoration: none; | |
| 112 | - &:before, | |
| 113 | - &:after { | |
| 114 | - color: #049cdb; | |
| 77 | + .dt-orderable-asc, | |
| 78 | + .dt-ordering-asc { | |
| 79 | + .dt-column-order:before { | |
| 80 | + position: absolute; | |
| 81 | + display: block; | |
| 82 | + bottom: 50%; | |
| 83 | + content: "\25b2" / ""; | |
| 115 | 84 | } |
| 116 | 85 | } |
| 117 | - &.disabled { | |
| 118 | - color: #999999; | |
| 119 | - text-decoration: none; | |
| 120 | - cursor: default; | |
| 121 | - &:before, | |
| 122 | - &:after { | |
| 123 | - color: #f9f9f9; | |
| 86 | + | |
| 87 | + .dt-orderable-desc, | |
| 88 | + .dt-ordering-desc { | |
| 89 | + .dt-column-order:after { | |
| 90 | + position: absolute; | |
| 91 | + display: block; | |
| 92 | + top: 50%; | |
| 93 | + content: "\25bc" / ""; | |
| 124 | 94 | } |
| 125 | 95 | } |
| 126 | - &.current { | |
| 127 | - font-weight: bold; | |
| 128 | - text-decoration: none; | |
| 129 | - cursor: default; | |
| 130 | - } | |
| 131 | 96 | |
| 132 | - } | |
| 97 | + .dt-orderable-asc, | |
| 98 | + .dt-orderable-desc, | |
| 99 | + .dt-ordering-asc, | |
| 100 | + .dt-ordering-desc { | |
| 101 | + position: relative; | |
| 102 | + padding-#{$align-side-opposite}: 24px; | |
| 133 | 103 | |
| 134 | - /* Two button pagination - previous/next */ | |
| 135 | - &.paging_simple { | |
| 136 | - padding: 0 15px; | |
| 137 | - | |
| 138 | - .paginate_button { | |
| 139 | - &.previous:before, | |
| 140 | - &.next:after { | |
| 141 | - text-align: $align-side; | |
| 142 | - font-family: TablePress; | |
| 143 | - font-size: 14px; | |
| 144 | - font-weight: bold; | |
| 145 | - -webkit-font-smoothing: antialiased; | |
| 146 | - content: $button-previous-icon; | |
| 147 | - text-shadow: 0.1em 0.1em #666666; | |
| 104 | + .dt-column-order { | |
| 148 | 105 | position: absolute; |
| 106 | + #{$align-side-opposite}: 6px; | |
| 149 | 107 | top: 0; |
| 150 | - #{$align-side-opposite}: auto; | |
| 151 | 108 | bottom: 0; |
| 152 | - #{$align-side}: -14px; | |
| 153 | - margin: auto; | |
| 154 | - height: 14px; | |
| 155 | - width: 14px; | |
| 156 | - line-height: 1; | |
| 109 | + width: 12px; | |
| 110 | + color: var(--head-sort-arrow-color); | |
| 111 | + | |
| 112 | + &:before, | |
| 113 | + &:after { | |
| 114 | + opacity: 0.2; | |
| 115 | + line-height: 12px; | |
| 116 | + font-size: 12px; | |
| 117 | + font-family: sans-serif !important; | |
| 118 | + } | |
| 157 | 119 | } |
| 158 | - &.next:after { | |
| 159 | - text-align: $align-side-opposite; | |
| 160 | - content: $button-next-icon; | |
| 161 | - #{$align-side}: auto; | |
| 162 | - @if "rtl" == $direction { | |
| 163 | - #{$align-side-opposite}: -14px; | |
| 164 | - } | |
| 120 | + } | |
| 121 | + | |
| 122 | + .dt-orderable-asc, | |
| 123 | + .dt-orderable-desc { | |
| 124 | + cursor: pointer; | |
| 125 | + outline-offset: -2px; | |
| 126 | + | |
| 127 | + &:hover { | |
| 128 | + background-color: var(--head-active-bg-color); | |
| 129 | + color: var(--head-active-text-color); | |
| 165 | 130 | } |
| 166 | 131 | } |
| 132 | + | |
| 133 | + .dt-ordering-asc, | |
| 134 | + .dt-ordering-desc { | |
| 135 | + background-color: var(--head-active-bg-color); | |
| 136 | + color: var(--head-active-text-color); | |
| 137 | + } | |
| 138 | + | |
| 139 | + .dt-ordering-asc .dt-column-order:before, | |
| 140 | + .dt-ordering-desc .dt-column-order:after { | |
| 141 | + opacity: 0.8; | |
| 142 | + } | |
| 167 | 143 | } |
| 168 | 144 | } |
| 169 | 145 | |
| 170 | -/* Scrolling */ | |
| 171 | -.dataTables_scroll { | |
| 146 | +/* Automatic data type alignment. */ | |
| 147 | +.tablepress:where(.auto-type-alignment) { | |
| 148 | + .dt-type-numeric, | |
| 149 | + .dt-type-date, | |
| 150 | + /* .dt-right is used for custom dates. */ | |
| 151 | + .dt-right { | |
| 152 | + text-align: $align-side-opposite; | |
| 153 | + } | |
| 154 | +} | |
| 155 | + | |
| 156 | +/* Element positioning. */ | |
| 157 | +.dt-container { | |
| 158 | + position: relative; | |
| 172 | 159 | clear: both; |
| 160 | + margin-bottom: 1rem; | |
| 173 | 161 | |
| 174 | - /* Fix for wrong alignment and width. */ | |
| 175 | 162 | .tablepress { |
| 176 | - width: 100% !important; | |
| 163 | + margin-bottom: 0; | |
| 177 | 164 | } |
| 178 | -} | |
| 179 | -/* Ensure that the table head row doesn't get a margin from some themes. */ | |
| 180 | -.dataTables_scrollHead table.tablepress { | |
| 181 | - margin: 0; | |
| 182 | -} | |
| 183 | -.dataTables_scrollBody { | |
| 184 | - -webkit-overflow-scrolling: touch; | |
| 185 | 165 | |
| 186 | - /* Hide the sorting arrows in the extra table that is added for scrolling */ | |
| 187 | - .tablepress thead th:#{$position} { | |
| 188 | - content: ""; | |
| 166 | + .dt-layout-row { | |
| 167 | + display: flex; | |
| 168 | + flex-wrap: wrap; | |
| 169 | + flex-direction: row; | |
| 170 | + justify-content: space-between; | |
| 171 | + | |
| 172 | + &.dt-layout-table { | |
| 173 | + .dt-layout-cell { | |
| 174 | + display: block; | |
| 175 | + width: 100%; | |
| 176 | + } | |
| 177 | + } | |
| 189 | 178 | } |
| 190 | -} | |
| 191 | -.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing, | |
| 192 | -.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing { | |
| 193 | - height: 0; | |
| 194 | - overflow: hidden; | |
| 195 | - margin: 0 !important; | |
| 196 | - padding: 0 !important; | |
| 197 | -} | |
| 198 | 179 | |
| 199 | -/* Sorting */ | |
| 200 | -.tablepress { | |
| 201 | - /* Custom properties */ | |
| 202 | - --head-active-bg-color: #049cdb; | |
| 203 | - --head-active-text-color: var(--head-text-color); | |
| 180 | + .dt-layout-cell { | |
| 181 | + display: flex; | |
| 182 | + flex-wrap: wrap; | |
| 183 | + flex-direction: row; | |
| 184 | + gap: 1em; | |
| 185 | + padding: 5px 0; | |
| 204 | 186 | |
| 205 | - .sorting, | |
| 206 | - .sorting_asc, | |
| 207 | - .sorting_desc { | |
| 208 | - position: relative; | |
| 209 | - padding-#{$align-side-opposite}: 20px; /* more padding for sort arrows on the opposite align side */ | |
| 210 | - cursor: pointer; | |
| 211 | - outline: none; | |
| 187 | + &.dt-layout-full { | |
| 188 | + justify-content: space-between; | |
| 189 | + align-items: center; | |
| 190 | + width: 100%; | |
| 212 | 191 | |
| 213 | - &:#{$position} { | |
| 214 | - font-family: TablePress; | |
| 215 | - font-weight: normal; | |
| 216 | - font-size: 14px; | |
| 217 | - -webkit-font-smoothing: antialiased; | |
| 218 | - position: absolute; | |
| 219 | - top: 0; | |
| 220 | - bottom: 0; | |
| 221 | - #{$align-side}: auto; | |
| 222 | - #{$align-side-opposite}: 6px; | |
| 223 | - margin: auto; | |
| 224 | - height: 14px; | |
| 225 | - line-height: 1; | |
| 192 | + > *:only-child { | |
| 193 | + margin: auto; | |
| 194 | + } | |
| 226 | 195 | } |
| 196 | + | |
| 197 | + &.dt-layout-start { | |
| 198 | + justify-content: flex-start; | |
| 199 | + align-items: center; | |
| 200 | + margin-right: auto; | |
| 201 | + } | |
| 202 | + | |
| 203 | + &.dt-layout-end { | |
| 204 | + justify-content: flex-end; | |
| 205 | + align-items: center; | |
| 206 | + margin-left: auto; | |
| 207 | + } | |
| 208 | + | |
| 209 | + &:empty { | |
| 210 | + display: none; | |
| 211 | + } | |
| 227 | 212 | } |
| 228 | - .sorting:#{$position} { | |
| 229 | - content: "\f0dc"; | |
| 213 | + | |
| 214 | + label { | |
| 215 | + display: inline; | |
| 230 | 216 | } |
| 231 | - .sorting_asc:#{$position} { | |
| 232 | - content: "\f0d8"; | |
| 233 | - padding: 0 0 2px; | |
| 217 | + | |
| 218 | + /* Input and select fields. */ | |
| 219 | + .dt-input { | |
| 220 | + display: inline; | |
| 221 | + padding: 5px; | |
| 222 | + width: auto; | |
| 223 | + font-size: inherit; | |
| 234 | 224 | } |
| 235 | - .sorting_desc:#{$position} { | |
| 236 | - content: "\f0d7"; | |
| 225 | + | |
| 226 | + /* Search field. */ | |
| 227 | + .dt-search { | |
| 228 | + display: flex; | |
| 229 | + flex-wrap: wrap; | |
| 230 | + justify-content: center; | |
| 231 | + align-items: center; | |
| 232 | + gap: 5px; | |
| 237 | 233 | } |
| 238 | - .sorting:hover, | |
| 239 | - .sorting_asc, | |
| 240 | - .sorting_desc { | |
| 241 | - background-color: var(--head-active-bg-color); | |
| 242 | - color: var(--head-active-text-color); | |
| 234 | + | |
| 235 | + /* Pagination. */ | |
| 236 | + @include default-datatables-pagination.dt-paging; | |
| 237 | +} | |
| 238 | + | |
| 239 | +@media screen and (max-width: 767px) { | |
| 240 | + .dt-container { | |
| 241 | + .dt-layout-row { | |
| 242 | + flex-direction: column; | |
| 243 | + } | |
| 244 | + | |
| 245 | + .dt-layout-cell { | |
| 246 | + flex-direction: column; | |
| 247 | + padding: 0.5em 0; | |
| 248 | + } | |
| 243 | 249 | } |
| 244 | 250 | } |
