Sha256: a221c0dae432d80dbb64a088aa6c4be0237249a47e117476750b0242f38df70f
Contents?: true
Size: 1.72 KB
Versions: 5
Compression:
Stored size: 1.72 KB
Contents
// =============================================
// Flexbox Helpers
// Last Updated:2013-6-28
// =============================================
@mixin flex-wrapper() {
display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6
display: -moz-box; // OLD - Firefox 19- (buggy but mostly works)
display: -ms-flexbox; // TWEENER - IE 10
display: -webkit-flex; // NEW - Chrome
display: flex; // New spec - Opera 12.1, Firefox 20+
}
@mixin flex-box($values: 1) {
width: percent(1/$values); // For old syntax, otherwise collapses.
-webkit-box-flex: $values; // OLD - iOS 6-, Safari 3.1-6
-moz-box-flex: $values; // OLD - Firefox 19-
-webkit-flex: $values; // Chrome
-ms-flex: $values; // IE 10
flex: $values; // New spec - Opera 12.1, Firefox 20+
}
@mixin flex-order($val) {
-webkit-box-ordinal-group: $val; // OLD - iOS 6-, Safari 3.1-6
-moz-box-ordinal-group: $val; // OLD - Firefox 19-
-ms-flex-order: $val; // IE 10
-webkit-order: $val; // Chrome
order: $val; // New spec
}
@mixin vertical-center() {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
display: box;
box-orient: vertical;
box-pack: center;
}
%flex-wrapper {
@include flex-wrapper();
}
%flex-box {
@include flex-box();
}
%vertical-center {
@include vertical-center();
}
@if $flexbox-classes {
.flex-wrapper {
@extend %flex-wrapper;
}
.flex-box {
@extend %flex-box;
}
.vertical-center {
@extend %vertical-center;
}
}
Version data entries
5 entries across 5 versions & 1 rubygems