« back to all changes in this revision
Viewing changes to static/css/core-pattern-ubuntu.scss
- browse files at revision 24
- compare with another revision
- download diff
- download tarball
- view history from revision 24
- Committer: Graham Bancroft
- Date: 2012-05-28 16:43:31 UTC
- Revision ID: graham.bancroft@canonical.com-20120528164331-qs08npdfj9snetgq
Amend core CSS
- files added:
- static/css/.DS_Store
- files removed:
- static/css/core-pattern-ubuntu.scss
- files modified:
- static/css/core-constants.scss
added
removed
static/css/core-pattern-ubuntu.scss
1
@charset "UTF-8";
2
/**
3
* Ubuntu Patterns Stylesheet
4
*
5
* The CSS file required by Ubuntu patterns page
6
*
7
* @project Ubuntu Patterns
8
* @author Web Team at Canonical Ltd
9
* @copyright 2012 Canonical Ltd
10
*
11
*/
12
13
/*
14
Color classes that need replacing
15
16
.box-aubergine
17
.box-aubergine a
18
.box-grey
19
.box-orange
20
.box-orange a
21
.quote-grey-bottom-right
22
.quote-orange-bottom-left
23
.quote-orange-bottom-right
24
.quote-white
25
26
*/
27
28
/**
29
* Links
30
*
31
* @section links
32
*/
33
34
a.link-cta-download, a.link-cta-homepage {
35
@include rounded_corners(30px);
36
@include box_shadow(0 2px 2px 0 #C2C2C2);
37
color: white;
38
display: block;
39
@include font_size (16); /* (16) desired value in px, this is divided by the baseline font-size value to reach the em value */
40
float: left;
41
margin: 1.538em 0;
42
padding: 0 $gutter_width;
43
}
44
45
a.link-cta-homepage , a.link-cta-ubuntu{
46
background: url("../img/patterns/cta-background.png") repeat-x scroll 0 0 $ubuntu_orange;
47
}
48
49
a.link-cta-download {
50
@include font_size (20); /* (20) desired value in px, this is divided by the baseline font-size value to reach the em value */
51
background: url("../img/patterns/cta-background.png") repeat-x scroll left bottom #F25C2C;
52
border: 1px solid #DE4220;
53
padding: 9px 20px 11px;
54
}
55
56
a.link-cta-download:hover {
57
background: url("../img/patterns/cta-background-hover.png") repeat-x scroll left top #F25C2C;
58
text-decoration: none;
59
}
60
61
a.link-cta-ubuntu,
62
a.link-cta-canonical,
63
a.link-cta-contact {
64
@include font_size (16); /* (16) desired value in px, this is divided by the baseline font-size value to reach the em value */
65
@include rounded_corners(4px);
66
color: $canonical_aubergine;
67
display: block;
68
float: left;
69
margin: 0;
70
padding: 6px 10px;
71
}
72
73
a.link-cta-ubuntu {
74
background-color: $ubuntu_orange;
75
color: #fff;
76
}
77
78
a.link-cta-ubuntu:hover {
79
text-decoration: none;
80
}
81
82
a.link-cta-canonical, a.link-cta-contact {
83
background-color: #fff;
84
}
85
86
a.link-cta-contact {
87
background: url("../img/patterns/background-white-cta.png") repeat-x scroll left bottom #fff;
88
border: 1px solid #DE4220;
89
color: $cool_grey;
90
}
91
92
.four-col p {
93
.link-cta-canonical, .link-cta-contact, link-cta-ubuntu {
94
text-align: center;
95
width: $four_col - ( $gutter_width * 2 );
96
margin-bottom: 0;
97
}
98
}
99
100
101
/**
102
* Forms
103
*
104
* Global form element styles
105
*
106
* @section forms
107
*/
108
109
form .fieldset-1 { background-image: url("../img/patterns/fieldsets-1.png"); }
110
form .fieldset-2 { background-image: url("../img/patterns/fieldsets-2.png"); }
111
form .fieldset-3 { background-image: url("../img/patterns/fieldsets-3.png"); }
112
form .fieldset-4 { background-image: url("../img/patterns/fieldsets-4.png"); }
113
114
form fieldset h3 {
115
border-bottom: 1px dotted #DFDCD9;
116
margin-bottom: 9px;
117
padding-bottom: 10px;
118
}
119
120
form fieldset li:first-child { margin-top: 0; }
121
122
form input[type="text"], form textarea {
123
@include rounded_corners(2px);
124
background: none repeat scroll 0 0 white;
125
border: 1px solid #999999;
126
display:block;
127
font: 14px "Ubuntu","Ubuntu Beta",UbuntuBeta,Ubuntu,"Bitstream Vera Sans","DejaVu Sans",Tahoma,sans-serif;
128
padding: 4px;
129
width: 300px;
130
}
131
132
input, select {
133
vertical-align: middle;
134
width: 310px;
135
}
136
137
form input[type="checkbox"], form input[type="radio"] {
138
margin: 0;
139
width:auto;
140
}
141
142
form input[type="checkbox"] + label,
143
form input[type="radio"] + label{
144
display: inline;
145
margin-left: 5px;
146
vertical-align: middle;
147
width: auto;
148
}
149
150
form input[type="submit"] {
151
background: url("../img/patterns/background-ubuntu-cta.png") repeat-x scroll center 0 $ubuntu_orange;
152
border: 0 none;
153
@include rounded_corners(4px);
154
box-shadow: none;
155
color: #fff;
156
display: block;
157
@include font_size (16); /* (16) desired value in px, this is divided by the baseline font-size value to reach the em value */
158
margin-top: 20px;
159
padding: 10px 14px;
160
text-shadow: none;
161
width: auto;
162
}
163
164
/**
165
* Tables
166
*
167
* @section tables
168
*/
169
170
thead th:first-of-type { text-align: left; }
171
172
th[scope="col"] {
173
background: none repeat scroll 0 0 #E2D4DC;
174
color: $canonical_aubergine;
175
text-align: center;
176
}
177
178
tbody th[rowspan] { background: none repeat scroll 0 0 #F7F2F6; }
179
tfoot th[rowspan] { background: none repeat scroll 0 0 #DFDCD9; }
180
181
tfoot td, tfoot th {
182
font-weight: bold;
183
background: none repeat scroll 0 0 #DFDCD9;
184
}
185
186
/**
187
* Components
188
*
189
* @section components
190
*/
191
192
.box {
193
border: 1px solid #dfdcd9;
194
padding: 1.333em $gutter_width;
195
@include rounded_corners(4px);
196
}
197
198
.box-dropshadow { @include box_shadow(0 2px 2px 0 #c2c2c2); }
199
200
.no-border { border: none; }
201
202
.four-feature {
203
background: $box_solid_grey;
204
float: left;
205
}
206
207
.three-feature ul, .four-feature ul { margin-left: 0; }
208
209
.three-feature li, .four-feature li{
210
float: left;
211
list-style: none outside none;
212
margin-bottom:0;
213
margin-right: $gutter_width;
214
overflow: hidden;
215
text-indent: 0;
216
}
217
218
.four-feature li { width: $three_col - ( $gutter_width * .5 ); }
219
.three-feature li { width: $four_col - ( $gutter_width * 1.3); }
220
221
.three-feature li.last, .four-feature li.last { margin-right: 0; }
222
223
.three-feature li.four-col img {
224
height: auto;
225
max-width: 100%;
226
}
227
228
.three-feature h3, .four-feature h3 {
229
@include font_size (15); /* (15) desired value in px, this is divided by the baseline font-size value to reach the em value */
230
font-weight: bold;
231
margin: 10px 0 6px;
232
}
233
234
.box-feature-list, .box-cta-list {
235
@include rounded_corners(4px);
236
background: $box_solid_grey;
237
border: 1px solid #DFDCD9;
238
margin-bottom: 20px;
239
padding: 11px ($gutter_width / 3) 6px;
240
}
241
242
body.download .row-box .box { background: #fff; }
243
244
.box-feature-list h2, .box-cta-list h2 {
245
@include font_size (24); /* (24) desired value in px, this is divided by the baseline font-size value to reach the em value */
246
color: $cool_grey;
247
line-height: 1.2;
248
margin-bottom: 9px;
249
margin-left: 8px;
250
}
251
252
.box-feature-list div, .box-cta-list div {
253
@include rounded_corners(4px);
254
background: #fff;
255
overflow: hidden;
256
padding: 15px ($gutter_width / 2) 0;
257
}
258
259
.box-feature-list ul.list {
260
float: left;
261
margin-bottom: 0;
262
margin-right: $gutter_width / 2;
263
width: $two_col + ($gutter_width * 3.4);
264
}
265
266
.row-box .box-feature-list ul.list { width: $two_col + ($gutter_width * 2.9); }
267
268
.eight-col .box-feature-list ul.list { width: $three_col - ($gutter_width * 1.99); }
269
270
.twelve-col .box-feature-list ul.list { width: $six_col - ($gutter_width / 1.7); margin-bottom: 1.533em; }
271
272
.box-feature-list ul, .box-cta-list ul{
273
margin-left: 0;
274
display: block;
275
}
276
277
.box-feature-list ul.last { margin-right: 0; }
278
279
.box-feature-list ul.list li {
280
border-bottom: 1px dotted $warm_grey;
281
list-style: none outside none;
282
padding-bottom: 8px;
283
}
284
285
.box-feature-list ul.list li.last { border: 0; }
286
287
.box-feature-list ul.list li:last-child{
288
border:0;
289
padding-bottom:0;
290
}
291
292
.box-cta-list ul.three-vertical li {
293
float: left;
294
text-align: center;
295
width: 33.3%;
296
list-style: none outside none;
297
}
298
299
.box-get-ubuntu li {
300
float: left;
301
list-style-type: none;
302
text-align: center;
303
width: 25%;
304
}
305
306
.box-cta-list ul.three-vertical li a,
307
.box-get-ubuntu li a {
308
background: none no-repeat scroll center -127px transparent;
309
display:block;
310
padding-top:75px;
311
}
312
313
.box-get-ubuntu li a {
314
background: url(../img/pictograms/sprite-pictograms-get-ubuntu-66x772.png) top center no-repeat;
315
line-height: 1.3;
316
}
317
318
.box-get-ubuntu li.cd a { background-position: center -273px; }
319
.box-get-ubuntu li.windows a { background-position: center -546px; }
320
.box-get-ubuntu li.download a { background-position: center -819px; }
321
322
.box-get-ubuntu li a:hover { background-position: center -141px; }
323
.box-get-ubuntu li.cd a:hover { background-position: center -414px; }
324
.box-get-ubuntu li.windows a:hover { background-position: center -687px; }
325
.box-get-ubuntu li.download a:hover { background-position: center -960px; }
326
327
.box-canonical {
328
background: $canonical_aubergine;
329
color:#fff;
330
}
331
/*
332
.box-aubergine a {
333
color: #fff;
334
}
335
.box-grey{
336
background:#EFEEEC;
337
}
338
.box-orange{
339
background:$ubuntu_orange;
340
color:#fff;
341
}
342
.box-aubergine a,
343
.box-orange a{
344
color:#fff;
345
}
346
*/
347
.arrow-right, .arrow-up, .arrow-down, .arrow-left {
348
height: 11px;
349
position: absolute;
350
width: 18px;
351
}
352
353
.arrow-right{
354
background: url("../img/patterns/arrow-right.png") 0 0 no-repeat;
355
height: 18px;
356
right: -11px;
357
top: 20px;
358
width: 11px;
359
}
360
.arrow-up{
361
background: url("../img/patterns/arrow-up.png") 0 0 no-repeat;
362
left: 20px;
363
top: -11px;
364
}
365
.arrow-down{
366
background: url("../img/patterns/arrow-down.png") 0 0 no-repeat;
367
bottom: -11px;
368
right: 20px;
369
}
370
.arrow-left{
371
background: url("../img/patterns/arrow-left.png") 0 0 no-repeat;
372
bottom: 20px;
373
height: 18px;
374
left: -11px;
375
width: 11px;
376
}
377
378
.where-to-find-us ul{
379
margin-left:0;
380
margin-bottom: 0;
381
}
382
383
.where-to-find-us li{
384
border-top: 1px dotted $warm_grey;
385
list-style-type: none;
386
margin-bottom: 0;
387
padding: 10px 0;
388
text-indent: 0;
389
}
390
391
.where-to-find-us a{
392
padding-left: 26px;
393
display: block;
394
}
395
396
.where-to-find-us .ask-ubuntu a { background: url("../img/patterns/icon-irc.png") 0 0 no-repeat; }
397
.where-to-find-us .mailing-lists a { background: url("../img/patterns/icon-mail.png") 0 0 no-repeat; }
398
.where-to-find-us .ubuntu-blog a { background: url("../img/patterns/icon-rss.png") 0 0 no-repeat; }
399
400
.list-divs, .list-arrows, .list-ticks {
401
list-style: none;
402
margin-left: 0;
403
}
404
405
.list-divs li, .list-arrows li, .list-ticks li {
406
border-bottom: 1px dotted $warm_grey;
407
margin-bottom: 0;
408
padding: .769em 0;
409
}
410
.list-divs li:first-of-type { padding-top: 0; }
411
412
.list-divs li:last-of-type {
413
border: 0 none;
414
padding-bottom: 0;
415
}
416
417
.list-arrows li, .list-ticks li {
418
background: url(http://www.ubuntu.com/sites/www.ubuntu.com/files/active/natty-consumer-pages/css/feats-tick.gif) no-repeat left 10px;
419
padding: .769em 0 .769em 30px;
420
}
421
422
.list-ticks-canonical li{
423
background: url('../img/patterns/purpletick.gif') 0 4px no-repeat;
424
border-bottom: 1px dotted #aea79f;
425
float: left;
426
margin: 0 0 10px;
427
padding: 0 0 10px 25px;
428
}
429
430
.list-arrows li:last-of-type, .list-ticks li.last-item {
431
border: 0 none;
432
padding-bottom: 3px;
433
}
434
435
.quote-white{
436
background: url("../img/patterns/quote-white-360x360.png") no-repeat scroll 20px -160px transparent;
437
color: $canonical_aubergine;
438
float: right;
439
height: 215px;
440
padding: 20px 60px 0 60px;
441
position: relative;
442
width: 290px;
443
margin-top: 0;
444
}
445
446
.quote p:first-child {
447
@include font_size (16); /* (16) desired value in px, this is divided by the baseline font-size value to reach the em value */
448
line-height: 1.3;
449
}
450
451
.quote-orange-bottom-right {
452
background: url("../img/patterns/quote-orange-br-287x287.png") no-repeat scroll 0 0 transparent;
453
color: #fff;
454
height: 167px;
455
padding: 60px 40px 60px 40px;
456
position: absolute;
457
right: -($gutter_width * 2);
458
top: -($gutter_width * 4.5);
459
width: 207px;
460
}
461
462
.quote-orange-bottom-left {
463
background: url("../img/patterns/quote-orange-bl-287x287.png") no-repeat scroll 0 0 transparent;
464
color: #fff;
465
height: 167px;
466
padding: 60px 40px 60px 40px;
467
width: 207px;
468
}
469
470
.quote-grey-bottom-right{
471
background: url("../img/patterns/quote-grey-br-211x211.png") no-repeat scroll 0 0 transparent;
472
color: #fff;
473
height: 152px;
474
line-height: 40px;
475
margin-left: 20px;
476
padding: 60px 0 0;
477
text-align: center;
478
width: 211px;
479
}
480
481
.quote-grey-bottom-right p:first-child {
482
@include font_size (36); /* (36) desired value in px, this is divided by the baseline font-size value to reach the em value */
483
}
484
485
.pull-wrap {
486
width: $twelve_col - $five_col;
487
padding-right: $five_col;
488
}
489
490
.pull-quote {
491
@include font_size (24); /* (16) desired value in px, this is divided by the baseline font-size value to reach the em value */
492
color: $warm_grey;
493
font-weight: bold;
494
line-height: 1.3;
495
position: absolute;
496
right: $gutter_width;
497
width: $three_col - $gutter_width;
498
padding: 0 0 0 $two_col;
499
}
500
501
.deep-steps{
502
margin:0;
503
}
504
505
.deep-steps li{
506
padding: 10px 0;
507
border-bottom: 1px dotted $warm_grey;
508
list-style-type: none;
509
text-indent: 0;
510
margin:0;
511
}
512
513
.deep-steps li.last{
514
border-bottom:none;
515
padding-bottom: 0;
516
}
517
518
.deep-steps .item-download a,
519
.deep-steps .item-contact a,
520
.deep-steps .item-desktop a,
521
.deep-steps .item-server a{
522
padding-left: 47px;
523
display: block;
524
height: 37px;
525
line-height: 37px;
526
}
527
528
.deep-steps .item-download a{
529
background:url('../img/patterns/pictogram-grey-download.png') no-repeat;
530
}
531
.deep-steps .item-contact a{
532
background:url('../img/patterns/pictogram-grey-contact.png') no-repeat;
533
}
534
.deep-steps .item-desktop a{
535
background:url('../img/patterns/pictogram-grey-desktop.png') no-repeat;
536
}
537
.deep-steps .item-server a{
538
background:url('../img/patterns/pictogram-grey-server.png') no-repeat;
539
}
540
541
.newletter-signup fieldset{
542
background:none;
543
padding:0;
544
}
545
546
.newletter-signup input[type="text"]{
547
width:240px;
548
margin-bottom:20px;
549
}
550
.newletter-signup input[type="checkbox"]{
551
width: auto;
552
margin-right:4px;
553
}
554
555
.newletter-signup label{
556
width:240px;
557
cursor: pointer;
558
margin: 0;
559
display: inline;
560
line-height: 16px;
561
}
562
563
.newletter-signup input[type="radio"] {
564
margin: 0;
565
}
566
567
/**
568
* Helper classes
569
*
570
* @section helper
571
*/
572
573
.corporate-page{
574
background: $dark_aubergine;
575
}
576
577
.corporate-page .twelve-col {
578
background:#fff;
579
@include rounded_corners(4px);
580
}
581
582
.link-top {
583
border-bottom: 1px dotted $warm_grey;
584
clear: both;
585
margin-bottom: 20px;
586
}
587
588
.link-top a {
589
float: right;
590
margin-top: -13px;
591
background: white;
592
padding: 5px;
593
margin-right: 10px;
594
}
595
596
.enterprise-dot-pattern{
597
background:url('../img/patterns/enterprise-dot-pattern.png')
598
}
599
600
.developer-dot-pattern{
601
background:url('../img/patterns/developer-dot-pattern.png')
602
}
603
Loggerhead is a web-based interface for Breezy
Version: 2.0.1