| @@ -1,10 +1,7 @@ | ||
| 1 | 1 | /** |
| 2 | 2 | * TablePress Default CSS - DataTables-related code. |
| 3 | 3 | * |
| 4 | - * Attention: Do not modify this file directly, but use the "Custom CSS" textarea | |
| 5 | - * on the "Plugin Options" screen of TablePress. | |
| 6 | - * | |
| 7 | 4 | * @package TablePress |
| 8 | 5 | * @subpackage Frontend CSS |
| 9 | 6 | * @author Tobias Bäthge, Allan Jardine |
| 10 | 7 | * @since 1.0.0 |
| @@ -9,159 +6,165 @@ | ||
| 9 | 6 | * @author Tobias Bäthge, Allan Jardine |
| 10 | 7 | * @since 1.0.0 |
| 11 | 8 | */ |
| 12 | 9 | |
| 10 | +// Load the Sass string module, for use in the `unicode` function. | |
| 11 | +@use "sass:string"; | |
| 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 | + | |
| 19 | +// Ensure that Unicode characters are embedded in ASCII-encoded form. | |
| 20 | +@function unicode($str) { | |
| 21 | + @return string.unquote("\"") + string.unquote(string.insert($str, "\\", 1)) + string.unquote("\""); | |
| 22 | +} | |
| 23 | + | |
| 16 | 24 | /* 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; | |
| 25 | +$align-side: left; | |
| 26 | +$align-side-opposite: right; | |
| 22 | 27 | |
| 23 | 28 | /* Variables for the RTL CSS. */ |
| 24 | 29 | @if "rtl" == $direction { |
| 25 | 30 | $align-side: right; |
| 26 | 31 | $align-side-opposite: left; |
| 27 | - $button-previous-icon: "\f054"; | |
| 28 | - $button-next-icon: "\f053"; | |
| 29 | - $position: "before"; | |
| 30 | 32 | } |
| 31 | 33 | |
| 32 | -/* Table wrapper */ | |
| 33 | -.dataTables_wrapper { | |
| 34 | - position: relative; | |
| 35 | - clear: both; | |
| 36 | - margin-bottom: 1rem; | |
| 34 | +/* Scrolling. */ | |
| 35 | +.dt-scroll { | |
| 36 | + width: 100%; | |
| 37 | 37 | |
| 38 | + /* Fix for wrong alignment and width. */ | |
| 38 | 39 | .tablepress { |
| 39 | - clear: both; | |
| 40 | - margin-bottom: 0; | |
| 40 | + width: 100% !important; | |
| 41 | 41 | } |
| 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 | 42 | } |
| 61 | 43 | |
| 62 | -/* Length Change menu */ | |
| 63 | -.dataTables_length { | |
| 64 | - float: $align-side; | |
| 65 | - white-space: nowrap; | |
| 66 | -} | |
| 44 | +div.dt-scroll-body { | |
| 45 | + thead, | |
| 46 | + tfoot { | |
| 47 | + tr { | |
| 48 | + height: 0; | |
| 67 | 49 | |
| 68 | -/* Filter/Search */ | |
| 69 | -.dataTables_filter { | |
| 70 | - float: $align-side-opposite; | |
| 71 | - white-space: nowrap; | |
| 50 | + th, | |
| 51 | + td { | |
| 52 | + height: 0 !important; | |
| 53 | + padding-top: 0 !important; | |
| 54 | + padding-bottom: 0 !important; | |
| 55 | + border-top-width: 0 !important; | |
| 56 | + border-bottom-width: 0 !important; | |
| 72 | 57 | |
| 73 | - label input { | |
| 74 | - margin-#{$align-side}: 0.5em; | |
| 75 | - margin-#{$align-side-opposite}: 0; | |
| 58 | + div.dt-scroll-sizing { | |
| 59 | + height: 0 !important; | |
| 60 | + overflow: hidden !important; | |
| 61 | + } | |
| 62 | + } | |
| 63 | + } | |
| 76 | 64 | } |
| 77 | -} | |
| 78 | 65 | |
| 79 | -/* Table information */ | |
| 80 | -.dataTables_info { | |
| 81 | - clear: both; | |
| 82 | - float: $align-side; | |
| 83 | - margin: 4px 0 0; | |
| 66 | + > table.dataTable > thead > tr { | |
| 67 | + > th, | |
| 68 | + > td { | |
| 69 | + overflow: hidden; | |
| 70 | + } | |
| 71 | + } | |
| 84 | 72 | } |
| 85 | 73 | |
| 86 | -/* Pagination */ | |
| 87 | -.dataTables_paginate { | |
| 88 | - float: $align-side-opposite; | |
| 89 | - margin: 4px 0 0; | |
| 74 | +/* Sorting. */ | |
| 75 | +.tablepress { | |
| 76 | + /* Custom properties. */ | |
| 77 | + --head-active-bg-color: #049cdb; | |
| 78 | + --head-active-text-color: var(--head-text-color); | |
| 79 | + --head-sort-arrow-color: var(--head-active-text-color); | |
| 90 | 80 | |
| 91 | - .paginate_button { | |
| 92 | - color: #111111; | |
| 93 | - display: inline-block; | |
| 94 | - outline: none; | |
| 95 | - position: relative; | |
| 96 | - text-decoration: underline; | |
| 97 | - margin: 0 5px; | |
| 81 | + thead { | |
| 82 | + th:active { | |
| 83 | + outline: none; | |
| 84 | + } | |
| 98 | 85 | |
| 99 | - &:first-child { | |
| 100 | - margin-#{$align-side}: 0; | |
| 86 | + .dt-orderable-asc, | |
| 87 | + .dt-ordering-asc { | |
| 88 | + .dt-column-order:before { | |
| 89 | + position: absolute; | |
| 90 | + display: block; | |
| 91 | + bottom: 50%; | |
| 92 | + content: unicode("25b2"); | |
| 93 | + content: unicode("25b2") / ""; | |
| 94 | + } | |
| 101 | 95 | } |
| 102 | - &:last-child { | |
| 103 | - margin-#{$align-side-opposite}: 0; | |
| 96 | + | |
| 97 | + .dt-orderable-desc, | |
| 98 | + .dt-ordering-desc { | |
| 99 | + .dt-column-order:after { | |
| 100 | + position: absolute; | |
| 101 | + display: block; | |
| 102 | + top: 50%; | |
| 103 | + content: unicode("25bc"); | |
| 104 | + content: unicode("25bc") / ""; | |
| 105 | + } | |
| 104 | 106 | } |
| 105 | - &:before, | |
| 106 | - &:after { | |
| 107 | - color: #d9edf7; | |
| 107 | + | |
| 108 | + .dt-orderable-asc, | |
| 109 | + .dt-orderable-desc, | |
| 110 | + .dt-ordering-asc, | |
| 111 | + .dt-ordering-desc { | |
| 112 | + .dt-column-order { | |
| 113 | + position: relative; | |
| 114 | + width: 12px; | |
| 115 | + height: 24px; | |
| 116 | + color: var(--head-sort-arrow-color); | |
| 117 | + line-height: 12px; | |
| 118 | + font-size: 14px; | |
| 119 | + font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important; | |
| 120 | + | |
| 121 | + &:before, | |
| 122 | + &:after { | |
| 123 | + opacity: 0.2; | |
| 124 | + } | |
| 125 | + } | |
| 108 | 126 | } |
| 109 | - &:hover { | |
| 127 | + | |
| 128 | + .dt-orderable-asc, | |
| 129 | + .dt-orderable-desc { | |
| 110 | 130 | cursor: pointer; |
| 111 | - text-decoration: none; | |
| 112 | - &:before, | |
| 113 | - &:after { | |
| 114 | - color: #049cdb; | |
| 131 | + outline-offset: -2px; | |
| 132 | + | |
| 133 | + &:hover { | |
| 134 | + background-color: var(--head-active-bg-color); | |
| 135 | + color: var(--head-active-text-color); | |
| 115 | 136 | } |
| 116 | 137 | } |
| 117 | - &.disabled { | |
| 118 | - color: #999999; | |
| 119 | - text-decoration: none; | |
| 120 | - cursor: default; | |
| 121 | - &:before, | |
| 122 | - &:after { | |
| 123 | - color: #f9f9f9; | |
| 124 | - } | |
| 138 | + | |
| 139 | + .dt-ordering-asc, | |
| 140 | + .dt-ordering-desc { | |
| 141 | + background-color: var(--head-active-bg-color); | |
| 142 | + color: var(--head-active-text-color); | |
| 125 | 143 | } |
| 126 | - &.current { | |
| 127 | - font-weight: bold; | |
| 128 | - text-decoration: none; | |
| 129 | - cursor: default; | |
| 144 | + | |
| 145 | + .dt-ordering-asc .dt-column-order:before, | |
| 146 | + .dt-ordering-desc .dt-column-order:after { | |
| 147 | + opacity: 0.8; | |
| 130 | 148 | } |
| 149 | + } | |
| 131 | 150 | |
| 132 | - } | |
| 151 | + thead, | |
| 152 | + tfoot { | |
| 153 | + > tr > * { | |
| 154 | + .dt-column-header, | |
| 155 | + .dt-column-footer { | |
| 156 | + display: flex; | |
| 157 | + justify-content: space-between; | |
| 158 | + align-items: center; | |
| 159 | + gap: 4px; | |
| 133 | 160 | |
| 134 | - /* Two button pagination - previous/next */ | |
| 135 | - &.paging_simple { | |
| 136 | - padding: 0 15px; | |
| 161 | + .dt-column-title { | |
| 162 | + flex-grow: 1; | |
| 137 | 163 | |
| 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; | |
| 148 | - position: absolute; | |
| 149 | - top: 0; | |
| 150 | - #{$align-side-opposite}: auto; | |
| 151 | - bottom: 0; | |
| 152 | - #{$align-side}: -14px; | |
| 153 | - margin: auto; | |
| 154 | - height: 14px; | |
| 155 | - width: 14px; | |
| 156 | - line-height: 1; | |
| 157 | - } | |
| 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 | + &:empty { | |
| 165 | + display: none; | |
| 166 | + } | |
| 164 | 167 | } |
| 165 | 168 | } |
| 166 | 169 | } |
| 167 | 170 | } |
| @@ -166,79 +169,117 @@ | ||
| 166 | 169 | } |
| 167 | 170 | } |
| 168 | 171 | } |
| 169 | 172 | |
| 170 | -/* Scrolling */ | |
| 171 | -.dataTables_scroll { | |
| 173 | +/* Automatic data type alignment. */ | |
| 174 | +.tablepress:where(.auto-type-alignment) { | |
| 175 | + .dt-type-numeric, | |
| 176 | + .dt-type-date, | |
| 177 | + /* .dt-right is used for custom dates. */ | |
| 178 | + .dt-right { | |
| 179 | + text-align: $align-side-opposite; | |
| 180 | + | |
| 181 | + .dt-column-header, | |
| 182 | + .dt-column-footer { | |
| 183 | + flex-direction: row-reverse; | |
| 184 | + } | |
| 185 | + } | |
| 186 | +} | |
| 187 | + | |
| 188 | +/* Element positioning. */ | |
| 189 | +.dt-container { | |
| 190 | + position: relative; | |
| 172 | 191 | clear: both; |
| 192 | + margin-bottom: 1rem; | |
| 173 | 193 | |
| 174 | - /* Fix for wrong alignment and width. */ | |
| 175 | - .tablepress { | |
| 176 | - width: 100% !important; | |
| 194 | + table.tablepress { | |
| 195 | + margin-bottom: 0; | |
| 196 | + | |
| 177 | 197 | } |
| 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 | 198 | |
| 186 | - /* Hide the sorting arrows in the extra table that is added for scrolling */ | |
| 187 | - .tablepress thead th:#{$position} { | |
| 188 | - content: ""; | |
| 199 | + .dt-layout-row { | |
| 200 | + display: flex; | |
| 201 | + flex-wrap: wrap; | |
| 202 | + flex-direction: row; | |
| 203 | + justify-content: space-between; | |
| 204 | + | |
| 205 | + &.dt-layout-table { | |
| 206 | + .dt-layout-cell { | |
| 207 | + display: block; | |
| 208 | + width: 100%; | |
| 209 | + } | |
| 210 | + } | |
| 189 | 211 | } |
| 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 | 212 | |
| 199 | -/* Sorting */ | |
| 200 | -.tablepress { | |
| 201 | - /* Custom properties */ | |
| 202 | - --head-active-bg-color: #049cdb; | |
| 203 | - --head-active-text-color: var(--head-text-color); | |
| 213 | + .dt-layout-cell { | |
| 214 | + display: flex; | |
| 215 | + flex-wrap: wrap; | |
| 216 | + flex-direction: row; | |
| 217 | + gap: 1em; | |
| 218 | + padding: 5px 0; | |
| 204 | 219 | |
| 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; | |
| 220 | + &.dt-layout-full { | |
| 221 | + justify-content: space-between; | |
| 222 | + align-items: center; | |
| 223 | + width: 100%; | |
| 212 | 224 | |
| 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; | |
| 225 | + > *:only-child { | |
| 226 | + margin: auto; | |
| 227 | + } | |
| 226 | 228 | } |
| 229 | + | |
| 230 | + &.dt-layout-start { | |
| 231 | + justify-content: flex-start; | |
| 232 | + align-items: center; | |
| 233 | + margin-right: auto; | |
| 234 | + } | |
| 235 | + | |
| 236 | + &.dt-layout-end { | |
| 237 | + justify-content: flex-end; | |
| 238 | + align-items: center; | |
| 239 | + margin-left: auto; | |
| 240 | + } | |
| 241 | + | |
| 242 | + &:empty { | |
| 243 | + display: none; | |
| 244 | + } | |
| 227 | 245 | } |
| 228 | - .sorting:#{$position} { | |
| 229 | - content: "\f0dc"; | |
| 246 | + | |
| 247 | + label { | |
| 248 | + display: inline; | |
| 249 | + width: auto; | |
| 230 | 250 | } |
| 231 | - .sorting_asc:#{$position} { | |
| 232 | - content: "\f0d8"; | |
| 233 | - padding: 0 0 2px; | |
| 251 | + | |
| 252 | + /* Input and select fields. */ | |
| 253 | + .dt-input { | |
| 254 | + display: inline; | |
| 255 | + padding: 5px; | |
| 256 | + width: auto; | |
| 257 | + font-size: inherit; | |
| 234 | 258 | } |
| 235 | - .sorting_desc:#{$position} { | |
| 236 | - content: "\f0d7"; | |
| 259 | + | |
| 260 | + /* Search and Length Change fields. */ | |
| 261 | + .dt-search, | |
| 262 | + .dt-length { | |
| 263 | + display: flex; | |
| 264 | + flex-wrap: wrap; | |
| 265 | + justify-content: center; | |
| 266 | + align-items: center; | |
| 267 | + gap: 5px; | |
| 237 | 268 | } |
| 238 | - .sorting:hover, | |
| 239 | - .sorting_asc, | |
| 240 | - .sorting_desc { | |
| 241 | - background-color: var(--head-active-bg-color); | |
| 242 | - color: var(--head-active-text-color); | |
| 269 | + | |
| 270 | + /* Pagination. */ | |
| 271 | + @include default-datatables-pagination.dt-paging; | |
| 272 | +} | |
| 273 | + | |
| 274 | +@media screen and (max-width: 767px) { | |
| 275 | + .dt-container { | |
| 276 | + .dt-layout-row { | |
| 277 | + flex-direction: column; | |
| 278 | + } | |
| 279 | + | |
| 280 | + .dt-layout-cell { | |
| 281 | + flex-direction: column; | |
| 282 | + padding: 0.5em 0; | |
| 283 | + } | |
| 243 | 284 | } |
| 244 | 285 | } |
