File: public/flat-admin/sass/page-elements/tiles.scss

.stats{
	@extend .ulreset;
	float:left;

	&>li{
		@include pie-clearfix;
		float:left;
		padding:10px 15px;
		margin-right: 15px;

		&:last-child{
			margin-right: 0;
		}

		i{
			font-size:36px;
			color:$light;
			float:left;
			margin:0;
		}

		.details{
			@include pie-clearfix;
			margin-left:55px;

			span{
				color:$light;
				display: block;
				font-size:12px;

				&.big{
					font-size:16px;
				}
			}
		}
	}
}

.tiles{
	list-style-type: none;
	margin: 25px 0;
	padding: 0;

	.has-chart{
		&>a{
			span{
				font-size:16px;
				padding:10px 20px;
			}
		}
	}

	.has-chart-2{
		&>a{
			span{
				font-size:16px;
				padding-top: 0;
				display: inline-block;

				.spark-me{
					padding-top:40px;

					canvas{
						margin-top:-10px;
					}
				}
			}
		}
	}

	&.tiles-small{
		.label{
			padding:3px 5px;
		}
		&>li{
			&:hover{
				&:before{
					width:70px;
					height:70px;
				}
			}
			&>a{
				width:80px;
				height: 80px;

				span{
					font-size:30px;
					padding-top:20px;
				}
			}
		}
	}

	.label{
		padding:5px 8px;
	}

	&.tiles-center{
		text-align:center;
		width:100%;

		&>li{
			display: inline-block;
			text-align:center;
			float:none;

			&>a{
				.name{
					text-align:center;
				}
			}
		}
	}

	&.nomargin{
		margin:0;
	}

	&>li{
		float:left;
		margin:8px 0 0 8px;
		position: relative;

		.label{
			position: absolute;
			top:-5px;
			left:-5px;
			z-index:99;
		}

		&:hover{
			&:before{
				content:'';
				position: absolute;
				left:0;
				top:0;
				width: 110px;
				height: 110px;
				background:none;
				pointer-events:none;
				border:5px solid rgba(0,0,0,0.5);
				z-index:99;
			}
		}

		&.long{
			&:hover{
				&:before{
					width: 235px;
				}
			}
			&>a{
				width:245px;

				span{
					font-size:64px;
					padding-top:25px;
				}
			}
		}

		&.high{
			&:hover{
				&:before{
					height: 235px;
				}
			}
			&>a{
				height:245px;

				span{
					padding-top:75px;
					font-size:96px;

					&.count{
						&>i{
							margin-right:-25px;
						}
					}
				}
			}
		}

		&.image{
			&>a{
				img{
					width:120px;
					height:120px;
				}

				.name{
					background: $blue;
					color:#fff;
				}
			}
		}

		&>a{
			width:120px;
			height:120px;
			display: block;
			color:#fff;
			text-decoration: none;

			position: relative;
			text-align:center;

			span{
				padding-top:35px;
				font-size:48px;
				display: block;

				&.nopadding{
					padding: 0;
				}

				&.count{
					&>i{
						margin-right:-10px;
					}
				}

				h5{
					font-size:18px !important;
					margin: 0;
					text-align:left;
					padding:10px 10px 5px 10px;
				}

				p{
					font-size:13px !important;
					padding: 0;
					text-align:left;
					padding:0 20px;
				}
			}

			.name{
				font-size:13px !important;
				display: block;
				position: absolute;
				bottom:0;
				left:0;
				right:0;
				text-align:left;
				padding:3px 10px;
				float:left;

				.right{
					font-size:13px;
					float:right;
					padding: 0;
				}
			}
		}
	}
}

.minitiles{
	float:left;
	@extend .ulreset;

	&>li{
		float:left;
		margin-right:15px;

		&>a{
			display:block;
			height:61px;
			width:61px;
			color:#fff;
			text-decoration: none;
			position: relative;
			text-align:center;

			i{
				font-size:36px;
				line-height:61px;
			}

			&:hover{
				&:before{
					content:'';
					position: absolute;
					left:0;
					top:0;
					width: 55px;
					height: 55px;
					background:none;
					pointer-events:none;
					border:3px solid rgba(0,0,0,0.5);
					z-index:99;
				}
			}
		}
	}
}