Merge pull request #11533 from mrclay/11532_tabs

chore(css): tabs display as tabs on tablets

docs/guides/themes.rst

@@ -66,31 +66,31 @@ Theming Principles and Best Practices
 
 **Mobile first**
 	We write mobile-first CSS.
-	We use one breakpoint, which is ``1280px`` = ``80rem * 16px/rem``
+	We use two breakpoints: ``50rem`` and ``80rem`` (800px and 1280px at 16px/rem).
 
 .. code::css
 
-	/* BAD */
+	/* BAD: mobile defined in media blocks, different display types */
+
 	.menu > li {
 		display: inline-block;
 	}
-
 	@media screen and (max-width: 820px) {
 		.menu > li {
-		 display: block;
-		 width: 100%;
+			display: block;
+			width: 100%;
 		}
 	}
 
-	/* GOOD */
+	/* GOOD: mobile by default. Media blocks style larger viewports. */
+
 	.menu {
 		display: flex;
 		flex-direction: column;
 	}
-
-	@media screen and (min-width: 80rem) {
+	@media screen and (min-width: 50rem) {
 		.menu {
-		 flex-direction: row;
+			flex-direction: row;
 		}
 	}
 

views/default/elements/components/tabs.css

@@ -5,14 +5,14 @@
 .elgg-tabs {
 	margin-bottom: 0.5rem;
 	border-bottom: 1px solid #e6e6ea;
-	width: 100%;
+	display: flex;
+	flex-direction: column;
 }
 
 .elgg-menu-filter > li,
 .elgg-tabs > li {
-	float: left;
 	border: 1px solid #e6e6ea;
-	border-bottom: 0;
+	border-bottom-width: 0;
 	background: #fafafa;
 }
 
@@ -50,16 +50,19 @@
 	background: #ffffff;
 }
 
-@media screen and (min-width: 80rem) {
+@media screen and (min-width: 50rem) {
 	.elgg-menu-filter,
 	.elgg-tabs {
-		display: table;
+		flex-direction: row;
+		flex-wrap: wrap;
 	}
 
 	.elgg-menu-filter > li,
 	.elgg-tabs > li {
+		border-bottom-width: 1px;
 		margin: 0 0 0 0.5rem;
 		border-radius: 3px 3px 0 0;
+		position: relative;
+		top: 1px;
 	}
-
 }