Skip to content

Commit 45173b5

Browse files
botelhobotelho
committed
new version
1 parent df41c6e commit 45173b5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+2960
-1159
lines changed

‎.DS_Store

18 KB
Binary file not shown.

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@ A jQuery plugin that will create a booklet-like component that let's you navigat
88

99
[demo](http://tympanus.net/Development/BookBlock/)
1010

11-
Licensed under the MIT License
11+
License: http://tympanus.net/codrops/licensing/

‎css/.DS_Store

6 KB
Binary file not shown.

‎css/bookblock.css

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
.bb-bookblock {
2+
width: 400px;
3+
height: 300px;
4+
margin: 0 auto;
5+
position: relative;
6+
z-index: 100;
7+
-webkit-perspective: 1300px;
8+
-moz-perspective: 1300px;
9+
perspective: 1300px;
10+
-webkit-backface-visibility: hidden;
11+
-moz-backface-visibility: hidden;
12+
backface-visibility: hidden;
13+
}
14+
15+
.bb-page {
16+
position: absolute;
17+
-webkit-transform-style: preserve-3d;
18+
-moz-transform-style: preserve-3d;
19+
transform-style: preserve-3d;
20+
-webkit-transition-property: -webkit-transform;
21+
-moz-transition-property: -moz-transform;
22+
transition-property: transform;
23+
}
24+
25+
.bb-vertical .bb-page {
26+
width: 50%;
27+
height: 100%;
28+
left: 50%;
29+
-webkit-transform-origin: left center;
30+
-moz-transform-origin: left center;
31+
transform-origin: left center;
32+
}
33+
34+
.bb-horizontal .bb-page {
35+
width: 100%;
36+
height: 50%;
37+
top: 50%;
38+
-webkit-transform-origin: center top;
39+
-moz-transform-origin: center top;
40+
transform-origin: center top;
41+
}
42+
43+
.bb-page > div,
44+
.bb-outer,
45+
.bb-content,
46+
.bb-inner {
47+
position: absolute;
48+
height: 100%;
49+
width: 100%;
50+
top: 0;
51+
left: 0;
52+
background: #fff;
53+
}
54+
55+
.bb-vertical .bb-content {
56+
width: 200%;
57+
}
58+
59+
.bb-horizontal .bb-content {
60+
height: 200%;
61+
}
62+
63+
.bb-page > div {
64+
width: 100%;
65+
-webkit-transform-style: preserve-3d;
66+
-moz-transform-style: preserve-3d;
67+
transform-style: preserve-3d;
68+
}
69+
70+
.bb-page > div:not(:only-child) {
71+
-webkit-backface-visibility: hidden;
72+
-moz-backface-visibility: hidden;
73+
backface-visibility: hidden;
74+
}
75+
76+
.bb-vertical .bb-back {
77+
-webkit-transform: rotateY(-180deg);
78+
-moz-transform: rotateY(-180deg);
79+
transform: rotateY(-180deg);
80+
}
81+
82+
.bb-horizontal .bb-back {
83+
-webkit-transform: rotateX(-180deg);
84+
-moz-transform: rotateX(-180deg);
85+
transform: rotateX(-180deg);
86+
}
87+
88+
.bb-outer {
89+
width: 100%;
90+
overflow: hidden;
91+
z-index: 999;
92+
}
93+
94+
.bb-overlay,
95+
.bb-flipoverlay {
96+
background-color: rgba(0, 0, 0, 0.7);
97+
position: absolute;
98+
top: 0px;
99+
left: 0px;
100+
width: 100%;
101+
height: 100%;
102+
opacity: 0;
103+
}
104+
105+
.bb-flipoverlay {
106+
background-color: rgba(0, 0, 0, 0.2);
107+
}
108+
109+
/* */
110+
111+
.bb-bookblock.bb-vertical > div.bb-page:first-child,
112+
.bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {
113+
-webkit-transform: rotateY(180deg);
114+
-moz-transform: rotateY(180deg);
115+
transform: rotateY(180deg);
116+
}
117+
118+
.bb-bookblock.bb-horizontal > div.bb-page:first-child,
119+
.bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back {
120+
-webkit-transform: rotateX(180deg);
121+
-moz-transform: rotateX(180deg);
122+
transform: rotateX(180deg);
123+
}
124+
125+
/* Content display */
126+
.bb-vertical .bb-front .bb-content {
127+
left: -100%;
128+
}
129+
130+
.bb-horizontal .bb-front .bb-content {
131+
top: -100%;
132+
}
133+
134+
/* Flipping classes */
135+
.bb-vertical .bb-flip-next,
136+
.bb-vertical .bb-flip-initial {
137+
-webkit-transform: rotateY(-180deg);
138+
-moz-transform: rotateY(-180deg);
139+
transform: rotateY(-180deg);
140+
}
141+
142+
.bb-vertical .bb-flip-prev {
143+
-webkit-transform: rotateY(0deg);
144+
-moz-transform: rotateY(0deg);
145+
transform: rotateY(0deg);
146+
}
147+
148+
.bb-horizontal .bb-flip-next,
149+
.bb-horizontal .bb-flip-initial {
150+
-webkit-transform: rotateX(180deg);
151+
-moz-transform: rotateX(180deg);
152+
transform: rotateX(180deg);
153+
}
154+
155+
.bb-horizontal .bb-flip-prev {
156+
-webkit-transform: rotateX(0deg);
157+
-moz-transform: rotateX(0deg);
158+
transform: rotateX(0deg);
159+
}
160+
161+
.bb-vertical .bb-flip-next-end {
162+
-webkit-transform: rotateY(-15deg);
163+
-moz-transform: rotateY(-15deg);
164+
transform: rotateY(-15deg);
165+
}
166+
167+
.bb-vertical .bb-flip-prev-end {
168+
-webkit-transform: rotateY(-165deg);
169+
-moz-transform: rotateY(-165deg);
170+
transform: rotateY(-165deg);
171+
}
172+
173+
.bb-horizontal .bb-flip-next-end {
174+
-webkit-transform: rotateX(15deg);
175+
-moz-transform: rotateX(15deg);
176+
transform: rotateX(15deg);
177+
}
178+
179+
.bb-horizontal .bb-flip-prev-end {
180+
-webkit-transform: rotateX(165deg);
181+
-moz-transform: rotateX(165deg);
182+
transform: rotateX(165deg);
183+
}
184+
185+
.bb-item {
186+
width: 100%;
187+
height: 100%;
188+
position: absolute;
189+
top: 0;
190+
left: 0;
191+
display: none;
192+
background: #fff;
193+
}
194+
195+
/* No JS */
196+
.no-js .bb-bookblock,
197+
.no-js ul.bb-custom-grid li {
198+
width: auto;
199+
height: auto;
200+
}
201+
202+
.no-js .bb-item {
203+
display: block;
204+
position: relative;
205+
}

‎css/calendar.css

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
/* Style from Caledario: */
2+
3+
.fc-calendar-wrap {
4+
margin-top: 300px;
5+
}
6+
7+
.fc-calendar-wrap h2 {
8+
color: #fff;
9+
position: absolute;
10+
z-index: 100;
11+
margin: -2.4em 0.9em 0 0;
12+
font-weight: 300;
13+
right: 0;
14+
font-size: 40px;
15+
border: 3px solid #fff;
16+
padding: 5px 20px;
17+
}
18+
19+
.fc-calendar-container {
20+
position: relative;
21+
height: 300px;
22+
width: 100%;
23+
}
24+
25+
.fc-calendar {
26+
width: 100%;
27+
height: 100%;
28+
}
29+
30+
.fc-calendar .fc-head {
31+
height: 30px;
32+
line-height: 30px;
33+
background: #883b61;
34+
color: #fff;
35+
font-size: 10px;
36+
font-weight: 700;
37+
letter-spacing: 1px;
38+
text-transform: uppercase;
39+
}
40+
41+
.fc-calendar .fc-body {
42+
position: relative;
43+
width: 100%;
44+
height: 100%;
45+
height: -moz-calc(100% - 30px);
46+
height: -webkit-calc(100% - 30px);
47+
height: calc(100% - 30px);
48+
padding: 15px;
49+
}
50+
51+
.fc-calendar .fc-row {
52+
width: 100%;
53+
border-bottom: 1px solid #ddd;
54+
}
55+
56+
.fc-four-rows .fc-row {
57+
height: 25%;
58+
}
59+
60+
.fc-five-rows .fc-row {
61+
height: 20%;
62+
}
63+
64+
.fc-six-rows .fc-row {
65+
height: 16.66%;
66+
height: -moz-calc(100%/6);
67+
height: -webkit-calc(100%/6);
68+
height: calc(100%/6);
69+
}
70+
71+
.fc-calendar .fc-row > div,
72+
.fc-calendar .fc-head > div {
73+
float: left;
74+
height: 100%;
75+
width: 14.28%; /* 100% / 7 */
76+
width: -moz-calc(100%/7);
77+
width: -webkit-calc(100%/7);
78+
width: calc(100%/7);
79+
position: relative;
80+
}
81+
82+
/* IE 9 is rounding up the calc it seems */
83+
.ie9 .fc-calendar .fc-row > div,
84+
.ie9 .fc-calendar .fc-head > div {
85+
width: 14.2%;
86+
}
87+
88+
.fc-calendar .fc-row > div {
89+
border-right: 1px solid #ddd;
90+
padding: 4px;
91+
overflow: hidden;
92+
position: relative;
93+
}
94+
95+
.fc-calendar .fc-head > div {
96+
text-align: center;
97+
}
98+
99+
.fc-calendar .fc-row > div > span.fc-date {
100+
position: absolute;
101+
width: 30px;
102+
height: 20px;
103+
font-size: 20px;
104+
line-height: 20px;
105+
font-weight: 700;
106+
color: #ceb1bf;
107+
bottom: 5px;
108+
right: 5px;
109+
text-align: right;
110+
}
111+
112+
.fc-calendar .fc-row > div > span.fc-weekday {
113+
padding-left: 5px;
114+
display: none;
115+
}
116+
117+
.fc-calendar .fc-row > div.fc-today {
118+
background: #f3e0e9;
119+
}
120+
121+
.fc-calendar .fc-row > div.fc-out {
122+
opacity: 0.6;
123+
}
124+
125+
.fc-calendar .fc-row > div:last-child,
126+
.fc-calendar .fc-head > div:last-child {
127+
border-right: none;
128+
}
129+
130+
.fc-calendar .fc-row:last-child {
131+
border-bottom: none;
132+
}

0 commit comments

Comments
 (0)