From a339f0051b21f9e51d47c3eb1fd7d37f126e87a0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 12:22:51 -0800 Subject: [PATCH] fixing tablesorter styles by adding the jquery plugin back to the lib, fixing the docs examples --- bootstrap.css | 59 ++++++++++++++++++++++------ bootstrap.min.css | 13 ++++-- docs/assets/js/jquery.tablesorter.js | 3 ++ docs/base-css.html | 4 +- lib/tables.less | 54 +++++++++++++++++++++++++ lib/tabs-pills.less | 6 ++- 6 files changed, 122 insertions(+), 17 deletions(-) create mode 100644 docs/assets/js/jquery.tablesorter.js diff --git a/bootstrap.css b/bootstrap.css index 71637d42f0..4c56efca57 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sat Jan 7 04:34:04 PST 2012 + * Date: Sat Jan 7 12:21:05 PST 2012 */ html, body { margin: 0; @@ -1102,6 +1102,44 @@ table .span12 { width: 924px; margin-left: 0; } +table .header { + cursor: pointer; +} +table .header:after { + content: ""; + float: right; + margin-top: 7px; + border-width: 0 4px 4px; + border-style: solid; + border-color: #000 transparent; + visibility: hidden; +} +table .headerSortUp, table .headerSortDown { + background-color: rgba(141, 192, 219, 0.25); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); +} +table .header:hover:after { + visibility: visible; +} +table .headerSortDown:after, table .headerSortDown:hover:after { + visibility: visible; + filter: alpha(opacity=60); + -moz-opacity: 0.6; + opacity: 0.6; +} +table .headerSortUp:after { + border-bottom: none; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #000; + visibility: visible; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + filter: alpha(opacity=60); + -moz-opacity: 0.6; + opacity: 0.6; +} i { background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); background-position: 0 0; @@ -1891,23 +1929,22 @@ i { border-color: #ddd; border-left-color: transparent; } -.tabs .menu-dropdown, .tabs .dropdown-menu { - top: 35px; +.tabs .dropdown-menu { + top: 37px; border-width: 1px; - -webkit-border-radius: 0 6px 6px 6px; - -moz-border-radius: 0 6px 6px 6px; - border-radius: 0 6px 6px 6px; } -.tabs a.menu:after, .tabs .dropdown-toggle:after { - border-top-color: #999; +.tabs .dropdown-toggle .caret { margin-top: 15px; margin-left: 5px; } -.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle { +.tabs .open .dropdown-toggle { border-color: #999; } -.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { - border-top-color: #555; +.tabs .open .dropdown-toggle .caret { + border-top-color: #fff; + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; } .pills > li > a { padding: 0 15px; diff --git a/bootstrap.min.css b/bootstrap.min.css index b0df320366..bb491b7ac4 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -203,6 +203,11 @@ table .span9{float:none;width:684px;margin-left:0;} table .span10{float:none;width:764px;margin-left:0;} table .span11{float:none;width:844px;margin-left:0;} table .span12{float:none;width:924px;margin-left:0;} +table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;} +table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);} +table .header:hover:after{visibility:visible;} +table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} +table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);background-position:0 0;background-repeat:no-repeat;display:inline-block;vertical-align:text-top;width:14px;height:14px;} .glass{background-position:0 0;} .music{background-position:-24px 0;} @@ -349,10 +354,10 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabbable.tabs-right .tab-content{margin-right:100px;} .tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;} .tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-color:transparent;} -.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;} -.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;} -.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;} -.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;} +.tabs .dropdown-menu{top:37px;border-width:1px;} +.tabs .dropdown-toggle .caret{margin-top:15px;margin-left:5px;} +.tabs .open .dropdown-toggle{border-color:#999;} +.tabs .open .dropdown-toggle .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .pills>li>a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills>li>a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#005580;} .pills .active>a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0088cc;} .pills-vertical>li{float:none;} diff --git a/docs/assets/js/jquery.tablesorter.js b/docs/assets/js/jquery.tablesorter.js new file mode 100644 index 0000000000..8ca383e39d --- /dev/null +++ b/docs/assets/js/jquery.tablesorter.js @@ -0,0 +1,3 @@ +(function($){$.extend({tablesorter:new +function(){var parsers=[],widgets=[];this.defaults={cssHeader:"header",cssAsc:"headerSortUp",cssDesc:"headerSortDown",cssChildRow:"expand-child",sortInitialOrder:"asc",sortMultiSortKey:"shiftKey",sortForce:null,sortAppend:null,sortLocaleCompare:true,textExtraction:"simple",parsers:{},widgets:[],widgetZebra:{css:["even","odd"]},headers:{},widthFixed:false,cancelSelection:true,sortList:[],headerList:[],dateFormat:"us",decimal:'/\.|\,/g',onRenderHeader:null,selectorHeaders:'thead th',debug:false};function benchmark(s,d){log(s+","+(new Date().getTime()-d.getTime())+"ms");}this.benchmark=benchmark;function log(s){if(typeof console!="undefined"&&typeof console.debug!="undefined"){console.log(s);}else{alert(s);}}function buildParserCache(table,$headers){if(table.config.debug){var parsersDebug="";}if(table.tBodies.length==0)return;var rows=table.tBodies[0].rows;if(rows[0]){var list=[],cells=rows[0].cells,l=cells.length;for(var i=0;i1){arr=arr.concat(checkCellColSpan(table,headerArr,row++));}else{if(table.tHead.length==1||(cell.rowSpan>1||!r[row+1])){arr.push(cell);}}}return arr;};function checkHeaderMetadata(cell){if(($.metadata)&&($(cell).metadata().sorter===false)){return true;};return false;}function checkHeaderOptions(table,i){if((table.config.headers[i])&&(table.config.headers[i].sorter===false)){return true;};return false;}function checkHeaderOptionsSortingLocked(table,i){if((table.config.headers[i])&&(table.config.headers[i].lockedOrder))return table.config.headers[i].lockedOrder;return false;}function applyWidget(table){var c=table.config.widgets;var l=c.length;for(var i=0;i');$("tr:first td",table.tBodies[0]).each(function(){colgroup.append($('').css('width',$(this).width()));});$(table).prepend(colgroup);};}function updateHeaderSortCount(table,sortList){var c=table.config,l=sortList.length;for(var i=0;i b["+i+"]) ? 1 : 0));";};function makeSortTextDesc(i){return"((b["+i+"] < a["+i+"]) ? -1 : ((b["+i+"] > a["+i+"]) ? 1 : 0));";};function makeSortNumeric(i){return"a["+i+"]-b["+i+"];";};function makeSortNumericDesc(i){return"b["+i+"]-a["+i+"];";};function sortText(a,b){if(table.config.sortLocaleCompare)return a.localeCompare(b);return((ab)?1:0));};function sortTextDesc(a,b){if(table.config.sortLocaleCompare)return b.localeCompare(a);return((ba)?1:0));};function sortNumeric(a,b){return a-b;};function sortNumericDesc(a,b){return b-a;};function getCachedSortType(parsers,i){return parsers[i].type;};this.construct=function(settings){return this.each(function(){if(!this.tHead||!this.tBodies)return;var $this,$document,$headers,cache,config,shiftDown=0,sortOrder;this.config={};config=$.extend(this.config,$.tablesorter.defaults,settings);$this=$(this);$.data(this,"tablesorter",config);$headers=buildHeaders(this);this.config.parsers=buildParserCache(this,$headers);cache=buildCache(this);var sortCSS=[config.cssDesc,config.cssAsc];fixColumnWidth(this);$headers.click(function(e){var totalRows=($this[0].tBodies[0]&&$this[0].tBodies[0].rows.length)||0;if(!this.sortDisabled&&totalRows>0){$this.trigger("sortStart");var $cell=$(this);var i=this.column;this.order=this.count++%2;if(this.lockedOrder)this.order=this.lockedOrder;if(!e[config.sortMultiSortKey]){config.sortList=[];if(config.sortForce!=null){var a=config.sortForce;for(var j=0;j0){$this.trigger("sorton",[config.sortList]);}applyWidget(this);});};this.addParser=function(parser){var l=parsers.length,a=true;for(var i=0;i

How to use

With v2.0.0, the <i> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:

-
+
 <i class="chevron-left"></i>
 

       
There are over 100 classes to choose from for your icons. Just add an <i> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.

@@ -1554,11 +1554,13 @@
     
     
     
+    
     
     
     
     
diff --git a/lib/tables.less b/lib/tables.less
index d1a690a3fd..92ac57c39c 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -116,3 +116,57 @@ table {
   .span11    { .tableColumns(11); }
   .span12    { .tableColumns(12); }
 }
+
+
+
+// TABLESORTER
+// -----------
+// Support for the tablesorter jQuerdy plugin
+
+table {
+  // Tablesorting styles w/ jQuery plugin
+  .header {
+    cursor: pointer;
+    &:after {
+      content: "";
+      float: right;
+      margin-top: 7px;
+      border-width: 0 4px 4px;
+      border-style: solid;
+      border-color: #000 transparent;
+      visibility: hidden;
+    }
+  }
+  // Style the sorted column headers (THs)
+  .headerSortUp,
+  .headerSortDown {
+    background-color: rgba(141,192,219,.25);
+    text-shadow: 0 1px 1px rgba(255,255,255,.75);
+  }
+  // Style the ascending (reverse alphabetical) column header
+  .header:hover {
+    &:after {
+      visibility:visible;
+    }
+  }
+  // Style the descending (alphabetical) column header
+  .headerSortDown,
+  .headerSortDown:hover {
+    &:after {
+      visibility:visible;
+      .opacity(60);
+    }
+  }
+  // Style the ascending (reverse alphabetical) column header
+  .headerSortUp {
+    &:after {
+      border-bottom: none;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 4px solid #000;
+      visibility:visible;
+      .box-shadow(none); //can't add boxshadow to downward facing arrow :(
+      .opacity(60);
+    }
+  }
+}
diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less
index 8e8856a567..4a94266a34 100644
--- a/lib/tabs-pills.less
+++ b/lib/tabs-pills.less
@@ -155,7 +155,7 @@
 // Dropdowns in tabs
 .tabs {
   .dropdown-menu {
-    top: 36px;
+    top: 37px;
     border-width: 1px;
   }
   .dropdown-toggle .caret {
@@ -165,6 +165,10 @@
   .open .dropdown-toggle {
     border-color: #999;
   }
+  .open .dropdown-toggle .caret {
+    border-top-color: #fff;
+    .opacity(100);
+  }
 }
 
 // Pills