menu and submenu in full css3 (without any images) + delete useless images + clean the code (wip)
Before Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 141 B |
Before Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 6.7 KiB |
Before Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 3.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 235 B |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 525 B |
Before Width: | Height: | Size: 311 B |
Before Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 979 B |
Before Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 114 B |
Before Width: | Height: | Size: 113 B |
Before Width: | Height: | Size: 139 B |
Before Width: | Height: | Size: 138 B |
Before Width: | Height: | Size: 43 B |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 107 B |
Before Width: | Height: | Size: 106 B |
Before Width: | Height: | Size: 347 B |
Before Width: | Height: | Size: 324 B |
Before Width: | Height: | Size: 111 B |
Before Width: | Height: | Size: 352 B |
Before Width: | Height: | Size: 340 B |
Before Width: | Height: | Size: 103 B |
Before Width: | Height: | Size: 503 B |
Before Width: | Height: | Size: 96 B |
Before Width: | Height: | Size: 70 B |
Before Width: | Height: | Size: 506 B |
Before Width: | Height: | Size: 203 B |
Before Width: | Height: | Size: 176 B |
Before Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 355 B |
Before Width: | Height: | Size: 698 B |
Before Width: | Height: | Size: 727 B |
Before Width: | Height: | Size: 344 B |
@ -27,14 +27,24 @@ class Locomotive.Views.ApplicationView extends Backbone.View
|
|||||||
$('.ui-dialog-content:visible').dialog('option', 'position', 'center')
|
$('.ui-dialog-content:visible').dialog('option', 'position', 'center')
|
||||||
|
|
||||||
add_submenu_behaviours: ->
|
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')
|
css = $('#submenu > ul').attr('class')
|
||||||
|
@ -72,7 +72,7 @@ class Locomotive.Views.Pages.FormView extends Locomotive.Views.Shared.FormView
|
|||||||
@editor.refresh()
|
@editor.refresh()
|
||||||
|
|
||||||
render_editable_elements: ->
|
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) ->
|
fill_default_slug: (event) ->
|
||||||
unless @filled_slug
|
unless @filled_slug
|
||||||
|
@ -115,6 +115,7 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||||
|
border-bottom-color: rgba(0, 0, 0, 0.6);
|
||||||
@include border-radius(5px);
|
@include border-radius(5px);
|
||||||
|
|
||||||
line-height: 19px !important;
|
line-height: 19px !important;
|
||||||
@ -122,7 +123,7 @@
|
|||||||
padding: 0px 7px;
|
padding: 0px 7px;
|
||||||
|
|
||||||
@include background-image(linear-gradient(top, #2abaf1, #228dda));
|
@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;
|
font-size: 12px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -83,19 +83,23 @@ body {
|
|||||||
} // #header
|
} // #header
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
margin-top: -1px;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 997;
|
||||||
|
|
||||||
|
padding-bottom: 8px;
|
||||||
|
|
||||||
> div.inner {
|
> div.inner {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0px 8px;
|
margin: 0px 8px;
|
||||||
padding: 10px 15px 20px 15px;
|
padding: 10px 15px 20px 15px;
|
||||||
|
|
||||||
z-index: 100;
|
// z-index: 100;
|
||||||
|
|
||||||
background: #fff;
|
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;
|
min-height: 150px;
|
||||||
|
|
||||||
|
@ -4,5 +4,5 @@
|
|||||||
* the top of the compiled file, but it's generally better to create a new file per style scope.
|
* 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/sub.css
|
||||||
*= require ./menu/main.css
|
*= require ./menu/main.css
|
||||||
*= require ./menu/colors.css
|
*= require ./menu/default.css
|
||||||
*/
|
*/
|
124
app/assets/stylesheets/locomotive/menu/_colors.scss
Normal file
@ -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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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) {
|
@mixin absolute-position($vside, $vvalue, $hside, $hvalue, $display: block) {
|
||||||
display: $display;
|
display: $display;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -30,168 +5,203 @@
|
|||||||
#{$hside}: $hvalue;
|
#{$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 ___ */
|
/* ___ 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; }
|
||||||
|
// }
|
30
app/assets/stylesheets/locomotive/menu/_icons.scss
Normal file
@ -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);
|
||||||
|
}
|
@ -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); }
|
|
||||||
}
|
|
67
app/assets/stylesheets/locomotive/menu/default.scss
Normal file
@ -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); }
|
||||||
|
// }
|
@ -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 {
|
#menu {
|
||||||
@include reset;
|
padding: 0;
|
||||||
margin: 20px 0 0 0px;
|
margin: 20px 8px 0 2px;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
li.item {
|
li.entry {
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
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 {
|
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 {
|
span {
|
||||||
top: 9px;
|
text-decoration: none;
|
||||||
left: 6px;
|
|
||||||
color: #787A89;
|
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; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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";
|
@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 {
|
#submenu {
|
||||||
clear: both;
|
|
||||||
position: relative;
|
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 {
|
& > 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 {
|
& > li {
|
||||||
margin: 15px 7px 0 8px;
|
|
||||||
float: left;
|
float: left;
|
||||||
|
margin: 15px 7px 0 8px;
|
||||||
|
|
||||||
&.hoverable > a span {
|
&.hoverable > a span {
|
||||||
em {
|
em {
|
||||||
@ -97,32 +44,90 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& > a {
|
& > a {
|
||||||
@include 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;
|
||||||
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ___ submenu: actions ___ */
|
&: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 {
|
& > .action {
|
||||||
@include absolute-position(top, 0px, right, 12px);
|
@include absolute-position(top, 0px, right, 12px);
|
||||||
height: 60px;
|
height: 58px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
z-index: 1;
|
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 {
|
a {
|
||||||
@include submenu_link;
|
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
height: 20px;
|
height: 20px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
|
||||||
margin: 18px 0 0 0;
|
margin: 17px 0 0 0;
|
||||||
padding: 0px 10px 0 15px;
|
padding: 0px 10px 0 15px;
|
||||||
|
|
||||||
@include border-radius(10px);
|
@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;
|
text-decoration: none;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
@ -138,22 +143,43 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
color: #fff;
|
||||||
font-size: 11px;
|
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 {
|
||||||
|
|
||||||
.popup {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 42px;
|
|
||||||
min-width: 250px;
|
min-width: 250px;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
|
||||||
background: #fff;
|
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-radius(16px);
|
||||||
@include border-top-left-radius(0px);
|
@include border-top-left-radius(0px);
|
||||||
z-index: 997;
|
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #1f82bc;
|
color: #1f82bc;
|
||||||
@ -242,4 +268,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
} // submenu-popup
|
||||||
|
@ -1,9 +1,13 @@
|
|||||||
%ul#menu
|
%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
|
%em
|
||||||
%span= item[:label]
|
%span= entry[:label]
|
||||||
|
%div.right
|
||||||
|
%span
|
||||||
|
%div.shadow
|
||||||
|
%div
|
||||||
%li.clear
|
%li.clear
|
@ -13,7 +13,7 @@ module Locomotive::BaseHelper
|
|||||||
resource.persisted? || !resource.errors.empty?
|
resource.persisted? || !resource.errors.empty?
|
||||||
end
|
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 = { :i18n => true, :css => name.dasherize.downcase }
|
||||||
default_options.merge!(options)
|
default_options.merge!(options)
|
||||||
|
|
||||||
|
@ -45,7 +45,7 @@ module Locomotive::ContentTypesHelper
|
|||||||
url = contents_url(content_type.slug)
|
url = contents_url(content_type.slug)
|
||||||
css = @content_type && content_type.slug == @content_type.slug ? 'on' : ''
|
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)
|
yield(content_type)
|
||||||
end
|
end
|
||||||
|
|
||||||
@ -59,7 +59,7 @@ module Locomotive::ContentTypesHelper
|
|||||||
if types.size > MAX_DISPLAYED_CONTENTS
|
if types.size > MAX_DISPLAYED_CONTENTS
|
||||||
sliced = types[MAX_DISPLAYED_CONTENTS, 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)
|
yield(sliced)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
= render '/locomotive/theme_assets/picker'
|
= render '/locomotive/theme_assets/picker'
|
||||||
= render 'editable_elements'
|
= render 'editable_elements'
|
||||||
|
|
||||||
|
- if @page.persisted?
|
||||||
- content_for :backbone_view_data do
|
- content_for :backbone_view_data do
|
||||||
:plain
|
:plain
|
||||||
{ page: #{@page.to_json} }
|
{ page: #{@page.to_json} }
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
= admin_content_menu_item 'pages', pages_url do
|
= submenu_entry 'pages', pages_url do
|
||||||
|
.wrapper
|
||||||
- if can? :manage, @page
|
- if can? :manage, @page
|
||||||
.header
|
.header
|
||||||
%p= link_to t('locomotive.pages.index.new'), new_page_url
|
%p= link_to t('locomotive.pages.index.new'), new_page_url
|
||||||
|
7
doc/TODO
@ -8,9 +8,12 @@ x bugs:
|
|||||||
x undefined method `_selector' for #<Locomotive::Page:0x00000107434768>
|
x undefined method `_selector' for #<Locomotive::Page:0x00000107434768>
|
||||||
x editable_elements => view + handlebar template
|
x editable_elements => view + handlebar template
|
||||||
x editable_short_text => tinymce
|
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
|
- create/edit page in ajax
|
||||||
- fix other pages
|
- fix other sections
|
||||||
- content types
|
- content types
|
||||||
- edit my account
|
- edit my account
|
||||||
- create a new site
|
- create a new site
|
||||||
|
@ -61,7 +61,7 @@ module Locomotive
|
|||||||
assigns = {
|
assigns = {
|
||||||
'site' => current_site,
|
'site' => current_site,
|
||||||
'page' => @page,
|
'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,
|
'contents' => Locomotive::Liquid::Drops::Contents.new,
|
||||||
'current_page' => self.params[:page],
|
'current_page' => self.params[:page],
|
||||||
'params' => self.params,
|
'params' => self.params,
|
||||||
@ -73,7 +73,7 @@ module Locomotive
|
|||||||
|
|
||||||
assigns.merge!(Locomotive.config.context_assign_extensions)
|
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
|
if @page.templatized? # add instance from content type
|
||||||
assigns['content_instance'] = @content_instance
|
assigns['content_instance'] = @content_instance
|
||||||
|