diff --git a/bootstrap.css b/bootstrap.css index 8e2ce41f3b4041e3c0f7397ef14b762b387d12d8..ade32d9ba57dc1bb553d9f9b26d3b37321fd2843 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: Fri Dec 30 16:01:05 PST 2011 + * Date: Thu Jan 5 01:33:17 PST 2012 */ html, body { margin: 0; @@ -401,7 +401,7 @@ h6 { text-transform: uppercase; } ul, ol { - margin: 0 0 9px 25px; + margin: 13px 0 14px 25px; } ul ul, ul ol, @@ -1025,6 +1025,9 @@ td { .bordered-table td + th { border-left: 1px solid #ddd; } +.bordered-table thead:first-child tr:first-child th, .bordered-table tbody:first-child tr:first-child td { + border-top: 0; +} .bordered-table thead:first-child tr:first-child th:first-child, .bordered-table tbody:first-child tr:first-child td:first-child { -webkit-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0; @@ -1820,6 +1823,285 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .label.notice { background-color: #62cffc; } +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; +} +.search { + background-position: -48px 0; +} +.envelope { + background-position: -72px 0; +} +.heart { + background-position: -96px 0; +} +.star { + background-position: -120px 0; +} +.star-empty { + background-position: -144px 0; +} +.user { + background-position: -168px 0; +} +.film { + background-position: -192px 0; +} +.th-large { + background-position: -216px 0; +} +.th { + background-position: -240px 0; +} +.th-lines { + background-position: -264px 0; +} +.ok { + background-position: -288px 0; +} +.remove { + background-position: -312px 0; +} +.zoom-in { + background-position: -336px 0; +} +.zoom-out { + background-position: -360px 0; +} +.off { + background-position: -384px 0; +} +.signal { + background-position: -408px 0; +} +.cog { + background-position: -432px 0; +} +.trash { + background-position: -456px 0; +} +.home { + background-position: 0 -24px; +} +.file { + background-position: -24px -24px; +} +.time { + background-position: -48px -24px; +} +.road { + background-position: -72px -24px; +} +.download-alt { + background-position: -96px -24px; +} +.download { + background-position: -120px -24px; +} +.upload { + background-position: -144px -24px; +} +.inbox { + background-position: -168px -24px; +} +.play-circle { + background-position: -192px -24px; +} +.repeat { + background-position: -216px -24px; +} +.refresh { + background-position: -240px -24px; +} +.calendar { + background-position: -264px -24px; +} +.lock { + background-position: -288px -24px; +} +.flag { + background-position: -312px -24px; +} +.headphones { + background-position: -336px -24px; +} +.volume-off { + background-position: -360px -24px; +} +.volume-down { + background-position: -384px -24px; +} +.volume-up { + background-position: -408px -24px; +} +.qrcode { + background-position: -432px -24px; +} +.barcode { + background-position: -456px -24px; +} +.tag { + background-position: 0 -48px; +} +.tags { + background-position: -24px -48px; +} +.book { + background-position: -48px -48px; +} +.bookmark { + background-position: -72px -48px; +} +.print { + background-position: -96px -48px; +} +.camera { + background-position: -120px -48px; +} +.font { + background-position: -144px -48px; +} +.bold { + background-position: -168px -48px; +} +.italic { + background-position: -192px -48px; +} +.text-height { + background-position: -216px -48px; +} +.text-width { + background-position: -240px -48px; +} +.align-left { + background-position: -264px -48px; +} +.align-center { + background-position: -288px -48px; +} +.align-right { + background-position: -312px -48px; +} +.align-justify { + background-position: -336px -48px; +} +.list { + background-position: -360px -48px; +} +.indent-left { + background-position: -384px -48px; +} +.indent-right { + background-position: -408px -48px; +} +.facetime-video { + background-position: -432px -48px; +} +.picture { + background-position: -456px -48px; +} +.pencil { + background-position: 0 -72px; +} +.map-marker { + background-position: -24px -72px; +} +.adjust { + background-position: -48px -72px; +} +.tint { + background-position: -72px -72px; +} +.edit { + background-position: -96px -72px; +} +.share { + background-position: -120px -72px; +} +.check { + background-position: -144px -72px; +} +.move { + background-position: -168px -72px; +} +.step-backward { + background-position: -192px -72px; +} +.fast-backward { + background-position: -216px -72px; +} +.backward { + background-position: -240px -72px; +} +.play { + background-position: -264px -72px; +} +.pause { + background-position: -288px -72px; +} +.stop { + background-position: -312px -72px; +} +.forward { + background-position: -336px -72px; +} +.fast-forward { + background-position: -360px -72px; +} +.step-forward { + background-position: -384px -72px; +} +.eject { + background-position: -408px -72px; +} +.chevron-left { + background-position: -432px -72px; +} +.chevron-right { + background-position: -456px -72px; +} +.arrow-left { + background-position: -240px -96px; +} +.arrow-right { + background-position: -264px -96px; +} +.arrow-up { + background-position: -288px -96px; +} +.arrow-down { + background-position: -312px -96px; +} +.share { + background-position: -336px -96px; +} +.resize-full { + background-position: -360px -96px; +} +.resize-small { + background-position: -384px -96px; +} +.plus { + background-position: -408px -96px; +} +.minus { + background-position: -432px -96px; +} +.asterisk { + background-position: -456px -96px; +} .dropdown { position: relative; } @@ -2538,6 +2820,50 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .popover .content p, .popover .content ul, .popover .content ol { margin-bottom: 0; } +.side-nav { + padding: 9px 0; +} +.side-nav .nav-label, .side-nav .nav-item { + display: block; + padding: 3px 16px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); +} +.side-nav .nav-label { + font-size: 11px; + line-height: 18px; + color: #404040; + text-transform: uppercase; +} +.side-nav .nav-group { + margin: 0 -1px; + list-style: none; +} +.side-nav .nav-item { + font-weight: bold; +} +.side-nav .nav-item i { + vertical-align: -2px; +} +.side-nav .nav-item:hover { + text-decoration: none; +} +.side-nav .active .nav-item { + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); + background-color: #aaaaaa; + background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa)); + background-image: -moz-linear-gradient(top, #cccccc, #aaaaaa); + background-image: -ms-linear-gradient(top, #cccccc, #aaaaaa); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa)); + background-image: -webkit-linear-gradient(top, #cccccc, #aaaaaa); + background-image: -o-linear-gradient(top, #cccccc, #aaaaaa); + background-image: linear-gradient(top, #cccccc, #aaaaaa); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0); + -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); +} .thumbnails { margin-left: -20px; margin-bottom: 0; diff --git a/bootstrap.min.css b/bootstrap.min.css index 51e652bb95254fcd2a82577e049ce578e0aecca5..65fd2649bcdac76f7b66324e2ff6b0df6601effd 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -69,7 +69,7 @@ h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} h5{font-size:14px;line-height:18px;} h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;} -ul,ol{margin:0 0 9px 25px;} +ul,ol{margin:13px 0 14px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} ol{list-style:decimal;} @@ -167,6 +167,7 @@ th{font-weight:bold;vertical-align:bottom;} td{vertical-align:top;} .condensed-table th,.condensed-table td{padding:4px 5px;} .bordered-table{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td,.bordered-table td+th{border-left:1px solid #ddd;} +.bordered-table thead:first-child tr:first-child th,.bordered-table tbody:first-child tr:first-child td{border-top:0;} .bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;} .bordered-table thead:first-child tr:first-child th:last-child,.bordered-table tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;} .bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} @@ -246,6 +247,97 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} +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;} +.search{background-position:-48px 0;} +.envelope{background-position:-72px 0;} +.heart{background-position:-96px 0;} +.star{background-position:-120px 0;} +.star-empty{background-position:-144px 0;} +.user{background-position:-168px 0;} +.film{background-position:-192px 0;} +.th-large{background-position:-216px 0;} +.th{background-position:-240px 0;} +.th-lines{background-position:-264px 0;} +.ok{background-position:-288px 0;} +.remove{background-position:-312px 0;} +.zoom-in{background-position:-336px 0;} +.zoom-out{background-position:-360px 0;} +.off{background-position:-384px 0;} +.signal{background-position:-408px 0;} +.cog{background-position:-432px 0;} +.trash{background-position:-456px 0;} +.home{background-position:0 -24px;} +.file{background-position:-24px -24px;} +.time{background-position:-48px -24px;} +.road{background-position:-72px -24px;} +.download-alt{background-position:-96px -24px;} +.download{background-position:-120px -24px;} +.upload{background-position:-144px -24px;} +.inbox{background-position:-168px -24px;} +.play-circle{background-position:-192px -24px;} +.repeat{background-position:-216px -24px;} +.refresh{background-position:-240px -24px;} +.calendar{background-position:-264px -24px;} +.lock{background-position:-288px -24px;} +.flag{background-position:-312px -24px;} +.headphones{background-position:-336px -24px;} +.volume-off{background-position:-360px -24px;} +.volume-down{background-position:-384px -24px;} +.volume-up{background-position:-408px -24px;} +.qrcode{background-position:-432px -24px;} +.barcode{background-position:-456px -24px;} +.tag{background-position:0 -48px;} +.tags{background-position:-24px -48px;} +.book{background-position:-48px -48px;} +.bookmark{background-position:-72px -48px;} +.print{background-position:-96px -48px;} +.camera{background-position:-120px -48px;} +.font{background-position:-144px -48px;} +.bold{background-position:-168px -48px;} +.italic{background-position:-192px -48px;} +.text-height{background-position:-216px -48px;} +.text-width{background-position:-240px -48px;} +.align-left{background-position:-264px -48px;} +.align-center{background-position:-288px -48px;} +.align-right{background-position:-312px -48px;} +.align-justify{background-position:-336px -48px;} +.list{background-position:-360px -48px;} +.indent-left{background-position:-384px -48px;} +.indent-right{background-position:-408px -48px;} +.facetime-video{background-position:-432px -48px;} +.picture{background-position:-456px -48px;} +.pencil{background-position:0 -72px;} +.map-marker{background-position:-24px -72px;} +.adjust{background-position:-48px -72px;} +.tint{background-position:-72px -72px;} +.edit{background-position:-96px -72px;} +.share{background-position:-120px -72px;} +.check{background-position:-144px -72px;} +.move{background-position:-168px -72px;} +.step-backward{background-position:-192px -72px;} +.fast-backward{background-position:-216px -72px;} +.backward{background-position:-240px -72px;} +.play{background-position:-264px -72px;} +.pause{background-position:-288px -72px;} +.stop{background-position:-312px -72px;} +.forward{background-position:-336px -72px;} +.fast-forward{background-position:-360px -72px;} +.step-forward{background-position:-384px -72px;} +.eject{background-position:-408px -72px;} +.chevron-left{background-position:-432px -72px;} +.chevron-right{background-position:-456px -72px;} +.arrow-left{background-position:-240px -96px;} +.arrow-right{background-position:-264px -96px;} +.arrow-up{background-position:-288px -96px;} +.arrow-down{background-position:-312px -96px;} +.share{background-position:-336px -96px;} +.resize-full{background-position:-360px -96px;} +.resize-small{background-position:-384px -96px;} +.plus{background-position:-408px -96px;} +.minus{background-position:-432px -96px;} +.asterisk{background-position:-456px -96px;} .dropdown{position:relative;} .dropdown-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"↓";} .dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} @@ -335,6 +427,14 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;} .popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} +.side-nav{padding:9px 0;} +.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 16px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +.side-nav .nav-label{font-size:11px;line-height:18px;color:#404040;text-transform:uppercase;} +.side-nav .nav-group{margin:0 -1px;list-style:none;} +.side-nav .nav-item{font-weight:bold;} +.side-nav .nav-item i{vertical-align:-2px;} +.side-nav .nav-item:hover{text-decoration:none;} +.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#aaaaaa;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa));background-image:-moz-linear-gradient(top, #cccccc, #aaaaaa);background-image:-ms-linear-gradient(top, #cccccc, #aaaaaa);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));background-image:-webkit-linear-gradient(top, #cccccc, #aaaaaa);background-image:-o-linear-gradient(top, #cccccc, #aaaaaa);background-image:linear-gradient(top, #cccccc, #aaaaaa);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);} .thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;} .thumbnails:after{clear:both;} .thumbnails>li{float:left;margin:0 0 20px 20px;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index c2c92a2519324ba174b3fe03f8f3abeb3d6b7ce7..b218b465c5961bcdb3b76e62e38ec5f3a08ce179 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -330,6 +330,24 @@ h2 + table { position: relative; } +/* Icons +------------------------- */ +.the-icons { + +} +.the-icons i { + display: block; + margin-bottom: 5px; + background-color: rgba(255,0,0,.25); +} +.the-icons i:after { + display: block; + content: attr(class); + font-style: normal; + margin-left: 20px; + width: 100px; +} + /* Responsive Docs -------------------------------------------------- */ diff --git a/docs/assets/img/glyphicons-halflings-sprite.png b/docs/assets/img/glyphicons-halflings-sprite.png new file mode 100644 index 0000000000000000000000000000000000000000..525acee6dc1ae5bbf86f5dbd3c4332366beadebc Binary files /dev/null and b/docs/assets/img/glyphicons-halflings-sprite.png differ diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css index da6b6e7e17df96b2a73e1d5b54159c7c3a4f51d3..7ff618550a0d5c207ac15e443b385d7e35a54520 100644 --- a/docs/assets/js/google-code-prettify/prettify.css +++ b/docs/assets/js/google-code-prettify/prettify.css @@ -2,40 +2,23 @@ .lit { color: #195f91; } .pun, .opn, .clo { color: #93a1a1; } .fun { color: #dc322f; } -.str, .atv { color: #268bd2; } -.kwd, .tag { color: #195f91; } -.typ, .atn, .dec, .var { color: #CB4B16; } +.str, .atv { color: #62C462; } +.kwd, .linenums .tag { color: #049CD9; } +.typ, .atn, .dec, .var { color: #EE5F5B; } .pln { color: #93a1a1; } pre.prettyprint { - background: #fefbf3; + background-color: #fefbf3; padding: 9px; - border: 1px solid rgba(0,0,0,.2); - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1); - -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1); - box-shadow: 0 1px 2px rgba(0,0,0,.1); + margin-bottom: 9px; +} + +pre.prettyprint { + color: #ccc; + background-color: #252525; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */ -ol.linenums li { color: rgba(0,0,0,.15); line-height: 20px; } +ol.linenums li { color: #444; line-height: 18px; } /* Alternate shading for lines */ -li.L1, li.L3, li.L5, li.L7, li.L9 { } - -/* -$base03: #002b36; -$base02: #073642; -$base01: #586e75; -$base00: #657b83; -$base0: #839496; -$base1: #93a1a1; -$base2: #eee8d5; -$base3: #fdf6e3; -$yellow: #b58900; -$orange: #cb4b16; -$red: #dc322f; -$magenta: #d33682; -$violet: #6c71c4; -$blue: #268bd2; -$cyan: #2aa198; -$green: #859900; -*/ \ No newline at end of file +li.L1, li.L3, li.L5, li.L7, li.L9 { } \ No newline at end of file diff --git a/docs/base-css.html b/docs/base-css.html index 2bc6f49fbb66f19cf2529b0ddac68a95a5bcb96a..c07263495cf2093eed2e0f9a74f4b343321c5163 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1175,6 +1175,158 @@ Form states </section> + +<!-- Icons +================================================== --> +<section id="icons"> + <div class="page-header"> + <h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1> + </div> + <div class="row"> + <div class="span2"> + <div class="the-icons"> + <i class="glass"></i> + <i class="music"></i> + <i class="search"></i> + <i class="envelope"></i> + <i class="heart"></i> + <i class="star"></i> + <i class="star-empty"></i> + <i class="user"></i> + <i class="film"></i> + <i class="th-large"></i> + <i class="th"></i> + <i class="th-list"></i> + <i class="ok"></i> + <i class="remove"></i> + <i class="zoom-in"></i> + <i class="zoom-out"></i> + <i class="off"></i> + <i class="signal"></i> + <i class="cog"></i> + <i class="trash"></i> + </div> + </div> + <div class="span2"> + <div class="the-icons"> + <i class="home"></i> + <i class="file"></i> + <i class="time"></i> + <i class="road"></i> + <i class="download-alt"></i> + <i class="download"></i> + <i class="upload"></i> + <i class="inbox"></i> + <i class="play-circle"></i> + <i class="repeat"></i> + <i class="refresh"></i> + <i class="calendar"></i> + <i class="lock"></i> + <i class="flag"></i> + <i class="headphones"></i> + <i class="volume-off"></i> + <i class="volume-down"></i> + <i class="volume-up"></i> + <i class="qrcode"></i> + <i class="barcode"></i> + </div> + </div> + <div class="span2"> + <div class="the-icons"> + <i class="tag"></i> + <i class="tags"></i> + <i class="book"></i> + <i class="bookmark"></i> + <i class="print"></i> + <i class="camera"></i> + <i class="font"></i> + <i class="bold"></i> + <i class="italic"></i> + <i class="text-height"></i> + <i class="text-width"></i> + <i class="align-left"></i> + <i class="align-center"></i> + <i class="align-right"></i> + <i class="align-justify"></i> + <i class="list"></i> + <i class="indent-left"></i> + <i class="indent-right"></i> + <i class="facetime-video"></i> + <i class="picture"></i> + </div> + </div> + <div class="span2"> + <div class="the-icons"> + <i class="pencil"></i> + <i class="map-marker"></i> + <i class="adjust"></i> + <i class="tint"></i> + <i class="edit"></i> + <i class="share"></i> + <i class="check"></i> + <i class="move"></i> + <i class="step-backward"></i> + <i class="fast-backward"></i> + <i class="backward"></i> + <i class="play"></i> + <i class="pause"></i> + <i class="stop"></i> + <i class="forward"></i> + <i class="fast-forward"></i> + <i class="step-foward"></i> + <i class="eject"></i> + <i class="chevron-left"></i> + <i class="chevron-right"></i> + </div> + </div> + <div class="span2"> + <div class="the-icons"> + <i class="arrow-left"></i> + <i class="arrow-right"></i> + <i class="arrow-up"></i> + <i class="arrow-down"></i> + <i class="share"></i> + <i class="resize-full"></i> + <i class="resize-small"></i> + <i class="plus"></i> + <i class="minus"></i> + <i class="asterisk"></i> + </div> + </div> + </div> + + <br> + + <div class="row"> + <div class="span4"> + <h3>Built as a sprite</h3> + <p>Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p> + <p><a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit. Please consider doing the same in your projects.</p> + </div> + <div class="span4"> + <h3>How to use</h3> + <p>With v2.0.0, the <code><i></code> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:</p> +<pre class="prettyprint"> +<i class="chevron-left"></i> +</pre> + <p>There are over 100 classes to choose from for your icons. Just add an <code><i></code> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.</p> + </div> + <div class="span4"> + <h3>Use cases</h3> + <p>Icons are great, but where would one use them? Here are a few ideas:</p> + <ul> + <li>As visuals for your sidebar navigation</li> + <li>For a purely icon-driven nav</li> + <li>For buttons to help convey the meaning of an action</li> + <li>With links to share context on a user's destination</li> + </ul> + <p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.</p> + </div> + </div> +</section> + + + <!-- Footer ================================================== --> <footer class="footer"> diff --git a/docs/components.html b/docs/components.html index fbfa9fb31e16eec1ee6b6b74797f2e280dffa9e3..d9d6b10d62ab2a22e970133e0389335e8c18a5b1 100644 --- a/docs/components.html +++ b/docs/components.html @@ -223,6 +223,38 @@ +<!-- Side nav +================================================== --> +<section id="sidenav"> + <div class="page-header"> + <h1>Side nav <small></small></h1> + </div> + + <div class="well side-nav"> + <h6 class="nav-label">Your account</h6> + <ul class="nav-group"> + <li class="active"><a class="nav-item" href="#">Home</a></li> + <li><a class="nav-item" href="#">Library</a></li> + <li><a class="nav-item" href="#">Profile</a></li> + <li><a class="nav-item" href="#">Settings</a></li> + <li><a class="nav-item" href="#">Help</a></li> + </ul> + </div> + + <div class="well side-nav"> + <h6 class="nav-label">Your account</h6> + <ul class="nav-group"> + <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li> + <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li> + <li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li> + <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li> + <li><a class="nav-item" href="#"><i class="time"></i> Help</a></li> + </ul> + </div> +</section> + + + <!-- Navbar ================================================== --> <section id="navbar"> diff --git a/lib/bootstrap.less b/lib/bootstrap.less index e05a966addf59bd04abde3163112a688a925ba13..8b821825c78404402d3b5c97c55f0823a3901891 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -27,6 +27,7 @@ // Temp catchall for what's missing thus far @import "patterns.less"; +@import "sprites.less"; @import "dropdowns.less"; @import "tabs-pills.less"; @import "breadcrumbs.less"; @@ -34,6 +35,7 @@ @import "modals.less"; @import "twipsy.less"; @import "popovers.less"; +@import "sidenav.less"; @import "thumbnails.less"; // Responsive diff --git a/lib/sidenav.less b/lib/sidenav.less new file mode 100644 index 0000000000000000000000000000000000000000..afc5ea1ddfbd4c7c29e0dcca3b8891ba90b61c2e --- /dev/null +++ b/lib/sidenav.less @@ -0,0 +1,40 @@ +// SIDE NAV +// -------- + + +.side-nav { + padding: @baseLineHeight / 2 0; +} +.side-nav .nav-label, +.side-nav .nav-item { + display: block; + padding: 3px 16px; + text-shadow: 0 1px 0 rgba(255,255,255,.5); +} +.side-nav .nav-label { + font-size: 11px; + line-height: @baseLineHeight; + color: @grayDark; + text-transform: uppercase; +} +.side-nav .nav-group { + margin: 0 -1px; + list-style: none; +} + +.side-nav .nav-item { + font-weight: bold; +} +.side-nav .nav-item i { + vertical-align: -2px; +} +.side-nav .nav-item:hover { + text-decoration: none; +} +.side-nav .active .nav-item { + color: #fff; + text-shadow: 0 -1px 0 rgba(0,0,0,.3); + #gradient > .vertical(#ccc, #aaa); + @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05); + .box-shadow(@shadow); +} \ No newline at end of file diff --git a/lib/sprites.less b/lib/sprites.less new file mode 100644 index 0000000000000000000000000000000000000000..8b5bcd5a5f0c068ddbf75e67c8810832ba27c3d1 --- /dev/null +++ b/lib/sprites.less @@ -0,0 +1,118 @@ +// SPRITES +// Glyphs and icons for buttons, nav, and more +// ------------------------------------------- + + +// ICONS +// ----- + +// As of v2.0.0, the <i> tag is reserved for icons from the Glyphicons set. +// All icons receive the styles of the <i> tag and are then given a unique +// class to add width, height, and background-position. Your resulting HTML +// will look like <i class="inbox"></i>. + +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; } +.search { background-position: -48px 0; } +.envelope { background-position: -72px 0; } +.heart { background-position: -96px 0; } +.star { background-position: -120px 0; } +.star-empty { background-position: -144px 0; } +.user { background-position: -168px 0; } +.film { background-position: -192px 0; } +.th-large { background-position: -216px 0; } +.th { background-position: -240px 0; } +.th-lines { background-position: -264px 0; } +.ok { background-position: -288px 0; } +.remove { background-position: -312px 0; } +.zoom-in { background-position: -336px 0; } +.zoom-out { background-position: -360px 0; } +.off { background-position: -384px 0; } +.signal { background-position: -408px 0; } +.cog { background-position: -432px 0; } +.trash { background-position: -456px 0; } + +.home { background-position: 0 -24px; } +.file { background-position: -24px -24px; } +.time { background-position: -48px -24px; } +.road { background-position: -72px -24px; } +.download-alt { background-position: -96px -24px; } +.download { background-position: -120px -24px; } +.upload { background-position: -144px -24px; } +.inbox { background-position: -168px -24px; } +.play-circle { background-position: -192px -24px; } +.repeat { background-position: -216px -24px; } +.refresh { background-position: -240px -24px; } +.calendar { background-position: -264px -24px; } +.lock { background-position: -288px -24px; } +.flag { background-position: -312px -24px; } +.headphones { background-position: -336px -24px; } +.volume-off { background-position: -360px -24px; } +.volume-down { background-position: -384px -24px; } +.volume-up { background-position: -408px -24px; } +.qrcode { background-position: -432px -24px; } +.barcode { background-position: -456px -24px; } + +.tag { background-position: 0 -48px; } +.tags { background-position: -24px -48px; } +.book { background-position: -48px -48px; } +.bookmark { background-position: -72px -48px; } +.print { background-position: -96px -48px; } +.camera { background-position: -120px -48px; } +.font { background-position: -144px -48px; } +.bold { background-position: -168px -48px; } +.italic { background-position: -192px -48px; } +.text-height { background-position: -216px -48px; } +.text-width { background-position: -240px -48px; } +.align-left { background-position: -264px -48px; } +.align-center { background-position: -288px -48px; } +.align-right { background-position: -312px -48px; } +.align-justify { background-position: -336px -48px; } +.list { background-position: -360px -48px; } +.indent-left { background-position: -384px -48px; } +.indent-right { background-position: -408px -48px; } +.facetime-video { background-position: -432px -48px; } +.picture { background-position: -456px -48px; } + +.pencil { background-position: 0 -72px; } +.map-marker { background-position: -24px -72px; } +.adjust { background-position: -48px -72px; } +.tint { background-position: -72px -72px; } +.edit { background-position: -96px -72px; } +.share { background-position: -120px -72px; } +.check { background-position: -144px -72px; } +.move { background-position: -168px -72px; } +.step-backward { background-position: -192px -72px; } +.fast-backward { background-position: -216px -72px; } +.backward { background-position: -240px -72px; } +.play { background-position: -264px -72px; } +.pause { background-position: -288px -72px; } +.stop { background-position: -312px -72px; } +.forward { background-position: -336px -72px; } +.fast-forward { background-position: -360px -72px; } +.step-forward { background-position: -384px -72px; } +.eject { background-position: -408px -72px; } +.chevron-left { background-position: -432px -72px; } +.chevron-right { background-position: -456px -72px; } + +.arrow-left { background-position: -240px -96px; } +.arrow-right { background-position: -264px -96px; } +.arrow-up { background-position: -288px -96px; } +.arrow-down { background-position: -312px -96px; } +.share { background-position: -336px -96px; } +.resize-full { background-position: -360px -96px; } +.resize-small { background-position: -384px -96px; } +.plus { background-position: -408px -96px; } +.minus { background-position: -432px -96px; } +.asterisk { background-position: -456px -96px; } + diff --git a/lib/tables.less b/lib/tables.less index 1643705620e7f4bb83f2894f870c8fd09e6e3ae9..e1c9ed53bc4788d17c1a9acda52ae537ba8f5306 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -52,6 +52,11 @@ td { td + th { border-left: 1px solid #ddd; } + // Prevent a double border + thead:first-child tr:first-child th, + tbody:first-child tr:first-child td { + border-top: 0; + } // For first th or td in the first row in the first thead or tbody thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { diff --git a/lib/type.less b/lib/type.less index b2ba73b86785d9a977df2557d3a2dad5b24a42e4..cc446a69d5cd3d4b8b9c02f25d5cc6fc3555282d 100644 --- a/lib/type.less +++ b/lib/type.less @@ -74,7 +74,7 @@ h6 { // Unordered and Ordered lists ul, ol { - margin: 0 0 @baseLineHeight / 2 25px; + margin: 13px 0 14px 25px; } ul ul, ul ol,