From fb9401b355366452d310d39f51224999da4daa82 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 01:34:14 -0800 Subject: [PATCH] tweaks abound, updated prettify styles, new sidenav component started, sprite icons started --- bootstrap.css | 330 +++++++++++++++++- bootstrap.min.css | 102 +++++- docs/assets/css/docs.css | 18 + .../img/glyphicons-halflings-sprite.png | Bin 0 -> 9944 bytes .../js/google-code-prettify/prettify.css | 41 +-- docs/base-css.html | 152 ++++++++ docs/components.html | 32 ++ lib/bootstrap.less | 2 + lib/sidenav.less | 40 +++ lib/sprites.less | 118 +++++++ lib/tables.less | 5 + lib/type.less | 2 +- 12 files changed, 809 insertions(+), 33 deletions(-) create mode 100644 docs/assets/img/glyphicons-halflings-sprite.png create mode 100644 lib/sidenav.less create mode 100644 lib/sprites.less diff --git a/bootstrap.css b/bootstrap.css index 8e2ce41f3b..ade32d9ba5 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 51e652bb95..65fd2649bc 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 c2c92a2519..b218b465c5 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 GIT binary patch literal 9944 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 + + +
+
+

Icons Graciously provided by Glyphicons

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + +
+
+
+ +
+ +
+
+

Built as a sprite

+

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 background-position. This is the same method we use on Twitter.com and it has worked well for us.

+

Glyphicons 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.

+
+
+

How to use

+

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

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

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

+
+
+

Use cases

+

Icons are great, but where would one use them? Here are a few ideas:

+
    +
  • As visuals for your sidebar navigation
    • +
  • For a purely icon-driven nav
    • +
  • For buttons to help convey the meaning of an action
    • +
  • With links to share context on a user's destination
    • +
+

Essentially, anywhere you can put an <i> tag, you can put an icon.

+
+
+
+ + +