//light
//$main-color: #DBD8CF 			//sable
//$main-color: #CFD7DD			//bleu
//$main-color: #E0E0E0
//$main-color: #D7D6DE 			//violet
//$main-color: #F1F8FE 			//theme wordpress
//dark
//$main-color: #272A31 			//bleu PrestaShop
//$main-color: #3D3D3D 			//gris
//$main-color: #515561 			//gris bleu clair
//$main-color: #4D4645 			//taupe
//$main-color: #272822 			//gris vert
//$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: white
$main-color: #8C8574

//$secondary-color: white		//blanc
//$secondary-color: #F5792B		//orange
//$secondary-color: #81A98C		//vert d'eau
//$secondary-color: #1EAEC0		//bleu
//$secondary-color: #00C3C1		//turquoise
//$secondary-color: #97C885		//vert menthe
//$secondary-color: #4691D2		//bleu ciel
//$secondary-color: #814C76		//violet
//$secondary-color: #FE635F		//saumon
//$secondary-color: #F8235A		//rose
//$secondary-color: #F2B100		//moutarde
//$secondary-color: #F7854E		//abricot
//$secondary-color: #937976		//taupe clair
//$secondary-color: #60C276		//vert
//$secondary-color: #9DC44B		//vert pomme
//$secondary-color: #6992AF		//theme wordpress
//$secondary-color: #8BC954 	//vert PrestaShop

//some tests
$secondary-color: #79C09D
//$secondary-color: invert($main-color)
//$secondary-color: lighten(invert($main-color),20%)
//$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

//dark and light, love and war, fire and ice, etc...
$contrasted-dark-default: #333
$contrasted-light-default: white
$contrasted-lightness-threshold: 10% //30% default

//50 shades of gray
//$bg-content-color: #F8F9FB 	//bleu gris clair
//$bg-content-color: #F8FBF8 	//vert gris clair
$bg-content-color: #F8F8F8 	//gris
//$bg-content-color: #F8F4E3 	//gris foncé
//$bg-content-color: #F6F6F6 		//gris

//heading
//$bg-header-color: darken($secondary-color,20%)
$bg-header-color: #242424
$bg-footer-color: #242424
$bg-page-head-color : $secondary-color
$bg-panel-heading-color: lighten($secondary-color,30%)

//others
$badge-notif-color: #EF1778
$icon-color: #87C795

@import "compass"
@import "bootstrap/variables"
@import "bootstrap"
@import "font-awesome"
@import "toggle-switch"

html, body
	height: 100%
	//min-height: 700px

body.fixed-top
	//position: relative

#header_infos
	background-color: $bg-header-color
	z-index: 9999
	#header_shopname
		font-size: 1.6em
		font-family: "ubuntu"
		font-weight: 300
	#notifs_icon_wrapper
		i
			font-size: 1.5em
		.badge
			background-color: $badge-notif-color

#main
	min-height: 100%
	height: auto!important
	padding: 35px 0 60px
	margin: 0 0 -60px

.container-fluid, .row-fluid
	width: 100%

#content
	min-height: 900px
	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
	fieldset, .panel
		padding: 20px
		margin-bottom: 20px
		border: solid 1px darken($bg-content-color,10%)
		background-color: lighten($bg-content-color,20%)
		@include border-radius(5px)
		@include box-shadow(rgba(black,0.10) 0 2px 0, white 0 0 0 3px inset)
	.panel-heading
		@extend h3
	h3, .panel-heading
		height: 30px
		padding: 0 5px
		margin: -16px -16px 15px -16px
		line-height: 30px
		color: contrasted($bg-panel-heading-color)	
		font-size: 1.2em
		font-weight: 300
		text-transform: uppercase
		background-color: $bg-panel-heading-color
		i, a
			color: contrasted($bg-panel-heading-color)
		.badge
			background-color: lighten($bg-panel-heading-color,20%)
			border-radius: 0
			height: 29px
			line-height: 25px
			font-size: 1.3em
			margin-right: 7px
			font-weight: 300
			float: left
			margin-left: -5px
	.panel-danger .panel-heading
		background-color: $badge-notif-color!important
	.panel-heading-big
		font-size: 2em
		text-align: center
	form .alert
		clear: both
		color: darken(#D6D2CF,40%)
		border: solid 1px darken(#D6D2CF,5%)
		background-color: lighten(#D6D2CF,5%)
		&.alert-info
			background-color: white
			color: darken(#DAEAF8,30%)
			border: none
			border-bottom: solid 1px darken($bg-content-color,10%)
			@include box-shadow(white 0 0 0 1px inset)

.page-head
	width: 100%
	height: 65px
	padding: 5px 10px 0 0
	margin: 0
	border-bottom: 4px solid darken($secondary-color,10%)
	position: fixed
	top: 37px
	left: 0px
	z-index: 9000
	background-color: $secondary-color
	@include box-shadow(rgba(black,0.15) 0 7px 0, rgba(white,0.15) 0 -1px 0 inset)
	h2.page-title
		@extend .pull-left
		padding: 0 0 0 260px
		font-size: 20px
		line-height: 25px
		color: white
		text-transform: uppercase
	.btn-toolbar
		margin: 0
		.nav-tabs
			margin: 0
		.nav-tabs > li > a
			color: #333
			> .active > a, > .active > a:hover
				//color: #3399ff
				//background: #f5f5f5

#sidebar
	z-index: 9001
	float: left
	width: 240px
	background-color: $main-color
	border-bottom: 1px solid lighten($main-color,5%)
	> ul > li > ul.sub-menu
		display: none
		list-style: none
		clear: both
		margin: 8px 0px 8px 0px
	> ul
		margin: 0
		padding: 0
		li
			background-color: $main-color
			list-style: none
		li:not(.active) ul
			display: none
		li.expanded
			ul
				display: block
				background-color: white
		> li
			&.active > a
				color: contrasted($main-color, 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: $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: 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, 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-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%)
					@include transition-property(color)
					@include transition-duration(0.4s)
					@include transition-timing-function(ease-out)
			img
				margin-right: 10px
			ul
				margin: 0
				padding: 0
				background-color: white
				li 
					a
						display: block
						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
							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
							color: contrast-color($brand-primary, white, #333, 10%)
							background-color: $brand-primary
							i
								color: $main-color

.page-sidebar-closed
	#sidebar
		width: 50px
		white-space: nowrap
		@include transition-property(width)
		@include transition-duration(0.4s)
		@include transition-timing-function(ease-out)
		span.title
			display: none
		ul.submenu
			display: none!important
		> ul > li:hover
			width: 250px!important
			position: relative
			span.title
				display: inline-block
			ul.submenu
				display: block!important
				position: absolute
				left: 50px
				width: 200px!important

	#content
		margin-left: 50px
		.page-head h2.page-title
			padding: 0 0 0 70px

.menu-collapse
	height: 67px
	width: 100%
	font-size: 2em
	text-align: center
	line-height: 68px
	display: block
	background-color: darken($secondary-color,5%)
	border-bottom: 4px solid darken($secondary-color,15%)
	i
		color: lighten($secondary-color,10%)

#menu .maintab > a [class^="icon-"], #menu .maintab > a [class*=" icon-"]
	font-size: 22px
	border-radius: 40px
	height: 35px
	width: 35px
	color: white
	display: inline-block
	text-align: center
	line-height: 35px

// Tool bar
.toolbar_btn
	position: relative
	padding: 2px 5px !important
	margin-right: 3px
	font-size: 12px
	font-weight: 600
	color: white
	text-align: center
	text-shadow: none
	&:hover
		color: $secondary-color
		border-color: white
		background-color: white!important

.icon-AdminDashboard
	@extend .icon-dashboard
	background-color: adjust-hue($icon-color, 0)
.icon-AdminCatalog
	@extend .icon-book
	background-color: adjust-hue($icon-color, 30)
.icon-AdminParentOrders
	@extend .icon-credit-card
	background-color: adjust-hue($icon-color, 60)
.icon-AdminParentCustomer
	@extend .icon-group
	background-color: adjust-hue($icon-color, 90)
.icon-AdminPriceRule
	@extend .icon-tags
	background-color: adjust-hue($icon-color, 120)
.icon-AdminParentShipping
	@extend .icon-truck
	background-color: adjust-hue($icon-color, 150)
.icon-AdminParentLocalization
	@extend .icon-globe
	background-color: adjust-hue($icon-color, 180)
.icon-AdminParentModules
	@extend .icon-puzzle-piece
	background-color: adjust-hue($icon-color, 210)
.icon-AdminParentPreferences
	@extend .icon-wrench
	background-color: adjust-hue($icon-color, 240)
.icon-AdminTools
	@extend .icon-cogs
	background-color: adjust-hue($icon-color, 270)
.icon-AdminAdmin
	@extend .icon-cog
	background-color: adjust-hue($icon-color, 300)
.icon-AdminParentStats
	@extend .icon-bar-chart
	background-color: adjust-hue($icon-color, 330)
.icon-AdminStock
	@extend .icon-archive
	background-color: adjust-hue($icon-color, 360)

[class^="icon-Admin"]
	background-color: darken($main-color,10%)
	margin-right: 6px
	color: lighten($main-color,10%)!important

[class^="process-icon-"], [class*=" process-icon-"]
	height: 32px
	min-width: 32px
	background-position: center
	background-repeat: no-repeat
	display: block
	font-family: FontAwesome
	font-weight: normal
	font-style: normal
	font-size: 25px
	line-height: 32px
	text-decoration: inherit
	-webkit-font-smoothing: antialiased
	*margin-right: .3em

.process-icon-new
	@extend .icon-plus-sign-alt
.process-icon-save
	@extend .icon-save
.process-icon-back
	@extend .icon-arrow-left
.process-icon-save-and-stay
	@extend .icon-save
.process-icon-help
	@extend .icon-question-sign
.process-icon-export
	@extend .icon-cloud-download
.process-icon-import
	@extend .icon-cloud-upload
.process-icon-help-new
	@extend .icon-question-sign
.process-icon-edit
	@extend .icon-edit
.process-icon-newAttributes
	@extend .icon-plus-sign-alt
.process-icon-modules-list
	@extend .icon-puzzle-piece
.process-icon-save-date
	@extend .icon-download
.process-icon-save-status
	@extend .icon-download
.process-icon-new-module
	@extend .icon-plus
.process-icon-delete
	@extend .icon-trash
.process-icon-update
	@extend icon-refresh
.process-icon-preview
	@extend .icon-eye-open
.process-icon-previewURL
	@extend .icon-eye-open
.process-icon-stats
	@extend .icon-bar-chart
.process-icon-duplicate
	@extend .icon-copy
.process-icon-newCombination.toolbar-new
	@extend .icon-plus-sign
.process-icon-newCombination.toolbar-cancel
	@extend .icon-minus-sign
.process-icon-partial_refund
	@extend .icon-exchange
.process-icon-cancel
	@extend .icon-remove
.process-icon-new-url
	@extend .icon-plus-sign-alt



.navbar-inner
	box-shadow: none!important
	.input-append
		margin-bottom: 0

//form
label.control-label
	font-size: 13px
	font-weight: normal
	color: #666

label.control-label span.label-tooltip
	text-decoration: none
	font-size: 13px
	background-color: darken($bg-content-color,5%)
	border: none
	border-bottom: solid 1px darken($bg-content-color,10%)
	padding: 0 5px
	@include border-radius(3px)

.tooltip
	font-size: 12px

label.required:before
	content: '*'
	color: red
	font-size: 14px
	position: relative
	line-height: 12px

select.input-tiny,
input[type="text"].input-tiny,
input[type="password"].input-tiny
	width: 80px
	float: left

//some helpers to get fixed width
.fixed-width-XS
	width: 40px
.fixed-width-S
	width: 80px
.fixed-width-M
	width: 120px
.fixed-width-L
	width: 160px
.fixed-width-XL
	width: 200px


.btn-group-action
	display: inline-block
	white-space: nowrap
	a
		text-decoration: none

.btn
	text-transform: uppercase

.btn-default
	@include box-shadow(darken($btn-default-bg,10%) 0 -2px 0 inset)
	&:hover, &:focus
		background-color: $gray
		border-color: $gray-darker
		@include box-shadow($gray-darker 0 -2px 0 inset)

.btn-primary
	@include box-shadow(lighten($brand-success,30%) 0 -2px 0  inset)
	&:hover, &:focus
		background-color: $gray
		border-color: $gray-darker
		@include box-shadow($gray-darker 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
	.caret
		border-top-color: $gray-dark!important
	&:hover, &:focus
		.caret
			border-top-color: white!important


hr
	border-color: darken($bg-content-color,10%)
	border-bottom: 1px solid white

//table 
.table
	@extend .table-striped
	@extend .table-hover
	border-collapse: separate
	border-spacing: 0 2px
	margin-bottom: 5px
	thead th
		background-color: darken($bg-content-color,10%)
	thead > tr > th
		font-weight: normal
		vertical-align: top
		span.title_box
			display: block
			word-wrap: nowrap
			white-space: nowrap
			&.active
				font-weight: bold
			a
				text-decoration: none
			a.active
				color: black
	input, select
		margin: 0
	tbody > tr > td
		border-top: none
		background-color: white
	tbody > tr > td
		padding: 3px 7px 3px 7px
		vertical-align: middle
		word-wrap: nowrap
		font-size: 12px
		@include box-shadow(rgba(black,0.15) 0 1px 0)

	td.center, th.center
		text-align: center
	tr td:first-child,
	tr th:first-child 
		border-top-left-radius: 3px
		border-bottom-left-radius: 3px
	tr td:last-child,
	tr th:last-child 
		border-top-right-radius: 3px
		border-bottom-right-radius: 3px
	.btn-group
		float: right
		.btn
			float: left
	.btn
		float: right

//filter table
tr.filter
	background-color: rgba(#A39F95,0.5)
	input[type="text"].filter, input[type="password"].filter, select.filter
		font-size: 12px
		border-color: #A39F95

.breadcrumb
	background-color: lighten($bg-content-color,7%)

.badge
	background-color: $secondary-color

.badge-success
	@extend .badge
	background-color: $brand-success

.badge-error
	@extend .badge
	background-color: $brand-danger

.icon-big
	font-size: 4em
	color: darken($bg-content-color,20%)


#module-list
	h3
		position: relative
		top: 0
		left: 0
		margin: 0
		padding: 0
		background-color: transparent
		color: $main-color
		font-weight: 500

#footer
	display: block
	width: 100%
	height: 60px
	padding: 5px 0
	background-color: $bg-footer-color
	color: #888
	a
		color: #ccc
	a.link-social
		&:hover
			text-decoration: none
		i
			font-size: 2em
			width: 30px
			height: 30px
			display: inline-block
			line-height: 30px
			text-align: center
			@include border-radius(30px)
	.link-twitter i
		color: white
		background-color: #7CCEEF
	.link-facebook i
		color: white
		background-color: #557DBB
	.link-github i
		color: black
		background-color: white
	.link-google i
		color: white
		background-color: #E6644E
	#go-top
		position: fixed
		bottom: 10px
		height: 30px
		width: 30px
		text-align: center
		line-height: 30px
		right: 10px
		z-index: 9003
		display: block
		padding: 0px 6px 0px 6px
		margin: -2px 0px 0px
		text-decoration: none
		color: #fff
		cursor: pointer
		font-size: 16px
		background-color: rgba(0,0,0,0.8)

#nobootstrap
	float: left