dinislage/PrestaShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

// fix menu, design, css

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