compass-excess 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: ba40fefa34d68cd12281764836e8c19417fdbf7b
4
+ data.tar.gz: f140a032264ff0308b165ce6baedede47c8439d0
5
+ SHA512:
6
+ metadata.gz: 07c715c4f5902359847403941fee674682f36c788ab15bd93bc057508cba8b325a11c0422bc648654ac8cc4ddf3b9660ff75e32e4e3f4016706deebfa1f06583
7
+ data.tar.gz: c56bd39f6f2b9ceea0e1bce634404874fd37d398ae1ee9fce652e7d696bf0649e362cb4c88b495ad15525d550de2fcd9e555266400ee0bfc5a0de42edc6f49db
@@ -0,0 +1,3 @@
1
+ .DS_Store
2
+ .sass-cache
3
+ pkg/
@@ -0,0 +1 @@
1
+ 2.1.6
data/Gemfile ADDED
@@ -0,0 +1,9 @@
1
+ source "http://rubygems.org"
2
+
3
+ gem 'sprockets'
4
+ gem 'compass', '~> 1.0.0'
5
+
6
+ group :development do
7
+ gem "rack"
8
+ gem "rake"
9
+ end
@@ -0,0 +1,38 @@
1
+ GEM
2
+ remote: http://rubygems.org/
3
+ specs:
4
+ chunky_png (1.3.4)
5
+ compass (1.0.3)
6
+ chunky_png (~> 1.2)
7
+ compass-core (~> 1.0.2)
8
+ compass-import-once (~> 1.0.5)
9
+ rb-fsevent (>= 0.9.3)
10
+ rb-inotify (>= 0.9)
11
+ sass (>= 3.3.13, < 3.5)
12
+ compass-core (1.0.3)
13
+ multi_json (~> 1.0)
14
+ sass (>= 3.3.0, < 3.5)
15
+ compass-import-once (1.0.5)
16
+ sass (>= 3.2, < 3.5)
17
+ ffi (1.9.10)
18
+ multi_json (1.11.2)
19
+ rack (1.6.4)
20
+ rake (10.4.2)
21
+ rb-fsevent (0.9.5)
22
+ rb-inotify (0.9.5)
23
+ ffi (>= 0.5.0)
24
+ sass (3.4.16)
25
+ sprockets (3.3.2)
26
+ rack (~> 1.0)
27
+
28
+ PLATFORMS
29
+ ruby
30
+
31
+ DEPENDENCIES
32
+ compass (~> 1.0.0)
33
+ rack
34
+ rake
35
+ sprockets
36
+
37
+ BUNDLED WITH
38
+ 1.10.5
@@ -0,0 +1,3 @@
1
+ # Excess
2
+
3
+ This gem encapsulates a number of mixins and defaults I find useful when building responsive websites.
@@ -0,0 +1,3 @@
1
+ require 'bundler'
2
+
3
+ Bundler::GemHelper.install_tasks
@@ -0,0 +1,22 @@
1
+ # -*- encoding: utf-8 -*-
2
+ $:.push File.expand_path("../lib", __FILE__)
3
+ require "compass/excess/version"
4
+
5
+ Gem::Specification.new do |spec|
6
+ spec.name = 'compass-excess'
7
+ spec.version = Compass::Excess::VERSION
8
+ spec.platform = Gem::Platform::RUBY
9
+ spec.summary = "Some basic compass additions to help with responsive website development"
10
+ spec.description = "Some basic compass additions to help with responsive website development"
11
+ spec.homepage = "https://github.com/kapowaz/compass-excess"
12
+ spec.authors = ["Ben Darlow"]
13
+ spec.email = ["ben@kapowaz.net"]
14
+ spec.license = 'MIT'
15
+ spec.has_rdoc = false
16
+ spec.files = `git ls-files`.split("\n")
17
+ spec.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
18
+ spec.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
19
+ spec.require_paths = ["lib"]
20
+ spec.add_dependency 'compass', ['~> 1.0.0']
21
+ spec.add_development_dependency 'rake'
22
+ end
@@ -0,0 +1,3 @@
1
+ require 'sprockets'
2
+ require 'compass'
3
+ require 'compass/excess'
@@ -0,0 +1,7 @@
1
+ require 'compass/excess/version'
2
+
3
+ module Compass
4
+ module Excess
5
+ Compass::Frameworks.register('excess', :path => "#{File.dirname(__FILE__)}/../..")
6
+ end
7
+ end
@@ -0,0 +1,5 @@
1
+ module Compass
2
+ module Excess
3
+ VERSION = '0.0.1'
4
+ end
5
+ end
@@ -0,0 +1,12 @@
1
+ $breakpoints: (
2
+ smartphone_small: 320px,
3
+ smartphone_medium: 375px,
4
+ iphone_six_plus: 414px,
5
+ smartphone_large: 480px,
6
+ tablet_small: 640px,
7
+ tablet_medium: 750px,
8
+ tablet_large: 768px,
9
+ desktop_small: 960px,
10
+ desktop_medium: 1164px,
11
+ desktop_large: 1280px
12
+ );
@@ -0,0 +1,20 @@
1
+ @function color($key, $sub-key: null) {
2
+ @if $sub-key != null {
3
+ @if map-has-key($colors, $key) {
4
+ $sub-colors: map-get($colors, $key);
5
+
6
+ @if map-has-key($sub-colors, $sub-key) {
7
+ @return map-get($sub-colors, $sub-key);
8
+ }
9
+ @error "Unknown sub-color `#{$sub-key}` in $sub-colors.";
10
+ @return null;
11
+ }
12
+ } @else {
13
+ @if map-has-key($colors, $key) {
14
+ @return map-get($colors, $key);
15
+ }
16
+ }
17
+
18
+ @warn "Unknown color `#{$key}` in $colors.";
19
+ @return null;
20
+ } // @function color()
@@ -0,0 +1,7 @@
1
+ @import "breakpoints";
2
+ @import "typography";
3
+ @import "colors";
4
+ @import "utilities";
5
+ @import "images";
6
+ @import "layout";
7
+ @import "normalize";
@@ -0,0 +1,83 @@
1
+ @mixin replaced-contents($width, $height) {
2
+ display: block;
3
+ text-indent: -9999px;
4
+ overflow: hidden;
5
+ width: $width;
6
+ height: $height;
7
+ }
8
+
9
+ @mixin background-image-file($url, $background-size: null, $background-position: null, $background-repeat: no-repeat, $type: 'png', $retina: true) {
10
+ @if $url == none {
11
+ background-image: none;
12
+ @if ($retina) {
13
+ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) {
14
+ & { background-image: none; }
15
+ }
16
+ }
17
+ } @else {
18
+ @if $retina {
19
+ background-image: image-url($url + '@1x.' + $type);
20
+ } @else {
21
+ background-image: image-url($url + '.' + $type);
22
+ }
23
+
24
+ @if $background-position {
25
+ background-position: $background-position;
26
+ }
27
+
28
+ @if $background-size {
29
+ background-size: $background-size;
30
+ }
31
+
32
+ @if ($retina) {
33
+ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
34
+ & { background-image: image-url($url + '@2x.' + $type); }
35
+ }
36
+
37
+ @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) {
38
+ & { background-image: image-url($url + '@3x.' + $type); }
39
+ }
40
+ }
41
+
42
+ background-repeat: $background-repeat;
43
+ }
44
+ }
45
+
46
+ @mixin background-image-gradient($url, $background-image-size, $gradients...) {
47
+ @include background-image(image-url($url + '@1x.png'), $gradients);
48
+ background-size: $background-image-size, 100%;
49
+
50
+ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
51
+ & {
52
+ @include background-image(image-url($url + '@2x.png'), $gradients);
53
+ background-size: $background-image-size, 100%;
54
+ }
55
+ }
56
+
57
+ @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) {
58
+ & {
59
+ @include background-image(image-url($url + '@3x.png'), $gradients);
60
+ background-size: $background-image-size, 100%;
61
+ }
62
+ }
63
+ }
64
+
65
+ @mixin image-replacement($url, $background-width, $background-height, $width: $background-width, $height: $background-height, $background-position: 0 0, $type: 'png') {
66
+ @include background-image-file($url, $background-width $background-height, $background-position: $background-position, $type: $type);
67
+ @include replaced-contents($width, $height);
68
+ }
69
+
70
+ @mixin sprite-icon($url, $background-size, $padding-left: inherit, $background-position: 0 0, $type: 'png') {
71
+ @include background-image-file($url, $background-size, $background-position, $type: $type);
72
+ padding-left: $padding-left;
73
+ }
74
+
75
+ @mixin sprite-replacement($url, $background-size, $width, $height, $position: 0) {
76
+ $background-position-y: 0;
77
+ @if $position > 0 {
78
+ $background-position-y: -($position) * $height;
79
+ }
80
+
81
+ @include background-image-file($url, $background-size, 0 $background-position-y);
82
+ @include replaced-contents($width, $height);
83
+ }
@@ -0,0 +1,51 @@
1
+ @mixin cleared {
2
+ zoom: 1;
3
+
4
+ &:before,
5
+ &:after {
6
+ content: " ";
7
+ display: table;
8
+ }
9
+
10
+ &:after {
11
+ clear: both;
12
+ }
13
+ }
14
+
15
+ @mixin unstyled-list {
16
+ list-style: none;
17
+ margin: 0;
18
+ padding: 0;
19
+ } // @mixin unstyled-list
20
+
21
+ @function breakpoint($width) {
22
+ @if map-has-key($breakpoints, $width) {
23
+ @return map-get($breakpoints, $width);
24
+ }
25
+
26
+ @warn "No breakpoint called `#{$width}` exists in the `$breakpoints` map";
27
+ @return null;
28
+ } // @function breakpoint()
29
+
30
+ @mixin min-width($width) {
31
+ @media only screen and (min-width: #{breakpoint($width)}) {
32
+ @content;
33
+ }
34
+ } // @mixin min-width
35
+
36
+ @mixin max-width($width) {
37
+ @media only screen and (max-width: #{breakpoint($width) - 1px}) {
38
+ @content;
39
+ }
40
+ } // @mixin max-width
41
+
42
+ @mixin between-widths($min-width, $max-width) {
43
+ @media only screen and (min-width: #{breakpoint($min-width)}) and (max-width: #{breakpoint($max-width) - 1px}) {
44
+ @content;
45
+ }
46
+ } // @mixin between-widths
47
+
48
+ @mixin desktop-width {
49
+ max-width: breakpoint(desktop_small);
50
+ margin: 0 auto;
51
+ } // @mixin desktop-width
@@ -0,0 +1,427 @@
1
+ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
2
+
3
+ /**
4
+ * 1. Set default font family to sans-serif.
5
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
6
+ * user zoom.
7
+ */
8
+
9
+ html {
10
+ font-family: sans-serif; /* 1 */
11
+ -ms-text-size-adjust: 100%; /* 2 */
12
+ -webkit-text-size-adjust: 100%; /* 2 */
13
+ }
14
+
15
+ /**
16
+ * Remove default margin.
17
+ */
18
+
19
+ body {
20
+ margin: 0;
21
+ }
22
+
23
+ /* HTML5 display definitions
24
+ ========================================================================== */
25
+
26
+ /**
27
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
28
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
29
+ * and Firefox.
30
+ * Correct `block` display not defined for `main` in IE 11.
31
+ */
32
+
33
+ article,
34
+ aside,
35
+ details,
36
+ figcaption,
37
+ figure,
38
+ footer,
39
+ header,
40
+ hgroup,
41
+ main,
42
+ menu,
43
+ nav,
44
+ section,
45
+ summary {
46
+ display: block;
47
+ }
48
+
49
+ /**
50
+ * 1. Correct `inline-block` display not defined in IE 8/9.
51
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52
+ */
53
+
54
+ audio,
55
+ canvas,
56
+ progress,
57
+ video {
58
+ display: inline-block; /* 1 */
59
+ vertical-align: baseline; /* 2 */
60
+ }
61
+
62
+ /**
63
+ * Prevent modern browsers from displaying `audio` without controls.
64
+ * Remove excess height in iOS 5 devices.
65
+ */
66
+
67
+ audio:not([controls]) {
68
+ display: none;
69
+ height: 0;
70
+ }
71
+
72
+ /**
73
+ * Address `[hidden]` styling not present in IE 8/9/10.
74
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
75
+ */
76
+
77
+ [hidden],
78
+ template {
79
+ display: none;
80
+ }
81
+
82
+ /* Links
83
+ ========================================================================== */
84
+
85
+ /**
86
+ * Remove the gray background color from active links in IE 10.
87
+ */
88
+
89
+ a {
90
+ background-color: transparent;
91
+ }
92
+
93
+ /**
94
+ * Improve readability when focused and also mouse hovered in all browsers.
95
+ */
96
+
97
+ a:active,
98
+ a:hover {
99
+ outline: 0;
100
+ }
101
+
102
+ /* Text-level semantics
103
+ ========================================================================== */
104
+
105
+ /**
106
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107
+ */
108
+
109
+ abbr[title] {
110
+ border-bottom: 1px dotted;
111
+ }
112
+
113
+ /**
114
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115
+ */
116
+
117
+ b,
118
+ strong {
119
+ font-weight: bold;
120
+ }
121
+
122
+ /**
123
+ * Address styling not present in Safari and Chrome.
124
+ */
125
+
126
+ dfn {
127
+ font-style: italic;
128
+ }
129
+
130
+ /**
131
+ * Address variable `h1` font-size and margin within `section` and `article`
132
+ * contexts in Firefox 4+, Safari, and Chrome.
133
+ */
134
+
135
+ h1 {
136
+ font-size: 2em;
137
+ margin: 0.67em 0;
138
+ }
139
+
140
+ /**
141
+ * Address styling not present in IE 8/9.
142
+ */
143
+
144
+ mark {
145
+ background: #ff0;
146
+ color: #000;
147
+ }
148
+
149
+ /**
150
+ * Address inconsistent and variable font size in all browsers.
151
+ */
152
+
153
+ small {
154
+ font-size: 80%;
155
+ }
156
+
157
+ /**
158
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159
+ */
160
+
161
+ sub,
162
+ sup {
163
+ font-size: 75%;
164
+ line-height: 0;
165
+ position: relative;
166
+ vertical-align: baseline;
167
+ }
168
+
169
+ sup {
170
+ top: -0.5em;
171
+ }
172
+
173
+ sub {
174
+ bottom: -0.25em;
175
+ }
176
+
177
+ /* Embedded content
178
+ ========================================================================== */
179
+
180
+ /**
181
+ * Remove border when inside `a` element in IE 8/9/10.
182
+ */
183
+
184
+ img {
185
+ border: 0;
186
+ }
187
+
188
+ /**
189
+ * Correct overflow not hidden in IE 9/10/11.
190
+ */
191
+
192
+ svg:not(:root) {
193
+ overflow: hidden;
194
+ }
195
+
196
+ /* Grouping content
197
+ ========================================================================== */
198
+
199
+ /**
200
+ * Address margin not present in IE 8/9 and Safari.
201
+ */
202
+
203
+ figure {
204
+ margin: 1em 40px;
205
+ }
206
+
207
+ /**
208
+ * Address differences between Firefox and other browsers.
209
+ */
210
+
211
+ hr {
212
+ -moz-box-sizing: content-box;
213
+ box-sizing: content-box;
214
+ height: 0;
215
+ }
216
+
217
+ /**
218
+ * Contain overflow in all browsers.
219
+ */
220
+
221
+ pre {
222
+ overflow: auto;
223
+ }
224
+
225
+ /**
226
+ * Address odd `em`-unit font size rendering in all browsers.
227
+ */
228
+
229
+ code,
230
+ kbd,
231
+ pre,
232
+ samp {
233
+ font-family: monospace, monospace;
234
+ font-size: 1em;
235
+ }
236
+
237
+ /* Forms
238
+ ========================================================================== */
239
+
240
+ /**
241
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
242
+ * styling of `select`, unless a `border` property is set.
243
+ */
244
+
245
+ /**
246
+ * 1. Correct color not being inherited.
247
+ * Known issue: affects color of disabled elements.
248
+ * 2. Correct font properties not being inherited.
249
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250
+ */
251
+
252
+ button,
253
+ input,
254
+ optgroup,
255
+ select,
256
+ textarea {
257
+ color: inherit; /* 1 */
258
+ font: inherit; /* 2 */
259
+ margin: 0; /* 3 */
260
+ }
261
+
262
+ /**
263
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
264
+ */
265
+
266
+ button {
267
+ overflow: visible;
268
+ }
269
+
270
+ /**
271
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
272
+ * All other form control elements do not inherit `text-transform` values.
273
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274
+ * Correct `select` style inheritance in Firefox.
275
+ */
276
+
277
+ button,
278
+ select {
279
+ text-transform: none;
280
+ }
281
+
282
+ /**
283
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284
+ * and `video` controls.
285
+ * 2. Correct inability to style clickable `input` types in iOS.
286
+ * 3. Improve usability and consistency of cursor style between image-type
287
+ * `input` and others.
288
+ */
289
+
290
+ button,
291
+ html input[type="button"], /* 1 */
292
+ input[type="reset"],
293
+ input[type="submit"] {
294
+ -webkit-appearance: button; /* 2 */
295
+ cursor: pointer; /* 3 */
296
+ }
297
+
298
+ /**
299
+ * Re-set default cursor for disabled elements.
300
+ */
301
+
302
+ button[disabled],
303
+ html input[disabled] {
304
+ cursor: default;
305
+ }
306
+
307
+ /**
308
+ * Remove inner padding and border in Firefox 4+.
309
+ */
310
+
311
+ button::-moz-focus-inner,
312
+ input::-moz-focus-inner {
313
+ border: 0;
314
+ padding: 0;
315
+ }
316
+
317
+ /**
318
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319
+ * the UA stylesheet.
320
+ */
321
+
322
+ input {
323
+ line-height: normal;
324
+ }
325
+
326
+ /**
327
+ * It's recommended that you don't attempt to style these elements.
328
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
329
+ *
330
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
331
+ * 2. Remove excess padding in IE 8/9/10.
332
+ */
333
+
334
+ input[type="checkbox"],
335
+ input[type="radio"] {
336
+ box-sizing: border-box; /* 1 */
337
+ padding: 0; /* 2 */
338
+ }
339
+
340
+ /**
341
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342
+ * `font-size` values of the `input`, it causes the cursor style of the
343
+ * decrement button to change from `default` to `text`.
344
+ */
345
+
346
+ input[type="number"]::-webkit-inner-spin-button,
347
+ input[type="number"]::-webkit-outer-spin-button {
348
+ height: auto;
349
+ }
350
+
351
+ /**
352
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354
+ * (include `-moz` to future-proof).
355
+ */
356
+
357
+ input[type="search"] {
358
+ -webkit-appearance: textfield; /* 1 */
359
+ -moz-box-sizing: content-box;
360
+ -webkit-box-sizing: content-box; /* 2 */
361
+ box-sizing: content-box;
362
+ }
363
+
364
+ /**
365
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366
+ * Safari (but not Chrome) clips the cancel button when the search input has
367
+ * padding (and `textfield` appearance).
368
+ */
369
+
370
+ input[type="search"]::-webkit-search-cancel-button,
371
+ input[type="search"]::-webkit-search-decoration {
372
+ -webkit-appearance: none;
373
+ }
374
+
375
+ /**
376
+ * Define consistent border, margin, and padding.
377
+ */
378
+
379
+ fieldset {
380
+ border: 1px solid #c0c0c0;
381
+ margin: 0 2px;
382
+ padding: 0.35em 0.625em 0.75em;
383
+ }
384
+
385
+ /**
386
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
387
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388
+ */
389
+
390
+ legend {
391
+ border: 0; /* 1 */
392
+ padding: 0; /* 2 */
393
+ }
394
+
395
+ /**
396
+ * Remove default vertical scrollbar in IE 8/9/10/11.
397
+ */
398
+
399
+ textarea {
400
+ overflow: auto;
401
+ }
402
+
403
+ /**
404
+ * Don't inherit the `font-weight` (applied by a rule above).
405
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406
+ */
407
+
408
+ optgroup {
409
+ font-weight: bold;
410
+ }
411
+
412
+ /* Tables
413
+ ========================================================================== */
414
+
415
+ /**
416
+ * Remove most spacing between table cells.
417
+ */
418
+
419
+ table {
420
+ border-collapse: collapse;
421
+ border-spacing: 0;
422
+ }
423
+
424
+ td,
425
+ th {
426
+ padding: 0;
427
+ }
@@ -0,0 +1,81 @@
1
+ @mixin font-size($size: 1.4, $important: false) {
2
+ @if $important == true {
3
+ font-size: ($size * 10) + px !important;
4
+ font-size: $size + rem !important;
5
+ } @else {
6
+ font-size: ($size * 10) + px;
7
+ font-size: $size + rem;
8
+ }
9
+ }
10
+
11
+ @mixin line-height($size: 1.6, $force-height: false) {
12
+ @if $force-height == true {
13
+ height: ($size * 10) + px;
14
+ }
15
+ line-height: ($size * 10) + px;
16
+ line-height: $size + rem;
17
+ }
18
+
19
+ @mixin text-underline-hover {
20
+ text-decoration: none;
21
+ &:hover {
22
+ text-decoration: underline;
23
+ }
24
+ }
25
+
26
+ @mixin medium-text-underline-hover($color: black, $background-color: white, $font-size: 1.4, $line-height: 1.8, $stroke-width: 2px) {
27
+ display: inline-block;
28
+ text-decoration: none;
29
+ @include line-height($line-height * 1.1875);
30
+
31
+ body.mac &,
32
+ body.ios & {
33
+ @include line-height($line-height);
34
+ }
35
+
36
+ body.ie & {
37
+ @include line-height($line-height * 1.25);
38
+ }
39
+
40
+ &:hover {
41
+ $color-stop: percentage(1 - (1 / ($line-height * 11.875)));
42
+ @include background-image(linear-gradient($background-color, $background-color $color-stop, $color 100%));
43
+ @include text-shadow(0 1px 0 $stroke-width $background-color, 1px 0 0 $stroke-width $background-color, 0 -1px 0 $stroke-width $background-color, -1px 0 0 $stroke-width $background-color);
44
+ }
45
+
46
+ body.mac &:hover,
47
+ body.ios &:hover {
48
+ $color-stop: percentage(1 - (1 / ($line-height * 10)));
49
+ @include background-image(linear-gradient($background-color, $background-color $color-stop, $color 100%));
50
+ }
51
+
52
+ body.ie &:hover {
53
+ $color-stop: percentage(1 - (1 / ($line-height * 12.5)));
54
+ @include background-image(linear-gradient($background-color, $background-color $color-stop, $color 100%));
55
+ }
56
+ }
57
+
58
+ @mixin text-no-underline-hover {
59
+ &:hover { text-decoration: none; }
60
+ }
61
+
62
+ @mixin text-overflow-ellipsis {
63
+ overflow: hidden;
64
+ white-space: nowrap;
65
+ text-overflow: ellipsis;
66
+ }
67
+
68
+ @mixin font-family($fontname, $filename, $weight: normal, $style: normal, $stretch: normal) {
69
+ @font-face {
70
+ font-family: $fontname;
71
+ src: font-url($filename + '.eot');
72
+ src: local($fontname), // disable this to test without the font installed locally
73
+ font-url($filename + '.eot?#iefix') format('embedded-opentype'),
74
+ font-url($filename + '.woff') format('woff'),
75
+ font-url($filename + '.ttf') format('truetype'),
76
+ font-url($filename + '.svg#' + $filename) format('svg');
77
+ font-weight: $weight;
78
+ font-style: $style;
79
+ font-stretch: $stretch;
80
+ }
81
+ }
@@ -0,0 +1,23 @@
1
+ @mixin vendor-prefixed-properties($property, $value) {
2
+ -webkit-#{$property}: $value;
3
+ -moz-#{$property}: $value;
4
+ -ms-#{$property}: $value;
5
+ -o-#{$property}: $value;
6
+ $property: $value;
7
+ }
8
+
9
+ @mixin appearance($appearance) {
10
+ @include vendor-prefixed-properties(appearance, $appearance);
11
+ }
12
+
13
+ @mixin appearance-none {
14
+ @include appearance(none);
15
+ }
16
+
17
+ @mixin placeholder {
18
+ &.placeholder { @content }
19
+ &::placeholder { @content }
20
+ &:-ms-input-placeholder { @content }
21
+ &::-moz-placeholder { @content }
22
+ &::-webkit-input-placeholder { @content }
23
+ }
metadata ADDED
@@ -0,0 +1,90 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: compass-excess
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ platform: ruby
6
+ authors:
7
+ - Ben Darlow
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2015-08-20 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: compass
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: 1.0.0
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: 1.0.0
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - ">="
32
+ - !ruby/object:Gem::Version
33
+ version: '0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - ">="
39
+ - !ruby/object:Gem::Version
40
+ version: '0'
41
+ description: Some basic compass additions to help with responsive website development
42
+ email:
43
+ - ben@kapowaz.net
44
+ executables: []
45
+ extensions: []
46
+ extra_rdoc_files: []
47
+ files:
48
+ - ".gitignore"
49
+ - ".ruby-version"
50
+ - Gemfile
51
+ - Gemfile.lock
52
+ - README.md
53
+ - Rakefile
54
+ - compass-excess.gemspec
55
+ - lib/compass-excess.rb
56
+ - lib/compass/excess.rb
57
+ - lib/compass/excess/version.rb
58
+ - stylesheets/_breakpoints.scss
59
+ - stylesheets/_colors.scss
60
+ - stylesheets/_excess.scss
61
+ - stylesheets/_images.scss
62
+ - stylesheets/_layout.scss
63
+ - stylesheets/_normalize.scss
64
+ - stylesheets/_typography.scss
65
+ - stylesheets/_utilities.scss
66
+ homepage: https://github.com/kapowaz/compass-excess
67
+ licenses:
68
+ - MIT
69
+ metadata: {}
70
+ post_install_message:
71
+ rdoc_options: []
72
+ require_paths:
73
+ - lib
74
+ required_ruby_version: !ruby/object:Gem::Requirement
75
+ requirements:
76
+ - - ">="
77
+ - !ruby/object:Gem::Version
78
+ version: '0'
79
+ required_rubygems_version: !ruby/object:Gem::Requirement
80
+ requirements:
81
+ - - ">="
82
+ - !ruby/object:Gem::Version
83
+ version: '0'
84
+ requirements: []
85
+ rubyforge_project:
86
+ rubygems_version: 2.2.3
87
+ signing_key:
88
+ specification_version: 4
89
+ summary: Some basic compass additions to help with responsive website development
90
+ test_files: []