Packages
Menus in Zotonic, adds admin interface to define menus and other hierarchical lists.
Current section
Files
Jump to
Current section
Files
priv/lib-src/css/zp-menuedit.less
/* zp-menuedit.css */
ul.tree-list {
padding: 0; margin: 0;
> li:last-child {
margin-bottom: 10px;
}
li {
@_toggle_width: 40px;
@_left_spacing: @_toggle_width;
@_vertical_spacing: 10px;
@_icon_size: 16px;
@_item_height: 34px;
@_line_height: 1.2;
@_side_spacing: (@_toggle_width - @_icon_size) / 2;
&.placeholder {
background: #aaa;
border-radius: 4px;
}
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
line-height: @_item_height;
border: none;
li.menu-item:last-child {
margin: 0;
}
.menu-toggle > i,
.z-icon-drag,
.z-btn-remove {
// width: @_icon_size;
// height: @_icon_size;
font-size: @_icon_size;
line-height: @_item_height;
}
div.menu-wrapper {
display: grid;
grid-template-columns: minmax(10px,auto) auto 1fr auto auto;
grid-template-rows: minmax(34px,auto);
border: 1px solid #aaa; // #e0e0e0;
line-height: @_item_height;
border-radius: 4px;
.menu-drag {
grid-column: 1;
cursor: move;
background: repeat-y url("/lib/images/grippy2.png") 3px 0;
padding: 10px;
}
.menu-toggle {
grid-column: 2;
width: @_toggle_width;
height: @_item_height;
color: #ccc;
display: none;
&:hover {
cursor: pointer;
text-decoration: none;
color: black;
}
> i {
cursor: pointer;
}
> i.menu-collapse {
display: none;
}
> i.menu-expand {
display: block;
}
}
.menu-title,
> a {
grid-column: 3;
line-height: @_item_height;
}
.warning {
grid-column: 4;
line-height: @_item_height;
}
.btns {
grid-column: 5;
margin: 0 4px;
.btn-group {
margin-left: 4px;
display: inline-block;
}
}
>.z-btn-remove {
grid-column: 5;
margin: 0 4px;
height: @_item_height;
width: 24px;
padding-right: 4px;
}
.menu-edit {
cursor: pointer;
}
}
&.has-submenu {
> div {
a.menu-toggle {
display: block;
}
}
}
&.submenu-open {
> div {
a.menu-toggle {
> i.menu-collapse {
display: block;
}
> i.menu-expand {
display: none;
}
}
}
}
> ul {
display: none;
}
&.submenu-open {
> ul {
display: block;
}
}
}
}
.menu-edit {
a {
float: right;
}
}
.menu-item {
.category {
color: #999;
}
}
#menu-editor {
.widget-header {
height: 28px;
.btn-group {
margin-right: 12px;
}
}
}