[IMP] compass all the things

bzr revid: xmo@openerp.com-20131002112216-sjfvkg2ja0aoss2v

2 files changed, 32 insertions, 30 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 3729775cf73..51ed40bcf42 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -39,8 +39,11 @@
   padding: 2px;
   margin: 0;
   z-index: 20000;
-  background-color: #414141;
-  background: -webkit-linear-gradient(#646060, #262626);
+  background: #414141, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646060), color-stop(100%, #262626));
+  background: #414141, -webkit-linear-gradient(#646060, #262626);
+  background: #414141, -moz-linear-gradient(#646060, #262626);
+  background: #414141, -o-linear-gradient(#646060, #262626);
+  background: #414141, linear-gradient(#646060, #262626);
   box-sizing: border-box;
 }
 .oe_website_editorbar li {
@@ -136,8 +139,6 @@ table.editorbar-panel td.selected {
 .oe_editable .btn {
   -webkit-user-select: auto;
   -moz-user-select: auto;
-  -ms-user-select: auto;
-  -o-user-select: auto;
   user-select: auto;
 }
 
@@ -257,8 +258,11 @@ table.editorbar-panel td.selected {
 }
 
 #oe_snippets .oe_snippet_thumbnail {
-  background: #747474;
-  background-image: radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+  background: #747474, -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(0, 0, 0, 0.25)), color-stop(100%, rgba(0, 0, 0, 0.4)));
+  background: #747474, -webkit-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+  background: #747474, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+  background: #747474, -o-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+  background: #747474, radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
 }
 
 /* ---- SNIPPETS DROP ZONES ---- */
@@ -269,6 +273,9 @@ table.editorbar-panel td.selected {
   margin-top: -4px;
   margin-bottom: -44px;
   -webkit-transition: margin 250ms linear;
+  -moz-transition: margin 250ms linear;
+  -o-transition: margin 250ms linear;
+  transition: margin 250ms linear;
   width: 100%;
   position: absolute;
   z-index: 1000;
@@ -315,6 +322,9 @@ table.editorbar-panel td.selected {
   position: absolute;
   background: transparent;
   border-radius: 3px;
+  -webkit-transition: opacity 100ms linear;
+  -moz-transition: opacity 100ms linear;
+  -o-transition: opacity 100ms linear;
   transition: opacity 100ms linear;
   box-sizing: border-box;
   pointer-events: none;
@@ -346,6 +356,9 @@ table.editorbar-panel td.selected {
   line-height: 14px;
   color: #9900ff;
   -webkit-transition: background 100ms linear;
+  -moz-transition: background 100ms linear;
+  -o-transition: background 100ms linear;
+  transition: background 100ms linear;
 }
 .oe_overlay.oe_active .oe_handle:hover:before {
   background: #9900ff;
@@ -454,9 +467,8 @@ table.editorbar-panel td.selected {
 .oe_mobile_preview.modal .modal-content {
   height: 660px;
   background-color: black;
-  border: 2px solid;
+  border: 2px solid #1c1f1f;
   border-radius: 10px;
-  border-color: #1c1f1f;
   margin: auto;
   top: 0;
   left: 0;
@@ -526,11 +538,10 @@ table.editorbar-panel td.selected {
 
 /* ---- ACE EDITOR ---- */
 .oe_ace_view_editor {
-  transition: all 0.2s ease-in;
   -webkit-transition: all 0.2s ease-in;
-  -ms-transition: all 0.2s ease-in;
-  -o-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
+  -o-transition: all 0.2s ease-in;
+  transition: all 0.2s ease-in;
   opacity: 0.3;
   position: fixed;
   top: 51px;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 4a245b1f2c9..e74c81932a4 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -1,6 +1,8 @@
 @charset "utf-8"
 
 @import "compass/css3"
+@import "compass/css3/user-interface"
+@import "compass/css3/transition"
 
 /* ---- CKEditor Minimal Reset ---- */
 
@@ -39,8 +41,7 @@
     padding: 2px
     margin: 0
     z-index: 20000
-    background-color: #414141
-    background: -webkit-linear-gradient(#646060, #262626)
+    @include background(#414141, linear-gradient(#646060, #262626))
     box-sizing: border-box
     li
         display: inline
@@ -116,11 +117,7 @@ table.editorbar-panel
 // bootstrap makes .btn elements unselectable -> RTE double-click can't know
 // about them either
 .oe_editable .btn
-    -webkit-user-select: auto
-    -moz-user-select: auto
-    -ms-user-select: auto
-    -o-user-select: auto
-    user-select: auto
+    @include user-select(auto)
 
 .modal-dialog.select-image
     width: 80%
@@ -213,8 +210,7 @@ table.editorbar-panel
         display: none !important
 
 #oe_snippets .oe_snippet_thumbnail
-    background: rgb(116, 116, 116)
-    background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
+    @include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)))
 
 /* ---- SNIPPETS DROP ZONES ---- */
 
@@ -224,7 +220,7 @@ table.editorbar-panel
     margin: 0px
     margin-top: -4px
     margin-bottom: -44px
-    -webkit-transition: margin 250ms linear
+    @include transition(margin 250ms linear)
     width: 100%
     position: absolute
     z-index: 1000
@@ -264,7 +260,7 @@ table.editorbar-panel
     position: absolute
     background: transparent
     border-radius: 3px
-    transition: opacity 100ms linear
+    @include transition(opacity 100ms linear)
     box-sizing: border-box
     pointer-events: none
     &.oe_active
@@ -291,7 +287,7 @@ table.editorbar-panel
                 font-size: 14px
                 line-height: 14px
                 color: rgba(153, 0, 255, 1)
-                -webkit-transition: background 100ms linear
+                @include transition(background 100ms linear)
             &:hover:before
                 background: rgba(153, 0, 255, 1)
                 color: #fff
@@ -379,9 +375,8 @@ $icon_close: #E00101
     &.modal .modal-content
         height: 660px
         background-color: $mobile_preview_background
-        border: 2px solid
+        border: 2px solid $mobile_preview_border
         border-radius: 10px
-        border-color: $mobile_preview_border
         margin: auto
         top: 0
         left: 0
@@ -453,11 +448,7 @@ $navbar_height: 51px
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace
     line-height: normal
 .oe_ace_view_editor
-    transition: all 0.2s ease-in
-    -webkit-transition: all 0.2s ease-in
-    -ms-transition: all 0.2s ease-in
-    -o-transition: all 0.2s ease-in
-    -moz-transition: all 0.2s ease-in
+    @include transition(all 0.2s ease-in)
     opacity: 0.3
     position: fixed
     top: $navbar_height