Skip to content

Commit b860e6d

Browse files
modularcodermodularcoder
committed
Scrollbar adjustment
Sidebar content scrolling adjustment
1 parent ff3ec5f commit b860e6d

8 files changed

Lines changed: 395 additions & 370 deletions

File tree

‎src/_common/scrollbar/scrollbar.scss‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
/* Let's get this party started */
22
::-webkit-scrollbar {
3-
width: 6px;
4-
height: 6px;
3+
width: 7px;
4+
height: 7px;
55
}
66

77
/* Track */
88
::-webkit-scrollbar-track {
9-
-webkit-box-shadow: inset 0 0 6px #dddddd;
10-
-webkit-border-radius: 5px;
11-
border-radius: 5px;
9+
// -webkit-box-shadow: inset 0 0 6px #626d77;
10+
// background: #626d77;
11+
-webkit-border-radius: 0;
12+
border-radius: 0;
1213
}
1314

1415
/* Handle */
1516
::-webkit-scrollbar-thumb {
16-
-webkit-border-radius: 5px;
17-
border-radius: 5px;
18-
background: $color-primary;
19-
-webkit-box-shadow: inset 0 0 6px $color-primary-lighter;
17+
-webkit-border-radius: 0;
18+
border-radius: 0;
19+
background: darken($color-primary, 5%);
20+
// -webkit-box-shadow: inset 0 0 6px $color-primary;
2021
}
2122
::-webkit-scrollbar-thumb:window-inactive {
2223
background: $color-primary;

‎src/app/_common/header/nav/nav.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
$(function() {
22
$('.nav-profile > li > a').on('click', function() {
3-
43
var $el = $(this).next();
4+
55
setAnimation({
66
name: 'flipInX',
77
selector: $el

‎src/app/_common/sidebar/customize/customize.hbs‎

Lines changed: 94 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,96 @@
1-
<ul>
2-
<li class="customize">
3-
<div class="customize-item">
4-
<div class="row customize-header">
5-
<div class="col-xs-4">
6-
</div>
7-
<div class="col-xs-4">
8-
<label class="title">fixed</label>
9-
</div>
10-
<div class="col-xs-4">
11-
<label class="title">static</label>
12-
</div>
13-
</div>
14-
<div class="row hidden-md-down">
15-
<div class="col-xs-4">
16-
<label class="title">Sidebar:</label>
17-
</div>
18-
<div class="col-xs-4">
19-
<label>
20-
<input class="radio" type="radio" name="sidebarPosition" value="sidebar-fixed" >
21-
<span></span>
22-
</label>
23-
</div>
24-
<div class="col-xs-4">
25-
<label>
26-
<input class="radio" type="radio" name="sidebarPosition" value="">
27-
<span></span>
28-
</label>
29-
</div>
30-
</div>
31-
<div class="row">
32-
<div class="col-xs-4">
33-
<label class="title">Header:</label>
34-
</div>
35-
<div class="col-xs-4">
36-
<label>
37-
<input class="radio" type="radio" name="headerPosition" value="header-fixed">
38-
<span></span>
39-
</label>
40-
</div>
41-
<div class="col-xs-4">
42-
<label>
43-
<input class="radio" type="radio" name="headerPosition" value="">
44-
<span></span>
45-
</label>
46-
</div>
47-
</div>
48-
<div class="row">
49-
<div class="col-xs-4">
50-
<label class="title">Footer:</label>
51-
</div>
52-
<div class="col-xs-4">
53-
<label>
54-
<input class="radio" type="radio" name="footerPosition" value="footer-fixed">
55-
<span></span>
56-
</label>
57-
</div>
58-
<div class="col-xs-4">
59-
<label>
60-
<input class="radio" type="radio" name="footerPosition" value="">
61-
<span></span>
62-
</label>
63-
</div>
64-
</div>
65-
</div>
66-
<div class="customize-item">
67-
<ul class="customize-colors">
68-
<li>
69-
<span class="color-item color-red" data-theme="red"></span>
70-
</li>
71-
<li>
72-
<span class="color-item color-orange" data-theme="orange"></span>
73-
</li>
74-
<li>
75-
<span class="color-item color-green" data-theme="green"></span>
76-
</li>
77-
<li>
78-
<span class="color-item color-blue active" data-theme=""></span>
79-
</li>
80-
<li>
81-
<span class="color-item color-purple" data-theme="purple"></span>
1+
<footer class="sidebar-footer">
2+
<ul class="nav metismenu" id="customize-menu">
3+
<li>
4+
<ul>
5+
<li class="customize">
6+
<div class="customize-item">
7+
<div class="row customize-header">
8+
<div class="col-xs-4">
9+
</div>
10+
<div class="col-xs-4">
11+
<label class="title">fixed</label>
12+
</div>
13+
<div class="col-xs-4">
14+
<label class="title">static</label>
15+
</div>
16+
</div>
17+
<div class="row hidden-md-down">
18+
<div class="col-xs-4">
19+
<label class="title">Sidebar:</label>
20+
</div>
21+
<div class="col-xs-4">
22+
<label>
23+
<input class="radio" type="radio" name="sidebarPosition" value="sidebar-fixed" >
24+
<span></span>
25+
</label>
26+
</div>
27+
<div class="col-xs-4">
28+
<label>
29+
<input class="radio" type="radio" name="sidebarPosition" value="">
30+
<span></span>
31+
</label>
32+
</div>
33+
</div>
34+
<div class="row">
35+
<div class="col-xs-4">
36+
<label class="title">Header:</label>
37+
</div>
38+
<div class="col-xs-4">
39+
<label>
40+
<input class="radio" type="radio" name="headerPosition" value="header-fixed">
41+
<span></span>
42+
</label>
43+
</div>
44+
<div class="col-xs-4">
45+
<label>
46+
<input class="radio" type="radio" name="headerPosition" value="">
47+
<span></span>
48+
</label>
49+
</div>
50+
</div>
51+
<div class="row">
52+
<div class="col-xs-4">
53+
<label class="title">Footer:</label>
54+
</div>
55+
<div class="col-xs-4">
56+
<label>
57+
<input class="radio" type="radio" name="footerPosition" value="footer-fixed">
58+
<span></span>
59+
</label>
60+
</div>
61+
<div class="col-xs-4">
62+
<label>
63+
<input class="radio" type="radio" name="footerPosition" value="">
64+
<span></span>
65+
</label>
66+
</div>
67+
</div>
68+
</div>
69+
<div class="customize-item">
70+
<ul class="customize-colors">
71+
<li>
72+
<span class="color-item color-red" data-theme="red"></span>
73+
</li>
74+
<li>
75+
<span class="color-item color-orange" data-theme="orange"></span>
76+
</li>
77+
<li>
78+
<span class="color-item color-green" data-theme="green"></span>
79+
</li>
80+
<li>
81+
<span class="color-item color-blue active" data-theme=""></span>
82+
</li>
83+
<li>
84+
<span class="color-item color-purple" data-theme="purple"></span>
85+
</li>
86+
</ul>
87+
</div>
8288
</li>
8389
</ul>
84-
</div>
85-
</li>
86-
</ul>
87-
<a href="">
88-
<i class="fa fa-cog"></i> Customize
89-
</a>
90+
<a href="">
91+
<i class="fa fa-cog"></i> Customize
92+
</a>
93+
</li>
94+
</ul>
95+
</footer>
96+

‎src/app/_common/sidebar/customize/customize.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
.customize {
2+
// height: 200px;
3+
width: 100%;
4+
color: rgba(255, 255, 255, 0.5);
5+
padding: 5px 15px;
6+
text-align: center;
7+
8+
.customize-header{
9+
margin-bottom: 10px;
10+
}
11+
}
12+
113
#customize-menu {
214
position: fixed;
315
bottom: 0;
@@ -23,6 +35,7 @@
2335
& > li {
2436
& > a {
2537
background-color: $sidebar-color-primary;
38+
border-top: 1px solid fade-out($sidebar-color-secondary, 0.5);
2639
}
2740

2841
& > a:hover,

‎src/app/_common/sidebar/header/header.hbs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="sidebar-header">
2+
<div class="brand">
3+
<div class="logo">
4+
<span class="l l1"></span>
5+
<span class="l l2"></span>
6+
<span class="l l3"></span>
7+
<span class="l l4"></span>
8+
<span class="l l5"></span>
9+
</div>
10+
{{themeTitle}}
11+
</div>
12+
</div>

‎src/app/_common/sidebar/header/header.scss‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.sidebar-header {
2+
.brand {
3+
color: #fff;
4+
text-align: left;
5+
padding-left: 25px;
6+
line-height: $header-height;
7+
font-size: 16px;
8+
9+
.logo {
10+
display: inline-block;
11+
width: 45px;
12+
height: 25px;
13+
vertical-align: middle;
14+
margin-right: 5px;
15+
// background-color: fade(#fff, 10%);
16+
position: relative;
17+
18+
.l {
19+
width: 11px;
20+
height: 11px;
21+
border-radius: 50%;
22+
background-color: $color-primary;
23+
position: absolute;
24+
25+
&.l1 {
26+
bottom: 0;
27+
left: 0;
28+
}
29+
30+
&.l2 {
31+
width: 7px;
32+
height: 7px;
33+
bottom: 13px;
34+
left: 10px;
35+
}
36+
37+
&.l3 {
38+
width: 7px;
39+
height: 7px;
40+
bottom: 4px;
41+
left: 17px;
42+
}
43+
44+
&.l4 {
45+
bottom: 13px;
46+
left: 25px;
47+
}
48+
49+
&.l5 {
50+
bottom: 0;
51+
left: 34px;
52+
}
53+
}
54+
}
55+
56+
@include media-down(sm) {
57+
line-height: $header-height-xs;
58+
font-size: 16px;
59+
}
60+
}
61+
}

0 commit comments

Comments
 (0)