Mercurial > wikked

comparison static/bootstrap/less/sprites.less @ 61:130eccd396d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents
children a5a3d454eac9
comparison
equal deleted inserted replaced
60:8250c977bc50 61:130eccd396d8
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/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:hover > [class*=" icon-"],
41 .dropdown-menu > .active > a > [class^="icon-"],
42 .dropdown-menu > .active > a > [class*=" icon-"],
43 .dropdown-submenu:hover > a > [class^="icon-"],
44 .dropdown-submenu:hover > a > [class*=" icon-"] {
45 background-image: url("@{iconWhiteSpritePath}");
46 }
47
48 .icon-glass { background-position: 0 0; }
49 .icon-music { background-position: -24px 0; }
50 .icon-search { background-position: -48px 0; }
51 .icon-envelope { background-position: -72px 0; }
52 .icon-heart { background-position: -96px 0; }
53 .icon-star { background-position: -120px 0; }
54 .icon-star-empty { background-position: -144px 0; }
55 .icon-user { background-position: -168px 0; }
56 .icon-film { background-position: -192px 0; }
57 .icon-th-large { background-position: -216px 0; }
58 .icon-th { background-position: -240px 0; }
59 .icon-th-list { background-position: -264px 0; }
60 .icon-ok { background-position: -288px 0; }
61 .icon-remove { background-position: -312px 0; }
62 .icon-zoom-in { background-position: -336px 0; }
63 .icon-zoom-out { background-position: -360px 0; }
64 .icon-off { background-position: -384px 0; }
65 .icon-signal { background-position: -408px 0; }
66 .icon-cog { background-position: -432px 0; }
67 .icon-trash { background-position: -456px 0; }
68
69 .icon-home { background-position: 0 -24px; }
70 .icon-file { background-position: -24px -24px; }
71 .icon-time { background-position: -48px -24px; }
72 .icon-road { background-position: -72px -24px; }
73 .icon-download-alt { background-position: -96px -24px; }
74 .icon-download { background-position: -120px -24px; }
75 .icon-upload { background-position: -144px -24px; }
76 .icon-inbox { background-position: -168px -24px; }
77 .icon-play-circle { background-position: -192px -24px; }
78 .icon-repeat { background-position: -216px -24px; }
79 .icon-refresh { background-position: -240px -24px; }
80 .icon-list-alt { background-position: -264px -24px; }
81 .icon-lock { background-position: -287px -24px; } // 1px off
82 .icon-flag { background-position: -312px -24px; }
83 .icon-headphones { background-position: -336px -24px; }
84 .icon-volume-off { background-position: -360px -24px; }
85 .icon-volume-down { background-position: -384px -24px; }
86 .icon-volume-up { background-position: -408px -24px; }
87 .icon-qrcode { background-position: -432px -24px; }
88 .icon-barcode { background-position: -456px -24px; }
89
90 .icon-tag { background-position: 0 -48px; }
91 .icon-tags { background-position: -25px -48px; } // 1px off
92 .icon-book { background-position: -48px -48px; }
93 .icon-bookmark { background-position: -72px -48px; }
94 .icon-print { background-position: -96px -48px; }
95 .icon-camera { background-position: -120px -48px; }
96 .icon-font { background-position: -144px -48px; }
97 .icon-bold { background-position: -167px -48px; } // 1px off
98 .icon-italic { background-position: -192px -48px; }
99 .icon-text-height { background-position: -216px -48px; }
100 .icon-text-width { background-position: -240px -48px; }
101 .icon-align-left { background-position: -264px -48px; }
102 .icon-align-center { background-position: -288px -48px; }
103 .icon-align-right { background-position: -312px -48px; }
104 .icon-align-justify { background-position: -336px -48px; }
105 .icon-list { background-position: -360px -48px; }
106 .icon-indent-left { background-position: -384px -48px; }
107 .icon-indent-right { background-position: -408px -48px; }
108 .icon-facetime-video { background-position: -432px -48px; }
109 .icon-picture { background-position: -456px -48px; }
110
111 .icon-pencil { background-position: 0 -72px; }
112 .icon-map-marker { background-position: -24px -72px; }
113 .icon-adjust { background-position: -48px -72px; }
114 .icon-tint { background-position: -72px -72px; }
115 .icon-edit { background-position: -96px -72px; }
116 .icon-share { background-position: -120px -72px; }
117 .icon-check { background-position: -144px -72px; }
118 .icon-move { background-position: -168px -72px; }
119 .icon-step-backward { background-position: -192px -72px; }
120 .icon-fast-backward { background-position: -216px -72px; }
121 .icon-backward { background-position: -240px -72px; }
122 .icon-play { background-position: -264px -72px; }
123 .icon-pause { background-position: -288px -72px; }
124 .icon-stop { background-position: -312px -72px; }
125 .icon-forward { background-position: -336px -72px; }
126 .icon-fast-forward { background-position: -360px -72px; }
127 .icon-step-forward { background-position: -384px -72px; }
128 .icon-eject { background-position: -408px -72px; }
129 .icon-chevron-left { background-position: -432px -72px; }
130 .icon-chevron-right { background-position: -456px -72px; }
131
132 .icon-plus-sign { background-position: 0 -96px; }
133 .icon-minus-sign { background-position: -24px -96px; }
134 .icon-remove-sign { background-position: -48px -96px; }
135 .icon-ok-sign { background-position: -72px -96px; }
136 .icon-question-sign { background-position: -96px -96px; }
137 .icon-info-sign { background-position: -120px -96px; }
138 .icon-screenshot { background-position: -144px -96px; }
139 .icon-remove-circle { background-position: -168px -96px; }
140 .icon-ok-circle { background-position: -192px -96px; }
141 .icon-ban-circle { background-position: -216px -96px; }
142 .icon-arrow-left { background-position: -240px -96px; }
143 .icon-arrow-right { background-position: -264px -96px; }
144 .icon-arrow-up { background-position: -289px -96px; } // 1px off
145 .icon-arrow-down { background-position: -312px -96px; }
146 .icon-share-alt { background-position: -336px -96px; }
147 .icon-resize-full { background-position: -360px -96px; }
148 .icon-resize-small { background-position: -384px -96px; }
149 .icon-plus { background-position: -408px -96px; }
150 .icon-minus { background-position: -433px -96px; }
151 .icon-asterisk { background-position: -456px -96px; }
152
153 .icon-exclamation-sign { background-position: 0 -120px; }
154 .icon-gift { background-position: -24px -120px; }
155 .icon-leaf { background-position: -48px -120px; }
156 .icon-fire { background-position: -72px -120px; }
157 .icon-eye-open { background-position: -96px -120px; }
158 .icon-eye-close { background-position: -120px -120px; }
159 .icon-warning-sign { background-position: -144px -120px; }
160 .icon-plane { background-position: -168px -120px; }
161 .icon-calendar { background-position: -192px -120px; }
162 .icon-random { background-position: -216px -120px; width: 16px; }
163 .icon-comment { background-position: -240px -120px; }
164 .icon-magnet { background-position: -264px -120px; }
165 .icon-chevron-up { background-position: -288px -120px; }
166 .icon-chevron-down { background-position: -313px -119px; } // 1px, 1px off
167 .icon-retweet { background-position: -336px -120px; }
168 .icon-shopping-cart { background-position: -360px -120px; }
169 .icon-folder-close { background-position: -384px -120px; }
170 .icon-folder-open { background-position: -408px -120px; width: 16px; }
171 .icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off
172 .icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off
173
174 .icon-hdd { background-position: 0 -144px; }
175 .icon-bullhorn { background-position: -24px -144px; }
176 .icon-bell { background-position: -48px -144px; }
177 .icon-certificate { background-position: -72px -144px; }
178 .icon-thumbs-up { background-position: -96px -144px; }
179 .icon-thumbs-down { background-position: -120px -144px; }
180 .icon-hand-right { background-position: -144px -144px; }
181 .icon-hand-left { background-position: -168px -144px; }
182 .icon-hand-up { background-position: -192px -144px; }
183 .icon-hand-down { background-position: -216px -144px; }
184 .icon-circle-arrow-right { background-position: -240px -144px; }
185 .icon-circle-arrow-left { background-position: -264px -144px; }
186 .icon-circle-arrow-up { background-position: -288px -144px; }
187 .icon-circle-arrow-down { background-position: -312px -144px; }
188 .icon-globe { background-position: -336px -144px; }
189 .icon-wrench { background-position: -360px -144px; }
190 .icon-tasks { background-position: -384px -144px; }
191 .icon-filter { background-position: -408px -144px; }
192 .icon-briefcase { background-position: -432px -144px; }
193 .icon-fullscreen { background-position: -456px -144px; }