Commit | Line | Data |
---|---|---|
7b869721 S |
1 | // |
2 | // Scaffolding | |
3 | // -------------------------------------------------- | |
4 | ||
5 | ||
6 | // Reset the box-sizing | |
7 | ||
8 | *, | |
9 | *:before, | |
10 | *:after { | |
11 | .box-sizing(border-box); | |
12 | } | |
13 | ||
14 | ||
15 | // Body reset | |
16 | ||
17 | html { | |
18 | font-size: 62.5%; | |
19 | -webkit-tap-highlight-color: rgba(0,0,0,0); | |
20 | } | |
21 | ||
22 | body { | |
23 | font-family: @font-family-base; | |
24 | font-size: @font-size-base; | |
25 | line-height: @line-height-base; | |
26 | color: @text-color; | |
27 | background-color: @body-bg; | |
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; | |
38 | } | |
39 | ||
40 | ||
41 | // Links | |
42 | ||
43 | a { | |
44 | color: @link-color; | |
45 | text-decoration: none; | |
46 | ||
47 | &:hover, | |
48 | &:focus { | |
49 | color: @link-hover-color; | |
50 | text-decoration: underline; | |
51 | } | |
52 | ||
53 | &:focus { | |
54 | .tab-focus(); | |
55 | } | |
56 | } | |
57 | ||
58 | ||
59 | // Images | |
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 | } | |
69 | ||
70 | // Rounded corners | |
71 | .img-rounded { | |
72 | border-radius: @border-radius-large; | |
73 | } | |
74 | ||
75 | // Image thumbnails | |
76 | // | |
77 | // Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. | |
78 | .img-thumbnail { | |
79 | padding: @thumbnail-padding; | |
80 | line-height: @line-height-base; | |
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); | |
88 | } | |
89 | ||
90 | // Perfect circle | |
91 | .img-circle { | |
92 | border-radius: 50%; // set radius in percents | |
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 | } |