aboutsummaryrefslogtreecommitdiff
path: root/x-gdbar.html
diff options
context:
space:
mode:
authorEric Bidelman2012-04-13 13:08:58 -0700
committerEric Bidelman2012-04-13 13:08:58 -0700
commite6a9267870c2be3bc0436166cd47d54825cda573 (patch)
treee6bfec57ac54853105ed58e663ee020a3b64bdf4 /x-gdbar.html
parent143b67bc308926438f1b8c6860fc44993de50a5b (diff)
downloadio-slides-remote-e6a9267870c2be3bc0436166cd47d54825cda573.tar.gz
Adding gdbar component
Diffstat (limited to 'x-gdbar.html')
-rw-r--r--x-gdbar.html91
1 files changed, 91 insertions, 0 deletions
diff --git a/x-gdbar.html b/x-gdbar.html
new file mode 100644
index 0000000..81db557
--- /dev/null
+++ b/x-gdbar.html
@@ -0,0 +1,91 @@
1<element extends="aside" name="x-gdbar" constructor="GDBar">
2<template>
3<style scoped>
4/* line 764, ../sass/default.scss */
5aside {
6 height: 97px;
7 width: 215px;
8 position: absolute;
9 left: 0;
10 top: 125px;
11 -webkit-border-radius: 0 10px 10px 0;
12 -moz-border-radius: 0 10px 10px 0;
13 -ms-border-radius: 0 10px 10px 0;
14 -o-border-radius: 0 10px 10px 0;
15 border-radius: 0 10px 10px 0;
16 background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #e6e6e6), color-stop(100%, #e6e6e6)) no-repeat;
17 background: -webkit-linear-gradient(left, #e6e6e6, #e6e6e6) no-repeat;
18 background: -moz-linear-gradient(left, #e6e6e6, #e6e6e6) no-repeat;
19 background: -o-linear-gradient(left, #e6e6e6, #e6e6e6) no-repeat;
20 background: -ms-linear-gradient(left, #e6e6e6, #e6e6e6) no-repeat;
21 background: linear-gradient(left, #e6e6e6, #e6e6e6) no-repeat;
22 -webkit-background-size: 0% 100%;
23 -moz-background-size: 0% 100%;
24 -o-background-size: 0% 100%;
25 background-size: 0% 100%;
26 -webkit-transition: all 0.5s ease-out 0.5s;
27 -moz-transition: all 0.5s ease-out 0.5s;
28 -ms-transition: all 0.5s ease-out 0.5s;
29 -o-transition: all 0.5s ease-out 0.5s;
30 transition: all 0.5s ease-out 0.5s;
31 /* Better to transition only on background-size, but not sure how to do that with the mixin. */
32}
33/* line 775, ../sass/default.scss */
34aside.right {
35 right: 0;
36 left: -moz-initial;
37 left: initial;
38 top: 254px;
39 /* 96 is height of gray icon bar */
40 -webkit-transform: rotateZ(180deg);
41 -moz-transform: rotateZ(180deg);
42 -ms-transform: rotateZ(180deg);
43 -o-transform: rotateZ(180deg);
44 transform: rotateZ(180deg);
45}
46/* line 782, ../sass/default.scss */
47aside.right img {
48 -webkit-transform: rotateZ(180deg);
49 -moz-transform: rotateZ(180deg);
50 -ms-transform: rotateZ(180deg);
51 -o-transform: rotateZ(180deg);
52 transform: rotateZ(180deg);
53}
54/* line 787, ../sass/default.scss */
55aside.bottom {
56 top: -moz-initial;
57 top: initial;
58 bottom: 60px;
59}
60/* line 793, ../sass/default.scss */
61aside img {
62 width: 85px;
63 height: 85px;
64 position: absolute;
65 right: 0;
66 margin: 8px 15px;
67}
68
69aside.active {
70 background-size: 100% 100%;
71}
72</style>
73<aside>
74 <img src="images/google_developers_icon_128.png">
75</aside>
76</template>
77<script>
78var shadowRoot = null;
79
80this.lifecycle({
81 created: function(root) {
82 shadowRoot = root;
83 },
84 attributeChanged: function(name, oldValue, newValue) {
85 if (name == 'class') {
86 shadowRoot.querySelector('aside').className = newValue;
87 }
88 }
89});
90</script>
91</element>