Merge branch 'master' of http://git.local.twitter.com/bootstrap

mansilladev · Jul 2, 2011 · 768fa3c · 768fa3c
2 parents 3117fc9 + 799fd6a
commit 768fa3c
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 55 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Makefile b/Makefile
@@ -1,10 +1,29 @@
-# NOTE: you must have the less npm package installed globally to build!
+DATE=$(shell DATE)
-# To install run: npm install less -g
+BOOTSTRAP = ./bootstrap-1.0.0.css
-# ProTip: watchr -e "watch('lib/.*\.less') { system 'make' }"
+BOOTSTRAP_MIN = ./bootstrap-1.0.0.min.css
+BOOTSTRAP_LESS = ./lib/bootstrap.less
+LESS_COMPESSOR ?= `which lessc`
+WATCHR ?= `which watchr`
 
 build:
-	@lessc ./lib/bootstrap.less > ./bootstrap-1.0.0.css
+	@@if test ! -z ${LESS_COMPESSOR}; then \
-	@lessc ./lib/bootstrap.less > ./bootstrap-1.0.0.min.css --compress
+		sed 's/@DATE/'"${DATE}"'/' ${BOOTSTRAP_LESS} >${BOOTSTRAP_LESS}.tmp; \
-	@echo "Bootstrap successfully built! - `date`"
+		lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP}; \
+		lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP_MIN} --compress; \
+		rm -f ${BOOTSTRAP_LESS}.tmp; \
+		echo "Bootstrap successfully built! - `date`"; \
+	else \
+		echo "You must have the LESS compiler installed in order to build Bootstrap."; \
+		echo "You can install it by running: npm install less -g"; \
+	fi
 
-.PHONY: build
+watch:
+	@@if test ! -z ${LESS_COMPESSOR}; then \
+	  echo "Watching less files..."; \
+	  watchr -e "watch('lib/.*\.less') { system 'make' }"; \
+	else \
+		echo "You must have the WATCHR installed in order to build Bootstrap."; \
+		echo "You can install it by running: gem install watchr"; \
+	fi
+
+.PHONY: build watch
diff --git a/assets/img/dropdown-arrow.gif b/assets/img/dropdown-arrow.gif
diff --git a/assets/img/grid-20px.png b/assets/img/grid-20px.png
diff --git a/assets/img/tablesorter-indicators.png b/assets/img/tablesorter-indicators.png
diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.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: {{ date }}
+ * Date: Sat Jul  2 11:50:18 PDT 2011
  */
 /*
  * Reset.less
@@ -1013,31 +1013,61 @@ table.zebra-striped tbody tr:hover td {
 }
 table.zebra-striped th.header {
   cursor: pointer;
-  padding-right: 20px;
+}
+table.zebra-striped th.header:after {
+  width: 0px;
+  height: 0px;
+  display: inline-block;
+  float: right;
+  margin-top: 7px;
+  content: "&darr;";
+  text-indent: -99999px;
+  vertical-align: top;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid #000;
+  visibility: hidden;
+  -webkit-box-shadow: 0 1px 0 #ffffff;
+  -moz-box-shadow: 0 1px 0 #ffffff;
+  box-shadow: 0 1px 0 #ffffff;
+  filter: alpha(opacity=30);
+  -khtml-opacity: 0.3;
+  -moz-opacity: 0.3;
+  opacity: 0.3;
 }
 table.zebra-striped th.headerSortUp, table.zebra-striped th.headerSortDown {
-  background-image: url(assets/img/tablesorter-indicators.png);
-  background-position: right -23px;
-  background-repeat: no-repeat;
   background-color: rgba(141, 192, 219, 0.25);
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   -webkit-border-radius: 3px 3px 0 0;
   -moz-border-radius: 3px 3px 0 0;
   border-radius: 3px 3px 0 0;
 }
-table.zebra-striped th.header:hover {
+table.zebra-striped th.header:hover:after {
-  background-image: url(assets/img/tablesorter-indicators.png);
+  visibility: visible;
-  background-position: right 15px;
-  background-repeat: no-repeat;
 }
 table.zebra-striped th.actions:hover {
   background-image: none;
 }
-table.zebra-striped th.headerSortDown, table.zebra-striped th.headerSortDown:hover {
+table.zebra-striped th.headerSortDown:after, table.zebra-striped th.headerSortDown:hover:after {
-  background-position: right -25px;
+  visibility: visible;
-}
+  filter: alpha(opacity=60);
-table.zebra-striped th.headerSortUp, table.zebra-striped th.headerSortUp:hover {
+  -khtml-opacity: 0.6;
-  background-position: right -65px;
+  -moz-opacity: 0.6;
+  opacity: 0.6;
+}
+table.zebra-striped th.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);
+  -khtml-opacity: 0.6;
+  -moz-opacity: 0.6;
+  opacity: 0.6;
 }
 table.zebra-striped th.blue {
   color: #049cdb;
@@ -1134,8 +1164,11 @@ div.topbar a.logo img {
 div.topbar form {
   float: left;
   margin: 5px 0 0 0;
-  opacity: 1;
   position: relative;
+  filter: alpha(opacity=100);
+  -khtml-opacity: 1;
+  -moz-opacity: 1;
+  opacity: 1;
 }
 div.topbar form input {
   background-color: #bfbfbf;
@@ -1222,16 +1255,21 @@ div.topbar ul li.menu {
   position: relative;
 }
 div.topbar ul li.menu a.menu:after {
-  width: 7px;
+  width: 0px;
-  height: 7px;
+  height: 0px;
   display: inline-block;
-  background: transparent url(assets/img/dropdown-arrow.gif) no-repeat top center;
   content: "&darr;";
   text-indent: -99999px;
   vertical-align: top;
   margin-top: 8px;
   margin-left: 4px;
-  opacity: .5;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #fff;
+  filter: alpha(opacity=50);
+  -khtml-opacity: 0.5;
+  -moz-opacity: 0.5;
+  opacity: 0.5;
 }
 div.topbar ul li.menu.open a.menu, div.topbar ul li.menu.open a:hover {
   background-color: #00b4eb;
@@ -1365,18 +1403,24 @@ div.alert-message.info {
 div.alert-message a.close {
   float: right;
   margin-top: -2px;
-  opacity: .5;
   color: #fff;
   font-size: 20px;
   font-weight: bold;
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+  filter: alpha(opacity=50);
+  -khtml-opacity: 0.5;
+  -moz-opacity: 0.5;
+  opacity: 0.5;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
 div.alert-message a.close:hover {
-  opacity: 1;
   text-decoration: none;
+  filter: alpha(opacity=50);
+  -khtml-opacity: 0.5;
+  -moz-opacity: 0.5;
+  opacity: 0.5;
 }
 div.block-message {
   margin-bottom: 18px;

diff --git a/bootstrap-1.0.0.min.css b/bootstrap-1.0.0.min.css
diff --git a/lib/bootstrap.less b/lib/bootstrap.less
@@ -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: {{ date }}
+ * Date: @DATE
  */
 
 // CSS Reset

diff --git a/lib/patterns.less b/lib/patterns.less
@@ -50,8 +50,8 @@ div.topbar {
   form {
     float: left;
     margin: 5px 0 0 0;
-    opacity: 1;
     position: relative;
+    .opacity(100);
     input {
       background-color: @grayLight;
       background-color: rgba(255,255,255,.3);
@@ -131,16 +131,18 @@ div.topbar {
       position: relative;
       a.menu {
         &:after {
-          width: 7px;
+          width: 0px;
-          height: 7px;
+          height: 0px;
           display: inline-block;
-          background: transparent url(assets/img/dropdown-arrow.gif) no-repeat top center;
           content: "&darr;";
           text-indent: -99999px;
           vertical-align: top;
           margin-top: 8px;
           margin-left: 4px;
-          opacity: .5;
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-top: 4px solid #fff;
+          .opacity(50);
         }
       }
       &.open {
@@ -276,15 +278,15 @@ div.alert-message {
   a.close {
     float: right;
     margin-top: -2px;
-    opacity: .5;
     color: #fff;
     font-size: 20px;
     font-weight: bold;
     text-shadow: 0 1px 0 rgba(0,0,0,.5);
+    .opacity(50);
     .border-radius(3px);
     &:hover {
-      opacity: 1;
       text-decoration: none;
+      .opacity(50);
     }
   }
 }

diff --git a/lib/tables.less b/lib/tables.less
@@ -44,32 +44,54 @@ table.zebra-striped {
   // Tablesorting styles w/ jQuery plugin
   th.header { // For tablesorter tables, make THs have a pointer on hover
     cursor: pointer;
-    padding-right: 20px;
+    &:after {
+      width: 0px;
+      height: 0px;
+      display: inline-block;
+      float: right;
+      margin-top:7px;
+      content: "&darr;";
+      text-indent: -99999px;
+      vertical-align: top;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-bottom: 4px solid #000;
+      visibility:hidden;
+      .box-shadow(0 1px 0 #fff);
+      .opacity(30);
+    }
   }
   th.headerSortUp,
   th.headerSortDown { // Style the sorted column headers (THs)
-    background-image: url(assets/img/tablesorter-indicators.png);
-    background-position: right -23px;
-    background-repeat: no-repeat;
     background-color: rgba(141,192,219,.25);
     text-shadow: 0 1px 1px rgba(255,255,255,.75);
     .border-radius(3px 3px 0 0);
   }
   th.header:hover { // Style the ascending (reverse alphabetical) column header
-    background-image: url(assets/img/tablesorter-indicators.png);
+    &:after {
-    background-position: right 15px;
+      visibility:visible;
-    background-repeat: no-repeat;
+    }
   }
   th.actions:hover {
     background-image: none;
   }
   th.headerSortDown,
   th.headerSortDown:hover { // Style the descending (alphabetical) column header
-    background-position: right -25px;
+    &:after {
+      visibility:visible;
+      .opacity(60);
+    }
   }
-  th.headerSortUp,
+  th.headerSortUp { // Style the ascending (reverse alphabetical) column header
-  th.headerSortUp:hover { // Style the ascending (reverse alphabetical) column header
+    &:after {
-    background-position: right -65px;
+      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);
+    }
   }
   // Blue Table Headings
   th.blue {