compass-ratchet 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. data/README.md +67 -0
  2. data/lib/compass-ratchet.rb +3 -0
  3. data/stylesheets/_compass-ratchet.scss +14 -0
  4. data/stylesheets/compass-ratchet/_bars.scss +330 -0
  5. data/stylesheets/compass-ratchet/_base.scss +155 -0
  6. data/stylesheets/compass-ratchet/_buttons.scss +124 -0
  7. data/stylesheets/compass-ratchet/_chevrons.scss +32 -0
  8. data/stylesheets/compass-ratchet/_counts.scss +42 -0
  9. data/stylesheets/compass-ratchet/_forms.scss +126 -0
  10. data/stylesheets/compass-ratchet/_lists.scss +122 -0
  11. data/stylesheets/compass-ratchet/_popovers.scss +158 -0
  12. data/stylesheets/compass-ratchet/_push.scss +30 -0
  13. data/stylesheets/compass-ratchet/_segmented-controllers.scss +67 -0
  14. data/stylesheets/compass-ratchet/_shared.scss +8 -0
  15. data/stylesheets/compass-ratchet/_sliders.scss +40 -0
  16. data/stylesheets/compass-ratchet/_toggles.scss +71 -0
  17. data/templates/project/checkout.html +81 -0
  18. data/templates/project/choose-movie.html +125 -0
  19. data/templates/project/choose-theater.html +110 -0
  20. data/templates/project/config.rb +8 -0
  21. data/templates/project/css/app.css +1 -0
  22. data/templates/project/img/argo.png +0 -0
  23. data/templates/project/img/ralph.png +0 -0
  24. data/templates/project/img/skyfall.png +0 -0
  25. data/templates/project/index.html +160 -0
  26. data/templates/project/js/popovers.js +63 -0
  27. data/templates/project/js/push.js +417 -0
  28. data/templates/project/js/segmented-controllers.js +47 -0
  29. data/templates/project/js/sliders.js +114 -0
  30. data/templates/project/js/toggles.js +94 -0
  31. data/templates/project/manifest.rb +24 -0
  32. data/templates/project/sass/app.scss +13 -0
  33. data/templates/project/settings.html +73 -0
  34. data/templates/project/theaters.html +131 -0
  35. metadata +111 -0
data/templates/project/choose-movie.html ADDED
@@ -0,0 +1,125 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Movie finder</title>
6
+ <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7
+ <meta name="apple-mobile-web-app-capable" content="yes">
8
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
9
+
10
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
11
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
12
+ <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
13
+
14
+ <link rel="stylesheet" href="../../dist/ratchet.css">
15
+ <link rel="stylesheet" href="css/app.css">
16
+ <script src="../../dist/ratchet.js"></script>
17
+
18
+ </head>
19
+ <body>
20
+
21
+ <header class="bar-title">
22
+ <a class="button-prev" href="theaters.html" data-transition="slide-out">
23
+ Back
24
+ </a>
25
+ <h1 class="title">Choose a movie</h1>
26
+ </header>
27
+ <nav class="bar-standard bar-header-secondary">
28
+ <form>
29
+ <input type="search" placeholder="Search for movies">
30
+ </form>
31
+ </nav>
32
+
33
+ <nav class="bar-tab">
34
+ <ul class="tab-inner">
35
+ <li class="tab-item">
36
+ <a href="index.html" data-transition="fade">
37
+ <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
38
+ <div class="tab-label">Movies</div>
39
+ </a>
40
+ </li>
41
+ <li class="tab-item active">
42
+ <a href="theaters.html" data-transition="fade">
43
+ <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
44
+ <div class="tab-label">Theaters</div>
45
+ </a>
46
+ </li>
47
+ <li class="tab-item">
48
+ <a href="settings.html" data-transition="fade">
49
+ <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
50
+ <div class="tab-label">Settings</div>
51
+ </a>
52
+ </li>
53
+ </ul>
54
+ </nav>
55
+
56
+ <div class="content">
57
+
58
+ <ul class="list">
59
+ <li class="list-divider">Recommended movies</li>
60
+ <li>
61
+ <strong>Argo</strong>
62
+ <p>Lorem ipsum dolor sit amet</p>
63
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
64
+ </li>
65
+ <li>
66
+ <strong>Skyfall: 007</strong>
67
+ <p>Lorem ipsum dolor sit amet</p>
68
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
69
+ </li>
70
+ <li>
71
+ <strong>Wreck-it Ralph</strong>
72
+ <p>Lorem ipsum dolor sit amet</p>
73
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
74
+ </li>
75
+ <li class="list-divider">Top movies</li>
76
+ <li>
77
+ <strong>Movie 4</strong>
78
+ <p>Lorem ipsum dolor sit amet</p>
79
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
80
+ </li>
81
+ <li>
82
+ <strong>Movie 5</strong>
83
+ <p>Lorem ipsum dolor sit amet</p>
84
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
85
+ </li>
86
+ <li>
87
+ <strong>Movie 6</strong>
88
+ <p>Lorem ipsum dolor sit amet</p>
89
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
90
+ </li>
91
+ <li>
92
+ <strong>Movie 7</strong>
93
+ <p>Lorem ipsum dolor sit amet</p>
94
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
95
+ </li>
96
+ <li>
97
+ <strong>Movie 8</strong>
98
+ <p>Lorem ipsum dolor sit amet</p>
99
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
100
+ </li>
101
+ <li>
102
+ <strong>Movie 9</strong>
103
+ <p>Lorem ipsum dolor sit amet</p>
104
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
105
+ </li>
106
+ <li>
107
+ <strong>Movie 10</strong>
108
+ <p>Lorem ipsum dolor sit amet</p>
109
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
110
+ </li>
111
+ <li>
112
+ <strong>Movie 11</strong>
113
+ <p>Lorem ipsum dolor sit amet</p>
114
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
115
+ </li>
116
+ <li>
117
+ <strong>Movie 12</strong>
118
+ <p>Lorem ipsum dolor sit amet</p>
119
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
120
+ </li>
121
+ </ul>
122
+
123
+ </div>
124
+ </body>
125
+ </html>
data/templates/project/choose-theater.html ADDED
@@ -0,0 +1,110 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Movie finder</title>
6
+ <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7
+ <meta name="apple-mobile-web-app-capable" content="yes">
8
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
9
+
10
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
11
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
12
+ <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
13
+
14
+ <link rel="stylesheet" href="../../dist/ratchet.css">
15
+ <link rel="stylesheet" href="css/app.css">
16
+ <script src="../../dist/ratchet.js"></script>
17
+ <script src="../../dos/js/fingerblast.js"></script>
18
+
19
+ </head>
20
+ <body>
21
+
22
+ <header class="bar-title">
23
+ <a class="button-prev" href="index.html" data-transition="slide-out">
24
+ Back
25
+ </a>
26
+ <h1 class="title">Argo</h1>
27
+ </header>
28
+
29
+ <nav class="bar-tab">
30
+ <ul class="tab-inner">
31
+ <li class="tab-item active">
32
+ <a href="index.html" data-transition="fade">
33
+ <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
34
+ <div class="tab-label">Movies</div>
35
+ </a>
36
+ </li>
37
+ <li class="tab-item">
38
+ <a href="theaters.html" data-transition="fade">
39
+ <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
40
+ <div class="tab-label">Theaters</div>
41
+ </a>
42
+ </li>
43
+ <li class="tab-item">
44
+ <a href="settings.html" data-transition="fade">
45
+ <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
46
+ <div class="tab-label">Settings</div>
47
+ </a>
48
+ </li>
49
+ </ul>
50
+ </nav>
51
+
52
+ <div class="content">
53
+
54
+ <ul class="list">
55
+ <li class="list-divider">Theaters nearby</li>
56
+ <li>
57
+ <strong>Metreon 16</strong>
58
+ <p>1.3 miles away</p>
59
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
60
+ </li>
61
+ <li>
62
+ <strong>AMC 5</strong>
63
+ <p>3.5 miles away</p>
64
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
65
+ </li>
66
+ <li>
67
+ <strong>Regal 42</strong>
68
+ <p>7.3 miles away</p>
69
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
70
+ </li>
71
+ <li>
72
+ <strong>Shorline theater</strong>
73
+ <p>12.5 miles away</p>
74
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
75
+ </li>
76
+ <li>
77
+ <strong>AMC 16</strong>
78
+ <p>12.2 miles away</p>
79
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
80
+ </li>
81
+ <li>
82
+ <strong>BW3 16</strong>
83
+ <p>13.4 miles away</p>
84
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
85
+ </li>
86
+ <li>
87
+ <strong>MC Hammer 16</strong>
88
+ <p>14.1 miles away</p>
89
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
90
+ </li>
91
+ <li>
92
+ <strong>AMC 3</strong>
93
+ <p>14.3 miles away</p>
94
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
95
+ </li>
96
+ <li>
97
+ <strong>AMC 2</strong>
98
+ <p>14.7 miles away</p>
99
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
100
+ </li>
101
+ <li>
102
+ <strong>AMC 10</strong>
103
+ <p>15 miles away</p>
104
+ <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
105
+ </li>
106
+ </ul>
107
+ </div>
108
+
109
+ </body>
110
+ </html>
data/templates/project/config.rb ADDED
@@ -0,0 +1,8 @@
1
+ # Require any additional compass plugins here.
2
+ require 'compass-ratchet'
3
+ project_type = :stand_alone
4
+ css_dir = "css"
5
+ sass_dir = "sass"
6
+ images_dir = "img"
7
+ output_style = :compressed
8
+ relative_assets = true
data/templates/project/css/app.css ADDED
@@ -0,0 +1 @@
1
+ [class*="bar-"]{position:fixed;right:0;left:0;z-index:10;height:44px;padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}.bar-header-secondary{top:45px}.bar-footer{bottom:0}.bar-standard{background-color:#f2f2f2;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2f2), color-stop(100%, #e5e5e5));background:-webkit-linear-gradient(top, #f2f2f2,#e5e5e5);background:linear-gradient(top, #f2f2f2,#e5e5e5);border-bottom:1px solid #aaa;-webkit-box-shadow:inset 0 1px 1px -1px #fff;box-shadow:inset 0 1px 1px -1px #fff}.bar-footer.bar-standard,.bar-footer-secondary.bar-standard{border-top:1px solid #aaa;border-bottom-width:0}.bar-title{top:0;display:-webkit-box;display:box;background-color:#1eb0e9;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1eb0e9), color-stop(100%, #109adc));background:-webkit-linear-gradient(top, #1eb0e9,#109adc);background:linear-gradient(top, #1eb0e9,#109adc);border-bottom:1px solid #0e5895;-webkit-box-shadow:inset 0 1px 1px -1px rgba(255,255,255,0.8);box-shadow:inset 0 1px 1px -1px rgba(255,255,255,0.8);-webkit-box-orient:horizontal;box-orient:horizontal}.bar-title .title{position:absolute;top:0;left:0;display:block;width:100%;font-size:20px;font-weight:bold;line-height:44px;color:#fff;text-align:center;text-shadow:0 -1px rgba(0,0,0,0.5);white-space:nowrap}.bar-title>a:not([class*="button"]){display:block;width:100%;height:100%}.bar-title .title a{color:inherit}.bar-tab{bottom:0;height:50px;padding:0;background-color:#393939;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #393939), color-stop(100%, #2b2b2b));background:-webkit-linear-gradient(top, #393939,#2b2b2b);background:linear-gradient(top, #393939,#2b2b2b);border-top:1px solid #000;border-bottom-width:0;-webkit-box-shadow:inset 0 1px 1px -1px rgba(255,255,255,0.6);box-shadow:inset 0 1px 1px -1px rgba(255,255,255,0.6)}.tab-inner{display:-webkit-box;display:box;height:100%;list-style:none;-webkit-box-orient:horizontal;box-orient:horizontal}.tab-item{height:100%;padding-top:9px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;box-flex:1}.tab-item.active{-webkit-box-shadow:inset 0 0 20px rgba(0,0,0,0.5);box-shadow:inset 0 0 20px rgba(0,0,0,0.5)}.tab-icon{display:block;height:18px;margin:0 auto}.tab-label{margin-top:1px;font-size:10px;font-weight:bold;color:#fff;text-shadow:0 1px rgba(0,0,0,0.3)}.bar-title [class*="button"]{position:relative;z-index:10;font-size:12px;line-height:23px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.3);background-color:#1eb0e9;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1eb0e9), color-stop(100%, #0984c6));background:-webkit-linear-gradient(top, #1eb0e9,#0984c6);background:linear-gradient(top, #1eb0e9,#0984c6);border:1px solid #0e5895;-webkit-box-shadow:0 1px rgba(255,255,255,0.25);box-shadow:0 1px rgba(255,255,255,0.25);-webkit-box-flex:0;box-flex:0}.bar-title .title+[class*="button"]:last-child,.bar-title .button+[class*="button"]:last-child,.bar-title [class*="button"].pull-right{position:absolute;top:5px;right:5px}.bar-title .button:active{color:#fff;background-color:#0876b1}.bar-title .button-prev,.bar-title .button-next{position:relative}.bar-title .button-prev{margin-left:7px;border-left:0;border-bottom-left-radius:10px 15px;border-top-left-radius:10px 15px}.bar-title .button-next{margin-right:7px;border-right:0;border-top-right-radius:10px 15px;border-bottom-right-radius:10px 15px}.bar-title .button-prev:before,.bar-title .button-next:before{position:absolute;top:2px;width:27px;height:27px;-webkit-border-radius:30px 2px;border-radius:30px 100px 2px 40px / 2px 40px 30px 100px;content:'';-webkit-box-shadow:inset 1px 0 #0e5895,inset 0 1px #0e5895;box-shadow:inset 1px 0 #0e5895,inset 0 1px #0e5895;-webkit-mask-image:-webkit-gradient(linear, left top, right bottom, from(#000), color-stop(0.33, #000), color-stop(0.5, transparent), to(transparent));mask-image:gradient(linear, left top, right bottom, from(#000), color-stop(0.33, #000), color-stop(0.5, transparent), to(transparent))}.bar-title .button-prev:before{left:-5px;background:-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #0984c6), color-stop(100%, #1eb0e9));background:-webkit-linear-gradient(left bottom, #0984c6,#1eb0e9);background:linear-gradient(left bottom, #0984c6,#1eb0e9);border-left:1.5px solid rgba(255,255,255,0.25);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform:skew(-10deg, -10deg);transform:skew(-10deg, -10deg)}.bar-title .button-next:before{right:-5px;background:-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #1eb0e9), color-stop(100%, #0984c6));background:-webkit-linear-gradient(left bottom, #1eb0e9,#0984c6);background:linear-gradient(left bottom, #1eb0e9,#0984c6);border-top:1.5px solid rgba(255,255,255,0.25);-webkit-transform:rotate(135deg);transform:rotate(135deg);-webkit-transform:skew(-10deg, -10deg);transform:skew(-10deg, -10deg)}.bar-title .button-prev:active,.bar-title .button-next:active,.bar-title .button-prev:active:before,.bar-title .button-next:active:before{color:#fff;background-color:#0876b1;background-image:none}.bar-title .button-prev:active:before,.bar-title .button-next:active:before{content:''}.bar-title .button-prev:active:before{-webkit-box-shadow:inset 0 3px 3px rgba(0,0,0,0.2);box-shadow:inset 0 3px 3px rgba(0,0,0,0.2)}.bar-title .button-next:active:before{-webkit-box-shadow:inset 0 -3px 3px rgba(0,0,0,0.2);box-shadow:inset 0 -3px 3px rgba(0,0,0,0.2)}[class*="bar"] .button-block{padding:7px 0;margin-bottom:0;-webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),0 1px rgba(255,255,255,0.8);box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),0 1px rgba(255,255,255,0.8)}[class*="bar"] .button-block:active{padding:7px 0}[class*="bar-"] .segmented-controller{margin-bottom:0}[class*="bar-"] .segmented-controller+[class*="button"],[class*="bar-"] [class*="button"]+.segmented-controller{margin-left:5px}.bar-title .segmented-controller{line-height:18px;text-shadow:0 -1px 0 rgba(0,0,0,0.3);background-color:#1eb0e9;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1eb0e9), color-stop(100%, #0984c6));background:-webkit-linear-gradient(top, #1eb0e9,#0984c6);background:linear-gradient(top, #1eb0e9,#0984c6);border:1px solid #0e5895;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px rgba(255,255,255,0.25);box-shadow:0 1px rgba(255,255,255,0.25);-webkit-box-flex:1;box-flex:1}.bar-title .segmented-controller li{border-left:1px solid #0e5895;-webkit-box-shadow:inset 1px 0 rgba(255,255,255,0.25);box-shadow:inset 1px 0 rgba(255,255,255,0.25)}.bar-title .segmented-controller .active+li,.bar-title .segmented-controller li:first-child{-webkit-box-shadow:none;box-shadow:none}.bar-title .segmented-controller li:first-child{border-left-width:0}.bar-title .segmented-controller li.active{background-color:#0082c4;-webkit-box-shadow:inset 0 1px 6px rgba(0,0,0,0.3);box-shadow:inset 0 1px 6px rgba(0,0,0,0.3)}.bar-title .segmented-controller li>a{color:#fff}.bar-standard input[type=search]{height:32px;margin:0}html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,section,summary,time,audio,video{padding:0;margin:0;border:0}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{position:fixed;top:0;right:0;bottom:0;left:0;font:14px/1.25 "Helvetica Neue",sans-serif;color:#222;background-color:#fff}a{color:#0882f0;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.content{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;background:#fff;-webkit-transition-property:top;transition-property:top;-webkit-transition-property:bottom;transition-property:bottom;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-overflow-scrolling:touch}.content>*{-webkit-transform:translateZ(0px);transform:translateZ(0px)}.content-padded{padding:10px}.bar-title ~ .content{top:44px}.bar-tab ~ .content{bottom:51px}.bar-header-secondary ~ .content{top:88px}[class*="button"]{position:relative;display:inline-block;padding:4px 12px;margin:0;font-weight:bold;line-height:18px;color:#333;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.5);vertical-align:top;cursor:pointer;background-color:#f8f8f8;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d4d4d4));background:-webkit-linear-gradient(top, #f8f8f8,#d4d4d4);background:linear-gradient(top, #f8f8f8,#d4d4d4);border:1px solid rgba(0,0,0,0.3);-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),0 1px 2px rgba(0,0,0,0.05)}[class*="button"]:active{padding-top:5px;padding-bottom:3px;color:#333;background-color:#ccc;background-image:none;-webkit-box-shadow:inset 0 3px 3px rgba(0,0,0,0.2);box-shadow:inset 0 3px 3px rgba(0,0,0,0.2)}.button-main,.button-positive,.button-negative{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.3)}.button-main{background-color:#1eafe7;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1eafe7), color-stop(100%, #1a97c8));background:-webkit-linear-gradient(top, #1eafe7,#1a97c8);background:linear-gradient(top, #1eafe7,#1a97c8);border:1px solid #117aaa}.button-positive{background-color:#34ba15;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #34ba15), color-stop(100%, #2da012));background:-webkit-linear-gradient(top, #34ba15,#2da012);background:linear-gradient(top, #34ba15,#2da012);border:1px solid #278f0f}.button-negative{background-color:#e71e1e;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e71e1e), color-stop(100%, #c71a1a));background:-webkit-linear-gradient(top, #e71e1e,#c71a1a);background:linear-gradient(top, #e71e1e,#c71a1a);border:1px solid #b51a1a}.button-main:active,.button-positive:active,.button-negative:active{color:#fff}.button-main:active{background-color:#0876b1}.button-positive:active{background-color:#298f11}.button-negative:active{background-color:#b21a1a}.button-block{display:block;padding:11px 0 13px;margin-bottom:10px;font-size:16px}.button-block:active{padding:12px 0}[class*="button"] [class*="count"]{padding-top:2px;padding-bottom:2px;margin-right:-4px;margin-left:4px;text-shadow:none;background-color:rgba(0,0,0,0.2);-webkit-box-shadow:inset 0 1px 1px -1px #000,0 1px 1px -1px #fff;box-shadow:inset 0 1px 1px -1px #000,0 1px 1px -1px #fff}.button-block [class*="count"]{position:absolute;right:0;padding-top:4px;padding-bottom:4px;margin-right:10px}.chevron{display:block;height:20px}.chevron:before,.chevron:after{position:relative;display:block;width:12px;height:4px;background-color:#999;content:''}.chevron:before{top:5px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.chevron:after{top:7px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}[class*="count"]{display:inline-block;padding:4px 9px;font-size:12px;font-weight:bold;line-height:13px;color:#fff;background-color:rgba(0,0,0,0.3);-webkit-border-radius:100px;border-radius:100px}.count-main,.count-positive,.count-negative{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.3)}.count-main{background-color:#1eafe7;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1eafe7), color-stop(100%, #1a97c8));background:-webkit-linear-gradient(top, #1eafe7,#1a97c8);background:linear-gradient(top, #1eafe7,#1a97c8)}.count-positive{background-color:#34ba15;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #34ba15), color-stop(100%, #2da012));background:-webkit-linear-gradient(top, #34ba15,#2da012);background:linear-gradient(top, #34ba15,#2da012)}.count-negative{background-color:#e71e1e;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e71e1e), color-stop(100%, #c71a1a));background:-webkit-linear-gradient(top, #e71e1e,#c71a1a);background:linear-gradient(top, #e71e1e,#c71a1a)}input,textarea,button,select{font-family:inherit;font-size:inherit}select,textarea,input[type="text"],input[type=search],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="tel"],input[type="color"],.input-group{width:100%;height:40px;padding:10px;margin-bottom:10px;background:#fff;border:1px solid rgba(0,0,0,0.2);-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(255,255,255,0.2),inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:0 1px 1px rgba(255,255,255,0.2),inset 0 1px 1px rgba(0,0,0,0.1);-webkit-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}input[type=search]{height:34px;font-size:14px;-webkit-border-radius:30px;border-radius:30px}textarea{height:auto}select{height:auto;font-size:14px;background-color:#f8f8f8;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d4d4d4));background:-webkit-linear-gradient(top, #f8f8f8,#d4d4d4);background:linear-gradient(top, #f8f8f8,#d4d4d4);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.1)}.input-group{width:auto;height:auto;padding:0}.input-group input{margin-bottom:0;background-color:transparent;border:0;border-bottom:1px solid rgba(0,0,0,0.2);-webkit-border-radius:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}.input-group input:last-child{border-bottom-width:0}.input-row{overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.2)}.input-row:last-child{border-bottom-width:0}.input-row label{float:left;width:25%;padding:11px 10px 9px 13px;font-weight:bold}.input-row label+input{float:right;width:65%;padding-left:0;margin-bottom:0;border-bottom:0}.list{margin-bottom:10px;list-style:none;background-color:#fff}.list li{position:relative;padding:20px 60px 20px 10px;border-bottom:1px solid rgba(0,0,0,0.1)}.list li:first-child{border-top:1px solid rgba(0,0,0,0.1)}.list li>a:not([class*="button"]){position:relative;display:block;padding:inherit;margin:-20px -60px -20px -10px;color:inherit}.list.inset{width:auto;margin-right:10px;margin-left:10px;border:1px solid rgba(0,0,0,0.1);-webkit-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;box-sizing:border-box}.list.inset li:first-child{border-top-width:0}.list.inset li:last-child{border-bottom-width:0}.list .list-divider{position:relative;top:-1px;padding-top:6px;padding-bottom:6px;font-size:12px;font-weight:bold;line-height:18px;text-shadow:0 1px 0 rgba(255,255,255,0.5);background-color:#f8f8f8;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #eeeeee));background:-webkit-linear-gradient(top, #f8f8f8,#eeeeee);background:linear-gradient(top, #f8f8f8,#eeeeee);border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.4);box-shadow:inset 0 1px 1px rgba(255,255,255,0.4)}.list.inset .list-divider:first-child{top:0;border-top-width:0;-webkit-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0}.list.inset .list-divider:last-child{-webkit-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px}.list .chevron,.list [class*="button"],.list [class*="count"],.list .toggle{position:absolute;top:50%;right:10px}.list .chevron,.list [class*="count"]{margin-top:-10px}.list .chevron+[class*="count"]{right:30px}.list [class*="button"]{left:auto;margin-top:-14px}.list .toggle{margin-top:-15px}.popover{position:fixed;top:55px;left:50%;z-index:20;display:none;width:280px;padding:5px;margin-left:-146px;background-color:#555;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(5%, #555555), color-stop(6%, #555555), color-stop(30%, #111111));background:-webkit-linear-gradient(top, #555555 5%,#555555 6%,#111111 30%);background:linear-gradient(top, #555555 5%,#555555 6%,#111111 30%);border:1px solid #111;-webkit-border-radius:6px;border-radius:6px;opacity:0;-webkit-box-shadow:inset 0 1px 1px -1px #fff,0 3px 10px rgba(0,0,0,0.3);box-shadow:inset 0 1px 1px -1px #fff,0 3px 10px rgba(0,0,0,0.3);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);-webkit-transition:-webkit-transform 0.2s ease-in-out,opacity 0.2s ease-in-out;transition:transform 0.2s ease-in-out,opacity 0.2s ease-in-out}.popover:before,.popover:after{position:absolute;left:50%;width:0;height:0;content:''}.popover:before{top:-20px;margin-left:-21px;border-right:21px solid transparent;border-bottom:21px solid #111;border-left:21px solid transparent}.popover:after{top:-19px;margin-left:-20px;border-right:20px solid transparent;border-bottom:20px solid #555;border-left:20px solid transparent}.popover-header{display:-webkit-box;display:box;height:34px;margin-bottom:5px}.popover-header .title{position:absolute;top:0;left:0;width:100%;margin:15px 0;font-size:16px;font-weight:bold;line-height:12px;color:#fff;text-align:center;text-shadow:0 -1px rgba(0,0,0,0.5)}.popover-header [class*="button"]{z-index:25;font-size:12px;line-height:22px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.3);background-color:#454545;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #454545), color-stop(100%, #353535));background:-webkit-linear-gradient(top, #454545,#353535);background:linear-gradient(top, #454545,#353535);border:1px solid #111;-webkit-box-flex:0;box-flex:0}.popover-header .title+[class*="button"]:last-child,.popover-header .button+[class*="button"]:last-child,.popover-header [class*="button"].pull-right{position:absolute;top:5px;right:5px}.popover-header .button:active{color:#fff;background-color:#0876b1}.popover.visible{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10}.popover .button-block{margin-bottom:5px;border:1px solid #111}.popover .button-block:last-child{margin-bottom:0}.popover .list{width:auto;max-height:250px;margin-right:0;margin-bottom:0;margin-left:0;overflow:auto;background-color:#fff;border:1px solid #000;border-radius:3px;-webkit-overflow-scrolling:touch}.content.fade{left:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out}.content.fade.in{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}.content.slide{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:-webkit-transform 0.25s ease-in-out;transition:transform 0.25s ease-in-out}.content.slide.left{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}.content.slide.right{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}.segmented-controller{display:-webkit-box;display:box;margin-bottom:10px;overflow:hidden;font-size:12px;font-weight:bold;text-shadow:0 1px rgba(255,255,255,0.5);list-style:none;background-color:#f8f8f8;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d4d4d4));background:-webkit-linear-gradient(top, #f8f8f8,#d4d4d4);background:linear-gradient(top, #f8f8f8,#d4d4d4);border:1px solid #aaa;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.5),0 1px rgba(255,255,255,0.8);box-shadow:inset 0 1px rgba(255,255,255,0.5),0 1px rgba(255,255,255,0.8);-webkit-box-orient:horizontal;box-orient:horizontal}.segmented-controller li{overflow:hidden;text-align:center;white-space:nowrap;border-left:1px solid #aaa;-webkit-box-shadow:inset 1px 0 rgba(255,255,255,0.5);box-shadow:inset 1px 0 rgba(255,255,255,0.5);-webkit-box-flex:1;box-flex:1}.segmented-controller li>a{display:block;padding:8px 16px;overflow:hidden;line-height:15px;color:#333;text-overflow:ellipsis}.segmented-controller li:first-child{border-left-width:0;-webkit-box-shadow:none;box-shadow:none}.segmented-controller li.active{background-color:#ccc;-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.3);box-shadow:inset 0 1px 5px rgba(0,0,0,0.3)}.segmented-controller-item{display:none}.segmented-controller-item.active{display:block}.slider,.slider>li{width:100%;height:200px}.slider{overflow:hidden;background-color:#000}.slider>ul{position:relative;font-size:0;white-space:nowrap;-webkit-transition:all 0 linear;transition:all 0 linear}.slider>ul>li{display:inline-block;vertical-align:top;width:100%;height:100%}.slider>ul>li>*{font-size:14px}.toggle{position:relative;width:75px;height:28px;background-color:#eee;border:1px solid #bbb;-webkit-border-radius:20px;border-radius:20px;-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);box-shadow:inset 0 0 4px rgba(0,0,0,0.1)}.toggle:before{position:absolute;right:13px;font-weight:bold;line-height:28px;color:#777;text-shadow:0 1px #fff;text-transform:uppercase;content:"Off"}.toggle-handle{position:absolute;top:-1px;left:-1px;z-index:2;width:28px;height:28px;background-color:#fff;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);border:1px solid rgba(0,0,0,0.2);-webkit-border-radius:100px;border-radius:100px;-webkit-transition:-webkit-transform 0.1s ease-in-out,border 0.1s ease-in-out;transition:transform 0.1s ease-in-out,border 0.1s ease-in-out}.toggle.active{background-color:#19a8e4;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #088cd4), color-stop(100%, #19a8e4));background:-webkit-linear-gradient(top, #088cd4,#19a8e4);background:linear-gradient(top, #088cd4,#19a8e4);border:1px solid #096c9d;-webkit-box-shadow:inset 0 0 15px rgba(255,255,255,0.25);box-shadow:inset 0 0 15px rgba(255,255,255,0.25)}.toggle.active .toggle-handle{border-color:#0a76ad;-webkit-transform:translate3d(48px, 0, 0);transform:translate3d(48px, 0, 0)}.toggle.active:before{right:auto;left:15px;color:#fff;text-shadow:0 -1px rgba(0,0,0,0.25);content:"On"}.slider{margin-bottom:0;height:150px}.slider li img{width:100%}.form-wrapper{padding:10px}
data/templates/project/index.html ADDED
@@ -0,0 +1,160 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Movie finder</title>
6
+ <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7
+ <meta name="apple-mobile-web-app-capable" content="yes">
8
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
9
+
10
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
11
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
12
+ <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
13
+
14
+ <link rel="stylesheet" href="../../dist/ratchet.css">
15
+ <link rel="stylesheet" href="css/app.css">
16
+ <script src="../../dist/ratchet.js"></script>
17
+
18
+ </head>
19
+ <body>
20
+
21
+ <header class="bar-title">
22
+ <h1 class="title">Movie finder</h1>
23
+ </header>
24
+ <nav class="bar-standard bar-header-secondary">
25
+ <form>
26
+ <input type="search" placeholder="Search">
27
+ </form>
28
+ </nav>
29
+
30
+ <nav class="bar-tab">
31
+ <ul class="tab-inner">
32
+ <li class="tab-item active">
33
+ <a href="index.html" data-transition="fade">
34
+ <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
35
+ <div class="tab-label">Movies</div>
36
+ </a>
37
+ </li>
38
+ <li class="tab-item">
39
+ <a href="theaters.html" data-transition="fade">
40
+ <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
41
+ <div class="tab-label">Theaters</div>
42
+ </a>
43
+ </li>
44
+ <li class="tab-item">
45
+ <a href="settings.html" data-transition="fade">
46
+ <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
47
+ <div class="tab-label">Settings</div>
48
+ </a>
49
+ </li>
50
+ </ul>
51
+ </nav>
52
+
53
+ <div class="content">
54
+
55
+ <div class="slider">
56
+ <ul>
57
+ <li>
58
+ <img src="img/argo.png">
59
+ </li>
60
+ <li>
61
+ <img src="img/skyfall.png">
62
+ </li>
63
+ <li>
64
+ <img src="img/ralph.png">
65
+ </li>
66
+ </ul>
67
+ </div>
68
+
69
+ <ul class="list">
70
+ <li class="list-divider">Recommended movies</li>
71
+ <li>
72
+ <a href="choose-theater.html">
73
+ <strong>Argo</strong>
74
+ <p>Lorem ipsum dolor sit amet</p>
75
+ <span class="chevron"></span>
76
+ </a>
77
+ </li>
78
+ <li>
79
+ <a href="choose-theater.html" data-transition="slide-in">
80
+ <strong>Skyfall: 007</strong>
81
+ <p>Lorem ipsum dolor sit amet</p>
82
+ <span class="chevron"></span>
83
+ </a>
84
+ </li>
85
+ <li>
86
+ <a href="choose-theater.html" data-transition="slide-in">
87
+ <strong>Wreck-it Ralph</strong>
88
+ <p>Lorem ipsum dolor sit amet</p>
89
+ <span class="chevron"></span>
90
+ </a>
91
+ </li>
92
+ <li class="list-divider">Top movies</li>
93
+ <li>
94
+ <a href="choose-theater.html" data-transition="slide-in">
95
+ <strong>Movie 4</strong>
96
+ <p>Lorem ipsum dolor sit amet</p>
97
+ <span class="chevron"></span>
98
+ </a>
99
+ </li>
100
+ <li>
101
+ <a href="choose-theater.html" data-transition="slide-in">
102
+ <strong>Movie 5</strong>
103
+ <p>Lorem ipsum dolor sit amet</p>
104
+ <span class="chevron"></span>
105
+ </a>
106
+ </li>
107
+ <li>
108
+ <a href="choose-theater.html" data-transition="slide-in">
109
+ <strong>Movie 6</strong>
110
+ <p>Lorem ipsum dolor sit amet</p>
111
+ <span class="chevron"></span>
112
+ </a>
113
+ </li>
114
+ <li>
115
+ <a href="choose-theater.html" data-transition="slide-in">
116
+ <strong>Movie 7</strong>
117
+ <p>Lorem ipsum dolor sit amet</p>
118
+ <span class="chevron"></span>
119
+ </a>
120
+ </li>
121
+ <li>
122
+ <a href="choose-theater.html" data-transition="slide-in">
123
+ <strong>Movie 8</strong>
124
+ <p>Lorem ipsum dolor sit amet</p>
125
+ <span class="chevron"></span>
126
+ </a>
127
+ </li>
128
+ <li>
129
+ <a href="choose-theater.html" data-transition="slide-in">
130
+ <strong>Movie 9</strong>
131
+ <p>Lorem ipsum dolor sit amet</p>
132
+ <span class="chevron"></span>
133
+ </a>
134
+ </li>
135
+ <li>
136
+ <a href="choose-theater.html" data-transition="slide-in">
137
+ <strong>Movie 10</strong>
138
+ <p>Lorem ipsum dolor sit amet</p>
139
+ <span class="chevron"></span>
140
+ </a>
141
+ </li>
142
+ <li>
143
+ <a href="choose-theater.html" data-transition="slide-in">
144
+ <strong>Movie 11</strong>
145
+ <p>Lorem ipsum dolor sit amet</p>
146
+ <span class="chevron"></span>
147
+ </a>
148
+ </li>
149
+ <li>
150
+ <a href="choose-theater.html" data-transition="slide-in">
151
+ <strong>Movie 12</strong>
152
+ <p>Lorem ipsum dolor sit amet</p>
153
+ <span class="chevron"></span>
154
+ </a>
155
+ </li>
156
+ </ul>
157
+
158
+ </div>
159
+ </body>
160
+ </html>
data/templates/project/js/popovers.js ADDED
@@ -0,0 +1,63 @@
1
+ /* ----------------------------------
2
+ * POPOVER v1.0.0
3
+ * Licensed under The MIT License
4
+ * http://opensource.org/licenses/MIT
5
+ * ---------------------------------- */
6
+
7
+ !function () {
8
+
9
+ var popover;
10
+
11
+ var findPopovers = function (target) {
12
+ var i, popovers = document.querySelectorAll('a');
13
+ for (; target && target !== document; target = target.parentNode) {
14
+ for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
15
+ }
16
+ };
17
+
18
+ var onPopoverHidden = function () {
19
+ document.body.removeChild(backdrop);
20
+ popover.style.display = 'none';
21
+ popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
22
+ }
23
+
24
+ var backdrop = function () {
25
+ var element = document.createElement('div');
26
+
27
+ element.classList.add('backdrop');
28
+
29
+ element.addEventListener('touchend', function () {
30
+ popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
31
+ popover.classList.remove('visible');
32
+ });
33
+
34
+ return element;
35
+ }();
36
+
37
+ var getPopover = function (e) {
38
+ var anchor = findPopovers(e.target);
39
+
40
+ if (!anchor || !anchor.hash) return;
41
+
42
+ popover = document.querySelector(anchor.hash);
43
+
44
+ if (!popover || !popover.classList.contains('popover')) return;
45
+
46
+ return popover;
47
+ }
48
+
49
+ window.addEventListener('touchend', function (e) {
50
+ var popover = getPopover(e);
51
+
52
+ if (!popover) return;
53
+
54
+ popover.style.display = 'block';
55
+ popover.offsetHeight;
56
+ popover.classList.add('visible');
57
+
58
+ popover.parentNode.appendChild(backdrop);
59
+ });
60
+
61
+ window.addEventListener('click', function (e) { if (getPopover(e)) e.preventDefault(); });
62
+
63
+ }();