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
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);
|
||
|
}
|
||
|
}
|