.css

[class ^="square-"], [class *="square-"]{
    width: 59px;
    height:59px;
    border: 1px solid #EFEFEF;
    color: rgb(192,192,192);
    font-weight: 500;
    margin: 0 auto;
    margin-top: 20px;
    padding: 13px 0;

    .progress-wrapper{
    	margin: 0 auto;
        margin-top: 10px;
        width: 80%;
    }


}

.number{
	position: absolute;
	opacity: 1;
	color: #C6C6C6;
    font-weight: 500;
    top: 18px;
    left: 18px;
    z-index: 2;
}

.square-red:hover, .square-red {
   	color: #f44336;
   	border: 1px solid #f44336;
   	background: linear-gradient(
   		rgba(241,41,35,.4),
   		rgba(241,41,35,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}

.square-pink:hover, .square-pink{
   	color: rgb(233,30,99);
   	border: 1px solid rgb(233,30,99);
   	background: linear-gradient(
   		rgba(233,30,99,.4),
   		rgba(233,30,99,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}

.wrapper-tile-purple.inactive:hover {
	background: linear-gradient(
   		rgba(156,39,176,.4),
   		rgba(156,39,176,.4)
   	),
   	url('../images/chatTile.png');
   	width:59px;
   	height: 59px;
}

.square-purple{
   	color: #9c27b0;
   	border: 1px solid #9c27b0;
   	background: linear-gradient(
   		rgba(156,39,176,.4),
   		rgba(156,39,176,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}

.square-deep-purple:hover, .square-deep-purple{
   	color: #673ab7;
   	border: 1px solid #673ab7;
   	background: linear-gradient(
   		rgba(103,58,183,.4),
   		rgba(103,58,183,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}

.square-indigo:hover, .square-indigo{
   	color: #3f51b5;
   	border: 1px solid #3f51b5;
   	background: linear-gradient(
   		rgba(63,81,181,.4),
   		rgba(63,81,181,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}

.square-blue:hover, .square-blue{
   	color: #2196f3;
   	border: 1px solid #2196f3;
   	background: linear-gradient(
   		rgba(33,150,243,.4),
   		rgba(33,150,243,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}

.square-light-blue:hover, .square-light-blue{
   	color: #03a9f4;
   	border: 1px solid #03a9f4;
   	background: linear-gradient(
   		rgba(3,169,244,.4),
   		rgba(3,169,244,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}

.square-cyan:hover, .square-cyan{
   	color: #00bcd4;
   	border: 1px solid #00bcd4;
   	background: linear-gradient(
   		rgba(0,188,212,.4),
   		rgba(0,188,212,.4)
   		),
   		url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}

.square-teal:hover, .square-teal{
   	color: #009688;
   	border: 1px solid #009688;
   	background: linear-gradient(
   		rgba(0,150,136,.4),
   		rgba(0,150,136,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}

.square-green:hover, .square-green{
   	color: #4caf50;
   	border: 1px solid #4caf50;
   	background: linear-gradient(
   		rgba(76,175,80,.4),
   		rgba(76,175,80,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}
.square-light-green:hover, .square-light-green{
   	color: #8bc34a;
   	border: 1px solid #8bc34a;
   	background: linear-gradient(
   		rgba(139,195,74,.4),
   		rgba(139,195,74,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}

.square-lime:hover, .square-lime{
   	color: #cddc39;
   	border: 1px solid #cddc39;
   	background: linear-gradient(
   		rgba(205,220,57,.4),
   		rgba(205,220,57,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}
.square-yellow:hover, .square-yellow{
   	color: #ffeb3b;
   	border: 1px solid #ffeb3b;
   	background: linear-gradient(
   		rgba(255,235,59,.4),
   		rgba(255,235,59,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}
.square-amber:hover, .square-amber{
   	color: #ffc107;
   	border: 1px solid #ffc107;
   	background: linear-gradient(
   		rgba(255,193,7,.4),
   		rgba(255,193,7,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}
.square-orange:hover, .square-orange{
   	color: #ff9800;
   	border: 1px solid #ff9800;
   	background: linear-gradient(
   		rgba(255,152,0,.4),
   		rgba(255,152,0,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}
.square-deep-orange:hover, .square-deep-orange{
   	color: #ff5722;
   	border: 1px solid #ff5722;
   	background: linear-gradient(
   		rgba(255,87,34,.4),
   		rgba(255,87,34,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}
.square-brown:hover, .square-brown{
   	color: #795548;
   	border: 1px solid #795548;
   	background: linear-gradient(
   		rgba(121,85,72,.4),
   		rgba(121,85,72,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}
.square-grey:hover, .square-grey{
   	color: #9e9e9e;
   	border: 1px solid #9e9e9e;
   	background: linear-gradient(
   		rgba(158,158,158,.4),
   		rgba(158,158,158,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}
.square-blue-grey:hover, .square-blue-grey{
   	color: #607d8b;
   	border: 1px solid #607d8b;
   	background: linear-gradient(
   		rgba(96,125,139,.4),
   		rgba(96,125,139,.4)
   	),
   	url('../images/chatTile.png');
   	background-size: contain;
   	opacity:1;
}

[class ^="square-"].inactive, [class *="square-"].inactive{
	opacity: .15;
	color: #000;
	width:59px;
	height: 59px;
}

.html

<div class="wrapper-tile-{{color}}" ng-class="(currentSession == sessionId)?'':'inactive'">
	<div class="text-center number" ng-if="currentSession != sessionId">{{ sessionId }}</div>
	<div class="square-{{color}} text-center" ng-class="(currentSession == sessionId)?'active':'inactive'">
		<i class="mdi-action-visibility mdi-material-{{ color }}" ></i>
	</div>
</div>