fix menu dropdown

This commit is contained in:
Felix Niklas 2015-10-07 14:18:32 +02:00
parent 3addfd1c10
commit 12892862e9
2 changed files with 27 additions and 25 deletions

View file

@ -1,6 +1,7 @@
<% for item in @items: %> <% for item in @items: %>
<% if item.child: %> <% if item.child: %>
<a href="<%= item.target %>" class="dropdown-toggle dropdown<%- ' open' if @open_tab[item.target] %>" data-toggle="dropdown"> <div class="dropdown<%- ' open' if @open_tab[item.target] %>">
<a href="<%= item.target %>" class="menu-item js-<%- item.class %>MenuItem dropdown-toggle" data-toggle="dropdown">
<%- @Icon(item.class, 'menu-item-icon') %> <%- @Icon(item.class, 'menu-item-icon') %>
<span class="menu-item-name flex"> <span class="menu-item-name flex">
<%- @T(item.name) %> <%- @T(item.name) %>
@ -18,22 +19,22 @@
<li class="<% if @active_tab[item.target] : %>active<% end %>"><a href="<%= item.target %>"><%- @T( item.name ) %><% if item['count'] isnt undefined: %><span class="badge badge--text count"><%= item['count'] %></span><% end %></a></li> <li class="<% if @active_tab[item.target] : %>active<% end %>"><a href="<%= item.target %>"><%- @T( item.name ) %><% if item['count'] isnt undefined: %><span class="badge badge--text count"><%= item['count'] %></span><% end %></a></li>
<% end %> <% end %>
</ul> </ul>
</li> </div>
<% else: %> <% else: %>
<a class="menu-item js-<%- item.class %>MenuItem<%- ' is-active' if @active_tab[item.target] %>" href="<%= item.target %>"> <a class="menu-item js-<%- item.class %>MenuItem<%- ' is-active' if @active_tab[item.target] %>" href="<%= item.target %>">
<%- @Icon(item.class, 'menu-item-icon') %> <%- @Icon(item.class, 'menu-item-icon') %>
<span class="menu-item-name"> <span class="menu-item-name">
<%- @T(item.name) %> <%- @T(item.name) %>
</span> </span>
<% if item.counter: %> <% if item.counter: %>
<span class="counter badge badge--big"></span> <span class="counter badge badge--big"></span>
<% end %> <% end %>
<% if item.switch: %> <% if item.switch: %>
<span class="zammad-switch zammad-switch--dark zammad-switch--small"> <span class="zammad-switch zammad-switch--dark zammad-switch--small">
<input type="checkbox" id="<%- item.class %>-switch"> <input type="checkbox" id="<%- item.class %>-switch">
<label for="<%- item.class %>-switch"></label> <label for="<%- item.class %>-switch"></label>
</span> </span>
<% end %> <% end %>
</a> </a>
<% end %> <% end %>
<% end %> <% end %>

View file

@ -2289,6 +2289,12 @@ footer {
height: 22px; height: 22px;
} }
.menu .dropdown-menu {
left: 10px;
right: 15px;
min-width: 0;
}
.menu-item { .menu-item {
padding: 0 15px; padding: 0 15px;
height: 48px; height: 48px;
@ -2297,12 +2303,13 @@ footer {
text-decoration: none; text-decoration: none;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer;
&:hover { &:hover {
background: hsl(230,10%,13%); background: hsl(230,10%,13%);
border-bottom-color: rgba(240, 250, 255, .08); border-bottom-color: rgba(240, 250, 255, .08);
} }
&.is-active, &.is-active,
&.is-hovered { &.is-hovered {
background: none; background: none;
@ -2325,13 +2332,7 @@ footer {
} }
.dropdown-icon { .dropdown-icon {
fill: hsl(206,7%,37%); fill: currentColor;
}
.dropdown-menu {
left: 10px;
right: 15px;
min-width: 0;
} }
} }