dashboard.css 1.48 KB
Newer Older
Mark Otto's avatar
Mark Otto committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
}


/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

20
21
22
23
24
/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
Mark Otto's avatar
Mark Otto committed
25
  border: 0;
26
}
Mark Otto's avatar
Mark Otto committed
27
28
29
30
31
32
33
34
35
36
37
38

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
39
    top: 51px;
Mark Otto's avatar
Mark Otto committed
40
    bottom: 0;
41
    left: 0;
Mark Otto's avatar
Mark Otto committed
42
43
    z-index: 1000;
    display: block;
44
    padding: 20px;
45
    overflow-x: hidden;
Mark Otto's avatar
Mark Otto committed
46
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
Mark Otto's avatar
Mark Otto committed
47
48
49
50
51
52
53
54
55
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
56
  margin-left: -20px;
Mark Otto's avatar
Mark Otto committed
57
58
59
}
.nav-sidebar > li > a {
  padding-right: 20px;
60
  padding-left: 20px;
Mark Otto's avatar
Mark Otto committed
61
}
62
63
64
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
Mark Otto's avatar
Mark Otto committed
65
66
67
68
69
70
71
72
73
74
75
76
77
78
  color: #fff;
  background-color: #428bca;
}


/*
 * Main content
 */

.main {
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
79
    padding-right: 40px;
80
    padding-left: 40px;
Mark Otto's avatar
Mark Otto committed
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
  }
}


/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
100
  display: inline-block;
Mark Otto's avatar
Mark Otto committed
101
102
  border-radius: 50%;
}