From 40a1faed5faf763c124000f7c146c373e5175756 Mon Sep 17 00:00:00 2001 From: Rob Garrison Date: Mon, 25 Jul 2016 16:37:40 -0500 Subject: [PATCH] Theme: Add Materialize theme style. Fixes #1242 --- css/theme.materialize.css | 176 +++++++++++++ docs/example-option-theme-materialize.html | 282 +++++++++++++++++++++ docs/index.html | 3 +- 3 files changed, 460 insertions(+), 1 deletion(-) create mode 100644 css/theme.materialize.css create mode 100644 docs/example-option-theme-materialize.html diff --git a/css/theme.materialize.css b/css/theme.materialize.css new file mode 100644 index 00000000..a9fb1139 --- /dev/null +++ b/css/theme.materialize.css @@ -0,0 +1,176 @@ +/************* + Materialize theme (http://materializecss.com/) + *************/ +/* jQuery materialize Theme */ +.tablesorter-materialize { + width: 100%; +} +.tablesorter-materialize thead th, +.tablesorter-materialize thead td, +.tablesorter-materialize tfoot th, +.tablesorter-materialize tfoot td { + font: 14px/20px Arial, Sans-serif; + font-weight: bold; + padding: 4px; + margin: 0 0 18px; + background-color: #eee; +} + +.tablesorter-materialize .tablesorter-header { + cursor: pointer; +} +.tablesorter-materialize .sorter-false { + cursor: default; +} + +.tablesorter-materialize .tablesorter-header-inner { + position: relative; + padding: 4px 18px 4px 4px; +} + +/* sort icons */ +.tablesorter-materialize thead .tablesorter-header { + background-repeat: no-repeat; + background-position: center right; + padding: 4px 18px 4px 4px; + white-space: normal; + cursor: pointer; +} + +/* black unsorted icon */ +.tablesorter-materialize thead .tablesorter-headerUnSorted { + /* */ + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgOCAxIDggOCAwek0xNSA5IDEgOSA4IDE2eiIgZmlsbD0iIzIyMiIvPjwvc3ZnPg==); +} +/* black asc icon */ +.tablesorter-materialize thead .tablesorter-headerAsc { + /* */ + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgMTEgMSAxMSA4IDN6IiBmaWxsPSIjMjIyIi8+PC9zdmc+); +} +/* black desc icon */ +.tablesorter-materialize thead .tablesorter-headerDesc { + /* */ + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgNiAxIDYgOCAxM3oiIGZpbGw9IiMyMjIiLz48L3N2Zz4=); +} + +/* white unsorted icon */ +.tablesorter-materialize-dark thead .tablesorter-headerUnSorted { + /* */ + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgOCAxIDggOCAwek0xNSA5IDEgOSA4IDE2eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==); +} +/* white asc icon */ +.tablesorter-materialize-dark thead .tablesorter-headerAsc { + /* */ + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgMTEgMSAxMSA4IDN6IiBmaWxsPSIjZmZmIi8+PC9zdmc+); +} +/* white desc icon */ +.tablesorter-materialize-dark thead .tablesorter-headerDesc { + /* */ + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgNiAxIDYgOCAxM3oiIGZpbGw9IiNmZmYiLz48L3N2Zz4=); +} + +/* since materialize (table-striped) uses nth-child(), we just use this to add a zebra stripe color */ +.tablesorter-materialize > tbody > tr.odd > td, +.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.odd:hover ~ tr.tablesorter-hasChildRow.odd ~ .tablesorter-childRow.odd > td { + background-color: #f9f9f9; +} +.tablesorter-materialize > tbody > tr.hover > td, +.tablesorter-materialize > tbody > tr.odd:hover > td, +.tablesorter-materialize > tbody > tr.even:hover > td, +.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.odd:hover ~ .tablesorter-childRow.odd > td, +.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.even:hover ~ .tablesorter-childRow.even > td { + background-color: #f5f5f5; +} +.tablesorter-materialize > tbody > tr.even > td, +.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.even:hover ~ tr.tablesorter-hasChildRow.even ~ .tablesorter-childRow.even > td { + background-color: #fff; +} + +/* processing icon */ +.tablesorter-materialize .tablesorter-processing { + background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs='); + background-position: center center !important; + background-repeat: no-repeat !important; +} + +/* caption */ +.caption { + background-color: #fff; +} + +/* filter widget */ +.tablesorter-materialize .tablesorter-filter-row input.tablesorter-filter, +.tablesorter-materialize .tablesorter-filter-row select.tablesorter-filter { + width: 98%; + margin: 0; + padding: 4px 6px; + color: #333; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: height 0.1s ease; + -moz-transition: height 0.1s ease; + -o-transition: height 0.1s ease; + transition: height 0.1s ease; +} +.tablesorter-materialize .tablesorter-filter-row .tablesorter-filter.disabled { + background-color: #eee; + color: #555; + cursor: not-allowed; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; + box-sizing: border-box; + transition: height 0.1s ease; +} +.tablesorter-materialize .tablesorter-filter-row { + background-color: #efefef; +} +.tablesorter-materialize .tablesorter-filter-row td { + background-color: #efefef; + line-height: normal; + text-align: center; + padding: 4px 6px; + vertical-align: middle; + -webkit-transition: line-height 0.1s ease; + -moz-transition: line-height 0.1s ease; + -o-transition: line-height 0.1s ease; + transition: line-height 0.1s ease; +} +/* hidden filter row */ +.tablesorter-materialize .tablesorter-filter-row.hideme td { + padding: 2px; /* change this to modify the thickness of the closed border row */ + margin: 0; + line-height: 0; +} +.tablesorter-materialize .tablesorter-filter-row.hideme * { + 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); +} +/* rows hidden by filtering (needed for child rows) */ +.tablesorter .filtered { + display: none; +} + +/* pager plugin */ +.tablesorter-materialize .tablesorter-pager select { + padding: 4px 6px; + display: inline-block; + width: auto; +} +.tablesorter-materialize .tablesorter-pager .pagedisplay { + border: 0; +} + +/* ajax error row */ +.tablesorter .tablesorter-errorRow td { + text-align: center; + cursor: pointer; + background-color: #e6bf99; +} diff --git a/docs/example-option-theme-materialize.html b/docs/example-option-theme-materialize.html new file mode 100644 index 00000000..8a04e610 --- /dev/null +++ b/docs/example-option-theme-materialize.html @@ -0,0 +1,282 @@ + + + + + jQuery tablesorter 2.0 - Theme Materialize + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

+ NOTE! +

+ + +

Demo

+ +
+ Reset filter : +

+ Zebra widget : +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameMajorSexEnglishJapaneseCalculusGeometry
NameMajorSexEnglishJapaneseCalculusGeometry
+ + + + + + + + +
Student01Languagesmale80707580
Student02Mathematicsmale908810090
Student03Languagesfemale85958085
Student04Languagesmale6055100100
Student05Languagesfemale68809580
Student06Mathematicsmale1009910090
Student07Mathematicsmale85689090
Student08Languagesmale100909085
Student09Mathematicsmale80506575
Student10Languagesmale8510010090
Student11Languagesmale8685100100
Student12Mathematicsfemale100757085
Student13Languagesfemale1008010090
Student14Languagesfemale50455590
Student15Languagesmale953510090
Student16Languagesfemale100503070
Student17Languagesfemale801005565
Student18Mathematicsmale30495575
Student19Languagesmale68908870
Student20Mathematicsmale40454080
Student21Languagesmale5045100100
Student22Mathematicsmale1009910090
Student23Mathematicsmale8277079
Student24Languagesfemale100911382
Student25Mathematicsmale22968253
Student26Languagesfemale37295659
Student27Mathematicsmale86826923
Student28Languagesfemale4425431
Student29Mathematicsmale77472238
Student30Languagesfemale19352310
Student31Mathematicsmale90271750
Student32Languagesfemale60753338
Student33Mathematicsmale4313715
Student34Languagesfemale77978144
Student35Mathematicsmale5815195
Student36Languagesfemale70617094
Student37Mathematicsmale6036184
Student38Languagesfemale6339011
Student39Mathematicsmale50463238
Student40Languagesfemale5175253
Student41Mathematicsmale43342878
Student42Languagesfemale11896095
Student43Mathematicsmale48921888
Student44Languagesfemale8225973
Student45Mathematicsmale91733739
Student46Languagesfemale481210
Student47Mathematicsmale8910611
Student48Languagesfemale90322118
Student49Mathematicsmale42494972
Student50Languagesfemale56376754
+ +
Page Header
+
+ 
<!-- materialize stylesheet & icon font -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+<!-- materialize theme -->
+<link rel="stylesheet" href="css/theme.materialize.css">
+
+<!-- tablesorter plugin -->
+<script src="js/jquery.tablesorter.js"></script>
+<!-- tablesorter widget file - loaded after the plugin -->
+<script src="js/jquery.tablesorter.widgets.js"></script>
+
+<!-- pager plugin -->
+<link rel="stylesheet" href="css/jquery.tablesorter.pager.css">
+<script src="js/jquery.tablesorter.pager.js"></script>
+
+ +
Javascript
+
+ 

+	

+
+	
CSS

+	

+		

+	

+
+	
HTML

+	

+		

+	

+
+

+
+
+
diff --git a/docs/index.html b/docs/index.html
index 54cdadc8..24bd90c4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -354,6 +354,7 @@
 	
 	

@@ -509,7 +510,7 @@
 
 		
  • Beta Toggle Sort & Filter Widget (v2.24.4).
    • 
 
-		
  • † UITheme widget (v2.0.9):
+		
  • † UITheme widget (v2.0.9; v2.27.0):