123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- //
- // Scaffolding
- // --------------------------------------------------
- // Reset the box-sizing
- //
- // Heads up! This reset may cause conflicts with some third-party widgets.
- // For recommendations on resolving such conflicts, see
- // https://getbootstrap.com/docs/3.4/getting-started/#third-box-sizing
- * {
- .box-sizing(border-box);
- }
- *:before,
- *:after {
- .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 {
- .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 {
- .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;
- .transition(all .2s ease-in-out);
- // Keep them at most 100% wide
- .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: https://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 https://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;
- }
|