Skip to content
This repository was archived by the owner on Sep 5, 2019. It is now read-only.

Commit 561545f

Browse files
accgitaccgit
committed
Redesign, added simplebar, separe theme
1 parent 8879e99 commit 561545f

File tree

6 files changed

+144
-35
lines changed

6 files changed

+144
-35
lines changed

‎src/css/simplebar.css

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/style.responsive.css

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
cursor: pointer;
77
margin: 20px 10px 10px;
88
float: right;
9-
color: white;
109
}
1110

1211
.nav .click .menu {
@@ -15,29 +14,32 @@
1514
padding: 8px 9px;
1615
}
1716

18-
.nav .click .menu:hover {
19-
background-color: #202021;
20-
}
21-
2217
.nav .responsive { display: none; }
2318
.nav .expand-responsive { display: block !important; }
2419

2520
/*
2621
sidebar
2722
*/
2823
.sidebar .title {
29-
background-color: #353637;
30-
font-size: 1.375em;
31-
padding: 17px 20px 0 25px;
32-
height: 69px;
33-
color: white;
24+
font-size: 1.375em;
25+
padding: 17px 20px 0 25px;
26+
height: 69px;
27+
}
28+
29+
/*
30+
notifications
31+
*/
32+
.sidebar span.notifi {
33+
border-radius: 3px;
34+
margin-left: 30px;
35+
font-size: smaller;
36+
padding: 0 5px 2px;
3437
}
3538

3639
.sidebar ul.menu {
37-
background-color: white;
38-
padding-bottom: 15px;
39-
list-style: none;
40-
margin: 0;
40+
list-style: none;
41+
height: 300px;
42+
margin: 0;
4143
}
4244

4345
.sidebar ul.menu ul {
@@ -49,7 +51,6 @@
4951
line-height: 38px;
5052
font-weight: 500;
5153
padding-top: 15px;
52-
color: #353637;
5354
}
5455

5556
.sidebar ul.menu li ul li {
@@ -74,29 +75,21 @@
7475
text-decoration: none;
7576
padding-left: 25px;
7677
display: block;
77-
color: #858585;
78-
}
79-
80-
.sidebar ul.menu li a:hover {
81-
background-color: #ececec;
82-
color: #353637;
83-
}
84-
85-
.sidebar ul.menu li a.current {
86-
color: #0094e3;
8778
}
8879

8980
@media only screen and (min-width: 768px) {
9081

82+
.sidebar ul.menu {
83+
height: 660px;
84+
}
9185
.nav .click { visibility: hidden; }
9286
.nav .responsive { display: block; }
9387

9488
.sidebar {
95-
background-color: white;
96-
position: fixed;
97-
bottom: 0;
98-
width: 250px;
99-
top: 0;
89+
position: fixed;
90+
bottom: 0;
91+
width: 250px;
92+
top: 0;
10093
}
10194

10295
.wrapping {

‎src/css/style.responsive.theme.css renamed to ‎src/css/theme/style.responsive.dark.css

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
/*
3-
theme style sidebar menu
3+
dark theme sidebar menu
44
*/
55
.nav .click { color: #717377; }
66
.nav .click .menu:hover { background-color: #272a30; }
@@ -23,10 +23,25 @@
2323
color: #10a2f1;
2424
}
2525

26+
/*
27+
notifications
28+
*/
29+
.sidebar span.notifi {
30+
background-color: #10a2f1;
31+
color: #2b2e35;
32+
}
33+
2634
@media only screen and (min-width: 768px) {
2735

2836
.sidebar {
2937
background-color: #2b2e35;
3038
}
3139

3240
}
41+
42+
/*
43+
simplebar color
44+
*/
45+
.simplebar-scrollbar {
46+
background: #858585;
47+
}

‎src/css/theme/style.responsive.light.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
/*
3+
light theme sidebar menu
4+
*/
5+
.nav .click { color: white; }
6+
.nav .click .menu:hover { background-color: #3dbbff; }
7+
8+
.sidebar .title {
9+
background-color: #10a2f1;
10+
font-weight: 500;
11+
color: white;
12+
}
13+
14+
.sidebar ul.menu { background-color: white; }
15+
.sidebar ul.menu li { color: #bfbfbf; }
16+
.sidebar ul.menu li a { color: #7b7d7e; }
17+
.sidebar ul.menu li a:hover {
18+
background-color: #fbfbfb;
19+
color: #353637;
20+
}
21+
22+
.sidebar ul.menu li a.current {
23+
color: #0094e3;
24+
}
25+
26+
/*
27+
notifications
28+
*/
29+
.sidebar span.notifi {
30+
background-color: #10a2f1;
31+
color: white;
32+
}
33+
34+
@media only screen and (min-width: 768px) {
35+
36+
.sidebar {
37+
background-color: white;
38+
}
39+
40+
}
41+
42+
/*
43+
simplebar color
44+
*/
45+
.simplebar-scrollbar {
46+
background: #c4c4c4;
47+
}

‎src/index.html

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@
99

1010
<!-- CSS styles -->
1111
<link rel="stylesheet" href="css/style.css">
12-
<!--<link rel="stylesheet" href="css/style.responsive.theme.css">-->
12+
<link rel="stylesheet" href="css/simplebar.css">
13+
14+
<!-- css sidebar themes -->
15+
<link rel="stylesheet" href="css/theme/style.responsive.light.css">
16+
<!--<link rel="stylesheet" href="css/theme/style.responsive.dark.css">-->
1317
</head>
1418
<body>
1519
<!-- navigation -->
@@ -31,7 +35,7 @@
3135
<div class="responsive">
3236

3337
<!-- sidebar menu -->
34-
<ul class="menu">
38+
<ul class="menu" data-simplebar>
3539

3640
<!-- languages -->
3741
<li>
@@ -45,6 +49,19 @@
4549
</ul>
4650
</li>
4751

52+
<!-- dashboard -->
53+
<li>
54+
<span class="clear">
55+
<span class="float left">Dashboard</span>
56+
<span class="float right"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
57+
</span>
58+
<ul>
59+
<li><a href="">Home</a></li>
60+
<li><a href="">Settings</a></li>
61+
<li><a href="">Notifications<span class="notifi">3</span></a></li>
62+
</ul>
63+
</li>
64+
4865
<!-- blog -->
4966
<li>
5067
<span class="clear">
@@ -57,7 +74,7 @@
5774
</ul>
5875
</li>
5976

60-
<!-- mmmbers -->
77+
<!-- members -->
6178
<li>
6279
<span class="clear">
6380
<span class="float left">Members</span>
@@ -68,6 +85,19 @@
6885
<li><a href="">Banned</a></li>
6986
</ul>
7087
</li>
88+
89+
<!-- gallery -->
90+
<li>
91+
<span class="clear">
92+
<span class="float left">Gallery</span>
93+
<span class="float right"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
94+
</span>
95+
<ul>
96+
<li><a href="">Design</a></li>
97+
<li><a href="">People</a></li>
98+
<li><a href="">Cars</a></li>
99+
</ul>
100+
</li>
71101
</ul>
72102
</div>
73103
</div>
@@ -77,7 +107,8 @@
77107
<div class="wrapping"></div>
78108

79109
<!-- javascript libraries and plugins -->
80-
<script src="js/jquery.min.js"></script>
110+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
111+
<script src="js/simplebar.js"></script>
81112
<script src="js/jquery.responsive.menu.js"></script>
82113
</body>
83114
</html>

‎src/js/simplebar.js

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)