Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the moz-box #38

Open
wants to merge 40 commits into
base: compass
Choose a base branch
from
Open

Add the moz-box #38

wants to merge 40 commits into from

Conversation

pimmink
Copy link

@pimmink pimmink commented Jun 8, 2017

The mixin is great! But you forgot the moz-box.

@mixin flexbox {
display: -webkit-box;
display: -webkit-flex;
🔴display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}

@mixin inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
🔴display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}

@mixin justify-content($value: flex-start) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
🔴-moz-box-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
🔴-moz-box-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
🔴-moz-box-pack: justify;
} @else if $value == space-around {
-ms-flex-pack: center;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
🔴-moz-box-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;
}

@mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
🔴-moz-box-align: start;
🔴-ms-grid-row-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
🔴-moz-box-align: end;
🔴-ms-grid-row-align: end;
} @else {
-webkit-box-align: $value;
-ms-flex-align: $value;
🔴-moz-box-align: $value;
🔴-ms-grid-row-align: $value;
}
-webkit-align-items: $value;
🔴-moz-align-items: $value;
align-items: $value;
}

And -ms-flex-wrap is nowrap not none

// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
🔴-ms-flex-wrap: nowrap;
} @else {
🔴 -ms-flex-wrap: $value;
}
flex-wrap: $value;

mastastealth and others added 30 commits July 20, 2013 17:43
This includes the "justify" property for Legacy and Microsoft flexbox syntax.
flex-grow for old webkit syntax (Android Browser)
Add fallback for justify-content(space-between)
Changes:

1. SCSS test file.
2. Added `.sass-cache*` to `.gitignore`.
3. Added mixin default args.
4. Cleaned up comments (wrapping to 72 characters).
5. Added property descriptions.
6. Added link to W3.org docs.
7. Slighty modified logic for a few `@if ...` directives.
Changing flexbox and inline-flex from a mixin to a class should produce less CSS when compiled.
Using @extend rather than calling a mixin.
Updated to produce less CSS when compiled
Revert to mixins, but add placeholders too.
Fixed the reference url for flex-basis
Check if the argument passed to flex() is a list and return the right value. Fixes #10.
So the previous pull request #11 was actually broken.

The output of `@mixin flex()` when given a list wasn't filling out all the properties correctly.

This PR should fix that, and ensure that all box-flex properties are filled out appropriately too!

Now both, for example, `@include flex(10, 5, 100px)` and `@include flex(10 5 100px)` work!
Update @mixin flex() to accomodate box-flex
IE10 uses the (as far as I could find) undocumented -ms-flex-pack: distribute; for the space-around value. Could find no similar implementation of the old flexbox spec by other vendors.
justify-content: space-around IE10 fix
Fixes #15
Fixes #16
Note: You will have to make a tag/release that matches the version number in this bower.json file. For discussion, see #17.
Add package.json for publication on NPM
added quotes to license MIT
added quotes to license MIT
@pimmink pimmink mentioned this pull request Jun 8, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.