
Property changes on: .
___________________________________________________________________
Modified: svn:externals
   - fluid-components https://source.fluidproject.org/svn/fluid/components/trunk/src/webapp/fluid-components/

   + fluid-components               https://source.fluidproject.org/svn/fluid/components/trunk/src/webapp/fluid-components/



Index: css/fluid.presentation.css
===================================================================
--- css/fluid.presentation.css	(revision 5384)
+++ css/fluid.presentation.css	(working copy)
@@ -1,14 +1,18 @@
-/** GLOBAL SKINS **/
-/* high contrast */
+/*
+    THEMES:
+    Themes are sets of visual properties that represent items both at rest and in action
+    CSS allows for powerful blending and combinations of visual properties (Cascadence) 
+*/
 
 .-fluid-theme-highContrast h1 {
-    font: bold 3em "Times,serif";
-    color: #fff;
+    font            : bold 3em "Times,serif";
+    color           : #fff;
     background-color: #000;
 }
 
 .-fluid-theme-highContrast h2 {
-    font: bold 2.0em "Times,serif";
-    color: #fff;
+    font            : bold 2.0em "Times,serif";
+    color           : #fff;
     background-color: #000;
 }
+
Index: css/fluid.states.css
===================================================================
--- css/fluid.states.css	(revision 5384)
+++ css/fluid.states.css	(working copy)
@@ -1,8 +1,60 @@
-/** GLOBAL STATES **/
-
-.orderable-drop-marker {
-    background-color : red !important;
-    height:2px !important;
-    padding:0px !important;
-    border-width: 0px !important;
-}
+
+/** COMPONENT GLOBAL STATES **/
+
+/*************************************/
+/* REORDERER */
+/* automatically applied to any re-orderable item */
+.orderable-default {
+    cursor:move;
+} 
+
+/* automatically applied the keyboard selected re-orderable item */
+.orderable-selected {
+	background-color: lightyellow !important;;
+}
+
+/* automatically applied as the mouse hovers over re-orderable item */
+.orderable-hover {
+    background-color: lightyellow !important;;
+}
+
+/* automatically applied the keyboard selected re-orderable item */
+.orderable-dragging {
+    background      :#999 !important;;
+}
+
+
+.orderable-avatar {
+    cursor          : move;
+    list-style-type : none;
+    filter          : progid:DXImageTransform.Microsoft.Alpha(opacity=75);
+    opacity         : 0.75;    
+}
+
+/* DROP MARKER: different layouts might require different drop marker appearances */
+/* Vertical drop marker: designed for vertical layouts */
+.fluid-vertical-order .orderable-drop-marker {
+    background-color: red     !important;
+    height          : 2px     !important;
+    padding         : 0 0 0 0 !important;
+    border-width    : 0       !important;
+    margin          : -2px 0  !important;
+    list-style-type : none;
+    font-size       : 0;
+    line-height     : 0;
+    overflow        : hidden;
+}
+/* Horizontal drop marker: designed for grid or horizontal layouts */
+.fluid-horizontal-order .orderable-drop-marker {
+    background-color: red     !important;
+    width           : 2px     !important;
+    padding         : 0       !important;
+    border-width    : 0       !important;
+    margin          : -2px    !important;
+    list-style-type : none;
+    font-size       : 0;
+    line-height     : 0;
+    overflow        : hidden;
+}
+
+/*************************************/
Index: LayoutCustomizer/LayoutCustomizer.css
===================================================================
--- LayoutCustomizer/LayoutCustomizer.css	(revision 5394)
+++ LayoutCustomizer/LayoutCustomizer.css	(working copy)
@@ -5,17 +5,17 @@
 /* Basic skinning for this component example 1: simple setup */
 .columnSetup1 {font: normal 0.75em Verdana, Arial, sans-serif;}
     .columnSetup1 .myColumn {
-        margin:0 5px;
-        border:1px solid #666;
-        width:30%;    
-        background-color:#ccc;
-        float: left;
+        margin          : 0 5px;
+        border          : 1px solid #666;
+        width           : 30%;    
+        background-color: #ccc;
+        float           : left;
     }
     .columnSetup1 .myColumn div, .mySortable {
-        padding: 10px;
-        border:1px solid;
-        margin:5px;
-        background-color:#fff;     
+        padding         : 10px;
+        border          : 1px solid;
+        margin          : 5px;
+        background-color: #fff;     
     }
     .columnSetup1 .mySortable {
         cursor : move;
@@ -27,22 +27,22 @@
 .columnSetup2 {font: normal 0.75em Verdana, Arial, sans-serif;}
     .columnSetup2 h2 {color:white;}
     .columnSetup2 div {
-        margin:0 5px;
-        border:1px solid #666;
-        width:30%;    
-        background-color:#000;
-        float: left;
+        margin          : 0 5px;
+        border          : 1px solid #666;
+        width           : 30%;    
+        background-color: #000;
+        float           : left;
     }
-    .columnSetup2 div div, .columnSetup2 div p{
-        padding: 10px;
-        border:1px solid #000;
-        margin:5px;
-        width:auto;
-        float:none;
-        background-color:#fff;
-        cursor: not-allowed;
+    .columnSetup2 div div, .columnSetup2 div p {
+        padding         : 10px;
+        border          : 1px solid #000;
+        margin          : 5px;
+        width           : auto;
+        float           : none;
+        background-color: #fff;
+        cursor          : not-allowed;
     }
-    .columnSetup2 div div{
+    .columnSetup2 div div {
         cursor : move;
     }
 
@@ -50,25 +50,22 @@
 /* Basic skinning for this component example 3: complex setup */
 .columnSetup3 {font: normal 0.75em Verdana, Arial, sans-serif;}
     .columnSetup3 .myColumn {
-        margin:0 5px;
-        border:1px solid #666;
-        width:30%;    
-        background-color:#ccc;
-        float: left;
+        margin          : 0 5px;
+        border          : 1px solid #666;
+        width           : 30%;    
+        background-color: #ccc;
+        float           : left;
     }
     .columnSetup3 div div {
-        padding: 10px;
-        border:1px solid;
-        margin:5px;
-        background-color:#fff;
-        cursor : move;
+        padding         : 10px;
+        border          : 1px solid;
+        margin          : 5px;
+        background-color: #fff;
+        cursor          : move;
     }
 
 
-/*
-    local theme options
-    specifically for this component
-*/
+/* local theme options specifically for this component */
 
 
 
Index: LayoutCustomizer/LayoutCustomizer.html
===================================================================
--- LayoutCustomizer/LayoutCustomizer.html	(revision 5394)
+++ LayoutCustomizer/LayoutCustomizer.html	(working copy)
@@ -86,7 +86,7 @@
 	<body>
         <h1>Example 1: A simple set of sortable elements within columns</h1>
         <p>Sortable elements are also sometimes called "portlets".</p>
-        <div id="fluid-LayoutCustomizer-sample1" class="columnSetup1">
+        <div id="fluid-LayoutCustomizer-sample1" class="columnSetup1 fluid-vertical-order">
             <div id="col1" class="myColumn">
                 <h2>Column A</h2>
                 <div id="el1" class="mySortable">Drag me! Content goes here...</div>
@@ -113,7 +113,7 @@
         <h1>Example 2: Another example</h1>
         <p>Unsortable elements mixed with sortable elements, and our high contrast accessbility theme</p>        
         
-        <div id="fluid-LayoutCustomizer-sample2" class="columnSetup2 -fluid-theme-highContrast">
+        <div id="fluid-LayoutCustomizer-sample2" class="columnSetup2 -fluid-theme-highContrast fluid-vertical-order">
             <div id="unique_1">
                 <h2>Column A</h2>
                 <div id="unique_2">Draggable Element</div>
@@ -141,7 +141,7 @@
         <p>The most robust sorting mechanism. Includes permission-based sorting with priorities.</p>
         <p> Only the first item in Column A can be dragged, and it can only be dragged down within 2 units.</p>
 
-        <div id="fluid-LayoutCustomizer-sample3" class="columnSetup3">
+        <div id="fluid-LayoutCustomizer-sample3" class="columnSetup3 fluid-vertical-order">
             <div id="column_1" class="myColumn">
                 <h2>Column A</h2>
                 <div id="sortable_1">Content Portal</div>
