Mercurial > wikked

comparison static/bootstrap/less/scaffolding.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Scaffolding 2 // Scaffolding
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 5
6 // Reset the box-sizing
7
8 *,
9 *:before,
10 *:after {
11 .box-sizing(border-box);
12 }
13
14
6 // Body reset 15 // Body reset
7 // ------------------------- 16
17 html {
18 font-size: 62.5%;
19 -webkit-tap-highlight-color: rgba(0,0,0,0);
20 }
8 21
9 body { 22 body {
10 margin: 0; 23 font-family: @font-family-base;
11 font-family: @baseFontFamily; 24 font-size: @font-size-base;
12 font-size: @baseFontSize; 25 line-height: @line-height-base;
13 line-height: @baseLineHeight; 26 color: @text-color;
14 color: @textColor; 27 background-color: @body-bg;
15 background-color: @bodyBackground; 28 }
29
30 // Reset fonts for relevant elements
31 input,
32 button,
33 select,
34 textarea {
35 font-family: inherit;
36 font-size: inherit;
37 line-height: inherit;
16 } 38 }
17 39
18 40
19 // Links 41 // Links
20 // -------------------------
21 42
22 a { 43 a {
23 color: @linkColor; 44 color: @link-color;
24 text-decoration: none; 45 text-decoration: none;
25 } 46
26 a:hover, 47 &:hover,
27 a:focus { 48 &:focus {
28 color: @linkColorHover; 49 color: @link-hover-color;
29 text-decoration: underline; 50 text-decoration: underline;
51 }
52
53 &:focus {
54 .tab-focus();
55 }
30 } 56 }
31 57
32 58
33 // Images 59 // Images
34 // ------------------------- 60
61 img {
62 vertical-align: middle;
63 }
64
65 // Responsive images (ensure images don't scale beyond their parents)
66 .img-responsive {
67 .img-responsive();
68 }
35 69
36 // Rounded corners 70 // Rounded corners
37 .img-rounded { 71 .img-rounded {
38 .border-radius(6px); 72 border-radius: @border-radius-large;
39 } 73 }
40 74
41 // Add polaroid-esque trim 75 // Image thumbnails
42 .img-polaroid { 76 //
43 padding: 4px; 77 // Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
44 background-color: #fff; 78 .img-thumbnail {
45 border: 1px solid #ccc; 79 padding: @thumbnail-padding;
46 border: 1px solid rgba(0,0,0,.2); 80 line-height: @line-height-base;
47 .box-shadow(0 1px 3px rgba(0,0,0,.1)); 81 background-color: @thumbnail-bg;
82 border: 1px solid @thumbnail-border;
83 border-radius: @thumbnail-border-radius;
84 .transition(all .2s ease-in-out);
85
86 // Keep them at most 100% wide
87 .img-responsive(inline-block);
48 } 88 }
49 89
50 // Perfect circle 90 // Perfect circle
51 .img-circle { 91 .img-circle {
52 .border-radius(500px); // crank the border-radius so it works with most reasonably sized images 92 border-radius: 50%; // set radius in percents
53 } 93 }
94
95
96 // Horizontal rules
97
98 hr {
99 margin-top: @line-height-computed;
100 margin-bottom: @line-height-computed;
101 border: 0;
102 border-top: 1px solid @hr-border;
103 }
104
105
106 // Only display content to screen readers
107 //
108 // See: http://a11yproject.com/posts/how-to-hide-content/
109
110 .sr-only {
111 position: absolute;
112 width: 1px;
113 height: 1px;
114 margin: -1px;
115 padding: 0;
116 overflow: hidden;
117 clip: rect(0,0,0,0);
118 border: 0;
119 }