// fix nav

This commit is contained in:
Kevin Granger
2013-09-13 17:48:46 +02:00
parent be0592d5a2
commit bcfd092a1d
5 changed files with 76 additions and 93 deletions
+66 -84
View File
@@ -11,87 +11,82 @@
border-top: 1px black solid border-top: 1px black solid
list-style: none list-style: none
li.maintab > a > i li.maintab > a > i
font-size: 20px display: inline-block
@include border-radius(40px)
height: 30px height: 30px
width: 30px width: 30px
color: white font-size: 20px
display: inline-block
text-align: center
line-height: 30px line-height: 30px
color: white
text-align: center
@include border-radius(40px)
li:not(.active) li:not(.active)
ul ul
display: none display: none
li.expanded
color: lighten($main-color,30%)!important
span.submenu_expand
@extend .icon-angle-up
ul.submenu
display: block
li a
color: lighten($main-color,30%)!important
background-color: darken($main-color,20%)!important
border-bottom: solid 1px lighten($main-color,10%)!important
&:last-child a
border: none!important
li.active li.active
span.submenu_expand span.submenu_expand
display: none display: none
> ul.menu > li.maintab ul.menu
position: relative li.maintab
&.active > a
color: contrast-color($brand-primary, white, #333, 10%)
background-color: $brand-primary
i
color: black
background-color: white
&.active:hover > a
color: contrast-color($main-color, white, #333, 10%)
&:hover > a
i
background-color: white
> a
display: block
position: relative position: relative
padding: 2px 0 2px 8px &.active > a
border-bottom: 1px solid darken($main-color,10%) color: contrast-color($brand-primary, white, #333, 10%)
font-size: 12px background-color: $brand-primary
line-height: 28px i
$color: contrast-color($main-color, white, #333, 10%) color: black
color: mix($main-color, $color, 30%) background-color: white
background-color: $main-color &.active > a:hover
text-transform: uppercase color: contrast-color($main-color, white, #333, 10%)
text-decoration: none &.expanded
@include transition-property(background-color, border, box-shadow) color: lighten($main-color,30%)!important
@include transition-duration(0.4s) background-color: darken($main-color,10%)
@include transition-timing-function(ease-out) span.submenu_expand
i @extend .icon-angle-up
color: lighten($main-color,25%) ul.submenu
background-color: darken($main-color,25%) display: block
@include transition-property(color) li a
color: lighten($main-color,30%)
background-color: darken($main-color,20%)
border-bottom: solid 1px darken($main-color,20%)
&:last-child a
border: none
> a
display: block
position: relative
padding: 2px 0 2px 8px
border-bottom: 1px solid darken($main-color,10%)
font-size: 12px
line-height: 28px
$color: contrast-color($main-color, white, #333, 10%)
color: mix($main-color, $color, 30%)
background-color: $main-color
text-transform: uppercase
text-decoration: none
@include transition-property(background-color, border, box-shadow)
@include transition-duration(0.4s) @include transition-duration(0.4s)
@include transition-timing-function(ease-out) @include transition-timing-function(ease-out)
&:hover i
color: white color: lighten($main-color,25%)
span.submenu_expand background-color: darken($main-color,25%)
position: absolute @include transition-property(color)
right: 10px @include transition-duration(0.4s)
top: 2px @include transition-timing-function(ease-out)
cursor: pointer &:hover
@extend .icon-angle-down color: white
font-family: FontAwesome span.submenu_expand
font-size: 24px position: absolute
font-weight: 100 right: 10px
color: black top: 2px
@include text-shadow(lighten($main-color,10%) 1px 1px 0) cursor: pointer
background-color: transparent @extend .icon-angle-down
&:hover font-family: FontAwesome
color: white font-size: 24px
@include text-shadow(darken($main-color,20%) -1px -1px 0) font-weight: 100
@media (max-width: $screen-tablet) color: black
display: none @include text-shadow(lighten($main-color,10%) 1px 1px 0)
background-color: transparent
&:hover
color: white
@include text-shadow(darken($main-color,20%) -1px -1px 0)
ul.submenu ul.submenu
list-style: none list-style: none
padding: 0 padding: 0
@@ -113,6 +108,8 @@
color: contrast-color($brand-primary, white, #333, 10%) color: contrast-color($brand-primary, white, #333, 10%)
background-color: $brand-primary background-color: $brand-primary
border-bottom: solid 1px darken($brand-primary,10%) border-bottom: solid 1px darken($brand-primary,10%)
@media (max-width: $screen-tablet)
display: none
#nav-topbar #nav-topbar
position: fixed position: fixed
@@ -266,45 +263,30 @@
.icon-AdminDashboard .icon-AdminDashboard
@extend .icon-dashboard @extend .icon-dashboard
background-color: adjust-hue($icon-color, 0)
.icon-AdminCatalog .icon-AdminCatalog
@extend .icon-book @extend .icon-book
background-color: adjust-hue($icon-color, 30)
.icon-AdminParentOrders .icon-AdminParentOrders
@extend .icon-credit-card @extend .icon-credit-card
background-color: adjust-hue($icon-color, 60)
.icon-AdminParentCustomer .icon-AdminParentCustomer
@extend .icon-group @extend .icon-group
background-color: adjust-hue($icon-color, 90)
.icon-AdminPriceRule .icon-AdminPriceRule
@extend .icon-tags @extend .icon-tags
background-color: adjust-hue($icon-color, 120)
.icon-AdminParentShipping .icon-AdminParentShipping
@extend .icon-truck @extend .icon-truck
background-color: adjust-hue($icon-color, 150)
.icon-AdminParentLocalization .icon-AdminParentLocalization
@extend .icon-globe @extend .icon-globe
background-color: adjust-hue($icon-color, 180)
.icon-AdminParentModules .icon-AdminParentModules
@extend .icon-puzzle-piece @extend .icon-puzzle-piece
background-color: adjust-hue($icon-color, 210)
.icon-AdminParentPreferences .icon-AdminParentPreferences
@extend .icon-wrench @extend .icon-wrench
background-color: adjust-hue($icon-color, 240)
.icon-AdminTools .icon-AdminTools
@extend .icon-cogs @extend .icon-cogs
background-color: adjust-hue($icon-color, 270)
.icon-AdminAdmin .icon-AdminAdmin
@extend .icon-cog @extend .icon-cog
background-color: adjust-hue($icon-color, 300)
.icon-AdminParentStats .icon-AdminParentStats
@extend .icon-bar-chart @extend .icon-bar-chart
background-color: adjust-hue($icon-color, 330)
.icon-AdminStock .icon-AdminStock
@extend .icon-archive @extend .icon-archive
background-color: adjust-hue($icon-color, 360)
[class^="icon-Admin"] [class^="icon-Admin"]
background-color: black
margin-right: 6px margin-right: 6px
color: white
File diff suppressed because one or more lines are too long
@@ -124,8 +124,7 @@ html, body
border-left: solid 1px #ccc border-left: solid 1px #ccc
&:hover &:hover
text-decoration: none text-decoration: none
color: white color: black
background-color: $brand-primary
i i
text-align: center text-align: center
font-size: 1.2em font-size: 1.2em
@@ -304,7 +303,7 @@ input[type="password"].input-tiny
td.actions td.actions
min-width: 200px min-width: 200px
.btn-group-action .btn-group-action
min-width: 200px float: right
a a
text-decoration: none text-decoration: none
@@ -338,12 +337,14 @@ hr
border-collapse: separate border-collapse: separate
border-spacing: 0 2px border-spacing: 0 2px
margin-bottom: 5px margin-bottom: 5px
thead th
background-color: darken($bg-content-color,10%)
thead > tr > th thead > tr > th
border: none
font-weight: normal font-weight: normal
vertical-align: top vertical-align: top
span.title_box span.title_box
color: black
font-size: 1.1em
font-weight: bold
display: block display: block
word-wrap: nowrap word-wrap: nowrap
white-space: nowrap white-space: nowrap
@@ -363,6 +364,7 @@ hr
vertical-align: middle vertical-align: middle
word-wrap: nowrap word-wrap: nowrap
font-size: 12px font-size: 12px
border-bottom: solid 1px #eee
//@include box-shadow(rgba(black,0.15) 0 1px 0) //@include box-shadow(rgba(black,0.15) 0 1px 0)
td.center, th.center td.center, th.center
@@ -376,7 +378,7 @@ hr
//filter table //filter table
tr.filter tr.filter
background-color: $bg-content-color background-color: lighten($brand-primary,25%)
input[type="text"].filter, input[type="password"].filter, select.filter input[type="text"].filter, input[type="password"].filter, select.filter
font-size: 12px font-size: 12px
+1 -2
View File
@@ -49,6 +49,7 @@ $( document ).ready(function() {
} }
//nav top bar //nav top bar
function navTopbar(){ function navTopbar(){
$('span.submenu_expand').remove();
$('.expanded').removeClass('expanded'); $('.expanded').removeClass('expanded');
$('#nav-topbar').on('mouseenter', 'li.maintab.has_submenu', $('#nav-topbar').on('mouseenter', 'li.maintab.has_submenu',
@@ -80,7 +81,6 @@ $( document ).ready(function() {
//nav switch //nav switch
function navSwitch(){ function navSwitch(){
if ($('body').hasClass('page-sidebar')||$('body').hasClass('page-sidebar-closed')) { if ($('body').hasClass('page-sidebar')||$('body').hasClass('page-sidebar-closed')) {
$('body').removeClass('page-sidebar').removeClass('page-sidebar-closed').addClass('page-topbar'); $('body').removeClass('page-sidebar').removeClass('page-sidebar-closed').addClass('page-topbar');
$('#nav-sidebar').attr('id','nav-topbar'); $('#nav-sidebar').attr('id','nav-topbar');
@@ -101,7 +101,6 @@ $( document ).ready(function() {
navTopbar(); navTopbar();
} }
$('#header_shopname').on('click', $('#header_shopname').on('click',
function(e){ function(e){
e.preventDefault(); e.preventDefault();
@@ -303,7 +303,7 @@
</th> </th>
{/if} {/if}
{if $has_actions} {if $has_actions}
<th>{l s='Actions'}{if !$simple_header}{/if}</th> <th>{if !$simple_header}{/if}</th>
{/if} {/if}
</tr> </tr>
{if !$simple_header && $show_filters} {if !$simple_header && $show_filters}