1// $Id$ 2//Less file for the jQuery tablesorter plugin 3//base formatting that apply to all Tiki themes and included in tiki.less 4 5$filterTransitionTime : 0.1s; 6$filterRowHiddenHeight : 4px; 7// becomes height using padding (so it's divided by 2) 8 9// url(icons/loading.gif); 10$processingIcon : url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs='); 11 12// Filter widget transition 13@mixin filterWidgetTransition { 14 -webkit-transition: line-height $filterTransitionTime ease; 15 -moz-transition: line-height $filterTransitionTime ease; 16 -o-transition: line-height $filterTransitionTime ease; 17 transition: line-height $filterTransitionTime ease; 18} 19 20// Arrows 21$arrowPosition : center right; 22 23// div around table 24div.tablesorter-resizable-container { 25 clear: both; 26 width: 100%; 27} 28 29table.tablesorter { 30 width: 100%; 31 margin-bottom: 2px; 32 // style header 33 thead { 34 tr.tablesorter-headerRow { 35 th.tablesorter-header { 36 background-repeat: no-repeat; 37 background-position: $arrowPosition; 38 background-color: $body-bg; // Added by Gary as a test. 39 cursor: pointer; 40 i { 41 font-weight: 400; 42 position: absolute; 43 right: 2px; 44 top: 50%; 45 margin-top: -7px; // half the icon height; older IE doesn't like this 46 width: 14px; 47 height: 14px; 48 background-repeat: no-repeat; 49 line-height: 14px; 50 display: inline-block; 51 } 52 } 53 th div.tablesorter-header-inner span { 54 padding-right: 10px; 55 } 56 th.sorter-false { 57 cursor: default; 58 } 59 } 60 tr.tablesorter-filter-row { 61 td { 62 text-align: center; 63 line-height: normal; 64 @include filterWidgetTransition; 65 input, select { 66 width: 98%; 67 height: auto; 68 margin: 0; 69 -webkit-box-sizing: border-box; 70 -moz-box-sizing: border-box; 71 box-sizing: border-box; 72 @include filterWidgetTransition; 73 } 74 label { 75 float: left; 76 clear: both; 77 font-size: 70%; 78 } 79 input.dateFrom, 80 input.dateTo { 81 width: 60px; 82 padding: 0; 83 font-size: 70%; 84 float: right; 85 } 86 .ui-slider { 87 width: 90%; 88 margin: 13px auto 2px auto; // add enough top margin so the tooltips will fit 89 font-size: 0.9em; 90 } 91 .ui-slider .ui-slider-handle { 92 width: 0.9em; 93 height: 0.9em; 94 } 95 .ui-datepicker { 96 font-size: 0.8em; 97 } 98 span.currange { 99 font-size: smaller; 100 font-weight: normal; 101 } 102 // Add tooltips to slider handles 103 .value-popup:after { 104 content: attr(data-value); 105 position: absolute; 106 bottom: 15px; 107 left: -3px; 108 min-width: 14px; 109 height: 12px; 110 background-color: #444444; 111 background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 112 background-image: -webkit-linear-gradient(top, #444444, #999999); 113 background-image: -o-linear-gradient(top, #444444, #999999); 114 background-image: linear-gradient(to bottom, #444444, #999999); 115 border-radius: 3px; 116 -webkit-background-clip: padding-box; 117 background-clip: padding-box; 118 -webkit-box-shadow: 0 0 4px 0 #777777; 119 box-shadow: 0 0 4px 0 #777777; 120 border: #444444 1px solid; 121 color: #ffffff; 122 font: bold 0.9em/1em Arial; 123 padding: 1px; 124 text-align: center; 125 } 126 .value-popup:before { 127 content: ""; 128 position: absolute; 129 width: 0; 130 height: 0; 131 border-top: 8px solid #777777; 132 border-left: 8px solid transparent; 133 border-right: 8px solid transparent; 134 top: -8px; 135 left: 50%; 136 margin-left: -8px; 137 margin-top: -1px; 138 } 139 } 140 } 141 tr.tablesorter-filter-row.hideme td { 142 padding: $filterRowHiddenHeight / 2; 143 margin: 0; 144 line-height: 0; 145 cursor: pointer; 146 } 147 tr.tablesorter-filter-row.hideme .tablesorter-filter { 148 height: 1px; 149 min-height: 0; 150 border: 0; 151 padding: 0; 152 margin: 0; 153 // don't use visibility: hidden because it disables tabbing 154 opacity: 0; 155 filter: alpha(opacity=0); 156 } 157 } 158 // no formatting on filter row when filter-false 159 thead .disabled { 160 display: none; 161 } 162 tbody { 163 // rows hidden by filtering (needed for child rows) 164 tr.filtered { 165 display: none; 166 } 167 td[data-tsmath] { 168 font-weight: bold; 169 text-align: right; 170 } 171 } 172} 173 174table.tablesorter-processing tbody tr td { 175 opacity: .25; 176} 177 178// pager and other controls above the table 179div.ts-wrapperdiv { 180 span.tablesorter-column-selector { 181 label { 182 margin: 0 5px; 183 } 184 input[type="checkbox"] { 185 margin-right: 6px; 186 } 187 } 188 select { 189 width: auto; 190 display: inline; 191 option { 192 font-size: smaller; 193 } 194 } 195 select, input { 196 font-size: smaller; 197 border: none; 198 } 199 div.ts-pager { 200 margin-top: 3px; 201 margin-bottom: 3px; 202 font-size: smaller; 203 float: right; 204 clear: right; 205 &.ts-pager-bottom { 206 display: none; 207 } 208 .right-margin { 209 vertical-align: bottom; 210 margin-right: 4px; 211 } 212 } 213} 214 215table.tablesorter thead tr.tablesorter-filter-row td input.tablesorter-filter, 216table.tablesorter thead tr.tablesorter-filter-row td input.dateFrom, 217table.tablesorter thead tr.tablesorter-filter-row td input.dateTo { 218 color: $input-color; 219 background: $input-bg; 220 border: $input-border-color; 221} 222