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,124 @@
|
|
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
|
+
|
8
|
+
/* General button styles
|
9
|
+
-------------------------------------------------- */
|
10
|
+
|
11
|
+
[class*="button"] {
|
12
|
+
position: relative;
|
13
|
+
display: inline-block;
|
14
|
+
padding: 4px 12px;
|
15
|
+
margin: 0;
|
16
|
+
font-weight: bold;
|
17
|
+
line-height: 18px;
|
18
|
+
color: #333;
|
19
|
+
text-align: center;
|
20
|
+
@include text-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
|
21
|
+
vertical-align: top;
|
22
|
+
cursor: pointer;
|
23
|
+
background-color: #f8f8f8;
|
24
|
+
@include background(linear-gradient(top, #f8f8f8, #d4d4d4));
|
25
|
+
border: 1px solid rgba(0, 0, 0, .3);
|
26
|
+
@include border-radius(3px);
|
27
|
+
@include box-shadow(inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05));
|
28
|
+
}
|
29
|
+
|
30
|
+
/* Active */
|
31
|
+
[class*="button"]:active {
|
32
|
+
padding-top: 5px;
|
33
|
+
padding-bottom: 3px;
|
34
|
+
color: #333;
|
35
|
+
background-color: #ccc;
|
36
|
+
background-image: none;
|
37
|
+
@include box-shadow(inset 0 3px 3px rgba(0, 0, 0, .2));
|
38
|
+
}
|
39
|
+
|
40
|
+
/* Button modifiers
|
41
|
+
-------------------------------------------------- */
|
42
|
+
|
43
|
+
/* Overriding styles for buttons with modifiers */
|
44
|
+
.button-main,
|
45
|
+
.button-positive,
|
46
|
+
.button-negative {
|
47
|
+
color: #fff;
|
48
|
+
@include text-shadow(0 -1px 0 rgba(0, 0, 0, .3));
|
49
|
+
}
|
50
|
+
|
51
|
+
/* Main button */
|
52
|
+
.button-main {
|
53
|
+
background-color: #1eafe7;
|
54
|
+
@include background(linear-gradient(top, #1eafe7, #1a97c8));
|
55
|
+
border: 1px solid #117aaa;
|
56
|
+
}
|
57
|
+
|
58
|
+
/* Positive button */
|
59
|
+
.button-positive {
|
60
|
+
background-color: #34ba15;
|
61
|
+
@include background(linear-gradient(top, #34ba15, #2da012));
|
62
|
+
border: 1px solid #278f0f;
|
63
|
+
}
|
64
|
+
|
65
|
+
/* Negative button */
|
66
|
+
.button-negative {
|
67
|
+
background-color: #e71e1e;
|
68
|
+
@include background(linear-gradient(top, #e71e1e, #c71a1a));
|
69
|
+
border: 1px solid #b51a1a;
|
70
|
+
}
|
71
|
+
|
72
|
+
/* Active state for buttons with modifiers */
|
73
|
+
.button-main:active,
|
74
|
+
.button-positive:active,
|
75
|
+
.button-negative:active {
|
76
|
+
color: #fff;
|
77
|
+
}
|
78
|
+
.button-main:active {
|
79
|
+
background-color: #0876b1;
|
80
|
+
}
|
81
|
+
.button-positive:active {
|
82
|
+
background-color: #298f11;
|
83
|
+
}
|
84
|
+
.button-negative:active {
|
85
|
+
background-color: #b21a1a;
|
86
|
+
}
|
87
|
+
|
88
|
+
/* Block level buttons (full width buttons) */
|
89
|
+
.button-block {
|
90
|
+
display: block;
|
91
|
+
padding: 11px 0 13px;
|
92
|
+
margin-bottom: 10px;
|
93
|
+
font-size: 16px;
|
94
|
+
}
|
95
|
+
|
96
|
+
/* Active state for block level buttons */
|
97
|
+
.button-block:active {
|
98
|
+
padding: 12px 0;
|
99
|
+
}
|
100
|
+
|
101
|
+
/* Counts in buttons
|
102
|
+
-------------------------------------------------- */
|
103
|
+
|
104
|
+
/* Generic styles for all counts within buttons */
|
105
|
+
[class*="button"] [class*="count"] {
|
106
|
+
padding-top: 2px;
|
107
|
+
padding-bottom: 2px;
|
108
|
+
margin-right: -4px;
|
109
|
+
margin-left: 4px;
|
110
|
+
@include text-shadow(none);
|
111
|
+
background-color: rgba(0, 0, 0, .2);
|
112
|
+
@include box-shadow(inset 0 1px 1px -1px #000000, 0 1px 1px -1px #fff);
|
113
|
+
}
|
114
|
+
|
115
|
+
/* Position counts within block level buttons
|
116
|
+
Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
|
117
|
+
stays at true center of button */
|
118
|
+
.button-block [class*="count"] {
|
119
|
+
position: absolute;
|
120
|
+
right: 0;
|
121
|
+
padding-top: 4px;
|
122
|
+
padding-bottom: 4px;
|
123
|
+
margin-right: 10px;
|
124
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
@import "compass-ratchet/shared";
|
2
|
+
|
3
|
+
@import "compass/css3/transform";
|
4
|
+
|
5
|
+
/* Chevrons
|
6
|
+
-------------------------------------------------- */
|
7
|
+
|
8
|
+
.chevron {
|
9
|
+
display: block;
|
10
|
+
height: 20px;
|
11
|
+
}
|
12
|
+
|
13
|
+
/* Base styles for both 1/2's of the chevron */
|
14
|
+
.chevron:before,
|
15
|
+
.chevron:after {
|
16
|
+
position: relative;
|
17
|
+
display: block;
|
18
|
+
width: 12px;
|
19
|
+
height: 4px;
|
20
|
+
background-color: #999;
|
21
|
+
content: '';
|
22
|
+
}
|
23
|
+
|
24
|
+
/* Position and rotate respective 1/2's of the chevron */
|
25
|
+
.chevron:before {
|
26
|
+
top: 5px;
|
27
|
+
@include rotate(45deg);
|
28
|
+
}
|
29
|
+
.chevron:after {
|
30
|
+
top: 7px;
|
31
|
+
@include rotate(-45deg);
|
32
|
+
}
|
@@ -0,0 +1,42 @@
|
|
1
|
+
/* General count styles
|
2
|
+
-------------------------------------------------- */
|
3
|
+
|
4
|
+
[class*="count"] {
|
5
|
+
display: inline-block;
|
6
|
+
padding: 4px 9px;
|
7
|
+
font-size: 12px;
|
8
|
+
font-weight: bold;
|
9
|
+
line-height: 13px;
|
10
|
+
color: #fff;
|
11
|
+
background-color: rgba(0, 0, 0, .3);
|
12
|
+
@include border-radius(100px);
|
13
|
+
}
|
14
|
+
|
15
|
+
/* Count modifiers
|
16
|
+
-------------------------------------------------- */
|
17
|
+
|
18
|
+
/* Overriding styles for counts with modifiers */
|
19
|
+
.count-main,
|
20
|
+
.count-positive,
|
21
|
+
.count-negative {
|
22
|
+
color: #fff;
|
23
|
+
@include text-shadow(0 -1px 0 rgba(0, 0, 0, .3));
|
24
|
+
}
|
25
|
+
|
26
|
+
/* Main count */
|
27
|
+
.count-main {
|
28
|
+
background-color: #1eafe7;
|
29
|
+
@include background(linear-gradient(top, #1eafe7, #1a97c8));
|
30
|
+
}
|
31
|
+
|
32
|
+
/* Positive count */
|
33
|
+
.count-positive {
|
34
|
+
background-color: #34ba15;
|
35
|
+
@include background(linear-gradient(top, #34ba15, #2da012));
|
36
|
+
}
|
37
|
+
|
38
|
+
/* Negative count */
|
39
|
+
.count-negative {
|
40
|
+
background-color: #e71e1e;
|
41
|
+
@include background(linear-gradient(top, #e71e1e, #c71a1a));
|
42
|
+
}
|
@@ -0,0 +1,126 @@
|
|
1
|
+
@import "compass-ratchet/shared";
|
2
|
+
|
3
|
+
@import "compass/css3/appearance";
|
4
|
+
@import "compass/css3/box-shadow";
|
5
|
+
@import "compass/css3/box-sizing";
|
6
|
+
@import "compass/css3/images";
|
7
|
+
|
8
|
+
/* Forms
|
9
|
+
-------------------------------------------------- */
|
10
|
+
|
11
|
+
/* Force form elements to inherit font styles */
|
12
|
+
input,
|
13
|
+
textarea,
|
14
|
+
button,
|
15
|
+
select {
|
16
|
+
font-family: inherit;
|
17
|
+
font-size: inherit;
|
18
|
+
}
|
19
|
+
|
20
|
+
/* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */
|
21
|
+
select,
|
22
|
+
textarea,
|
23
|
+
input[type="text"],
|
24
|
+
input[type=search],
|
25
|
+
input[type="password"],
|
26
|
+
input[type="datetime"],
|
27
|
+
input[type="datetime-local"],
|
28
|
+
input[type="date"],
|
29
|
+
input[type="month"],
|
30
|
+
input[type="time"],
|
31
|
+
input[type="week"],
|
32
|
+
input[type="number"],
|
33
|
+
input[type="email"],
|
34
|
+
input[type="url"],
|
35
|
+
input[type="tel"],
|
36
|
+
input[type="color"],
|
37
|
+
.input-group {
|
38
|
+
width: 100%;
|
39
|
+
height: 40px;
|
40
|
+
padding: 10px;
|
41
|
+
margin-bottom: 10px;
|
42
|
+
background: #fff;
|
43
|
+
border: 1px solid rgba(0, 0, 0, .2);
|
44
|
+
@include border-radius(3px);
|
45
|
+
@include box-shadow(0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1));
|
46
|
+
@include appearance(none);
|
47
|
+
@include box-sizing(border-box);
|
48
|
+
}
|
49
|
+
|
50
|
+
/* Fully round search input */
|
51
|
+
input[type=search] {
|
52
|
+
height: 34px;
|
53
|
+
font-size: 14px;
|
54
|
+
@include border-radius(30px);
|
55
|
+
}
|
56
|
+
|
57
|
+
/* Allow text area's height to grow larger than a normal input */
|
58
|
+
textarea {
|
59
|
+
height: auto;
|
60
|
+
}
|
61
|
+
|
62
|
+
/* Style select button to look like part of the Ratchet's style */
|
63
|
+
select {
|
64
|
+
height: auto;
|
65
|
+
font-size: 14px;
|
66
|
+
background-color: #f8f8f8;
|
67
|
+
@include background(linear-gradient(top, #f8f8f8, #d4d4d4));
|
68
|
+
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .1));
|
69
|
+
}
|
70
|
+
|
71
|
+
|
72
|
+
/* Input groups (cluster multiple inputs together into a single group)
|
73
|
+
-------------------------------------------------- */
|
74
|
+
|
75
|
+
/* Reset from initial form setup styles */
|
76
|
+
.input-group {
|
77
|
+
width: auto;
|
78
|
+
height: auto;
|
79
|
+
padding: 0;
|
80
|
+
}
|
81
|
+
|
82
|
+
/* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */
|
83
|
+
.input-group input {
|
84
|
+
margin-bottom: 0;
|
85
|
+
background-color: transparent;
|
86
|
+
border: 0;
|
87
|
+
border-bottom: 1px solid rgba(0, 0, 0, .2);
|
88
|
+
@include border-radius(0);
|
89
|
+
@include box-shadow(none);
|
90
|
+
}
|
91
|
+
|
92
|
+
/* Remove bottom border on last input to avoid double bottom border */
|
93
|
+
.input-group input:last-child {
|
94
|
+
border-bottom-width: 0;
|
95
|
+
}
|
96
|
+
|
97
|
+
/* Input groups with labels
|
98
|
+
-------------------------------------------------- */
|
99
|
+
|
100
|
+
/* To use labels with input groups, wrap a label and an input in an .input-row */
|
101
|
+
.input-row {
|
102
|
+
overflow: hidden;
|
103
|
+
border-bottom: 1px solid rgba(0, 0, 0, .2);
|
104
|
+
}
|
105
|
+
|
106
|
+
/* Remove bottom border on last input-row to avoid double bottom border */
|
107
|
+
.input-row:last-child {
|
108
|
+
border-bottom-width: 0;
|
109
|
+
}
|
110
|
+
|
111
|
+
/* Labels get floated left with a set percentage width */
|
112
|
+
.input-row label {
|
113
|
+
float: left;
|
114
|
+
width: 25%;
|
115
|
+
padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */
|
116
|
+
font-weight: bold;
|
117
|
+
}
|
118
|
+
|
119
|
+
/* Actual inputs float to right of labels and also have a set percentage */
|
120
|
+
.input-row label + input {
|
121
|
+
float: right;
|
122
|
+
width: 65%;
|
123
|
+
padding-left: 0;
|
124
|
+
margin-bottom: 0;
|
125
|
+
border-bottom: 0;
|
126
|
+
}
|
@@ -0,0 +1,122 @@
|
|
1
|
+
@import "compass-ratchet/shared";
|
2
|
+
|
3
|
+
@import "compass/css3/border-radius";
|
4
|
+
@import "compass/css3/box-shadow";
|
5
|
+
@import "compass/css3/box-sizing";
|
6
|
+
@import "compass/css3/images";
|
7
|
+
@import "compass/css3/text-shadow";
|
8
|
+
|
9
|
+
/* Lists
|
10
|
+
-------------------------------------------------- */
|
11
|
+
|
12
|
+
/* Remove usual bullet styles from list */
|
13
|
+
.list {
|
14
|
+
margin-bottom: 10px;
|
15
|
+
list-style: none;
|
16
|
+
background-color: #fff;
|
17
|
+
}
|
18
|
+
|
19
|
+
/* Pad each list item and add dividers */
|
20
|
+
.list li {
|
21
|
+
position: relative;
|
22
|
+
padding: 20px 60px 20px 10px; /* Given extra right padding to accomodate counts, chevrons or buttons */
|
23
|
+
border-bottom: 1px solid rgba(0, 0, 0, .1);
|
24
|
+
}
|
25
|
+
|
26
|
+
/* Give top border to first list items */
|
27
|
+
.list li:first-child {
|
28
|
+
border-top: 1px solid rgba(0, 0, 0, .1);
|
29
|
+
}
|
30
|
+
|
31
|
+
/* If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though) */
|
32
|
+
.list li > a:not([class*="button"]) {
|
33
|
+
position: relative;
|
34
|
+
display: block;
|
35
|
+
padding: inherit;
|
36
|
+
margin: -20px -60px -20px -10px;
|
37
|
+
color: inherit;
|
38
|
+
}
|
39
|
+
|
40
|
+
/* Inset list
|
41
|
+
-------------------------------------------------- */
|
42
|
+
|
43
|
+
.list.inset {
|
44
|
+
width: auto;
|
45
|
+
margin-right: 10px;
|
46
|
+
margin-left: 10px;
|
47
|
+
border: 1px solid rgba(0, 0, 0, .1);
|
48
|
+
@include border-radius(6px);
|
49
|
+
@include box-sizing(border-box);
|
50
|
+
}
|
51
|
+
|
52
|
+
/* Remove border from first/last standard list items to avoid double border at top/bottom of lists */
|
53
|
+
.list.inset li:first-child {
|
54
|
+
border-top-width: 0;
|
55
|
+
}
|
56
|
+
.list.inset li:last-child {
|
57
|
+
border-bottom-width: 0;
|
58
|
+
}
|
59
|
+
|
60
|
+
|
61
|
+
/* List dividers
|
62
|
+
-------------------------------------------------- */
|
63
|
+
|
64
|
+
.list .list-divider {
|
65
|
+
position: relative;
|
66
|
+
top: -1px;
|
67
|
+
padding-top: 6px;
|
68
|
+
padding-bottom: 6px;
|
69
|
+
font-size: 12px;
|
70
|
+
font-weight: bold;
|
71
|
+
line-height: 18px;
|
72
|
+
@include text-shadow(0 1px 0 rgba(255, 255, 255, .5));
|
73
|
+
background-color: #f8f8f8;
|
74
|
+
@include background(linear-gradient(top, #f8f8f8, #eee));
|
75
|
+
border-top: 1px solid rgba(0, 0, 0, .1);
|
76
|
+
border-bottom: 1px solid rgba(0, 0, 0, .1);
|
77
|
+
@include box-shadow(inset 0 1px 1px rgba(255, 255, 255, .4));
|
78
|
+
}
|
79
|
+
|
80
|
+
/* Rounding first divider on inset lists and remove border on the top */
|
81
|
+
.list.inset .list-divider:first-child {
|
82
|
+
top: 0;
|
83
|
+
border-top-width: 0;
|
84
|
+
@include border-radius(6px 6px 0 0);
|
85
|
+
}
|
86
|
+
|
87
|
+
/* Rounding last divider on inset lists */
|
88
|
+
.list.inset .list-divider:last-child {
|
89
|
+
@include border-radius(0 0 6px 6px);
|
90
|
+
}
|
91
|
+
|
92
|
+
/* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles)
|
93
|
+
-------------------------------------------------- */
|
94
|
+
.list .chevron,
|
95
|
+
.list [class*="button"],
|
96
|
+
.list [class*="count"],
|
97
|
+
.list .toggle {
|
98
|
+
position: absolute;
|
99
|
+
top: 50%;
|
100
|
+
right: 10px;
|
101
|
+
}
|
102
|
+
|
103
|
+
/* Position chevrons/counts vertically centered on the right in list items */
|
104
|
+
.list .chevron,
|
105
|
+
.list [class*="count"] {
|
106
|
+
margin-top: -10px; /* Half height of chevron */
|
107
|
+
}
|
108
|
+
|
109
|
+
/* Push count over if there's a sibling chevron */
|
110
|
+
.list .chevron + [class*="count"] {
|
111
|
+
right: 30px;
|
112
|
+
}
|
113
|
+
|
114
|
+
/* Position buttons vertically centered on the right in list items */
|
115
|
+
.list [class*="button"] {
|
116
|
+
left: auto;
|
117
|
+
margin-top: -14px; /* Half height of button */
|
118
|
+
}
|
119
|
+
|
120
|
+
.list .toggle {
|
121
|
+
margin-top: -15px; /* Half height of toggle */
|
122
|
+
}
|