diff options
| -rw-r--r-- | bootstrap.css | 4 | ||||
| -rw-r--r-- | bootstrap.min.css | 2 | ||||
| -rw-r--r-- | docs/assets/css/docs.css | 8 | ||||
| -rw-r--r-- | docs/base-css.html | 208 | ||||
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 208 | ||||
| -rw-r--r-- | lib/sprites.less | 2 |
6 files changed, 218 insertions, 214 deletions
diff --git a/bootstrap.css b/bootstrap.css index 616e90bb1..ffdf19f2e 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: Wed Jan 25 08:34:06 PST 2012 + * Date: Wed Jan 25 09:50:58 PST 2012 */ article, aside, @@ -1088,7 +1088,7 @@ table .headerSortUp:after { -moz-opacity: 0.6; opacity: 0.6; } -i { +.icon { background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); background-position: 0 0; background-repeat: no-repeat; diff --git a/bootstrap.min.css b/bootstrap.min.css index 57d76d945..9be1c65d4 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -208,7 +208,7 @@ table .headerSortUp,table .headerSortDown{background-color:#f7f7f9;text-shadow:0 table .header:hover:after{visibility:visible;} table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} -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;} +.icon{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;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 12c534fb2..0fe480ecb 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -596,9 +596,14 @@ form.well { /* Icons ------------------------- */ +.the-icons { + margin-bottom: 18px; +} .the-icons i { display: block; margin-bottom: 5px; +} +.the-icons i:hover { background-color: rgba(255,0,0,.25); } .the-icons i:after { @@ -606,9 +611,8 @@ form.well { content: attr(class); font-style: normal; margin-left: 20px; - width: 100px; + width: 140px; } - #javascript input[type=checkbox] { position: relative; top: -1px; diff --git a/docs/base-css.html b/docs/base-css.html index 75c7efe5e..6b6bd5c51 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1284,119 +1284,119 @@ <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="span3"> <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> + <i class="icon glass"></i> + <i class="icon music"></i> + <i class="icon search"></i> + <i class="icon envelope"></i> + <i class="icon heart"></i> + <i class="icon star"></i> + <i class="icon star-empty"></i> + <i class="icon user"></i> + <i class="icon film"></i> + <i class="icon th-large"></i> + <i class="icon th"></i> + <i class="icon th-list"></i> + <i class="icon ok"></i> + <i class="icon remove"></i> + <i class="icon zoom-in"></i> + <i class="icon zoom-out"></i> + <i class="icon off"></i> + <i class="icon signal"></i> + <i class="icon cog"></i> + <i class="icon trash"></i> + + <i class="icon home"></i> + <i class="icon file"></i> + <i class="icon time"></i> </div> </div> - <div class="span2"> + <div class="span3"> <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> + <i class="icon road"></i> + <i class="icon download-alt"></i> + <i class="icon download"></i> + <i class="icon upload"></i> + <i class="icon inbox"></i> + <i class="icon play-circle"></i> + <i class="icon repeat"></i> + <i class="icon refresh"></i> + <i class="icon calendar"></i> + <i class="icon lock"></i> + <i class="icon flag"></i> + <i class="icon headphones"></i> + <i class="icon volume-off"></i> + <i class="icon volume-down"></i> + <i class="icon volume-up"></i> + <i class="icon qrcode"></i> + <i class="icon barcode"></i> + + <i class="icon tag"></i> + <i class="icon tags"></i> + <i class="icon book"></i> + <i class="icon bookmark"></i> + <i class="icon print"></i> + <i class="icon camera"></i> </div> </div> - <div class="span2"> + <div class="span3"> <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-forward"></i> - <i class="eject"></i> - <i class="chevron-left"></i> - <i class="chevron-right"></i> + <i class="icon font"></i> + <i class="icon bold"></i> + <i class="icon italic"></i> + <i class="icon text-height"></i> + <i class="icon text-width"></i> + <i class="icon align-left"></i> + <i class="icon align-center"></i> + <i class="icon align-right"></i> + <i class="icon align-justify"></i> + <i class="icon list"></i> + <i class="icon indent-left"></i> + <i class="icon indent-right"></i> + <i class="icon facetime-video"></i> + <i class="icon picture"></i> + + <i class="icon pencil"></i> + <i class="icon map-marker"></i> + <i class="icon adjust"></i> + <i class="icon tint"></i> + <i class="icon edit"></i> + <i class="icon share"></i> + <i class="icon check"></i> + <i class="icon move"></i> + <i class="icon step-backward"></i> </div> </div> - <div class="span2"> + <div class="span3"> <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-alt"></i> - <i class="resize-full"></i> - <i class="resize-small"></i> - <i class="plus"></i> - <i class="minus"></i> - <i class="asterisk"></i> + <i class="icon fast-backward"></i> + <i class="icon backward"></i> + <i class="icon play"></i> + <i class="icon pause"></i> + <i class="icon stop"></i> + <i class="icon forward"></i> + <i class="icon fast-forward"></i> + <i class="icon step-forward"></i> + <i class="icon eject"></i> + <i class="icon chevron-left"></i> + <i class="icon chevron-right"></i> + + <i class="icon arrow-left"></i> + <i class="icon arrow-right"></i> + <i class="icon arrow-up"></i> + <i class="icon arrow-down"></i> + <i class="icon share-alt"></i> + <i class="icon resize-full"></i> + <i class="icon resize-small"></i> + <i class="icon plus"></i> + <i class="icon minus"></i> + <i class="icon asterisk"></i> </div> </div> - <div class="span2"> - <p class="muted">Light red background color is only used to show the dimensions of the icons in the docs.</p> - </div> + </div> + <div class="alert alert-info"> + <strong>Heads up!</strong> On hover we show a light red background color to highlight the size of the icon. This won't appear in normal usage of icons. </div> <br> @@ -1409,11 +1409,11 @@ </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> + <p>With v2.0.0, we have opted to use an <code><i></code> tag for all our icons with a base class of <code>.icon</code>. To use, place the following code just about anywhere:</p> <pre class="prettyprint linenums"> -<i class="chevron-left"></i> +<i class="icon search"></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> + <p>There are over 100 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p> </div> <div class="span4"> <h3>Use cases</h3> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 630852259..32df36b0f 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1221,119 +1221,119 @@ <h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</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="span3"> <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> + <i class="icon glass"></i> + <i class="icon music"></i> + <i class="icon search"></i> + <i class="icon envelope"></i> + <i class="icon heart"></i> + <i class="icon star"></i> + <i class="icon star-empty"></i> + <i class="icon user"></i> + <i class="icon film"></i> + <i class="icon th-large"></i> + <i class="icon th"></i> + <i class="icon th-list"></i> + <i class="icon ok"></i> + <i class="icon remove"></i> + <i class="icon zoom-in"></i> + <i class="icon zoom-out"></i> + <i class="icon off"></i> + <i class="icon signal"></i> + <i class="icon cog"></i> + <i class="icon trash"></i> + + <i class="icon home"></i> + <i class="icon file"></i> + <i class="icon time"></i> </div> </div> - <div class="span2"> + <div class="span3"> <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> + <i class="icon road"></i> + <i class="icon download-alt"></i> + <i class="icon download"></i> + <i class="icon upload"></i> + <i class="icon inbox"></i> + <i class="icon play-circle"></i> + <i class="icon repeat"></i> + <i class="icon refresh"></i> + <i class="icon calendar"></i> + <i class="icon lock"></i> + <i class="icon flag"></i> + <i class="icon headphones"></i> + <i class="icon volume-off"></i> + <i class="icon volume-down"></i> + <i class="icon volume-up"></i> + <i class="icon qrcode"></i> + <i class="icon barcode"></i> + + <i class="icon tag"></i> + <i class="icon tags"></i> + <i class="icon book"></i> + <i class="icon bookmark"></i> + <i class="icon print"></i> + <i class="icon camera"></i> </div> </div> - <div class="span2"> + <div class="span3"> <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-forward"></i> - <i class="eject"></i> - <i class="chevron-left"></i> - <i class="chevron-right"></i> + <i class="icon font"></i> + <i class="icon bold"></i> + <i class="icon italic"></i> + <i class="icon text-height"></i> + <i class="icon text-width"></i> + <i class="icon align-left"></i> + <i class="icon align-center"></i> + <i class="icon align-right"></i> + <i class="icon align-justify"></i> + <i class="icon list"></i> + <i class="icon indent-left"></i> + <i class="icon indent-right"></i> + <i class="icon facetime-video"></i> + <i class="icon picture"></i> + + <i class="icon pencil"></i> + <i class="icon map-marker"></i> + <i class="icon adjust"></i> + <i class="icon tint"></i> + <i class="icon edit"></i> + <i class="icon share"></i> + <i class="icon check"></i> + <i class="icon move"></i> + <i class="icon step-backward"></i> </div> </div> - <div class="span2"> + <div class="span3"> <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-alt"></i> - <i class="resize-full"></i> - <i class="resize-small"></i> - <i class="plus"></i> - <i class="minus"></i> - <i class="asterisk"></i> + <i class="icon fast-backward"></i> + <i class="icon backward"></i> + <i class="icon play"></i> + <i class="icon pause"></i> + <i class="icon stop"></i> + <i class="icon forward"></i> + <i class="icon fast-forward"></i> + <i class="icon step-forward"></i> + <i class="icon eject"></i> + <i class="icon chevron-left"></i> + <i class="icon chevron-right"></i> + + <i class="icon arrow-left"></i> + <i class="icon arrow-right"></i> + <i class="icon arrow-up"></i> + <i class="icon arrow-down"></i> + <i class="icon share-alt"></i> + <i class="icon resize-full"></i> + <i class="icon resize-small"></i> + <i class="icon plus"></i> + <i class="icon minus"></i> + <i class="icon asterisk"></i> </div> </div> - <div class="span2"> - <p class="muted">{{_i}}Light red background color is only used to show the dimensions of the icons in the docs.{{/i}}</p> - </div> + </div> + <div class="alert alert-info"> + {{_i}}<strong>Heads up!</strong> On hover we show a light red background color to highlight the size of the icon. This won't appear in normal usage of icons.{{/i}} </div> <br> @@ -1346,11 +1346,11 @@ </div> <div class="span4"> <h3>{{_i}}How to use{{/i}}</h3> - <p>{{_i}}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:{{/i}}</p> + <p>{{_i}}With v2.0.0, we have opted to use an <code><i></code> tag for all our icons with a base class of <code>.icon</code>. To use, place the following code just about anywhere:{{/i}}</p> <pre class="prettyprint linenums"> -<i class="chevron-left"></i> +<i class="icon search"></i> </pre> - <p>{{_i}}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.{{/i}}</p> + <p>{{_i}}There are over 100 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p> </div> <div class="span4"> <h3>{{_i}}Use cases{{/i}}</h3> diff --git a/lib/sprites.less b/lib/sprites.less index 4a49bb8b4..0d51125c2 100644 --- a/lib/sprites.less +++ b/lib/sprites.less @@ -11,7 +11,7 @@ // class to add width, height, and background-position. Your resulting HTML // will look like <i class="inbox"></i>. -i { +.icon { background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); background-position: 0 0; background-repeat: no-repeat; |