using fancy new mixin

9 years ago · a57fd89d31
parent a5a3889e2b
commit a57fd89d31
7 changed files with 14 additions and 62 deletions
--- a/less/categories.less
+++ b/less/categories.less
@ -31,12 +31,8 @@
 			}

 			img, .user-icon {
+				.user-icon-style(46px, 2.4rem, 50%);
 				margin-right: 15px;
-				width: 46px;
-				height: 46px;
-				line-height: 46px;
-				font-size: 2.4rem;
-				border-radius: 50%;
 			}

 			h2 {
@ -52,10 +48,7 @@

 			@media (max-width: @screen-sm-max) {
 				.user-img, .user-icon {
-					width: 32px;
-					height: 32px;
-					line-height: 32px;
-					font-size: 1.5rem;
+					.user-icon-style(@border-radius: 50%);
 					margin-right: 8px;
 				}
 				h2 {
@ -110,11 +103,7 @@

 			.user-icon {
 				display: inline-block;
-				border-radius: 50%;
-				height: 24px;
-				width: 24px;
-				line-height: 24px;
-				font-size: 1.5rem;
+				.user-icon-style(24px, 1.5rem, 50%);
 			}
 		}
 	}
--- a/less/category.less
+++ b/less/category.less
@ -84,11 +84,7 @@

 			.card .user-icon {
 				display: inline-block;
-				border-radius: 50%;
-				height: 24px;
-				width: 24px;
-				line-height: 24px;
-				font-size: 1.5rem;
+				.user-icon-style(24px, 1.5rem, 50%);
 			}
 		}

--- a/less/groups.less
+++ b/less/groups.less
@ -27,9 +27,7 @@
 				display: inline-block;

 				img, .user-icon {
-					width: 32px;
-					height: 32px;
-					line-height: 32px;
+					.user-icon-style();
 				}
 			}

@ -135,9 +133,7 @@

 	[component="groups/members"], [component="groups/pending"], [component="groups/invited"] {
 		img, .user-icon {
-			width: 32px;
-			height: 32px;
-			line-height: 32px;
+			.user-icon-style();
 		}

 		.member-name {
--- a/less/header.less
+++ b/less/header.less
@ -16,12 +16,8 @@
 			clear: both;

 			img, .user-icon {
-				width: 32px;
-				height: 32px;
-				line-height: 32px;
-				font-size: 1.5rem;
+				.user-icon-style(@border-radius: 50%);
 				float: left;
-				border-radius: 50%;
 			}

 			a {
@ -98,12 +94,8 @@
 				}

 				img, .user-icon {
-					width: 32px;
-					height: 32px;
-					line-height: 32px;
-					font-size: 1.6rem;
+					.user-icon-style(@border-radius: 50%);
 					margin-right: 1em;
-					border-radius: 50%;
 				}
 			}

@ -137,12 +129,8 @@
 		padding: 10px 15px;

 		img, .user-icon {
-			width: 30px;
-			height: 30px;
-			border-radius: 50%;
+			.user-icon-style(30px, 1.8rem, 50%);
 			border: 0px none;
-			font-size: 1.8rem;
-			line-height: 30px;

 			span {
 				font-size: 14px;
--- a/less/mobile.less
+++ b/less/mobile.less
@ -161,13 +161,10 @@
 		z-index: 1;

 		img, .user-icon {
+			.user-icon-style(70px, 4rem);
 			position: absolute;
 			bottom: -22px;
 			left: 93px;
-			width: 70px;
-			height: 70px;
-			line-height: 70px;
-			font-size: 4rem;
 			border-radius: 50%;
 		}

--- a/less/topic.less
+++ b/less/topic.less
@ -42,11 +42,7 @@

 			img, .user-icon {
 				margin-right: 15px;
-				width: 46px;
-				height: 46px;
-				border-radius: 50%;
-				font-size: 2.4rem;
-				line-height: 46px;
+				.user-icon-style(46px, 2.4rem, 50%);
 			}
 		}

@ -195,10 +191,7 @@
 			margin-top: 5px;

 			img, .user-icon {
-				width: 23px;
-				height: 23px;
-				font-size: 1.3rem;
-				line-height: 23px;
+				.user-icon-style(23px, 1.3rem);
 			}
 		}
 	}
@ -339,11 +332,8 @@
 		position: relative;

 		img, .user-icon {
-			border-radius: 50%;
-			width: 20px;
-			height: 20px;
+			.user-icon-style(20px, 1rem, 50%);
 			vertical-align: middle;
-			line-height: 20px;
 			margin: 0 7px;
 		}

--- a/less/users.less
+++ b/less/users.less
@ -44,11 +44,7 @@
 		width: 104px;

 		img, .user-icon {
-			width:80px;
-			height:80px;
-			border-radius: 50%;
-			line-height: 80px;
-			font-size: 4rem;
+			.user-icon-style(80px, 4rem, 50%);
 		}

 		a {