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