compass-ratchet 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +67 -0
- data/lib/compass-ratchet.rb +3 -0
- data/stylesheets/_compass-ratchet.scss +14 -0
- data/stylesheets/compass-ratchet/_bars.scss +330 -0
- data/stylesheets/compass-ratchet/_base.scss +155 -0
- data/stylesheets/compass-ratchet/_buttons.scss +124 -0
- data/stylesheets/compass-ratchet/_chevrons.scss +32 -0
- data/stylesheets/compass-ratchet/_counts.scss +42 -0
- data/stylesheets/compass-ratchet/_forms.scss +126 -0
- data/stylesheets/compass-ratchet/_lists.scss +122 -0
- data/stylesheets/compass-ratchet/_popovers.scss +158 -0
- data/stylesheets/compass-ratchet/_push.scss +30 -0
- data/stylesheets/compass-ratchet/_segmented-controllers.scss +67 -0
- data/stylesheets/compass-ratchet/_shared.scss +8 -0
- data/stylesheets/compass-ratchet/_sliders.scss +40 -0
- data/stylesheets/compass-ratchet/_toggles.scss +71 -0
- data/templates/project/checkout.html +81 -0
- data/templates/project/choose-movie.html +125 -0
- data/templates/project/choose-theater.html +110 -0
- data/templates/project/config.rb +8 -0
- data/templates/project/css/app.css +1 -0
- data/templates/project/img/argo.png +0 -0
- data/templates/project/img/ralph.png +0 -0
- data/templates/project/img/skyfall.png +0 -0
- data/templates/project/index.html +160 -0
- data/templates/project/js/popovers.js +63 -0
- data/templates/project/js/push.js +417 -0
- data/templates/project/js/segmented-controllers.js +47 -0
- data/templates/project/js/sliders.js +114 -0
- data/templates/project/js/toggles.js +94 -0
- data/templates/project/manifest.rb +24 -0
- data/templates/project/sass/app.scss +13 -0
- data/templates/project/settings.html +73 -0
- data/templates/project/theaters.html +131 -0
- metadata +111 -0
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
@import "compass-ratchet/shared";
|
|
2
|
+
|
|
3
|
+
@import "compass/css3/border-radius";
|
|
4
|
+
@import "compass/css3/box-shadow";
|
|
5
|
+
@import "compass/css3/box";
|
|
6
|
+
@import "compass/css3/images";
|
|
7
|
+
@import "compass/css3/opacity";
|
|
8
|
+
@import "compass/css3/transform";
|
|
9
|
+
@import "compass/css3/transition";
|
|
10
|
+
@import "compass/css3/text-shadow";
|
|
11
|
+
|
|
12
|
+
/* Popovers (to be used with popovers.js)
|
|
13
|
+
-------------------------------------------------- */
|
|
14
|
+
|
|
15
|
+
.popover {
|
|
16
|
+
position: fixed;
|
|
17
|
+
top: 55px;
|
|
18
|
+
left: 50%;
|
|
19
|
+
z-index: 20;
|
|
20
|
+
display: none;
|
|
21
|
+
width: 280px;
|
|
22
|
+
padding: 5px;
|
|
23
|
+
margin-left: -146px;
|
|
24
|
+
background-color: #555;
|
|
25
|
+
@include background(linear-gradient(top, #555 5%, #555 6%, #111 30%));
|
|
26
|
+
border: 1px solid #111;
|
|
27
|
+
@include border-radius(6px);
|
|
28
|
+
opacity: 0;
|
|
29
|
+
@include box-shadow(inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3));
|
|
30
|
+
@include translate3d(0, -15px, 0);
|
|
31
|
+
@include transition(transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */
|
|
35
|
+
.popover:before,
|
|
36
|
+
.popover:after {
|
|
37
|
+
position: absolute;
|
|
38
|
+
left: 50%;
|
|
39
|
+
width: 0;
|
|
40
|
+
height: 0;
|
|
41
|
+
content: '';
|
|
42
|
+
}
|
|
43
|
+
.popover:before {
|
|
44
|
+
top: -20px;
|
|
45
|
+
margin-left: -21px;
|
|
46
|
+
border-right: 21px solid transparent;
|
|
47
|
+
border-bottom: 21px solid #111;
|
|
48
|
+
border-left: 21px solid transparent;
|
|
49
|
+
}
|
|
50
|
+
.popover:after {
|
|
51
|
+
top: -19px;
|
|
52
|
+
margin-left: -20px;
|
|
53
|
+
border-right: 20px solid transparent;
|
|
54
|
+
border-bottom: 20px solid #555;
|
|
55
|
+
border-left: 20px solid transparent;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Wrapper for a title and buttons */
|
|
59
|
+
.popover-header {
|
|
60
|
+
display: -webkit-box;
|
|
61
|
+
display: box;
|
|
62
|
+
height: 34px;
|
|
63
|
+
margin-bottom: 5px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Centered title for popover */
|
|
67
|
+
.popover-header .title {
|
|
68
|
+
position: absolute;
|
|
69
|
+
top: 0;
|
|
70
|
+
left: 0;
|
|
71
|
+
width: 100%;
|
|
72
|
+
margin: 15px 0;
|
|
73
|
+
font-size: 16px;
|
|
74
|
+
font-weight: bold;
|
|
75
|
+
line-height: 12px;
|
|
76
|
+
color: #fff;
|
|
77
|
+
text-align: center;
|
|
78
|
+
@include text-shadow(0 -1px rgba(0, 0, 0, .5));
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Generic style for all buttons in .popover-header */
|
|
82
|
+
.popover-header [class*="button"] {
|
|
83
|
+
z-index: 25;
|
|
84
|
+
font-size: 12px;
|
|
85
|
+
line-height: 22px;
|
|
86
|
+
color: #fff;
|
|
87
|
+
@include text-shadow(0 -1px 0 rgba(0, 0, 0, .3));
|
|
88
|
+
background-color: #454545;
|
|
89
|
+
@include background(linear-gradient(top, #454545, #353535));
|
|
90
|
+
border: 1px solid #111;
|
|
91
|
+
@include box-flex(0);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Hacky way to right align buttons outside of flex-box system
|
|
95
|
+
Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
|
|
96
|
+
.popover-header .title + [class*="button"]:last-child,
|
|
97
|
+
.popover-header .button + [class*="button"]:last-child,
|
|
98
|
+
.popover-header [class*="button"].pull-right {
|
|
99
|
+
position: absolute;
|
|
100
|
+
top: 5px;
|
|
101
|
+
right: 5px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* Active state for popover header buttons */
|
|
105
|
+
.popover-header .button:active {
|
|
106
|
+
color: #fff;
|
|
107
|
+
background-color: #0876b1;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Popover animation
|
|
111
|
+
-------------------------------------------------- */
|
|
112
|
+
|
|
113
|
+
.popover.visible {
|
|
114
|
+
@include opacity(1);
|
|
115
|
+
@include translate3d(0, 0, 0);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Backdrop (used as invisible touch escape)
|
|
119
|
+
-------------------------------------------------- */
|
|
120
|
+
|
|
121
|
+
.backdrop {
|
|
122
|
+
position: fixed;
|
|
123
|
+
top: 0;
|
|
124
|
+
right: 0;
|
|
125
|
+
bottom: 0;
|
|
126
|
+
left: 0;
|
|
127
|
+
z-index: 10;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Block level buttons in popovers
|
|
131
|
+
-------------------------------------------------- */
|
|
132
|
+
|
|
133
|
+
/* Positioning and giving darker border to look sharp against dark popover */
|
|
134
|
+
.popover .button-block {
|
|
135
|
+
margin-bottom: 5px;
|
|
136
|
+
border: 1px solid #111;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Remove extra margin on bottom of last button */
|
|
140
|
+
.popover .button-block:last-child {
|
|
141
|
+
margin-bottom: 0;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* Lists in popovers
|
|
145
|
+
-------------------------------------------------- */
|
|
146
|
+
|
|
147
|
+
.popover .list {
|
|
148
|
+
width: auto;
|
|
149
|
+
max-height: 250px;
|
|
150
|
+
margin-right: 0;
|
|
151
|
+
margin-bottom: 0;
|
|
152
|
+
margin-left: 0;
|
|
153
|
+
overflow: auto;
|
|
154
|
+
background-color: #fff;
|
|
155
|
+
border: 1px solid #000;
|
|
156
|
+
border-radius: 3px;
|
|
157
|
+
-webkit-overflow-scrolling: touch;
|
|
158
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
@import "compass-ratchet/shared";
|
|
2
|
+
|
|
3
|
+
@import "compass/css3/opacity";
|
|
4
|
+
@import "compass/css3/transform";
|
|
5
|
+
@import "compass/css3/transition";
|
|
6
|
+
|
|
7
|
+
/* Push styles (to be used with push.js)
|
|
8
|
+
-------------------------------------------------- */
|
|
9
|
+
|
|
10
|
+
/* Fade animation */
|
|
11
|
+
.content.fade {
|
|
12
|
+
left: 0;
|
|
13
|
+
@include opacity(0);
|
|
14
|
+
@include transition(opacity .2s ease-in-out);
|
|
15
|
+
}
|
|
16
|
+
.content.fade.in {
|
|
17
|
+
@include opacity(1);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Slide animation */
|
|
21
|
+
.content.slide {
|
|
22
|
+
@include translate3d(0, 0, 0);
|
|
23
|
+
@include transition(transform .25s ease-in-out);
|
|
24
|
+
}
|
|
25
|
+
.content.slide.left {
|
|
26
|
+
@include translate3d(-100%, 0, 0);
|
|
27
|
+
}
|
|
28
|
+
.content.slide.right {
|
|
29
|
+
@include translate3d(100%, 0, 0);
|
|
30
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
@import "compass-ratchet/shared";
|
|
2
|
+
|
|
3
|
+
@import "compass/css3/border-radius";
|
|
4
|
+
@import "compass/css3/box";
|
|
5
|
+
@import "compass/css3/box-shadow";
|
|
6
|
+
@import "compass/css3/images";
|
|
7
|
+
@import "compass/css3/text-shadow";
|
|
8
|
+
|
|
9
|
+
/* Segmented controllers
|
|
10
|
+
-------------------------------------------------- */
|
|
11
|
+
|
|
12
|
+
.segmented-controller {
|
|
13
|
+
display: -webkit-box;
|
|
14
|
+
display: box;
|
|
15
|
+
margin-bottom: 10px;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
font-size: 12px;
|
|
18
|
+
font-weight: bold;
|
|
19
|
+
@include text-shadow(0 1px rgba(255, 255, 255, .5));
|
|
20
|
+
list-style: none;
|
|
21
|
+
background-color: #f8f8f8;
|
|
22
|
+
@include background(linear-gradient(top, #f8f8f8, #d4d4d4));
|
|
23
|
+
border: 1px solid #aaa;
|
|
24
|
+
@include border-radius(3px);
|
|
25
|
+
@include box-shadow(inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, .8));
|
|
26
|
+
@include box-orient(horizontal);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Section within controller */
|
|
30
|
+
.segmented-controller li {
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
text-align: center;
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
border-left: 1px solid #aaa;
|
|
35
|
+
@include box-shadow(inset 1px 0 rgba(255, 255, 255, .5));
|
|
36
|
+
@include box-flex(1);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Link that fills each section */
|
|
40
|
+
.segmented-controller li > a {
|
|
41
|
+
display: block;
|
|
42
|
+
padding: 8px 16px;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
line-height: 15px;
|
|
45
|
+
color: #333;
|
|
46
|
+
text-overflow: ellipsis;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Remove border-left and shadow from first section */
|
|
50
|
+
.segmented-controller li:first-child {
|
|
51
|
+
border-left-width: 0;
|
|
52
|
+
@include box-shadow(none);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Active segment of controller */
|
|
56
|
+
.segmented-controller li.active {
|
|
57
|
+
background-color: #ccc;
|
|
58
|
+
@include box-shadow(inset 0 1px 5px rgba(0, 0, 0, .3));
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.segmented-controller-item {
|
|
62
|
+
display: none;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.segmented-controller-item.active {
|
|
66
|
+
display: block;
|
|
67
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
@import "compass-ratchet/shared";
|
|
2
|
+
|
|
3
|
+
@import "compass/css3/transition";
|
|
4
|
+
|
|
5
|
+
/* Slider styles (to be used with sliders.js)
|
|
6
|
+
-------------------------------------------------- */
|
|
7
|
+
|
|
8
|
+
/* Width/height of slider */
|
|
9
|
+
.slider,
|
|
10
|
+
.slider > li {
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 200px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Outer wrapper for slider */
|
|
16
|
+
.slider {
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
background-color: #000;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Inner wrapper for slider (width of all slides together) */
|
|
22
|
+
.slider > ul {
|
|
23
|
+
position: relative;
|
|
24
|
+
font-size: 0; /* Remove spaces from inline-block children */
|
|
25
|
+
white-space: nowrap;
|
|
26
|
+
@include transition(all 0 linear);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Individual slide */
|
|
30
|
+
.slider > ul > li {
|
|
31
|
+
display: inline-block;
|
|
32
|
+
vertical-align: top; /* Ensure that li always aligns to top */
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: 100%;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Required reset of font-size to same as standard body */
|
|
38
|
+
.slider > ul > li > * {
|
|
39
|
+
font-size: 14px;
|
|
40
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
@import "compass-ratchet/shared";
|
|
2
|
+
|
|
3
|
+
@import "compass/css3/border-radius";
|
|
4
|
+
@import "compass/css3/box-shadow";
|
|
5
|
+
@import "compass/css3/images";
|
|
6
|
+
@import "compass/css3/text-shadow";
|
|
7
|
+
@import "compass/css3/transition";
|
|
8
|
+
@import "compass/css3/transform";
|
|
9
|
+
|
|
10
|
+
/* Toggle styles (to be used with toggles.js)
|
|
11
|
+
-------------------------------------------------- */
|
|
12
|
+
|
|
13
|
+
.toggle {
|
|
14
|
+
position: relative;
|
|
15
|
+
width: 75px;
|
|
16
|
+
height: 28px;
|
|
17
|
+
background-color: #eee;
|
|
18
|
+
border: 1px solid #bbb;
|
|
19
|
+
@include border-radius(20px);
|
|
20
|
+
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, .1));
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Text indicating "on" or "off". Default is "off" */
|
|
24
|
+
.toggle:before {
|
|
25
|
+
position: absolute;
|
|
26
|
+
right: 13px;
|
|
27
|
+
font-weight: bold;
|
|
28
|
+
line-height: 28px;
|
|
29
|
+
color: #777;
|
|
30
|
+
@include text-shadow(0 1px #fff);
|
|
31
|
+
text-transform: uppercase;
|
|
32
|
+
content: "Off";
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Sliding handle */
|
|
36
|
+
.toggle-handle {
|
|
37
|
+
position: absolute;
|
|
38
|
+
top: -1px;
|
|
39
|
+
left: -1px;
|
|
40
|
+
z-index: 2;
|
|
41
|
+
width: 28px;
|
|
42
|
+
height: 28px;
|
|
43
|
+
background-color: #fff;
|
|
44
|
+
@include background(linear-gradient(top, #fff, #f2f2f2));
|
|
45
|
+
border: 1px solid rgba(0, 0, 0, .2);
|
|
46
|
+
@include border-radius(100px);
|
|
47
|
+
@include transition(transform 0.1s ease-in-out, border 0.1s ease-in-out);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Active state for toggle */
|
|
51
|
+
.toggle.active {
|
|
52
|
+
background-color: #19a8e4;
|
|
53
|
+
@include background(linear-gradient(top, #088cd4, #19a8e4));
|
|
54
|
+
border: 1px solid #096c9d;
|
|
55
|
+
@include box-shadow(inset 0 0 15px rgba(255, 255, 255, .25));
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Active state for toggle handle */
|
|
59
|
+
.toggle.active .toggle-handle {
|
|
60
|
+
border-color: #0a76ad;
|
|
61
|
+
@include translate3d(48px,0,0);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Change "off" to "on" for active state */
|
|
65
|
+
.toggle.active:before {
|
|
66
|
+
right: auto;
|
|
67
|
+
left: 15px;
|
|
68
|
+
color: #fff;
|
|
69
|
+
@include text-shadow(0 -1px rgba(0, 0, 0, 0.25));
|
|
70
|
+
content: "On";
|
|
71
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
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
|
+
<header class="bar-title">
|
|
22
|
+
<a class="button-prev" href="choose-theater.html" data-transition="slide-out">
|
|
23
|
+
Back
|
|
24
|
+
</a>
|
|
25
|
+
<h1 class="title">Buy tickets</h1>
|
|
26
|
+
</header>
|
|
27
|
+
|
|
28
|
+
<nav class="bar-tab">
|
|
29
|
+
<ul class="tab-inner">
|
|
30
|
+
<li class="tab-item active">
|
|
31
|
+
<a href="index.html" data-transition="fade">
|
|
32
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
|
33
|
+
<div class="tab-label">Movies</div>
|
|
34
|
+
</a>
|
|
35
|
+
</li>
|
|
36
|
+
<li class="tab-item">
|
|
37
|
+
<a href="theaters.html" data-transition="fade">
|
|
38
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
|
39
|
+
<div class="tab-label">Theaters</div>
|
|
40
|
+
</a>
|
|
41
|
+
</li>
|
|
42
|
+
<li class="tab-item">
|
|
43
|
+
<a href="settings.html" data-transition="fade">
|
|
44
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
|
45
|
+
<div class="tab-label">Settings</div>
|
|
46
|
+
</a>
|
|
47
|
+
</li>
|
|
48
|
+
</ul>
|
|
49
|
+
</nav>
|
|
50
|
+
|
|
51
|
+
<div class="content">
|
|
52
|
+
<div class="checkout-form content-padded">
|
|
53
|
+
<form>
|
|
54
|
+
<div class="input-group">
|
|
55
|
+
<div class="input-row">
|
|
56
|
+
<input type="text" placeholder="Fullname">
|
|
57
|
+
</div>
|
|
58
|
+
<div class="input-row">
|
|
59
|
+
<input type="email" placeholder="Email">
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<div class="input-group">
|
|
64
|
+
<div class="input-row">
|
|
65
|
+
<input type="text" placeholder="Name on card">
|
|
66
|
+
</div>
|
|
67
|
+
<div class="input-row">
|
|
68
|
+
<input type="text" placeholder="Credit card number">
|
|
69
|
+
</div>
|
|
70
|
+
<div class="input-row">
|
|
71
|
+
<input type="text" placeholder="Security code">
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<a class="button-positive button-block">Checkout</a>
|
|
76
|
+
</form>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
</body>
|
|
81
|
+
</html>
|