stitch 0.1.1 → 0.1.2
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/lib/stitch/version.rb +1 -1
- data/stylesheets/stitch/_reset.scss +81 -100
- data/stylesheets/stitch/_utilities.scss +4 -6
- data/stylesheets/stitch/patterns/_css3.scss +28 -31
- data/stylesheets/stitch/patterns/accessibility/_hide-content.scss +6 -6
- data/stylesheets/stitch/patterns/animation/_hardware-acceleration.scss +1 -3
- data/stylesheets/stitch/patterns/animation/_timing-functions.scss +74 -29
- data/stylesheets/stitch/patterns/forms/_search-fields.scss +1 -3
- data/stylesheets/stitch/patterns/images/_image-rendering.scss +13 -13
- data/stylesheets/stitch/patterns/images/_image-replace.scss +3 -3
- data/stylesheets/stitch/patterns/layout/_clear-floats.scss +6 -6
- data/stylesheets/stitch/patterns/layout/_columns.scss +4 -4
- data/stylesheets/stitch/patterns/layout/_media.scss +11 -11
- data/stylesheets/stitch/patterns/legacy/_has-layout.scss +3 -3
- data/stylesheets/stitch/patterns/legacy/_inline-block.scss +5 -5
- data/stylesheets/stitch/patterns/mobile/_fixed-text.scss +3 -3
- data/stylesheets/stitch/patterns/print/_append-content.scss +3 -4
- data/stylesheets/stitch/patterns/print/_text.scss +3 -4
- data/stylesheets/stitch/patterns/text/_font-stacks.scss +3 -4
- data/stylesheets/stitch/patterns/text/_hyphens.scss +4 -4
- data/stylesheets/stitch/patterns/text/_text-rendering.scss +5 -5
- metadata +7 -5
data/lib/stitch/version.rb
CHANGED
@@ -1,26 +1,23 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
|
5
|
-
*/
|
1
|
+
// 1. Keeps page centred in all browsers regardless of content height
|
2
|
+
// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
|
3
|
+
// www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
|
6
4
|
html {
|
7
|
-
overflow-y: scroll;
|
8
|
-
-webkit-text-size-adjust: 100%;
|
9
|
-
-ms-text-size-adjust: 100%;
|
10
|
-
text-size-adjust: 100%;
|
5
|
+
overflow-y: scroll; // 1
|
6
|
+
-webkit-text-size-adjust: 100%; // 2
|
7
|
+
-ms-text-size-adjust: 100%; // 2
|
8
|
+
text-size-adjust: 100%; // 2
|
11
9
|
}
|
12
10
|
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
*/
|
11
|
+
|
12
|
+
// 1. Clear default browser margin
|
13
|
+
// 2. Default line-height inconsistent across browsers
|
17
14
|
body {
|
18
|
-
margin:0;
|
19
|
-
line-height:1;
|
15
|
+
margin:0; // 1
|
16
|
+
line-height:1; // 2
|
20
17
|
}
|
21
18
|
|
22
|
-
|
23
|
-
------------------------------------------------
|
19
|
+
// Forms
|
20
|
+
// ------------------------------------------------
|
24
21
|
|
25
22
|
form {
|
26
23
|
margin:0;
|
@@ -32,109 +29,97 @@ fieldset {
|
|
32
29
|
border:0;
|
33
30
|
}
|
34
31
|
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
*/
|
32
|
+
|
33
|
+
// 1. Corrects font size not being inherited in all browsers
|
34
|
+
// 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome
|
35
|
+
// 3. Improves appearance and consistency in all browsers
|
40
36
|
button,
|
41
37
|
input,
|
42
38
|
select,
|
43
39
|
textarea {
|
44
|
-
font-size: 100%;
|
45
|
-
font-family:inherit;
|
46
|
-
margin: 0;
|
47
|
-
padding:0;
|
48
|
-
vertical-align: baseline;
|
49
|
-
|
50
|
-
}
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
* 2. Corrects inner spacing displayed oddly in IE6/7
|
55
|
-
*/
|
40
|
+
font-size: 100%; // 1
|
41
|
+
font-family:inherit; // 1
|
42
|
+
margin: 0; // 2
|
43
|
+
padding:0; // 2
|
44
|
+
vertical-align: baseline; // 3
|
45
|
+
*vertical-align: middle; // 3
|
46
|
+
}
|
47
|
+
|
48
|
+
// 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
|
49
|
+
// 2. Corrects inner spacing displayed oddly in IE6/7
|
56
50
|
button,
|
57
51
|
input {
|
58
|
-
|
59
|
-
|
52
|
+
line-height: normal; // 1
|
53
|
+
overflow: visible; // 2
|
60
54
|
}
|
61
55
|
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
*/
|
56
|
+
|
57
|
+
// 1. Removes default vertical scrollbar in IE6/7/8/9
|
58
|
+
// 2. Improves readability and alignment in all browsers
|
66
59
|
textarea {
|
67
60
|
overflow:auto;
|
68
61
|
vertical-align:top;
|
69
62
|
padding:0;
|
70
63
|
}
|
71
64
|
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
*/
|
65
|
+
|
66
|
+
// 1. Addresses appearance set to searchfield in S5, Chrome
|
67
|
+
// 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
|
76
68
|
input[type="search"] {
|
77
|
-
-webkit-appearance: textfield;
|
69
|
+
-webkit-appearance: textfield; // 1
|
78
70
|
-moz-box-sizing: content-box;
|
79
|
-
-webkit-box-sizing: content-box;
|
71
|
+
-webkit-box-sizing: content-box; // 2
|
80
72
|
box-sizing: content-box;
|
81
73
|
}
|
82
74
|
|
83
|
-
|
84
|
-
|
85
|
-
*/
|
75
|
+
|
76
|
+
// Corrects inner padding displayed oddly in S5, Chrome on OSX
|
86
77
|
input[type="search"]::-webkit-search-decoration {
|
87
78
|
-webkit-appearance: none;
|
88
79
|
}
|
89
80
|
|
90
|
-
|
91
|
-
|
92
|
-
*/
|
81
|
+
|
82
|
+
// Remove the webkit glow
|
93
83
|
:focus {
|
94
84
|
outline:none;
|
95
85
|
}
|
96
86
|
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
*/
|
87
|
+
|
88
|
+
// 1. Addresses box sizing set to content-box in IE8/9
|
89
|
+
// 2. Addresses excess padding in IE8/9
|
101
90
|
input[type="checkbox"],
|
102
91
|
input[type="radio"] {
|
103
|
-
box-sizing: border-box;
|
104
|
-
padding: 0;
|
92
|
+
box-sizing: border-box; // 1
|
93
|
+
padding: 0; // 2
|
105
94
|
}
|
106
95
|
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
*/
|
96
|
+
|
97
|
+
// Corrects inner padding and border displayed oddly in FF3/4
|
98
|
+
// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
|
111
99
|
button::-moz-focus-inner,
|
112
100
|
input::-moz-focus-inner {
|
113
101
|
border: 0;
|
114
102
|
padding: 0;
|
115
103
|
}
|
116
104
|
|
117
|
-
|
118
|
-
------------------------------------------------
|
105
|
+
// Images
|
106
|
+
// ------------------------------------------------
|
119
107
|
|
120
|
-
|
121
|
-
* Chrome gives figures margin
|
122
|
-
*/
|
108
|
+
// Chrome gives figures margin
|
123
109
|
figure {
|
124
110
|
margin:0;
|
125
111
|
}
|
126
112
|
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
*/
|
113
|
+
|
114
|
+
// 1. Nicer image sizing in IE
|
115
|
+
// 2. Common default
|
131
116
|
img {
|
132
|
-
-ms-interpolation-mode: bicubic;
|
133
|
-
display:block;
|
117
|
+
-ms-interpolation-mode: bicubic; // 1
|
118
|
+
display:block; // 2
|
134
119
|
}
|
135
120
|
|
136
|
-
|
137
|
-
------------------------------------------------
|
121
|
+
// Lists
|
122
|
+
// ------------------------------------------------
|
138
123
|
|
139
124
|
ol,
|
140
125
|
ul {
|
@@ -147,12 +132,11 @@ dd {
|
|
147
132
|
margin:0;
|
148
133
|
}
|
149
134
|
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
*/
|
135
|
+
|
136
|
+
// Reset list items back to normal block display.
|
137
|
+
// This allows us to use lists for semantic markup
|
138
|
+
// without needing to set this each time.
|
139
|
+
// Lists only look like lists in blocks of copy.
|
156
140
|
li {
|
157
141
|
display: block;
|
158
142
|
padding: 0;
|
@@ -160,12 +144,11 @@ li {
|
|
160
144
|
list-style: none;
|
161
145
|
}
|
162
146
|
|
163
|
-
|
164
|
-
------------------------------------------------
|
147
|
+
// Headings
|
148
|
+
// ------------------------------------------------
|
149
|
+
|
165
150
|
|
166
|
-
|
167
|
-
* Resets all headings to look like normal text
|
168
|
-
*/
|
151
|
+
// Resets all headings to look like normal text
|
169
152
|
h1,
|
170
153
|
h2,
|
171
154
|
h3,
|
@@ -178,8 +161,8 @@ h6 {
|
|
178
161
|
margin:0;
|
179
162
|
}
|
180
163
|
|
181
|
-
|
182
|
-
------------------------------------------------
|
164
|
+
// Block Text
|
165
|
+
// ------------------------------------------------
|
183
166
|
|
184
167
|
p {
|
185
168
|
margin:0;
|
@@ -189,9 +172,8 @@ blockquote {
|
|
189
172
|
margin:0;
|
190
173
|
}
|
191
174
|
|
192
|
-
|
193
|
-
|
194
|
-
*/
|
175
|
+
|
176
|
+
// Improve the appearance of preformatted text
|
195
177
|
pre {
|
196
178
|
white-space: pre;
|
197
179
|
white-space: pre-wrap;
|
@@ -201,8 +183,8 @@ pre {
|
|
201
183
|
font-size:inherit;
|
202
184
|
}
|
203
185
|
|
204
|
-
|
205
|
-
------------------------------------------------
|
186
|
+
// Inline Text
|
187
|
+
// ------------------------------------------------
|
206
188
|
|
207
189
|
cite {
|
208
190
|
font-style:normal;
|
@@ -268,9 +250,8 @@ a:active {
|
|
268
250
|
outline: none;
|
269
251
|
}
|
270
252
|
|
271
|
-
|
272
|
-
|
273
|
-
*/
|
253
|
+
|
254
|
+
// Set sub, sup without affecting line-height: gist.github.com/413930
|
274
255
|
sub,sup {
|
275
256
|
font-size: 75%;
|
276
257
|
line-height: 0;
|
@@ -285,8 +266,8 @@ sub {
|
|
285
266
|
bottom: -0.25em;
|
286
267
|
}
|
287
268
|
|
288
|
-
|
289
|
-
------------------------------------------------
|
269
|
+
// HTML 5 Block Elements
|
270
|
+
// ------------------------------------------------
|
290
271
|
|
291
272
|
article,
|
292
273
|
aside,
|
@@ -302,8 +283,8 @@ section {
|
|
302
283
|
display:block;
|
303
284
|
}
|
304
285
|
|
305
|
-
|
306
|
-
------------------------------------------------
|
286
|
+
// Tables
|
287
|
+
// ------------------------------------------------
|
307
288
|
|
308
289
|
table {
|
309
290
|
border-collapse: collapse;
|
@@ -1,5 +1,5 @@
|
|
1
|
-
|
2
|
-
----------------------------------------
|
1
|
+
// Prefix properties and values
|
2
|
+
// ----------------------------------------
|
3
3
|
|
4
4
|
$default-prefixes: -webkit, -moz, -o, -khtml, -ms;
|
5
5
|
|
@@ -27,10 +27,8 @@ $default-prefixes: -webkit, -moz, -o, -khtml, -ms;
|
|
27
27
|
}
|
28
28
|
}
|
29
29
|
|
30
|
-
|
31
|
-
|
32
|
-
* @param $name string File to import
|
33
|
-
*/
|
30
|
+
// Allows you to import a file only once
|
31
|
+
// @param $name string File to import
|
34
32
|
$imported-once-files: ();
|
35
33
|
@function import-once($name) {
|
36
34
|
@if index($imported-once-files, $name) {
|
@@ -1,5 +1,5 @@
|
|
1
|
-
|
2
|
-
----------------------------------------
|
1
|
+
// Appearance
|
2
|
+
// ----------------------------------------
|
3
3
|
|
4
4
|
$default-prefixes-appearance: -webkit, -moz;
|
5
5
|
|
@@ -8,15 +8,15 @@ $default-prefixes-appearance: -webkit, -moz;
|
|
8
8
|
appearance:$v;
|
9
9
|
}
|
10
10
|
|
11
|
-
|
12
|
-
----------------------------------------
|
11
|
+
// Background Clip
|
12
|
+
// ----------------------------------------
|
13
13
|
|
14
14
|
$default-prefixes-background-clip: -webkit, -moz;
|
15
15
|
|
16
16
|
@mixin background-clip($v, $prefixes: $default-prefixes-background-clip) {
|
17
17
|
$v: unquote($v);
|
18
18
|
|
19
|
-
|
19
|
+
// This is for older browser support
|
20
20
|
@if $v === padding-box {
|
21
21
|
@include prefix(background-clip,padding,$default-prefixes-background-origin);
|
22
22
|
}
|
@@ -33,15 +33,15 @@ $default-prefixes-background-clip: -webkit, -moz;
|
|
33
33
|
background-clip:$v;
|
34
34
|
}
|
35
35
|
|
36
|
-
|
37
|
-
----------------------------------------
|
36
|
+
// Background Origin
|
37
|
+
// ----------------------------------------
|
38
38
|
|
39
39
|
$default-prefixes-background-origin: -webkit, -moz;
|
40
40
|
|
41
41
|
@mixin background-origin($v, $prefixes: $default-prefixes-background-origin) {
|
42
42
|
$v: unquote($v);
|
43
43
|
|
44
|
-
|
44
|
+
// This is for older browser support
|
45
45
|
@if $v === padding-box {
|
46
46
|
@include prefix(background-origin,padding,$default-prefixes-background-origin);
|
47
47
|
}
|
@@ -54,13 +54,13 @@ $default-prefixes-background-origin: -webkit, -moz;
|
|
54
54
|
@include prefix(background-origin,content,$default-prefixes-background-origin);
|
55
55
|
}
|
56
56
|
|
57
|
-
|
57
|
+
// Standard version
|
58
58
|
@include prefix(background-origin,$v,$prefixes);
|
59
59
|
background-origin:$v;
|
60
60
|
}
|
61
61
|
|
62
|
-
|
63
|
-
----------------------------------------
|
62
|
+
// Background Size
|
63
|
+
// ----------------------------------------
|
64
64
|
|
65
65
|
$default-prefixes-background-size: -webkit, -moz, -o;
|
66
66
|
|
@@ -69,8 +69,8 @@ $default-prefixes-background-size: -webkit, -moz, -o;
|
|
69
69
|
background-size:$v;
|
70
70
|
}
|
71
71
|
|
72
|
-
|
73
|
-
----------------------------------------
|
72
|
+
// Border Radius
|
73
|
+
// ----------------------------------------
|
74
74
|
|
75
75
|
$default-prefixes-border-radius: -webkit, -moz;
|
76
76
|
|
@@ -79,8 +79,8 @@ $default-prefixes-border-radius: -webkit, -moz;
|
|
79
79
|
border-radius:$r;
|
80
80
|
}
|
81
81
|
|
82
|
-
|
83
|
-
----------------------------------------
|
82
|
+
// Box Shadow
|
83
|
+
// ----------------------------------------
|
84
84
|
|
85
85
|
$default-prefixes-box-shadow: -webkit, -moz;
|
86
86
|
|
@@ -89,8 +89,8 @@ $default-prefixes-box-shadow: -webkit, -moz;
|
|
89
89
|
box-shadow:$v;
|
90
90
|
}
|
91
91
|
|
92
|
-
|
93
|
-
----------------------------------------
|
92
|
+
// Flexible Box
|
93
|
+
// ----------------------------------------
|
94
94
|
|
95
95
|
$default-prefixes-box: -webkit, -moz;
|
96
96
|
|
@@ -138,8 +138,8 @@ $default-prefixes-box: -webkit, -moz;
|
|
138
138
|
box-pack:$v;
|
139
139
|
}
|
140
140
|
|
141
|
-
|
142
|
-
----------------------------------------
|
141
|
+
// Box Sizing
|
142
|
+
// ----------------------------------------
|
143
143
|
|
144
144
|
$default-prefixes-box-sizing: -webkit, -moz;
|
145
145
|
|
@@ -148,8 +148,8 @@ $default-prefixes-box-sizing: -webkit, -moz;
|
|
148
148
|
box-sizing:$v;
|
149
149
|
}
|
150
150
|
|
151
|
-
|
152
|
-
----------------------------------------
|
151
|
+
// Columns
|
152
|
+
// ----------------------------------------
|
153
153
|
|
154
154
|
$default-prefixes-columns: -webkit, -moz;
|
155
155
|
|
@@ -188,8 +188,8 @@ $default-prefixes-columns: -webkit, -moz;
|
|
188
188
|
column-rule:$v;
|
189
189
|
}
|
190
190
|
|
191
|
-
|
192
|
-
----------------------------------------
|
191
|
+
// Transforms
|
192
|
+
// ----------------------------------------
|
193
193
|
|
194
194
|
$default-prefixes-transform: -webkit, -moz;
|
195
195
|
|
@@ -223,12 +223,9 @@ $default-prefixes-transform: -webkit, -moz;
|
|
223
223
|
backface-visibility:$v;
|
224
224
|
}
|
225
225
|
|
226
|
-
|
227
|
-
----------------------------------------
|
228
|
-
|
229
|
-
/*
|
230
|
-
@see http://www.w3.org/TR/css3-transitions/
|
231
|
-
*/
|
226
|
+
// Transitions
|
227
|
+
// ----------------------------------------
|
228
|
+
// @see http://www.w3.org/TR/css3-transitions/
|
232
229
|
|
233
230
|
$default-prefixes-transition: -webkit, -moz;
|
234
231
|
|
@@ -257,8 +254,8 @@ $default-prefixes-transition: -webkit, -moz;
|
|
257
254
|
transition:$v;
|
258
255
|
}
|
259
256
|
|
260
|
-
|
261
|
-
----------------------------------------
|
257
|
+
// Animation
|
258
|
+
// ----------------------------------------
|
262
259
|
|
263
260
|
$default-prefixes-animation: -webkit, -moz;
|
264
261
|
|
@@ -1,20 +1,20 @@
|
|
1
|
-
|
2
|
-
css-discuss.incutio.com/wiki/Screenreader_Visibility
|
1
|
+
// Hide for both screenreaders and browsers
|
2
|
+
// css-discuss.incutio.com/wiki/Screenreader_Visibility
|
3
3
|
@mixin hide-from-all {
|
4
4
|
display:none;
|
5
5
|
visibility:hidden;
|
6
6
|
}
|
7
7
|
|
8
|
-
|
9
|
-
www.webaim.org/techniques/css/invisiblecontent/
|
10
|
-
Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal!
|
8
|
+
// Hide only visually, but have it available for screenreaders
|
9
|
+
// www.webaim.org/techniques/css/invisiblecontent/
|
10
|
+
// Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal!
|
11
11
|
@mixin screenreaders-only {
|
12
12
|
position: absolute !important;
|
13
13
|
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
14
14
|
clip: rect(1px, 1px, 1px, 1px);
|
15
15
|
}
|
16
16
|
|
17
|
-
|
17
|
+
// Hide visually and from screenreaders, but maintain layout
|
18
18
|
@mixin invisible {
|
19
19
|
visibility: hidden;
|
20
20
|
}
|
@@ -1,60 +1,105 @@
|
|
1
|
-
|
2
|
-
* https://gist.github.com/960128
|
3
|
-
*/
|
1
|
+
// https://gist.github.com/960128
|
4
2
|
|
5
3
|
@function linear() {
|
6
|
-
@return cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
4
|
+
@return cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
5
|
+
}
|
7
6
|
|
8
7
|
@function ease() {
|
9
|
-
@return cubic-bezier(0.250, 0.100, 0.250, 1.000);
|
8
|
+
@return cubic-bezier(0.250, 0.100, 0.250, 1.000);
|
9
|
+
}
|
10
10
|
|
11
11
|
@function ease-in() {
|
12
|
-
@return cubic-bezier(0.420, 0.000, 1.000, 1.000);
|
12
|
+
@return cubic-bezier(0.420, 0.000, 1.000, 1.000);
|
13
|
+
}
|
14
|
+
|
13
15
|
@function ease-in-quad() {
|
14
|
-
@return cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
16
|
+
@return cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
17
|
+
}
|
18
|
+
|
15
19
|
@function ease-in-cubic() {
|
16
|
-
@return cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
20
|
+
@return cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
21
|
+
}
|
22
|
+
|
17
23
|
@function ease-in-quart() {
|
18
|
-
@return cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
24
|
+
@return cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
25
|
+
}
|
26
|
+
|
19
27
|
@function ease-in-quint() {
|
20
|
-
@return cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
28
|
+
@return cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
29
|
+
}
|
30
|
+
|
21
31
|
@function ease-in-sine() {
|
22
|
-
@return cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
32
|
+
@return cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
33
|
+
}
|
34
|
+
|
23
35
|
@function ease-in-expo() {
|
24
|
-
@return cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
36
|
+
@return cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
37
|
+
}
|
38
|
+
|
25
39
|
@function ease-in-circ() {
|
26
|
-
@return cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
40
|
+
@return cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
41
|
+
}
|
27
42
|
|
28
43
|
@function ease-out() {
|
29
|
-
@return cubic-bezier(0.000, 0.000, 0.580, 1.000);
|
44
|
+
@return cubic-bezier(0.000, 0.000, 0.580, 1.000);
|
45
|
+
}
|
46
|
+
|
30
47
|
@function ease-out-quad() {
|
31
|
-
@return cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
48
|
+
@return cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
49
|
+
}
|
50
|
+
|
32
51
|
@function ease-out-cubic() {
|
33
|
-
@return cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
52
|
+
@return cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
53
|
+
}
|
54
|
+
|
34
55
|
@function ease-out-quart() {
|
35
|
-
@return cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
56
|
+
@return cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
57
|
+
}
|
58
|
+
|
36
59
|
@function ease-out-quint() {
|
37
|
-
@return cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
60
|
+
@return cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
61
|
+
}
|
62
|
+
|
38
63
|
@function ease-out-sine() {
|
39
|
-
@return cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
64
|
+
@return cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
65
|
+
}
|
66
|
+
|
40
67
|
@function ease-out-expo() {
|
41
|
-
@return cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
68
|
+
@return cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
69
|
+
}
|
70
|
+
|
42
71
|
@function ease-out-circ() {
|
43
|
-
@return cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
72
|
+
@return cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
73
|
+
}
|
44
74
|
|
45
75
|
@function ease-in-out() {
|
46
|
-
@return cubic-bezier(0.420, 0.000, 0.580, 1.000);
|
76
|
+
@return cubic-bezier(0.420, 0.000, 0.580, 1.000);
|
77
|
+
}
|
78
|
+
|
47
79
|
@function ease-in-out-quad() {
|
48
|
-
@return cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
80
|
+
@return cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
81
|
+
}
|
82
|
+
|
49
83
|
@function ease-in-out-cubic() {
|
50
|
-
@return cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
84
|
+
@return cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
85
|
+
}
|
86
|
+
|
51
87
|
@function ease-in-out-quart() {
|
52
|
-
@return cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
88
|
+
@return cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
89
|
+
}
|
90
|
+
|
53
91
|
@function ease-in-out-quint() {
|
54
|
-
@return cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
92
|
+
@return cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
93
|
+
}
|
94
|
+
|
55
95
|
@function ease-in-out-sine() {
|
56
|
-
@return cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
96
|
+
@return cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
97
|
+
}
|
98
|
+
|
57
99
|
@function ease-in-out-expo() {
|
58
|
-
@return cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
100
|
+
@return cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
101
|
+
}
|
102
|
+
|
59
103
|
@function ease-in-out-circ() {
|
60
|
-
@return cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
104
|
+
@return cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
105
|
+
}
|
@@ -1,26 +1,26 @@
|
|
1
|
-
|
2
|
-
Sharpen an image if it has become blurry due to upscaling or downscaling
|
3
|
-
@see https://developer.mozilla.org/en/CSS/image-rendering
|
4
|
-
|
1
|
+
//
|
2
|
+
// Sharpen an image if it has become blurry due to upscaling or downscaling
|
3
|
+
// @see https://developer.mozilla.org/en/CSS/image-rendering
|
4
|
+
//
|
5
5
|
@mixin sharpen-image {
|
6
6
|
image-rendering:-moz-crisp-edges;
|
7
7
|
-ms-interpolation-mode:nearest-neighbor; /* IE 7+ */
|
8
8
|
}
|
9
9
|
|
10
|
-
|
11
|
-
When photos are upscaled or downscaled, they often get blurry. Don't use
|
12
|
-
this on flat color images, they will still appear blurry.
|
13
|
-
@see https://developer.mozilla.org/en/CSS/image-rendering
|
14
|
-
|
10
|
+
//
|
11
|
+
// When photos are upscaled or downscaled, they often get blurry. Don't use
|
12
|
+
// this on flat color images, they will still appear blurry.
|
13
|
+
// @see https://developer.mozilla.org/en/CSS/image-rendering
|
14
|
+
//
|
15
15
|
@mixin high-quality-image {
|
16
16
|
image-rendering:optimizeQuality;
|
17
17
|
-ms-interpolation-mode:bicubic; /* IE 7+ */
|
18
18
|
}
|
19
19
|
|
20
|
-
|
21
|
-
Optimizes the rendering on images so they
|
22
|
-
appear faster, but at a lower quality. Useful for <video>
|
23
|
-
|
20
|
+
//
|
21
|
+
// Optimizes the rendering on images so they
|
22
|
+
// appear faster, but at a lower quality. Useful for <video>
|
23
|
+
//
|
24
24
|
@mixin low-quality-image {
|
25
25
|
image-rendering:optimizeSpeed;
|
26
26
|
}
|
@@ -1,9 +1,9 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
1
|
+
//
|
2
|
+
// Allows a parent element to enclose the full height of the children
|
3
|
+
// elements when all of the children are floated.
|
4
|
+
// Normally the parent will have no height.
|
5
|
+
// @see http://nicolasgallagher.com/micro-clearfix-hack/
|
6
|
+
//
|
7
7
|
.__clearfix {
|
8
8
|
&::before,
|
9
9
|
&::after {
|
@@ -1,7 +1,7 @@
|
|
1
|
-
|
2
|
-
Shorthand for CSS columns
|
3
|
-
@include text-columns(3,20px);
|
4
|
-
|
1
|
+
//
|
2
|
+
// Shorthand for CSS columns
|
3
|
+
// @include text-columns(3,20px);
|
4
|
+
//
|
5
5
|
@mixin text-columns($count:2,$gap:20px,$width:auto,$rule:none) {
|
6
6
|
@include column-count($count);
|
7
7
|
@include column-gap($count);
|
@@ -1,15 +1,15 @@
|
|
1
|
-
|
2
|
-
For blocks of content with media beside them.
|
3
|
-
Adding overflow hidden changes the way the content interacts with the float
|
4
|
-
|
1
|
+
//
|
2
|
+
// For blocks of content with media beside them.
|
3
|
+
// Adding overflow hidden changes the way the content interacts with the float
|
4
|
+
//
|
5
5
|
|
6
|
-
|
7
|
-
Apply it to the wrapper div
|
8
|
-
<div>
|
9
|
-
<img class="content-image" />
|
10
|
-
<div class="content"></div>
|
11
|
-
</div>
|
12
|
-
|
6
|
+
//
|
7
|
+
// Apply it to the wrapper div
|
8
|
+
// <div>
|
9
|
+
// <img class="content-image" />
|
10
|
+
// <div class="content"></div>
|
11
|
+
// </div>
|
12
|
+
//
|
13
13
|
|
14
14
|
@mixin media-block($position: left, $spacing:0, $media: '.media', $block: '.block') {
|
15
15
|
#{unquote($media)} {
|
@@ -1,11 +1,11 @@
|
|
1
|
-
|
2
|
-
Cross-browser inline-block.
|
3
|
-
@see http://www.quirksmode.org/css/display.html
|
4
|
-
|
1
|
+
//
|
2
|
+
// Cross-browser inline-block.
|
3
|
+
// @see http://www.quirksmode.org/css/display.html
|
4
|
+
//
|
5
5
|
.__inline-block {
|
6
6
|
display:inline-block;
|
7
7
|
|
8
|
-
|
8
|
+
// IE7 fix
|
9
9
|
*display:inline;
|
10
10
|
*zoom:1;
|
11
11
|
}
|
@@ -1,7 +1,6 @@
|
|
1
|
-
|
2
|
-
These provide basic font stacks with fallbacks. You can add your own fonts to the stack
|
3
|
-
|
4
|
-
|
1
|
+
//
|
2
|
+
// These provide basic font stacks with fallbacks. You can add your own fonts to the stack
|
3
|
+
//
|
5
4
|
@mixin sans-serif($prepend:false) {
|
6
5
|
$list: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
7
6
|
font-family: join($prepend,$list,comma);
|
@@ -1,8 +1,8 @@
|
|
1
|
-
|
2
|
-
Nicer text rendering in webkit and gecko
|
3
|
-
@see http://www.aestheticallyloyal.com/public/optimize-legibility/
|
4
|
-
@see http://files.christophzillgens.com/webkit-font-smoothing.html
|
5
|
-
|
1
|
+
//
|
2
|
+
// Nicer text rendering in webkit and gecko
|
3
|
+
// @see http://www.aestheticallyloyal.com/public/optimize-legibility/
|
4
|
+
// @see http://files.christophzillgens.com/webkit-font-smoothing.html
|
5
|
+
//
|
6
6
|
@mixin improve-text-rendering {
|
7
7
|
text-rendering:optimizeLegibility;
|
8
8
|
-webkit-font-smoothing:subpixel-antialiased;
|
metadata
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: stitch
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 31
|
5
5
|
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
8
|
- 1
|
9
|
-
-
|
10
|
-
version: 0.1.
|
9
|
+
- 2
|
10
|
+
version: 0.1.2
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Anthony Short
|
@@ -15,7 +15,8 @@ autorequire:
|
|
15
15
|
bindir: bin
|
16
16
|
cert_chain: []
|
17
17
|
|
18
|
-
date: 2011-08-
|
18
|
+
date: 2011-08-24 00:00:00 +10:00
|
19
|
+
default_executable:
|
19
20
|
dependencies:
|
20
21
|
- !ruby/object:Gem::Dependency
|
21
22
|
name: compass
|
@@ -86,6 +87,7 @@ files:
|
|
86
87
|
- stylesheets/stitch/patterns/text/_justify.scss
|
87
88
|
- stylesheets/stitch/patterns/text/_rem.scss
|
88
89
|
- stylesheets/stitch/patterns/text/_text-rendering.scss
|
90
|
+
has_rdoc: true
|
89
91
|
homepage: https://github.com/anthonyshort/stitch-css
|
90
92
|
licenses: []
|
91
93
|
|
@@ -115,7 +117,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
115
117
|
requirements: []
|
116
118
|
|
117
119
|
rubyforge_project: stitch
|
118
|
-
rubygems_version: 1.
|
120
|
+
rubygems_version: 1.6.2
|
119
121
|
signing_key:
|
120
122
|
specification_version: 3
|
121
123
|
summary: A CSS pattern framework for Compass
|