source: documentation/trunk/tutorial_sample_files/libraries/althor/less/elements.less@ 28599

Last change on this file since 28599 was 28599, checked in by jlwhisler, 10 years ago

Draft interface for use in Defining Libraries tutorial.

File size: 11.5 KB
Line 
1@import "palette.less";
2
3.block-divider{
4 border-bottom: 1px solid @fontColorInner;
5 margin-bottom: 50px;
6 padding-bottom: 50px;
7}
8
9/* DROPCAP ------------------------------------------------------------*/
10
11.dropcap:first-letter{
12 font-size: 3.571em;
13 line-height: 0.76em;
14 padding: 0.2em 0.2em 0 0;
15 float: left;
16 display: block;
17 color: @fontColorInner;
18}
19
20.dropcap.dark:first-letter{
21 display:block;
22 float:left;
23 font-size:30px;
24 line-height:40px;
25 margin:0 8px 0 0;
26 padding: 10px 10px;
27 background: @fontColorInner;
28 color: @fontLightColor;
29 border-radius: 5px;
30 -moz-border-radius: 5px;
31 -webkit-border-radius: 5px;
32}
33
34/* INFOBOXES ------------------------------------------------------------*/
35
36
37.infobox-info,
38.infobox-warning,
39.infobox-success,
40.infobox-error{
41 border: 1px solid;
42 margin: 10px 0px;
43 padding:15px 10px 15px 50px;
44 background-repeat: no-repeat;
45 background-position: 10px center;
46 border-radius: 5px;
47 -moz-border-radius: 5px;
48 -webkit-border-radius: 5px;
49}
50
51.infobox-info{
52 color: #00529B;
53 background-color: #BDE5F8;
54 background-image: url('../img/info-blue.png');
55}
56
57.infobox-warning{
58 color: #9F6000;
59 background-color: #FEEFB3;
60 background-image: url('../img/info-yellow.png');
61}
62
63.infobox-success{
64 color: #4F8A10;
65 background-color: #DFF2BF;
66 background-image: url('../img/info-green.png');
67}
68
69.infobox-error{
70 color: #D8000C;
71 background-color: #FFBABA;
72 background-image: url('../img/info-red.png');
73}
74
75/* LISTS ------------------------------------------------------------*/
76
77
78.lists-check ul,
79.lists-arrow ul,
80.lists-plus ul,
81.lists-star ul,
82.lists-heart ul{
83 margin-bottom: 30px;
84 margin-left: 20px;
85}
86
87
88.lists-check ul li{
89 list-style-image: url(../img/bullets/check.png);
90 line-height: 1.5em;
91}
92
93.lists-arrow ul{
94 list-style-image: url(../img/bullets/arrow.png);
95 line-height: 1.5em;
96}
97
98.lists-plus ul{
99 list-style-image: url(../img/bullets/plus.png);
100 line-height: 1.5em;
101}
102
103.lists-star ul{
104 list-style-image: url(../img/bullets/star.png);
105 line-height: 1.5em;
106}
107
108.lists-heart ul{
109 list-style-image: url(../img/bullets/heart.png);
110 line-height: 1.5em;
111}
112
113/* PULLQUOTES ------------------------------------------------------------*/
114
115.pullquote-right,
116.pullquote-left {
117 border-left: #555555 2px solid;
118 float:right;
119 font-size:16px;
120 line-height:1.5em;
121 margin: 20px 0px 20px 20px;
122 width:33%;
123 font-style: italic;
124}
125
126.pullquote-left {
127 float:left;
128 margin: 20px 20px 20px 0px;
129 padding:0 0 0 20px;
130}
131
132.pullquote-right{
133 border-left: none;
134 border-right: #555555 2px solid;
135 padding:0 20px 0 0px;
136}
137
138/* HIGHLIGHT ------------------------------------------------------------*/
139
140.highlight{ background: #fbe471 }
141
142
143/* Link buttons ------------------------------------------------*/
144
145.theme-link-button{
146 display: inline-block;
147 padding: 10px;
148 background: @accentColor;
149 color: #f1d76e;
150}
151
152.link-button {
153 display: inline-block;
154 background-color: @accentColor;
155 background-image: -webkit-gradient(linear, left top, left bottom, from(#fe8300), to(#c46500));
156 /* Saf4+, Chrome */
157 background-image: -webkit-linear-gradient(top, #fe8300, #c46500);
158 background-image: -moz-linear-gradient(top, #fe8300, #c46500);
159 background-image: -ms-linear-gradient(top, #fe8300, #c46500);
160 background-image: -o-linear-gradient(top, #fe8300, #c46500);
161 background-image: linear-gradient(top, #fe8300, #c46500);
162 border: 1px solid #c46500;
163 border-bottom: 1px solid #fe8300;
164 -webkit-border-radius: 3px;
165 -moz-border-radius: 3px;
166 -ms-border-radius: 3px;
167 -o-border-radius: 3px;
168 border-radius: 3px;
169 -webkit-box-shadow: inset 0 1px 0 0 #fe8300;
170 -moz-box-shadow: inset 0 1px 0 0 #fe8300;
171 -ms-box-shadow: inset 0 1px 0 0 #fe8300;
172 -o-box-shadow: inset 0 1px 0 0 #fe8300;
173 box-shadow: inset 0 1px 0 0 #fe8300;
174 color: #703a00;
175 font-weight: bold;
176 line-height: 1;
177 padding: 8px 10px;
178 text-align: center;
179 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
180}
181
182.link-button:hover {
183 color: #703a00;
184 background-color: #ff9627;
185 background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9627), to(#c46500));
186 /* Saf4+, Chrome */
187 background-image: -webkit-linear-gradient(top, #ff9627, #c46500);
188 background-image: -moz-linear-gradient(top, #ff9627, #c46500);
189 background-image: -ms-linear-gradient(top, #ff9627, #c46500);
190 background-image: -o-linear-gradient(top, #ff9627, #c46500);
191 background-image: linear-gradient(top, #ff9627, #c46500);
192}
193
194.link-button.fullwidth{
195 display: block;
196 width: 97%;
197 margin: 0 auto;
198}
199
200.list-buttons{
201 display: block;
202}
203
204.list-buttons li{
205 display: block;
206 float: left;
207 margin-right: 5px;
208 margin-bottom: 20px;
209}
210
211/* Link buttons red ------------------------------------------------*/
212
213.link-button.red{
214 color: #530909;
215 background-color: #e4504c;
216 background-image: -webkit-gradient(linear, left top, left bottom, from(#e4504c), to(#a61b1b));
217 /* Saf4+, Chrome */
218 background-image: -webkit-linear-gradient(top, #e4504c, #a61b1b);
219 background-image: -moz-linear-gradient(top, #e4504c, #a61b1b);
220 background-image: -ms-linear-gradient(top, #e4504c, #a61b1b);
221 background-image: -o-linear-gradient(top, #e4504c, #a61b1b);
222 background-image: linear-gradient(top, #e4504c, #a61b1b);
223 border: 1px solid #6e0606;
224 border-bottom: 1px solid #6e0606;
225 -webkit-box-shadow: inset 0 1px 0 0 #f95c59;
226 -moz-box-shadow: inset 0 1px 0 0 #f95c59;
227 -ms-box-shadow: inset 0 1px 0 0 #f95c59;
228 -o-box-shadow: inset 0 1px 0 0 #f95c59;
229 box-shadow: inset 0 1px 0 0 #f95c59;
230}
231
232.link-button.red:hover {
233 color: #530909;
234 background-color: #89cc54;
235 background-image: -webkit-gradient(linear, left top, left bottom, from(#ff8380), to(#b40e0e));
236 /* Saf4+, Chrome */
237 background-image: -webkit-linear-gradient(top, #ff8380, #b40e0e);
238 background-image: -moz-linear-gradient(top, #ff8380, #b40e0e);
239 background-image: -ms-linear-gradient(top, #ff8380, #b40e0e);
240 background-image: -o-linear-gradient(top, #ff8380, #b40e0e);
241 background-image: linear-gradient(top, #ff8380, #b40e0e);
242}
243
244/* Link buttons green ------------------------------------------------*/
245
246.link-button.green{
247 color: #223613;
248 background-color: #7fbf4d;
249 background-image: -webkit-gradient(linear, left top, left bottom, from(#7fbf4d), to(#426825));
250 /* Saf4+, Chrome */
251 background-image: -webkit-linear-gradient(top, #7fbf4d, #426825);
252 background-image: -moz-linear-gradient(top, #7fbf4d, #426825);
253 background-image: -ms-linear-gradient(top, #7fbf4d, #426825);
254 background-image: -o-linear-gradient(top, #7fbf4d, #426825);
255 background-image: linear-gradient(top, #7fbf4d, #426825);
256 border: 1px solid #63a62f;
257 border-bottom: 1px solid #5b992b;
258 -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
259 -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
260 -ms-box-shadow: inset 0 1px 0 0 #96ca6d;
261 -o-box-shadow: inset 0 1px 0 0 #96ca6d;
262 box-shadow: inset 0 1px 0 0 #96ca6d;
263}
264
265.link-button.green:hover {
266 color: #223613;
267 background-color: #89cc54;
268 background-image: -webkit-gradient(linear, left top, left bottom, from(#89cc54), to(#426825));
269 /* Saf4+, Chrome */
270 background-image: -webkit-linear-gradient(top, #89cc54, #426825);
271 background-image: -moz-linear-gradient(top, #89cc54, #426825);
272 background-image: -ms-linear-gradient(top, #89cc54, #426825);
273 background-image: -o-linear-gradient(top, #89cc54, #426825);
274 background-image: linear-gradient(top, #89cc54, #426825);
275}
276
277/* Link buttons blue ------------------------------------------------*/
278
279.link-button.blue{
280 color: #2c4358;
281 background-color: #97b2c9;
282 background-image: -webkit-gradient(linear, left top, left bottom, from(#97b2c9), to(#4e7da5));
283 /* Saf4+, Chrome */
284 background-image: -webkit-linear-gradient(top, #97b2c9, #4e7da5);
285 background-image: -moz-linear-gradient(top, #97b2c9, #4e7da5);
286 background-image: -ms-linear-gradient(top, #97b2c9, #4e7da5);
287 background-image: -o-linear-gradient(top, #97b2c9, #4e7da5);
288 background-image: linear-gradient(top, #97b2c9, #4e7da5);
289 border: 1px solid #b9d3e9;
290 border-bottom: 1px solid #2c4358;
291 -webkit-box-shadow: inset 0 1px 0 0 #b9d3e9;
292 -moz-box-shadow: inset 0 1px 0 0 #b9d3e9;
293 -ms-box-shadow: inset 0 1px 0 0 #b9d3e9;
294 -o-box-shadow: inset 0 1px 0 0 #b9d3e9;
295 box-shadow: inset 0 1px 0 0 #b9d3e9;
296}
297
298.link-button.blue:hover {
299 color: #2c4358;
300 background-color: #89cc54;
301 background-image: -webkit-gradient(linear, left top, left bottom, from(#89bde8), to(#3771a2));
302 /* Saf4+, Chrome */
303 background-image: -webkit-linear-gradient(top, #89bde8, #3771a2);
304 background-image: -moz-linear-gradient(top, #89bde8, #3771a2);
305 background-image: -ms-linear-gradient(top, #89bde8, #3771a2);
306 background-image: -o-linear-gradient(top, #89bde8, #3771a2);
307 background-image: linear-gradient(top, #89bde8, #3771a2);
308}
309
310/* ACCORDION -------------------------------------------------*/
311
312
313.accordion-trigger,
314.toggle-trigger{
315 line-height: 30px;
316 font-size: 14px;
317 border-top: 1px solid @fontColorInner + 33;
318 border-left: 1px solid @fontColorInner;
319 border-right: 1px solid @fontColorInner;
320 border-bottom: 1px solid @fontColorInner - 33;
321}
322
323
324.accordion-trigger{
325 text-decoration: none;
326 color: @fgColor;
327 font-weight: bold;
328 padding: 5px 10px;
329 cursor: pointer;
330 background: @fontColorInner;
331
332
333 &.active{
334 border-bottom: 1px solid @fontColorInner;
335 }
336
337 &:hover{
338 background: @fontColorInner;
339 }
340}
341
342
343
344.accordion-container{
345 margin-bottom: 0px;
346 padding: 5px 10px;
347 border-bottom: 1px solid @fontColorInner;
348 border-right: 1px solid @fontColorInner;
349 border-left: 1px solid @fontColorInner;
350}
351
352/* TOGGLE -------------------------------------------------*/
353
354.toggle-trigger{
355 text-decoration: none;
356 color: @fgColor;
357 font-weight: bold;
358 cursor: pointer;
359 overflow: hidden;
360 background-color: @fontColorInner;
361 padding: 5px 5px 5px 10px;
362 i{
363 display: block;
364 float: left;
365 width: 31px;
366 height: 31px;
367 margin-right: 10px;
368 background: url(../img/toggle.png) no-repeat 0px 0px;
369 }
370
371 &.active{
372 border-bottom: 1px solid @fontColorInner;
373 i{
374 background-position: 0px -31px;
375 }
376 }
377
378 &:hover{
379 background-color: @fontColorInner;
380 }
381}
382
383
384.toggle-container{
385 margin-bottom: 0px;
386 padding: 5px 10px;
387 border-bottom: 1px solid @fontColorInner;
388 border-right: 1px solid @fontColorInner;
389 border-left: 1px solid @fontColorInner;
390}
391
392/* TABS -------------------------------------------------*/
393
394/* root element for tabs */
395
396.tabs {
397 list-style:none;
398 margin:0 !important;
399 padding: 0px;
400 height: 33px;
401}
402
403body.home .tabs {
404 padding: 0px 30px;
405
406}
407
408/* single tab */
409ul.tabs li {
410 display: block;
411 float:left;
412 text-indent:0;
413 padding:0;
414 margin: 2px 5px 0px 0px !important;
415 list-style-image: none !important;
416 border-top: 1px solid @fontColorInner;
417 border-right: 1px solid @fontColorInner;
418 border-left: 1px solid @fontColorInner;
419}
420
421/* link inside the tab. uses a background image */
422ul.tabs a {
423 display:block;
424 font-size:13px;
425 font-weight: bold;
426 height: 30px;
427 line-height:30px;
428 text-align:center;
429 text-decoration:none;
430 padding: 0px 0px 0px 10px;
431 position:relative;
432 top:0px;
433}
434
435ul.tabs a span{
436 display:block;
437 height: 100%;
438 padding-right: 10px;
439}
440
441ul.tabs a{
442 text-decoration: none;
443 color: @fontColor;
444 background: @fgColor;
445}
446
447ul.tabs a:active {
448 outline:none;
449}
450
451/* when mouse enters the tab move the background image */
452
453
454ul.tabs li:hover a,
455ul.tabs a.current{
456 background: #f3f3f3;
457 color: #444;
458 border-bottom: 1px solid #f1f1f1;
459}
460
461/* active tab uses a class name "current". its highlight is also done by moving the background image. */
462ul.tabs a.current,
463ul.tabs a.current:hover,
464ul.tabs li.current a {
465 cursor:default !important;
466 color:#444 !important;
467 display: block;
468 text-decoration: none;
469}
470
471
472/* initially all panes are hidden */
473.panes .pane {
474 display:none;
475}
476
477.panes>div {
478 display: none;
479 min-height: 200px;
480 border: 1px solid @fontColorInner;
481 padding: 15px;
482 background: #f1f1f1;
483}
484
485
Note: See TracBrowser for help on using the repository browser.