aboutsummaryrefslogtreecommitdiff
path: root/theme/sass/default.scss
diff options
context:
space:
mode:
authorEric Bidelman2012-04-21 17:06:54 -0700
committerEric Bidelman2012-04-21 17:06:54 -0700
commitd8cb2f9460da3ca6248d9aed429e8e94b7f29e99 (patch)
treed002563293115e26421abc0dea8f485f6b35d6bd /theme/sass/default.scss
parent48417b8779dfe55e528f7576525f33393eae64fc (diff)
downloadio-slides-remote-d8cb2f9460da3ca6248d9aed429e8e94b7f29e99.tar.gz
sass dir to scss
Diffstat (limited to 'theme/sass/default.scss')
-rw-r--r--theme/sass/default.scss937
1 files changed, 0 insertions, 937 deletions
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
deleted file mode 100644
index 0cc6e47..0000000
--- a/theme/sass/default.scss
+++ /dev/null
@@ -1,937 +0,0 @@
1@import "base";
2@import "compass/css3/columns";
3@import "compass/css3/user-interface";
4
5$social-tags: '#io2012';
6$brand-small-icon-size: 30px;
7
8$gray-1: #e6e6e6;
9$gray-2: #a9a9a9;
10$gray-3: #797979;
11$gray-4: #515151;
12
13$brand-blue: rgb(67, 135, 253);
14$brand-blue-secondary: #3c8ef3;
15$brand-blue-secondary2: #2a7cdf;
16
17$brand-red: rgb(244, 74, 63);
18$brand-red-secondary: #e0543e;
19$brand-red-secondary2: #d94d3a;
20
21$brand-yellow: rgb(255, 209, 77);
22$brand-yellow-secondary: #f9cc46;
23$brand-yellow-secondary2: #f6c000;
24
25$brand-green: rgb(13, 168, 97);
26$brand-green-secondary: #00a86d;
27$brand-green-secondary2: #009f5d;
28
29$slide-width: 900px;
30$slide-height: 700px;
31$slide-width-widescreen: 1100px;
32$slide-top-bottom-padding: 40px;
33$slide-left-right-padding: 60px;
34$slide-border-radius: 5px;
35
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}
47
48/**
49 * Theme Styles
50 */
51::selection {
52 color: white;
53 background-color: $brand-yellow;
54 @include text-shadow(none);
55}
56
57::-webkit-scrollbar {
58 height: 16px;
59 overflow: visible;
60 width: 16px;
61}
62::-webkit-scrollbar-thumb {
63 background-color: rgba(0, 0, 0, .1);
64 background-clip: padding-box;
65 border: solid transparent;
66 min-height: 28px;
67 padding: 100px 0 0;
68 @include box-shadow(inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07));
69 border-width: 1px 1px 1px 6px;
70}
71::-webkit-scrollbar-thumb:hover {
72 background-color: rgba(0, 0, 0, 0.5);
73}
74::-webkit-scrollbar-button {
75 height: 0;
76 width: 0;
77}
78::-webkit-scrollbar-track {
79 background-clip: padding-box;
80 border: solid transparent;
81 border-width: 0 0 0 4px;
82}
83::-webkit-scrollbar-corner {
84 background: transparent;
85}
86
87body {
88 background: black;
89}
90
91slides > slide {
92 display: none;
93 font-family: 'Open Sans', Arial, sans-serif;
94 font-size: 26px;
95 color: $gray-3;
96 //@include background(linear-gradient(white, white 85%, $gray-1));
97 //background-color: white;
98 width: $slide-width;
99 height: $slide-height;
100 margin-left: -$slide-width / 2;
101 margin-top: -$slide-height / 2;
102 padding: $slide-top-bottom-padding $slide-left-right-padding;
103
104 @include border-radius($slide-border-radius);
105 //@include box-shadow(5px 5px 20px $gray-4);
106 @include transition(all 0.6s ease-in-out);
107
108 //$translateX: 1020px;
109 //$rotateY: 30deg;
110 //$rotateX: 45deg;
111
112 &.far-past {
113 //display: block;
114 display: none;
115 //@include transform(translate(-$translateX * 2));
116 //@include transform(translate3d(-$translateX * 2, 0, 0));
117 }
118
119 &.past {
120 display: block;
121 //@include transform(translate(-$translateX) rotateY($rotateY) rotateX($rotateX));
122 //@include transform(translate3d(-$translateX, 0, 0) rotateY($rotateY) rotateX($rotateX));
123 opacity: 0;
124 }
125
126 &.current {
127 display: block;
128 //@include transform(translate(0));
129 //@include transform(translate3d(0, 0, 0));
130 opacity: 1;
131
132 .auto-fadein {
133 opacity: 1;
134 }
135
136 .gdbar {
137 @include background-size(100% 100%);
138 }
139 }
140
141 &.next {
142 display: block;
143 //@include transform(translate($translateX) rotateY(-$rotateY) rotateX($rotateX));
144 //@include transform(translate3d($translateX, 0, 0) rotateY(-$rotateY) rotateX($rotateX));
145 opacity: 0;
146 pointer-events: none;
147 }
148
149 &.far-next {
150 //display: block;
151 display: none;
152 //@include transform(translate($translateX * 2));
153 //@include transform(translate3d($translateX * 2, 0, 0));
154 }
155
156 &.dark {
157 background: $gray-4 !important;
158 }
159
160 &:not(.nobackground) {
161 //background: white url(../../images/google_developers_icon_128.png) ($brand-small-icon-size * 2) 98% no-repeat;
162 //@include background-size($brand-small-icon-size $brand-small-icon-size);
163
164 &:before {
165 font-size: 12pt;
166 content: $social-tags;
167 position: absolute;
168 bottom: $slide-top-bottom-padding / 2;
169 left: $slide-left-right-padding;
170 background: url(../../images/google_developers_icon_128.png) no-repeat 0 50%;
171 @include background-size($brand-small-icon-size $brand-small-icon-size);
172 padding-left: $brand-small-icon-size + 10;
173 height: $brand-small-icon-size;
174 line-height: 1.9;
175 }
176 &:after {
177 font-size: 12pt;
178 content: attr(data-slide-num) '/' attr(data-total-slides);
179 position: absolute;
180 bottom: $slide-top-bottom-padding / 2;
181 right: $slide-left-right-padding;
182 line-height: 1.9;
183 }
184 }
185
186 &.title-slide {
187 &:after {
188 content: '';
189 background: url(../../images/io2012_logo.png) no-repeat 100% 50%;
190 @include background-size(contain);
191 position: absolute;
192 bottom: $slide-top-bottom-padding;
193 right: $slide-top-bottom-padding;
194 width: 100%;
195 height: 60px;
196 }
197 }
198
199 &.backdrop {
200 z-index: -10;
201 display: block !important;
202 @include background(linear-gradient(white, white 85%, $gray-1));
203 background-color: white;
204
205 &:after, &:before {
206 display: none;
207 }
208 }
209
210 > hgroup + article {
211 margin-top: $article-content-top-padding;
212
213 p {
214 margin-bottom: 1em;
215 }
216 }
217
218 > article:only-child {
219 height: 100%;
220
221 > iframe {
222 height: 100%;
223 }
224 }
225}
226
227slides.layout-faux-widescreen > slide {
228 padding: $slide-top-bottom-padding 160px;
229}
230
231slides.layout-widescreen,
232slides.layout-faux-widescreen {
233
234 $translateX: 1130px;
235
236 > slide {
237 margin-left: -$slide-width-widescreen / 2;
238 width: $slide-width-widescreen;
239 }
240
241 > slide.far-past {