libs/bootstrap/less/sprites.less

   1 //
   2 // Sprites
   3 // --------------------------------------------------
   4
   5
   6 // ICONS
   7 // -----
   8
   9 // All icons receive the styles of the <i> tag with a base class
  10 // of .i and are then given a unique class to add width, height,
  11 // and background-position. Your resulting HTML will look like
  12 // <i class="icon-inbox"></i>.
  13
  14 // For the white version of the icons, just add the .icon-white class:
  15 // <i class="icon-inbox icon-white"></i>
  16
  17 [class^="icon-"],
  18 [class*=" icon-"] {
  19   display: inline-block;
  20   width: 14px;
  21   height: 14px;
  22   .ie7-restore-right-whitespace();
  23   line-height: 14px;
  24   vertical-align: text-top;
  25   background-image: url("@{iconSpritePath}");
  26   background-position: 14px 14px;
  27   background-repeat: no-repeat;
  28   margin-top: 1px;
  29 }
  30
  31 /* White icons with optional class, or on hover/focus/active states of certain elements */
  32 .icon-white,
  33 .nav-pills > .active > a > [class^="icon-"],
  34 .nav-pills > .active > a > [class*=" icon-"],
  35 .nav-list > .active > a > [class^="icon-"],
  36 .nav-list > .active > a > [class*=" icon-"],
  37 .navbar-inverse .nav > .active > a > [class^="icon-"],
  38 .navbar-inverse .nav > .active > a > [class*=" icon-"],
  39 .dropdown-menu > li > a:hover > [class^="icon-"],
  40 .dropdown-menu > li > a:focus > [class^="icon-"],
  41 .dropdown-menu > li > a:hover > [class*=" icon-"],
  42 .dropdown-menu > li > a:focus > [class*=" icon-"],
  43 .dropdown-menu > .active > a > [class^="icon-"],
  44 .dropdown-menu > .active > a > [class*=" icon-"],
  45 .dropdown-submenu:hover > a > [class^="icon-"],
  46 .dropdown-submenu:focus > a > [class^="icon-"],
  47 .dropdown-submenu:hover > a > [class*=" icon-"],
  48 .dropdown-submenu:focus > a > [class*=" icon-"] {
  49   background-image: url("@{iconWhiteSpritePath}");
  50 }
  51
  52 .icon-glass              { background-position: 0      0; }
  53 .icon-music              { background-position: -24px  0; }
  54 .icon-search             { background-position: -48px  0; }
  55 .icon-envelope           { background-position: -72px  0; }
  56 .icon-heart              { background-position: -96px  0; }
  57 .icon-star               { background-position: -120px 0; }
  58 .icon-star-empty         { background-position: -144px 0; }
  59 .icon-user               { background-position: -168px 0; }
  60 .icon-film               { background-position: -192px 0; }
  61 .icon-th-large           { background-position: -216px 0; }
  62 .icon-th                 { background-position: -240px 0; }
  63 .icon-th-list            { background-position: -264px 0; }
  64 .icon-ok                 { background-position: -288px 0; }
  65 .icon-remove             { background-position: -312px 0; }
  66 .icon-zoom-in            { background-position: -336px 0; }
  67 .icon-zoom-out           { background-position: -360px 0; }
  68 .icon-off                { background-position: -384px 0; }
  69 .icon-signal             { background-position: -408px 0; }
  70 .icon-cog                { background-position: -432px 0; }
  71 .icon-trash              { background-position: -456px 0; }
  72
  73 .icon-home               { background-position: 0      -24px; }
  74 .icon-file               { background-position: -24px  -24px; }
  75 .icon-time               { background-position: -48px  -24px; }
  76 .icon-road               { background-position: -72px  -24px; }
  77 .icon-download-alt       { background-position: -96px  -24px; }
  78 .icon-download           { background-position: -120px -24px; }
  79 .icon-upload             { background-position: -144px -24px; }
  80 .icon-inbox              { background-position: -168px -24px; }
  81 .icon-play-circle        { background-position: -192px -24px; }
  82 .icon-repeat             { background-position: -216px -24px; }
  83 .icon-refresh            { background-position: -240px -24px; }
  84 .icon-list-alt           { background-position: -264px -24px; }
  85 .icon-lock               { background-position: -287px -24px; } // 1px off
  86 .icon-flag               { background-position: -312px -24px; }
  87 .icon-headphones         { background-position: -336px -24px; }
  88 .icon-volume-off         { background-position: -360px -24px; }
  89 .icon-volume-down        { background-position: -384px -24px; }
  90 .icon-volume-up          { background-position: -408px -24px; }
  91 .icon-qrcode             { background-position: -432px -24px; }
  92 .icon-barcode            { background-position: -456px -24px; }
  93
  94 .icon-tag                { background-position: 0      -48px; }
  95 .icon-tags               { background-position: -25px  -48px; } // 1px off
  96 .icon-book               { background-position: -48px  -48px; }
  97 .icon-bookmark           { background-position: -72px  -48px; }
  98 .icon-print              { background-position: -96px  -48px; }
  99 .icon-camera             { background-position: -120px -48px; }
 100 .icon-font               { background-position: -144px -48px; }
 101 .icon-bold               { background-position: -167px -48px; } // 1px off
 102 .icon-italic             { background-position: -192px -48px; }
 103 .icon-text-height        { background-position: -216px -48px; }
 104 .icon-text-width         { background-position: -240px -48px; }
 105 .icon-align-left         { background-position: -264px -48px; }
 106 .icon-align-center       { background-position: -288px -48px; }
 107 .icon-align-right        { background-position: -312px -48px; }
 108 .icon-align-justify      { background-position: -336px -48px; }
 109 .icon-list               { background-position: -360px -48px; }
 110 .icon-indent-left        { background-position: -384px -48px; }
 111 .icon-indent-right       { background-position: -408px -48px; }
 112 .icon-facetime-video     { background-position: -432px -48px; }
 113 .icon-picture            { background-position: -456px -48px; }
 114
 115 .icon-pencil             { background-position: 0      -72px; }
 116 .icon-map-marker         { background-position: -24px  -72px; }
 117 .icon-adjust             { background-position: -48px  -72px; }
 118 .icon-tint               { background-position: -72px  -72px; }
 119 .icon-edit               { background-position: -96px  -72px; }
 120 .icon-share              { background-position: -120px -72px; }
 121 .icon-check              { background-position: -144px -72px; }
 122 .icon-move               { background-position: -168px -72px; }
 123 .icon-step-backward      { background-position: -192px -72px; }
 124 .icon-fast-backward      { background-position: -216px -72px; }
 125 .icon-backward           { background-position: -240px -72px; }
 126 .icon-play               { background-position: -264px -72px; }
 127 .icon-pause              { background-position: -288px -72px; }
 128 .icon-stop               { background-position: -312px -72px; }
 129 .icon-forward            { background-position: -336px -72px; }
 130 .icon-fast-forward       { background-position: -360px -72px; }
 131 .icon-step-forward       { background-position: -384px -72px; }
 132 .icon-eject              { background-position: -408px -72px; }
 133 .icon-chevron-left       { background-position: -432px -72px; }
 134 .icon-chevron-right      { background-position: -456px -72px; }
 135
 136 .icon-plus-sign          { background-position: 0      -96px; }
 137 .icon-minus-sign         { background-position: -24px  -96px; }
 138 .icon-remove-sign        { background-position: -48px  -96px; }
 139 .icon-ok-sign            { background-position: -72px  -96px; }
 140 .icon-question-sign      { background-position: -96px  -96px; }
 141 .icon-info-sign          { background-position: -120px -96px; }
 142 .icon-screenshot         { background-position: -144px -96px; }
 143 .icon-remove-circle      { background-position: -168px -96px; }
 144 .icon-ok-circle          { background-position: -192px -96px; }
 145 .icon-ban-circle         { background-position: -216px -96px; }
 146 .icon-arrow-left         { background-position: -240px -96px; }
 147 .icon-arrow-right        { background-position: -264px -96px; }
 148 .icon-arrow-up           { background-position: -289px -96px; } // 1px off
 149 .icon-arrow-down         { background-position: -312px -96px; }
 150 .icon-share-alt          { background-position: -336px -96px; }
 151 .icon-resize-full        { background-position: -360px -96px; }
 152 .icon-resize-small       { background-position: -384px -96px; }
 153 .icon-plus               { background-position: -408px -96px; }
 154 .icon-minus              { background-position: -433px -96px; }
 155 .icon-asterisk           { background-position: -456px -96px; }
 156
 157 .icon-exclamation-sign   { background-position: 0      -120px; }
 158 .icon-gift               { background-position: -24px  -120px; }
 159 .icon-leaf               { background-position: -48px  -120px; }
 160 .icon-fire               { background-position: -72px  -120px; }
 161 .icon-eye-open           { background-position: -96px  -120px; }
 162 .icon-eye-close          { background-position: -120px -120px; }
 163 .icon-warning-sign       { background-position: -144px -120px; }
 164 .icon-plane              { background-position: -168px -120px; }
 165 .icon-calendar           { background-position: -192px -120px; }
 166 .icon-random             { background-position: -216px -120px; width: 16px; }
 167 .icon-comment            { background-position: -240px -120px; }
 168 .icon-magnet             { background-position: -264px -120px; }
 169 .icon-chevron-up         { background-position: -288px -120px; }
 170 .icon-chevron-down       { background-position: -313px -119px; } // 1px, 1px off
 171 .icon-retweet            { background-position: -336px -120px; }
 172 .icon-shopping-cart      { background-position: -360px -120px; }
 173 .icon-folder-close       { background-position: -384px -120px; width: 16px; }
 174 .icon-folder-open        { background-position: -408px -120px; width: 16px; }
 175 .icon-resize-vertical    { background-position: -432px -119px; } // 1px, 1px off
 176 .icon-resize-horizontal  { background-position: -456px -118px; } // 1px, 2px off
 177
 178 .icon-hdd                     { background-position: 0      -144px; }
 179 .icon-bullhorn                { background-position: -24px  -144px; }
 180 .icon-bell                    { background-position: -48px  -144px; }
 181 .icon-certificate             { background-position: -72px  -144px; }
 182 .icon-thumbs-up               { background-position: -96px  -144px; }
 183 .icon-thumbs-down             { background-position: -120px -144px; }
 184 .icon-hand-right              { background-position: -144px -144px; }
 185 .icon-hand-left               { background-position: -168px -144px; }
 186 .icon-hand-up                 { background-position: -192px -144px; }
 187 .icon-hand-down               { background-position: -216px -144px; }
 188 .icon-circle-arrow-right      { background-position: -240px -144px; }
 189 .icon-circle-arrow-left       { background-position: -264px -144px; }
 190 .icon-circle-arrow-up         { background-position: -288px -144px; }
 191 .icon-circle-arrow-down       { background-position: -312px -144px; }
 192 .icon-globe                   { background-position: -336px -144px; }
 193 .icon-wrench                  { background-position: -360px -144px; }
 194 .icon-tasks                   { background-position: -384px -144px; }
 195 .icon-filter                  { background-position: -408px -144px; }
 196 .icon-briefcase               { background-position: -432px -144px; }
 197 .icon-fullscreen              { background-position: -456px -144px; }