/
zwipe.css
92 lines (84 loc) · 3.47 KB
/
zwipe.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
/* basic styles for demo content */
* { padding: 0; margin: 0; }
html { background-color: #FAFAFA; }
body { max-width: 666px; margin: auto; padding: 20px 10px; font-family: sans-serif; color: #2c3e50; }
pre {
display: block; padding: 10px; margin: 20px 0; max-width: 100%;
background-color: #ecf0f1; font-size: 12px; font-family: monospace; word-wrap: break-word;
}
h1{ font-size: 48px; line-height: 1em; color: #c0392b; }
h2{ font-size: 22px; line-height: 1em; margin-top: 0.4em; color: #c0392b; }
h3{ font-size: 20px; line-height: 1em; margin: 1em 0; }
h4{ font-size: 16px; line-height: 1.25em;; margin: 1em 0; }
p{ font-size: 16px; line-height: 1.25em;; margin: 1em 0; }
a { color: #c0392b; }
/* SLIDER OUTER BOXES */
.outersliderbox {
position: relative; max-width: 300px; margin: auto; overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.horizontal { padding: 40px 0; }
.vertical { padding: 10px 30px; }
.wrappersliderbox { position: relative; margin: auto; outline: 2px solid #2c3e50; }
.horizontal .wrappersliderbox { width: 240px; height: 200px; }
.vertical .wrappersliderbox { width: 240px; height: 200px; }
/* SLIDER */
ul {
position: relative; top: 0; left: 0;
}
.horizontal ul {
width: 100%; height: 200px;
-webkit-transition: 200ms ease-out left, 200ms ease-out -webkit-transform;
-moz-transition: 200ms ease-out left, 200ms ease-out -moz-transform;
-o-transition: 200ms ease-out left, 200ms ease-out -o-transform;
transition: 200ms ease-out left, 200ms ease-out transform;
}
.vertical ul {
width: 240px; height: 100%;
-webkit-transition: 200ms ease-out top, 200ms ease-out -webkit-transform;
-moz-transition: 200ms ease-out top, 200ms ease-out -moz-transform;
-o-transition: 200ms ease-out top, 200ms ease-out -o-transform;
transition: 200ms ease-out top, 200ms ease-out transform;
}
ul.___zwipping {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
/* SLIDES */
li {
display: block; height: 200px;
outline: 1px solid #7f8c8d;
cursor: pointer;
font-size: 128px; line-height: 200px; text-align: center; vertical-align: middle;
}
.horizontal ul li { float: left; width: 240px; }
.horizontal ul li.small { width: 100px; }
.vertical ul li { width: 100%; }
.vertical ul li.small { height: 120px; font-size: 64px; line-height: 120px; }
li.active { color: #c0392b; }
li a { font-size: 32px; line-height: 200px; color: #2c3e50; }
/* BULLETS */
.bulletsbox { position: absolute; }
.horizontal .bulletsbox { bottom: 20px; height: 8px; width: 100%; margin: auto; text-align: center; }
.vertical .bulletsbox { left: 0; top: 20px; width: 8px; }
.bullet { display: inline-block; width: 8px; height: 8px; background-color: #7f8c8d; border-radius: 50%; cursor: pointer; }
.bullet.active { background-color: #c0392b; }
.horizontal .bullet { margin-right: 12px; }
.vertical .bullet { margin-bottom: 12px; }
/* ARROWS */
.arrowsbox { position: absolute; }
.horizontal .arrowsbox { top: 10px; height: 16px; width: 100%; margin: auto; text-align: center; }
.vertical .arrowsbox { right: 0; top: 20px; width: 16px; }
.arrow { display: inline-block; color: #c0392b; font-size: 16px; font-weight: bold; cursor: pointer; }
.horizontal .arrow { margin-right: 12px; }
.vertical .arrow {
margin-bottom: 12px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}