Refs #3281: css/elements/core.php for the cross-browser/hacky/non-trivial things that themes should rarely, if ever, override.

git-svn-id: http://code.elgg.org/elgg/trunk@8975 36083f99-b078-4883-b0ff-0f9b5a30f544

9 files changed, 103 insertions, 93 deletions

diff --git a/views/default/css/elements/buttons.php b/views/default/css/elements/buttons.php
index 6a2342942..e9c99cf96 100644
--- a/views/default/css/elements/buttons.php
+++ b/views/default/css/elements/buttons.php
@@ -19,7 +19,6 @@
 	-moz-border-radius: 5px;
 	border-radius: 5px;
 
-	display: inline-block;
 	width: auto;
 	padding: 2px 4px;
 	cursor: pointer;
diff --git a/views/default/css/elements/components.php b/views/default/css/elements/components.php
index bb573f4ec..0fcbe3619 100644
--- a/views/default/css/elements/components.php
+++ b/views/default/css/elements/components.php
@@ -21,23 +21,6 @@
 ?>
 
 /* ***************************************
-	Body
-*************************************** */
-.elgg-body {
-	width: auto;
-	word-wrap: break-word;
-	overflow: hidden;
-}
-.elgg-body:after {
-	display: block;
-	visibility: hidden;
-	height: 0 !important;
-	line-height: 0;
-	font-size: xx-large;
-	content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
-}
-
-/* ***************************************
 	Image Block
 *************************************** */
 .elgg-image-block {
diff --git a/views/default/css/elements/core.php b/views/default/css/elements/core.php
new file mode 100644
index 000000000..e99a11e13
--- /dev/null
+++ b/views/default/css/elements/core.php
@@ -0,0 +1,101 @@
+<?php
+/**
+ * Core CSS
+ * 
+ * This file holds all the complicated/hacky stuff that you really
+ * shouldn't touch or override unless you're sure you know what you're doing.
+ * 
+ * Provides classes that implement cross-browser support for the following features:
+ *   * clearfix
+ *   * fluid-width content area that doesn't wrap around floats
+ *   * menu's with separators
+ *   * inline-block
+ *   * horizontal menus
+ *   * fluid gallery without using tables
+ */
+?>
+
+/* Clearfix */
+.clearfix:after,
+.elgg-grid:after,
+.elgg-layout:after {
+	content: ".";
+	display: block;
+	height: 0;
+	clear: both;
+	visibility: hidden;	
+}
+
+/* Fluid width container that does not wrap floats */
+.elgg-body,
+.elgg-col-last {
+	display: block;
+	width: auto;
+	word-wrap: break-word;
+	overflow: hidden;
+	
+	/* IE 6, 7 */
+	zoom:1;
+	*overflow:visible;
+}
+
+<?php //@todo isn't this only needed if we use display:table-cell? ?>
+.elgg-body:after,
+.elgg-col-last:after {
+	display: block;
+	visibility: hidden;
+	height: 0 !important;
+	line-height: 0;
+	
+	/* Stretch to fill up available space */
+	font-size: xx-large;
+	content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
+}
+
+/* ***************************************
+ * MENUS
+ *
+ * To add separators to a menu:
+ * .elgg-menu-$menu > li:after {content: '|'; background: ...;}
+ *************************************** */
+/* Enabled nesting of dropdown/flyout menus */
+.elgg-menu > li { position: relative; }
+
+/* Separators should only come between list items */
+.elgg-menu > li:last-child:after { display: none } 
+
+/* Maximize click target */
+.elgg-menu > li > a { display: block }
+
+/* Horizontal menus w/ separator support */
+.elgg-menu-hz > li,
+.elgg-menu-hz > li:after,
+.elgg-menu-hz > li > a,
+.elgg-menu-hz > li > span {
+	vertical-align: middle;
+}
+
+/* Allow inline image blocks in horizontal menus */
+.elgg-menu-hz .elgg-body:after { content: '.'; }
+
+<?php //@todo This isn't going to work as-is.  Needs testing ?>
+/* Inline block */
+.elgg-gallery > li,
+.elgg-button,
+.elgg-icon,
+.elgg-menu-hz > li,
+.elgg-menu-hz > li:after,
+.elgg-menu-hz > li > a,
+.elgg-menu-hz > li > span {
+	/* Google says do this, but why? */
+	position: relative;
+	
+	/* FF2 */
+	display: -moz-inline-box;
+
+	display: inline-block;
+	
+	/* Inline-block: IE 6, 7 */
+	zoom: 1;
+	*display: inline;
+}
\ No newline at end of file
diff --git a/views/default/css/elements/grid.php b/views/default/css/elements/grid.php
index 00cd448b9..fdbaf4aca 100644
--- a/views/default/css/elements/grid.php
+++ b/views/default/css/elements/grid.php
@@ -13,14 +13,6 @@
 /* ***************************************
 	GRID
 *************************************** */
-.elgg-grid:after {
-	content: ".";
-	display: block;
-	height: 0;
-	clear: both;
-	visibility: hidden;
-}
-
 .elgg-col {
 	float: left;
 }
@@ -60,18 +52,3 @@
 .elgg-col-5of6 {
 	width: 83.33%;
 }
-.elgg-col-last {
-	width: auto;
-	float: none;
-	display: table-cell;
-}
-.elgg-col-last:after {
-	clear: both;
-	display: block;
-	visibility: hidden;
-	overflow: hidden;
-	height: 0 !important;
-	line-height: 0;
-	font-size: xx-large;
-	content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
-}
diff --git a/views/default/css/elements/helpers.php b/views/default/css/elements/helpers.php
index 21e3dd984..e6f59260d 100644
--- a/views/default/css/elements/helpers.php
+++ b/views/default/css/elements/helpers.php
@@ -13,14 +13,6 @@
 	clear: both;
 }
 
-.clearfix:after {
-	content: ".";
-	display: block;
-	height: 0;
-	clear: both;
-	visibility: hidden;
-}
-
 .hidden {
 	display: none;
 }
diff --git a/views/default/css/elements/icons.php b/views/default/css/elements/icons.php
index 8bbc919b3..08948df50 100644
--- a/views/default/css/elements/icons.php
+++ b/views/default/css/elements/icons.php
@@ -16,7 +16,6 @@
 	background: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat left;
 	width: 16px;
 	height: 16px;
-	display: inline-block;
 	margin: 0 2px;
 }
 .elgg-icon-arrow-left {
diff --git a/views/default/css/elements/layout.php b/views/default/css/elements/layout.php
index d512c3602..d52938aee 100644
--- a/views/default/css/elements/layout.php
+++ b/views/default/css/elements/layout.php
@@ -72,14 +72,6 @@
 .elgg-layout {
 	min-height: 360px;
 }
-<?php // elgg-layout gets clearfix ?>
-.elgg-layout:after {
-	content: ".";
-	display: block;
-	height: 0;
-	clear: both;
-	visibility: hidden;
-}
 .elgg-layout-one-column {
 	padding: 10px 0;
 }
diff --git a/views/default/css/elements/navigation.php b/views/default/css/elements/navigation.php
index b72124001..25b45bbee 100644
--- a/views/default/css/elements/navigation.php
+++ b/views/default/css/elements/navigation.php
@@ -87,41 +87,6 @@
 }
 
 /* ***************************************
- * MENUS
- *
- * To add separators to a menu:
- * .elgg-menu-$menu > li:after {content: '|'; background: ...;}
- *************************************** */
-/* For dropdown/flyout menus */
-.elgg-menu > li {
-	position: relative;
-} 
-
-/* For separators */
-.elgg-menu > li:last-child:after {
-	display: none
-} 
-
-/* Maximize click target */
-.elgg-menu > li > a {
-	display: block
-}
-
-/* Horizontal menus w/ separator support */
-.elgg-menu-hz > li,
-.elgg-menu-hz > li:after,
-.elgg-menu-hz > li > a,
-.elgg-menu-hz > li > span {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-/* Allow inline image blocks in horizontal menus */
-.elgg-menu-hz .elgg-body:after {
-	content: '.';
-}
-
-/* ***************************************
 	BREADCRUMBS
 *************************************** */
 .elgg-breadcrumbs {
diff --git a/views/default/css/elgg.php b/views/default/css/elgg.php
index 977eb9f2f..c68ebe323 100644
--- a/views/default/css/elgg.php
+++ b/views/default/css/elgg.php
@@ -25,11 +25,13 @@ if ($old_css_view != elgg_get_config('viewpath')) {
 
 Base CSS
  * CSS reset
+ * core
  * helpers
  * grid
 
 *******************************************************************************/
 echo elgg_view('css/elements/reset', $vars);
+echo elgg_view('css/elements/core', $vars);
 echo elgg_view('css/elements/helpers', $vars);
 echo elgg_view('css/elements/grid', $vars);