mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-10-08 13:44:18 +00:00
updated less theme
This commit is contained in:
Mottie
parent
1908a3dfc8
commit
9087cdaf22
185
css/theme.less
185
css/theme.less
@ -6,6 +6,9 @@
|
||||
|
||||
*/
|
||||
|
||||
/*** theme ***/
|
||||
@theme : 'table.tablesorter-custom';
|
||||
|
||||
/*** fonts ***/
|
||||
@tableHeaderFont : 11px 'trebuchet ms', verdana, arial;
|
||||
@tableBodyFont : 11px 'trebuchet ms', verdana, arial;
|
||||
@ -22,10 +25,15 @@
|
||||
@bodyBackground : #fff;
|
||||
@bodyTextColor : #000;
|
||||
|
||||
@headerSortUp : desaturate(@headerBackground, 10%);
|
||||
@headerSortDown : darken(@headerSortUp, 5%);
|
||||
@headerSortUp : lighten(spin(@headerBackground, 5), 10%); /* desaturate(@headerBackground, 10%); */
|
||||
@headerSortDown : darken(spin(@headerBackground, -5), 10%); /* darken(@headerSortUp, 5%); */
|
||||
|
||||
@filterCellBackground : #eee;
|
||||
@filterElementTextColor: #333;
|
||||
@filterElementBkgd : #fff;
|
||||
@filterElementBorder : 1px solid #bbb;
|
||||
@filterTransitionTime : 0.1s;
|
||||
@filterRowHiddenHeight : 4px; /* becomes height using padding (so it's divided by 2) */
|
||||
|
||||
@overallPadding : 4px;
|
||||
/* 20px should be slightly wider than the icon width to avoid overlap */
|
||||
@ -65,6 +73,17 @@
|
||||
@tertiaryOdd : @secondaryEven;
|
||||
@tertiaryEven : lighten( @secondaryEven, 5% );
|
||||
|
||||
/* Filter widget transition */
|
||||
.filterWidgetTransition {
|
||||
-webkit-transition: line-height @filterTransitionTime ease;
|
||||
-moz-transition: line-height @filterTransitionTime ease;
|
||||
-o-transition: line-height @filterTransitionTime ease;
|
||||
transition: line-height @filterTransitionTime ease;
|
||||
}
|
||||
|
||||
/*** Arrows ***/
|
||||
@arrowPosition : center right;
|
||||
|
||||
/* black */
|
||||
@unsortedBlack : url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
|
||||
@sortUpBlack : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
|
||||
@ -79,7 +98,7 @@
|
||||
|
||||
@filterIconWhite : url(data:image/gif;base64,R0lGODlhCgANALMAAP////r6+u7u7ufn5+Hh4d3d3cXFxb+/v76+vru7u7m5uf///wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAA0AAAQpUMhJl72YanEG+OBwLEkAAkFyGaeBLcVXvAvyIfTy5TrAAwQeQcEjYiIAOw==);
|
||||
|
||||
/*** Arrows ***/
|
||||
/* automatically choose the correct arrow/text color */
|
||||
.unsorted (@a) when (lightness(@a) >= 50%) {
|
||||
background-image: @unsortedBlack;
|
||||
color: @headerTextColor;
|
||||
@ -111,33 +130,44 @@
|
||||
background-image: @filterIconWhite;
|
||||
}
|
||||
|
||||
table.tablesorter {
|
||||
/* variable theme name - requires less.js 1.3+;
|
||||
or just replace (!".@{theme}") with the contents of @theme
|
||||
*/
|
||||
(~".@{theme}") {
|
||||
font: @tableBodyFont;
|
||||
background-color: @borderAndBackground;
|
||||
margin: 10px 0 15px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-spacing: 0;
|
||||
border: @overallBorder;
|
||||
border-width: 1px 0 0 1px;
|
||||
|
||||
th, td {
|
||||
border: @overallBorder;
|
||||
border-width: 0 1px 1px 0;
|
||||
}
|
||||
|
||||
/* style th's outside of the thead */
|
||||
th, thead td {
|
||||
background-color: @headerBackground;
|
||||
color: @headerTextColor;
|
||||
border-collapse: collapse;
|
||||
font: @tableHeaderFont;
|
||||
font-weight: bold;
|
||||
color: @headerTextColor;
|
||||
background-color: @headerBackground;
|
||||
border-collapse: collapse;
|
||||
padding: @overallPadding;
|
||||
}
|
||||
|
||||
tbody td, tfoot th, tfoot td {
|
||||
padding: @overallPadding;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* style header */
|
||||
.tablesorter-header {
|
||||
.unsorted(@headerBackground);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
background-position: @arrowPosition;
|
||||
padding: @headerPadding;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -152,6 +182,66 @@ table.tablesorter {
|
||||
.sortDown(@headerBackground);
|
||||
}
|
||||
|
||||
/* tfoot */
|
||||
tfoot .tablesorter-headerSortUp,
|
||||
tfoot .tablesorter-headerSortDown {
|
||||
/* remove sort arrows from footer */
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
/* optional disabled input styling */
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* body */
|
||||
tbody {
|
||||
|
||||
td {
|
||||
.allRows;
|
||||
padding: @overallPadding;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Zebra Widget - row alternating colors */
|
||||
tr.odd td {
|
||||
.oddRows;
|
||||
}
|
||||
tr.even td {
|
||||
.evenRows;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* hovered row colors
|
||||
you'll need to add additional lines for
|
||||
rows with more than 2 child rows
|
||||
*/
|
||||
tbody > tr:hover td,
|
||||
tbody > tr:hover + tr.tablesorter-childRow > td,
|
||||
tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
tbody > tr.even:hover > td,
|
||||
tbody > tr.even:hover + tr.tablesorter-childRow > td,
|
||||
tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
|
||||
.evenHovered;
|
||||
}
|
||||
tbody > tr.odd:hover > td,
|
||||
tbody > tr.odd:hover + tr.tablesorter-childRow > td,
|
||||
tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
|
||||
.oddHovered;
|
||||
}
|
||||
|
||||
/* table processing indicator - indeterminate spinner */
|
||||
.tablesorter-processing {
|
||||
background-image: @processingIcon;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Column Widget - column sort colors */
|
||||
tr.odd td.primary {
|
||||
background-color: @primaryOdd;
|
||||
@ -172,72 +262,47 @@ table.tablesorter {
|
||||
background-color: @tertiaryEven;
|
||||
}
|
||||
|
||||
/* optional disabled input styling */
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* filter widget */
|
||||
.tablesorter-filter-row input,
|
||||
.tablesorter-filter-row select{
|
||||
width: 95%;
|
||||
width: 98%;
|
||||
height: inherit;
|
||||
margin: 0;
|
||||
padding: @overallPadding;
|
||||
color: @filterElementTextColor;
|
||||
background: @filterElementBkgd;
|
||||
border: @filterElementBorder;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
.filterWidgetTransition;
|
||||
}
|
||||
.tablesorter-filter-row td {
|
||||
text-align: center;
|
||||
background: @filterCellBackground;
|
||||
line-height: normal;
|
||||
text-align: center; /* center the input */
|
||||
.filterWidgetTransition;
|
||||
}
|
||||
/* hidden filter row */
|
||||
.tablesorter-filter-row.hideme td {
|
||||
padding: @filterRowHiddenHeight / 2;
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tablesorter-filter-row.hideme .tablesorter-filter {
|
||||
height: 1px;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* don't use visibility: hidden because it disables tabbing */
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
/* body */
|
||||
tbody {
|
||||
|
||||
td {
|
||||
.allRows;
|
||||
padding: @overallPadding;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Zebra Widget - row alternating colors */
|
||||
tr.odd td {
|
||||
.oddRows;
|
||||
}
|
||||
tr.even td {
|
||||
.evenRows;
|
||||
}
|
||||
|
||||
/* hovered row colors
|
||||
you'll need to add additional lines for
|
||||
rows with more than 2 child rows
|
||||
*/
|
||||
tr:hover td,
|
||||
tr:hover + tr.tablesorter-childRow td,
|
||||
tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td,
|
||||
tr.even:hover td,
|
||||
tr.even:hover + tr.tablesorter-childRow td,
|
||||
tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td {
|
||||
.evenHovered;
|
||||
}
|
||||
tr.odd:hover td,
|
||||
tr.odd:hover + tr.tablesorter-childRow td,
|
||||
tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td {
|
||||
.oddHovered;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* table processing indicator - indeterminate spinner */
|
||||
.tablesorter-processing {
|
||||
background-image: @processingIcon;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user