Updates admin top bar html and styles

This commit is contained in:
decabeza
2018-04-09 18:03:46 +02:00
parent fcae2c0ac2
commit 55c3c79879
2 changed files with 42 additions and 28 deletions

View File

@@ -44,26 +44,34 @@ $sidebar-active: #f4fcd0;
background: #000; background: #000;
} }
.admin-top-bar {
background: #fff;
}
.top-bar { .top-bar {
background: #fff !important; background: #fff !important;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
box-shadow: 0 2px 2px #eee;
color: #000; color: #000;
height: auto; height: auto;
@include breakpoint(medium) {
box-shadow: 0 2px 2px #eee;
}
[class^="icon-"]:not(.icon-circle) { [class^="icon-"]:not(.icon-circle) {
font-size: $base-font-size; font-size: $base-font-size;
} }
} }
.top-bar-title { .menu .menu-text {
h1 { h1 {
margin-bottom: 0;
margin-top: $line-height / 2; margin-top: $line-height / 2;
margin-bottom: 0;
@include breakpoint(medium) { @include breakpoint(medium) {
margin-left: $line-height / 2; margin-left: $line-height / 2;
margin-top: 0;
} }
small { small {
@@ -94,12 +102,17 @@ $sidebar-active: #f4fcd0;
} }
} }
.menu-icon.dark { .title-bar {
color: #000;
position: absolute;
right: 12px;
}
&::after, .menu-icon {
&:hover::after {
background: #000 !important; &::after {
box-shadow: 0 7px 0 #000, 0 14px 0 #000 !important; background: #000;
box-shadow: 0 7px 0 #000, 0 14px 0 #000;
} }
} }

View File

@@ -1,38 +1,39 @@
<header class="header"> <header class="header">
<div class="top-links"> <div class="top-links">
<div class="expanded row"> <div class="expanded row">
<%= render 'shared/locale_switcher' %> <%= render "shared/locale_switcher" %>
</div> </div>
</div> </div>
<div class="expanded row"> <div class="expanded row admin-top-bar">
<div class="title-bar" data-responsive-toggle="responsive_menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="responsive_menu"></button>
<div class="title-bar-title"><%= t("application.menu")%></div>
</div>
<div class="top-bar"> <div class="top-bar">
<div class="top-bar-left">
<span data-responsive-toggle="responsive_menu" data-hide-for="medium" class="float-right"> <ul class="menu">
<span class="menu-icon dark" data-toggle></span> <li class="menu-text">
<%= t("application.menu")%>
</span>
<div class="top-bar-title">
<h1> <h1>
<%= link_to admin_root_path do %> <%= link_to namespaced_root_path do %>
<%= setting['org_name'] %> <%= setting["org_name"] %>
<br><small><%= namespaced_header_title %></small> <br><small><%= namespaced_header_title %></small>
<% end %> <% end %>
</h1> </h1>
</li>
</ul>
</div> </div>
<div id="responsive_menu">
<div id="responsive_menu">
<div class="top-bar-right"> <div class="top-bar-right">
<ul class="menu" data-responsive-menu="medium-dropdown"> <ul class="dropdown menu" data-dropdown-menu>
<%= render "admin/shared/admin_shortcuts" %> <%= render "admin/shared/admin_shortcuts" %>
<%= render "shared/admin_login_items" %> <%= render "shared/admin_login_items" %>
<%= render "layouts/notification_item" %> <%= render "layouts/notification_item" %>
<%= render "devise/menu/login_items" %> <%= render "devise/menu/login_items" %>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>