Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

refactor nav icons

Browse source
This commit is contained in:
Felix Niklas 2014-08-07 23:53:23 +02:00
parent b0614d03f2
commit 9b3bf66ffd
2 changed files with 69 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/assets/javascripts/app/views/navigation.jst.eco
View file

@ -15,7 +15,9 @@
<% for item in @navbar_left: %>
<% if item.child: %>
<li class="dropdown <%= item.class %> <% if @open_tab[item.target] : %>open<% end %>">
<a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown"><%- @T( item.name ) %> <b class="caret"></b></a>
<a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown">
<%- @T( item.name ) %> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<% for item in item.child: %>
<% if item.divider: %>
@ -29,11 +31,29 @@
</ul>
</li>
<% else: %>
<li class="<%= item.class %> <% if @active_tab[item.target] : %>active<% end %>"><a href="<%= item.target %>"><%- @T( item.name ) %></a></li>
<li class="<%= item.class %> <% if @active_tab[item.target] : %>active<% end %>">
<a class="horizontal center" href="<%= item.target %>">
<span class="nav-item-icon">
<span class="<%= item.class %> icon"></span>
</span>
<span class="nav-item-name flex">
<%- @T( item.name ) %>
</span>
</a>
</li>
<% end %>
<% end %>
<li class="customers"><a href="#to_somewhere">Customers</a></li>
<li class="customers">
<a class="horizontal center" href="#to_somewhere">
<span class="nav-item-icon">
<span class="customers icon"></span>
</span>
<span class="nav-item-name flex">
Customers
</span>
</a>
</li>
</ul>

78
app/assets/stylesheets/zzz.css.erb
View file

@ -835,6 +835,42 @@ ol.tabs li {
background-position: 20px 20px; /* make icon empty */
}
.dashboard.icon,
.overviews.icon,
.customers.icon,
.group.icon,
.message.icon,
.tools.icon,
.person.icon {
width: 24px;
height: 25px;
}
.dashboard.icon {
background-position: 0 0;
}
.overviews.icon {
background-position: -24px 0;
}
.group.icon,
.customers.icon {
background-position: -48px 0;
}
.message.icon {
background-position: -72px 0;
}
.tools.icon {
background-position: -96px 0;
}
.person.icon {
background-position: -120px 0;
}
.light.cog.icon {
background-position: 0 -56px;
}
@ -964,6 +1000,7 @@ ol.tabs li {
width: 14px;
background-position: -28px -115px;
}
.icon-switch:hover .note.icon,
.task.active .note.icon {
background-position: -28px -128px;
@ -974,6 +1011,7 @@ ol.tabs li {
width: 14px;
background-position: -42px -115px;
}
.icon-switch:hover .pen.icon,
.task.active .pen.icon {
background-position: -42px -128px;
@ -1533,14 +1571,9 @@ footer {
color: #F0FAFF;
}
.navigation .nav > li.active > a:before,
.navigation .nav > li > a:hover:before,
.navigation .nav > li > a:focus:before {
opacity: 1;
}
.navbar-nav > li > a {
padding: 11px 15px;
padding: 0 15px;
height: 48px;
color: rgba(240, 250, 255, .25);
border-bottom: 1px solid rgba(240, 250, 255, .05);
}
@ -1549,35 +1582,16 @@ footer {
background: #389ed9;
}
li.dashboard a:before,
li.overviews a:before,
li.message a:before,
li.tools a:before,
li.customers a:before {
content: '';
width: 24px;
height: 25px;
.navigation .nav-item-icon .icon {
margin-right: 15px;
display: inline-block;
background: url(<%= asset_path "sprite.svg" %>) no-repeat;
opacity: 0.25;
vertical-align: bottom;
opacity: .25;
}
li.overviews a:before {
background-position: -24px 0;
}
li.customers a:before {
background-position: -48px 0;
}
li.message a:before {
background-position: -72px 0;
}
li.tools a:before {
background-position: -96px 0;
.navigation .nav > li.active > .icon,
.navigation .nav > li > a:hover .icon,
.navigation .nav > li > a:focus .icon {
opacity: 1;
}
.tasks {