-
-
Save MrSwed/c5bc6107caf324f72d12 to your computer and use it in GitHub Desktop.
CSS3 Flexbox - LESS Mixins
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // -------------------------------------------------- | |
| // Flexbox LESS extends | |
| // The spec: http://www.w3.org/TR/css3-flexbox | |
| // -------------------------------------------------- | |
| // example usage as extender .mydiv:extend(.flex) {&:extend(.flex.j-center)} | |
| @import "flexbox"; | |
| .flex { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| .flex-display(); | |
| &.start { | |
| -webkit-box-align: start; | |
| -ms-flex-align: start; | |
| .align-items(flex-start); | |
| .align-content(flex-start); | |
| } | |
| &.end { | |
| -webkit-box-align: end; | |
| -ms-flex-align: end; | |
| .align-items(flex-end); | |
| .align-content(flex-end); | |
| } | |
| &.center { | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| .align-items(center); | |
| .align-content(center); | |
| &.around { | |
| .align-content(space-around); | |
| } | |
| } | |
| &.baseline { | |
| .align-items(baseline); | |
| } | |
| &.stretch { | |
| .align-items(stretch); | |
| .align-content(stretch); | |
| } | |
| &.inline { .flex-display(inline-flex); } | |
| &.wrap { | |
| -webkit-box-lines: multiple; | |
| .flex-wrap(wrap); | |
| } | |
| &.nowrap { | |
| -webkit-box-lines: single; | |
| .flex-wrap(nowrap); | |
| } | |
| &.wrap-reverse { | |
| .flex-wrap(wrap-reverse); | |
| } | |
| &.col { | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -moz-box-direction: normal; | |
| .flex-direction(column); | |
| } | |
| &.col-reverse { | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: reverse; | |
| -moz-box-direction: reverse; | |
| .flex-direction(column-reverse;) | |
| } | |
| &.row { | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: normal; | |
| -moz-box-direction: normal; | |
| .flex-direction(row); | |
| } | |
| &.row-reverse { | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: reverse; | |
| -moz-box-direction: reverse; | |
| .flex-direction(row-reverse); | |
| } | |
| &.j-start { | |
| -webkit-box-pack: start; | |
| -ms-flex-pack: start; | |
| -moz-box-pack: start; | |
| -ms-flex-align: start; | |
| .justify-content(flex-start); | |
| } | |
| &.j-end { | |
| -webkit-box-pack: end; | |
| -ms-flex-pack: end; | |
| -moz-box-pack: end; | |
| -ms-flex-align: end; | |
| .justify-content(flex-end); | |
| } | |
| &.j-center { | |
| -webkit-box-pack: center; | |
| -ms-flex-pack: center; | |
| -moz-box-pack: center; | |
| -ms-flex-align: center; | |
| .justify-content(center); | |
| } | |
| &.j-around { | |
| -webkit-box-pack: justify; | |
| -ms-flex-pack: justify; | |
| -moz-box-pack: justify; | |
| .justify-content(space-around); | |
| } | |
| &.j-between { | |
| -webkit-box-pack: justify; | |
| -ms-flex-pack: justify; | |
| -moz-box-pack: justify; | |
| .justify-content(space-between); | |
| } | |
| &.j-stretch { | |
| .justify-content(stretch); | |
| } | |
| &.vertical { | |
| &:extend(.flex.col); | |
| } | |
| &.horisontal { | |
| &:extend(.flex.row); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // -------------------------------------------------- | |
| // Flexbox LESS mixins | |
| // The spec: http://www.w3.org/TR/css3-flexbox | |
| // -------------------------------------------------- | |
| // Flexbox display | |
| // flex or inline-flex | |
| .flex-display(@display: flex) { | |
| display: ~"-webkit-@{display}"; | |
| display: ~"-moz-@{display}"; | |
| display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox | |
| display: ~"-ms-@{display}"; // IE11 | |
| display: @display; | |
| } | |
| // The 'flex' shorthand | |
| // - applies to: flex items | |
| // <positive-number>, initial, auto, or none | |
| .flex(@columns: initial) { | |
| -webkit-flex: @columns; | |
| -moz-flex: @columns; | |
| -ms-flex: @columns; | |
| flex: @columns; | |
| } | |
| // Flex Flow Direction | |
| // - applies to: flex containers | |
| // row | row-reverse | column | column-reverse | |
| .flex-direction(@direction: row) { | |
| -webkit-flex-direction: @direction; | |
| -moz-flex-direction: @direction; | |
| -ms-flex-direction: @direction; | |
| flex-direction: @direction; | |
| } | |
| // Flex Line Wrapping | |
| // - applies to: flex containers | |
| // nowrap | wrap | wrap-reverse | |
| .flex-wrap(@wrap: nowrap) { | |
| -webkit-flex-wrap: @wrap; | |
| -moz-flex-wrap: @wrap; | |
| -ms-flex-wrap: @wrap; | |
| flex-wrap: @wrap; | |
| } | |
| // Flex Direction and Wrap | |
| // - applies to: flex containers | |
| // <flex-direction> || <flex-wrap> | |
| .flex-flow(@flow) { | |
| -webkit-flex-flow: @flow; | |
| -moz-flex-flow: @flow; | |
| -ms-flex-flow: @flow; | |
| flex-flow: @flow; | |
| } | |
| // Display Order | |
| // - applies to: flex items | |
| // <integer> | |
| .flex-order(@order: 0) { | |
| -webkit-order: @order; | |
| -moz-order: @order; | |
| -ms-order: @order; | |
| order: @order; | |
| } | |
| // Flex grow factor | |
| // - applies to: flex items | |
| // <number> | |
| .flex-grow(@grow: 0) { | |
| -webkit-flex-grow: @grow; | |
| -moz-flex-grow: @grow; | |
| -ms-flex-grow: @grow; | |
| flex-grow: @grow; | |
| } | |
| // Flex shrink | |
| // - applies to: flex item shrink factor | |
| // <number> | |
| .flex-shrink(@shrink: 1) { | |
| -webkit-flex-shrink: @shrink; | |
| -moz-flex-shrink: @shrink; | |
| -ms-flex-shrink: @shrink; | |
| flex-shrink: @shrink; | |
| } | |
| // Flex basis | |
| // - the initial main size of the flex item | |
| // - applies to: flex itemsnitial main size of the flex item | |
| // <width> | |
| .flex-basis(@width: auto) { | |
| -webkit-flex-basis: @width; | |
| -moz-flex-basis: @width; | |
| -ms-flex-basis: @width; | |
| flex-basis: @width; | |
| } | |
| // Axis Alignment | |
| // - applies to: flex containers | |
| // flex-start | flex-end | center | space-between | space-around | |
| .justify-content(@justify: flex-start) { | |
| -webkit-justify-content: @justify; | |
| -moz-justify-content: @justify; | |
| -ms-justify-content: @justify; | |
| justify-content: @justify; | |
| } | |
| // Packing Flex Lines | |
| // - applies to: multi-line flex containers | |
| // flex-start | flex-end | center | space-between | space-around | stretch | |
| .align-content(@align: stretch) { | |
| -webkit-box-align-content: @align; | |
| -webkit-align-content: @align; | |
| -moz-align-content: @align; | |
| -ms-flex-align-content: @align; | |
| -ms-align-content: @align; | |
| align-content: @align; | |
| } | |
| // Cross-axis Alignment | |
| // - applies to: flex containers | |
| // flex-start | flex-end | center | baseline | stretch | |
| .align-items(@align: stretch) { | |
| -webkit-align-items: @align; | |
| -webkit-flex-align: @align; | |
| -webkit-box-align: @align; | |
| -moz-align-items: @align; | |
| -moz-box-align: @align; | |
| -ms-align-items: @align; | |
| -ms-flex-align: @align; | |
| align-items: @align; | |
| } | |
| // Cross-axis Alignment | |
| // - applies to: flex items | |
| // auto | flex-start | flex-end | center | baseline | stretch | |
| .align-self(@align: auto) { | |
| -webkit-align-self: @align; | |
| -moz-align-self: @align; | |
| -ms-align-self: @align; | |
| align-self: @align; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment