Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 3e45307

Browse files
ajoslinajoslin
committed
feat(layout): add flex-order-{sm,gt-sm,md,gt-md,lg,gt-lg} attributes
1 parent a2bc3c6 commit 3e45307

3 files changed

Lines changed: 85 additions & 39 deletions

File tree

‎docs/app/partials/layout-grid.tmpl.html‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,37 @@
8282
</docs-demo>
8383
<p>
8484
Add the <code>flex-order</code> attribute to a layout child to set its
85-
position within the layout.
85+
position within the layout. Any value from 0-9 is accepted.
8686
</p>
87+
<table>
88+
<tr>
89+
<td>flex-order</td>
90+
<td>Sets element order.</td>
91+
</tr>
92+
<tr>
93+
<td>flex-order-sm</td>
94+
<td>Sets element order on devices less than 600px wide.</td>
95+
</tr>
96+
<tr>
97+
<td>flex-order-gt-sm</td>
98+
<td>Sets element order on devices greater than 600px wide.</td>
99+
</tr>
100+
<tr>
101+
<td>flex-order-md</td>
102+
<td>Sets element order on devices between 600px and 960px wide.</td>
103+
</tr>
104+
<tr>
105+
<td>flex-order-gt-md</td>
106+
<td>Sets element order on devices greater than 960px wide.
107+
</tr>
108+
<tr>
109+
<td>flex-order-lg</td>
110+
<td>Sets element order on devices between 960px and 1200px wide.</td>
111+
</tr>
112+
<tr>
113+
<td>flex-order-gt-lg</td>
114+
<td>Sets element order on devices greater than 1200px wide.</td>
115+
</tr>
116+
</table>
87117
</div>
88118

‎docs/app/partials/layout-options.tmpl.html‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -21,29 +21,36 @@
2121
other <code>layout</code> attributes available:
2222
</p>
2323

24-
<ul>
25-
<li>
26-
<code>layout</code> sets the default layout on all devices.
27-
</li>
28-
<li>
29-
<code>layout-sm</code> sets the layout on devices less than 600px wide (phones).
30-
</li>
31-
<li>
32-
<code>layout-gt-sm</code> sets the layout on devices greater than 600px wide (bigger than phones).
33-
</li>
34-
<li>
35-
<code>layout-md</code> sets the layout on devices between 600px and 960px wide (tablets in portrait).
36-
</li>
37-
<li>
38-
<code>layout-gt-md</code> sets the layout on devices greater than 960px wide (bigger than tablets in portrait).
39-
</li>
40-
<li>
41-
<code>layout-lg</code> sets the layout on devices between 960 and 1200px wide (tablets in landscape).
42-
</li>
43-
<li>
44-
<code>layout-gt-lg</code> sets the layout on devices greater than 1200px wide (computers and large screens).
45-
</li>
46-
</ul>
24+
<table>
25+
<tr>
26+
<td>layout</td>
27+
<td>Sets the default layout on all devices.</td>
28+
</tr>
29+
<tr>
30+
<td>layout-sm</td>
31+
<td>Sets the layout on devices less than 600px wide (phones).</td>
32+
</tr>
33+
<tr>
34+
<td>layout-gt-sm</td>
35+
<td>Sets the layout on devices greater than 600px wide (bigger than phones).</td>
36+
</tr>
37+
<tr>
38+
<td>layout-md</td>
39+
<td>Sets the layout on devices between 600px and 960px wide (tablets in portrait).</td>
40+
</tr>
41+
<tr>
42+
<td>layout-gt-md</td>
43+
<td>Sets the layout on devices greater than 960px wide (bigger than tablets in portrait).</td>
44+
</tr>
45+
<tr>
46+
<td>layout-lg</td>
47+
<td>Sets the layout on devices between 960 and 1200px wide (tablets in landscape).</td>
48+
</tr>
49+
<tr>
50+
<td>layout-gt-lg</td>
51+
<td>Sets the layout on devices greater than 1200px wide (computers and large screens).</td>
52+
</tr>
53+
</table>
4754
<br/>
4855

4956
<md-divider></md-divider>

‎src/core/style/layout.scss‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,23 @@
4949
}
5050
}
5151

52+
@mixin flex-order-for-name($suffix: null) {
53+
$selector: 'flex-order';
54+
@if $suffix != null {
55+
$selector: 'flex-order-#{$suffix}';
56+
}
57+
[#{$selector}="0"] { order: 0; }
58+
[#{$selector}="1"] { order: 1; }
59+
[#{$selector}="2"] { order: 2; }
60+
[#{$selector}="3"] { order: 3; }
61+
[#{$selector}="4"] { order: 4; }
62+
[#{$selector}="5"] { order: 5; }
63+
[#{$selector}="6"] { order: 6; }
64+
[#{$selector}="7"] { order: 7; }
65+
[#{$selector}="8"] { order: 8; }
66+
[#{$selector}="9"] { order: 9; }
67+
}
68+
5269
@mixin layout-for-name($name) {
5370
[layout-#{$name}] {
5471
box-sizing: border-box;
@@ -192,6 +209,7 @@
192209

193210
@include flex-properties-for-name();
194211
@include layout-align-for-name();
212+
@include flex-order-for-name();
195213

196214
[hide]:not([show]) {
197215
display: none;
@@ -204,6 +222,7 @@
204222
}
205223
}
206224

225+
@include flex-order-for-name(sm);
207226
@include layout-align-for-name(sm);
208227
@include layout-for-name(sm);
209228
@include flex-properties-for-name(sm);
@@ -215,6 +234,7 @@
215234
}
216235
}
217236

237+
@include flex-order-for-name(gt-sm);
218238
@include layout-align-for-name(gt-sm);
219239
@include layout-for-name(gt-sm);
220240
@include flex-properties-for-name(gt-sm);
@@ -227,6 +247,7 @@
227247
}
228248
}
229249

250+
@include flex-order-for-name(md);
230251
@include layout-align-for-name(md);
231252
@include layout-for-name(md);
232253
@include flex-properties-for-name(md);
@@ -238,6 +259,7 @@
238259
}
239260
}
240261

262+
@include flex-order-for-name(gt-md);
241263
@include layout-align-for-name(gt-md);
242264
@include layout-for-name(gt-md);
243265
@include flex-properties-for-name(gt-md);
@@ -250,6 +272,7 @@
250272
}
251273
}
252274

275+
@include flex-order-for-name(lg);
253276
@include layout-align-for-name(lg);
254277
@include layout-for-name(lg);
255278
@include flex-properties-for-name(lg);
@@ -261,22 +284,8 @@
261284
}
262285
}
263286

287+
@include flex-order-for-name(gt-lg);
264288
@include layout-align-for-name(gt-lg);
265289
@include layout-for-name(gt-lg);
266290
@include flex-properties-for-name(gt-lg);
267291
}
268-
269-
270-
271-
// Order attributes for layout children
272-
// ------------------------------
273-
[flex-order="0"] { order: 0; }
274-
[flex-order="1"] { order: 1; }
275-
[flex-order="2"] { order: 2; }
276-
[flex-order="3"] { order: 3; }
277-
[flex-order="4"] { order: 4; }
278-
[flex-order="5"] { order: 5; }
279-
[flex-order="6"] { order: 6; }
280-
[flex-order="7"] { order: 7; }
281-
[flex-order="8"] { order: 8; }
282-
[flex-order="9"] { order: 9; }

0 commit comments

Comments
 (0)