Diffstat (limited to 'frontend/delta/scss/web/flexbox.scss') (more/less context) (show whitespace changes)
-rw-r--r-- | frontend/delta/scss/web/flexbox.scss | 138 |
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 | ||