From 52dfbe65006e1be7df88d1c1d39dc151ebc672aa Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 1 Jul 2011 23:21:11 -0700 Subject: [PATCH 1/4] add "make watch" to auto watch less files - change patterns.less to use opacity method --- Makefile | 8 ++++++-- bootstrap-1.0.0.css | 20 ++++++++++++++++---- bootstrap-1.0.0.min.css | 6 +++--- lib/patterns.less | 8 ++++---- 4 files changed, 29 insertions(+), 13 deletions(-) diff --git a/Makefile b/Makefile index 34e0d7b1da..7a962a3e5b 100644 --- a/Makefile +++ b/Makefile @@ -1,10 +1,14 @@ # NOTE: you must have the less npm package installed globally to build! -# To install run: npm install less -g -# ProTip: watchr -e "watch('lib/.*\.less') { system 'make' }" +# To install less package run: $npm install less -g +# watchr -e "watch('lib/.*\.less') { system 'make' }" build: @lessc ./lib/bootstrap.less > ./bootstrap-1.0.0.css @lessc ./lib/bootstrap.less > ./bootstrap-1.0.0.min.css --compress @echo "Bootstrap successfully built! - `date`" +watch: + @echo "Watching less files for changes..." + @watchr -e "watch('lib/.*\.less') { system 'make' }" + .PHONY: build \ No newline at end of file diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css index 3046626e70..7a74227ab2 100644 --- a/bootstrap-1.0.0.css +++ b/bootstrap-1.0.0.css @@ -1128,8 +1128,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; @@ -1225,7 +1228,10 @@ div.topbar ul li.menu a.menu:after { vertical-align: top; margin-top: 8px; margin-left: 4px; - opacity: .5; + 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; @@ -1359,18 +1365,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 index e066d5ba60..f76922220b 100644 --- a/bootstrap-1.0.0.min.css +++ b/bootstrap-1.0.0.min.css @@ -150,7 +150,7 @@ table.zebra-striped th.headerSortUp.purple,table.zebra-striped th.headerSortDown div.topbar{background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(#333333, #222222);background-image:-ms-linear-gradient(#333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(#333333, #222222);background-image:-o-linear-gradient(#333333, #222222);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);background-image:linear-gradient(#333333, #222222);height:40px;position:fixed;top:0;left:0;right:0;z-index:1000;overflow:visible;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}div.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} div.topbar ul li a:hover,div.topbar ul li.active a,div.topbar a.logo:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.15);color:#ffffff;text-decoration:none;} div.topbar a.logo{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}div.topbar a.logo img{float:left;margin-right:6px;} -div.topbar form{float:left;margin:5px 0 0 0;opacity:1;position:relative;}div.topbar form input{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}div.topbar form input:-moz-placeholder{color:#e6e6e6;} +div.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}div.topbar form input{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}div.topbar form input:-moz-placeholder{color:#e6e6e6;} div.topbar form input::-webkit-input-placeholder{color:#e6e6e6;} div.topbar form input:hover{background-color:#444;background-color:rgba(255, 255, 255, 0.5);color:#fff;} div.topbar form input:focus,div.topbar form input.focused{outline:none;background-color:#fff;color:#404040;text-shadow:0 1px 0 #fff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);} @@ -159,7 +159,7 @@ div.topbar ul li{display:block;float:left;font-size:13px;}div.topbar ul li a{dis div.topbar ul li.active a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} div.topbar ul.primary-nav li ul{left:0;} div.topbar ul.secondary-nav li ul{right:0;} -div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu:after{width:7px;height:7px;display:inline-block;background:transparent url(assets/img/dropdown-arrow.gif) no-repeat top center;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;opacity:.5;} +div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu:after{width:7px;height:7px;display:inline-block;background:transparent url(assets/img/dropdown-arrow.gif) no-repeat top center;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;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;background-color:rgba(255, 255, 255, 0.1);color:#fff;} div.topbar ul li.menu.open ul{display:block;}div.topbar ul li.menu.open ul li a{background-color:transparent;font-weight:normal;}div.topbar ul li.menu.open ul li a:hover{background-color:rgba(255, 255, 255, 0.1);color:#fff;} div.topbar ul li.menu.open ul li.active a{background-color:rgba(255, 255, 255, 0.1);font-weight:bold;} @@ -172,7 +172,7 @@ div.alert-message.error{background-color:#e06359;} div.alert-message.warning{background-color:#ffd75a;} div.alert-message.success{background-color:#74c474;} div.alert-message.info{background-color:#30c0fb;} -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);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}div.alert-message a.close:hover{opacity:1;text-decoration:none;} +div.alert-message a.close{float:right;margin-top:-2px;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{text-decoration:none;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;} div.block-message{margin-bottom:18px;padding:14px;color:#404040;color:rgba(0, 0, 0, 0.8);text-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}div.block-message p{color:#404040;color:rgba(0, 0, 0, 0.8);margin-right:30px;margin-bottom:0;} div.block-message ul{margin-bottom:0;} div.block-message strong{display:block;} diff --git a/lib/patterns.less b/lib/patterns.less index 76868e0060..f3d431f53e 100644 --- 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); @@ -140,7 +140,7 @@ div.topbar { vertical-align: top; margin-top: 8px; margin-left: 4px; - opacity: .5; + .opacity(50); } } &.open { @@ -276,15 +276,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); } } } From 088bfcc13a1f85557d12553a7942e3284c6ceae5 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 2 Jul 2011 10:45:59 -0700 Subject: [PATCH 2/4] add formal checks to makefile to make sure people have neccessary software installed add date to built file! --- Makefile | 33 ++++++++++++++++++++++++--------- bootstrap-1.0.0.css | 2 +- lib/bootstrap.less | 2 +- 3 files changed, 26 insertions(+), 11 deletions(-) diff --git a/Makefile b/Makefile index 7a962a3e5b..74ab90d023 100644 --- a/Makefile +++ b/Makefile @@ -1,14 +1,29 @@ -# NOTE: you must have the less npm package installed globally to build! -# To install less package run: $npm install less -g -# watchr -e "watch('lib/.*\.less') { system 'make' }" +DATE=$(shell DATE) +BOOTSTRAP = ./bootstrap-1.0.0.css +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 - @lessc ./lib/bootstrap.less > ./bootstrap-1.0.0.min.css --compress - @echo "Bootstrap successfully built! - `date`" + @@if test ! -z ${LESS_COMPESSOR}; then \ + sed 's/@DATE/'"${DATE}"'/' ${BOOTSTRAP_LESS} >${BOOTSTRAP_LESS}.tmp; \ + 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 watch: - @echo "Watching less files for changes..." - @watchr -e "watch('lib/.*\.less') { system 'make' }" + @@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 \ No newline at end of file +.PHONY: build watch \ No newline at end of file diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css index 7a74227ab2..37bfc0f334 100644 --- 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 10:45:47 PDT 2011 */ /* * Reset.less diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 834d950803..ead0c8f832 100644 --- 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 From ff694b3522d99974e9f13b6a7c2af915e5b3f1ac Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 2 Jul 2011 10:47:41 -0700 Subject: [PATCH 3/4] add build note back --- bootstrap-1.0.0.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css index ed5cfbe25c..d5a118fe2d 100644 --- 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: Sat Jul 2 10:45:47 PDT 2011 + * Date: Sat Jul 2 10:47:32 PDT 2011 */ /* * Reset.less From 799fd6add0d82c203be5484ea92d139f9c2ea35e Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 2 Jul 2011 11:51:05 -0700 Subject: [PATCH 4/4] get rid of assets/img in favor of css arrows --- .DS_Store | Bin 6148 -> 6148 bytes assets/img/dropdown-arrow.gif | Bin 49 -> 0 bytes assets/img/grid-20px.png | Bin 324 -> 0 bytes assets/img/tablesorter-indicators.png | Bin 451 -> 0 bytes bootstrap-1.0.0.css | 64 +++++++++++++++++++------- bootstrap-1.0.0.min.css | 12 ++--- lib/patterns.less | 8 ++-- lib/tables.less | 44 +++++++++++++----- 8 files changed, 92 insertions(+), 36 deletions(-) delete mode 100644 assets/img/dropdown-arrow.gif delete mode 100644 assets/img/grid-20px.png delete mode 100644 assets/img/tablesorter-indicators.png diff --git a/.DS_Store b/.DS_Store index d44b41a70fc7be2b54e636391ffe47ec77367c02..4372a5b7179def391197a851263017df76436d11 100644 GIT binary patch delta 73 zcmZoMXfc@JFUrioz`)4BAi%&-!cd%2oSc)CpPw`NBja)@kPI6`B116{rXtHSPUc~} PvH2q-7u#lbj=%f>m>3h< delta 55 zcmZoMXfc@JFUrKgz`)4BAiz*ukd%|31mtZ9%MSo-%MIKB diff --git a/assets/img/dropdown-arrow.gif b/assets/img/dropdown-arrow.gif deleted file mode 100644 index 2da9c1d54e89d6fe32ee04c1ee122ddd0243a8a3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 49 xcmZ?wbhEHbWM^PuXkcXc4+e@qSr{1@7#VaJfB+=Jz{JtQ-zb^I8>zuy4FF%O3-AB{ diff --git a/assets/img/grid-20px.png b/assets/img/grid-20px.png deleted file mode 100644 index 91b8bf38d549f84977a76baf033087651a440622..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 324 zcmeAS@N?(olHy`uVBq!ia0vp^DImpfcYBk$3j}$`Lyqw{&oKoZ$a% zC$L+)W|GMDs`s~-%$WA^p8cGi_s(bD+nx45CCs6LgF}FkQAxppg{1?|{*s;h<_iCO zrN!yX^VsE#&QE;GCn%u6#N+}|4rhBjeRJjTreOZr&rcM!V>5_lNm1FW#G5PI&lacb zbOu?$0M!g<2U%Kw-2gP^ndPQCif}7{E`qaH-cdckAUjoOf49E%cA$?LJYD@<);T3K F0RVOaX<7gP diff --git a/assets/img/tablesorter-indicators.png b/assets/img/tablesorter-indicators.png deleted file mode 100644 index af3c40522f7dee8241f923f0501a5fc350ff51c1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 451 zcmV;!0X+VRP)>d^U}zN#K19&QMXMI#Mo1KKrt^mrgX!eeHo-aYa}WPHeq3~O z4vNiYqqRc_afXv>@0w!B4%m@x+p{MBAZVrn)LXCv&+`^VQD_iyc%y*ypzgZvB1w{O z4>>&4l!1=poTq7e*lvJ_n({l$vh0$MtDe3k>2(NDbbaM1p=*B}3}he!8OT5eGLV4` zWZ#nYA9YPLo?4BYCa9@_?@zz5Q4>e_= zl=7MYvvvbK)Rf<0RaNUfee0n>-cuOJKn609fed6I0~z?gfO2POzonyZH+iB-_d)4~ zd7g_P2!1rcLv8RCF=IE9aU6%f@2|-I5^{K`?ey(c+c=G)=+QLI6@(n#P*@ibnulTd t3?Wy6L49k*_P@$f^(*t9GCe*87yw#S1y^?F61)Ha002ovPDHLkV1nhe!%6@E diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css index d5a118fe2d..6500280b62 100644 --- 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: Sat Jul 2 10:47:32 PDT 2011 + * 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: "↓"; + 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 { - background-image: url(assets/img/tablesorter-indicators.png); - background-position: right 15px; - background-repeat: no-repeat; +table.zebra-striped th.header:hover:after { + visibility: visible; } table.zebra-striped th.actions:hover { background-image: none; } -table.zebra-striped th.headerSortDown, table.zebra-striped th.headerSortDown:hover { - background-position: right -25px; +table.zebra-striped th.headerSortDown:after, table.zebra-striped th.headerSortDown:hover:after { + visibility: visible; + filter: alpha(opacity=60); + -khtml-opacity: 0.6; + -moz-opacity: 0.6; + opacity: 0.6; } -table.zebra-striped th.headerSortUp, table.zebra-striped th.headerSortUp:hover { - background-position: right -65px; +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; @@ -1225,15 +1255,17 @@ div.topbar ul li.menu { position: relative; } div.topbar ul li.menu a.menu:after { - width: 7px; - height: 7px; + width: 0px; + height: 0px; display: inline-block; - background: transparent url(assets/img/dropdown-arrow.gif) no-repeat top center; content: "↓"; text-indent: -99999px; vertical-align: top; margin-top: 8px; margin-left: 4px; + 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; diff --git a/bootstrap-1.0.0.min.css b/bootstrap-1.0.0.min.css index 16075968fe..fbc24a8e00 100644 --- a/bootstrap-1.0.0.min.css +++ b/bootstrap-1.0.0.min.css @@ -131,12 +131,12 @@ table{width:100%;margin-bottom:18px;padding:0;text-align:left;border-collapse:se table th{padding-top:9px;font-weight:bold;border-bottom-width:2px;} table.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;} table.zebra-striped tbody tr:hover td{background-color:#f5f5f5;} -table.zebra-striped th.header{cursor:pointer;padding-right:20px;} -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{background-image:url(assets/img/tablesorter-indicators.png);background-position:right 15px;background-repeat:no-repeat;} +table.zebra-striped th.header{cursor:pointer;}table.zebra-striped th.header:after{width:0px;height:0px;display:inline-block;float:right;margin-top:7px;content:"↓";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-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:after{visibility:visible;} table.zebra-striped th.actions:hover{background-image:none;} -table.zebra-striped th.headerSortDown,table.zebra-striped th.headerSortDown:hover{background-position:right -25px;} -table.zebra-striped th.headerSortUp,table.zebra-striped th.headerSortUp:hover{background-position:right -65px;} +table.zebra-striped th.headerSortDown:after,table.zebra-striped th.headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-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;border-bottom-color:#049cdb;} table.zebra-striped th.headerSortUp.blue,table.zebra-striped th.headerSortDown.blue{background-color:#ade6fe;} table.zebra-striped th.green{color:#46a546;border-bottom-color:#46a546;} @@ -161,7 +161,7 @@ div.topbar ul li{display:block;float:left;font-size:13px;}div.topbar ul li a{dis div.topbar ul li.active a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} div.topbar ul.primary-nav li ul{left:0;} div.topbar ul.secondary-nav li ul{right:0;} -div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu:after{width:7px;height:7px;display:inline-block;background:transparent url(assets/img/dropdown-arrow.gif) no-repeat top center;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;} +div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu:after{width:0px;height:0px;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;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;background-color:rgba(255, 255, 255, 0.1);color:#fff;} div.topbar ul li.menu.open ul{display:block;}div.topbar ul li.menu.open ul li a{background-color:transparent;font-weight:normal;}div.topbar ul li.menu.open ul li a:hover{background-color:rgba(255, 255, 255, 0.1);color:#fff;} div.topbar ul li.menu.open ul li.active a{background-color:rgba(255, 255, 255, 0.1);font-weight:bold;} diff --git a/lib/patterns.less b/lib/patterns.less index 3ce02ea10d..a3a949244d 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -131,15 +131,17 @@ div.topbar { position: relative; a.menu { &:after { - width: 7px; - height: 7px; + width: 0px; + height: 0px; display: inline-block; - background: transparent url(assets/img/dropdown-arrow.gif) no-repeat top center; content: "↓"; text-indent: -99999px; vertical-align: top; margin-top: 8px; margin-left: 4px; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #fff; .opacity(50); } } diff --git a/lib/tables.less b/lib/tables.less index 5cde1b5cee..7c315ff35e 100644 --- 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: "↓"; + 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); - background-position: right 15px; - background-repeat: no-repeat; + &:after { + visibility:visible; + } } 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:hover { // Style the ascending (reverse alphabetical) column header - background-position: right -65px; + th.headerSortUp { // Style the ascending (reverse alphabetical) column header + &: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); + } } // Blue Table Headings th.blue {