123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- //
- // 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
- * {
- @include box-sizing(border-box);
- }
- *:before,
- *:after {
- @include box-sizing(border-box);
- }
- // Body reset
- html {
- font-size: 10px;
- -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;
- &:hover,
- &:focus {
- color: $link-hover-color;
- text-decoration: $link-hover-decoration;
- }
- &:focus {
- @include tab-focus;
- }
- }
- // Figures
- //
- // We reset this here because previously Normalize had no `figure` margins. This
- // ensures we don't break anyone's use of the element.
- figure {
- margin: 0;
- }
- // Images
- img {
- vertical-align: middle;
- }
- // Responsive images (ensure images don't scale beyond their parents)
- .img-responsive {
- @include img-responsive;
- }
- // Rounded corners
- .img-rounded {
- border-radius: $border-radius-large;
- }
- // Image thumbnails
- //
- // 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;
- @include transition(all .2s ease-in-out);
- // 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: $line-height-computed;
- margin-bottom: $line-height-computed;
- border: 0;
- 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;
- }
- // 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;
- }
- }
- // iOS "clickable elements" fix for role="button"
- //
- // Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
- // for traditionally non-focusable elements with role="button"
- // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
- [role="button"] {
- cursor: pointer;
- }
|