-
Notifications
You must be signed in to change notification settings - Fork 0
/
sidebar.css
97 lines (92 loc) · 2.92 KB
/
sidebar.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/*
sidebar.css
created by Yue Hu (http://hudidit.com).
Date: 2013-12-22
user guide on github: https://github.com/hudidit/sidebarJS
under MIT License.
*/
/*
scss function guide
meaning e.g.
$b: background; #000;
$c: color; #fff;
$f: font; (bold 20px verdana); Note: please don't do this: bold 20px/2 verdana; Because: sass would compile it to: bold 10px verdana;
$d: division line; (1px solid #000);
$t: transition of nav items; (color .3s ease, background .3s ease) or (all .3s ease)
$s: smooth slide in;true/false
*/
/*
scss function guide
meaning e.g.
$w: width; 48px
$h: height; 48px;
$b: background; (#f00) or (url(...))
*/
.sidebar-nav {
background: black;
color: #e9e9e9;
font: 20px helvetica, verdana;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 100%;
line-height: 2;
overflow: auto;
z-index: 2147483647;
-webkit-transform: translateZ(0); }
.sidebar-nav.sidebar-ready {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease; }
@media all and (min-width: 960px) {
.sidebar-nav.sidebar-show {
left: 75%; } }
@media all and (max-width: 959px) {
.sidebar-nav.sidebar-show {
left: 20%; } }
.sidebar-nav a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
box-sizing: content-box;
-moz-box-sizing: content-box;
color: #e9e9e9;
border-bottom: 1px solid #999999;
padding-left: 1em;
display: block;
text-decoration: none; }
.sidebar-nav a:hover, .sidebar-nav a:active {
background: #e9e9e9;
color: black; }
.sidebar-nav .sidebar-btn-in-nav {
background: #e9e9e9;
color: black; }
.sidebar-btn {
width: 48px;
height: 48px;
background: url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%000%00%00%000%08%06%00%00%00W%02%F9%87%00%00%00%06bKGD%00%FF%00%FF%00%FF%A0%BD%A7%93%00%00%00%84IDATh%81%ED%D61%0A%800%10D%D1Q%C8%D5%CD5%3CZ%AA%14%B9%846%0A%92%22%D1f%B3%86%FF%60%2A%9BY00%12%00%00%13%09%92%A2%A4%24%E9p%96tu%0B%AD%03%A2%83%A2%BDl%AD%03%B2%83%82%BD%E4g%E1%B5%3A%60i%5D%E7Q%7D%C0%3E%A2%C4G%7B%EB%E3%FD%88%8B%C6%FF%2Au%8A%5E%3Cb%00%18%8B-d%10%B6%90%2Bl%21%C3%B0%85%00%FC%00%5B%C8%20l%21W%D8B%86a%0B%01%00%E6s%02t9%E3%EE%BB%D7%F8%FE%00%00%00%00IEND%AEB%60%82);
margin-top: -24px;
position: absolute;
display: inline-block;
right: 0;
top: 50%;
background-repeat: no-repeat;
background-size: 100% 100%; }
.sidebar-no-scroll {
overflow: hidden; }
.sidebar-layer {
position: fixed;
z-index: 2147483646;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: transparent;
display: none; }
.sidebar-layer.sidebar-layer-show {
display: block; }