1 files changed, 16 insertions, 23 deletions
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 54c6b6576de..0a126bb3197 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -1,5 +1,7 @@
 @charset "utf-8"
 
+@import "compass/css3"
+
 /* ---- CKEditor Minimal Reset ---- */
 
 .navbar.navbar-inverse .cke_chrome
@@ -145,33 +147,30 @@ table.editorbar-panel
     box-shadow: 0px 10px 10px -10px black inset
     z-index: 1010
     overflow: hidden
-    height: 110px
     &:hover
         height: auto
     .scroll
         white-space: nowrap
         overflow-y: auto
     .nav
-        padding: 3px 15px
-        width: 162px
-        background: #444444
         > li
-            display: block
+            display: inline-block
             float: none
+            font-size: 13px
             > a
                 padding: 2px 10px !important
                 width: 100%
                 display: block
         position: fixed
         z-index: 1
-        height: 108px
     .pill-content
+        margin-top: 24px
         display: inline-block
-        height: 110px
         white-space: nowrap
-        padding-left: 166px
         > div
             display: inline-block
+            background: rgb(0,0,0)
+            padding: 5px
             label
                 width: 44px
                 height: 100%
@@ -180,22 +179,14 @@ table.editorbar-panel
                 div
                     width: 100px
                     text-align: center
-                    -webkit-transform: translate(-39px, 44px) rotate(-90deg)
-                    -moz-transform: translate(-39px, 44px) rotate(-90deg)
-                    -o-transform: translate(-39px, 44px) rotate(-90deg)
-                    transform: translate(-39px, 44px) rotate(-90deg)
-                    -webkit-transform-origin: 50% 50%
-                    -moz-transform-origin: 50% 50%
-                    -ms-transform-origin: 50% 50%
-                    -o-transform-origin: 50% 50%
-                    transform-origin: 50% 50%
+                    @include transform( translate(-39px, 44px) , rotate(-90deg) ) 
+                    @include transform-origin(50% 50%)
 
 .oe_snippet
     display: inline-block
     vertical-align: top
-    width: 108px
-    height: 108px
-    border-radius: 3px
+    width: 100px
+    height: 100px
     margin: 1px
     margin-top: 0px
     position: relative
@@ -204,15 +195,18 @@ table.editorbar-panel
     user-select: none
     cursor: move
     pointer-events: none
-
     .oe_snippet_thumbnail
         pointer-events: auto
         text-align: center
         height: 100%
         background: transparent
         color: white
-        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95)
         position: relative
+        .oe_snippet_thumbnail_title
+            font-size: 12px
+            display: block
+        .oe_snippet_thumbnail_img
+            box-shadow: inset 0px 0px 0px 3px #333333
         span, div
             line-height: 18px
     & > :not(.oe_snippet_thumbnail)
@@ -221,7 +215,6 @@ table.editorbar-panel
 #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))
-    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset
 
 /* ---- SNIPPETS DROP ZONES ---- */