• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1//
2// Scaffolding
3// --------------------------------------------------
4
5
6// Reset the box-sizing
7//
8// Heads up! This reset may cause conflicts with some third-party widgets.
9// For recommendations on resolving such conflicts, see
10// http://getbootstrap.com/getting-started/#third-box-sizing
11* {
12  .box-sizing(border-box);
13}
14*:before,
15*:after {
16  .box-sizing(border-box);
17}
18
19
20// Body reset
21
22html {
23  font-size: 10px;
24  -webkit-tap-highlight-color: rgba(0,0,0,0);
25}
26
27body {
28  font-family: @font-family-base;
29  font-size: @font-size-base;
30  line-height: @line-height-base;
31  color: @text-color;
32  background-color: @body-bg;
33}
34
35// Reset fonts for relevant elements
36input,
37button,
38select,
39textarea {
40  font-family: inherit;
41  font-size: inherit;
42  line-height: inherit;
43}
44
45
46// Links
47
48a {
49  color: @link-color;
50  text-decoration: none;
51
52  &:hover,
53  &:focus {
54    color: @link-hover-color;
55    text-decoration: @link-hover-decoration;
56  }
57
58  &:focus {
59    .tab-focus();
60  }
61}
62
63
64// Figures
65//
66// We reset this here because previously Normalize had no `figure` margins. This
67// ensures we don't break anyone's use of the element.
68
69figure {
70  margin: 0;
71}
72
73
74// Images
75
76img {
77  vertical-align: middle;
78}
79
80// Responsive images (ensure images don't scale beyond their parents)
81.img-responsive {
82  .img-responsive();
83}
84
85// Rounded corners
86.img-rounded {
87  border-radius: @border-radius-large;
88}
89
90// Image thumbnails
91//
92// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
93.img-thumbnail {
94  padding: @thumbnail-padding;
95  line-height: @line-height-base;
96  background-color: @thumbnail-bg;
97  border: 1px solid @thumbnail-border;
98  border-radius: @thumbnail-border-radius;
99  .transition(all .2s ease-in-out);
100
101  // Keep them at most 100% wide
102  .img-responsive(inline-block);
103}
104
105// Perfect circle
106.img-circle {
107  border-radius: 50%; // set radius in percents
108}
109
110
111// Horizontal rules
112
113hr {
114  margin-top:    @line-height-computed;
115  margin-bottom: @line-height-computed;
116  border: 0;
117  border-top: 1px solid @hr-border;
118}
119
120
121// Only display content to screen readers
122//
123// See: http://a11yproject.com/posts/how-to-hide-content/
124
125.sr-only {
126  position: absolute;
127  width: 1px;
128  height: 1px;
129  margin: -1px;
130  padding: 0;
131  overflow: hidden;
132  clip: rect(0,0,0,0);
133  border: 0;
134}
135
136// Use in conjunction with .sr-only to only display content when it's focused.
137// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
138// Credit: HTML5 Boilerplate
139
140.sr-only-focusable {
141  &:active,
142  &:focus {
143    position: static;
144    width: auto;
145    height: auto;
146    margin: 0;
147    overflow: visible;
148    clip: auto;
149  }
150}
151
152
153// iOS "clickable elements" fix for role="button"
154//
155// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
156// for traditionally non-focusable elements with role="button"
157// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
158// Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged
159
160[role="button"] {
161  cursor: pointer;
162}