Skip to content

Instantly share code, notes, and snippets.

@dsauerbrun

dsauerbrun/.css Secret

Created November 6, 2015 17:14
Show Gist options
  • Save dsauerbrun/3d04123e40165d79c0c5 to your computer and use it in GitHub Desktop.
Save dsauerbrun/3d04123e40165d79c0c5 to your computer and use it in GitHub Desktop.
[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;
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment