resources/scss/bootstrap-cust/_scaffolding.scss

   1 //
   2 // Scaffolding
   3 // --------------------------------------------------
   4
   5 // Reset the box-sizing
   6 //
   7 // Heads up! This reset may cause conflicts with some third-party widgets.
   8 // For recommendations on resolving such conflicts, see
   9 // http://getbootstrap.com/getting-started/#third-box-sizing
  10 * {
  11   @include box-sizing(border-box);
  12 }
  13
  14 *:before,
  15 *:after {
  16   @include box-sizing(border-box);
  17 }
  18
  19 // Body reset
  20
  21 html {
  22   font-size: 10px;
  23   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  24 }
  25
  26 body {
  27   font-family: $base-font-regular;
  28   font-size: $font-size-base;
  29   line-height: $line-height-base;
  30   color: $text-color;
  31   background-color: $body-bg;
  32 }
  33
  34 // Reset fonts for relevant elements
  35 input,
  36 button,
  37 select,
  38 textarea {
  39   font-family: inherit;
  40   font-size: inherit;
  41   line-height: inherit;
  42 }
  43
  44 // Links
  45
  46 a {
  47   color: $link-color;
  48   text-decoration: none;
  49
  50   &:hover,
  51   &:focus {
  52         color: $link-hover-color;
  53         text-decoration: $link-hover-decoration;
  54   }
  55
  56   &:focus {
  57         @include tab-focus;
  58   }
  59 }
  60
  61 // Figures
  62 //
  63 // We reset this here because previously Normalize had no `figure` margins. This
  64 // ensures we don't break anyone's use of the element.
  65
  66 figure {
  67   margin: 0;
  68 }
  69
  70 // Images
  71
  72 img {
  73   vertical-align: middle;
  74 }
  75
  76 // Responsive images (ensure images don't scale beyond their parents)
  77 .img-responsive {
  78   @include img-responsive;
  79 }
  80
  81 // Rounded corners
  82 .img-rounded {
  83   border-radius: $border-radius-large;
  84 }
  85
  86 // Image thumbnails
  87 //
  88 // Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
  89 .img-thumbnail {
  90   padding: $thumbnail-padding;
  91   line-height: $line-height-base;
  92   background-color: $thumbnail-bg;
  93   border: 1px solid $thumbnail-border;
  94   border-radius: $thumbnail-border-radius;
  95   @include transition(all .2s ease-in-out);
  96
  97   // Keep them at most 100% wide
  98   @include img-responsive(inline-block);
  99 }
 100
 101 // Perfect circle
 102 .img-circle {
 103   border-radius: 50%; // set radius in percents
 104 }
 105
 106 // Horizontal rules
 107
 108 hr {
 109   margin-top: $line-height-computed;
 110   margin-bottom: $line-height-computed;
 111   border: 0;
 112   border-top: 1px solid $hr-border;
 113 }
 114
 115 // Only display content to screen readers
 116 //
 117 // See: http://a11yproject.com/posts/how-to-hide-content/
 118
 119 .sr-only {
 120   position: absolute;
 121   width: 1px;
 122   height: 1px;
 123   margin: -1px;
 124   padding: 0;
 125   overflow: hidden;
 126   clip: rect(0, 0, 0, 0);
 127   border: 0;
 128 }
 129
 130 // Use in conjunction with .sr-only to only display content when it's focused.
 131 // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 132 // Credit: HTML5 Boilerplate
 133
 134 .sr-only-focusable {
 135   &:active,
 136   &:focus {
 137         position: static;
 138         width: auto;
 139         height: auto;
 140         margin: 0;
 141         overflow: visible;
 142         clip: auto;
 143   }
 144 }
 145
 146 // iOS "clickable elements" fix for role="button"
 147 //
 148 // Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
 149 // for traditionally non-focusable elements with role="button"
 150 // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 151
 152 [role="button"] {
 153   cursor: pointer;
 154 }