[IMP] Use more compass mixins

bzr revid: nwi@openerp.com-20131004084302-0goiqm0bq7v8up18

2 files changed, 70 insertions, 28 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 51ed40bcf42..8c12e47b5a9 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -24,9 +24,9 @@
 .navbar.navbar-inverse .cke_top {
   background: transparent;
   border: none;
-  box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
+  box-shadow: none;
 }
 
 /* ---- OpenERP Style ---- */
@@ -44,6 +44,8 @@
   background: #414141, -moz-linear-gradient(#646060, #262626);
   background: #414141, -o-linear-gradient(#646060, #262626);
   background: #414141, linear-gradient(#646060, #262626);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 .oe_website_editorbar li {
@@ -165,6 +167,8 @@ table.editorbar-panel td.selected {
   right: 0px;
   top: 50px;
   background: #282828;
+  -webkit-box-shadow: 0px 10px 10px -10px black inset;
+  -moz-box-shadow: 0px 10px 10px -10px black inset;
   box-shadow: 0px 10px 10px -10px black inset;
   z-index: 1010;
   overflow: hidden;
@@ -231,6 +235,7 @@ table.editorbar-panel td.selected {
   position: relative;
   overflow: hidden;
   -webkit-user-select: none;
+  -moz-user-select: none;
   user-select: none;
   cursor: move;
   pointer-events: none;
@@ -248,6 +253,8 @@ table.editorbar-panel td.selected {
   display: block;
 }
 .oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img {
+  -webkit-box-shadow: inset 0px 0px 0px 3px #333333;
+  -moz-box-shadow: inset 0px 0px 0px 3px #333333;
   box-shadow: inset 0px 0px 0px 3px #333333;
 }
 .oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div {
@@ -303,6 +310,10 @@ table.editorbar-panel td.selected {
 
 .oe_drop_zone, .oe_drop_zone_style {
   background: rgba(153, 0, 255, 0.17);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
   border-radius: 3px;
 }
 .oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
@@ -321,11 +332,17 @@ table.editorbar-panel td.selected {
   display: none;
   position: absolute;
   background: transparent;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
   border-radius: 3px;
   -webkit-transition: opacity 100ms linear;
   -moz-transition: opacity 100ms linear;
   -o-transition: opacity 100ms linear;
   transition: opacity 100ms linear;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
   pointer-events: none;
 }
@@ -333,6 +350,8 @@ table.editorbar-panel td.selected {
   display: block;
   border-style: dashed;
   border-width: 1px;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
   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);
 }
@@ -347,6 +366,10 @@ table.editorbar-panel td.selected {
   display: block;
   background: white;
   border: solid 1px #9900ff;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
   border-radius: 8px;
   width: 16px;
   height: 16px;
@@ -407,6 +430,8 @@ table.editorbar-panel td.selected {
   top: 50%;
   left: 50%;
   display: block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
   width: 8px;
   height: 8px;
@@ -468,6 +493,10 @@ table.editorbar-panel td.selected {
   height: 660px;
   background-color: black;
   border: 2px solid #1c1f1f;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
   border-radius: 10px;
   margin: auto;
   top: 0;
@@ -479,7 +508,11 @@ table.editorbar-panel td.selected {
 .oe_mobile_preview.modal .modal-content .modal-header {
   background-color: black;
   border-bottom: 0;
+  -moz-border-radius-topleft: 10px;
+  -webkit-border-top-left-radius: 10px;
   border-top-left-radius: 10px;
+  -moz-border-radius-topright: 10px;
+  -webkit-border-top-right-radius: 10px;
   border-top-right-radius: 10px;
 }
 .oe_mobile_preview.modal .modal-content .modal-header .modal-title {
@@ -487,10 +520,12 @@ table.editorbar-panel td.selected {
 }
 .oe_mobile_preview.modal .modal-content .modal-header .close {
   color: lightgrey;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1;
 }
 .oe_mobile_preview.modal .modal-content .modal-header .close:hover {
   color: #e00101;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1;
 }
 .oe_mobile_preview.modal .modal-content .modal-body {
@@ -521,10 +556,14 @@ table.editorbar-panel td.selected {
 }
 .oe_seo_configuration .oe_seo_keyword {
   padding: 0.2em 0.4em 0.2em 0.5em;
+  -webkit-border-radius: 0.4em;
+  -moz-border-radius: 0.4em;
+  -ms-border-radius: 0.4em;
+  -o-border-radius: 0.4em;
   border-radius: 0.4em;
 }
 .oe_seo_configuration .keyword-in-title {
-  background-color: #5cb85c;
+  background-color: #5cb85cpointer;
   color: white;
 }
 .oe_seo_configuration .keyword-in-description {
@@ -542,6 +581,7 @@ table.editorbar-panel td.selected {
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
   opacity: 0.3;
   position: fixed;
   top: 51px;
@@ -579,6 +619,7 @@ table.editorbar-panel td.selected {
   width: 720px;
 }
 .oe_ace_view_editor:hover {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1;
 }
 .oe_ace_view_editor.oe_ace_open {
@@ -586,5 +627,6 @@ table.editorbar-panel td.selected {
 }
 .oe_ace_view_editor.oe_ace_closed {
   width: 0;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
 }
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index e74c81932a4..66bbb988016 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -26,9 +26,7 @@
 .navbar.navbar-inverse .cke_top
     background: transparent
     border: none
-    box-shadow: none
-    -webkit-box-shadow: none
-    -moz-box-shadow: none
+    +box-shadow(none)
 
 /* ---- OpenERP Style ---- */
 
@@ -42,13 +40,13 @@
     margin: 0
     z-index: 20000
     @include background(#414141, linear-gradient(#646060, #262626))
-    box-sizing: border-box
+    +box-sizing(border-box)
     li
         display: inline
         color: #eee
         &:hover
             background: rgba(0,0,0,0.2)
-            text-shadow: black 0px 0px 3px
+            +text-shadow(black 0px 0px 3px)
             color: white
 
 .oe_website_editorbar .oe_rte_toolbar
@@ -141,7 +139,7 @@ table.editorbar-panel
     right: 0px
     top: 50px
     background: rgb(40,40,40)
-    box-shadow: 0px 10px 10px -10px black inset
+    +box-shadow(0px 10px 10px -10px black inset)
     z-index: 1010
     overflow: hidden
     &:hover
@@ -188,8 +186,7 @@ table.editorbar-panel
     margin-top: 0px
     position: relative
     overflow: hidden
-    -webkit-user-select: none
-    user-select: none
+    +user-select(none)
     cursor: move
     pointer-events: none
     .oe_snippet_thumbnail
@@ -203,7 +200,7 @@ table.editorbar-panel
             font-size: 12px
             display: block
         .oe_snippet_thumbnail_img
-            box-shadow: inset 0px 0px 0px 3px #333333
+            +box-shadow(inset 0px 0px 0px 3px #333333)
         span, div
             line-height: 18px
     & > :not(.oe_snippet_thumbnail)
@@ -243,7 +240,7 @@ table.editorbar-panel
 
 .oe_drop_zone, .oe_drop_zone_style
     background: rgba(153, 0, 255, 0.17)
-    border-radius: 3px
+    +border-radius(3px)
     &.oe_hover
         background: rgba(0, 255, 133, 0.22)
         z-index: 1001
@@ -259,15 +256,15 @@ table.editorbar-panel
     display: none
     position: absolute
     background: transparent
-    border-radius: 3px
+    +border-radius(3px)
     @include transition(opacity 100ms linear)
-    box-sizing: border-box
+    +box-sizing(border-box)
     pointer-events: none
     &.oe_active
         display: block
         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
+        +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)
         .oe_handle
             display: block !important
@@ -279,7 +276,7 @@ table.editorbar-panel
                 display: block
                 background: rgba(255, 255, 255, 1)
                 border: solid 1px rgba(153, 0, 255, 1)
-                border-radius: 8px
+                +border-radius(8px)
                 width: 16px
                 height: 16px
                 margin: -8px
@@ -326,7 +323,7 @@ table.editorbar-panel
     top: 50%
     left: 50%
     display: block
-    box-sizing: border-box
+    +box-sizing(border-box)
     width: 8px
     height: 8px
     margin: -4px
@@ -376,7 +373,7 @@ $icon_close: #E00101
         height: 660px
         background-color: $mobile_preview_background
         border: 2px solid $mobile_preview_border
-        border-radius: 10px
+        +border-radius(10px)
         margin: auto
         top: 0
         left: 0
@@ -386,16 +383,16 @@ $icon_close: #E00101
         .modal-header
             background-color: $mobile_preview_background
             border-bottom: 0
-            border-top-left-radius: 10px
-            border-top-right-radius: 10px
+            +border-top-left-radius(10px)
+            +border-top-right-radius(10px)
             .modal-title
                 color: $mobile_preview_border
             .close
                 color: lightgrey
-                opacity: 1
+                +opacity(1)
             .close:hover
                 color: $icon_close
-                opacity: 1
+                +opacity(1)
         .modal-body
             background-color: $mobile_preview_background
             max-height: 600px
@@ -425,9 +422,9 @@ $highlighted_text_color: #ffffff
         cursor: pointer
     .oe_seo_keyword
         padding: .2em .4em .2em .5em
-        border-radius: .4em
+        +border-radius(.4em)
     .keyword-in-title
-        background-color: $in_title_color
+        background-color: $in_title_color+pointer
         color: $highlighted_text_color
     .keyword-in-description
         background-color: $in_description_color
@@ -442,6 +439,10 @@ $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
@@ -449,7 +450,7 @@ $navbar_height: 51px
     line-height: normal
 .oe_ace_view_editor
     @include transition(all 0.2s ease-in)
-    opacity: 0.3
+    +opacity(0.3)
     position: fixed
     top: $navbar_height
     right: 0
@@ -477,11 +478,10 @@ $navbar_height: 51px
         left: 0
         width: $ace_width
     &:hover
-        opacity: 1
+        +opacity(1)
     &.oe_ace_open
         width: $ace_width
     &.oe_ace_closed
         width: 0
-        opacity: 0
-
+        +opacity(0)
 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: