//fix layout and contrasted colors
This commit is contained in:
Kevin Granger
@@ -1,4 +1,3 @@
|
||||
//do some sass magic with color schemes
|
||||
//light
|
||||
//$main-color: #DBD8CF //sable
|
||||
//$main-color: #CFD7DD //bleu
|
||||
@@ -53,6 +52,7 @@ $bg-content-color: #F6F6F6 //gris
|
||||
//heading
|
||||
//$bg-header-color: darken($secondary-color,20%)
|
||||
$bg-header-color: darken($main-color,10%)
|
||||
$bg-footer-color: darken($main-color,10%)
|
||||
$bg-page-head-color : $secondary-color
|
||||
$bg-panel-heading-color: lighten($secondary-color,30%)
|
||||
|
||||
@@ -68,11 +68,10 @@ $icon-color: #87C795
|
||||
|
||||
html, body
|
||||
height: 100%
|
||||
min-height: 700px
|
||||
//min-height: 700px
|
||||
|
||||
body.fixed-top
|
||||
position: relative
|
||||
top: 35px
|
||||
//position: relative
|
||||
|
||||
#header_infos
|
||||
background-color: $bg-header-color
|
||||
@@ -88,20 +87,22 @@ body.fixed-top
|
||||
background-color: $badge-notif-color
|
||||
|
||||
#main
|
||||
position: relative
|
||||
min-height: 100%
|
||||
height: auto!important
|
||||
padding: 35px 0 60px
|
||||
margin: 0 0 -60px
|
||||
|
||||
.container-fluid, .row-fluid
|
||||
width: 100%
|
||||
|
||||
#content
|
||||
min-height: 700px
|
||||
padding: 90px 20px 20px
|
||||
margin-left: 240px
|
||||
@include transition-property(margin)
|
||||
@include transition-duration(0.4s)
|
||||
@include transition-timing-function(ease-out)
|
||||
background-color: $bg-content-color
|
||||
//background-image: url('../img/patterns/bedge_grunge.png') // texture
|
||||
background-image: url('../img/patterns/bedge_grunge.png') // texture
|
||||
fieldset, .panel
|
||||
padding: 20px
|
||||
margin-bottom: 20px
|
||||
@@ -182,7 +183,6 @@ body.fixed-top
|
||||
#sidebar
|
||||
z-index: 9001
|
||||
float: left
|
||||
//position: absolute
|
||||
width: 240px
|
||||
background-color: $main-color
|
||||
border-bottom: 1px solid lighten($main-color,5%)
|
||||
@@ -204,22 +204,31 @@ body.fixed-top
|
||||
display: block
|
||||
background-color: white
|
||||
> li
|
||||
&:hover > a, &.active > a
|
||||
@include contrasted($secondary-color)
|
||||
&.active > a
|
||||
color: contrast-color($main-color, #333, white, 30%)
|
||||
background-color: $secondary-color
|
||||
border-top: 1px solid lighten($secondary-color,10%)
|
||||
border-bottom: 1px solid darken($secondary-color,10%)
|
||||
@include box-shadow(darken($secondary-color,10%) -4px 0 0 inset)
|
||||
i
|
||||
color: $secondary-color!important
|
||||
color: $brand-primary!important
|
||||
background-color: white
|
||||
&.active:hover > a
|
||||
color: white
|
||||
@include box-shadow(darken($secondary-color,10%) -4px 0 0 inset)
|
||||
&:hover > a
|
||||
|
||||
@include box-shadow($brand-primary -4px 0 0 inset)
|
||||
i
|
||||
color: $brand-primary!important
|
||||
background-color: white
|
||||
> a
|
||||
display: block
|
||||
padding: 5px 0 5px 5px
|
||||
padding: 3px 0 3px 5px
|
||||
border-top: 1px solid lighten($main-color,5%)
|
||||
border-bottom: 1px solid darken($main-color,10%)
|
||||
$color: contrast-color($main-color, #333, white, 30%)
|
||||
color: mix($color, $main-color, 60%)
|
||||
color: mix($main-color, $color, 30%)
|
||||
text-transform: uppercase
|
||||
text-decoration: none
|
||||
@include transition-property(background-color, border, box-shadow)
|
||||
@@ -240,22 +249,26 @@ body.fixed-top
|
||||
li
|
||||
a
|
||||
display: block
|
||||
padding: 3px 10px 3px 10px
|
||||
padding: 3px 5px 3px 10px
|
||||
font-size: 12px
|
||||
border: none
|
||||
border-bottom: solid 1px #eee
|
||||
background-color: white
|
||||
@include box-shadow($main-color -4px 0 0 inset)
|
||||
i
|
||||
margin-top: 3px
|
||||
color: $secondary-color
|
||||
&:hover
|
||||
background-color: lighten($secondary-color,35%)
|
||||
color: $brand-primary
|
||||
background-color: mix(white, $main-color, 90%)
|
||||
text-decoration: none
|
||||
@include box-shadow($brand-primary -4px 0 0 inset)
|
||||
i
|
||||
color: $main-color
|
||||
&.active
|
||||
a
|
||||
@include contrasted(darken($secondary-color,0%))
|
||||
background-color: darken($secondary-color,0%)
|
||||
@include contrasted($brand-primary)
|
||||
background-color: $brand-primary
|
||||
i
|
||||
color: $main-color
|
||||
|
||||
@@ -273,7 +286,6 @@ body.fixed-top
|
||||
> ul > li:hover
|
||||
width: 250px!important
|
||||
position: relative
|
||||
@include box-shadow(rgba(black,0.15) 4px 4px 0 )
|
||||
span.title
|
||||
display: inline-block
|
||||
ul.submenu
|
||||
@@ -281,7 +293,6 @@ body.fixed-top
|
||||
position: absolute
|
||||
left: 50px
|
||||
width: 200px!important
|
||||
@include box-shadow(rgba(black,0.30) 4px 4px 8px )
|
||||
|
||||
#content
|
||||
margin-left: 50px
|
||||
@@ -613,10 +624,11 @@ tr.filter
|
||||
font-weight: 500
|
||||
|
||||
#footer
|
||||
display: block
|
||||
width: 100%
|
||||
float: left
|
||||
height: 60px
|
||||
padding: 5px 0
|
||||
background-color: black
|
||||
background-color: $bg-footer-color
|
||||
color: #888
|
||||
a
|
||||
color: #ccc
|
||||
|
||||
Reference in New Issue
Block a user