//DASHBOARD

.size_s, .size_md, .size_l, .size_xl, .size_xxl
	font-family: $headings-font-family
	color: $main-color
.size_s
	font-size: 1.1em
.size_md
	font-size: 1.3em
.size_l
	font-size: 1.7em
.size_xl
	font-size: 2em
.size_xxl
	font-size: 2.3em
.color_success
	color: $brand-success
.color_danger
	color: $brand-danger

.dash_trend_down
	color: red
	&:before
		margin-right: 4px
		font-family: FontAwesome
		content: "\f0ab"
.dash_trend_up
	color: green
	&:before
		margin-right: 4px
		font-family: FontAwesome
		content: "\f0aa"

.box-stats
	height: 70px

#dashboard
	section
		header
			padding: 3px 8px
			margin: 0 0 3px 0
			color: white
			font-size: 1.2em
			background-color: $brand-primary
		header.panel-heading
			color: #555
		
	.data_list
		@extend .list-group
		margin: 0 0 10px 0
		padding: 0
		li
			@extend .list-group-item
			position: relative
		.data_label
			small
		.data_value
			line-height: 39px
			position: absolute
			top: 0
			right: 0
			padding: 0 10px 0 0

	.data_list_small
		margin: 8px 0 10px 0
		padding: 0 0 0 0
		border-top: solid 1px #ddd
		li
			padding: 3px 0
			position: relative
			border: none
			margin: 0
			border-bottom: dashed 1px #ddd
		.data_label
			text-transform: uppercase
			color: #bbb
		.data_value
			line-height: 25px
			position: absolute
			top: 0
			right: 0
			padding: 0

	.data_list_large
		margin: 8px 0 10px 0
		padding: 0
		@extend .list-unstyled
		li
			padding: 6px 0
			position: relative
			border: none
			margin: 0
		.data_label
			line-height: 0.8em
			small
				font-size: 0.6em
		.data_value
			text-align: right
			line-height: 0.6em
			position: absolute
			top: 0
			right: 0
			padding: 8px 0 0 0
			small
				font-size: 0.5em

	.data_list_vertical
		@extend .list-unstyled
		@extend .row
		padding: 0
		margin: 0 0 10px 0
		border: 1px solid #ddd
		@include border-radius(3px)
		li
			border-left: solid 1px #ddd
			@extend .col-xs-4
			padding: 6px
			&:first-child
				border: none
		.data_label
			min-height: 32px
			display: block
			line-height: 1em
			text-align: center
		.data_value
			display: block
			text-align: center
			
	#dashtrends
		header
			margin-bottom: 0
		#dashtrends_toolbar
			margin: 4px -16px
		dl
			margin: 0
			min-height: 120px
			text-align: center
			background-color: white
			padding: 10px
			border-left: 1px solid #ddd
			border-bottom: 1px solid #ddd
			&:first-child
				border-left: none
			&.active
				background-color: #eee
		dt
			text-align: center
			height: 37px
			line-height: 1em
			font: 300 1.1em/120% $headings-font-family
		svg
			height: 350px
			
	#dashproducts


	#dashactivity
		svg
			height: 150px

	.data_value
		span, .dash_trend
			@extend .data_loading
	.loading
		.data_value
			min-width: 30px
			text-align: center
			&:before
				@extend .icon-spin
				font-size: 0.7em
				font-family: FontAwesome
				content: "\f021"
				color: #ccc
			span, small
				display: none
		.data_trend
			display: none

		.data_table

		.data_chart

		.data_trends

=animation($name,$value)
	-webkit-animation-#{$name}: $value
	animation-#{$name}: $value

=keyframes($name)
	@-webkit-keyframes #{$name}
		@content
	@-moz-keyframes #{$name}
		@content
	@-ms-keyframes #{$name}
		@content
	@-o-keyframes #{$name}
		@content
	@keyframes #{$name}
		@content

.data_loading
	opacity: 1
	+animation(name,bounceG)
	+animation(duration,0.7s)
	+animation(direction,linear)
	+scale(0.7)

+keyframes(bounceG)
	0%
		+opacity(0)
		+scale(0.1)
	100%
		+opacity(1)
		+scale(1)

#dash_version
	@extend .panel
	padding: 0!important
	overflow: hidden
	iframe
		height: 140px
		width: 100%