Refs #3281: css/elements/core.php for the cross-browser/hacky/non-trivial things...

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

diff --git a/views/default/css/elements/buttons.php b/views/default/css/elements/buttons.php
index 6a2342942dbd3ed9947a7e62762a980f6d2cbd5b..e9c99cf96f828540183178c27df03e830b810b06 100644 (file)
--- 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 bb573f4ec6ee6cfd87a25a35c374b1039cb4616a..0fcbe36198759f2d31a5612965f18a26fb1b8fcd 100644 (file)
--- a/views/default/css/elements/components.php
+++ b/views/default/css/elements/components.php
@@ -20,23 +20,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
 *************************************** */

diff --git a/views/default/css/elements/core.php b/views/default/css/elements/core.php
new file mode 100644 (file)
index 0000000..e99a11e
--- /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 00cd448b9e0fb615fec8a6018a0529dbd0fce286..fdbaf4aca930a5d4afc09cbe2b2895343d79877e 100644 (file)
--- 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 21e3dd984af477b544515952afdee14258fea51e..e6f59260d05dea43e2d91887b9da0a356f897b8a 100644 (file)
--- 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 8bbc919b3c945cbed74d2082be1cdecc0df73890..08948df50fb8a4abc53b2c8ec5614d604486fe7b 100644 (file)
--- 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 d512c36027113b3ae3c3a262cd877519a0b09426..d52938aee8f268b9d71036e5d3ff4ce89225f761 100644 (file)
--- 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 b721240017c6ab0d80f3ca3734b37bb8a065dd2d..25b45bbeea6fd01a749da8468163730fdc2eefbb 100644 (file)
--- a/views/default/css/elements/navigation.php
+++ b/views/default/css/elements/navigation.php
@@ -86,41 +86,6 @@
        background: white;
 }
 
-/* ***************************************
- * 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
 *************************************** */

diff --git a/views/default/css/elgg.php b/views/default/css/elgg.php
index 977eb9f2f0fad7d1f2ec6051ed7f4c856b86edb8..c68ebe323bbe47f524d00e07e1f10057f4da0e23 100644 (file)
--- 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);