* 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;
text-transform: uppercase;
}
ul, ol {
- margin: 0 0 9px 25px;
+ margin: 13px 0 14px 25px;
}
ul ul,
ul ol,
.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;
.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;
}
.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;
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;}
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;}
.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;}
.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;}
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
-------------------------------------------------- */
.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
</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">
+<!-- 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">
// Temp catchall for what's missing thus far
@import "patterns.less";
+@import "sprites.less";
@import "dropdowns.less";
@import "tabs-pills.less";
@import "breadcrumbs.less";
@import "modals.less";
@import "twipsy.less";
@import "popovers.less";
+@import "sidenav.less";
@import "thumbnails.less";
// Responsive
--- /dev/null
+// 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
--- /dev/null
+// 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; }
+
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 {
// Unordered and Ordered lists
ul, ol {
- margin: 0 0 @baseLineHeight / 2 25px;
+ margin: 13px 0 14px 25px;
}
ul ul,
ul ol,
projects / thirdparty / bootstrap.git / commitdiff
