root / astakos / im / static / im / grnetstyles / less / patterns.less @ 13858d75
History | View | Annotate | Download (20.8 kB)
1 | 13858d75 | Kostas Papadimitriou | /* Patterns.less |
---|---|---|---|
2 | 13858d75 | Kostas Papadimitriou | * Repeatable UI elements outside the base styles provided from the scaffolding |
3 | 13858d75 | Kostas Papadimitriou | * ---------------------------------------------------------------------------- */ |
4 | 13858d75 | Kostas Papadimitriou | |
5 | 13858d75 | Kostas Papadimitriou | |
6 | 13858d75 | Kostas Papadimitriou | // TOPBAR |
7 | 13858d75 | Kostas Papadimitriou | // ------ |
8 | 13858d75 | Kostas Papadimitriou | |
9 | 13858d75 | Kostas Papadimitriou | // Topbar for Branding and Nav |
10 | 13858d75 | Kostas Papadimitriou | .topbar { |
11 | 13858d75 | Kostas Papadimitriou | height: 40px; |
12 | 13858d75 | Kostas Papadimitriou | position: fixed; |
13 | 13858d75 | Kostas Papadimitriou | top: 0; |
14 | 13858d75 | Kostas Papadimitriou | left: 0; |
15 | 13858d75 | Kostas Papadimitriou | right: 0; |
16 | 13858d75 | Kostas Papadimitriou | z-index: 10000; |
17 | 13858d75 | Kostas Papadimitriou | overflow: visible; |
18 | 13858d75 | Kostas Papadimitriou | |
19 | 13858d75 | Kostas Papadimitriou | // Links get text shadow |
20 | 13858d75 | Kostas Papadimitriou | a { |
21 | 13858d75 | Kostas Papadimitriou | color: @grayLight; |
22 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 -1px 0 rgba(0,0,0,.25); |
23 | 13858d75 | Kostas Papadimitriou | } |
24 | 13858d75 | Kostas Papadimitriou | |
25 | 13858d75 | Kostas Papadimitriou | // Hover and active states |
26 | 13858d75 | Kostas Papadimitriou | // h3 for backwards compatibility |
27 | 13858d75 | Kostas Papadimitriou | h3 a:hover, |
28 | 13858d75 | Kostas Papadimitriou | .brand:hover, |
29 | 13858d75 | Kostas Papadimitriou | ul .active > a { |
30 | 13858d75 | Kostas Papadimitriou | background-color: #333; |
31 | 13858d75 | Kostas Papadimitriou | background-color: rgba(255,255,255,.05); |
32 | 13858d75 | Kostas Papadimitriou | color: @white; |
33 | 13858d75 | Kostas Papadimitriou | text-decoration: none; |
34 | 13858d75 | Kostas Papadimitriou | } |
35 | 13858d75 | Kostas Papadimitriou | |
36 | 13858d75 | Kostas Papadimitriou | // Website name |
37 | 13858d75 | Kostas Papadimitriou | // h3 left for backwards compatibility |
38 | 13858d75 | Kostas Papadimitriou | h3 { |
39 | 13858d75 | Kostas Papadimitriou | position: relative; |
40 | 13858d75 | Kostas Papadimitriou | } |
41 | 13858d75 | Kostas Papadimitriou | h3 a, |
42 | 13858d75 | Kostas Papadimitriou | .brand { |
43 | 13858d75 | Kostas Papadimitriou | float: left; |
44 | 13858d75 | Kostas Papadimitriou | display: block; |
45 | 13858d75 | Kostas Papadimitriou | padding: 8px 20px 12px; |
46 | 13858d75 | Kostas Papadimitriou | margin-left: -20px; // negative indent to left-align the text down the page |
47 | 13858d75 | Kostas Papadimitriou | color: @white; |
48 | 13858d75 | Kostas Papadimitriou | font-size: 20px; |
49 | 13858d75 | Kostas Papadimitriou | font-weight: 200; |
50 | 13858d75 | Kostas Papadimitriou | line-height: 1; |
51 | 13858d75 | Kostas Papadimitriou | } |
52 | 13858d75 | Kostas Papadimitriou | |
53 | 13858d75 | Kostas Papadimitriou | // Plain text in topbar |
54 | 13858d75 | Kostas Papadimitriou | p { |
55 | 13858d75 | Kostas Papadimitriou | margin: 0; |
56 | 13858d75 | Kostas Papadimitriou | line-height: 40px; |
57 | 13858d75 | Kostas Papadimitriou | a:hover { |
58 | 13858d75 | Kostas Papadimitriou | background-color: transparent; |
59 | 13858d75 | Kostas Papadimitriou | color: @white; |
60 | 13858d75 | Kostas Papadimitriou | } |
61 | 13858d75 | Kostas Papadimitriou | } |
62 | 13858d75 | Kostas Papadimitriou | |
63 | 13858d75 | Kostas Papadimitriou | // Search Form |
64 | 13858d75 | Kostas Papadimitriou | form { |
65 | 13858d75 | Kostas Papadimitriou | float: left; |
66 | 13858d75 | Kostas Papadimitriou | margin: 5px 0 0 0; |
67 | 13858d75 | Kostas Papadimitriou | position: relative; |
68 | 13858d75 | Kostas Papadimitriou | .opacity(100); |
69 | 13858d75 | Kostas Papadimitriou | } |
70 | 13858d75 | Kostas Papadimitriou | // Todo: remove from v2.0 when ready, added for legacy |
71 | 13858d75 | Kostas Papadimitriou | form.pull-right { |
72 | 13858d75 | Kostas Papadimitriou | float: right; |
73 | 13858d75 | Kostas Papadimitriou | } |
74 | 13858d75 | Kostas Papadimitriou | input { |
75 | 13858d75 | Kostas Papadimitriou | background-color: #444; |
76 | 13858d75 | Kostas Papadimitriou | background-color: rgba(255,255,255,.3); |
77 | 13858d75 | Kostas Papadimitriou | #font > .sans-serif(13px, normal, 1); |
78 | 13858d75 | Kostas Papadimitriou | padding: 4px 9px; |
79 | 13858d75 | Kostas Papadimitriou | color: @white; |
80 | 13858d75 | Kostas Papadimitriou | color: rgba(255,255,255,.75); |
81 | 13858d75 | Kostas Papadimitriou | border: 1px solid #111; |
82 | 13858d75 | Kostas Papadimitriou | .border-radius(4px); |
83 | 13858d75 | Kostas Papadimitriou | @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); |
84 | 13858d75 | Kostas Papadimitriou | .box-shadow(@shadow); |
85 | 13858d75 | Kostas Papadimitriou | .transition(none); |
86 | 13858d75 | Kostas Papadimitriou | |
87 | 13858d75 | Kostas Papadimitriou | // Placeholder text gets special styles; can't be bundled together though for some reason |
88 | 13858d75 | Kostas Papadimitriou | &:-moz-placeholder { |
89 | 13858d75 | Kostas Papadimitriou | color: @grayLighter; |
90 | 13858d75 | Kostas Papadimitriou | } |
91 | 13858d75 | Kostas Papadimitriou | &::-webkit-input-placeholder { |
92 | 13858d75 | Kostas Papadimitriou | color: @grayLighter; |
93 | 13858d75 | Kostas Papadimitriou | } |
94 | 13858d75 | Kostas Papadimitriou | // Hover states |
95 | 13858d75 | Kostas Papadimitriou | &:hover { |
96 | 13858d75 | Kostas Papadimitriou | background-color: @grayLight; |
97 | 13858d75 | Kostas Papadimitriou | background-color: rgba(255,255,255,.5); |
98 | 13858d75 | Kostas Papadimitriou | color: @white; |
99 | 13858d75 | Kostas Papadimitriou | } |
100 | 13858d75 | Kostas Papadimitriou | // Focus states (we use .focused since IE8 and down doesn't support :focus) |
101 | 13858d75 | Kostas Papadimitriou | &:focus, |
102 | 13858d75 | Kostas Papadimitriou | &.focused { |
103 | 13858d75 | Kostas Papadimitriou | outline: 0; |
104 | 13858d75 | Kostas Papadimitriou | background-color: @white; |
105 | 13858d75 | Kostas Papadimitriou | color: @grayDark; |
106 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 0 @white; |
107 | 13858d75 | Kostas Papadimitriou | border: 0; |
108 | 13858d75 | Kostas Papadimitriou | padding: 5px 10px; |
109 | 13858d75 | Kostas Papadimitriou | .box-shadow(0 0 3px rgba(0,0,0,.15)); |
110 | 13858d75 | Kostas Papadimitriou | } |
111 | 13858d75 | Kostas Papadimitriou | } |
112 | 13858d75 | Kostas Papadimitriou | } |
113 | 13858d75 | Kostas Papadimitriou | |
114 | 13858d75 | Kostas Papadimitriou | // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present |
115 | 13858d75 | Kostas Papadimitriou | // For backwards compatibility, include .topbar .fill |
116 | 13858d75 | Kostas Papadimitriou | .topbar-inner, |
117 | 13858d75 | Kostas Papadimitriou | .topbar .fill { |
118 | 13858d75 | Kostas Papadimitriou | background-color: #222; |
119 | 13858d75 | Kostas Papadimitriou | #gradient > .vertical(#333, #222); |
120 | 13858d75 | Kostas Papadimitriou | @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); |
121 | 13858d75 | Kostas Papadimitriou | .box-shadow(@shadow); |
122 | 13858d75 | Kostas Papadimitriou | } |
123 | 13858d75 | Kostas Papadimitriou | |
124 | 13858d75 | Kostas Papadimitriou | |
125 | 13858d75 | Kostas Papadimitriou | // NAVIGATION |
126 | 13858d75 | Kostas Papadimitriou | // ---------- |
127 | 13858d75 | Kostas Papadimitriou | |
128 | 13858d75 | Kostas Papadimitriou | // Topbar Nav |
129 | 13858d75 | Kostas Papadimitriou | // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity |
130 | 13858d75 | Kostas Papadimitriou | // For backwards compatibility, leave in .topbar div > ul |
131 | 13858d75 | Kostas Papadimitriou | .topbar div > ul, |
132 | 13858d75 | Kostas Papadimitriou | .nav { |
133 | 13858d75 | Kostas Papadimitriou | display: block; |
134 | 13858d75 | Kostas Papadimitriou | float: left; |
135 | 13858d75 | Kostas Papadimitriou | margin: 0 10px 0 0; |
136 | 13858d75 | Kostas Papadimitriou | position: relative; |
137 | 13858d75 | Kostas Papadimitriou | left: 0; |
138 | 13858d75 | Kostas Papadimitriou | > li { |
139 | 13858d75 | Kostas Papadimitriou | display: block; |
140 | 13858d75 | Kostas Papadimitriou | float: left; |
141 | 13858d75 | Kostas Papadimitriou | } |
142 | 13858d75 | Kostas Papadimitriou | a { |
143 | 13858d75 | Kostas Papadimitriou | display: block; |
144 | 13858d75 | Kostas Papadimitriou | float: none; |
145 | 13858d75 | Kostas Papadimitriou | padding: 10px 10px 11px; |
146 | 13858d75 | Kostas Papadimitriou | line-height: 19px; |
147 | 13858d75 | Kostas Papadimitriou | text-decoration: none; |
148 | 13858d75 | Kostas Papadimitriou | &:hover { |
149 | 13858d75 | Kostas Papadimitriou | color: @white; |
150 | 13858d75 | Kostas Papadimitriou | text-decoration: none; |
151 | 13858d75 | Kostas Papadimitriou | } |
152 | 13858d75 | Kostas Papadimitriou | } |
153 | 13858d75 | Kostas Papadimitriou | .active > a { |
154 | 13858d75 | Kostas Papadimitriou | background-color: #222; |
155 | 13858d75 | Kostas Papadimitriou | background-color: rgba(0,0,0,.5); |
156 | 13858d75 | Kostas Papadimitriou | } |
157 | 13858d75 | Kostas Papadimitriou | |
158 | 13858d75 | Kostas Papadimitriou | // Secondary (floated right) nav in topbar |
159 | 13858d75 | Kostas Papadimitriou | &.secondary-nav { |
160 | 13858d75 | Kostas Papadimitriou | float: right; |
161 | 13858d75 | Kostas Papadimitriou | margin-left: 10px; |
162 | 13858d75 | Kostas Papadimitriou | margin-right: 0; |
163 | 13858d75 | Kostas Papadimitriou | // backwards compatibility |
164 | 13858d75 | Kostas Papadimitriou | .menu-dropdown, |
165 | 13858d75 | Kostas Papadimitriou | .dropdown-menu { |
166 | 13858d75 | Kostas Papadimitriou | right: 0; |
167 | 13858d75 | Kostas Papadimitriou | border: 0; |
168 | 13858d75 | Kostas Papadimitriou | } |
169 | 13858d75 | Kostas Papadimitriou | } |
170 | 13858d75 | Kostas Papadimitriou | // Dropdowns within the .nav |
171 | 13858d75 | Kostas Papadimitriou | // a.menu:hover and li.open .menu for backwards compatibility |
172 | 13858d75 | Kostas Papadimitriou | a.menu:hover, |
173 | 13858d75 | Kostas Papadimitriou | li.open .menu, |
174 | 13858d75 | Kostas Papadimitriou | .dropdown-toggle:hover, |
175 | 13858d75 | Kostas Papadimitriou | .dropdown.open .dropdown-toggle { |
176 | 13858d75 | Kostas Papadimitriou | background: #444; |
177 | 13858d75 | Kostas Papadimitriou | background: rgba(255,255,255,.05); |
178 | 13858d75 | Kostas Papadimitriou | } |
179 | 13858d75 | Kostas Papadimitriou | // .menu-dropdown for backwards compatibility |
180 | 13858d75 | Kostas Papadimitriou | .menu-dropdown, |
181 | 13858d75 | Kostas Papadimitriou | .dropdown-menu { |
182 | 13858d75 | Kostas Papadimitriou | background-color: #333; |
183 | 13858d75 | Kostas Papadimitriou | // a.menu for backwards compatibility |
184 | 13858d75 | Kostas Papadimitriou | a.menu, |
185 | 13858d75 | Kostas Papadimitriou | .dropdown-toggle { |
186 | 13858d75 | Kostas Papadimitriou | color: @white; |
187 | 13858d75 | Kostas Papadimitriou | &.open { |
188 | 13858d75 | Kostas Papadimitriou | background: #444; |
189 | 13858d75 | Kostas Papadimitriou | background: rgba(255,255,255,.05); |
190 | 13858d75 | Kostas Papadimitriou | } |
191 | 13858d75 | Kostas Papadimitriou | } |
192 | 13858d75 | Kostas Papadimitriou | li a { |
193 | 13858d75 | Kostas Papadimitriou | color: #999; |
194 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 0 rgba(0,0,0,.5); |
195 | 13858d75 | Kostas Papadimitriou | &:hover { |
196 | 13858d75 | Kostas Papadimitriou | #gradient > .vertical(#292929,#191919); |
197 | 13858d75 | Kostas Papadimitriou | color: @white; |
198 | 13858d75 | Kostas Papadimitriou | } |
199 | 13858d75 | Kostas Papadimitriou | } |
200 | 13858d75 | Kostas Papadimitriou | .active a { |
201 | 13858d75 | Kostas Papadimitriou | color: @white; |
202 | 13858d75 | Kostas Papadimitriou | } |
203 | 13858d75 | Kostas Papadimitriou | .divider { |
204 | 13858d75 | Kostas Papadimitriou | background-color: #222; |
205 | 13858d75 | Kostas Papadimitriou | border-color: #444; |
206 | 13858d75 | Kostas Papadimitriou | } |
207 | 13858d75 | Kostas Papadimitriou | } |
208 | 13858d75 | Kostas Papadimitriou | } |
209 | 13858d75 | Kostas Papadimitriou | |
210 | 13858d75 | Kostas Papadimitriou | // For backwards compatibility with new dropdowns, redeclare dropdown link padding |
211 | 13858d75 | Kostas Papadimitriou | .topbar ul .menu-dropdown li a, |
212 | 13858d75 | Kostas Papadimitriou | .topbar ul .dropdown-menu li a { |
213 | 13858d75 | Kostas Papadimitriou | padding: 4px 15px; |
214 | 13858d75 | Kostas Papadimitriou | } |
215 | 13858d75 | Kostas Papadimitriou | |
216 | 13858d75 | Kostas Papadimitriou | // Dropdown Menus |
217 | 13858d75 | Kostas Papadimitriou | // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns |
218 | 13858d75 | Kostas Papadimitriou | // li.menu for backwards compatibility |
219 | 13858d75 | Kostas Papadimitriou | li.menu, |
220 | 13858d75 | Kostas Papadimitriou | .dropdown { |
221 | 13858d75 | Kostas Papadimitriou | position: relative; |
222 | 13858d75 | Kostas Papadimitriou | } |
223 | 13858d75 | Kostas Papadimitriou | // The link that is clicked to toggle the dropdown |
224 | 13858d75 | Kostas Papadimitriou | // a.menu for backwards compatibility |
225 | 13858d75 | Kostas Papadimitriou | a.menu:after, |
226 | 13858d75 | Kostas Papadimitriou | .dropdown-toggle:after { |
227 | 13858d75 | Kostas Papadimitriou | width: 0; |
228 | 13858d75 | Kostas Papadimitriou | height: 0; |
229 | 13858d75 | Kostas Papadimitriou | display: inline-block; |
230 | 13858d75 | Kostas Papadimitriou | content: "↓"; |
231 | 13858d75 | Kostas Papadimitriou | text-indent: -99999px; |
232 | 13858d75 | Kostas Papadimitriou | vertical-align: top; |
233 | 13858d75 | Kostas Papadimitriou | margin-top: 8px; |
234 | 13858d75 | Kostas Papadimitriou | margin-left: 4px; |
235 | 13858d75 | Kostas Papadimitriou | border-left: 4px solid transparent; |
236 | 13858d75 | Kostas Papadimitriou | border-right: 4px solid transparent; |
237 | 13858d75 | Kostas Papadimitriou | border-top: 4px solid @white; |
238 | 13858d75 | Kostas Papadimitriou | .opacity(50); |
239 | 13858d75 | Kostas Papadimitriou | } |
240 | 13858d75 | Kostas Papadimitriou | // The dropdown menu (ul) |
241 | 13858d75 | Kostas Papadimitriou | // .menu-dropdown for backwards compatibility |
242 | 13858d75 | Kostas Papadimitriou | .menu-dropdown, |
243 | 13858d75 | Kostas Papadimitriou | .dropdown-menu { |
244 | 13858d75 | Kostas Papadimitriou | background-color: @white; |
245 | 13858d75 | Kostas Papadimitriou | float: left; |
246 | 13858d75 | Kostas Papadimitriou | display: none; // None by default, but block on "open" of the menu |
247 | 13858d75 | Kostas Papadimitriou | position: absolute; |
248 | 13858d75 | Kostas Papadimitriou | top: 40px; |
249 | 13858d75 | Kostas Papadimitriou | z-index: 900; |
250 | 13858d75 | Kostas Papadimitriou | min-width: 160px; |
251 | 13858d75 | Kostas Papadimitriou | max-width: 220px; |
252 | 13858d75 | Kostas Papadimitriou | _width: 160px; |
253 | 13858d75 | Kostas Papadimitriou | margin-left: 0; // override default ul styles |
254 | 13858d75 | Kostas Papadimitriou | margin-right: 0; |
255 | 13858d75 | Kostas Papadimitriou | padding: 6px 0; |
256 | 13858d75 | Kostas Papadimitriou | zoom: 1; // do we need this? |
257 | 13858d75 | Kostas Papadimitriou | border-color: #999; |
258 | 13858d75 | Kostas Papadimitriou | border-color: rgba(0,0,0,.2); |
259 | 13858d75 | Kostas Papadimitriou | border-style: solid; |
260 | 13858d75 | Kostas Papadimitriou | border-width: 0 1px 1px; |
261 | 13858d75 | Kostas Papadimitriou | .border-radius(0 0 6px 6px); |
262 | 13858d75 | Kostas Papadimitriou | .box-shadow(0 2px 4px rgba(0,0,0,.2)); |
263 | 13858d75 | Kostas Papadimitriou | .background-clip(padding-box); |
264 | 13858d75 | Kostas Papadimitriou | |
265 | 13858d75 | Kostas Papadimitriou | // Unfloat any li's to make them stack |
266 | 13858d75 | Kostas Papadimitriou | li { |
267 | 13858d75 | Kostas Papadimitriou | float: none; |
268 | 13858d75 | Kostas Papadimitriou | display: block; |
269 | 13858d75 | Kostas Papadimitriou | background-color: none; |
270 | 13858d75 | Kostas Papadimitriou | } |
271 | 13858d75 | Kostas Papadimitriou | // Dividers (basically an hr) within the dropdown |
272 | 13858d75 | Kostas Papadimitriou | .divider { |
273 | 13858d75 | Kostas Papadimitriou | height: 1px; |
274 | 13858d75 | Kostas Papadimitriou | margin: 5px 0; |
275 | 13858d75 | Kostas Papadimitriou | overflow: hidden; |
276 | 13858d75 | Kostas Papadimitriou | background-color: #eee; |
277 | 13858d75 | Kostas Papadimitriou | border-bottom: 1px solid @white; |
278 | 13858d75 | Kostas Papadimitriou | } |
279 | 13858d75 | Kostas Papadimitriou | } |
280 | 13858d75 | Kostas Papadimitriou | |
281 | 13858d75 | Kostas Papadimitriou | .topbar .dropdown-menu, |
282 | 13858d75 | Kostas Papadimitriou | .dropdown-menu { |
283 | 13858d75 | Kostas Papadimitriou | // Links within the dropdown menu |
284 | 13858d75 | Kostas Papadimitriou | a { |
285 | 13858d75 | Kostas Papadimitriou | display: block; |
286 | 13858d75 | Kostas Papadimitriou | padding: 4px 15px; |
287 | 13858d75 | Kostas Papadimitriou | clear: both; |
288 | 13858d75 | Kostas Papadimitriou | font-weight: normal; |
289 | 13858d75 | Kostas Papadimitriou | line-height: 18px; |
290 | 13858d75 | Kostas Papadimitriou | color: @gray; |
291 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 0 @white; |
292 | 13858d75 | Kostas Papadimitriou | // Hover state |
293 | 13858d75 | Kostas Papadimitriou | &:hover, |
294 | 13858d75 | Kostas Papadimitriou | &.hover { |
295 | 13858d75 | Kostas Papadimitriou | #gradient > .vertical(#eeeeee, #dddddd); |
296 | 13858d75 | Kostas Papadimitriou | color: @grayDark; |
297 | 13858d75 | Kostas Papadimitriou | text-decoration: none; |
298 | 13858d75 | Kostas Papadimitriou | @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); |
299 | 13858d75 | Kostas Papadimitriou | .box-shadow(@shadow); |
300 | 13858d75 | Kostas Papadimitriou | } |
301 | 13858d75 | Kostas Papadimitriou | } |
302 | 13858d75 | Kostas Papadimitriou | } |
303 | 13858d75 | Kostas Papadimitriou | |
304 | 13858d75 | Kostas Papadimitriou | // Open state for the dropdown |
305 | 13858d75 | Kostas Papadimitriou | // .open for backwards compatibility |
306 | 13858d75 | Kostas Papadimitriou | .open, |
307 | 13858d75 | Kostas Papadimitriou | .dropdown.open { |
308 | 13858d75 | Kostas Papadimitriou | // .menu for backwards compatibility |
309 | 13858d75 | Kostas Papadimitriou | .menu, |
310 | 13858d75 | Kostas Papadimitriou | .dropdown-toggle { |
311 | 13858d75 | Kostas Papadimitriou | color: @white; |
312 | 13858d75 | Kostas Papadimitriou | background: #ccc; |
313 | 13858d75 | Kostas Papadimitriou | background: rgba(0,0,0,.3); |
314 | 13858d75 | Kostas Papadimitriou | } |
315 | 13858d75 | Kostas Papadimitriou | // .menu-dropdown for backwards compatibility |
316 | 13858d75 | Kostas Papadimitriou | .menu-dropdown, |
317 | 13858d75 | Kostas Papadimitriou | .dropdown-menu { |
318 | 13858d75 | Kostas Papadimitriou | display: block; |
319 | 13858d75 | Kostas Papadimitriou | } |
320 | 13858d75 | Kostas Papadimitriou | } |
321 | 13858d75 | Kostas Papadimitriou | |
322 | 13858d75 | Kostas Papadimitriou | |
323 | 13858d75 | Kostas Papadimitriou | // TABS AND PILLS |
324 | 13858d75 | Kostas Papadimitriou | // -------------- |
325 | 13858d75 | Kostas Papadimitriou | |
326 | 13858d75 | Kostas Papadimitriou | // Common styles |
327 | 13858d75 | Kostas Papadimitriou | .tabs, |
328 | 13858d75 | Kostas Papadimitriou | .pills { |
329 | 13858d75 | Kostas Papadimitriou | margin: 0 0 @baseline; |
330 | 13858d75 | Kostas Papadimitriou | padding: 0; |
331 | 13858d75 | Kostas Papadimitriou | list-style: none; |
332 | 13858d75 | Kostas Papadimitriou | .clearfix(); |
333 | 13858d75 | Kostas Papadimitriou | > li { |
334 | 13858d75 | Kostas Papadimitriou | float: left; |
335 | 13858d75 | Kostas Papadimitriou | > a { |
336 | 13858d75 | Kostas Papadimitriou | display: block; |
337 | 13858d75 | Kostas Papadimitriou | } |
338 | 13858d75 | Kostas Papadimitriou | } |
339 | 13858d75 | Kostas Papadimitriou | } |
340 | 13858d75 | Kostas Papadimitriou | |
341 | 13858d75 | Kostas Papadimitriou | // Tabs |
342 | 13858d75 | Kostas Papadimitriou | .tabs { |
343 | 13858d75 | Kostas Papadimitriou | border-color: #ddd; |
344 | 13858d75 | Kostas Papadimitriou | border-style: solid; |
345 | 13858d75 | Kostas Papadimitriou | border-width: 0 0 1px; |
346 | 13858d75 | Kostas Papadimitriou | > li { |
347 | 13858d75 | Kostas Papadimitriou | position: relative; // For the dropdowns mostly |
348 | 13858d75 | Kostas Papadimitriou | margin-bottom: -1px; |
349 | 13858d75 | Kostas Papadimitriou | > a { |
350 | 13858d75 | Kostas Papadimitriou | padding: 0 15px; |
351 | 13858d75 | Kostas Papadimitriou | margin-right: 2px; |
352 | 13858d75 | Kostas Papadimitriou | line-height: (@baseline * 2) - 2; |
353 | 13858d75 | Kostas Papadimitriou | border: 1px solid transparent; |
354 | 13858d75 | Kostas Papadimitriou | .border-radius(4px 4px 0 0); |
355 | 13858d75 | Kostas Papadimitriou | &:hover { |
356 | 13858d75 | Kostas Papadimitriou | text-decoration: none; |
357 | 13858d75 | Kostas Papadimitriou | background-color: #eee; |
358 | 13858d75 | Kostas Papadimitriou | border-color: #eee #eee #ddd; |
359 | 13858d75 | Kostas Papadimitriou | } |
360 | 13858d75 | Kostas Papadimitriou | } |
361 | 13858d75 | Kostas Papadimitriou | } |
362 | 13858d75 | Kostas Papadimitriou | // Active state, and it's :hover to override normal :hover |
363 | 13858d75 | Kostas Papadimitriou | .active > a, |
364 | 13858d75 | Kostas Papadimitriou | .active > a:hover { |
365 | 13858d75 | Kostas Papadimitriou | color: @gray; |
366 | 13858d75 | Kostas Papadimitriou | background-color: @white; |
367 | 13858d75 | Kostas Papadimitriou | border: 1px solid #ddd; |
368 | 13858d75 | Kostas Papadimitriou | border-bottom-color: transparent; |
369 | 13858d75 | Kostas Papadimitriou | cursor: default; |
370 | 13858d75 | Kostas Papadimitriou | } |
371 | 13858d75 | Kostas Papadimitriou | } |
372 | 13858d75 | Kostas Papadimitriou | |
373 | 13858d75 | Kostas Papadimitriou | // Dropdowns in tabs |
374 | 13858d75 | Kostas Papadimitriou | .tabs { |
375 | 13858d75 | Kostas Papadimitriou | // first one for backwards compatibility |
376 | 13858d75 | Kostas Papadimitriou | .menu-dropdown, |
377 | 13858d75 | Kostas Papadimitriou | .dropdown-menu { |
378 | 13858d75 | Kostas Papadimitriou | top: 35px; |
379 | 13858d75 | Kostas Papadimitriou | border-width: 1px; |
380 | 13858d75 | Kostas Papadimitriou | .border-radius(0 6px 6px 6px); |
381 | 13858d75 | Kostas Papadimitriou | } |
382 | 13858d75 | Kostas Papadimitriou | // first one for backwards compatibility |
383 | 13858d75 | Kostas Papadimitriou | a.menu:after, |
384 | 13858d75 | Kostas Papadimitriou | .dropdown-toggle:after { |
385 | 13858d75 | Kostas Papadimitriou | border-top-color: #999; |
386 | 13858d75 | Kostas Papadimitriou | margin-top: 15px; |
387 | 13858d75 | Kostas Papadimitriou | margin-left: 5px; |
388 | 13858d75 | Kostas Papadimitriou | } |
389 | 13858d75 | Kostas Papadimitriou | // first one for backwards compatibility |
390 | 13858d75 | Kostas Papadimitriou | li.open.menu .menu, |
391 | 13858d75 | Kostas Papadimitriou | .open.dropdown .dropdown-toggle { |
392 | 13858d75 | Kostas Papadimitriou | border-color: #999; |
393 | 13858d75 | Kostas Papadimitriou | } |
394 | 13858d75 | Kostas Papadimitriou | // first one for backwards compatibility |
395 | 13858d75 | Kostas Papadimitriou | li.open a.menu:after, |
396 | 13858d75 | Kostas Papadimitriou | .dropdown.open .dropdown-toggle:after { |
397 | 13858d75 | Kostas Papadimitriou | border-top-color: #555; |
398 | 13858d75 | Kostas Papadimitriou | } |
399 | 13858d75 | Kostas Papadimitriou | } |
400 | 13858d75 | Kostas Papadimitriou | |
401 | 13858d75 | Kostas Papadimitriou | // Pills |
402 | 13858d75 | Kostas Papadimitriou | .pills { |
403 | 13858d75 | Kostas Papadimitriou | a { |
404 | 13858d75 | Kostas Papadimitriou | margin: 5px 3px 5px 0; |
405 | 13858d75 | Kostas Papadimitriou | padding: 0 15px; |
406 | 13858d75 | Kostas Papadimitriou | line-height: 30px; |
407 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 1px @white; |
408 | 13858d75 | Kostas Papadimitriou | .border-radius(15px); |
409 | 13858d75 | Kostas Papadimitriou | &:hover { |
410 | 13858d75 | Kostas Papadimitriou | color: @white; |
411 | 13858d75 | Kostas Papadimitriou | text-decoration: none; |
412 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 1px rgba(0,0,0,.25); |
413 | 13858d75 | Kostas Papadimitriou | background-color: @linkColorHover; |
414 | 13858d75 | Kostas Papadimitriou | } |
415 | 13858d75 | Kostas Papadimitriou | } |
416 | 13858d75 | Kostas Papadimitriou | .active a { |
417 | 13858d75 | Kostas Papadimitriou | color: @white; |
418 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 1px rgba(0,0,0,.25); |
419 | 13858d75 | Kostas Papadimitriou | background-color: @linkColor; |
420 | 13858d75 | Kostas Papadimitriou | } |
421 | 13858d75 | Kostas Papadimitriou | } |
422 | 13858d75 | Kostas Papadimitriou | |
423 | 13858d75 | Kostas Papadimitriou | // Stacked pills |
424 | 13858d75 | Kostas Papadimitriou | .pills-vertical > li { |
425 | 13858d75 | Kostas Papadimitriou | float: none; |
426 | 13858d75 | Kostas Papadimitriou | } |
427 | 13858d75 | Kostas Papadimitriou | |
428 | 13858d75 | Kostas Papadimitriou | // Tabbable areas |
429 | 13858d75 | Kostas Papadimitriou | .tab-content, |
430 | 13858d75 | Kostas Papadimitriou | .pill-content { |
431 | 13858d75 | Kostas Papadimitriou | } |
432 | 13858d75 | Kostas Papadimitriou | .tab-content > .tab-pane, |
433 | 13858d75 | Kostas Papadimitriou | .pill-content > .pill-pane, |
434 | 13858d75 | Kostas Papadimitriou | .tab-content > div, |
435 | 13858d75 | Kostas Papadimitriou | .pill-content > div { |
436 | 13858d75 | Kostas Papadimitriou | display: none; |
437 | 13858d75 | Kostas Papadimitriou | } |
438 | 13858d75 | Kostas Papadimitriou | .tab-content > .active, |
439 | 13858d75 | Kostas Papadimitriou | .pill-content > .active { |
440 | 13858d75 | Kostas Papadimitriou | display: block; |
441 | 13858d75 | Kostas Papadimitriou | } |
442 | 13858d75 | Kostas Papadimitriou | |
443 | 13858d75 | Kostas Papadimitriou | |
444 | 13858d75 | Kostas Papadimitriou | // BREADCRUMBS |
445 | 13858d75 | Kostas Papadimitriou | // ----------- |
446 | 13858d75 | Kostas Papadimitriou | |
447 | 13858d75 | Kostas Papadimitriou | .breadcrumb { |
448 | 13858d75 | Kostas Papadimitriou | padding: 7px 14px; |
449 | 13858d75 | Kostas Papadimitriou | margin: 0 0 @baseline; |
450 | 13858d75 | Kostas Papadimitriou | #gradient > .vertical(#ffffff, #f5f5f5); |
451 | 13858d75 | Kostas Papadimitriou | border: 1px solid #ddd; |
452 | 13858d75 | Kostas Papadimitriou | .border-radius(3px); |
453 | 13858d75 | Kostas Papadimitriou | .box-shadow(inset 0 1px 0 @white); |
454 | 13858d75 | Kostas Papadimitriou | li { |
455 | 13858d75 | Kostas Papadimitriou | display: inline; |
456 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 0 @white; |
457 | 13858d75 | Kostas Papadimitriou | } |
458 | 13858d75 | Kostas Papadimitriou | .divider { |
459 | 13858d75 | Kostas Papadimitriou | padding: 0 5px; |
460 | 13858d75 | Kostas Papadimitriou | color: @grayLight; |
461 | 13858d75 | Kostas Papadimitriou | } |
462 | 13858d75 | Kostas Papadimitriou | .active a { |
463 | 13858d75 | Kostas Papadimitriou | color: @grayDark; |
464 | 13858d75 | Kostas Papadimitriou | } |
465 | 13858d75 | Kostas Papadimitriou | } |
466 | 13858d75 | Kostas Papadimitriou | |
467 | 13858d75 | Kostas Papadimitriou | |
468 | 13858d75 | Kostas Papadimitriou | // PAGE HEADERS |
469 | 13858d75 | Kostas Papadimitriou | // ------------ |
470 | 13858d75 | Kostas Papadimitriou | |
471 | 13858d75 | Kostas Papadimitriou | .hero-unit { |
472 | 13858d75 | Kostas Papadimitriou | background-color: #f5f5f5; |
473 | 13858d75 | Kostas Papadimitriou | margin-bottom: 30px; |
474 | 13858d75 | Kostas Papadimitriou | padding: 60px; |
475 | 13858d75 | Kostas Papadimitriou | .border-radius(6px); |
476 | 13858d75 | Kostas Papadimitriou | h1 { |
477 | 13858d75 | Kostas Papadimitriou | margin-bottom: 0; |
478 | 13858d75 | Kostas Papadimitriou | font-size: 60px; |
479 | 13858d75 | Kostas Papadimitriou | line-height: 1; |
480 | 13858d75 | Kostas Papadimitriou | letter-spacing: -1px; |
481 | 13858d75 | Kostas Papadimitriou | } |
482 | 13858d75 | Kostas Papadimitriou | p { |
483 | 13858d75 | Kostas Papadimitriou | font-size: 18px; |
484 | 13858d75 | Kostas Papadimitriou | font-weight: 200; |
485 | 13858d75 | Kostas Papadimitriou | line-height: @baseline * 1.5; |
486 | 13858d75 | Kostas Papadimitriou | } |
487 | 13858d75 | Kostas Papadimitriou | } |
488 | 13858d75 | Kostas Papadimitriou | footer { |
489 | 13858d75 | Kostas Papadimitriou | margin-top: @baseline - 1; |
490 | 13858d75 | Kostas Papadimitriou | padding-top: @baseline - 1; |
491 | 13858d75 | Kostas Papadimitriou | border-top: 1px solid #eee; |
492 | 13858d75 | Kostas Papadimitriou | } |
493 | 13858d75 | Kostas Papadimitriou | |
494 | 13858d75 | Kostas Papadimitriou | |
495 | 13858d75 | Kostas Papadimitriou | // PAGE HEADERS |
496 | 13858d75 | Kostas Papadimitriou | // ------------ |
497 | 13858d75 | Kostas Papadimitriou | |
498 | 13858d75 | Kostas Papadimitriou | .page-header { |
499 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline - 1; |
500 | 13858d75 | Kostas Papadimitriou | border-bottom: 1px solid #ddd; |
501 | 13858d75 | Kostas Papadimitriou | .box-shadow(0 1px 0 rgba(255,255,255,.5)); |
502 | 13858d75 | Kostas Papadimitriou | h1 { |
503 | 13858d75 | Kostas Papadimitriou | margin-bottom: (@baseline / 2) - 1px; |
504 | 13858d75 | Kostas Papadimitriou | } |
505 | 13858d75 | Kostas Papadimitriou | } |
506 | 13858d75 | Kostas Papadimitriou | |
507 | 13858d75 | Kostas Papadimitriou | |
508 | 13858d75 | Kostas Papadimitriou | // BUTTON STYLES |
509 | 13858d75 | Kostas Papadimitriou | // ------------- |
510 | 13858d75 | Kostas Papadimitriou | |
511 | 13858d75 | Kostas Papadimitriou | // Shared colors for buttons and alerts |
512 | 13858d75 | Kostas Papadimitriou | .btn, |
513 | 13858d75 | Kostas Papadimitriou | .alert-message { |
514 | 13858d75 | Kostas Papadimitriou | // Set text color |
515 | 13858d75 | Kostas Papadimitriou | &.danger, |
516 | 13858d75 | Kostas Papadimitriou | &.danger:hover, |
517 | 13858d75 | Kostas Papadimitriou | &.error, |
518 | 13858d75 | Kostas Papadimitriou | &.error:hover, |
519 | 13858d75 | Kostas Papadimitriou | &.success, |
520 | 13858d75 | Kostas Papadimitriou | &.success:hover, |
521 | 13858d75 | Kostas Papadimitriou | &.info, |
522 | 13858d75 | Kostas Papadimitriou | &.info:hover { |
523 | 13858d75 | Kostas Papadimitriou | color: @white |
524 | 13858d75 | Kostas Papadimitriou | } |
525 | 13858d75 | Kostas Papadimitriou | // Sets the close button to the middle of message |
526 | 13858d75 | Kostas Papadimitriou | .close{ |
527 | 13858d75 | Kostas Papadimitriou | font-family: Arial, sans-serif; |
528 | 13858d75 | Kostas Papadimitriou | line-height: 18px; |
529 | 13858d75 | Kostas Papadimitriou | } |
530 | 13858d75 | Kostas Papadimitriou | // Danger and error appear as red |
531 | 13858d75 | Kostas Papadimitriou | &.danger, |
532 | 13858d75 | Kostas Papadimitriou | &.error { |
533 | 13858d75 | Kostas Papadimitriou | .gradientBar(#ee5f5b, #c43c35); |
534 | 13858d75 | Kostas Papadimitriou | } |
535 | 13858d75 | Kostas Papadimitriou | // Success appears as green |
536 | 13858d75 | Kostas Papadimitriou | &.success { |
537 | 13858d75 | Kostas Papadimitriou | .gradientBar(#62c462, #57a957); |
538 | 13858d75 | Kostas Papadimitriou | } |
539 | 13858d75 | Kostas Papadimitriou | // Info appears as a neutral blue |
540 | 13858d75 | Kostas Papadimitriou | &.info { |
541 | 13858d75 | Kostas Papadimitriou | .gradientBar(#5bc0de, #339bb9); |
542 | 13858d75 | Kostas Papadimitriou | } |
543 | 13858d75 | Kostas Papadimitriou | } |
544 | 13858d75 | Kostas Papadimitriou | |
545 | 13858d75 | Kostas Papadimitriou | // Base .btn styles |
546 | 13858d75 | Kostas Papadimitriou | .btn { |
547 | 13858d75 | Kostas Papadimitriou | // Button Base |
548 | 13858d75 | Kostas Papadimitriou | cursor: pointer; |
549 | 13858d75 | Kostas Papadimitriou | display: inline-block; |
550 | 13858d75 | Kostas Papadimitriou | #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient |
551 | 13858d75 | Kostas Papadimitriou | padding: 5px 14px 6px; |
552 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 1px rgba(255,255,255,.75); |
553 | 13858d75 | Kostas Papadimitriou | color: #333; |
554 | 13858d75 | Kostas Papadimitriou | font-size: @basefont; |
555 | 13858d75 | Kostas Papadimitriou | line-height: normal; |
556 | 13858d75 | Kostas Papadimitriou | border: 1px solid #ccc; |
557 | 13858d75 | Kostas Papadimitriou | border-bottom-color: #bbb; |
558 | 13858d75 | Kostas Papadimitriou | .border-radius(4px); |
559 | 13858d75 | Kostas Papadimitriou | @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); |
560 | 13858d75 | Kostas Papadimitriou | .box-shadow(@shadow); |
561 | 13858d75 | Kostas Papadimitriou | |
562 | 13858d75 | Kostas Papadimitriou | &:hover { |
563 | 13858d75 | Kostas Papadimitriou | background-position: 0 -15px; |
564 | 13858d75 | Kostas Papadimitriou | color: #333; |
565 | 13858d75 | Kostas Papadimitriou | text-decoration: none; |
566 | 13858d75 | Kostas Papadimitriou | } |
567 | 13858d75 | Kostas Papadimitriou | |
568 | 13858d75 | Kostas Papadimitriou | // Focus state for keyboard and accessibility |
569 | 13858d75 | Kostas Papadimitriou | &:focus { |
570 | 13858d75 | Kostas Papadimitriou | outline: 1px dotted #666; |
571 | 13858d75 | Kostas Papadimitriou | } |
572 | 13858d75 | Kostas Papadimitriou | |
573 | 13858d75 | Kostas Papadimitriou | // Primary Button Type |
574 | 13858d75 | Kostas Papadimitriou | &.primary { |
575 | 13858d75 | Kostas Papadimitriou | color: @white; |
576 | 13858d75 | Kostas Papadimitriou | .gradientBar(@blue, @blueDark) |
577 | 13858d75 | Kostas Papadimitriou | } |
578 | 13858d75 | Kostas Papadimitriou | |
579 | 13858d75 | Kostas Papadimitriou | // Transitions |
580 | 13858d75 | Kostas Papadimitriou | .transition(.1s linear all); |
581 | 13858d75 | Kostas Papadimitriou | |
582 | 13858d75 | Kostas Papadimitriou | // Active and Disabled states |
583 | 13858d75 | Kostas Papadimitriou | &.active, |
584 | 13858d75 | Kostas Papadimitriou | &:active { |
585 | 13858d75 | Kostas Papadimitriou | @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); |
586 | 13858d75 | Kostas Papadimitriou | .box-shadow(@shadow); |
587 | 13858d75 | Kostas Papadimitriou | } |
588 | 13858d75 | Kostas Papadimitriou | &.disabled { |
589 | 13858d75 | Kostas Papadimitriou | cursor: default; |
590 | 13858d75 | Kostas Papadimitriou | background-image: none; |
591 | 13858d75 | Kostas Papadimitriou | .reset-filter(); |
592 | 13858d75 | Kostas Papadimitriou | .opacity(65); |
593 | 13858d75 | Kostas Papadimitriou | .box-shadow(none); |
594 | 13858d75 | Kostas Papadimitriou | } |
595 | 13858d75 | Kostas Papadimitriou | &[disabled] { |
596 | 13858d75 | Kostas Papadimitriou | // disabled pseudo can't be included with .disabled |
597 | 13858d75 | Kostas Papadimitriou | // def because IE8 and below will drop it ;_; |
598 | 13858d75 | Kostas Papadimitriou | cursor: default; |
599 | 13858d75 | Kostas Papadimitriou | background-image: none; |
600 | 13858d75 | Kostas Papadimitriou | .reset-filter(); |
601 | 13858d75 | Kostas Papadimitriou | .opacity(65); |
602 | 13858d75 | Kostas Papadimitriou | .box-shadow(none); |
603 | 13858d75 | Kostas Papadimitriou | } |
604 | 13858d75 | Kostas Papadimitriou | |
605 | 13858d75 | Kostas Papadimitriou | // Button Sizes |
606 | 13858d75 | Kostas Papadimitriou | &.large { |
607 | 13858d75 | Kostas Papadimitriou | font-size: @basefont + 2px; |
608 | 13858d75 | Kostas Papadimitriou | line-height: normal; |
609 | 13858d75 | Kostas Papadimitriou | padding: 9px 14px 9px; |
610 | 13858d75 | Kostas Papadimitriou | .border-radius(6px); |
611 | 13858d75 | Kostas Papadimitriou | } |
612 | 13858d75 | Kostas Papadimitriou | &.small { |
613 | 13858d75 | Kostas Papadimitriou | padding: 7px 9px 7px; |
614 | 13858d75 | Kostas Papadimitriou | font-size: @basefont - 2px; |
615 | 13858d75 | Kostas Papadimitriou | } |
616 | 13858d75 | Kostas Papadimitriou | } |
617 | 13858d75 | Kostas Papadimitriou | // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons |
618 | 13858d75 | Kostas Papadimitriou | :root .alert-message, |
619 | 13858d75 | Kostas Papadimitriou | :root .btn { |
620 | 13858d75 | Kostas Papadimitriou | border-radius: 0 \0; |
621 | 13858d75 | Kostas Papadimitriou | } |
622 | 13858d75 | Kostas Papadimitriou | |
623 | 13858d75 | Kostas Papadimitriou | // Help Firefox not be a jerk about adding extra padding to buttons |
624 | 13858d75 | Kostas Papadimitriou | button.btn, |
625 | 13858d75 | Kostas Papadimitriou | input[type=submit].btn { |
626 | 13858d75 | Kostas Papadimitriou | &::-moz-focus-inner { |
627 | 13858d75 | Kostas Papadimitriou | padding: 0; |
628 | 13858d75 | Kostas Papadimitriou | border: 0; |
629 | 13858d75 | Kostas Papadimitriou | } |
630 | 13858d75 | Kostas Papadimitriou | } |
631 | 13858d75 | Kostas Papadimitriou | |
632 | 13858d75 | Kostas Papadimitriou | |
633 | 13858d75 | Kostas Papadimitriou | // CLOSE ICONS |
634 | 13858d75 | Kostas Papadimitriou | // ----------- |
635 | 13858d75 | Kostas Papadimitriou | .close { |
636 | 13858d75 | Kostas Papadimitriou | float: right; |
637 | 13858d75 | Kostas Papadimitriou | color: @black; |
638 | 13858d75 | Kostas Papadimitriou | font-size: 20px; |
639 | 13858d75 | Kostas Papadimitriou | font-weight: bold; |
640 | 13858d75 | Kostas Papadimitriou | line-height: @baseline * .75; |
641 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 0 rgba(255,255,255,1); |
642 | 13858d75 | Kostas Papadimitriou | .opacity(25); |
643 | 13858d75 | Kostas Papadimitriou | &:hover { |
644 | 13858d75 | Kostas Papadimitriou | color: @black; |
645 | 13858d75 | Kostas Papadimitriou | text-decoration: none; |
646 | 13858d75 | Kostas Papadimitriou | .opacity(40); |
647 | 13858d75 | Kostas Papadimitriou | } |
648 | 13858d75 | Kostas Papadimitriou | } |
649 | 13858d75 | Kostas Papadimitriou | |
650 | 13858d75 | Kostas Papadimitriou | |
651 | 13858d75 | Kostas Papadimitriou | // ERROR STYLES |
652 | 13858d75 | Kostas Papadimitriou | // ------------ |
653 | 13858d75 | Kostas Papadimitriou | |
654 | 13858d75 | Kostas Papadimitriou | // Base alert styles |
655 | 13858d75 | Kostas Papadimitriou | .alert-message { |
656 | 13858d75 | Kostas Papadimitriou | position: relative; |
657 | 13858d75 | Kostas Papadimitriou | padding: 7px 15px; |
658 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline; |
659 | 13858d75 | Kostas Papadimitriou | color: @grayDark; |
660 | 13858d75 | Kostas Papadimitriou | .gradientBar(#fceec1, #eedc94); // warning by default |
661 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 0 rgba(255,255,255,.5); |
662 | 13858d75 | Kostas Papadimitriou | border-width: 1px; |
663 | 13858d75 | Kostas Papadimitriou | border-style: solid; |
664 | 13858d75 | Kostas Papadimitriou | .border-radius(4px); |
665 | 13858d75 | Kostas Papadimitriou | .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); |
666 | 13858d75 | Kostas Papadimitriou | |
667 | 13858d75 | Kostas Papadimitriou | // Adjust close icon |
668 | 13858d75 | Kostas Papadimitriou | .close { |
669 | 13858d75 | Kostas Papadimitriou | margin-top: 1px; |
670 | 13858d75 | Kostas Papadimitriou | *margin-top: 0; // For IE7 |
671 | 13858d75 | Kostas Papadimitriou | } |
672 | 13858d75 | Kostas Papadimitriou | |
673 | 13858d75 | Kostas Papadimitriou | // Make links same color as text and stand out more |
674 | 13858d75 | Kostas Papadimitriou | a { |
675 | 13858d75 | Kostas Papadimitriou | font-weight: bold; |
676 | 13858d75 | Kostas Papadimitriou | color: @grayDark; |
677 | 13858d75 | Kostas Papadimitriou | } |
678 | 13858d75 | Kostas Papadimitriou | &.danger p a, |
679 | 13858d75 | Kostas Papadimitriou | &.error p a, |
680 | 13858d75 | Kostas Papadimitriou | &.success p a, |
681 | 13858d75 | Kostas Papadimitriou | &.info p a { |
682 | 13858d75 | Kostas Papadimitriou | color: @white; |
683 | 13858d75 | Kostas Papadimitriou | } |
684 | 13858d75 | Kostas Papadimitriou | |
685 | 13858d75 | Kostas Papadimitriou | // Remove extra margin from content |
686 | 13858d75 | Kostas Papadimitriou | h5 { |
687 | 13858d75 | Kostas Papadimitriou | line-height: @baseline; |
688 | 13858d75 | Kostas Papadimitriou | } |
689 | 13858d75 | Kostas Papadimitriou | p { |
690 | 13858d75 | Kostas Papadimitriou | margin-bottom: 0; |
691 | 13858d75 | Kostas Papadimitriou | } |
692 | 13858d75 | Kostas Papadimitriou | div { |
693 | 13858d75 | Kostas Papadimitriou | margin-top: 5px; |
694 | 13858d75 | Kostas Papadimitriou | margin-bottom: 2px; |
695 | 13858d75 | Kostas Papadimitriou | line-height: 28px; |
696 | 13858d75 | Kostas Papadimitriou | } |
697 | 13858d75 | Kostas Papadimitriou | .btn { |
698 | 13858d75 | Kostas Papadimitriou | // Provide actions with buttons |
699 | 13858d75 | Kostas Papadimitriou | .box-shadow(0 1px 0 rgba(255,255,255,.25)); |
700 | 13858d75 | Kostas Papadimitriou | } |
701 | 13858d75 | Kostas Papadimitriou | |
702 | 13858d75 | Kostas Papadimitriou | &.block-message { |
703 | 13858d75 | Kostas Papadimitriou | background-image: none; |
704 | 13858d75 | Kostas Papadimitriou | background-color: lighten(#fceec1, 5%); |
705 | 13858d75 | Kostas Papadimitriou | .reset-filter(); |
706 | 13858d75 | Kostas Papadimitriou | padding: 14px; |
707 | 13858d75 | Kostas Papadimitriou | border-color: #fceec1; |
708 | 13858d75 | Kostas Papadimitriou | .box-shadow(none); |
709 | 13858d75 | Kostas Papadimitriou | ul, p { |
710 | 13858d75 | Kostas Papadimitriou | margin-right: 30px; |
711 | 13858d75 | Kostas Papadimitriou | } |
712 | 13858d75 | Kostas Papadimitriou | ul { |
713 | 13858d75 | Kostas Papadimitriou | margin-bottom: 0; |
714 | 13858d75 | Kostas Papadimitriou | } |
715 | 13858d75 | Kostas Papadimitriou | li { |
716 | 13858d75 | Kostas Papadimitriou | color: @grayDark; |
717 | 13858d75 | Kostas Papadimitriou | } |
718 | 13858d75 | Kostas Papadimitriou | .alert-actions { |
719 | 13858d75 | Kostas Papadimitriou | margin-top: 5px; |
720 | 13858d75 | Kostas Papadimitriou | } |
721 | 13858d75 | Kostas Papadimitriou | &.error, |
722 | 13858d75 | Kostas Papadimitriou | &.success, |
723 | 13858d75 | Kostas Papadimitriou | &.info { |
724 | 13858d75 | Kostas Papadimitriou | color: @grayDark; |
725 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 0 rgba(255,255,255,.5); |
726 | 13858d75 | Kostas Papadimitriou | } |
727 | 13858d75 | Kostas Papadimitriou | &.error { |
728 | 13858d75 | Kostas Papadimitriou | background-color: lighten(#f56a66, 25%); |
729 | 13858d75 | Kostas Papadimitriou | border-color: lighten(#f56a66, 20%); |
730 | 13858d75 | Kostas Papadimitriou | } |
731 | 13858d75 | Kostas Papadimitriou | &.success { |
732 | 13858d75 | Kostas Papadimitriou | background-color: lighten(#62c462, 30%); |
733 | 13858d75 | Kostas Papadimitriou | border-color: lighten(#62c462, 25%); |
734 | 13858d75 | Kostas Papadimitriou | } |
735 | 13858d75 | Kostas Papadimitriou | &.info { |
736 | 13858d75 | Kostas Papadimitriou | background-color: lighten(#6bd0ee, 25%); |
737 | 13858d75 | Kostas Papadimitriou | border-color: lighten(#6bd0ee, 20%); |
738 | 13858d75 | Kostas Papadimitriou | } |
739 | 13858d75 | Kostas Papadimitriou | // Change link color back |
740 | 13858d75 | Kostas Papadimitriou | &.danger p a, |
741 | 13858d75 | Kostas Papadimitriou | &.error p a, |
742 | 13858d75 | Kostas Papadimitriou | &.success p a, |
743 | 13858d75 | Kostas Papadimitriou | &.info p a { |
744 | 13858d75 | Kostas Papadimitriou | color: @grayDark; |
745 | 13858d75 | Kostas Papadimitriou | } |
746 | 13858d75 | Kostas Papadimitriou | |
747 | 13858d75 | Kostas Papadimitriou | } |
748 | 13858d75 | Kostas Papadimitriou | } |
749 | 13858d75 | Kostas Papadimitriou | |
750 | 13858d75 | Kostas Papadimitriou | |
751 | 13858d75 | Kostas Papadimitriou | // PAGINATION |
752 | 13858d75 | Kostas Papadimitriou | // ---------- |
753 | 13858d75 | Kostas Papadimitriou | |
754 | 13858d75 | Kostas Papadimitriou | .pagination { |
755 | 13858d75 | Kostas Papadimitriou | height: @baseline * 2; |
756 | 13858d75 | Kostas Papadimitriou | margin: @baseline 0; |
757 | 13858d75 | Kostas Papadimitriou | ul { |
758 | 13858d75 | Kostas Papadimitriou | float: left; |
759 | 13858d75 | Kostas Papadimitriou | margin: 0; |
760 | 13858d75 | Kostas Papadimitriou | border: 1px solid #ddd; |
761 | 13858d75 | Kostas Papadimitriou | border: 1px solid rgba(0,0,0,.15); |
762 | 13858d75 | Kostas Papadimitriou | .border-radius(3px); |
763 | 13858d75 | Kostas Papadimitriou | .box-shadow(0 1px 2px rgba(0,0,0,.05)); |
764 | 13858d75 | Kostas Papadimitriou | } |
765 | 13858d75 | Kostas Papadimitriou | li { |
766 | 13858d75 | Kostas Papadimitriou | display: inline; |
767 | 13858d75 | Kostas Papadimitriou | } |
768 | 13858d75 | Kostas Papadimitriou | a { |
769 | 13858d75 | Kostas Papadimitriou | float: left; |
770 | 13858d75 | Kostas Papadimitriou | padding: 0 14px; |
771 | 13858d75 | Kostas Papadimitriou | line-height: (@baseline * 2) - 2; |
772 | 13858d75 | Kostas Papadimitriou | border-right: 1px solid; |
773 | 13858d75 | Kostas Papadimitriou | border-right-color: #ddd; |
774 | 13858d75 | Kostas Papadimitriou | border-right-color: rgba(0,0,0,.15); |
775 | 13858d75 | Kostas Papadimitriou | *border-right-color: #ddd; /* IE6-7 */ |
776 | 13858d75 | Kostas Papadimitriou | text-decoration: none; |
777 | 13858d75 | Kostas Papadimitriou | } |
778 | 13858d75 | Kostas Papadimitriou | a:hover, |
779 | 13858d75 | Kostas Papadimitriou | .active a { |
780 | 13858d75 | Kostas Papadimitriou | background-color: lighten(@blue, 45%); |
781 | 13858d75 | Kostas Papadimitriou | } |
782 | 13858d75 | Kostas Papadimitriou | .disabled a, |
783 | 13858d75 | Kostas Papadimitriou | .disabled a:hover { |
784 | 13858d75 | Kostas Papadimitriou | background-color: transparent; |
785 | 13858d75 | Kostas Papadimitriou | color: @grayLight; |
786 | 13858d75 | Kostas Papadimitriou | } |
787 | 13858d75 | Kostas Papadimitriou | .next a { |
788 | 13858d75 | Kostas Papadimitriou | border: 0; |
789 | 13858d75 | Kostas Papadimitriou | } |
790 | 13858d75 | Kostas Papadimitriou | } |
791 | 13858d75 | Kostas Papadimitriou | |
792 | 13858d75 | Kostas Papadimitriou | |
793 | 13858d75 | Kostas Papadimitriou | // WELLS |
794 | 13858d75 | Kostas Papadimitriou | // ----- |
795 | 13858d75 | Kostas Papadimitriou | |
796 | 13858d75 | Kostas Papadimitriou | .well { |
797 | 13858d75 | Kostas Papadimitriou | background-color: #f5f5f5; |
798 | 13858d75 | Kostas Papadimitriou | margin-bottom: 20px; |
799 | 13858d75 | Kostas Papadimitriou | padding: 19px; |
800 | 13858d75 | Kostas Papadimitriou | min-height: 20px; |
801 | 13858d75 | Kostas Papadimitriou | border: 1px solid #eee; |
802 | 13858d75 | Kostas Papadimitriou | border: 1px solid rgba(0,0,0,.05); |
803 | 13858d75 | Kostas Papadimitriou | .border-radius(4px); |
804 | 13858d75 | Kostas Papadimitriou | .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); |
805 | 13858d75 | Kostas Papadimitriou | blockquote { |
806 | 13858d75 | Kostas Papadimitriou | border-color: #ddd; |
807 | 13858d75 | Kostas Papadimitriou | border-color: rgba(0,0,0,.15); |
808 | 13858d75 | Kostas Papadimitriou | } |
809 | 13858d75 | Kostas Papadimitriou | } |
810 | 13858d75 | Kostas Papadimitriou | |
811 | 13858d75 | Kostas Papadimitriou | |
812 | 13858d75 | Kostas Papadimitriou | // MODALS |
813 | 13858d75 | Kostas Papadimitriou | // ------ |
814 | 13858d75 | Kostas Papadimitriou | |
815 | 13858d75 | Kostas Papadimitriou | .modal-backdrop { |
816 | 13858d75 | Kostas Papadimitriou | background-color: @black; |
817 | 13858d75 | Kostas Papadimitriou | position: fixed; |
818 | 13858d75 | Kostas Papadimitriou | top: 0; |
819 | 13858d75 | Kostas Papadimitriou | left: 0; |
820 | 13858d75 | Kostas Papadimitriou | right: 0; |
821 | 13858d75 | Kostas Papadimitriou | bottom: 0; |
822 | 13858d75 | Kostas Papadimitriou | z-index: 10000; |
823 | 13858d75 | Kostas Papadimitriou | // Fade for backdrop |
824 | 13858d75 | Kostas Papadimitriou | &.fade { opacity: 0; } |
825 | 13858d75 | Kostas Papadimitriou | } |
826 | 13858d75 | Kostas Papadimitriou | |
827 | 13858d75 | Kostas Papadimitriou | .modal-backdrop, |
828 | 13858d75 | Kostas Papadimitriou | .modal-backdrop.fade.in { |
829 | 13858d75 | Kostas Papadimitriou | .opacity(80); |
830 | 13858d75 | Kostas Papadimitriou | } |
831 | 13858d75 | Kostas Papadimitriou | |
832 | 13858d75 | Kostas Papadimitriou | .modal { |
833 | 13858d75 | Kostas Papadimitriou | position: fixed; |
834 | 13858d75 | Kostas Papadimitriou | top: 50%; |
835 | 13858d75 | Kostas Papadimitriou | left: 50%; |
836 | 13858d75 | Kostas Papadimitriou | z-index: 11000; |
837 | 13858d75 | Kostas Papadimitriou | width: 560px; |
838 | 13858d75 | Kostas Papadimitriou | margin: -250px 0 0 -280px; |
839 | 13858d75 | Kostas Papadimitriou | background-color: @white; |
840 | 13858d75 | Kostas Papadimitriou | border: 1px solid #999; |
841 | 13858d75 | Kostas Papadimitriou | border: 1px solid rgba(0,0,0,.3); |
842 | 13858d75 | Kostas Papadimitriou | *border: 1px solid #999; /* IE6-7 */ |
843 | 13858d75 | Kostas Papadimitriou | .border-radius(6px); |
844 | 13858d75 | Kostas Papadimitriou | .box-shadow(0 3px 7px rgba(0,0,0,0.3)); |
845 | 13858d75 | Kostas Papadimitriou | .background-clip(padding-box); |
846 | 13858d75 | Kostas Papadimitriou | .close { margin-top: 7px; } |
847 | 13858d75 | Kostas Papadimitriou | &.fade { |
848 | 13858d75 | Kostas Papadimitriou | .transition(e('opacity .3s linear, top .3s ease-out')); |
849 | 13858d75 | Kostas Papadimitriou | top: -25%; |
850 | 13858d75 | Kostas Papadimitriou | } |
851 | 13858d75 | Kostas Papadimitriou | &.fade.in { top: 50%; } |
852 | 13858d75 | Kostas Papadimitriou | } |
853 | 13858d75 | Kostas Papadimitriou | .modal-header { |
854 | 13858d75 | Kostas Papadimitriou | border-bottom: 1px solid #eee; |
855 | 13858d75 | Kostas Papadimitriou | padding: 5px 15px; |
856 | 13858d75 | Kostas Papadimitriou | } |
857 | 13858d75 | Kostas Papadimitriou | .modal-body { |
858 | 13858d75 | Kostas Papadimitriou | padding: 15px; |
859 | 13858d75 | Kostas Papadimitriou | } |
860 | 13858d75 | Kostas Papadimitriou | .modal-body form { |
861 | 13858d75 | Kostas Papadimitriou | margin-bottom: 0; |
862 | 13858d75 | Kostas Papadimitriou | } |
863 | 13858d75 | Kostas Papadimitriou | .modal-footer { |
864 | 13858d75 | Kostas Papadimitriou | background-color: #f5f5f5; |
865 | 13858d75 | Kostas Papadimitriou | padding: 14px 15px 15px; |
866 | 13858d75 | Kostas Papadimitriou | border-top: 1px solid #ddd; |
867 | 13858d75 | Kostas Papadimitriou | .border-radius(0 0 6px 6px); |
868 | 13858d75 | Kostas Papadimitriou | .box-shadow(inset 0 1px 0 @white); |
869 | 13858d75 | Kostas Papadimitriou | .clearfix(); |
870 | 13858d75 | Kostas Papadimitriou | margin-bottom: 0; |
871 | 13858d75 | Kostas Papadimitriou | .btn { |
872 | 13858d75 | Kostas Papadimitriou | float: right; |
873 | 13858d75 | Kostas Papadimitriou | margin-left: 5px; |
874 | 13858d75 | Kostas Papadimitriou | } |
875 | 13858d75 | Kostas Papadimitriou | } |
876 | 13858d75 | Kostas Papadimitriou | |
877 | 13858d75 | Kostas Papadimitriou | // Fix the stacking of these components when in modals |
878 | 13858d75 | Kostas Papadimitriou | .modal .popover, |
879 | 13858d75 | Kostas Papadimitriou | .modal .twipsy { |
880 | 13858d75 | Kostas Papadimitriou | z-index: 12000; |
881 | 13858d75 | Kostas Papadimitriou | } |
882 | 13858d75 | Kostas Papadimitriou | |
883 | 13858d75 | Kostas Papadimitriou | |
884 | 13858d75 | Kostas Papadimitriou | // POPOVER ARROWS |
885 | 13858d75 | Kostas Papadimitriou | // -------------- |
886 | 13858d75 | Kostas Papadimitriou | |
887 | 13858d75 | Kostas Papadimitriou | #popoverArrow { |
888 | 13858d75 | Kostas Papadimitriou | .above(@arrowWidth: 5px) { |
889 | 13858d75 | Kostas Papadimitriou | bottom: 0; |
890 | 13858d75 | Kostas Papadimitriou | left: 50%; |
891 | 13858d75 | Kostas Papadimitriou | margin-left: -@arrowWidth; |
892 | 13858d75 | Kostas Papadimitriou | border-left: @arrowWidth solid transparent; |
893 | 13858d75 | Kostas Papadimitriou | border-right: @arrowWidth solid transparent; |
894 | 13858d75 | Kostas Papadimitriou | border-top: @arrowWidth solid @black; |
895 | 13858d75 | Kostas Papadimitriou | } |
896 | 13858d75 | Kostas Papadimitriou | .left(@arrowWidth: 5px) { |
897 | 13858d75 | Kostas Papadimitriou | top: 50%; |
898 | 13858d75 | Kostas Papadimitriou | right: 0; |
899 | 13858d75 | Kostas Papadimitriou | margin-top: -@arrowWidth; |
900 | 13858d75 | Kostas Papadimitriou | border-top: @arrowWidth solid transparent; |
901 | 13858d75 | Kostas Papadimitriou | border-bottom: @arrowWidth solid transparent; |
902 | 13858d75 | Kostas Papadimitriou | border-left: @arrowWidth solid @black; |
903 | 13858d75 | Kostas Papadimitriou | } |
904 | 13858d75 | Kostas Papadimitriou | .below(@arrowWidth: 5px) { |
905 | 13858d75 | Kostas Papadimitriou | top: 0; |
906 | 13858d75 | Kostas Papadimitriou | left: 50%; |
907 | 13858d75 | Kostas Papadimitriou | margin-left: -@arrowWidth; |
908 | 13858d75 | Kostas Papadimitriou | border-left: @arrowWidth solid transparent; |
909 | 13858d75 | Kostas Papadimitriou | border-right: @arrowWidth solid transparent; |
910 | 13858d75 | Kostas Papadimitriou | border-bottom: @arrowWidth solid @black; |
911 | 13858d75 | Kostas Papadimitriou | } |
912 | 13858d75 | Kostas Papadimitriou | .right(@arrowWidth: 5px) { |
913 | 13858d75 | Kostas Papadimitriou | top: 50%; |
914 | 13858d75 | Kostas Papadimitriou | left: 0; |
915 | 13858d75 | Kostas Papadimitriou | margin-top: -@arrowWidth; |
916 | 13858d75 | Kostas Papadimitriou | border-top: @arrowWidth solid transparent; |
917 | 13858d75 | Kostas Papadimitriou | border-bottom: @arrowWidth solid transparent; |
918 | 13858d75 | Kostas Papadimitriou | border-right: @arrowWidth solid @black; |
919 | 13858d75 | Kostas Papadimitriou | } |
920 | 13858d75 | Kostas Papadimitriou | } |
921 | 13858d75 | Kostas Papadimitriou | |
922 | 13858d75 | Kostas Papadimitriou | // TWIPSY |
923 | 13858d75 | Kostas Papadimitriou | // ------ |
924 | 13858d75 | Kostas Papadimitriou | |
925 | 13858d75 | Kostas Papadimitriou | .twipsy { |
926 | 13858d75 | Kostas Papadimitriou | display: block; |
927 | 13858d75 | Kostas Papadimitriou | position: absolute; |
928 | 13858d75 | Kostas Papadimitriou | visibility: visible; |
929 | 13858d75 | Kostas Papadimitriou | padding: 5px; |
930 | 13858d75 | Kostas Papadimitriou | font-size: 11px; |
931 | 13858d75 | Kostas Papadimitriou | z-index: 1000; |
932 | 13858d75 | Kostas Papadimitriou | .opacity(80); |
933 | 13858d75 | Kostas Papadimitriou | &.fade.in { |
934 | 13858d75 | Kostas Papadimitriou | .opacity(80); |
935 | 13858d75 | Kostas Papadimitriou | } |
936 | 13858d75 | Kostas Papadimitriou | &.above .twipsy-arrow { #popoverArrow > .above(); } |
937 | 13858d75 | Kostas Papadimitriou | &.left .twipsy-arrow { #popoverArrow > .left(); } |
938 | 13858d75 | Kostas Papadimitriou | &.below .twipsy-arrow { #popoverArrow > .below(); } |
939 | 13858d75 | Kostas Papadimitriou | &.right .twipsy-arrow { #popoverArrow > .right(); } |
940 | 13858d75 | Kostas Papadimitriou | } |
941 | 13858d75 | Kostas Papadimitriou | .twipsy-inner { |
942 | 13858d75 | Kostas Papadimitriou | padding: 3px 8px; |
943 | 13858d75 | Kostas Papadimitriou | background-color: @black; |
944 | 13858d75 | Kostas Papadimitriou | color: white; |
945 | 13858d75 | Kostas Papadimitriou | text-align: center; |
946 | 13858d75 | Kostas Papadimitriou | max-width: 200px; |
947 | 13858d75 | Kostas Papadimitriou | text-decoration: none; |
948 | 13858d75 | Kostas Papadimitriou | .border-radius(4px); |
949 | 13858d75 | Kostas Papadimitriou | } |
950 | 13858d75 | Kostas Papadimitriou | .twipsy-arrow { |
951 | 13858d75 | Kostas Papadimitriou | position: absolute; |
952 | 13858d75 | Kostas Papadimitriou | width: 0; |
953 | 13858d75 | Kostas Papadimitriou | height: 0; |
954 | 13858d75 | Kostas Papadimitriou | } |
955 | 13858d75 | Kostas Papadimitriou | |
956 | 13858d75 | Kostas Papadimitriou | |
957 | 13858d75 | Kostas Papadimitriou | // POPOVERS |
958 | 13858d75 | Kostas Papadimitriou | // -------- |
959 | 13858d75 | Kostas Papadimitriou | |
960 | 13858d75 | Kostas Papadimitriou | .popover { |
961 | 13858d75 | Kostas Papadimitriou | position: absolute; |
962 | 13858d75 | Kostas Papadimitriou | top: 0; |
963 | 13858d75 | Kostas Papadimitriou | left: 0; |
964 | 13858d75 | Kostas Papadimitriou | z-index: 1000; |
965 | 13858d75 | Kostas Papadimitriou | padding: 5px; |
966 | 13858d75 | Kostas Papadimitriou | display: none; |
967 | 13858d75 | Kostas Papadimitriou | &.above .arrow { #popoverArrow > .above(); } |
968 | 13858d75 | Kostas Papadimitriou | &.right .arrow { #popoverArrow > .right(); } |
969 | 13858d75 | Kostas Papadimitriou | &.below .arrow { #popoverArrow > .below(); } |
970 | 13858d75 | Kostas Papadimitriou | &.left .arrow { #popoverArrow > .left(); } |
971 | 13858d75 | Kostas Papadimitriou | .arrow { |
972 | 13858d75 | Kostas Papadimitriou | position: absolute; |
973 | 13858d75 | Kostas Papadimitriou | width: 0; |
974 | 13858d75 | Kostas Papadimitriou | height: 0; |
975 | 13858d75 | Kostas Papadimitriou | } |
976 | 13858d75 | Kostas Papadimitriou | .inner { |
977 | 13858d75 | Kostas Papadimitriou | background: @black; |
978 | 13858d75 | Kostas Papadimitriou | background: rgba(0,0,0,.8); |
979 | 13858d75 | Kostas Papadimitriou | padding: 3px; |
980 | 13858d75 | Kostas Papadimitriou | overflow: hidden; |
981 | 13858d75 | Kostas Papadimitriou | width: 280px; |
982 | 13858d75 | Kostas Papadimitriou | .border-radius(6px); |
983 | 13858d75 | Kostas Papadimitriou | .box-shadow(0 3px 7px rgba(0,0,0,0.3)); |
984 | 13858d75 | Kostas Papadimitriou | } |
985 | 13858d75 | Kostas Papadimitriou | .title { |
986 | 13858d75 | Kostas Papadimitriou | background-color: #f5f5f5; |
987 | 13858d75 | Kostas Papadimitriou | padding: 9px 15px; |
988 | 13858d75 | Kostas Papadimitriou | line-height: 1; |
989 | 13858d75 | Kostas Papadimitriou | .border-radius(3px 3px 0 0); |
990 | 13858d75 | Kostas Papadimitriou | border-bottom:1px solid #eee; |
991 | 13858d75 | Kostas Papadimitriou | } |
992 | 13858d75 | Kostas Papadimitriou | .content { |
993 | 13858d75 | Kostas Papadimitriou | background-color: @white; |
994 | 13858d75 | Kostas Papadimitriou | padding: 14px; |
995 | 13858d75 | Kostas Papadimitriou | .border-radius(0 0 3px 3px); |
996 | 13858d75 | Kostas Papadimitriou | .background-clip(padding-box); |
997 | 13858d75 | Kostas Papadimitriou | p, ul, ol { |
998 | 13858d75 | Kostas Papadimitriou | margin-bottom: 0; |
999 | 13858d75 | Kostas Papadimitriou | } |
1000 | 13858d75 | Kostas Papadimitriou | } |
1001 | 13858d75 | Kostas Papadimitriou | } |
1002 | 13858d75 | Kostas Papadimitriou | |
1003 | 13858d75 | Kostas Papadimitriou | |
1004 | 13858d75 | Kostas Papadimitriou | // PATTERN ANIMATIONS |
1005 | 13858d75 | Kostas Papadimitriou | // ------------------ |
1006 | 13858d75 | Kostas Papadimitriou | |
1007 | 13858d75 | Kostas Papadimitriou | .fade { |
1008 | 13858d75 | Kostas Papadimitriou | .transition(opacity .15s linear); |
1009 | 13858d75 | Kostas Papadimitriou | opacity: 0; |
1010 | 13858d75 | Kostas Papadimitriou | &.in { |
1011 | 13858d75 | Kostas Papadimitriou | opacity: 1; |
1012 | 13858d75 | Kostas Papadimitriou | } |
1013 | 13858d75 | Kostas Papadimitriou | } |
1014 | 13858d75 | Kostas Papadimitriou | |
1015 | 13858d75 | Kostas Papadimitriou | |
1016 | 13858d75 | Kostas Papadimitriou | // LABELS |
1017 | 13858d75 | Kostas Papadimitriou | // ------ |
1018 | 13858d75 | Kostas Papadimitriou | |
1019 | 13858d75 | Kostas Papadimitriou | .label { |
1020 | 13858d75 | Kostas Papadimitriou | padding: 1px 3px 2px; |
1021 | 13858d75 | Kostas Papadimitriou | font-size: @basefont * .75; |
1022 | 13858d75 | Kostas Papadimitriou | font-weight: bold; |
1023 | 13858d75 | Kostas Papadimitriou | color: @white; |
1024 | 13858d75 | Kostas Papadimitriou | text-transform: uppercase; |
1025 | 13858d75 | Kostas Papadimitriou | white-space: nowrap; |
1026 | 13858d75 | Kostas Papadimitriou | background-color: @grayLight; |
1027 | 13858d75 | Kostas Papadimitriou | .border-radius(3px); |
1028 | 13858d75 | Kostas Papadimitriou | &.important { background-color: #c43c35; } |
1029 | 13858d75 | Kostas Papadimitriou | &.warning { background-color: @orange; } |
1030 | 13858d75 | Kostas Papadimitriou | &.success { background-color: @green; } |
1031 | 13858d75 | Kostas Papadimitriou | &.notice { background-color: lighten(@blue, 25%); } |
1032 | 13858d75 | Kostas Papadimitriou | } |
1033 | 13858d75 | Kostas Papadimitriou | |
1034 | 13858d75 | Kostas Papadimitriou | |
1035 | 13858d75 | Kostas Papadimitriou | // MEDIA GRIDS |
1036 | 13858d75 | Kostas Papadimitriou | // ----------- |
1037 | 13858d75 | Kostas Papadimitriou | |
1038 | 13858d75 | Kostas Papadimitriou | .media-grid { |
1039 | 13858d75 | Kostas Papadimitriou | margin-left: -@gridGutterWidth; |
1040 | 13858d75 | Kostas Papadimitriou | margin-bottom: 0; |
1041 | 13858d75 | Kostas Papadimitriou | .clearfix(); |
1042 | 13858d75 | Kostas Papadimitriou | li { |
1043 | 13858d75 | Kostas Papadimitriou | display: inline; |
1044 | 13858d75 | Kostas Papadimitriou | } |
1045 | 13858d75 | Kostas Papadimitriou | a { |
1046 | 13858d75 | Kostas Papadimitriou | float: left; |
1047 | 13858d75 | Kostas Papadimitriou | padding: 4px; |
1048 | 13858d75 | Kostas Papadimitriou | margin: 0 0 @baseline @gridGutterWidth; |
1049 | 13858d75 | Kostas Papadimitriou | border: 1px solid #ddd; |
1050 | 13858d75 | Kostas Papadimitriou | .border-radius(4px); |
1051 | 13858d75 | Kostas Papadimitriou | .box-shadow(0 1px 1px rgba(0,0,0,.075)); |
1052 | 13858d75 | Kostas Papadimitriou | img { |
1053 | 13858d75 | Kostas Papadimitriou | display: block; |
1054 | 13858d75 | Kostas Papadimitriou | } |
1055 | 13858d75 | Kostas Papadimitriou | &:hover { |
1056 | 13858d75 | Kostas Papadimitriou | border-color: @linkColor; |
1057 | 13858d75 | Kostas Papadimitriou | .box-shadow(0 1px 4px rgba(0,105,214,.25)); |
1058 | 13858d75 | Kostas Papadimitriou | } |
1059 | 13858d75 | Kostas Papadimitriou | } |
1060 | 13858d75 | Kostas Papadimitriou | } |