library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Themes: Fix SCSS theme & add demo. See #1332

Browse Source
This commit is contained in:
Rob Garrison 2016-12-15 07:08:46 -06:00
parent c0628be0a5
commit 750a038bfc
4 changed files with 46 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/bootstrap.less vendored
View File

@ -4,10 +4,11 @@ To create your own theme, modify the code below and run it through
a LESS compiler, like this one: http://leafo.net/lessphp/editor.html a LESS compiler, like this one: http://leafo.net/lessphp/editor.html
or download less.js from http://lesscss.org/ or download less.js from http://lesscss.org/
Test out these custom less files live Test out these customization files live
Basic Theme : http://codepen.io/Mottie/pen/eqBbn Basic LESS Theme : http://codepen.io/Mottie/pen/eqBbn
Bootstrap : http://codepen.io/Mottie/pen/Ltzpi Bootstrap LESS : http://codepen.io/Mottie/pen/Ltzpi
Metro Style : http://codepen.io/Mottie/pen/gCslk Metro LESS Style : http://codepen.io/Mottie/pen/gCslk
Basic SCSS : http://codepen.io/Mottie/pen/LbXdNR
*/ */

9
css/metro.less
View File

@ -4,10 +4,11 @@ To create your own theme, modify the code below and run it through
a LESS compiler, like this one: http://leafo.net/lessphp/editor.html a LESS compiler, like this one: http://leafo.net/lessphp/editor.html
or download less.js from http://lesscss.org/ or download less.js from http://lesscss.org/
Test out these custom less files live Test out these customization files live
Basic Theme : http://codepen.io/Mottie/pen/eqBbn Basic LESS Theme : http://codepen.io/Mottie/pen/eqBbn
Bootstrap : http://codepen.io/Mottie/pen/Ltzpi Bootstrap LESS : http://codepen.io/Mottie/pen/Ltzpi
Metro Style : http://codepen.io/Mottie/pen/gCslk Metro LESS Style : http://codepen.io/Mottie/pen/gCslk
Basic SCSS : http://codepen.io/Mottie/pen/LbXdNR
*/ */

1
css/theme.less
View File

@ -8,6 +8,7 @@ Test out these custom less files live
Basic Theme : http://codepen.io/Mottie/pen/eqBbn Basic Theme : http://codepen.io/Mottie/pen/eqBbn
Bootstrap : http://codepen.io/Mottie/pen/Ltzpi Bootstrap : http://codepen.io/Mottie/pen/Ltzpi
Metro Style : http://codepen.io/Mottie/pen/gCslk Metro Style : http://codepen.io/Mottie/pen/gCslk
Basic SCSS : http://codepen.io/Mottie/pen/LbXdNR
*/ */

72
css/theme.scss
View File

@ -1,13 +1,15 @@
/* Tablesorter Custom LESS Theme by Rob Garrison /* Tablesorter Custom SCSS Theme by Dan Feidt (https://github.com/HongPong)
Converted from Custom LESS Theme by Rob Garrison
To create your own theme, modify the code below and run it through To create your own theme, modify the code below and run it through
a LESS compiler, like this one: http://leafo.net/lessphp/editor.html a SCSS compiler, like this one: http://beautifytools.com/scss-compiler.php
or download less.js from http://lesscss.org/ or download sass.js from https://github.com/medialize/sass.js
Test out these custom less files live Test out these customization files live
Basic Theme : http://codepen.io/Mottie/pen/eqBbn Basic LESS Theme : http://codepen.io/Mottie/pen/eqBbn
Bootstrap : http://codepen.io/Mottie/pen/Ltzpi Bootstrap LESS : http://codepen.io/Mottie/pen/Ltzpi
Metro Style : http://codepen.io/Mottie/pen/gCslk Metro LESS Style : http://codepen.io/Mottie/pen/gCslk
Basic SCSS : http://codepen.io/Mottie/pen/LbXdNR
*/ */
@ -22,7 +24,7 @@ $tableBodyFont : 11px 'trebuchet ms', verdana, arial;
/* for best results, only change the hue (120), /* for best results, only change the hue (120),
leave the saturation (60%) and luminosity (75%) alone leave the saturation (60%) and luminosity (75%) alone
pick the color from here: http://hslpicker.com/#99E699 */ pick the color from here: http://hslpicker.com/#99E699 */
$headerBackground : hsl(120, 60%, 75%); $headerBackground : hsl(0, 60%, 75%);
$borderAndBackground : #cdcdcd; $borderAndBackground : #cdcdcd;
$overallBorder : $borderAndBackground 1px solid; $overallBorder : $borderAndBackground 1px solid;
$headerTextColor : #000; $headerTextColor : #000;
@ -51,24 +53,24 @@ $headerPadding : 4px 20px 4px 4px;
$processingIcon : url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs='); $processingIcon : url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
/* zebra striping */ /* zebra striping */
.allRows { @mixin allRows {
background-color: $bodyBackground; background-color: $bodyBackground;
color: $bodyTextColor; color: $bodyTextColor;
} }
.evenRows { @mixin evenRows {
background-color: lighten($headerBackground, 40%); background-color: lighten($headerBackground, 40%);
color: $bodyTextColor; color: $bodyTextColor;
} }
.oddRows { @mixin oddRows {
background-color: lighten($headerBackground, 20%); background-color: lighten($headerBackground, 20%);
} }
/* hovered rows */ /* hovered rows */
.oddHovered { @mixin oddHovered {
background-color: desaturate($headerBackground, 60%); background-color: desaturate($headerBackground, 60%);
color: $bodyTextColor; color: $bodyTextColor;
} }
.evenHovered { @mixin evenHovered {
background-color: lighten( desaturate($headerBackground, 60%), 10% ); background-color: lighten( desaturate($headerBackground, 60%), 10% );
color: $bodyTextColor; color: $bodyTextColor;
} }
@ -82,7 +84,7 @@ $tertiaryOdd : $secondaryEven;
$tertiaryEven : lighten( $secondaryEven, 5% ); $tertiaryEven : lighten( $secondaryEven, 5% );
/* Filter widget transition */ /* Filter widget transition */
.filterWidgetTransition { @mixin filterWidgetTransition {
-webkit-transition: line-height $filterTransitionTime ease; -webkit-transition: line-height $filterTransitionTime ease;
-moz-transition: line-height $filterTransitionTime ease; -moz-transition: line-height $filterTransitionTime ease;
-o-transition: line-height $filterTransitionTime ease; -o-transition: line-height $filterTransitionTime ease;
@ -103,29 +105,25 @@ $sortAscWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEAL
$sortDescWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); $sortDescWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
/* automatically choose the correct arrow/text color */ /* automatically choose the correct arrow/text color */
.headerText ($a) when (lightness($a) >= 50%) { @function set-lightness($a, $b) {
color: $headerTextColor; @if (lightness($headerBackground) >= 50) {
@return $a;
} @else {
@return $b;
}
} }
.headerText ($a) when (lightness($a) < 50%) { @mixin headerText {
color: lighten($headerTextColor, 90%); color: set-lightness($headerTextColor, lighten($headerTextColor, 90%));
} }
.unsorted ($a) when (lightness($a) >= 50%) {
background-image: $unsortedBlack; @mixin unsorted {
background-image: set-lightness($unsortedBlack, $unsortedWhite);
} }
.unsorted ($a) when (lightness($a) < 50%) { @mixin sortAsc {
background-image: $unsortedWhite; background-image: set-lightness($sortAscBlack, $sortAscWhite);
} }
.sortAsc ($a) when (lightness($a) >= 50%) { @mixin sortDesc {
background-image: $sortAscBlack; background-image: set-lightness($sortDescBlack, $sortDescWhite);
}
.sortAsc ($a) when (lightness($a) < 50%) {
background-image: $sortAscWhite;
}
.sortDesc ($a) when (lightness($a) >= 50%) {
background-image: $sortDescBlack;
}
.sortDesc ($a) when (lightness($a) < 50%) {
background-image: $sortDescWhite;
} }
/* variable theme name - requires less.js 1.3+; /* variable theme name - requires less.js 1.3+;
@ -151,7 +149,7 @@ $sortDescWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEAL
font: $tableHeaderFont; font: $tableHeaderFont;
font-weight: bold; font-weight: bold;
background-color: $headerBackground; background-color: $headerBackground;
@include headerText($headerBackground); @include headerText;
border-collapse: collapse; border-collapse: collapse;
padding: $overallPadding; padding: $overallPadding;
} }
@ -163,7 +161,7 @@ $sortDescWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEAL
/* style header */ /* style header */
.tablesorter-header { .tablesorter-header {
@include unsorted($headerBackground); @include unsorted;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: $arrowPosition; background-position: $arrowPosition;
padding: $headerPadding; padding: $headerPadding;
@ -178,12 +176,12 @@ $sortDescWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEAL
.tablesorter-headerAsc { .tablesorter-headerAsc {
background-color: $headerAsc; background-color: $headerAsc;
@include sortAsc($headerBackground); @include sortAsc;
} }
.tablesorter-headerDesc { .tablesorter-headerDesc {
background-color: $headerDesc; background-color: $headerDesc;
@include sortDesc($headerBackground); @include sortDesc;
} }
/* tfoot */ /* tfoot */