less/bootstrap/scaffolding.less

   1 //
   2 // Scaffolding
   3 // --------------------------------------------------
   4
   5
   6 // Reset the box-sizing
   7
   8 * {
   9   .box-sizing(border-box);
  10 }
  11 *:before,
  12 *:after {
  13   .box-sizing(border-box);
  14 }
  15
  16
  17 // Body reset
  18
  19 html {
  20   font-size: 62.5%;
  21   -webkit-tap-highlight-color: rgba(0,0,0,0);
  22 }
  23
  24 body {
  25   font-family: @font-family-base;
  26   font-size: @font-size-base;
  27   line-height: @line-height-base;
  28   color: @text-color;
  29   background-color: @body-bg;
  30 }
  31
  32 // Reset fonts for relevant elements
  33 input,
  34 button,
  35 select,
  36 textarea {
  37   font-family: inherit;
  38   font-size: inherit;
  39   line-height: inherit;
  40 }
  41
  42
  43 // Links
  44
  45 a {
  46   color: @link-color;
  47   text-decoration: none;
  48
  49   &:hover,
  50   &:focus {
  51     color: @link-hover-color;
  52     text-decoration: underline;
  53   }
  54
  55   &:focus {
  56     .tab-focus();
  57   }
  58 }
  59
  60
  61 // Images
  62
  63 img {
  64   vertical-align: middle;
  65 }
  66
  67 // Responsive images (ensure images don't scale beyond their parents)
  68 .img-responsive {
  69   .img-responsive();
  70 }
  71
  72 // Rounded corners
  73 .img-rounded {
  74   border-radius: @border-radius-large;
  75 }
  76
  77 // Image thumbnails
  78 //
  79 // Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
  80 .img-thumbnail {
  81   padding: @thumbnail-padding;
  82   line-height: @line-height-base;
  83   background-color: @thumbnail-bg;
  84   border: 1px solid @thumbnail-border;
  85   border-radius: @thumbnail-border-radius;
  86   .transition(all .2s ease-in-out);
  87
  88   // Keep them at most 100% wide
  89   .img-responsive(inline-block);
  90 }
  91
  92 // Perfect circle
  93 .img-circle {
  94   border-radius: 50%; // set radius in percents
  95 }
  96
  97
  98 // Horizontal rules
  99
 100 hr {
 101   margin-top:    @line-height-computed;
 102   margin-bottom: @line-height-computed;
 103   border: 0;
 104   border-top: 1px solid @hr-border;
 105 }
 106
 107
 108 // Only display content to screen readers
 109 //
 110 // See: http://a11yproject.com/posts/how-to-hide-content/
 111
 112 .sr-only {
 113   position: absolute;
 114   width: 1px;
 115   height: 1px;
 116   margin: -1px;
 117   padding: 0;
 118   overflow: hidden;
 119   clip: rect(0,0,0,0);
 120   border: 0;
 121 }