// Reset the box-sizing
-// -------------------------
-* {
+*,
+*:before,
+*:after {
.box-sizing(border-box);
}
// Body reset
-// -------------------------
html {
font-size: 62.5%;
// Links
-// -------------------------
a {
color: @link-color;
text-decoration: none;
-}
-a:hover,
-a:focus {
- color: @link-hover-color;
- text-decoration: underline;
-}
-a:focus {
- .tab-focus();
+
+ &:hover,
+ &:focus {
+ color: @link-hover-color;
+ text-decoration: underline;
+ }
+
+ &:focus {
+ .tab-focus();
+ }
}
// Images
-// -------------------------
img {
vertical-align: middle;
// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
- display: inline-block;
- max-width: 100%; // Part 1: Set a maximum relative to the parent
- height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+ .img-responsive();
}
// Rounded corners
}
// Image thumbnails
-// See thumbnails.less for `.img-thumbnail`
+//
+// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
+.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);
+
+ // Keep them at most 100% wide
+ .img-responsive(inline-block);
+}
// Perfect circle
.img-circle {
- border-radius: 500px; // crank the border-radius so it works with most reasonably sized images
+ border-radius: 50%; // set radius in percents
}
// Horizontal rules
-// -------------------------
hr {
margin-top: @line-height-computed;
border-top: 1px 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;
+ margin: -1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0,0,0,0);
+ border: 0;
+}