diff --git a/css/filter.formatter.css b/css/filter.formatter.css new file mode 100644 index 00000000..96de54fb --- /dev/null +++ b/css/filter.formatter.css @@ -0,0 +1,166 @@ +/**** Filter Formatter Elements ****/ +.tablesorter-blue .tablesorter-filter-row td { + text-align: center; + font-size: 0.9em; + font-weight: normal; +} + +/**** Sliders ****/ +/* shrink the ui sliders to look nicer inside of a table cell */ +.ui-slider { + width: 90%; + margin: 12px auto 2px auto; /* add enough top margin so the tooltips will fit */ + font-size: 0.5em; +} +.ui-slider .ui-slider-handle{ + width: 0.8em; + height: 0.8em; +} +.ui-datepicker { + font-size: 0.8em; +} + +/* Add tooltips to slider handles */ +.value-popup:after { + content : attr(data-value); + position: absolute; + bottom: 15px; + left: -3px; + min-width: 14px; + height: 12px; + background-color: #444; + background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); + background-image: -webkit-linear-gradient(top, #444, #999); + background-image: -moz-linear-gradient(top, #444, #999); + background-image: -o-linear-gradient(top, #444, #999); + background-image: linear-gradient(to bottom, #444, #999); + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-background-clip: padding-box; background-clip: padding-box; + -webkit-box-shadow: 0px 0px 4px 0px #777; + box-shadow: 0px 0px 4px 0px #777; + border: #444 1px solid; + color: #fff; + font: bold 0.8em/1em Arial; + padding: 1px; + text-align: center; +} +.value-popup:before { + content: ""; + position: absolute; + width: 0; + height: 0; + border-top: 8px solid #777; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + top: -8px; + left: 50%; + margin-left: -8px; + margin-top: -1px; +} + +/**** Date Picker ****/ +.dateFrom, .dateTo { + width: 80px; + margin: 2px 5px; +} + +/**** Color Picker Toggle button ****/ +.button { + width: 14px; + height: 14px; + background: #fcfff4; + background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); + background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); + background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); + background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); + background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); + margin: 5px; + -webkit-border-radius: 25px; + -moz-border-radius: 25px; + border-radius: 25px; + -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); + -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); + box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); + position: relative; + display: inline-block; +} + +.button label { + cursor: pointer; + position: absolute; + width: 10px; + height: 10px; + -webkit-border-radius: 25px; + -moz-border-radius: 25px; + border-radius: 25px; + left: 2px; + top: 2px; + -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); + -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); + box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); + background: -webkit-linear-gradient(top, #222 0%, #45484d 100%); + background: -moz-linear-gradient(top, #222 0%, #45484d 100%); + background: -o-linear-gradient(top, #222 0%, #45484d 100%); + background: -ms-linear-gradient(top, #222 0%, #45484d 100%); + background: linear-gradient(top, #222 0%, #45484d 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 ); +} + +.button label:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + content: ''; + position: absolute; + width: 8px; + height: 8px; + background: #00bf00; + background: -webkit-linear-gradient(top, #aaf 0%, #55f 100%); + background: -moz-linear-gradient(top, #aaf 0%, #55f 100%); + background: -o-linear-gradient(top, #aaf 0%, #55f 100%); + background: -ms-linear-gradient(top, #aaf 0%, #55f 100%); + background: linear-gradient(top, #aaf 0%, #55f 100%); + -webkit-border-radius: 25px; + -moz-border-radius: 25px; + border-radius: 25px; + top: 1px; + left: 1px; + -webkit-box-shadow: inset 0px 1px 1px #fff, 0px 1px 3px rgba(0,0,0,0.5); + -moz-box-shadow: inset 0px 1px 1px #fff, 0px 1px 3px rgba(0,0,0,0.5); + box-shadow: inset 0px 1px 1px #fff, 0px 1px 3px rgba(0,0,0,0.5); +} + +.button label:hover::after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; + filter: alpha(opacity=30); + opacity: 0.3; +} + +.button input[type=checkbox] { + visibility: hidden; +} + +.button input[type=checkbox]:checked + label:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; +} + +.colorpicker { + width: 30px; + height: 18px; +} +.ui-spinner-input { + width: 100px; + height: 18px; +} +.currentColor, .ui-spinner { + position: relative; + top: -8px; +} +input.number { + position: relative; + top: -5px; +} diff --git a/docs/css/jq.css b/docs/css/jq.css index acc4f384..2c95ad7b 100644 --- a/docs/css/jq.css +++ b/docs/css/jq.css @@ -4,7 +4,7 @@ h1{font-size:large;font-weight:400;margin:0;} h2{color:#333;font-size:small;font-weight:400;margin:0;} .demo{width:600px;margin:20px auto;} .demo h1,.demo h1 a{font-size:120%;text-align:center;text-decoration:none;color:#000;} -.demo p{text-align:center;} +.demo p,.center{text-align:center;} .demo table.tablesorter{font-size:14px;} table.info{border:#000 1px solid;border-collapse:collapse;margin:10px 0 0 10px;} table.tablesorter table.info tbody th,table.tablesorter table.info td{border:#000 1px solid;} @@ -44,7 +44,7 @@ form{font-size:10pt;margin-bottom:20px;width:auto;} form fieldset{padding:10px;text-align:left;width:140px;} div#main h1{border-bottom:1px solid #CDCDCD;display:block;margin-top:20px;padding:10px 0 2px;} table#tablesorter-demo {margin: 10px 0 0 0;} -table.options *,table#methods *,table#events *, p.small{font-size:small;} +table *, p.small{font-size:small;} p.small {padding-left: 25px;} p.tip em {padding: 2px; background-color: #6cf; color: #fff;} span.tip em {padding: 0 2px;background-color: #00ce53; color: #fff; font-size:90%; } @@ -64,4 +64,8 @@ span.deprecated { background: #a00; color: #fff; padding: 1px 3px; } .download:hover { background: #0d86ae; } .bootstrap_buttons button { margin: 5px 0 0 0; } #main .ui-accordion-header a { font-size: 14px; margin-left: 24px; } -#main .ui-accordion-content { font-size: 14px; } \ No newline at end of file +#main .ui-accordion-content { font-size: 14px; } + +@media all and (max-width: 650px) { + table.compatibility { float: none; } +} \ No newline at end of file diff --git a/docs/example-widget-filter-custom.html b/docs/example-widget-filter-custom.html index d3a8bcb9..3ca4554c 100644 --- a/docs/example-widget-filter-custom.html +++ b/docs/example-widget-filter-custom.html @@ -1,8 +1,8 @@ - + - - jQuery plugin: Tablesorter 2.0 - Custom Filter Widget + + jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Functions @@ -146,7 +146,7 @@ @@ -161,21 +161,22 @@

Default Select ("First Name" column)

@@ -184,7 +185,7 @@

Custom Filter Function ("Last Name" column)