Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added scss mixins for flexbox

  • Loading branch information...
commit e276a4c287ff761813cfdc1f8e15cc19b72f07d0 1 parent 6d74e27
@kristianmandrup authored
Showing with 85 additions and 0 deletions.
  1. +85 −0 vendor/assets/stylesheets/flex-layout.scss
View
85 vendor/assets/stylesheets/flex-layout.scss
@@ -0,0 +1,85 @@
+/* From: http://infrequently.org/2009/08/css-3-progress/
+
+hbox and vbox classes */
+
+@mixin hbox() {
+ display: -webkit-box;
+ -webkit-box-orient: horizontal;
+ -webkit-box-align: stretch;
+
+ display: -moz-box;
+ -moz-box-orient: horizontal;
+ -moz-box-align: stretch;
+
+ display: box;
+ box-orient: horizontal;
+ box-align: stretch;
+}
+
+@mixin hbox-item() {
+ -webkit-box-flex: 0;
+ -moz-box-flex: 0;
+ box-flex: 0;
+ display: block;
+}
+
+@mixin vbox() {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-box-align: stretch;
+
+ display: -moz-box;
+ -moz-box-orient: vertical;
+ -moz-box-align: stretch;
+
+ display: box;
+ box-orient: vertical;
+ box-align: stretch;
+}
+
+@mixin vbox-item {
+ -webkit-box-flex: 0;
+ -moz-box-flex: 0;
+ box-flex: 0;
+ display: block;
+}
+
+@mixin flex-reverse() {
+ -webkit-box-direction: reverse;
+ -moz-box-direction: reverse;
+ box-direction: reverse;
+}
+
+@mixin flex-spacer($size: 1)
+ @include flex-box($size);
+}
+
+@mixin flex-box($size: 1) {
+ -webkit-box-flex: $size;
+ -moz-box-flex: $size;
+ box-flex: $size;
+}
+
+@mixin flex-group($size) {
+ -webkit-box-flex-group: $size;
+ -moz-box-flex-group: $size;
+ box-flex-group: $size;
+}
+
+@mixin flex-start() {
+ -webkit-box-pack: start;
+ -moz-box-pack: start;
+ box-pack: start;
+}
+
+@mixin flex-end() {
+ -webkit-box-pack: end;
+ -moz-box-pack: end;
+ box-pack: end;
+}
+
+@mixin flex-center() {
+ -webkit-box-pack: center;
+ -moz-box-pack: center;
+ box-pack: center;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.