[FIX] blocks section menu returns to vertical

bzr revid: nwi@openerp.com-20131010083037-6lzhc5285tpevg3j

1 files changed, 59 insertions, 31 deletions

diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 26838496cc8..ddb860ddd33 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -4,6 +4,17 @@
 @import "compass/css3/user-interface"
 @import "compass/css3/transition"
 
+//smartphones, iPhone, portrait 480x320 phones 
+$smart_phone: 320px
+//portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.*/
+$small-tablet: 481px 
+//portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
+$portrait-tablet: 641px 
+//tablet, landscape iPad, lo-res laptops ands desktops 
+$tablet: 961px
+//big landscape tablets, laptops, and desktops  
+$desktop: 1025px
+
 /* ---- CKEditor Minimal Reset ---- */
 
 .navbar.navbar-inverse .cke_chrome
@@ -146,32 +157,40 @@ table.editorbar-panel
         height: auto
     .scroll
         white-space: nowrap
-        overflow-y: auto
+        overflow-y: none
     .nav
+        display: inline-block
+        border-bottom: none !important
+        vertical-align: middle
+        margin-top: 5px
+        min-width: 120px
+        margin-left: 6px
         > li
-            display: inline-block
+            display: block
             float: none
-            font-size: 13px
+            &.active
+                background: black !important
             > a
                 padding: 2px 10px !important
-                width: 100%
+                width: 100% 
                 display: block
                 border: 0
-        position: fixed
         z-index: 1
+    .pill-content
         border: 0
     .tab-content
-        margin-top: 24px
         display: inline-block
         white-space: nowrap
-        > div
+        background: black
+        margin-top: 5px
+        > div   
             background: rgb(0,0,0)
             padding: 5px
             label
                 width: 44px
-                height: 100%
                 color: #fff
                 padding-left: 10px
+                
                 div
                     width: 100px
                     text-align: center
@@ -179,10 +198,9 @@ table.editorbar-panel
                     @include transform-origin(50% 50%)
 
 .oe_snippet
-    display: inline-block
+    float: left
     vertical-align: top
     width: 100px
-    height: 100px
     margin: 1px
     margin-top: 0px
     position: relative
@@ -197,11 +215,17 @@ table.editorbar-panel
         background: transparent
         color: white
         position: relative
+        &:hover
+            .oe_snippet_thumbnail_img
+                @include transform( scale(.95,.95))
         .oe_snippet_thumbnail_title
             font-size: 12px
             display: block
+            +text-shadow(0 0 2px rgb(0,0,0))
         .oe_snippet_thumbnail_img
+            @include transition(all 150ms linear)
             +box-shadow(inset 0px 0px 0px 3px #333333)
+            @include transform( scale(1,1))
         span, div
             line-height: 18px
     & > :not(.oe_snippet_thumbnail)
@@ -236,14 +260,19 @@ table.editorbar-panel
         position: relative
         margin: 0px -24px !important
     &.oe_overlay
-        background: rgba(153, 0, 255, 0.17)
         border-radius: 3px
-
+        //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px)) 
+        //background-size: 100px 100px
+        background: rgba(153, 0, 255,.5)
+        
 .oe_drop_zone, .oe_drop_zone_style
-    background: rgba(153, 0, 255, 0.17)
-    +border-radius(3px)
+    border: none
+    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px)) 
+    //background-size: 100px 100px
+    background: rgba(153, 0, 255, .3)
+    +border-radius(4px)
     &.oe_hover
-        background: rgba(0, 255, 133, 0.22)
+        background: rgba(0, 255, 133, .3)
         z-index: 1001
 
 .oe_drop_zone_style
@@ -258,6 +287,7 @@ table.editorbar-panel
     display: none
     position: absolute
     background: transparent
+    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px)) 
     +border-radius(3px)
     @include transition(opacity 100ms linear)
     +box-sizing(border-box)
@@ -267,7 +297,7 @@ table.editorbar-panel
         border-style: dashed
         border-width: 1px
         +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset)
-        border-color: rgba(153, 0, 255, 0.5)
+        border-color: rgba(0, 0, 0, 0.5)
         .oe_handle
             display: block !important
             pointer-events: auto
@@ -277,27 +307,29 @@ table.editorbar-panel
                 left: 50%
                 display: block
                 background: rgba(255, 255, 255, 1)
-                border: solid 1px rgba(153, 0, 255, 1)
-                +border-radius(8px)
-                width: 16px
-                height: 16px
-                margin: -8px
+                border: solid 1px rgba(0, 0, 0, .2)
+                +border-radius(5px)
+                width: 18px
+                height: 18px
+                margin: -9px
                 padding-left: 1px
                 font-size: 14px
                 line-height: 14px
-                color: rgba(153, 0, 255, 1)
+                font-family: FontAwesome
+                color: rgba(0,0,0,.5)
                 @include transition(background 100ms linear)
             &:hover:before
-                background: rgba(153, 0, 255, 1)
+                background: rgba(0, 0, 0, .5)
                 color: #fff
+                +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
         .oe_handle.e:before
-            content: "⇨"
+            content: "\F061"
         .oe_handle.s:before
-            content: "⇩"
+            content: "\F063"
         .oe_handle.w:before
-            content: "⇦"
+            content: "\F060"
         .oe_handle.n:before
-            content: "⇧"
+            content: "\F062"
 
     .icon.btn
         display: inline-block
@@ -432,10 +464,6 @@ $ace_width: 720px
 $editorbar_height: 40px
 // TODO Fix => might break with themes
 $navbar_height: 51px
-@mixin pointer-events($type: none)
-    $type: unquote($type)
-    @include experimental(pointer-events, $type,-moz, -webkit, not -o, not -ms, -khtml, official)
-
 
 @mixin editor-font
     font-size: 14px