scaffolding.less 1.37 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
9
// Reset the box-sizing
// -------------------------

* {
Mark Otto's avatar
Mark Otto committed
10
  .box-sizing(border-box);
Mark Otto's avatar
Mark Otto committed
11
12
13
}


14
// Body reset
15
// -------------------------
Jacob Thornton's avatar
Jacob Thornton committed
16

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

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

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

40

41
// Links
42
// -------------------------
Jacob Thornton's avatar
Jacob Thornton committed
43
44

a {
Mark Otto's avatar
Mark Otto committed
45
  color: @link-color;
Jacob Thornton's avatar
Jacob Thornton committed
46
  text-decoration: none;
47
}
48
49
a:hover,
a:focus {
50
  color: @link-hover-color;
51
  text-decoration: underline;
Jacob Thornton's avatar
Jacob Thornton committed
52
}
Mark Otto's avatar
Mark Otto committed
53
54
55
a:focus {
  .tab-focus();
}
56
57
58
59
60


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

Mark Otto's avatar
Mark Otto committed
61
img {
Mark Otto's avatar
Mark Otto committed
62
63
64
65
66
  vertical-align: middle;
}

// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
67
  display: inline-block;
Chris Rebert's avatar
Chris Rebert committed
68
  max-width: 100%; // Part 1: Set a maximum relative to the parent
Mark Otto's avatar
Mark Otto committed
69
70
71
  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}

Mark Otto's avatar
Mark Otto committed
72
// Rounded corners
73
.img-rounded {
74
  border-radius: 6px;
75
76
}

77
// Image thumbnails
78
// See thumbnails.less for `.img-thumbnail`
79

Mark Otto's avatar
Mark Otto committed
80
// Perfect circle
81
.img-circle {
82
  border-radius: 500px; // crank the border-radius so it works with most reasonably sized images
83
}