@import 'snippets.less';

.icon-library-page {

	h2 {
		font-size:20px;
		margin-bottom: 10px;
		font-weight: bold;
	}
	p {
		color:#333;
	}

}


.icon-filter {
	width:100%;
	height: 100%;
	font-size: 22px;
	margin-bottom: 10px;
	line-height: 54px;
	height: 54px;
	padding: 0 20px;
	outline: 0;
	border: 1px solid #aaa !important;
	.border-radius(5px);
	.box-shadow(none) !important;

		&::-webkit-input-placeholder {
			font-size: 16px;
		   color: #bbb;
		}
		&:-ms-input-placeholder {
			font-size: 22px;
		   color: #bbb;
		}
		&:-moz-placeholder {
			font-size: 22px;
		   color: #bbb;
		}

		&:focus {
			outline: 0 none !important;
			border: 1px solid #d54e21 !important;
		}

}

// .table-heading {

// 	padding: 15px !important;
// 	span {
// 		font-size: 16px;
// 		font-weight: bold;
// 	}

// }

.mk-font-icons-wrapper {
	background-color: #fff;
	text-align: center;

	li.table-heading {
		display: block;
	}

	ul.icon-lists {
		margin: 0;
		padding: 0;
		list-style: none;
		li {

			margin: 0 0 0;
			padding: 5px 0;
			line-height: 16px;
			list-style: none;
			border:1px solid #ddd;
			border-bottom:0;
			display: inline-block;
			span {
				width: 20%;
				display: inline-block;
				padding: 0 15px;
				-webkit-box-sizing: border-box;
				  -moz-box-sizing: border-box;
				  box-sizing: border-box;
				i {

				}

				&.small i{
					font-size: 16px;
				}
				&.medium i{
					font-size: 32px;
				}

				&.large i{
					font-size: 46px;
				}

				&.class-name,
				&.character-code {
					font-size: 14px;
					font-weight: bold;
				}

				&.character-code {

				}
			}
		}
	}
}

	ul.icon-box {
		margin: 0;
		padding: 0;
		list-style: none;
		width:19%;
		float: left;
		// .box-shadow(0px 0px 0px 1px rgba(0, 0, 0, 0.75));
		border:1px solid #bbb;
		margin: 0.5%;
		// padding:10px;
		box-sizing: border-box;
		.border-radius(3px);
		.transition(all 0.2s);

		&:hover {
			background: #fafafa;
		}

		li {
			margin: 0 0 0;
			line-height: 16px;
			list-style: none;

			&.medium {
				border-bottom:1px solid #ccc; 
				padding:20px 0;

				i {
					display: block;
					height:32px;
					font-size: 32px;
				}
			}

			&.class-name {
				position: relative;
				border-bottom:1px solid #ccc; 
				padding: 8px;
				font-weight: bold;
				font-size: 12px;
				text-align: right;
				color: #d54e21;

			}
			&.character-code {
				text-align: right;
				position: relative;
				padding: 8px;
			}
		}
		span {
			position: absolute;
			left:5px;
			font-size: 10px;
			font-style: italic;
			color:#999; 
		}

}