[MERGE] from parent

bzr revid: xmo@openerp.com-20131004145046-7cab234xeotx9v7t

5 files changed, 87 insertions, 44 deletions

diff --git a/addons/website/static/src/css/Makefile b/addons/website/static/src/css/Makefile
index 238219f8906..44d0e1af989 100644
--- a/addons/website/static/src/css/Makefile
+++ b/addons/website/static/src/css/Makefile
@@ -1,3 +1,3 @@
 sass:
-	sass -t expanded --unix-newlines --watch website.sass:website.css&
-	sass -t expanded --unix-newlines --watch editor.sass:editor.css&
+	sass -t expanded --compass --unix-newlines --watch website.sass:website.css&
+	sass -t expanded --compass --unix-newlines --watch editor.sass:editor.css&
diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index b77e900d9f2..e08157124c5 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@charset "utf-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
@@ -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 {
@@ -169,6 +171,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;
@@ -183,6 +187,7 @@ table.editorbar-panel td.selected {
 #oe_snippets .nav {
   position: fixed;
   z-index: 1;
+  border: 0;
 }
 #oe_snippets .nav > li {
   display: inline-block;
@@ -193,24 +198,24 @@ table.editorbar-panel td.selected {
   padding: 2px 10px !important;
   width: 100%;
   display: block;
+  border: 0;
 }
-#oe_snippets .pill-content {
+#oe_snippets .tab-content {
   margin-top: 24px;
   display: inline-block;
   white-space: nowrap;
 }
-#oe_snippets .pill-content > div {
-  display: inline-block;
+#oe_snippets .tab-content > div {
   background: black;
   padding: 5px;
 }
-#oe_snippets .pill-content > div label {
+#oe_snippets .tab-content > div label {
   width: 44px;
   height: 100%;
   color: white;
   padding-left: 10px;
 }
-#oe_snippets .pill-content > div label div {
+#oe_snippets .tab-content > div label div {
   width: 100px;
   text-align: center;
   -webkit-transform: translate(-39px, 44px);
@@ -235,6 +240,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;
@@ -252,6 +258,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 {
@@ -307,6 +315,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 {
@@ -325,11 +337,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;
 }
@@ -337,6 +355,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);
 }
@@ -351,6 +371,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;
@@ -411,6 +435,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;
@@ -472,6 +498,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;
@@ -483,7 +513,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 {
@@ -491,10 +525,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 {
@@ -525,10 +561,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 {
@@ -546,6 +586,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;
@@ -583,6 +624,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 {
@@ -590,5 +632,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 4f962f02151..c8854b210ec 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
@@ -145,7 +143,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
@@ -162,14 +160,15 @@ table.editorbar-panel
                 padding: 2px 10px !important
                 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
-            display: inline-block
             background: rgb(0,0,0)
             padding: 5px
             label
@@ -192,8 +191,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
@@ -207,7 +205,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)
@@ -247,7 +245,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
@@ -256,6 +254,7 @@ table.editorbar-panel
     color: white
     height: 48px
     margin-bottom: 32px
+    padding-top: 12px
 
 /* ---- SNIPPET MANIPULATOR ---- */
 
@@ -263,15 +262,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
@@ -283,7 +282,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
@@ -330,7 +329,7 @@ table.editorbar-panel
     top: 50%
     left: 50%
     display: block
-    box-sizing: border-box
+    +box-sizing(border-box)
     width: 8px
     height: 8px
     margin: -4px
@@ -380,7 +379,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
@@ -390,16 +389,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
@@ -429,9 +428,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
@@ -446,6 +445,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
@@ -453,7 +456,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
@@ -481,11 +484,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:
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 1796729f18c..6af2e7485fe 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -255,6 +255,7 @@ footer {
 
 .carousel-inner .item {
   height: 100%;
+  background-size: 100%;
 }
 
 .carousel.oe_small .carousel-inner {
@@ -348,10 +349,9 @@ footer {
   background: #eeeeee bottom center repeat fixed;
   min-height: 650px;
   width: 100%;
+  background-size: 100%;
 }
 
-/* overflow: hidden
- * position: relative */
 /* -- Hack for removing double scrollbar from mobile preview -- */
 div#mobile-preview.modal {
   overflow: hidden;
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 9834fb66aed..997b45a0253 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -185,7 +185,7 @@ footer
 
 .carousel-inner .item
     height: 100%
-
+    background-size: 100%
 
 .carousel
     &.oe_small .carousel-inner
@@ -267,9 +267,7 @@ footer
     background: #eee bottom center repeat fixed
     min-height: 650px
     width: 100%
-/*
-    overflow: hidden
-    position: relative */
+    background-size: 100%
 
 /* -- Hack for removing double scrollbar from mobile preview -- */
 div#mobile-preview.modal