fix menu dropdown
This commit is contained in:
parent
3addfd1c10
commit
12892862e9
2 changed files with 27 additions and 25 deletions
|
@ -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 %>
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue