// fix menu, design, css

This commit is contained in:
Kevin Granger
2013-09-06 16:25:01 +02:00
parent 8e1250dad1
commit fa198aeabc
7 changed files with 95 additions and 112 deletions
File diff suppressed because one or more lines are too long
+86 -98
View File
@@ -1,3 +1,6 @@
$brand-primary: #1BA6E5
//light
//$main-color: #F7F7F7
//$main-color: #DBD8CF //sable
@@ -11,12 +14,12 @@
//$main-color: #515561 //gris bleu clair
//$main-color: #4D4645 //taupe
//$main-color: #272822 //gris vert
//$main-color: #313A45 //gris bleu
$main-color: #313A45 //gris bleu
//$main-color: #443A42 //violet
//$main-color: #373E35 //vert camo
//$main-color: #262C3F //bleu nuit - pretty sure that a girl could do better naming the colors, sorry about that...
//$main-color: #8C8574
$main-color: #3A3A4A
//$main-color: #3A3A4A
//$secondary-color: white //blanc
//$secondary-color: #F5792B //orange
@@ -34,7 +37,7 @@ $main-color: #3A3A4A
//$secondary-color: #60C276 //vert
//$secondary-color: #9DC44B //vert pomme
//$secondary-color: #6992AF //theme wordpress
//$secondary-color: #8BC954 //vert PrestaShop
$secondary-color: #8BC954 //vert PrestaShop
//some tests
//$secondary-color: #79C09D
@@ -43,7 +46,7 @@ $main-color: #3A3A4A
//$secondary-color: adjust-hue($main-color, 80%)
//$hue: hue(adjust-hue($main-color, 80%))
//$secondary-color: hsl($hue, 50%, 50%) //Creates a Color from hue, saturation, and lightness values
$secondary-color: #00A89C
//$secondary-color: #00A89C
//dark and light, love and war, fire and ice, etc...
$contrasted-dark-default: #333
@@ -136,7 +139,7 @@ html, body
padding: 36px 0 60px
margin: 0 0 -60px 0
background-color: $bg-content-color
background-image: url('../img/patterns/bedge_grunge.png') // texture
//background-image: url('../img/patterns/bedge_grunge.png') // texture
#content
padding: 90px 20px 0
@@ -163,7 +166,8 @@ html, body
line-height: 30px
font-weight: 300
text-transform: uppercase
background-color: $bg-panel-heading-color
background-color: white
border-bottom: solid 1px #ccc
i, a
color: contrasted($bg-panel-heading-color)
.badge
@@ -176,6 +180,23 @@ html, body
font-weight: 300
float: left
margin-left: -5px
.panel-heading-action
@extend .pull-right
margin-right: -5px
a.list-tooolbar-btn
float: left
height: 30px
width: 30px
color: $brand-primary
border-left: solid 1px #ccc
&:hover
text-decoration: none
color: white
background-color: $brand-primary
i
text-align: center
font-size: 1.2em
line-height: 30px
.panel-danger .panel-heading
background-color: $badge-notif-color!important
.panel-heading-big
@@ -223,9 +244,6 @@ html, body
margin: 0
.nav-tabs > li > a
color: #333
> .active > a, > .active > a:hover
//color: #3399ff
//background: #f5f5f5
#nav-sidebar
height: 100%!important
@@ -254,37 +272,31 @@ html, body
ul
display: none
li.expanded
.submenu_expand
@extend .icon-angle-up
ul
display: block
background-color: white
li.active
.submenu_expand i
.submenu_expand
display: none
> ul
> li
position: relative
&.active > a
color: contrast-color($main-color, white, #333, 10%)
background-color: $secondary-color
border-top: 1px solid lighten($secondary-color,5%)
border-bottom: 1px solid darken($secondary-color,20%)
@include box-shadow(darken($secondary-color,10%) -4px 0 0 inset)
color: contrast-color($brand-primary, white, #333, 10%)
background-color: $brand-primary
i
color: $brand-primary!important
background-color: white
&.active:hover > a
color: contrast-color($main-color, white, #333, 10%)
@include box-shadow(darken($secondary-color,10%) -4px 0 0 inset)
&:hover > a
@include box-shadow($brand-primary -4px 0 0 inset)
i
color: $secondary-color!important
background-color: white
> a
display: block
position: relative
padding: 2px 0 2px 8px
border-top: 1px solid lighten($main-color,5%)
border-bottom: 1px solid darken($main-color,10%)
font-size: 12px
line-height: 28px
@@ -296,7 +308,6 @@ html, body
@include transition-property(background-color, border, box-shadow)
@include transition-duration(0.4s)
@include transition-timing-function(ease-out)
@include box-shadow(darken($main-color,15%) -4px 0 0 inset)
i
color: lighten($main-color,25%)
background-color: darken($main-color,25%)
@@ -308,41 +319,38 @@ html, body
.submenu_expand
position: absolute
right: 10px
top: 11px
top: 2px
cursor: pointer
@extend .icon-angle-down
font-family: FontAwesome
font-size: 24px
font-weight: 100
color: black
@include text-shadow(lighten($main-color,10%) 1px 1px 0)
background-color: transparent
&:hover
i
color: white
i
font-size: 18px
font-weight: 100
color: black
@include text-shadow(lighten($main-color,10%) 1px 1px 0)
background-color: transparent
color: white
@include text-shadow(darken($main-color,20%) -1px -1px 0)
ul.submenu
a
display: block
padding: 4px 5px 4px 10px
font-size: 12px
border: none
border-bottom: solid 1px #eee
background-color: white
i
margin-top: 3px
color: $secondary-color
&:hover
color: $brand-primary
background-color: mix(white, $main-color, 90%)
text-decoration: none
i
color: $main-color
li.active
li
a
color: contrast-color($brand-primary, white, #333, 10%)
background-color: $brand-primary
i
color: contrast-color($brand-primary, white, #333, 10%)
display: block
padding: 4px 5px 4px 10px
font-size: 12px
border: none
border-bottom: solid 1px #eee
background-color: white
&:hover
color: $main-color
background-color: mix(white, $main-color, 90%)
text-decoration: none
&:last-child a
border-bottom: none
&.active
a
color: contrast-color($secondary-color, white, #333, 10%)
background-color: $secondary-color
border-bottom: solid 1px darken($secondary-color,10%)
@media (max-width: $screen-tablet)
display: none
@@ -357,10 +365,10 @@ html, body
display: none
ul.submenu
display: none!important
padding-top: 38px
padding-top: 37px
position: relative
top: 0
@include box-shadow(rgba(black,0.3) 2px 2px 4px)
@include box-shadow(rgba(black,0.2) 1px 1px 0,rgba(black,0.3) 2px 2px 4px)
> ul > li:hover
width: 250px!important
position: relative
@@ -391,10 +399,9 @@ html, body
text-align: center
line-height: 55px
display: block
background-color: darken($secondary-color,10%)
border-bottom: 3px solid darken($secondary-color,20%)
i
color: lighten($secondary-color,10%)
background-color: $main-color
border-bottom: 3px solid darken($main-color,10%)
color: darken($main-color,30%)
// Tool bar
@@ -570,18 +577,6 @@ input[type="password"].input-tiny
a
text-decoration: none
.btn-default
@include box-shadow(darken($btn-default-bg,10%) 0 -2px 0 inset)
.btn-primary
@include box-shadow(lighten($brand-success,30%) 0 -2px 0 inset)
.btn-default[disabled]
border-color: $gray-light
color: $gray-light
background-color: lighten($gray-light,35%)
@include box-shadow(lighten($gray-light,20%) 0 -2px 0 inset)
.btn
text-transform: uppercase
.caret
@@ -589,6 +584,17 @@ input[type="password"].input-tiny
&:hover, &:focus
.caret
border-top-color: white!important
&.btn-default
@include box-shadow(darken($btn-default-bg,10%) 0 -2px 0 inset)
&.btn-primary
@include box-shadow(lighten($brand-success,30%) 0 -2px 0 inset)
&.btn-default[disabled]
border-color: $gray-light
color: $gray-light
background-color: lighten($gray-light,35%)
@include box-shadow(lighten($gray-light,20%) 0 -2px 0 inset)
hr
border-color: darken($bg-content-color,10%)
@@ -650,14 +656,12 @@ tr.filter
.badge
background-color: $secondary-color
.badge-success
@extend .badge
background-color: $brand-success
.badge-error
@extend .badge
background-color: $brand-danger
&.badge-success
@extend .badge
background-color: $brand-success
&.badge-error
@extend .badge
background-color: $brand-danger
.icon-big
font-size: 4em
@@ -731,7 +735,7 @@ tr.filter
float: left
//WIP
//WIP (refacto, keep it simple, order ...)
//some helpers to get fixed width
.fixed-width-XS
@@ -817,8 +821,8 @@ fieldset > .row
fill: rgba(white,0.30)
stroke-width: 0
.highlighted
background-color: blue
.highlight
background-color: #FFFFC0
//.list-toolbar-btn
#nav-topbar
@@ -934,23 +938,7 @@ fieldset > .row
.btn-group
text-align: left
.panel-heading-action
@extend .pull-right
margin-right: -5px
a.list-tooolbar-btn
float: left
height: 30px
width: 30px
color: $brand-primary
border-left: solid 1px white
&:hover
text-decoration: none
color: white
background-color: $brand-primary
i
text-align: center
font-size: 1.2em
line-height: 30px
//DASHBOARD
@@ -19,12 +19,7 @@ $gray-lighter: lighten(#000, 93.5%) ; //#eee
// Brand colors
// -------------------------
//$brand-primary: #EF1778 ; //rose Prestashop
//$brand-primary: #1EAEC0 ; //bleu turquoise
//$brand-primary: #33556E ;
//$brand-primary: #7F8AAE ;
$brand-primary: #1D7878 ;
//$brand-primary: #EF1778 ; //moved to admin-theme sass
$brand-success: #5cb85c ;
$brand-warning: #f0ad4e ;
+1 -1
View File
@@ -23,7 +23,7 @@
*/
$( document ).ready(function() {
$('#nav-sidebar li.maintab.has_submenu').append('<span class="submenu_expand"><i class="icon-collapse"></i></span>');
$('#nav-sidebar li.maintab.has_submenu').append('<span class="submenu_expand"></span>');
$('#nav-sidebar .submenu_expand').click(function(){
//var $tab = $(this).parent().data('submenu');
var $navId = $(this).parent();
@@ -63,7 +63,7 @@
<input type="checkbox" name="{$input.name}[]" id="{$id_checkbox}" value="{$value[$input.values.id]|intval}" {if isset($fields_value[$id_checkbox]) && $fields_value[$id_checkbox]}checked="checked"{/if} />
{if $value['invoice']}
{$value[$input.values.name]}
<span class="badge-success">
<span class="badge badge-success">
{if isset($statusStats[$value['id_order_state']]) && $statusStats[$value['id_order_state']]}
{$statusStats[$value['id_order_state']]}
{else}
@@ -72,7 +72,7 @@
</span>
{else}
{$value[$input.values.name]}
<span class="badge-error">
<span class="badge badge-error">
{if isset($statusStats[$value['id_order_state']]) && $statusStats[$value['id_order_state']]}
{$statusStats[$value['id_order_state']]}
{else}
@@ -34,7 +34,7 @@
{else}
{if isset($conf)}
<div class="alert">
<div class="alert alert-success">
{$conf}
</div>
{/if}
+2 -2
View File
@@ -58,9 +58,9 @@
</div>
{/if}
{if isset($confirmations) && count($confirmations) && $confirmations}
<div class="alert" style="display:block;">
<div class="alert alert-success" style="display:block;">
{foreach $confirmations as $conf}
{$conf}<br />
{$conf}
{/foreach}
</div>
{/if}