flexbox_sass_rails 0.2.1 → 0.2.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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: c4aab24437425dc3cfd55a4af6fbecb0534644c1
4
- data.tar.gz: 508acb7d13dccac5cf9d533cbb45d1502ace5995
3
+ metadata.gz: 6ef410590af84d6db5e3d2b617bfd79a8d28b2f8
4
+ data.tar.gz: b0deb3e999273f5340d2412c30513225562fadd4
5
5
  SHA512:
6
- metadata.gz: edd681fda7e3c57def40e14da9810c0e6656de85f1f8131a0e5e4bf2844e89498130c7044ccb0805396257687f6847b2e8f8b9c1d586f98fbf26b79000ce30a4
7
- data.tar.gz: 07d1046a060cf4eb21a6ff4c897e523d814d6d9630147a507bd21a5c7e3ff7f62a1eb948700503ecb9e5ddf886e6a2502d260b3d9a3a0a9f9eaa655a79d353bc
6
+ metadata.gz: 3e8b9f1cb847c1689f026ea2b151f7ae1772a4a89462df478d41b81117a42ee254a00559d849159fc1f6285c39383f7cd3405a9a8683d7846fe2ab6243a554b0
7
+ data.tar.gz: 24d50b6e85b92be545bbb9d1a80597d14dc4322b56ddd50271169ae811116b20917a8b9a784da6786117fae0f4c98207d152ae5b790ab2eaf04ecfebe9b44e00
@@ -0,0 +1,9 @@
1
+ // ==========================================================================
2
+ // Flexbox variables
3
+ // ==========================================================================
4
+
5
+ // Media Query Ranges
6
+ $fb-layout-sm: 600px !default;
7
+ $fb-layout-md: 960px !default;
8
+ $fb-layout-lg: 1280px !default;
9
+ $fb-layout-xl: 1920px !default;
@@ -0,0 +1,426 @@
1
+ // ==========================================================================
2
+ // Flexbox
3
+ // ==========================================================================
4
+
5
+ // Variables
6
+ @import "components/variables";
7
+
8
+ // Style mixins
9
+ // ==========================================================================
10
+
11
+ // Layout
12
+
13
+ @mixin fb-layout-row-column {
14
+ display: flex;
15
+ }
16
+ @mixin fb-layout-row {
17
+ flex-direction: row;
18
+ }
19
+ @mixin fb-layout-column {
20
+ flex-direction: column;
21
+ }
22
+
23
+ @mixin fb-layout-row-flex {
24
+ min-width: 0;
25
+ min-height: auto;
26
+ }
27
+ @mixin fb-layout-column-flex {
28
+ min-width: auto;
29
+ min-height: 0;
30
+ }
31
+
32
+ @mixin fb-layout-fill {
33
+ margin: 0;
34
+ width: 100%;
35
+ min-height: 100%;
36
+ height: 100%;
37
+ }
38
+
39
+ @mixin fb-layout-wrap {
40
+ flex-wrap: wrap;
41
+ }
42
+
43
+ // Flex
44
+
45
+ @mixin fb-flex {
46
+ flex: 1;
47
+ max-height: none;
48
+ max-width: none;
49
+ }
50
+ @mixin fb-layout-row-flex-common {
51
+ max-height: 100%;
52
+ }
53
+ @mixin fb-flex-amount($amount) {
54
+ @if $amount == 33 {
55
+ $amount: 33.33;
56
+ } @else if $amount == 66 {
57
+ $amount: 66.66;
58
+ }
59
+ flex: 1 1 (1% * $amount);
60
+ }
61
+ @mixin fb-layout-row-flex-amount($amount) {
62
+ @if $amount == 33 {
63
+ $amount: 33.33;
64
+ } @else if $amount == 66 {
65
+ $amount: 66.66;
66
+ }
67
+ max-width: (1% * $amount);
68
+ }
69
+ @mixin fb-layout-column-flex-common {
70
+ max-width: 100%;
71
+ }
72
+ @mixin fb-layout-column-flex-amount($amount) {
73
+ @if $amount == 33 {
74
+ $amount: 33.33;
75
+ } @else if $amount == 66 {
76
+ $amount: 66.66;
77
+ }
78
+ max-height: (1% * $amount);
79
+ }
80
+
81
+ // Layout align
82
+
83
+ @mixin fb-layout-align-start- {
84
+ justify-content: flex-start;
85
+ }
86
+ @mixin fb-layout-align-center- {
87
+ justify-content: center;
88
+ }
89
+ @mixin fb-layout-align-end- {
90
+ justify-content: flex-end;
91
+ }
92
+ @mixin fb-layout-align-space-around- {
93
+ justify-content: space-around;
94
+ }
95
+ @mixin fb-layout-align-space-between- {
96
+ justify-content: space-between;
97
+ }
98
+
99
+ @mixin fb-layout-align--stretch {
100
+ align-content: stretch;
101
+ align-items: stretch;
102
+ max-width: none;
103
+ & > * {
104
+ max-width: none;
105
+ }
106
+ }
107
+ @mixin fb-layout-align--start {
108
+ align-items: flex-start;
109
+ align-content: flex-start;
110
+ max-width: none;
111
+ & > * {
112
+ max-width: none;
113
+ }
114
+ }
115
+ @mixin fb-layout-align--center {
116
+ align-items: center;
117
+ align-content: center;
118
+ max-width: 100%;
119
+ & > * {
120
+ max-width: 100%;
121
+ }
122
+ }
123
+ @mixin fb-layout-align--end {
124
+ align-items: flex-end;
125
+ align-content: flex-end;
126
+ max-width: none;
127
+ & > * {
128
+ max-width: none;
129
+ }
130
+ }
131
+
132
+ // Flex order
133
+
134
+ @mixin fb-flex-order-amount($amount) {
135
+ order: $amount;
136
+ }
137
+
138
+ // Responsivity mixin
139
+ // ==========================================================================
140
+
141
+ @mixin fb-responsivity-($size: null){
142
+
143
+ // Add size
144
+
145
+ $output: if($size, '-' + $size, '');
146
+
147
+ // Layout
148
+
149
+ // Placeholders
150
+
151
+ %fb-layout#{$output}-row-column {
152
+ @include fb-layout-row-column;
153
+ }
154
+ %fb-layout#{$output}-row {
155
+ @include fb-layout-row;
156
+ }
157
+ %fb-layout#{$output}-column {
158
+ @include fb-layout-column;
159
+ }
160
+
161
+ // Output
162
+
163
+ .fb-layout#{$output}-row{
164
+ @extend %fb-layout#{$output}-row-column;
165
+ @extend %fb-layout#{$output}-row;
166
+ }
167
+ .fb-layout#{$output}-column{
168
+ @extend %fb-layout#{$output}-row-column;
169
+ @extend %fb-layout#{$output}-column;
170
+ }
171
+
172
+ .fb-layout#{$output}-wrap{
173
+ @include fb-layout-wrap;
174
+ }
175
+
176
+ // Flex
177
+
178
+ // Placeholders
179
+
180
+ %fb-layout#{$output}-row-flex {
181
+ @include fb-layout-row-flex;
182
+ }
183
+ %fb-layout#{$output}-column-flex {
184
+ @include fb-layout-column-flex;
185
+ }
186
+
187
+ %fb-layout#{$output}-row-flex-common {
188
+ @include fb-layout-row-flex-common;
189
+ }
190
+ %fb-layout#{$output}-column-flex-common {
191
+ @include fb-layout-column-flex-common;
192
+ }
193
+
194
+ @for $i from 1 through 20 {
195
+ %fb-flex#{$output}-amount-#{$i * 5} {
196
+ @include fb-flex-amount($i * 5);
197
+ }
198
+ %fb-layout#{$output}-row-flex-amount-#{$i * 5} {
199
+ @include fb-layout-row-flex-amount($i * 5);
200
+ }
201
+ %fb-layout#{$output}-column-flex-amount-#{$i * 5} {
202
+ @include fb-layout-column-flex-amount($i * 5);
203
+ }
204
+ }
205
+ %fb-flex#{$output}-amount-33 {
206
+ @include fb-flex-amount(33);
207
+ }
208
+ %fb-flex#{$output}-amount-66 {
209
+ @include fb-flex-amount(66);
210
+ }
211
+ %fb-layout#{$output}-row-flex-amount-33 {
212
+ @include fb-layout-row-flex-amount(33);
213
+ }
214
+ %fb-layout#{$output}-row-flex-amount-66 {
215
+ @include fb-layout-row-flex-amount(66);
216
+ }
217
+ %fb-layout#{$output}-column-flex-amount-33 {
218
+ @include fb-layout-column-flex-amount(33);
219
+ }
220
+ %fb-layout#{$output}-column-flex-amount-66 {
221
+ @include fb-layout-column-flex-amount(66);
222
+ }
223
+
224
+ // Output
225
+ $flex-options-size: if($size, 6, 2);
226
+ $flex-options: (
227
+ ("row" , "#{$output}", "#{$output}"),
228
+ ("column", "#{$output}", "#{$output}"),
229
+ ("row" , "" , "#{$output}"),
230
+ ("column", "" , "#{$output}"),
231
+ ("row" , "#{$output}", "" ),
232
+ ("column", "#{$output}", "" )
233
+ );
234
+
235
+ @for $k from 1 through $flex-options-size {
236
+
237
+ $opt-1: nth( nth( $flex-options, $k ), 1 );
238
+ $opt-2: nth( nth( $flex-options, $k ), 2 );
239
+ $opt-3: nth( nth( $flex-options, $k ), 3 );
240
+
241
+ .fb-layout#{$opt-2}-#{$opt-1}{
242
+ & > .fb-flex#{$opt-3} {
243
+ @extend %fb-layout#{$output}-#{$opt-1}-flex;
244
+ }
245
+ @for $i from 1 through 20 {
246
+ & > .fb-flex#{$opt-3}-#{$i * 5} {
247
+ @extend %fb-flex#{$output}-amount-#{$i * 5};
248
+ @extend %fb-layout#{$output}-#{$opt-1}-flex-common;
249
+ @extend %fb-layout#{$output}-#{$opt-1}-flex-amount-#{$i * 5};
250
+ }
251
+ }
252
+ & > .fb-flex#{$opt-3}-33 {
253
+ @extend %fb-flex#{$output}-amount-33;
254
+ @extend %fb-layout#{$output}-#{$opt-1}-flex-common;
255
+ @extend %fb-layout#{$output}-#{$opt-1}-flex-amount-33;
256
+ }
257
+ & > .fb-flex#{$opt-3}-66 {
258
+ @extend %fb-flex#{$output}-amount-66;
259
+ @extend %fb-layout#{$output}-#{$opt-1}-flex-common;
260
+ @extend %fb-layout#{$output}-#{$opt-1}-flex-amount-66;
261
+ }
262
+ }
263
+ }
264
+
265
+ .fb-flex#{$output} {@include fb-flex;}
266
+
267
+ // Layout align
268
+
269
+ // Placeholders
270
+
271
+ %fb-layout-align#{$output}-start- {
272
+ @include fb-layout-align-start-;
273
+ }
274
+ %fb-layout-align#{$output}-center- {
275
+ @include fb-layout-align-center-;
276
+ }
277
+ %fb-layout-align#{$output}-end- {
278
+ @include fb-layout-align-end-;
279
+ }
280
+ %fb-layout-align#{$output}-space-around- {
281
+ @include fb-layout-align-space-around-;
282
+ }
283
+ %fb-layout-align#{$output}-space-between- {
284
+ @include fb-layout-align-space-between-;
285
+ }
286
+
287
+ %fb-layout-align#{$output}--stretch {
288
+ @include fb-layout-align--stretch;
289
+ }
290
+ %fb-layout-align#{$output}--start {
291
+ @include fb-layout-align--start;
292
+ }
293
+ %fb-layout-align#{$output}--center {
294
+ @include fb-layout-align--center;
295
+ }
296
+ %fb-layout-align#{$output}--end {
297
+ @include fb-layout-align--end;
298
+ }
299
+
300
+ // Output
301
+
302
+ .fb-layout-align#{$output}-start-stretch {
303
+ @extend %fb-layout-align#{$output}-start-;
304
+ @extend %fb-layout-align#{$output}--stretch;
305
+ }
306
+ .fb-layout-align#{$output}-start-start {
307
+ @extend %fb-layout-align#{$output}-start-;
308
+ @extend %fb-layout-align#{$output}--start;
309
+ }
310
+ .fb-layout-align#{$output}-start-center {
311
+ @extend %fb-layout-align#{$output}-start-;
312
+ @extend %fb-layout-align#{$output}--center;
313
+ }
314
+ .fb-layout-align#{$output}-start-end {
315
+ @extend %fb-layout-align#{$output}-start-;
316
+ @extend %fb-layout-align#{$output}--end;
317
+ }
318
+
319
+ .fb-layout-align#{$output}-center-stretch {
320
+ @extend %fb-layout-align#{$output}-center-;
321
+ @extend %fb-layout-align#{$output}--stretch;
322
+ }
323
+ .fb-layout-align#{$output}-center-start {
324
+ @extend %fb-layout-align#{$output}-center-;
325
+ @extend %fb-layout-align#{$output}--start;
326
+ }
327
+ .fb-layout-align#{$output}-center-center {
328
+ @extend %fb-layout-align#{$output}-center-;
329
+ @extend %fb-layout-align#{$output}--center;
330
+ }
331
+ .fb-layout-align#{$output}-center-end {
332
+ @extend %fb-layout-align#{$output}-center-;
333
+ @extend %fb-layout-align#{$output}--end;
334
+ }
335
+
336
+ .fb-layout-align#{$output}-end-stretch {
337
+ @extend %fb-layout-align#{$output}-end-;
338
+ @extend %fb-layout-align#{$output}--stretch;
339
+ }
340
+ .fb-layout-align#{$output}-end-start {
341
+ @extend %fb-layout-align#{$output}-end-;
342
+ @extend %fb-layout-align#{$output}--start;
343
+ }
344
+ .fb-layout-align#{$output}-end-center {
345
+ @extend %fb-layout-align#{$output}-end-;
346
+ @extend %fb-layout-align#{$output}--center;
347
+ }
348
+ .fb-layout-align#{$output}-end-end {
349
+ @extend %fb-layout-align#{$output}-end-;
350
+ @extend %fb-layout-align#{$output}--end;
351
+ }
352
+
353
+ .fb-layout-align#{$output}-space-around-stretch {
354
+ @extend %fb-layout-align#{$output}-space-around-;
355
+ @extend %fb-layout-align#{$output}--stretch;
356
+ }
357
+ .fb-layout-align#{$output}-space-around-start {
358
+ @extend %fb-layout-align#{$output}-space-around-;
359
+ @extend %fb-layout-align#{$output}--start;
360
+ }
361
+ .fb-layout-align#{$output}-space-around-center {
362
+ @extend %fb-layout-align#{$output}-space-around-;
363
+ @extend %fb-layout-align#{$output}--center;
364
+ }
365
+ .fb-layout-align#{$output}-space-around-end {
366
+ @extend %fb-layout-align#{$output}-space-around-;
367
+ @extend %fb-layout-align#{$output}--end;
368
+ }
369
+
370
+ .fb-layout-align#{$output}-space-between-stretch {
371
+ @extend %fb-layout-align#{$output}-space-between-;
372
+ @extend %fb-layout-align#{$output}--stretch;
373
+ }
374
+ .fb-layout-align#{$output}-space-between-start {
375
+ @extend %fb-layout-align#{$output}-space-between-;
376
+ @extend %fb-layout-align#{$output}--start;
377
+ }
378
+ .fb-layout-align#{$output}-space-between-center {
379
+ @extend %fb-layout-align#{$output}-space-between-;
380
+ @extend %fb-layout-align#{$output}--center;
381
+ }
382
+ .fb-layout-align#{$output}-space-between-end {
383
+ @extend %fb-layout-align#{$output}-space-between-;
384
+ @extend %fb-layout-align#{$output}--end;
385
+ }
386
+
387
+ // Flex order
388
+
389
+ // Output
390
+
391
+ @for $i from -20 through 20 {
392
+ .fb-flex-order#{$output}-#{$i} {
393
+ @include fb-flex-order-amount($i);
394
+ }
395
+ }
396
+
397
+ }
398
+
399
+ // Styles output
400
+ // ==========================================================================
401
+
402
+ .fb-layout-fill {
403
+ @include fb-layout-fill;
404
+ }
405
+
406
+ @include fb-responsivity-();
407
+
408
+ @media (min-width: $fb-layout-xl) {
409
+ @include fb-responsivity-(xl);
410
+ }
411
+
412
+ @media (min-width: $fb-layout-lg) and (max-width: ($fb-layout-xl - 1)) {
413
+ @include fb-responsivity-(lg);
414
+ }
415
+
416
+ @media (min-width: $fb-layout-md) and (max-width: ($fb-layout-lg - 1)) {
417
+ @include fb-responsivity-(md);
418
+ }
419
+
420
+ @media (min-width: $fb-layout-sm) and (max-width: ($fb-layout-md - 1)) {
421
+ @include fb-responsivity-(sm);
422
+ }
423
+
424
+ @media (max-width: ($fb-layout-sm - 1)) {
425
+ @include fb-responsivity-(xs);
426
+ }
@@ -14,9 +14,7 @@ Gem::Specification.new do |spec|
14
14
  spec.homepage = "https://github.com/pavelccz/flexbox_sass_rails"
15
15
  spec.license = "MIT"
16
16
 
17
- spec.files = `git ls-files -z`.split("\x0").reject do |f|
18
- f.match(%r{^(app|test|spec|features)/})
19
- end
17
+ spec.files = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
20
18
  spec.bindir = "exe"
21
19
  spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
22
20
  spec.require_paths = ["lib"]
@@ -1,3 +1,3 @@
1
1
  module FlexboxSassRails
2
- VERSION = "0.2.1"
2
+ VERSION = "0.2.2"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: flexbox_sass_rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.1
4
+ version: 0.2.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Pavel Cerny
@@ -64,6 +64,8 @@ files:
64
64
  - LICENSE.txt
65
65
  - README.md
66
66
  - Rakefile
67
+ - app/assets/stylesheets/components/_variables.scss
68
+ - app/assets/stylesheets/flexbox_sass_rails.scss
67
69
  - bin/console
68
70
  - bin/setup
69
71
  - flexbox_sass_rails.gemspec