mindcoding-template/less/scaffolding.less

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