flexbox-sass 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: b816778a9738e2c4cd6debd1674d7b14df9b5bd4
4
+ data.tar.gz: e08d54fe8aea03715fac20e2efb3ab00aec6f198
5
+ SHA512:
6
+ metadata.gz: 724f9343fba76f6fc8d0138b51368e19ed214afe258b30e37b8f6f9d202886be47887dbe8dbd6c7ad56658e1c0f42c4099eca0573230b3230e925e5923b8b1b6
7
+ data.tar.gz: 27cd2a6f9a3ad8807ed1bf75d991f7756151ec5489a4edfef6134247d3fa1bbb915b41fc4ac5d2ba0b07078c635a081d6d318183ef5be891b0724da009689ad2
@@ -0,0 +1,17 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in flexbox-sass.gemspec
4
+ gemspec
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2014 Jack Callister
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,29 @@
1
+ # Flexbox::Sass
2
+
3
+ TODO: Write a gem description
4
+
5
+ ## Installation
6
+
7
+ Add this line to your application's Gemfile:
8
+
9
+ gem 'flexbox-sass'
10
+
11
+ And then execute:
12
+
13
+ $ bundle
14
+
15
+ Or install it yourself as:
16
+
17
+ $ gem install flexbox-sass
18
+
19
+ ## Usage
20
+
21
+ TODO: Write usage instructions here
22
+
23
+ ## Contributing
24
+
25
+ 1. Fork it
26
+ 2. Create your feature branch (`git checkout -b my-new-feature`)
27
+ 3. Commit your changes (`git commit -am 'Add some feature'`)
28
+ 4. Push to the branch (`git push origin my-new-feature`)
29
+ 5. Create new Pull Request
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
@@ -0,0 +1,22 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'flexbox/sass/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "flexbox-sass"
8
+ spec.version = Flexbox::Sass::VERSION
9
+ spec.authors = ["Jack Callister"]
10
+ spec.email = ["jarsbe@gmail.com"]
11
+ spec.description = ["A simple flexbox mixin"]
12
+ spec.summary = ["Import or require 'flexbox' and use the mixin as per readme."]
13
+ spec.homepage = ""
14
+ spec.license = "MIT"
15
+
16
+ spec.files = `git ls-files`.split($/)
17
+ spec.require_paths = ["lib"]
18
+
19
+ spec.add_development_dependency "bundler", "~> 1.3"
20
+ spec.add_development_dependency "rake"
21
+ spec.add_dependency "railties"
22
+ end
@@ -0,0 +1,8 @@
1
+ require "flexbox/sass/version"
2
+
3
+ module Flexbox
4
+ module Sass
5
+ class Engine < ::Rails::Engine
6
+ end
7
+ end
8
+ end
@@ -0,0 +1,5 @@
1
+ module Flexbox
2
+ module Sass
3
+ VERSION = "0.0.1"
4
+ end
5
+ end
@@ -0,0 +1,395 @@
1
+ // Flexbox Mixins
2
+ // http://philipwalton.github.io/solved-by-flexbox/
3
+ // https://github.com/philipwalton/solved-by-flexbox
4
+ //
5
+ // Copyright (c) 2013 Brian Franco
6
+ //
7
+ // Permission is hereby granted, free of charge, to any person obtaining a
8
+ // copy of this software and associated documentation files (the
9
+ // "Software"), to deal in the Software without restriction, including
10
+ // without limitation the rights to use, copy, modify, merge, publish,
11
+ // distribute, sublicense, and/or sell copies of the Software, and to
12
+ // permit persons to whom the Software is furnished to do so, subject to
13
+ // the following conditions:
14
+ // The above copyright notice and this permission notice shall be included
15
+ // in all copies or substantial portions of the Software.
16
+ // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
17
+ // OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19
+ // IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
20
+ // CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21
+ // TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
22
+ // SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23
+ //
24
+ // This is a set of mixins for those who want to mess around with flexbox
25
+ // using the native support of current browsers. For full support table
26
+ // check: http://caniuse.com/flexbox
27
+ //
28
+ // Basically this will use:
29
+ //
30
+ // * Fallback, old syntax (IE10, Safari, mobile webkit browsers)
31
+ // * Prefixed standard syntax (Chrome)
32
+ // * Final standards syntax (FF, IE11, Opera 12.1)
33
+ //
34
+ // This was inspired by:
35
+ //
36
+ // * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
37
+ //
38
+ // With help from:
39
+ //
40
+ // * http://w3.org/tr/css3-flexbox/
41
+ // * http://the-echoplex.net/flexyboxes/
42
+ // * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
43
+ // * http://css-tricks.com/using-flexbox/
44
+ // * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
45
+ // * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
46
+
47
+ //----------------------------------------------------------------------
48
+
49
+ // Flexbox Containers
50
+ //
51
+ // The 'flex' value causes an element to generate a block-level flex
52
+ // container box.
53
+ //
54
+ // The 'inline-flex' value causes an element to generate a inline-level
55
+ // flex container box.
56
+ //
57
+ // display: flex | inline-flex
58
+ //
59
+ // http://w3.org/tr/css3-flexbox/#flex-containers
60
+ //
61
+ // (Placeholder selectors for each type, for those who rather @extend)
62
+
63
+ @mixin flexbox {
64
+ display: -webkit-box;
65
+ display: -webkit-flex;
66
+ display: -moz-flex;
67
+ display: -ms-flexbox;
68
+ display: flex;
69
+ }
70
+
71
+ %flexbox { @include flexbox; }
72
+
73
+ //----------------------------------
74
+
75
+ @mixin inline-flex {
76
+ display: -webkit-inline-box;
77
+ display: -webkit-inline-flex;
78
+ display: -moz-inline-flex;
79
+ display: -ms-inline-flexbox;
80
+ display: inline-flex;
81
+ }
82
+
83
+ %inline-flex { @include inline-flex; }
84
+
85
+ //----------------------------------------------------------------------
86
+
87
+ // Flexbox Direction
88
+ //
89
+ // The 'flex-direction' property specifies how flex items are placed in
90
+ // the flex container, by setting the direction of the flex container's
91
+ // main axis. This determines the direction that flex items are laid out in.
92
+ //
93
+ // Values: row | row-reverse | column | column-reverse
94
+ // Default: row
95
+ //
96
+ // http://w3.org/tr/css3-flexbox/#flex-direction-property
97
+
98
+ @mixin flex-direction($value: row) {
99
+ @if $value == row-reverse {
100
+ -webkit-box-direction: reverse;
101
+ -webkit-box-orient: horizontal;
102
+ } @else if $value == column {
103
+ -webkit-box-direction: normal;
104
+ -webkit-box-orient: vertical;
105
+ } @else if $value == column-reverse {
106
+ -webkit-box-direction: reverse;
107
+ -webkit-box-orient: vertical;
108
+ } @else {
109
+ -webkit-box-direction: normal;
110
+ -webkit-box-orient: horizontal;
111
+ }
112
+ -webkit-flex-direction: $value;
113
+ -moz-flex-direction: $value;
114
+ -ms-flex-direction: $value;
115
+ flex-direction: $value;
116
+ }
117
+ // Shorter version:
118
+ @mixin flex-dir($value: false) { @include flex-direction($value); }
119
+
120
+ //----------------------------------------------------------------------
121
+
122
+ // Flexbox Wrap
123
+ //
124
+ // The 'flex-wrap' property controls whether the flex container is single-line
125
+ // or multi-line, and the direction of the cross-axis, which determines
126
+ // the direction new lines are stacked in.
127
+ //
128
+ // Values: nowrap | wrap | wrap-reverse
129
+ // Default: nowrap
130
+ //
131
+ // http://w3.org/tr/css3-flexbox/#flex-wrap-property
132
+
133
+ @mixin flex-wrap($value: nowrap) {
134
+ // No Webkit Box fallback.
135
+ -webkit-flex-wrap: $value;
136
+ -moz-flex-wrap: $value;
137
+ @if $value == nowrap {
138
+ -ms-flex-wrap: none;
139
+ } @else {
140
+ -ms-flex-wrap: $value;
141
+ }
142
+ flex-wrap: $value;
143
+ }
144
+
145
+ //----------------------------------------------------------------------
146
+
147
+ // Flexbox Flow (shorthand)
148
+ //
149
+ // The 'flex-flow' property is a shorthand for setting the 'flex-direction'
150
+ // and 'flex-wrap' properties, which together define the flex container's
151
+ // main and cross axes.
152
+ //
153
+ // Values: <flex-direction> | <flex-wrap>
154
+ // Default: row nowrap
155
+ //
156
+ // http://w3.org/tr/css3-flexbox/#flex-flow-property
157
+
158
+ @mixin flex-flow($values: (row nowrap)) {
159
+ // No Webkit Box fallback.
160
+ -webkit-flex-flow: $values;
161
+ -moz-flex-flow: $values;
162
+ -ms-flex-flow: $values;
163
+ flex-flow: $values;
164
+ }
165
+
166
+ //----------------------------------------------------------------------
167
+
168
+ // Flexbox Order
169
+ //
170
+ // The 'order' property controls the order in which flex items appear within
171
+ // their flex container, by assigning them to ordinal groups.
172
+ //
173
+ // Default: 0
174
+ //
175
+ // http://w3.org/tr/css3-flexbox/#order-property
176
+
177
+ @mixin order($int: 0) {
178
+ -webkit-box-ordinal-group: $int + 1;
179
+ -webkit-order: $int;
180
+ -moz-order: $int;
181
+ -ms-flex-order: $int;
182
+ order: $int;
183
+ }
184
+
185
+ //----------------------------------------------------------------------
186
+
187
+ // Flexbox Grow
188
+ //
189
+ // The 'flex-grow' property sets the flex grow factor. Negative numbers
190
+ // are invalid.
191
+ //
192
+ // Default: 0
193
+ //
194
+ // http://w3.org/tr/css3-flexbox/#flex-grow-property
195
+
196
+ @mixin flex-grow($int: 0) {
197
+ -webkit-box-flex: $int;
198
+ -webkit-flex-grow: $int;
199
+ -moz-flex-grow: $int;
200
+ -ms-flex-positive: $int;
201
+ flex-grow: $int;
202
+ }
203
+
204
+ //----------------------------------------------------------------------
205
+
206
+ // Flexbox Shrink
207
+ //
208
+ // The 'flex-shrink' property sets the flex shrink factor. Negative numbers
209
+ // are invalid.
210
+ //
211
+ // Default: 1
212
+ //
213
+ // http://w3.org/tr/css3-flexbox/#flex-shrink-property
214
+
215
+ @mixin flex-shrink($int: 1) {
216
+ -webkit-flex-shrink: $int;
217
+ -moz-flex-shrink: $int;
218
+ -ms-flex-negative: $int;
219
+ flex-shrink: $int;
220
+ }
221
+
222
+ //----------------------------------------------------------------------
223
+
224
+ // Flexbox Basis
225
+ //
226
+ // The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
227
+ //
228
+ // Values: Like "width"
229
+ // Default: auto
230
+ //
231
+ // http://www.w3.org/TR/css3-flexbox/#flex-basis-property
232
+
233
+ @mixin flex-basis($value: auto) {
234
+ -webkit-flex-basis: $value;
235
+ -moz-flex-basis: $value;
236
+ -ms-flex-preferred-size: $value;
237
+ flex-basis: $value;
238
+ }
239
+
240
+ //----------------------------------------------------------------------
241
+
242
+ // Flexbox "Flex" (shorthand)
243
+ //
244
+ // The 'flex' property specifies the components of a flexible length: the
245
+ // flex grow factor and flex shrink factor, and the flex basis. When an
246
+ // element is a flex item, 'flex' is consulted instead of the main size
247
+ // property to determine the main size of the element. If an element is
248
+ // not a flex item, 'flex' has no effect.
249
+ //
250
+ // Values: none | <flex-grow> <flex-shrink> || <flex-basis>
251
+ // Default: See individual properties (1 1 0).
252
+ //
253
+ // http://w3.org/tr/css3-flexbox/#flex-property
254
+
255
+ @mixin flex($fg: 1, $fs: null, $fb: null) {
256
+
257
+ // Set a variable to be used by box-flex properties
258
+ $fg-boxflex: $fg;
259
+
260
+ // Box-Flex only supports a flex-grow value so let's grab the
261
+ // first item in the list and just return that.
262
+ @if type-of($fg) == 'list' {
263
+ $fg-boxflex: nth($fg, 1);
264
+ }
265
+
266
+ -webkit-box-flex: $fg-boxflex;
267
+ -webkit-flex: $fg $fs $fb;
268
+ -moz-box-flex: $fg-boxflex;
269
+ -moz-flex: $fg $fs $fb;
270
+ -ms-flex: $fg $fs $fb;
271
+ flex: $fg $fs $fb;
272
+ }
273
+
274
+ //----------------------------------------------------------------------
275
+
276
+ // Flexbox Justify Content
277
+ //
278
+ // The 'justify-content' property aligns flex items along the main axis
279
+ // of the current line of the flex container. This is done after any flexible
280
+ // lengths and any auto margins have been resolved. Typically it helps distribute
281
+ // extra free space leftover when either all the flex items on a line are
282
+ // inflexible, or are flexible but have reached their maximum size. It also
283
+ // exerts some control over the alignment of items when they overflow the line.
284
+ //
285
+ // Note: 'space-*' values not supported in older syntaxes.
286
+ //
287
+ // Values: flex-start | flex-end | center | space-between | space-around
288
+ // Default: flex-start
289
+ //
290
+ // http://w3.org/tr/css3-flexbox/#justify-content-property
291
+
292
+ @mixin justify-content($value: flex-start) {
293
+ @if $value == flex-start {
294
+ -webkit-box-pack: start;
295
+ -ms-flex-pack: start;
296
+ } @else if $value == flex-end {
297
+ -webkit-box-pack: end;
298
+ -ms-flex-pack: end;
299
+ } @else if $value == space-between {
300
+ -webkit-box-pack: justify;
301
+ -ms-flex-pack: justify;
302
+ } @else if $value == space-around {
303
+ -ms-flex-pack: distribute;
304
+ } @else {
305
+ -webkit-box-pack: $value;
306
+ -ms-flex-pack: $value;
307
+ }
308
+ -webkit-justify-content: $value;
309
+ -moz-justify-content: $value;
310
+ justify-content: $value;
311
+ }
312
+ // Shorter version:
313
+ @mixin flex-just($value: flex-start) { @include justify-content($value); }
314
+
315
+ //----------------------------------------------------------------------
316
+
317
+ // Flexbox Align Items
318
+ //
319
+ // Flex items can be aligned in the cross axis of the current line of the
320
+ // flex container, similar to 'justify-content' but in the perpendicular
321
+ // direction. 'align-items' sets the default alignment for all of the flex
322
+ // container's items, including anonymous flex items. 'align-self' allows
323
+ // this default alignment to be overridden for individual flex items. (For
324
+ // anonymous flex items, 'align-self' always matches the value of 'align-items'
325
+ // on their associated flex container.)
326
+ //
327
+ // Values: flex-start | flex-end | center | baseline | stretch
328
+ // Default: stretch
329
+ //
330
+ // http://w3.org/tr/css3-flexbox/#align-items-property
331
+
332
+ @mixin align-items($value: stretch) {
333
+ @if $value == flex-start {
334
+ -webkit-box-align: start;
335
+ -ms-flex-align: start;
336
+ } @else if $value == flex-end {
337
+ -webkit-box-align: end;
338
+ -ms-flex-align: end;
339
+ } @else {
340
+ -webkit-box-align: $value;
341
+ -ms-flex-align: $value;
342
+ }
343
+ -webkit-align-items: $value;
344
+ -moz-align-items: $value;
345
+ align-items: $value;
346
+ }
347
+
348
+ //----------------------------------
349
+
350
+ // Flexbox Align Self
351
+ //
352
+ // Values: auto | flex-start | flex-end | center | baseline | stretch
353
+ // Default: auto
354
+
355
+ @mixin align-self($value: auto) {
356
+ // No Webkit Box Fallback.
357
+ -webkit-align-self: $value;
358
+ -moz-align-self: $value;
359
+ @if $value == flex-start {
360
+ -ms-flex-item-align: start;
361
+ } @else if $value == flex-end {
362
+ -ms-flex-item-align: end;
363
+ } @else {
364
+ -ms-flex-item-align: $value;
365
+ }
366
+ align-self: $value;
367
+ }
368
+
369
+ //----------------------------------------------------------------------
370
+
371
+ // Flexbox Align Content
372
+ //
373
+ // The 'align-content' property aligns a flex container's lines within the
374
+ // flex container when there is extra space in the cross-axis, similar to
375
+ // how 'justify-content' aligns individual items within the main-axis. Note,
376
+ // this property has no effect when the flexbox has only a single line.
377
+ //
378
+ // Values: flex-start | flex-end | center | space-between | space-around | stretch
379
+ // Default: stretch
380
+ //
381
+ // http://w3.org/tr/css3-flexbox/#align-content-property
382
+
383
+ @mixin align-content($value: stretch) {
384
+ // No Webkit Box Fallback.
385
+ -webkit-align-content: $value;
386
+ -moz-align-content: $value;
387
+ @if $value == flex-start {
388
+ -ms-flex-line-pack: start;
389
+ } @else if $value == flex-end {
390
+ -ms-flex-line-pack: end;
391
+ } @else {
392
+ -ms-flex-line-pack: $value;
393
+ }
394
+ align-content: $value;
395
+ }
metadata ADDED
@@ -0,0 +1,95 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: flexbox-sass
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ platform: ruby
6
+ authors:
7
+ - Jack Callister
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2014-10-26 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ~>
18
+ - !ruby/object:Gem::Version
19
+ version: '1.3'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ~>
25
+ - !ruby/object:Gem::Version
26
+ version: '1.3'
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
+ - !ruby/object:Gem::Dependency
42
+ name: railties
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - '>='
46
+ - !ruby/object:Gem::Version
47
+ version: '0'
48
+ type: :runtime
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - '>='
53
+ - !ruby/object:Gem::Version
54
+ version: '0'
55
+ description: '["A simple flexbox mixin"]'
56
+ email:
57
+ - jarsbe@gmail.com
58
+ executables: []
59
+ extensions: []
60
+ extra_rdoc_files: []
61
+ files:
62
+ - .gitignore
63
+ - Gemfile
64
+ - LICENSE.txt
65
+ - README.md
66
+ - Rakefile
67
+ - flexbox-sass.gemspec
68
+ - lib/flexbox/sass.rb
69
+ - lib/flexbox/sass/version.rb
70
+ - vendor/assets/stylesheets/flexbox.css.scss
71
+ homepage: ''
72
+ licenses:
73
+ - MIT
74
+ metadata: {}
75
+ post_install_message:
76
+ rdoc_options: []
77
+ require_paths:
78
+ - lib
79
+ required_ruby_version: !ruby/object:Gem::Requirement
80
+ requirements:
81
+ - - '>='
82
+ - !ruby/object:Gem::Version
83
+ version: '0'
84
+ required_rubygems_version: !ruby/object:Gem::Requirement
85
+ requirements:
86
+ - - '>='
87
+ - !ruby/object:Gem::Version
88
+ version: '0'
89
+ requirements: []
90
+ rubyforge_project:
91
+ rubygems_version: 2.2.2
92
+ signing_key:
93
+ specification_version: 4
94
+ summary: '["Import or require ''flexbox'' and use the mixin as per readme."]'
95
+ test_files: []