2012-06-29 00:46:45 -04:00
|
|
|
//
|
2011-11-26 00:34:55 -05:00
|
|
|
// Scaffolding
|
2012-06-29 00:46:45 -04:00
|
|
|
// --------------------------------------------------
|
2011-05-03 21:09:25 -04:00
|
|
|
|
2011-08-17 01:58:01 -04:00
|
|
|
|
2013-03-10 14:24:07 -04:00
|
|
|
// Reset the box-sizing
|
|
|
|
// -------------------------
|
|
|
|
|
2013-08-13 00:26:43 -04:00
|
|
|
*,
|
|
|
|
*:before,
|
|
|
|
*:after {
|
2013-03-17 14:15:04 -04:00
|
|
|
.box-sizing(border-box);
|
2013-03-10 14:24:07 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2012-02-21 11:24:18 -05:00
|
|
|
// Body reset
|
2012-07-10 00:01:29 -04:00
|
|
|
// -------------------------
|
2011-05-03 21:09:25 -04:00
|
|
|
|
2013-01-15 20:55:14 -05:00
|
|
|
html {
|
|
|
|
font-size: 62.5%;
|
|
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
|
|
}
|
|
|
|
|
2011-05-03 21:09:25 -04:00
|
|
|
body {
|
2013-03-26 20:12:17 -04:00
|
|
|
font-family: @font-family-base;
|
2013-04-05 14:42:29 -04:00
|
|
|
font-size: @font-size-base;
|
2013-03-26 20:12:17 -04:00
|
|
|
line-height: @line-height-base;
|
2012-11-30 17:37:24 -05:00
|
|
|
color: @text-color;
|
2013-03-31 20:29:05 -04:00
|
|
|
background-color: @body-bg;
|
2012-11-30 03:24:17 -05:00
|
|
|
}
|
|
|
|
|
2013-06-25 19:07:51 -04:00
|
|
|
// Reset fonts for relevant elements
|
2012-11-30 03:24:17 -05:00
|
|
|
input,
|
|
|
|
button,
|
|
|
|
select,
|
|
|
|
textarea {
|
2013-03-26 20:12:17 -04:00
|
|
|
font-family: inherit;
|
|
|
|
font-size: inherit;
|
|
|
|
line-height: inherit;
|
2011-05-03 21:09:25 -04:00
|
|
|
}
|
|
|
|
|
2011-09-03 02:01:38 -04:00
|
|
|
|
2012-02-21 11:24:18 -05:00
|
|
|
// Links
|
2012-07-10 00:01:29 -04:00
|
|
|
// -------------------------
|
2011-05-03 21:09:25 -04:00
|
|
|
|
|
|
|
a {
|
2012-11-30 17:37:24 -05:00
|
|
|
color: @link-color;
|
2011-05-03 21:09:25 -04:00
|
|
|
text-decoration: none;
|
2012-01-27 16:20:02 -05:00
|
|
|
}
|
2013-01-02 17:39:21 -05:00
|
|
|
a:hover,
|
|
|
|
a:focus {
|
2013-03-31 20:27:22 -04:00
|
|
|
color: @link-hover-color;
|
2012-01-27 16:20:02 -05:00
|
|
|
text-decoration: underline;
|
2011-05-03 21:09:25 -04:00
|
|
|
}
|
2012-12-20 23:52:20 -05:00
|
|
|
a:focus {
|
|
|
|
.tab-focus();
|
|
|
|
}
|
2012-07-27 03:06:43 -04:00
|
|
|
|
|
|
|
|
|
|
|
// Images
|
|
|
|
// -------------------------
|
|
|
|
|
2012-12-20 23:52:20 -05:00
|
|
|
img {
|
2013-06-28 03:09:10 -04:00
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Responsive images (ensure images don't scale beyond their parents)
|
|
|
|
.img-responsive {
|
2013-07-01 22:42:26 -04:00
|
|
|
display: inline-block;
|
2013-06-25 19:07:51 -04:00
|
|
|
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
2012-12-20 23:52:20 -05:00
|
|
|
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
|
|
|
}
|
|
|
|
|
2012-09-04 14:31:48 -04:00
|
|
|
// Rounded corners
|
2012-07-27 03:06:43 -04:00
|
|
|
.img-rounded {
|
2013-07-18 02:41:05 -04:00
|
|
|
border-radius: @border-radius-large;
|
2012-07-27 03:06:43 -04:00
|
|
|
}
|
|
|
|
|
2013-01-17 23:16:04 -05:00
|
|
|
// Image thumbnails
|
2013-01-17 23:18:03 -05:00
|
|
|
// See thumbnails.less for `.img-thumbnail`
|
2012-07-27 03:06:43 -04:00
|
|
|
|
2012-09-04 14:31:48 -04:00
|
|
|
// Perfect circle
|
2012-07-27 03:06:43 -04:00
|
|
|
.img-circle {
|
2013-08-09 07:57:49 -04:00
|
|
|
border-radius: 50%; // set radius in percents
|
2012-08-20 00:12:52 -04:00
|
|
|
}
|
2013-07-05 15:21:05 -04:00
|
|
|
|
|
|
|
|
|
|
|
// Horizontal rules
|
|
|
|
// -------------------------
|
|
|
|
|
|
|
|
hr {
|
|
|
|
margin-top: @line-height-computed;
|
|
|
|
margin-bottom: @line-height-computed;
|
|
|
|
border: 0;
|
|
|
|
border-top: 1px solid @hr-border;
|
|
|
|
}
|
|
|
|
|
Improve accessibility (Section 508, WCAG)
This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices.
What was done
- Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria)
- Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users.
- Advised users to always use label elements. For inline forms, they can hide them with `.sr-only`
- Added 'Skip navigation' link
- Added "Accessibility" section to getting-started.html.
What *wasn't* done
- Contrast issues (twbs#3572)
- Tooltips (twbs#8469)
- Documentation re: usage of icons, since they now live in a separate repo
Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out.
2013-08-07 00:25:36 -04:00
|
|
|
// Only display content to screen readers
|
|
|
|
// See: http://a11yproject.com/posts/how-to-hide-content/
|
|
|
|
// -------------------------
|
|
|
|
|
|
|
|
.sr-only {
|
2013-08-07 03:28:44 -04:00
|
|
|
position: absolute;
|
|
|
|
width: 1px;
|
Improve accessibility (Section 508, WCAG)
This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices.
What was done
- Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria)
- Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users.
- Advised users to always use label elements. For inline forms, they can hide them with `.sr-only`
- Added 'Skip navigation' link
- Added "Accessibility" section to getting-started.html.
What *wasn't* done
- Contrast issues (twbs#3572)
- Tooltips (twbs#8469)
- Documentation re: usage of icons, since they now live in a separate repo
Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out.
2013-08-07 00:25:36 -04:00
|
|
|
height: 1px;
|
|
|
|
margin: -1px;
|
|
|
|
padding: 0;
|
2013-08-07 03:28:44 -04:00
|
|
|
overflow: hidden;
|
|
|
|
clip: rect(0 0 0 0);
|
|
|
|
border: 0;
|
Improve accessibility (Section 508, WCAG)
This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices.
What was done
- Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria)
- Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users.
- Advised users to always use label elements. For inline forms, they can hide them with `.sr-only`
- Added 'Skip navigation' link
- Added "Accessibility" section to getting-started.html.
What *wasn't* done
- Contrast issues (twbs#3572)
- Tooltips (twbs#8469)
- Documentation re: usage of icons, since they now live in a separate repo
Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out.
2013-08-07 00:25:36 -04:00
|
|
|
}
|