You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

245 lines
4.7 KiB

9 months ago
/**
* TablePress Default CSS - DataTables-related code.
*
* Attention: Do not modify this file directly, but use the "Custom CSS" textarea
* on the "Plugin Options" screen of TablePress.
*
* @package TablePress
* @subpackage Frontend CSS
* @author Tobias Bäthge, Allan Jardine
* @since 1.0.0
*/
/* Default toggle variable for LTR and RTL CSS. */
$direction: "ltr" !default;
/* Default variables for the LTR CSS. */
$align-side: left !default;
$align-side-opposite: right !default;
$button-previous-icon: "\f053" !default;
$button-next-icon: "\f054" !default;
$position: "after" !default;
/* Variables for the RTL CSS. */
@if "rtl" == $direction {
$align-side: right;
$align-side-opposite: left;
$button-previous-icon: "\f054";
$button-next-icon: "\f053";
$position: "before";
}
/* Table wrapper */
.dataTables_wrapper {
position: relative;
clear: both;
margin-bottom: 1rem;
.tablepress {
clear: both;
margin-bottom: 0;
}
/* Self clearing */
&:after {
content: "";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* Dropdown and input style */
label input,
label select {
display: inline;
margin: 2px;
width: auto;
}
}
/* Length Change menu */
.dataTables_length {
float: $align-side;
white-space: nowrap;
}
/* Filter/Search */
.dataTables_filter {
float: $align-side-opposite;
white-space: nowrap;
label input {
margin-#{$align-side}: 0.5em;
margin-#{$align-side-opposite}: 0;
}
}
/* Table information */
.dataTables_info {
clear: both;
float: $align-side;
margin: 4px 0 0;
}
/* Pagination */
.dataTables_paginate {
float: $align-side-opposite;
margin: 4px 0 0;
.paginate_button {
color: #111111;
display: inline-block;
outline: none;
position: relative;
text-decoration: underline;
margin: 0 5px;
&:first-child {
margin-#{$align-side}: 0;
}
&:last-child {
margin-#{$align-side-opposite}: 0;
}
&:before,
&:after {
color: #d9edf7;
}
&:hover {
cursor: pointer;
text-decoration: none;
&:before,
&:after {
color: #049cdb;
}
}
&.disabled {
color: #999999;
text-decoration: none;
cursor: default;
&:before,
&:after {
color: #f9f9f9;
}
}
&.current {
font-weight: bold;
text-decoration: none;
cursor: default;
}
}
/* Two button pagination - previous/next */
&.paging_simple {
padding: 0 15px;
.paginate_button {
&.previous:before,
&.next:after {
text-align: $align-side;
font-family: TablePress;
font-size: 14px;
font-weight: bold;
-webkit-font-smoothing: antialiased;
content: $button-previous-icon;
text-shadow: 0.1em 0.1em #666666;
position: absolute;
top: 0;
#{$align-side-opposite}: auto;
bottom: 0;
#{$align-side}: -14px;
margin: auto;
height: 14px;
width: 14px;
line-height: 1;
}
&.next:after {
text-align: $align-side-opposite;
content: $button-next-icon;
#{$align-side}: auto;
@if "rtl" == $direction {
#{$align-side-opposite}: -14px;
}
}
}
}
}
/* Scrolling */
.dataTables_scroll {
clear: both;
/* Fix for wrong alignment and width. */
.tablepress {
width: 100% !important;
}
}
/* Ensure that the table head row doesn't get a margin from some themes. */
.dataTables_scrollHead table.tablepress {
margin: 0;
}
.dataTables_scrollBody {
-webkit-overflow-scrolling: touch;
/* Hide the sorting arrows in the extra table that is added for scrolling */
.tablepress thead th:#{$position} {
content: "";
}
}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing {
height: 0;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
}
/* Sorting */
.tablepress {
/* Custom properties */
--head-active-bg-color: #049cdb;
--head-active-text-color: var(--head-text-color);
.sorting,
.sorting_asc,
.sorting_desc {
position: relative;
padding-#{$align-side-opposite}: 20px; /* more padding for sort arrows on the opposite align side */
cursor: pointer;
outline: none;
&:#{$position} {
font-family: TablePress;
font-weight: normal;
font-size: 14px;
-webkit-font-smoothing: antialiased;
position: absolute;
top: 0;
bottom: 0;
#{$align-side}: auto;
#{$align-side-opposite}: 6px;
margin: auto;
height: 14px;
line-height: 1;
}
}
.sorting:#{$position} {
content: "\f0dc";
}
.sorting_asc:#{$position} {
content: "\f0d8";
padding: 0 0 2px;
}
.sorting_desc:#{$position} {
content: "\f0d7";
}
.sorting:hover,
.sorting_asc,
.sorting_desc {
background-color: var(--head-active-bg-color);
color: var(--head-active-text-color);
}
}