@import "theme-colors"
@import "compass"
@import "bootstrap/variables"
@import "bootstrap"
@import "font-awesome"

html, body
	height: 100%

#header_infos
	@extend .navbar
	@extend .navbar-inverse
	@extend .navbar-fixed-top
	background-color: $bg-header-color
#header_shopname
	@extend .navbar-brand
	font: 300 1.3em/100% $headings-font-family
#header_notifs_icon_wrapper
	@extend .hidden-xs
	@extend .nav
	@extend .navbar-nav
	li a
		padding: 9px 5px
	> li > a > i
		font-size: 1.2em
		color: white
	.notifs_badge
		@extend .badge
		background-color: $badge-notif-color
	.notifs_dropdown
		background-color: transparent
		border: none
		box-shadow: none
	.notifs_panel
		@extend .panel
		@extend .panel-default
		width: 300px
		@include box-shadow(rgba(black,0.5) 2px 2px 8px)
		.notifs_panel_header
			@extend .panel-heading
			h3
				padding: 0
				font-size: 1.3em
				margin: 0
		.notifs_panel_footer
			@extend .panel-footer

#header_nav_toggle
	background-color: black
	border: none
	color: white
#header_employee_box
	@extend .nav
	@extend .navbar-nav
	@extend .navbar-right
#header_search
	@extend .navbar-form
	@extend .navbar-left
	width: 130px
	padding: 0 0 0 10px
	@media (max-width: $screen-tablet)
		width: 100%
	input, .form-group
		margin: 0
#header_quick
	@extend .nav
	@extend .navbar-nav
	@extend .navbar-left

#main
	min-height: 100%
	padding: 36px 0 60px
	margin: 0 0 -60px 0
	background-color: $bg-content-color
	background-image: url('../img/patterns/bedge_grunge.png') // texture

#content
	padding: 80px 20px 0
	margin-left: 240px
	@include transition-property(margin)
	@include transition-duration(0.4s)
	@include transition-timing-function(ease-out)
	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
		border: none
		height: 30px
		padding: 0 5px
		margin: -16px -16px 15px -16px
		color: contrasted($bg-panel-heading-color)	
		font-size: 1.2em
		line-height: 30px
		font-weight: 300
		text-transform: uppercase
		background-color: white
		border-bottom: solid 1px #ccc
		i, a
			color: contrasted($bg-panel-heading-color)
		.badge
			background-color: lighten($bg-panel-heading-color,20%)
			@include border-radius(none)
			height: 29px
			line-height: 25px
			font-size: 1.3em
			margin-right: 7px
			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: black
				i
					text-align: center
					font-size: 1.2em
					line-height: 30px
	.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)
	@media (max-width: $screen-tablet)
		margin-left: 0
		width: 100%

.page-head
	width: 100%
	height: 55px
	padding: 0 10px 0 0
	margin: 0
	border-bottom: 4px solid darken($secondary-color,10%)
	position: fixed
	top: 36px
	left: 0px
	z-index: 499
	background-color: $secondary-color
	@include box-shadow(rgba(black,0.15) 0 7px 0)
	h2.page-title
		@extend .pull-left
		padding: 0 0 0 260px
		font-size: 18px
		color: white
		text-transform: uppercase
		@media (max-width: $screen-tablet)
			padding: 0 0 0 20px
	.btn-toolbar
		margin: 0
		padding: 3px 0 0 0
		.nav-tabs
			margin: 0
		.nav-tabs > li > a
			color: #333

// 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

[class^="process-icon-"], [class*=" process-icon-"]
	height: 25px
	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: 25px
	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
.process-icon-anchor
	@extend .icon-anchor
.process-icon-refresh
	@extend .icon-refresh
.process-icon-configure
	@extend .icon-cog

.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

td.actions
	min-width: 200px
.btn-group-action
	float: right
	a
		text-decoration: none

.btn
	text-transform: uppercase
	.caret
		border-top-color: $gray-dark!important
	&: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%)
	border-bottom: 1px solid white

//table 
.table
	@extend .table-striped
	@extend .table-hover
	border-collapse: separate
	border-spacing: 0 2px
	margin-bottom: 5px
	thead > tr > th
		border: none
		font-weight: normal
		vertical-align: top
		span.title_box
			color: black
			font-size: 1.1em
			font-weight: bold
			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
		vertical-align: middle
		word-wrap: nowrap
		font-size: 12px
		border-bottom: solid 1px #eee
		//@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

//filter table
tr.filter
	background-color: lighten($brand-primary,25%)
	input[type="text"].filter, input[type="password"].filter, select.filter
		font-size: 12px

.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
	z-index: 600
	min-height: 60px
	display: block
	width: 100%
	padding: 15px 0 0 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.5)
		&:hover
			background-color: black

#nobootstrap
	float: left


//WIP (refacto, keep it simple, order ...)

//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


// temp fix for latest bootstrap
input[type="text"],input[type="search"],input[type="password"], textarea, select
	@extend .form-control
fieldset > .row
	@extend .form-group


.box-stats
	padding: 10px
	margin-bottom: 20px
	background-color: white
	@include box-shadow(rgba(black,0.10) 0 2px 0, white 0 0 0 3px inset)
	.boxchart-overlay
		padding: 10px
		margin-right: 10px
		float: left
		color: white
		@include border-radius(3px)
	i
		@include border-radius(3px)
		float: left
		color: white
		font-size: 30px
		height: 50px
		width: 50px
		text-align: center
		line-height: 50px
		margin-right: 10px
	.title
		color: #999
		display: block
	.value
		font-size: 25px
.color1
	i, .boxchart-overlay
		background-color: #2BA8E3
		@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
	.value
		color: #2BA8E3
.color2
	i, .boxchart-overlay
		background-color: #FF5450
		@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
	.value
		color: #FF5450
.color3
	i, .boxchart-overlay
		background-color: #9E5BA1
		@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
	.value
		color: #9E5BA1
.color4
	i, .boxchart-overlay
		background-color: #95CC6B
		@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
	.value
		color: #95CC6B

.data_chart
	rect
		fill: white
	path
		stroke: white
		stroke-width: 2
		fill: none
	line
		stroke: black
	.area
		fill: rgba(white,0.30)
		stroke-width: 0

.highlight
	background-color: #FFFFC0



.hook_panel
	@extend .well
	@include box-shadow(rgba(white,0.9) 0 0 0 1px inset)
	padding: 10px 10px 5px 10px
	margin-bottom: 3px!important
.module_name
	font-size: 1.2em
.module_description
	@extend .text-muted
.hook_panel_header
	margin: 0 -10px 0 -10px
	padding: 0 10px 10px 10px
	.hook_name
		font-weight: 400
		font-size: 1.2em
		@include border-radius(3px)
		color: $brand-primary
		border: solid 1px #ccc
		background-color: white
		padding: 0 4px
	.hook_title 
		text-transform: uppercase
		font-size: 1em
	.hook_description
		@extend .text-muted
		padding: 3px 0 0 3px
.module_list
	.module_list_item
		display: table
		width: 100%
		padding: 5px 0
		margin-bottom: 4px
		background-color: white
		@include box-shadow(rgba(0,0,0,0.3) 0 0 3px,rgba(black,0.10) 0 -2px 0 inset)
		@include border-radius(3px)
.module_col_select
	display: table-cell
	width: 22px
	min-height: 35px
	vertical-align: middle
	text-align: center
	border-right: 1px solid #ddd
.module_col_position
	display: table-cell
	width: 60px
	vertical-align: middle
	text-align: right
	.positions
		font-family: $headings-font-family
		font-weight: 200
		@include text-shadow(white 1px 1px)
		padding: 0 5px
		font-size: 1.6em
		color: #aaa
		@include border-radius(3px)
		@include box-shadow(rgba(0,0,0,0.2) 0 1px 3px inset)
		border: solid 1px #ccc
		background-color: #eee
.module_col_icon
	display: table-cell
	width: 50px
	text-align: center
	vertical-align: middle
	
.module_col_infos
	display: table-cell
	height: 50px
	vertical-align: middle
	
.module_col_actions
	display: table-cell
	width: 160px
	padding: 0 10px
	vertical-align: middle
	text-align: right
	.btn-group
		text-align: left


.tree
	padding: 0 0 0 20px
	list-style: none
	input
		margin-right: 4px
	i
		font-size: 1.3em
	.tree-folder
	.tree-item
	.tree-item-name, .tree-folder-name
		padding: 0 5px
		+border-radius(6px)
		font-weight: normal
		&:hover
			background-color: #eee
			cursor: pointer
	.tree-selected
		background-color: lighten($brand-primary,30%)
		i.tree-dot
			background-color: $brand-primary
	i.tree-dot
		display: inline-block
		position: relative
		width: 6px
		height: 6px
		margin: 0 4px 0 6px
		background-color: #ccc
		+border-radius(6px)
	.tree-item-disable, .tree-folder-name-disable
		color: #ccc
		&:hover
			color: #ccc
			background-color: none

@import "nav"
@import "toggle-switch"
@import "carrier-wizard"
@import "dashboard"