vendor/assets/stylesheets/twitter/_sprites.scss in sass-twitter-bootstrap-2.0.1 vs vendor/assets/stylesheets/twitter/_sprites.scss in sass-twitter-bootstrap-2.1.1
- old
+ new
@@ -1,35 +1,49 @@
-// SPRITES
-// Glyphs and icons for buttons, nav, and more
-// -------------------------------------------
+//
+// Sprites
+// --------------------------------------------------
// ICONS
// -----
-// All icons receive the styles of the <i> tag with a base class
-// of .i and are then given a unique class to add width, height,
+// All icons receive the styles of the <i> tag with a base class
+// of .i and are then given a unique class to add width, height,
// and background-position. Your resulting HTML will look like
// <i class="icon-inbox"></i>.
-// For the white version of the icons, just add the .icon-white class:
+// For the white version of the icons, just add the .icon-white class:
// <i class="icon-inbox icon-white"></i>
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
+ @include ie7-restore-right-whitespace();
line-height: 14px;
vertical-align: text-top;
background-image: url($iconSpritePath);
background-position: 14px 14px;
background-repeat: no-repeat;
-
- @include ie7-restore-right-whitespace();
+ margin-top: 1px;
}
-.icon-white {
+
+/* White icons with optional class, or on hover/active states of certain elements */
+.icon-white,
+.nav-tabs > .active > a > [class^="icon-"],
+.nav-tabs > .active > a > [class*=" icon-"],
+.nav-pills > .active > a > [class^="icon-"],
+.nav-pills > .active > a > [class*=" icon-"],
+.nav-list > .active > a > [class^="icon-"],
+.nav-list > .active > a > [class*=" icon-"],
+.navbar-inverse .nav > .active > a > [class^="icon-"],
+.navbar-inverse .nav > .active > a > [class*=" icon-"],
+.dropdown-menu > li > a:hover > [class^="icon-"],
+.dropdown-menu > li > a:hover > [class*=" icon-"],
+.dropdown-menu > .active > a > [class^="icon-"],
+.dropdown-menu > .active > a > [class*=" icon-"] {
background-image: url($iconWhiteSpritePath);
}
.icon-glass { background-position: 0 0; }
.icon-music { background-position: -24px 0; }
@@ -143,16 +157,37 @@
.icon-eye-open { background-position: -96px -120px; }
.icon-eye-close { background-position: -120px -120px; }
.icon-warning-sign { background-position: -144px -120px; }
.icon-plane { background-position: -168px -120px; }
.icon-calendar { background-position: -192px -120px; }
-.icon-random { background-position: -216px -120px; }
+.icon-random { background-position: -216px -120px; width: 16px; }
.icon-comment { background-position: -240px -120px; }
.icon-magnet { background-position: -264px -120px; }
.icon-chevron-up { background-position: -288px -120px; }
-.icon-chevron-down { background-position: -313px -119px; } // 1px off
+.icon-chevron-down { background-position: -313px -119px; } // 1px, 1px off
.icon-retweet { background-position: -336px -120px; }
.icon-shopping-cart { background-position: -360px -120px; }
.icon-folder-close { background-position: -384px -120px; }
-.icon-folder-open { background-position: -408px -120px; }
-.icon-resize-vertical { background-position: -432px -119px; }
-.icon-resize-horizontal { background-position: -456px -118px; }
+.icon-folder-open { background-position: -408px -120px; width: 16px; }
+.icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off
+.icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off
+
+.icon-hdd { background-position: 0 -144px; }
+.icon-bullhorn { background-position: -24px -144px; }
+.icon-bell { background-position: -48px -144px; }
+.icon-certificate { background-position: -72px -144px; }
+.icon-thumbs-up { background-position: -96px -144px; }
+.icon-thumbs-down { background-position: -120px -144px; }
+.icon-hand-right { background-position: -144px -144px; }
+.icon-hand-left { background-position: -168px -144px; }
+.icon-hand-up { background-position: -192px -144px; }
+.icon-hand-down { background-position: -216px -144px; }
+.icon-circle-arrow-right { background-position: -240px -144px; }
+.icon-circle-arrow-left { background-position: -264px -144px; }
+.icon-circle-arrow-up { background-position: -288px -144px; }
+.icon-circle-arrow-down { background-position: -312px -144px; }
+.icon-globe { background-position: -336px -144px; }
+.icon-wrench { background-position: -360px -144px; }
+.icon-tasks { background-position: -384px -144px; }
+.icon-filter { background-position: -408px -144px; }
+.icon-briefcase { background-position: -432px -144px; }
+.icon-fullscreen { background-position: -456px -144px; }