summaryrefslogtreecommitdiff
path: root/frontend/delta/scss/web/flexbox.scss
Unidiff
Diffstat (limited to 'frontend/delta/scss/web/flexbox.scss') (more/less context) (ignore whitespace changes)
-rw-r--r--frontend/delta/scss/web/flexbox.scss138
1 files changed, 138 insertions, 0 deletions
diff --git a/frontend/delta/scss/web/flexbox.scss b/frontend/delta/scss/web/flexbox.scss
new file mode 100644
index 0000000..2b81a65
--- a/dev/null
+++ b/frontend/delta/scss/web/flexbox.scss
@@ -0,0 +1,138 @@
1// --------------------------------------------------
2 //Flexbox LESS mixins
3 //The spec: http://www.w3.org/TR/css3-flexbox
4//
5 //Other info:
6 //- http://philipwalton.github.io/solved-by-flexbox/
7// --------------------------------------------------
8
9// Flexbox display
10// flex or inline-flex
11.flex-display(@display: flex) {
12 display: ~"-webkit-@{display}";
13 display: ~"-moz-@{display}";
14 display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
15 display: ~"-ms-@{display}"; // IE11
16 display: @display;
17}
18
19// The 'flex' shorthand
20// - applies to: flex items
21// <positive-number>, initial, auto, or none
22.flex(@columns: initial) {
23 -webkit-flex: @columns;
24 -moz-flex: @columns;
25 -ms-flex: @columns;
26 flex: @columns;
27}
28
29// Flex Flow Direction
30// - applies to: flex containers
31// row | row-reverse | column | column-reverse
32.flex-direction(@direction: row) {
33 -webkit-flex-direction: @direction;
34 -moz-flex-direction: @direction;
35 -ms-flex-direction: @direction;
36 flex-direction: @direction;
37}
38
39// Flex Line Wrapping
40// - applies to: flex containers
41// nowrap | wrap | wrap-reverse
42.flex-wrap(@wrap: nowrap) {
43 -webkit-flex-wrap: @wrap;
44 -moz-flex-wrap: @wrap;
45 -ms-flex-wrap: @wrap;
46 flex-wrap: @wrap;
47}
48
49// Flex Direction and Wrap
50// - applies to: flex containers
51// <flex-direction> || <flex-wrap>
52.flex-flow(@flow) {
53 -webkit-flex-flow: @flow;
54 -moz-flex-flow: @flow;
55 -ms-flex-flow: @flow;
56 flex-flow: @flow;
57}
58
59// Display Order
60// - applies to: flex items
61// <integer>
62.flex-order(@order: 0) {
63 -webkit-order: @order;
64 -moz-order: @order;
65 -ms-order: @order;
66 order: @order;
67}
68
69// Flex grow factor
70// - applies to: flex items
71// <number>
72.flex-grow(@grow: 0) {
73 -webkit-flex-grow: @grow;
74 -moz-flex-grow: @grow;
75 -ms-flex-grow: @grow;
76 flex-grow: @grow;
77}
78
79// Flex shr
80// - applies to: flex itemsink factor
81// <number>
82.flex-shrink(@shrink: 1) {
83 -webkit-flex-shrink: @shrink;
84 -moz-flex-shrink: @shrink;
85 -ms-flex-shrink: @shrink;
86 flex-shrink: @shrink;
87}
88
89// Flex basis
90// - the initial main size of the flex item
91// - applies to: flex itemsnitial main size of the flex item
92// <width>
93.flex-basis(@width: auto) {
94 -webkit-flex-basis: @width;
95 -moz-flex-basis: @width;
96 -ms-flex-basis: @width;
97 flex-basis: @width;
98}
99
100// Axis Alignment
101// - applies to: flex containers
102// flex-start | flex-end | center | space-between | space-around
103.justify-content(@justify: flex-start) {
104 -webkit-justify-content: @justify;
105 -moz-justify-content: @justify;
106 -ms-justify-content: @justify;
107 justify-content: @justify;
108}
109
110// Packing Flex Lines
111// - applies to: multi-line flex containers
112// flex-start | flex-end | center | space-between | space-around | stretch
113.align-content(@align: stretch) {
114 -webkit-align-content: @align;
115 -moz-align-content: @align;
116 -ms-align-content: @align;
117 align-content: @align;
118}
119
120// Cross-axis Alignment
121// - applies to: flex containers
122// flex-start | flex-end | center | baseline | stretch
123.align-items(@align: stretch) {
124 -webkit-align-items: @align;
125 -moz-align-items: @align;
126 -ms-align-items: @align;
127 align-items: @align;
128}
129
130// Cross-axis Alignment
131// - applies to: flex items
132// auto | flex-start | flex-end | center | baseline | stretch
133.align-self(@align: auto) {
134 -webkit-align-self: @align;
135 -moz-align-self: @align;
136 -ms-align-self: @align;
137 align-self: @align;
138} \ No newline at end of file