1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
//
// Scaffolding
// --------------------------------------------------
// Reset the box-sizing
//
// Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing
// Credit: Jon Neal & CSS-Tricks
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
// Make viewport responsive
//
// @viewport is supposed to eventually replace <meta name="viewport">. It's manually prefixed for forward-compatibility.
//
// @viewport is also needed because IE 10+ doesn't honor <meta name="viewport"> in some cases.
// (See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/)
//
// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// and https://github.com/twbs/bootstrap/issues/10497)
// and the fix for that involves a snippet of JavaScript to sniff the user agent and apply some conditional CSS.
// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@-webkit-viewport { width: device-width; }
@viewport { width: device-width; }
// Body reset
html {
font-size: $font-size-root;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
color: $text-color;
background-color: $body-bg;
}
// Reset fonts for relevant elements
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
// Links
a {
color: $link-color;
text-decoration: none;
@include hover-focus {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
&:focus {
@include tab-focus();
}
}
// Images
img {
// Make them responsive with `max-width` and `height`
max-width: 100%;
height: auto;
// Match vertical alignment of most other Bootstrapped elements
vertical-align: middle;
}
// Rounded corners
.img-rounded {
@include border-radius($border-radius-lg);
}
// Image thumbnails
.img-thumbnail {
padding: $thumbnail-padding;
line-height: $line-height-base;
background-color: $thumbnail-bg;
border: 1px solid $thumbnail-border;
border-radius: $thumbnail-border-radius;
transition: all .2s ease-in-out;
@include box-shadow(0 1px 2px rgba(0,0,0,.075));
// Keep them at most 100% wide
// @include img-responsive(inline-block);
}
// Perfect circle
.img-circle {
border-radius: 50%; // set radius in percents
}
// Horizontal rules
hr {
margin-top: $spacer;
margin-bottom: $spacer;
border: 0;
border-top: .0625rem solid $hr-border;
}
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate
.sr-only-focusable {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
}
|
