ajax-table/ajaxTable.min.css

Handles a table loading with AJAX

@-webkit-keyframes ajax-table-loader{0%,100%,80%{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}@keyframes ajax-table-loader{0%,100%,80%{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}body .ajax-table-processed{width:100%;border-collapse:separate;border:1px solid #ddd;border-spacing:0;font-family:sans-serif}body .ajax-table-processed thead tr th{position:relative;border:1px solid #ddd;border-top:none;padding:8px;padding-right:30px;cursor:pointer;background:#bbb;font-weight:700;vertical-align:middle}body .ajax-table-processed thead tr th:after{position:absolute;right:11px;top:50%;transform:translateY(-50%);content:'\2193';opacity:.5}body .ajax-table-processed thead tr th.sorted:after{opacity:1}body .ajax-table-processed thead tr th.sorted.inverted:after{content:'\2191'}body .ajax-table-processed tfoot{display:table-header-group}body .ajax-table-processed tfoot tr td{border:1px solid #ddd;padding:8px;background:#bbb}body .ajax-table-processed tfoot tr td input{width:100%;padding:3px;box-sizing:border-box;font-weight:700}body .ajax-table-processed tfoot tr td input::placeholder{color:red;font-size:11px}body .ajax-table-processed tbody tr:last-of-type td{border-bottom:none}body .ajax-table-processed tbody tr td{border-left:1px solid #ddd;border-bottom:1px solid #ddd;padding:8px}body .ajax-table-processed tbody tr td:first-of-type{border-left:none}body .ajax-table-processed tbody tr td.empty{text-align:center}body .ajax-table-utilities{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-display:flex;-moz-display:flex;-ms-display:flex;-o-display:flex;display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:10px}body .ajax-table-utilities .ajax-table-buttons,body .ajax-table-utilities .ajax-table-pagination{position:relative;display:inline-block;min-width:-moz-fit-content;min-width:fit-content;margin:5px}body .ajax-table-utilities .ajax-table-buttons ul,body .ajax-table-utilities .ajax-table-pagination ul{position:relative;top:50%;transform:translateY(-50%);list-style-type:none;padding-left:0;margin:0;-webkit-display:inline-flex;-moz-display:inline-flex;-ms-display:inline-flex;-o-display:inline-flex;display:inline-flex}body .ajax-table-utilities .ajax-table-buttons ul li,body .ajax-table-utilities .ajax-table-pagination ul li{display:inline-block;border:1px solid #ddd;border-right:none;height:28px;width:28px;text-align:center;line-height:28px;cursor:not-allowed;background:#fff;min-width:fit-content;min-width:-moz-fit-content;padding:0 5px}body .ajax-table-utilities .ajax-table-buttons ul li:first-of-type,body .ajax-table-utilities .ajax-table-pagination ul li:first-of-type{border-top-left-radius:2px;border-bottom-left-radius:2px}body .ajax-table-utilities .ajax-table-buttons ul li:last-of-type,body .ajax-table-utilities .ajax-table-pagination ul li:last-of-type{border-top-right-radius:2px;border-bottom-right-radius:2px;border-right:1px solid #ddd}body .ajax-table-utilities .ajax-table-buttons ul li.export,body .ajax-table-utilities .ajax-table-buttons ul li.pagination-next:not(.disabled),body .ajax-table-utilities .ajax-table-buttons ul li.pagination-page,body .ajax-table-utilities .ajax-table-buttons ul li.pagination-prev:not(.disabled),body .ajax-table-utilities .ajax-table-pagination ul li.export,body .ajax-table-utilities .ajax-table-pagination ul li.pagination-next:not(.disabled),body .ajax-table-utilities .ajax-table-pagination ul li.pagination-page,body .ajax-table-utilities .ajax-table-pagination ul li.pagination-prev:not(.disabled){cursor:pointer}body .ajax-table-utilities .ajax-table-buttons ul li.active,body .ajax-table-utilities .ajax-table-pagination ul li.active{background:rgba(128,128,128,.4)}body .ajax-table-utilities .ajax-table-buttons ul li.disabled,body .ajax-table-utilities .ajax-table-pagination ul li.disabled{color:grey}body .ajax-table-utilities .ajax-table-pagination{text-align:right}body .ajax-table-utilities .ajax-table-buttons-loader>div,body .ajax-table-utilities .ajax-table-buttons-loader>div:after,body .ajax-table-utilities .ajax-table-buttons-loader>div:before{background:grey;-webkit-animation:ajax-table-loader 1s infinite ease-in-out;animation:ajax-table-loader 1s infinite ease-in-out;width:1em;height:30px}body .ajax-table-utilities .ajax-table-buttons-loader>div{top:50%;transform:translateY(-50%);color:grey;text-indent:-9999em;position:relative;font-size:4px;-webkit-animation-delay:-.16s;animation-delay:-.16s;margin-left:12px}body .ajax-table-utilities .ajax-table-buttons-loader>div:after,body .ajax-table-utilities .ajax-table-buttons-loader>div:before{position:absolute;top:0;content:''}body .ajax-table-utilities .ajax-table-buttons-loader>div:before{left:-1.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}body .ajax-table-utilities .ajax-table-buttons-loader>div:after{left:1.5em}body .ajax-table-utilities .ajax-table-buttons-loader.loaded{display:none}body .ajax-table-utilities .ajax-table-buttons{display:none;width:130px}body .ajax-table-utilities .ajax-table-buttons.available{display:inline-block}body .ajax-table-utilities .ajax-table-count{display:inline-block}body .ajax-table-utilities .ajax-table-count>div{position:relative;top:50%;transform:translateY(-50%)}@media print{@-webkit-keyframes ajax-table-loader{0%,100%,80%{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}@keyframes ajax-table-loader{0%,100%,80%{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}.ajax-table-processed{width:100%;border-collapse:separate;border:1px solid #ddd;border-spacing:0;font-family:sans-serif}.ajax-table-processed thead tr th{position:relative;border:1px solid #ddd;border-top:none;padding:8px;padding-right:30px;cursor:pointer;background:#bbb;font-weight:700;vertical-align:middle}.ajax-table-processed thead tr th:after{position:absolute;right:11px;top:50%;transform:translateY(-50%);content:'\2193';opacity:.5}.ajax-table-processed thead tr th.sorted:after{opacity:1}.ajax-table-processed thead tr th.sorted.inverted:after{content:'\2191'}.ajax-table-processed tfoot{display:table-header-group}.ajax-table-processed tfoot tr td{border:1px solid #ddd;padding:8px;background:#bbb}.ajax-table-processed tfoot tr td input{width:100%;padding:3px;box-sizing:border-box;font-weight:700}.ajax-table-processed tfoot tr td input::placeholder{color:red;font-size:11px}.ajax-table-processed tbody tr:last-of-type td{border-bottom:none}.ajax-table-processed tbody tr td{border-left:1px solid #ddd;border-bottom:1px solid #ddd;padding:8px}.ajax-table-processed tbody tr td:first-of-type{border-left:none}.ajax-table-processed tbody tr td.empty{text-align:center}.ajax-table-utilities{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-display:flex;-moz-display:flex;-ms-display:flex;-o-display:flex;display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:10px}.ajax-table-utilities .ajax-table-buttons,.ajax-table-utilities .ajax-table-pagination{position:relative;display:inline-block;min-width:-moz-fit-content;min-width:fit-content;margin:5px}.ajax-table-utilities .ajax-table-buttons ul,.ajax-table-utilities .ajax-table-pagination ul{position:relative;top:50%;transform:translateY(-50%);list-style-type:none;padding-left:0;margin:0;-webkit-display:inline-flex;-moz-display:inline-flex;-ms-display:inline-flex;-o-display:inline-flex;display:inline-flex}.ajax-table-utilities .ajax-table-buttons ul li,.ajax-table-utilities .ajax-table-pagination ul li{display:inline-block;border:1px solid #ddd;border-right:none;height:28px;width:28px;text-align:center;line-height:28px;cursor:not-allowed;background:#fff;min-width:fit-content;min-width:-moz-fit-content;padding:0 5px}.ajax-table-utilities .ajax-table-buttons ul li:first-of-type,.ajax-table-utilities .ajax-table-pagination ul li:first-of-type{border-top-left-radius:2px;border-bottom-left-radius:2px}.ajax-table-utilities .ajax-table-buttons ul li:last-of-type,.ajax-table-utilities .ajax-table-pagination ul li:last-of-type{border-top-right-radius:2px;border-bottom-right-radius:2px;border-right:1px solid #ddd}.ajax-table-utilities .ajax-table-buttons ul li.export,.ajax-table-utilities .ajax-table-buttons ul li.pagination-next:not(.disabled),.ajax-table-utilities .ajax-table-buttons ul li.pagination-page,.ajax-table-utilities .ajax-table-buttons ul li.pagination-prev:not(.disabled),.ajax-table-utilities .ajax-table-pagination ul li.export,.ajax-table-utilities .ajax-table-pagination ul li.pagination-next:not(.disabled),.ajax-table-utilities .ajax-table-pagination ul li.pagination-page,.ajax-table-utilities .ajax-table-pagination ul li.pagination-prev:not(.disabled){cursor:pointer}.ajax-table-utilities .ajax-table-buttons ul li.active,.ajax-table-utilities .ajax-table-pagination ul li.active{background:rgba(128,128,128,.4)}.ajax-table-utilities .ajax-table-buttons ul li.disabled,.ajax-table-utilities .ajax-table-pagination ul li.disabled{color:grey}.ajax-table-utilities .ajax-table-pagination{text-align:right}.ajax-table-utilities .ajax-table-buttons-loader>div,.ajax-table-utilities .ajax-table-buttons-loader>div:after,.ajax-table-utilities .ajax-table-buttons-loader>div:before{background:grey;-webkit-animation:ajax-table-loader 1s infinite ease-in-out;animation:ajax-table-loader 1s infinite ease-in-out;width:1em;height:30px}.ajax-table-utilities .ajax-table-buttons-loader>div{top:50%;transform:translateY(-50%);color:grey;text-indent:-9999em;position:relative;font-size:4px;-webkit-animation-delay:-.16s;animation-delay:-.16s;margin-left:12px}.ajax-table-utilities .ajax-table-buttons-loader>div:after,.ajax-table-utilities .ajax-table-buttons-loader>div:before{position:absolute;top:0;content:''}.ajax-table-utilities .ajax-table-buttons-loader>div:before{left:-1.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.ajax-table-utilities .ajax-table-buttons-loader>div:after{left:1.5em}.ajax-table-utilities .ajax-table-buttons-loader.loaded{display:none}.ajax-table-utilities .ajax-table-buttons{display:none;width:130px}.ajax-table-utilities .ajax-table-buttons.available{display:inline-block}.ajax-table-utilities .ajax-table-count{display:inline-block}.ajax-table-utilities .ajax-table-count>div{position:relative;top:50%;transform:translateY(-50%)}}