menu and submenu in full css3 (without any images) + delete useless images + clean the code (wip)

app/assets/javascripts/locomotive/views/application_view.js.coffee

@@ -27,15 +27,25 @@ class Locomotive.Views.ApplicationView extends Backbone.View
       $('.ui-dialog-content:visible').dialog('option', 'position', 'center')
 
   add_submenu_behaviours: ->
-    # sub menu links
+    $('#submenu ul li.hoverable').each ->
-    $('#submenu ul li.hoverable').hover(
+      timer = null
-      ->
+      link  = $(@)
-        $(@).find('a').addClass('hover')
+      popup = link.find('.popup').removeClass('popup').addClass('submenu-popup').css(
-        $(@).find('.popup').show()
+        top:          link.offset().top + link.height() - 1
-      ->
+        left:         link.offset().left
-        $(@).find('a').removeClass('hover');
+      ).bind('show', ->
-        $(@).find('.popup').hide()
+        link.find('a').addClass('hover') & popup.show()
-    )
+      ).bind('hide', ->
+        link.find('a').removeClass('hover') & $(@).hide()
+      ).bind('mouseleave', -> popup.trigger('hide')
+      ).bind 'mouseenter', -> clearTimeout(timer)
+
+      $(document.body).append(popup)
+
+      link.hover(
+        -> popup.trigger('show')
+        -> timer = window.setTimeout (-> popup.trigger('hide')), 30
+      )
 
     css = $('#submenu > ul').attr('class')
     $("#submenu > ul > li.#{css}").addClass('on') if css != ''

app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee

@@ -72,7 +72,7 @@ class Locomotive.Views.Pages.FormView extends Locomotive.Views.Shared.FormView
     @editor.refresh()
 
   render_editable_elements: ->
-    @$('.formtastic fieldset.inputs:first').after(@editable_elements_view.render().el)
+    @$('.formtastic fieldset.inputs:first').before(@editable_elements_view.render().el)
 
   fill_default_slug: (event) ->
     unless @filled_slug

app/assets/stylesheets/locomotive/_buttons.scss

@@ -115,6 +115,7 @@
   cursor: pointer;
 
   border: 1px solid rgba(0, 0, 0, 0.4);
+  border-bottom-color: rgba(0, 0, 0, 0.6);
   @include border-radius(5px);
 
   line-height: 19px !important;
@@ -122,7 +123,7 @@
   padding: 0px 7px;
 
   @include background-image(linear-gradient(top, #2abaf1, #228dda));
-  @include box-shadow(rgba(0, 0, 0, 0.3) 1px 1px 0px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset);
+  @include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset);
 
   font-size: 12px;
   color: #fff;

app/assets/stylesheets/locomotive/layout.scss

@@ -83,19 +83,23 @@ body {
   } // #header
 
   #content {
-    margin-top: -1px;
+    position: relative;
+    overflow: hidden;
+    z-index: 997;
+
+    padding-bottom: 8px;
 
     > div.inner {
       position: relative;
       margin: 0px 8px;
       padding: 10px 15px 20px 15px;
 
-      z-index: 100;
+      // z-index: 100;
 
       background: #fff;
 
-      @include box-shadow(rgba(0, 0, 0, 0.6) 0px 1px 4px 3px);
+      @include box-shadow(rgba(0, 0, 0, 0.3) 0px 0px 6px 4px);
-      @include border-bottom-radius(3px);
+      @include border-bottom-radius(4px);
 
       min-height: 150px;
 

app/assets/stylesheets/locomotive/menu.css

@@ -4,5 +4,5 @@
  * the top of the compiled file, but it's generally better to create a new file per style scope.
  *= require ./menu/sub.css
  *= require ./menu/main.css
- *= require ./menu/colors.css
+ *= require ./menu/default.css
 */

app/assets/stylesheets/locomotive/menu/_colors.scss

@@ -0,0 +1,124 @@
+@import "compass/css3/images";
+@import "compass/css3/box-shadow";
+@import "compass/css3/text-shadow";
+
+// MAIN MENU ENTRY
+
+@mixin locomotive-menu-entry($color_top, $color_bottom: $color_top) {
+  $color_bottom: $color_top !default;
+
+  z-index: 995;
+
+  a {
+    @include background-image(linear-gradient($color_top, $color_bottom));
+    span {
+      color: #fff;
+      @include single-text-shadow(transparent, 0px, 0px, 0px);
+    }
+  }
+
+  div.right span {
+    @include background-image(linear-gradient(top right, $color_top, $color_bottom 29px));
+  }
+
+  div.left span {
+    @include background-image(linear-gradient(top left, $color_top, $color_bottom 29px));
+  }
+
+  div.shadow {
+    display: none;
+  }
+}
+
+@mixin locomotive-black-entry {
+  @include locomotive-menu-entry(#45454a, #55565c);
+}
+
+@mixin locomotive-blue-entry {
+  @include locomotive-menu-entry(#1f80ba, #398bbb);
+}
+
+@mixin locomotive-green-entry {
+  @include locomotive-menu-entry(#46b398);
+}
+
+@mixin locomotive-orange-entry {
+  @include locomotive-menu-entry(#ec8901);
+}
+
+@mixin locomotive-red-entry {
+  @include locomotive-menu-entry(#ec525b);
+}
+
+// SUB MENU
+
+@mixin locomotive-black-submenu {
+  @include box-shadow(rgba(0, 0, 0, 0.3) 0px -1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 4px 6px 4px, rgba(255, 255, 255, 0.2) 0 1px 0 0 inset);
+  @include background-image(linear-gradient(#3f3f45, #23242b));
+
+  & > ul > li > a, & > .action a {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
+    @include box-shadow(rgba(255, 255, 255, 0.1) 0 1px 0 0 inset, rgba(255, 255, 255, 0.1) 0 1px 0 0);
+    @include background-image(linear-gradient(#303138, #1e1e24));
+
+    &.on, &:active {
+      border: 1px solid rgba(0, 0, 0, 0.4);
+      border-top: 1px solid rgba(0, 0, 0, 0.6);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      @include background-image(linear-gradient(#1e1e24, #212229));
+      @include box-shadow(rgba(0, 0, 0, 0) 0 1px 0 0 inset, rgba(255, 255, 255, 0.2) 0 1px 0 0);
+    }
+  }
+
+  & > .action {
+    a:hover {
+      border: 1px solid rgba(255, 255, 255, 0.5);
+    }
+  }
+}
+
+@mixin locomotive-blue-submenu {
+  @include background-image(linear-gradient(#2478ac, #1c5d86));
+  & > ul > li > a {
+    @include background-image(linear-gradient(#1f6ea1, #135179));
+
+    &.on, &:active {
+      @include background-image(linear-gradient(#13496c, #175b88));
+    }
+  }
+}
+
+@mixin locomotive-green-submenu {
+  @include background-image(linear-gradient(#2e9a7d, #2e9a7d)); // TODO (#2e9a7d)
+  & > ul > li > a {
+    @include background-image(linear-gradient(#258c70, #13604b));
+
+    &.on, &:active {
+      @include background-image(linear-gradient(#195e4b, #166d55));
+    }
+  }
+}
+
+@mixin locomotive-orange-submenu {
+  @include background-image(linear-gradient(#ed8102, #ed8102)); // TODO (#ed8102)
+  & > ul > li > a {
+    @include background-image(linear-gradient(#e07a02, #a25804));
+
+    &.on, &:active {
+      @include background-image(linear-gradient(#965201, #9d5603));
+    }
+  }
+}
+
+@mixin locomotive-red-submenu {
+  @include background-image(linear-gradient(#d23c45, #d23c45)); // TODO (#d23c45)
+  & > ul > li > a {
+    @include background-image(linear-gradient(#b63e45, #89272d));
+
+    &.on, &:active {
+      @include background-image(linear-gradient(#7b292e, #972e35));
+    }
+  }
+}

app/assets/stylesheets/locomotive/menu/_helpers.scss

@@ -1,28 +1,3 @@
-@import "compass/css3";
-@import "compass/css3/border-radius";
-@import "compass/css3/images";
-@import "compass/css3/text-shadow";
-
-@mixin clearfix {
-  &:after {
-    content: ".";
-    display: block;
-    height: 0;
-    clear: both;
-    visibility: hidden;
-  };
-}
-
-@mixin reset {
-  padding: 0px;
-  margin: 0px;
-  list-style: none;
-
-  a {
-    text-decoration: none;
-  }
-}
-
 @mixin absolute-position($vside, $vvalue, $hside, $hvalue, $display: block) {
   display: $display;
   position: absolute;
@@ -30,168 +5,203 @@
   #{$hside}: $hvalue;
 }
 
-/* ___ shadows ___ */
-
-@mixin box-shadow-with-inset($color_top, $color_bottom: $color_top) {
-  $color_bottom: $color_top !default;
-  @include box-shadow($color_top 0 1px 0 0 inset, $color_bottom 0 1px 0 0);
-}
-
-@mixin no-box-shadow($important: false) {
-  @if $important == true {
-    $important: " !important"; }
-  @else {
-    $important: ""; }
-
-  box-shadow: none $important;
-  -moz-box-shadow: none $important;
-  -webkit-box-shadow: none $important;
-}
-
-@mixin popup-box {
-  @include border-radius(4px);
-  @include box-shadow(rgba(255, 255, 255, 0.17) 0 1px 0 0 inset, rgba(0, 0, 0, 0.41) 3px 3px 5px 0);
-}
-
 /* ___ icons ___ */
 
-@mixin icon($where, $width, $height, $enabled: false, $top: 0, $left: 0) {
-  position: relative;
-  width: $width;
-  height: $height;
-  line-height: $height + 1;
-  @if $enabled == true {
-    background-position: -#{$width} $where; }
-  @else {
-    background-position: 0 $where; }
-  top: $top;
-  left: $left;
-}
 
-@mixin menu-contents-icon($enabled: false) {
+// @import "compass/css3";
-  @include icon(-64px, 16px, 12px, $enabled, 10px);
+// @import "compass/css3/border-radius";
-}
+// @import "compass/css3/images";
-
+// @import "compass/css3/text-shadow";
-@mixin menu-assets-icon($enabled: false) {
+//
-  @include icon(-48px, 20px, 16px, $enabled, 11px);
+// @mixin clearfix {
-}
+//   &:after {
-
+//     content: ".";
-@mixin menu-settings-icon($enabled: false) {
+//     display: block;
-  @include icon(-32px, 14px, 13px, $enabled, 11px);
+//     height: 0;
-}
+//     clear: both;
-
+//     visibility: hidden;
-/* ___ colors ___ */
+//   };
-
+// }
-@mixin menu-color($color) {
+//
-  $color-index: 1;
+// @mixin reset {
-  @if $color == green { $color-index: 1; }
+//   padding: 0px;
-  @if $color == black {  $color-index: 2; }
+//   margin: 0px;
-  @if $color == blue {  $color-index: 3; }
+//   list-style: none;
-  @if $color == orange {  $color-index: 4; }
+//
-  @if $color == red {  $color-index: 5; }
+//   a {
-
+//     text-decoration: none;
-  z-index: 999;
+//   }
-
+// }
-  a {
+//
-    background-position: right -39px * $color-index;
+// @mixin absolute-position($vside, $vvalue, $hside, $hvalue, $display: block) {
-
+//   display: $display;
-    span {
+//   position: absolute;
-      color: #fff;
+//   #{$vside}: $vvalue;
-      text-shadow: none;
+//   #{$hside}: $hvalue;
-    }
+// }
-  }
+//
-
+// /* ___ shadows ___ */
-  & > span { background-position: -40px * $color-index -39px; }
+//
-
+// @mixin box-shadow-with-inset($color_top, $color_bottom: $color_top) {
-  &.first > span { background-position: -18px * $color-index 0px; }
+//   $color_bottom: $color_top !default;
-}
+//   @include box-shadow($color_top 0 1px 0 0 inset, $color_bottom 0 1px 0 0);
-
+// }
-@mixin black-submenu {
+//
-  & > ul {
+// @mixin no-box-shadow($important: false) {
-    background: #23242b image-url("locomotive/menu/submenu/black-bg.png") repeat-x 0 0;
+//   @if $important == true {
-    border-color: rgba(255, 255, 255, 0.2);
+//     $important: " !important"; }
-  }
+//   @else {
-
+//     $important: ""; }
-  & > ul > li > a, & > .action a {
+//
-    border: 1px solid rgba(0, 0, 0, 0.2);
+//   box-shadow: none $important;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
+//   -moz-box-shadow: none $important;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
+//   -webkit-box-shadow: none $important;
-    @include box-shadow-with-inset(rgba(255, 255, 255, 0.1));
+// }
-    @include background-image(linear-gradient(#303138, #1e1e24));
+//
-
+// @mixin popup-box {
-    &.on, &:active {
+//   @include border-radius(4px);
-      border: 1px solid rgba(0, 0, 0, 0.4);
+//   @include box-shadow(rgba(255, 255, 255, 0.17) 0 1px 0 0 inset, rgba(0, 0, 0, 0.41) 3px 3px 5px 0);
-      border-top: 1px solid rgba(0, 0, 0, 0.6);
+// }
-      @include background-image(linear-gradient(#1e1e24, #212229));
+//
-      @include box-shadow-with-inset(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.2));
+// /* ___ icons ___ */
-    }
+//
-  }
+// @mixin icon($where, $width, $height, $enabled: false, $top: 0, $left: 0) {
-
+//   position: relative;
-  & > .action {
+//   width: $width;
-    background-image: image-url("locomotive/menu/submenu/black-action-border.png") !important;
+//   height: $height;
-
+//   line-height: $height + 1;
-    a:hover {
+//   @if $enabled == true {
-      border: 1px solid rgba(255, 255, 255, 0.5);
+//     background-position: -#{$width} $where; }
-    }
+//   @else {
-  }
+//     background-position: 0 $where; }
-}
+//   top: $top;
-
+//   left: $left;
-@mixin green-submenu {
+// }
-  & > ul {
+//
-    background-color: #2e9a7d;
+// @mixin menu-contents-icon($enabled: false) {
-    & > li > a {
+//   @include icon(-64px, 16px, 12px, $enabled, 10px);
-      @include background-image(linear-gradient(#258c70, #13604b));
+// }
-
+//
-      &.on, &:active {
+// @mixin menu-assets-icon($enabled: false) {
-        @include background-image(linear-gradient(#195e4b, #166d55));
+//   @include icon(-48px, 20px, 16px, $enabled, 11px);
-      }
+// }
-    }
+//
-  }
+// @mixin menu-settings-icon($enabled: false) {
-}
+//   @include icon(-32px, 14px, 13px, $enabled, 11px);
-
+// }
-@mixin blue-submenu {
+//
-  & > ul {
+// /* ___ colors ___ */
-    background-color: #2579ae;
+//
-    & > li > a {
+// @mixin menu-color($color) {
-      @include background-image(linear-gradient(#1f6ea1, #135179));
+//   $color-index: 1;
-
+//   @if $color == green { $color-index: 1; }
-      &.on, &:active {
+//   @if $color == black {  $color-index: 2; }
-        @include background-image(linear-gradient(#13496c, #175b88));
+//   @if $color == blue {  $color-index: 3; }
-      }
+//   @if $color == orange {  $color-index: 4; }
-    }
+//   @if $color == red {  $color-index: 5; }
-  }
+//
-}
+//   z-index: 999;
-
+//
-@mixin orange-submenu {
+//   a {
-  & > ul {
+//     background-position: right -39px * $color-index;
-    background-color: #ed8102;
+//
-    & > li > a {
+//     span {
-      @include background-image(linear-gradient(#e07a02, #a25804));
+//       color: #fff;
-
+//       text-shadow: none;
-      &.on, &:active {
+//     }
-        @include background-image(linear-gradient(#965201, #9d5603));
+//   }
-      }
+//
-    }
+//   & > span { background-position: -40px * $color-index -39px; }
-  }
+//
-}
+//   &.first > span { background-position: -18px * $color-index 0px; }
-
+// }
-@mixin red-submenu {
+//
-  & > ul {
+// @mixin black-submenu {
-    background-color: #d23c45;
+//   & > ul {
-    & > li > a {
+//     background: #23242b image-url("locomotive/menu/submenu/black-bg.png") repeat-x 0 0;
-      @include background-image(linear-gradient(#b63e45, #89272d));
+//     border-color: rgba(255, 255, 255, 0.2);
-
+//   }
-      &.on, &:active {
+//
-        @include background-image(linear-gradient(#7b292e, #972e35));
+//   & > ul > li > a, & > .action a {
-      }
+//     border: 1px solid rgba(0, 0, 0, 0.2);
-    }
+//     border-top: 1px solid rgba(0, 0, 0, 0.1);
-  }
+//     border-bottom: 1px solid rgba(0, 0, 0, 0.6);
-}
+//     @include box-shadow-with-inset(rgba(255, 255, 255, 0.1));
-
+//     @include background-image(linear-gradient(#303138, #1e1e24));
-@mixin submenu-color($color) {
+//
-  @if $color == black { @include black-submenu; }
+//     &.on, &:active {
-  @if $color == green { @include green-submenu; }
+//       border: 1px solid rgba(0, 0, 0, 0.4);
-  @if $color == blue { @include blue-submenu; }
+//       border-top: 1px solid rgba(0, 0, 0, 0.6);
-  @if $color == orange { @include orange-submenu; }
+//       @include background-image(linear-gradient(#1e1e24, #212229));
-  @if $color == red { @include red-submenu; }
+//       @include box-shadow-with-inset(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.2));
-}
+//     }
+//   }
+//
+//   & > .action {
+//     background-image: image-url("locomotive/menu/submenu/black-action-border.png") !important;
+//
+//     a:hover {
+//       border: 1px solid rgba(255, 255, 255, 0.5);
+//     }
+//   }
+// }
+//
+// @mixin green-submenu {
+//   & > ul {
+//     background-color: #2e9a7d;
+//     & > li > a {
+//       @include background-image(linear-gradient(#258c70, #13604b));
+//
+//       &.on, &:active {
+//         @include background-image(linear-gradient(#195e4b, #166d55));
+//       }
+//     }
+//   }
+// }
+//
+// @mixin blue-submenu {
+//   & > ul {
+//     background-color: #2579ae;
+//     & > li > a {
+//       @include background-image(linear-gradient(#1f6ea1, #135179));
+//
+//       &.on, &:active {
+//         @include background-image(linear-gradient(#13496c, #175b88));
+//       }
+//     }
+//   }
+// }
+//
+// @mixin orange-submenu {
+//   & > ul {
+//     background-color: #ed8102;
+//     & > li > a {
+//       @include background-image(linear-gradient(#e07a02, #a25804));
+//
+//       &.on, &:active {
+//         @include background-image(linear-gradient(#965201, #9d5603));
+//       }
+//     }
+//   }
+// }
+//
+// @mixin red-submenu {
+//   & > ul {
+//     background-color: #d23c45;
+//     & > li > a {
+//       @include background-image(linear-gradient(#b63e45, #89272d));
+//
+//       &.on, &:active {
+//         @include background-image(linear-gradient(#7b292e, #972e35));
+//       }
+//     }
+//   }
+// }
+//
+// @mixin submenu-color($color) {
+//   @if $color == black { @include black-submenu; }
+//   @if $color == green { @include green-submenu; }
+//   @if $color == blue { @include blue-submenu; }
+//   @if $color == orange { @include orange-submenu; }
+//   @if $color == red { @include red-submenu; }
+// }

app/assets/stylesheets/locomotive/menu/_icons.scss

@@ -0,0 +1,30 @@
+$locomotive-default-icons-url: image-url("locomotive/menu/icons.png");
+
+@mixin locomotive-menu-icon($url, $where, $width, $height, $enabled: false, $top: 0, $left: 0) {
+  em {
+    @if $enabled == true {
+      background-position: -#{$width} $where; }
+    @else {
+      display: inline-block;
+      position: relative;
+      width: $width;
+      height: $height;
+      line-height: $height + 1;
+      background: transparent $url no-repeat 0 $where;
+      top: $top;
+      left: $left;
+      margin-right: 2px; }
+  }
+}
+
+@mixin locomotive-contents-icon($enabled: false) {
+  @include locomotive-menu-icon($locomotive-default-icons-url, -64px, 16px, 12px, $enabled, 0px);
+}
+
+@mixin locomotive-assets-icon($enabled: false) {
+  @include locomotive-menu-icon($locomotive-default-icons-url, -48px, 20px, 16px, $enabled, 1px);
+}
+
+@mixin locomotive-settings-icon($enabled: false) {
+  @include locomotive-menu-icon($locomotive-default-icons-url, -32px, 14px, 13px, $enabled, 1px);
+}

app/assets/stylesheets/locomotive/menu/colors.scss

@@ -1,31 +0,0 @@
-@import "helpers";
-
-#menu li.contents a em { @include menu-contents-icon; }
-body.contents {
-  $color: black;
-  #menu li.contents {
-    @include menu-color($color);
-    em { @include menu-contents-icon(true); }
-  }
-  #submenu { @include submenu-color($color); }
-}
-
-#menu li.assets a em { @include menu-assets-icon; }
-body.assets {
-  $color: green;
-  #menu li.assets {
-    @include menu-color($color);
-    em { @include menu-assets-icon(true); }
-  }
-  #submenu { @include submenu-color($color); }
-}
-
-#menu li.settings a em { @include menu-settings-icon; }
-body.settings {
-  $color: blue;
-  #menu li.settings {
-    @include menu-color($color);
-    em { @include menu-settings-icon(true); }
-  }
-  #submenu { @include submenu-color($color); }
-}

app/assets/stylesheets/locomotive/menu/default.scss

@@ -0,0 +1,67 @@
+@import "colors";
+@import "icons";
+
+#menu {
+  li.contents { @include locomotive-contents-icon; }
+  li.settings { @include locomotive-settings-icon; }
+}
+
+body.contents {
+  #menu li.contents {
+    @include locomotive-black-entry;
+    @include locomotive-contents-icon(true);
+    // @include locomotive_blue_menu;
+    // @include locomotive_green_menu;
+  }
+
+  #submenu {
+    @include locomotive-black-submenu;
+  }
+}
+
+body.settings {
+  #menu li.settings {
+    @include locomotive-blue-entry;
+    // @include locomotive_black_menu;
+    // @include locomotive-orange-entry;
+    @include locomotive-settings-icon(true);
+  }
+
+  #submenu {
+    @include locomotive-blue-submenu;
+    // @include locomotive-orange-submenu;
+  }
+}
+
+
+// @import "helpers";
+//
+// #menu li.contents a em { @include menu-contents-icon; }
+// body.contents {
+//   $color: black;
+//   #menu li.contents {
+//     @include menu-color($color);
+//     em { @include menu-contents-icon(true); }
+//   }
+//   #submenu { @include submenu-color($color); }
+// }
+//
+// #menu li.assets a em { @include menu-assets-icon; }
+// body.assets {
+//   $color: green;
+//   #menu li.assets {
+//     @include menu-color($color);
+//     em { @include menu-assets-icon(true); }
+//   }
+//   #submenu { @include submenu-color($color); }
+// }
+//
+// #menu li.settings a em { @include menu-settings-icon; }
+// body.settings {
+//   $color: blue;
+//   #menu li.settings {
+//     @include menu-color($color);
+//     em { @include menu-settings-icon(true); }
+//   }
+//   #submenu { @include submenu-color($color); }
+// }

app/assets/stylesheets/locomotive/menu/main.scss

@@ -1,56 +1,127 @@
-@import "helpers";
+@import "compass/css3/images";
+@import "compass/css3/border-radius";
+@import "compass/css3/text-shadow";
+@import "compass/css3/box-shadow";
+@import "compass/css3/transform-legacy";
 
 #menu {
-  @include reset;
+  padding: 0;
-  margin: 20px 0 0 0px;
+  margin: 20px 8px 0 2px;
+  list-style: none;
 
-  li.item {
+  li.entry {
     float: left;
     position: relative;
-    z-index: 994;
+    padding: 6px 6px 0 6px;
-    font-size: 16px;
+    height: 29px;
-
+    line-height: 29px;
-    & > span, a {
+    overflow: hidden;
-      float: left;
-      display: block;
-    }
-
-    & > span {
-      background: transparent image-url("locomotive/menu/left.png") no-repeat 0 0;
-      width: 40px;
-      height: 39px;
-      background-position: 0 -39px;
-    }
-
-    &.first > span {
-      width: 18px;
-      background-position: 0 0;
-    }
 
     a {
-      background: transparent image-url("locomotive/menu/right.png") no-repeat right 0px;
+      display: block;
-      padding: 0px 52px 0 2px;
+      float: left;
-      height: 39px;
-      line-height: 26px;
-      outline: none;
 
-      em, span { display: inline-block; position: relative; }
+      position: relative;
+      z-index: 1;
 
-      em {
+      padding: 0 7px;
-        background: transparent image-url("locomotive/menu/icons.png") no-repeat 0px 0px;
+
-      }
+      line-height: 29px;
+
+      @include border-top-left-radius(2px);
+      @include border-top-right-radius(2px);
+
+      background: #bcc8cb;
+      @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 10px 0px, rgba(255, 255, 255, 0.2) 0 1px 0 0 inset);
+
+      font-size: 13px;
+      text-decoration: none;
 
       span {
-        top: 9px;
+        text-decoration: none;
-        left: 6px;
         color: #787A89;
-        text-shadow: #C5CFD1 1px 1px 1px;
+        @include single-text-shadow(rgba(255, 255, 255, 0.4), 1px, 1px, 1px);
-        font-size: 13px;
       }
     }
 
-    @for $i from 2 through 5 {
+    div.left, div.right {
-      &.item-#{$i} { left: -35px * ($i - 1); z-index: 993 - $i; }
+      float: left;
+
+      width: 34px;
+      height: 29px;
+
+      overflow: hidden;
+
+      position: relative;
+      top: 0px;
+      right: 0px;
+
+      z-index: 100;
+
+      span {
+        display: block;
+        position: relative;
+
+        width:  41px;
+        height: 41px;
+      }
+    }
+
+    div.right {
+      span {
+        top: 9px;
+        right: 20px;
+
+        background: #bcc8cb;
+        @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 10px 0px, rgba(255, 255, 255, 0.5) 0 0 1px 0 inset);
+        @include rotate(-45deg);
+      }
+    }
+
+    div.left {
+      span {
+        top: 9px;
+        left: 14px;
+
+        background: #bcc8cb;
+        @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 10px 0px, rgba(255, 255, 255, 0.5) 0 0 1px 0 inset);
+        @include rotate(45deg);
+      }
+    }
+
+    div.shadow {
+      display: none; // TODO
+
+      position: absolute;
+      height: 8px;
+      bottom: -8px;
+      right: 0px;
+      width: 100%;
+      z-index: 995;
+
+      div {
+        @include box-shadow(rgba(0, 0, 0, 0.4) 0px 0px 10px 0px);
+        height: 8px;
+        margin: 0 13px 0 0;
+      }
+    }
+
+    &:first-child {
+      z-index: 990;
+      a {
+        @include border-top-left-radius(4px);
+        padding-left: 10px;
+      }
+      div.left {
+        display: none;
+      }
+      div.shadow { // TODO
+        left: 6px;
+      }
+    }
+
+    @for $i from 1 through 5 {
+      &.entry-#{$i} { left: -42px * $i; z-index: 990 - $i; }
     }
   }
 }

app/assets/stylesheets/locomotive/menu/sub.scss

@@ -1,88 +1,35 @@
+@import "compass/css3/images";
+@import "compass/css3/border-radius";
+@import "compass/css3/text-shadow";
+@import "compass/css3/box-shadow";
 @import "helpers";
 
-@mixin submenu_link {
-  display: inline-block;
-
-  @include border-radius(16px);
-  @include box-shadow(rgba(255, 255, 255, 0.2) 0 1px 0 0 inset, rgba(255, 255, 255, 0.1) 0 1px 0 0);
-
-  border: 1px solid rgba(0, 0, 0, 0.4);
-  border-top: 1px solid rgba(0, 0, 0, 0.3);
-  padding: 0px 16px 0px 16px;
-  height: 26px;
-  font-size: 16px;
-  line-height: 22px;
-  outline: none;
-
-  span {
-    color: #fff;
-    font-size: 13px;
-    font-weight: normal;
-    text-shadow: 1px 1px 1px #000;
-  }
-
-  &:hover {
-    border: 1px solid rgba(0, 0, 0, 0.9);
-    border-top: 1px solid rgba(0, 0, 0, 0.8);
-  }
-
-  &.on, &:active {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-top: 1px solid rgba(0, 0, 0, 0.4);
-    border-bottom: 1px solid transparent !important;
-    @include box-shadow-with-inset(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.2));
-  }
-
-  &.hover {
-    background: #fff !important;
-    border-color: transparent !important;
-    border-color-bottom: #fff;
-    padding-bottom: 0px;
-    @include border-bottom-radius(0px); // !important is missing here
-    position: relative;
-    z-index: 998;
-
-    span {
-      color: #8b8d9a;
-      text-shadow: none;
-      @include no-box-shadow(true);
-    }
-
-    span em {
-      background-position: -12px -16px;
-    }
-
-    & > em {
-      @include absolute-position(bottom, 0px, right, -11px);
-      width: 13px;
-      height: 13px;
-      background: transparent image-url("locomotive/menu/popup/bottom-right-corner.png") no-repeat 0 0;
-    }
-  }
-}
-
 #submenu {
-  clear: both;
   position: relative;
-  top: -1px;
-  height: 60px;
-  margin: 0px 8px;
-  padding: 0 0px;
-  @include box-shadow(rgba(0, 0, 0, 0.2) 0px 4px 4px 3px);
 
-  /* ___ submenu items ___ */
+  clear: both;
+
+  z-index: 990;
+  // overflow: hidden;
+
+  height: 58px;
+
+  margin: -1px 8px 0 8px;
+
+  @include border-top-right-radius(4px);
+
+  @include box-shadow(rgba(0, 0, 0, 0.3) 0px -1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 4px 6px 4px, rgba(255, 255, 255, 0.4) 0 1px 0 0 inset);
+  // @include box-shadow(rgba(0, 0, 0, 0.3) 0px -1px 10px 3px, rgba(255, 255, 255, 0.4) 0 1px 0 0 inset);
+
+  @include background-image(linear-gradient(#2478ac, #1c5d86)); // # default = blue
 
   & > ul {
-    @include reset;
+    height: 58px;
-    border-top: 1px solid rgba(255, 255, 255, 0.4);
+    margin: 0px;
-    background: transparent image-url("locomotive/menu/submenu/shadow.png") repeat-x 0 0;
-    @include border-top-right-radius(3px);
-
-    height: 60px;
 
     & > li {
-      margin: 15px 7px 0 8px;
       float: left;
+      margin: 15px 7px 0 8px;
 
       &.hoverable > a span {
         em {
@@ -97,32 +44,90 @@
       }
 
       & > a {
-        @include submenu_link;
+        display: inline-block;
-      }
-    }
-  }
 
-  /* ___ submenu: actions ___ */
+        @include border-radius(16px);
+        @include box-shadow(rgba(255, 255, 255, 0.2) 0 1px 0 0 inset, rgba(255, 255, 255, 0.1) 0 1px 0 0);
+
+        border: 1px solid rgba(0, 0, 0, 0.4);
+        border-top: 1px solid rgba(0, 0, 0, 0.3);
+        padding: 0px 16px 0px 16px;
+        line-height: 26px;
+        outline: none;
+        text-decoration: none;
+
+        span {
+          color: #fff;
+          font-size: 13px;
+          font-weight: normal;
+          @include single-text-shadow(rgba(0, 0, 0, 1), 1px, 1px, 1px);
+        }
+
+        &:hover {
+          border: 1px solid rgba(0, 0, 0, 0.9);
+          border-top: 1px solid rgba(0, 0, 0, 0.8);
+        }
+
+        &.on, &:active {
+          border: 1px solid rgba(0, 0, 0, 0.2);
+          border-top: 1px solid rgba(0, 0, 0, 0.4);
+          border-bottom: 1px solid transparent;
+          @include box-shadow(rgba(0, 0, 0, 0) 0 1px 0 0 inset, rgba(255, 255, 255, 0.2) 0 1px 0 0);
+        }
+
+        &.hover {
+          background: #fff !important;
+          border-color: transparent !important;
+          border-color-bottom: #fff;
+          padding-bottom: 0px;
+          @include border-bottom-radius(0px); // !important is missing here
+          position: relative;
+          z-index: 998;
+
+          span {
+            color: #8b8d9a;
+            text-shadow: none;
+            @include box-shadow(transparent 0 0 0 0);
+          }
+
+          span em {
+            background-position: -12px -16px;
+          }
+
+          & > em {
+            @include absolute-position(bottom, 0px, right, -11px);
+            width: 13px;
+            height: 13px;
+            background: transparent image-url("locomotive/menu/popup/bottom-right-corner.png") no-repeat 0 0;
+          }
+        }
+      } // > a
+
+    } // > li
+  } // > ul
 
   & > .action {
     @include absolute-position(top, 0px, right, 12px);
-    height: 60px;
+    height: 58px;
     padding-left: 20px;
     z-index: 1;
-    background: transparent image-url("locomotive/menu/submenu/action-border.png") repeat-y left 0;
+
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
+    @include box-shadow(rgba(255, 255, 255, 0.1) 1px 0 0 0 inset);
 
     a {
-      @include submenu_link;
-
       display: inline-block;
 
       height: 20px;
       line-height: 20px;
 
-      margin: 18px 0 0 0;
+      margin: 17px 0 0 0;
       padding: 0px 10px 0 15px;
 
       @include border-radius(10px);
+      @include box-shadow(rgba(255, 255, 255, 0.2) 0 1px 0 0 inset, rgba(255, 255, 255, 0.1) 0 1px 0 0);
+      border: 1px solid rgba(0, 0, 0, 0.4);
+      border-top: 1px solid rgba(0, 0, 0, 0.3);
 
       text-decoration: none;
       font-size: 11px;
@@ -138,22 +143,43 @@
       }
 
       span {
+        color: #fff;
         font-size: 11px;
+        @include single-text-shadow(rgba(0, 0, 0, 1), 1px, 1px, 1px);
+      }
+
+      &:hover {
+        border: 1px solid rgba(0, 0, 0, 0.9);
+        border-top: 1px solid rgba(0, 0, 0, 0.8);
+      }
+
+      &.on, &:active {
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-top: 1px solid rgba(0, 0, 0, 0.4);
+        border-bottom: 1px solid transparent;
+        @include box-shadow(rgba(0, 0, 0, 0) 0 1px 0 0 inset, rgba(255, 255, 255, 0.2) 0 1px 0 0);
       }
     }
   }
+}
 
-  /* ___ submenu: popup ___ */
+.submenu-popup {
+  position: absolute;
+
+  min-width: 250px;
+  z-index: 999;
+
+  background: transparent;
+
+  .wrapper {
 
-  .popup {
-    position: absolute;
-    top: 42px;
-    min-width: 250px;
     background: #fff;
-    @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 10px 0px);
+
+    @include box-shadow(rgba(0, 0, 0, 0.5) 0px 8px 10px 0px);
     @include border-radius(16px);
     @include border-top-left-radius(0px);
-    z-index: 997;
+
+    text-align: left;
 
     a {
       color: #1f82bc;
@@ -242,4 +268,4 @@
       }
     }
   }
-}
+} // submenu-popup

app/cells/locomotive/main_menu/show.html.haml

@@ -1,9 +1,13 @@
 %ul#menu
-  - @list.each_with_index do |item, index|
+  - @list.each_with_index do |entry, index|
-    - index += 1
+    %li{ :class => "entry entry-#{index} #{entry[:class]}" }
-    %li{ :class => "item #{'first' if index == 1} item-#{index} #{item[:class]}" }
+      %div.left
-      %span
+        %span
-      = link_to item[:url] do
+      = link_to entry[:url] do
         %em  
-        %span= item[:label]
+        %span= entry[:label]
+      %div.right
+        %span
+      %div.shadow
+        %div
   %li.clear

app/helpers/locomotive/base_helper.rb

@@ -13,7 +13,7 @@ module Locomotive::BaseHelper
     resource.persisted? || !resource.errors.empty?
   end
 
-  def admin_content_menu_item(name, url, options = {}, &block) # TODO: rename method name (remove admin)
+  def submenu_entry(name, url, options = {}, &block) # TODO: rename method name (remove admin)
     default_options = { :i18n => true, :css => name.dasherize.downcase }
     default_options.merge!(options)
 

app/helpers/locomotive/content_types_helper.rb

@@ -45,7 +45,7 @@ module Locomotive::ContentTypesHelper
       url = contents_url(content_type.slug)
       css = @content_type && content_type.slug == @content_type.slug ? 'on' : ''
 
-      html = admin_content_menu_item(label, url, :i18n => false, :css => css) do
+      html = submenu_entry(label, url, :i18n => false, :css => css) do
         yield(content_type)
       end
 
@@ -59,7 +59,7 @@ module Locomotive::ContentTypesHelper
     if types.size > MAX_DISPLAYED_CONTENTS
       sliced = types[MAX_DISPLAYED_CONTENTS, types.size - MAX_DISPLAYED_CONTENTS]
 
-      html = admin_content_menu_item('...', '#', :i18n => false) do
+      html = submenu_entry('...', '#', :i18n => false) do
         yield(sliced)
       end
 

app/views/locomotive/pages/_form.html.haml

@@ -3,9 +3,10 @@
   = render '/locomotive/theme_assets/picker'
   = render 'editable_elements'
 
-- content_for :backbone_view_data do
+- if @page.persisted?
-  :plain
+  - content_for :backbone_view_data do
-    { page: #{@page.to_json} }
+    :plain
+      { page: #{@page.to_json} }
 
 - if can?(:manage, @page)
 

app/views/locomotive/shared/menu/_contents.html.haml

@@ -1,14 +1,15 @@
-= admin_content_menu_item 'pages', pages_url do
+= submenu_entry 'pages', pages_url do
-  - if can? :manage, @page
+  .wrapper
-    .header
+    - if can? :manage, @page
-      %p= link_to t('locomotive.pages.index.new'), new_page_url
+      .header
-  .inner
+        %p= link_to t('locomotive.pages.index.new'), new_page_url
-    %h2!= t('locomotive.pages.index.lastest_items')
+    .inner
-    %ul
+      %h2!= t('locomotive.pages.index.lastest_items')
-      - current_site.pages.latest_updated.minimal_attributes.each do |page|
+      %ul
-        %li
+        - current_site.pages.latest_updated.minimal_attributes.each do |page|
-          = link_to truncate(page.title, :length => 25), edit_page_url(page)
+          %li
-          %span= time_ago_in_words(page.updated_at)
+            = link_to truncate(page.title, :length => 25), edit_page_url(page)
+            %span= time_ago_in_words(page.updated_at)
 
 - each_content_type_menu_item do |content_type|
   .header

doc/TODO

@@ -8,9 +8,12 @@ x bugs:
   x undefined method `_selector' for #<Locomotive::Page:0x00000107434768>
 x editable_elements => view + handlebar template
 x editable_short_text => tinymce
-- editable_file => new formtastic inputs
+- editable_file =>
+  x backbone / handlebar
+  - new formtastic inputs
+- menu / submenu in full css3 (no images)
 - create/edit page in ajax
-- fix other pages
+- fix other sections
   - content types
   - edit my account
   - create a new site

lib/locomotive/render.rb

@@ -61,7 +61,7 @@ module Locomotive
         assigns = {
           'site'              => current_site,
           'page'              => @page,
-          'asset_collections' => Locomotive::Liquid::Drops::AssetCollections.new, # depracated, will be removed shortly
+          'asset_collections' => Locomotive::Liquid::Drops::AssetCollections.new, # deprecated, will be removed shortly
           'contents'          => Locomotive::Liquid::Drops::Contents.new,
           'current_page'      => self.params[:page],
           'params'            => self.params,
@@ -73,7 +73,7 @@ module Locomotive
 
         assigns.merge!(Locomotive.config.context_assign_extensions)
 
-        assigns.merge!(flash.stringify_keys) # data from api
+        assigns.merge!(flash.to_hash.stringify_keys) # data from api
 
         if @page.templatized? # add instance from content type
           assigns['content_instance'] = @content_instance