[IMP] website snippet: icones goto parent snippet, clean css, unactive snippet when click outside

bzr revid: chm@openerp.com-20131203100449-7ups314ffru0kobh

1 files changed, 57 insertions, 51 deletions

diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 1e35c352374..2c775be3b04 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -331,37 +331,66 @@ ul.oe_menu_editor
         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(0, 0, 0, 0.5)
-        .oe_handle
-            display: block !important
-            pointer-events: auto
-            &:before
-                position: relative
-                top: 50%
-                left: 50%
-                display: block
-                background: rgba(255, 255, 255, 1)
-                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
-                font-family: FontAwesome
-                color: rgba(0,0,0,.5)
-                @include transition(background 100ms linear)
-            &:hover:before
-                background: rgba(0, 0, 0, .5)
-                color: #fff
-                +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
-        .oe_handle.e:before
+    .oe_handle
+        display: block !important
+        pointer-events: auto
+        position: absolute
+        top: 50%
+        left: 50%
+        +box-sizing(border-box)
+        width: 12px
+        height: 12px
+        margin: -2px
+        &:before
+            position: relative
+            top: 50%
+            left: 50%
+            display: block
+            background: rgba(255, 255, 255, 1)
+            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
+            font-family: FontAwesome
+            color: rgba(0,0,0,.5)
+            @include transition(background 100ms linear)
+        &:hover:before
+            background: rgba(0, 0, 0, .5)
+            color: #fff
+            +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
+    .oe_handle.e
+        left: auto
+        top: 2px
+        height: 100%
+        right: -4px
+        cursor: w-resize
+        &:before
             content: "\F061"
-        .oe_handle.s:before
+    .oe_handle.s
+        top: auto
+        left: 2px
+        width: 100%
+        bottom: -4px
+        cursor: n-resize
+        &:before
             content: "\F063"
-        .oe_handle.w:before
+    .oe_handle.w
+        top: 2px
+        height: 100%
+        left: -4px
+        cursor: e-resize
+        &:before
             content: "\F060"
-        .oe_handle.n:before
+    .oe_handle.n
+        left: 2px
+        width: 100%
+        top: -4px
+        cursor: s-resize
+        &:before
             content: "\F062"
 
     .icon.btn
@@ -395,29 +424,6 @@ ul.oe_menu_editor
     height: 8px
     margin: -4px
 
-.oe_handle.n
-    left: 2px
-    width: 100%
-    top: 0px
-    cursor: s-resize
-.oe_handle.e
-    left: auto
-    top: 2px
-    height: 100%
-    right: 0px
-    cursor: w-resize
-.oe_handle.s
-    top: auto
-    left: 2px
-    width: 100%
-    bottom: 0px
-    cursor: n-resize
-.oe_handle.w
-    top: 2px
-    height: 100%
-    left: 0px
-    cursor: e-resize
-
 .s-resize-important, .s-resize-important *
     cursor: s-resize !important
 .n-resize-important, .n-resize-important *