flexbox-sass 0.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.
@@ -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: []