scaffolding.less 1.84 KB
Newer Older
1
//
2
// Scaffolding
3
// --------------------------------------------------
Jacob Thornton's avatar
Jacob Thornton committed
4

5

Mark Otto's avatar
Mark Otto committed
6
7
8
// Reset the box-sizing
// -------------------------

9
10
11
*,
*:before,
*:after {
Mark Otto's avatar
Mark Otto committed
12
  .box-sizing(border-box);
Mark Otto's avatar
Mark Otto committed
13
14
15
}


16
// Body reset
17
// -------------------------
Jacob Thornton's avatar
Jacob Thornton committed
18

19
20
21
22
23
html {
  font-size: 62.5%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Jacob Thornton's avatar
Jacob Thornton committed
24
body {
Mark Otto's avatar
Mark Otto committed
25
  font-family: @font-family-base;
Mark Otto's avatar
Mark Otto committed
26
  font-size: @font-size-base;
Mark Otto's avatar
Mark Otto committed
27
  line-height: @line-height-base;
Mark Otto's avatar
Mark Otto committed
28
  color: @text-color;
29
  background-color: @body-bg;
30
31
}

Chris Rebert's avatar
Chris Rebert committed
32
// Reset fonts for relevant elements
33
34
35
36
input,
button,
select,
textarea {
Mark Otto's avatar
Mark Otto committed
37
38
39
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
Jacob Thornton's avatar
Jacob Thornton committed
40
41
}

42
43
44
45
46
47
48
49
// Reset unusual Firefox-on-Android default style, see https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
textarea {
  background-image: none;
}

50

51
// Links
52
// -------------------------
Jacob Thornton's avatar
Jacob Thornton committed
53
54

a {
Mark Otto's avatar
Mark Otto committed
55
  color: @link-color;
Jacob Thornton's avatar
Jacob Thornton committed
56
  text-decoration: none;
Zlatan Vasović's avatar
Zlatan Vasović committed
57
58
59
60
61
62
63
64
65
66

  &:hover,
  &:focus {
    color: @link-hover-color;
    text-decoration: underline;
  }

  &:focus {
    .tab-focus();
  }
Mark Otto's avatar
Mark Otto committed
67
}
68
69
70
71
72


// Images
// -------------------------

Mark Otto's avatar
Mark Otto committed
73
img {
Mark Otto's avatar
Mark Otto committed
74
75
76
77
  vertical-align: middle;
}

// Responsive images (ensure images don't scale beyond their parents)
78
79
.img-responsive {
  .img-responsive();
Mark Otto's avatar
Mark Otto committed
80
81
}

Mark Otto's avatar
Mark Otto committed
82
// Rounded corners
83
.img-rounded {
84
  border-radius: @border-radius-large;
85
86
}

87
// Image thumbnails
88
// See thumbnails.less for `.img-thumbnail`
89

Mark Otto's avatar
Mark Otto committed
90
// Perfect circle
91
.img-circle {
92
  border-radius: 50%; // set radius in percents
93
}
94
95
96
97
98
99
100
101
102
103
104
105


// Horizontal rules
// -------------------------

hr {
  margin-top:    @line-height-computed;
  margin-bottom: @line-height-computed;
  border: 0;
  border-top: 1px solid @hr-border;
}

106
107
108
109
110
// Only display content to screen readers
// See: http://a11yproject.com/posts/how-to-hide-content/
// -------------------------

.sr-only {
Mark Otto's avatar
Mark Otto committed
111
112
  position: absolute;
  width: 1px;
113
114
115
  height: 1px;
  margin: -1px;
  padding: 0;
Mark Otto's avatar
Mark Otto committed
116
117
118
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
119
}