diff options
author | Eric Bidelman | 2012-04-10 22:47:35 -0700 |
---|---|---|
committer | Eric Bidelman | 2012-04-10 22:47:35 -0700 |
commit | 9118fa551c30ecda1b0e78af6418284460822d75 (patch) | |
tree | 2dd32e17b1bd5a406952b22d7d727fe6d7044dcb /theme/sass | |
parent | ba011027cea557a78a400959f9f04a8de456947e (diff) | |
download | io-slides-remote-9118fa551c30ecda1b0e78af6418284460822d75.tar.gz |
polyfills working for ios < 5
Diffstat (limited to 'theme/sass')
-rw-r--r-- | theme/sass/_base.scss | 41 | ||||
-rw-r--r-- | theme/sass/default.scss | 73 |
2 files changed, 59 insertions, 55 deletions
diff --git a/theme/sass/_base.scss b/theme/sass/_base.scss index d8b9554..141aafe 100644 --- a/theme/sass/_base.scss +++ b/theme/sass/_base.scss | |||
@@ -86,48 +86,10 @@ slides > slide { | |||
86 | @include box-sizing(border-box); | 86 | @include box-sizing(border-box); |
87 | } | 87 | } |
88 | 88 | ||
89 | |||
90 | /* Clickable/tappable areas */ | ||
91 | /* | ||
92 | .slide-area { | ||
93 | z-index: 1000; | ||
94 | |||
95 | position: absolute; | ||
96 | left: 0; | ||
97 | top: 0; | ||
98 | width: 150px; | ||
99 | height: 700px; | ||
100 | |||
101 | left: 50%; | ||
102 | top: 50%; | ||
103 | |||
104 | cursor: pointer; | ||
105 | margin-top: -350px; | ||
106 | |||
107 | tap-highlight-color: transparent; | ||
108 | -o-tap-highlight-color: transparent; | ||
109 | -moz-tap-highlight-color: transparent; | ||
110 | -webkit-tap-highlight-color: transparent; | ||
111 | } | ||
112 | #prev-slide-area { | ||
113 | margin-left: -550px; | ||
114 | } | ||
115 | #next-slide-area { | ||
116 | margin-left: 400px; | ||
117 | } | ||
118 | .slides.layout-widescreen #prev-slide-area, | ||
119 | .slides.layout-faux-widescreen #prev-slide-area { | ||
120 | margin-left: -650px; | ||
121 | } | ||
122 | .slides.layout-widescreen #next-slide-area, | ||
123 | .slides.layout-faux-widescreen #next-slide-area { | ||
124 | margin-left: 500px; | ||
125 | }*/ | ||
126 | |||
127 | /* Slide styles */ | 89 | /* Slide styles */ |
128 | 90 | ||
129 | 91 | ||
130 | article.fill iframe { | 92 | /*article.fill iframe { |
131 | position: absolute; | 93 | position: absolute; |
132 | left: 0; | 94 | left: 0; |
133 | top: 0; | 95 | top: 0; |
@@ -156,3 +118,4 @@ slide.fill img { | |||
156 | 118 | ||
157 | z-index: -1; | 119 | z-index: -1; |
158 | } | 120 | } |
121 | */ \ No newline at end of file | ||
diff --git a/theme/sass/default.scss b/theme/sass/default.scss index b7b5ef5..4dcbb7a 100644 --- a/theme/sass/default.scss +++ b/theme/sass/default.scss | |||
@@ -33,7 +33,17 @@ $slide-top-bottom-padding: 40px; | |||
33 | $slide-left-right-padding: 60px; | 33 | $slide-left-right-padding: 60px; |
34 | $slide-border-radius: 5px; | 34 | $slide-border-radius: 5px; |
35 | 35 | ||
36 | $article-cotent-top-padding: 45px; | 36 | $slide-tap-area-width: 100px; |
37 | |||
38 | $article-content-top-padding: 45px; | ||
39 | |||
40 | @mixin highlight-color($color: $brand-yellow) { | ||
41 | -webkit-tap-highlight-color: $color; | ||
42 | -moz-tap-highlight-color: $color; | ||
43 | -ms-tap-highlight-color: $color; | ||
44 | -o-tap-highlight-color: $color; | ||
45 | tap-highlight-color: $color; | ||
46 | } | ||
37 | 47 | ||
38 | /** | 48 | /** |
39 | * Theme Styles | 49 | * Theme Styles |
@@ -183,7 +193,7 @@ slides > slide { | |||
183 | } | 193 | } |
184 | 194 | ||
185 | > hgroup + article { | 195 | > hgroup + article { |
186 | margin-top: $article-cotent-top-padding; | 196 | margin-top: $article-content-top-padding; |
187 | 197 | ||
188 | p { | 198 | p { |
189 | margin-bottom: 1em; | 199 | margin-bottom: 1em; |
@@ -195,14 +205,7 @@ slides > slide { | |||
195 | } | 205 | } |
196 | } | 206 | } |
197 | 207 | ||
198 | slides.layout-widescreen > slide { | ||
199 | margin-left: -$slide-width-widescreen / 2; | ||
200 | width: $slide-width-widescreen; | ||
201 | } | ||
202 | |||
203 | slides.layout-faux-widescreen > slide { | 208 | slides.layout-faux-widescreen > slide { |
204 | margin-left: -$slide-width-widescreen / 2; | ||
205 | width: $slide-width-widescreen; | ||
206 | padding: $slide-top-bottom-padding 160px; | 209 | padding: $slide-top-bottom-padding 160px; |
207 | } | 210 | } |
208 | 211 | ||
@@ -211,6 +214,11 @@ slides.layout-faux-widescreen { | |||
211 | 214 | ||
212 | $translateX: 1130px; | 215 | $translateX: 1130px; |
213 | 216 | ||
217 | > slide { | ||
218 | margin-left: -$slide-width-widescreen / 2; | ||
219 | width: $slide-width-widescreen; | ||
220 | } | ||
221 | |||
214 | > slide.far-past { | 222 | > slide.far-past { |
215 | display: block; | 223 | display: block; |
216 | @include transform(translate(-$translateX * 2)); | 224 | @include transform(translate(-$translateX * 2)); |
@@ -240,6 +248,14 @@ slides.layout-faux-widescreen { | |||
240 | @include transform(translate($translateX * 2)); | 248 | @include transform(translate($translateX * 2)); |
241 | @include transform(translate3d($translateX * 2, 0, 0)); | 249 | @include transform(translate3d($translateX * 2, 0, 0)); |
242 | } | 250 | } |
251 | |||
252 | #prev-slide-area { | ||
253 | margin-left: -$slide-width-widescreen / 2 - $slide-tap-area-width; | ||
254 | } | ||
255 | |||
256 | #next-slide-area { | ||
257 | margin-left: $slide-width-widescreen / 2; | ||
258 | } | ||
243 | } | 259 | } |
244 | 260 | ||
245 | b { | 261 | b { |
@@ -353,7 +369,7 @@ code { | |||
353 | 369 | ||
354 | iframe { | 370 | iframe { |
355 | width: 100%; | 371 | width: 100%; |
356 | height: $slide-height - ($slide-top-bottom-padding * 2) - ($article-cotent-top-padding * 2); | 372 | height: $slide-height - ($slide-top-bottom-padding * 2) - ($article-content-top-padding * 2); |
357 | background: white; | 373 | background: white; |
358 | border: 1px solid $gray-1; | 374 | border: 1px solid $gray-1; |
359 | @include box-sizing(border-box); | 375 | @include box-sizing(border-box); |
@@ -363,10 +379,6 @@ dt { | |||
363 | font-weight: bold; | 379 | font-weight: bold; |
364 | } | 380 | } |
365 | 381 | ||
366 | h3 + iframe { | ||
367 | height: 540px; | ||
368 | } | ||
369 | |||
370 | button { | 382 | button { |
371 | display: inline-block; | 383 | display: inline-block; |
372 | @include background(linear-gradient(#F9F9F9 40%, #E3E3E3 70%)); | 384 | @include background(linear-gradient(#F9F9F9 40%, #E3E3E3 70%)); |
@@ -640,7 +652,7 @@ input, button { | |||
640 | vertical-align: middle; | 652 | vertical-align: middle; |
641 | } | 653 | } |
642 | 654 | ||
643 | .centered { | 655 | /*.centered { |
644 | text-align: center; | 656 | text-align: center; |
645 | } | 657 | } |
646 | 658 | ||
@@ -650,7 +662,7 @@ input, button { | |||
650 | -o-box-reflect: below 3px -o-linear-gradient(rgba(255,255,255,0) 85%, white 150%); | 662 | -o-box-reflect: below 3px -o-linear-gradient(rgba(255,255,255,0) 85%, white 150%); |
651 | -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%); | 663 | -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%); |
652 | box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); | 664 | box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); |
653 | } | 665 | }*/ |
654 | 666 | ||
655 | .flexbox { | 667 | .flexbox { |
656 | @include flexbox; | 668 | @include flexbox; |
@@ -673,6 +685,35 @@ input, button { | |||
673 | opacity: 0; | 685 | opacity: 0; |
674 | } | 686 | } |
675 | 687 | ||
688 | /* Clickable/tappable areas */ | ||
689 | .slide-area { | ||
690 | z-index: 1000; | ||
691 | |||
692 | position: absolute; | ||
693 | left: 0; | ||
694 | top: 0; | ||
695 | width: $slide-tap-area-width; | ||
696 | height: $slide-height; | ||
697 | |||
698 | left: 50%; | ||
699 | top: 50%; | ||
700 | |||
701 | cursor: pointer; | ||
702 | margin-top: -$slide-height / 2; | ||
703 | |||
704 | //@include highlight-color(rgba(51, 51, 51, 0.5)); | ||
705 | } | ||
706 | #prev-slide-area { | ||
707 | margin-left: -$slide-width-widescreen / 2; | ||
708 | //@include border-radius(10px 0 0 10px); | ||
709 | //@include box-shadow(-5px 0 10px #222 inset); | ||
710 | } | ||
711 | #next-slide-area { | ||
712 | margin-left: $slide-width / 2; | ||
713 | //@include border-radius(0 10px 10px 0); | ||
714 | //@include box-shadow(5px 0 10px #222 inset); | ||
715 | } | ||
716 | |||
676 | /* ===== SLIDE CONTENT ===== */ | 717 | /* ===== SLIDE CONTENT ===== */ |
677 | .logoslide { | 718 | .logoslide { |
678 | img { | 719 | img { |