xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/counting.site.
3.5 kB
137 lines
1// Mixins for flex compatibility
2
3// --------------------------------------------------
4// Flexbox LESS mixins
5// The spec: http://www.w3.org/TR/css3-flexbox
6// --------------------------------------------------
7
8// Flexbox display
9// flex or inline-flex
10.flex-display(@display: flex) {
11 display: ~"-webkit-@{display}";
12 display: ~"-moz-@{display}";
13 display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
14 display: ~"-ms-@{display}"; // IE11
15 display: @display;
16}
17
18// The 'flex' shorthand
19// - applies to: flex items
20// <positive-number>, initial, auto, or none
21.flex(@columns: initial) {
22 -webkit-flex: @columns;
23 -moz-flex: @columns;
24 -ms-flex: @columns;
25 flex: @columns;
26}
27
28// Flex Flow Direction
29// - applies to: flex containers
30// row | row-reverse | column | column-reverse
31.flex-direction(@direction: row) {
32 -webkit-flex-direction: @direction;
33 -moz-flex-direction: @direction;
34 -ms-flex-direction: @direction;
35 flex-direction: @direction;
36}
37
38// Flex Line Wrapping
39// - applies to: flex containers
40// nowrap | wrap | wrap-reverse
41.flex-wrap(@wrap: nowrap) {
42 -webkit-flex-wrap: @wrap;
43 -moz-flex-wrap: @wrap;
44 -ms-flex-wrap: @wrap;
45 flex-wrap: @wrap;
46}
47
48// Flex Direction and Wrap
49// - applies to: flex containers
50// <flex-direction> || <flex-wrap>
51.flex-flow(@flow) {
52 -webkit-flex-flow: @flow;
53 -moz-flex-flow: @flow;
54 -ms-flex-flow: @flow;
55 flex-flow: @flow;
56}
57
58// Display Order
59// - applies to: flex items
60// <integer>
61.flex-order(@order: 0) {
62 -webkit-order: @order;
63 -moz-order: @order;
64 -ms-order: @order;
65 order: @order;
66}
67
68// Flex grow factor
69// - applies to: flex items
70// <number>
71.flex-grow(@grow: 0) {
72 -webkit-flex-grow: @grow;
73 -moz-flex-grow: @grow;
74 -ms-flex-grow: @grow;
75 flex-grow: @grow;
76}
77
78// Flex shr
79// - applies to: flex itemsink factor
80// <number>
81.flex-shrink(@shrink: 1) {
82 -webkit-flex-shrink: @shrink;
83 -moz-flex-shrink: @shrink;
84 -ms-flex-shrink: @shrink;
85 flex-shrink: @shrink;
86}
87
88// Flex basis
89// - the initial main size of the flex item
90// - applies to: flex itemsnitial main size of the flex item
91// <width>
92.flex-basis(@width: auto) {
93 -webkit-flex-basis: @width;
94 -moz-flex-basis: @width;
95 -ms-flex-basis: @width;
96 flex-basis: @width;
97}
98
99// Axis Alignment
100// - applies to: flex containers
101// flex-start | flex-end | center | space-between | space-around
102.justify-content(@justify: flex-start) {
103 -webkit-justify-content: @justify;
104 -moz-justify-content: @justify;
105 -ms-justify-content: @justify;
106 justify-content: @justify;
107}
108
109// Packing Flex Lines
110// - applies to: multi-line flex containers
111// flex-start | flex-end | center | space-between | space-around | stretch
112.align-content(@align: stretch) {
113 -webkit-align-content: @align;
114 -moz-align-content: @align;
115 -ms-align-content: @align;
116 align-content: @align;
117}
118
119// Cross-axis Alignment
120// - applies to: flex containers
121// flex-start | flex-end | center | baseline | stretch
122.align-items(@align: stretch) {
123 -webkit-align-items: @align;
124 -moz-align-items: @align;
125 -ms-align-items: @align;
126 align-items: @align;
127}
128
129// Cross-axis Alignment
130// - applies to: flex items
131// auto | flex-start | flex-end | center | baseline | stretch
132.align-self(@align: auto) {
133 -webkit-align-self: @align;
134 -moz-align-self: @align;
135 -ms-align-self: @align;
136 align-self: @align;
137}