W3C home > Mailing lists > Public > public-css-commits@w3.org > January 2012

csswg/css3-flexbox Overview.html,1.93,1.94 Overview.src.html,1.93,1.94 flex-order-example.html,1.1,1.2

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Wed, 18 Jan 2012 02:37:36 +0000
To: public-css-commits@w3.org
Message-Id: <E1RnLP6-0005SR-7g@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv20965

Modified Files:
	Overview.html Overview.src.html flex-order-example.html 
Log Message:
Add example showing tab-reordering using flex-order.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.93
retrieving revision 1.94
diff -u -d -r1.93 -r1.94
--- Overview.html	18 Jan 2012 00:59:43 -0000	1.93
+++ Overview.html	18 Jan 2012 02:37:33 -0000	1.94
@@ -924,7 +924,27 @@
     <button>Three</button></div>
   </div>
 
-  <p class=issue>Add a realistic example of tab reordering.
+  <div class=example>
+   <p>The following figure shows a simple tabbed interface, where the tab for
+    the active pane is always in front:</p>
+
+   <div class=figure><img src="images/flex-order-example.png"></div>
+
+   <p>This could be implemented with the following CSS (showing only the
+    flexbox-relevant code):</p>
+
+   <pre>
+.tabs {
+	display: flexbox;
+}
+.tabs > .current {
+	flex-order: -1; /* Lower than the default of 0 */
+}</pre>
+
+   <p>You can also see a <a href=flex-order-example.html>working example</a>
+    in some modern browsers (modern WebKit, Firefox, or any browser that
+    supports the Flexbox spec).</p>
+  </div>
 
   <p class=issue>Add an example of reordering columns in a page.
 

Index: flex-order-example.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/flex-order-example.html,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- flex-order-example.html	18 Jan 2012 02:13:59 -0000	1.1
+++ flex-order-example.html	18 Jan 2012 02:37:34 -0000	1.2
@@ -32,20 +32,16 @@
 	border: 2px solid;
 	border-bottom: none;
 	cursor: pointer;
-	-moz-box-ordinal-group: 2;
-	-webkit-box-ordinal-group: 2;
-	-webkit-flex-order: 2;
-	flex-order: 2;
 }
 .tabs > li.current {
 	color: black;
 	border-bottom: 2px solid transparent;
 	position: relative;
 	bottom: -2px;
-	-moz-box-ordinal-group: 1;
-	-webkit-box-ordinal-group: 1;
-	-webkit-flex-order: 1;
-	flex-order: 1;
+	-moz-box-ordinal-group: 0;
+	-webkit-box-ordinal-group: 0;
+	-webkit-flex-order: -1;
+	flex-order: -1;
 }
 .cards {
 	border: 2px solid;

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.93
retrieving revision 1.94
diff -u -d -r1.93 -r1.94
--- Overview.src.html	18 Jan 2012 00:59:43 -0000	1.93
+++ Overview.src.html	18 Jan 2012 02:37:34 -0000	1.94
@@ -413,7 +413,23 @@
 		</div>
 	</div>
 
-	<p class='issue'>Add a realistic example of tab reordering.</p>
+	<div class='example'>
+		<p>The following figure shows a simple tabbed interface, where the tab for the active pane is always in front:</p>
+
+		<div class='figure'><img src="images/flex-order-example.png"></div>
+
+		<p>This could be implemented with the following CSS (showing only the flexbox-relevant code):</p>
+
+		<pre>
+.tabs {
+	display: flexbox;
+}
+.tabs > .current {
+	flex-order: -1; /* Lower than the default of 0 */
+}</pre>
+
+		<p>You can also see a <a href="flex-order-example.html">working example</a> in some modern browsers (modern WebKit, Firefox, or any browser that supports the Flexbox spec).</p>
+	</div>
 
 	<p class='issue'>Add an example of reordering columns in a page.</p>
 
Received on Wednesday, 18 January 2012 02:37:37 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:26:09 UTC