From b8c2d83ede66af9205bc0c29c57fb1129f3a2a92 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Thu, 19 Mar 2015 16:28:51 -0400
Subject: [PATCH] styled category selector

---
 less/category.less                 | 45 ++++++++++++++++++++++++++++++
 templates/partials/topics_list.tpl | 15 ++++++----
 2 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/less/category.less b/less/category.less
index ae331e0..4785ff7 100644
--- a/less/category.less
+++ b/less/category.less
@@ -7,6 +7,51 @@
 				-moz-opacity: 0.30;
 				opacity: 0.30;
 			}
+
+			.select {
+				position: relative;
+				.pointer;
+
+				&:before {
+					content: "";
+				}
+
+				.fa-check {
+					border: 1px solid @brand-success;
+					color: @brand-success;
+					padding: 14px;
+					border-radius: 50%;
+					position: absolute;
+					font-size: 15px;
+					opacity: 0;	
+					top: 0px;
+
+					&:before {
+						.pointer;
+					}
+				}
+
+				.user-img {
+					opacity: 1;
+				}
+
+				.fa-check, .user-img {
+					.transition(.2s ease-in-out opacity);
+				}
+
+				width: 50px;
+				float: left;
+			}
+
+			&.selected {
+				.user-img {
+					opacity: 0;
+				}
+
+				.fa-check {
+					opacity: 1;
+				}
+			}
 		}
 
 		&:last-child li {
diff --git a/templates/partials/topics_list.tpl b/templates/partials/topics_list.tpl
index ecd50a6..8b191e9 100644
--- a/templates/partials/topics_list.tpl
+++ b/templates/partials/topics_list.tpl
@@ -5,14 +5,19 @@
 		<meta itemprop="name" content="{topics.title}">
 
 		<div class="col-md-7 col-sm-12 col-xs-12 content">
+			
+
 			<div class="pull-left">
 				<!-- IF showSelect -->
-					<i class="fa fa-fw fa-square-o pull-left select pointer"></i>
+					<div class="select fa-square-o">
+						<img src="{topics.user.picture}" class="img-circle user-img" />
+						<i class="fa fa-check"></i>
+					</div>
+				<!-- ELSE -->
+					<a href="{relative_path}/user/{topics.user.userslug}" class="pull-left">
+						<img src="{topics.user.picture}" class="img-circle user-img" title="{topics.user.username}"/>
+					</a>
 				<!-- ENDIF showSelect -->
-
-				<a href="{relative_path}/user/{topics.user.userslug}" class="pull-left">
-					<img src="{topics.user.picture}" class="img-circle user-img" title="{topics.user.username}"/>
-				</a>
 			</div>
 
 			<h1 class="title pull-left">