Skip to content

Instantly share code, notes, and snippets.

@dsauerbrun

dsauerbrun/.scss Secret

Created Nov 6, 2015
Embed
What would you like to do?
@mixin square-color($color-name,$r,$g,$b,$hex){
.square-#{$color-name}{
color: $hex;
border: 1px solid $hex;
background: linear-gradient(
rgba($r,$g,$b,.4),
rgba($r,$g,$b,.4)
),
url('../images/chatTile.png');
background-size: contain;
opacity:1;
}
.wrapper-tile-#{$color-name}.inactive:hover {
background: linear-gradient(
rgba($r,$g,$b,.4),
rgba($r,$g,$b,.4)
),
url('../images/chatTile.png');
width:59px;
height: 59px;
}
}
[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%;
}
}
[class ^="square-"].inactive, [class *="square-"].inactive{
opacity: .15;
color: #000;
width:59px;
height: 59px;
}
.number{
position: absolute;
opacity: 1;
color: #C6C6C6;
font-weight: 500;
top: 18px;
left: 22px;
z-index: 2;
}
@include square-color('purple',156,39,176,#9c27b0);
@include square-color('red',241,41,35,#f44336);
@include square-color('pink',233,30,99,#e91e63);
@include square-color('deep-purple',103,58,183,#673ab7);
@include square-color('indigo',63,81,181,#3f51b5);
@include square-color('blue',33,150,243,#2196f3);
@include square-color('light-blue',3,169,244,#03a9f4);
@include square-color('cyan',0,188,212,#00bcd4);
@include square-color('teal',0,150,136,#009688);
@include square-color('green',76,175,80,#4caf50);
@include square-color('light-green',139,195,74,#8bc34a);
@include square-color('lime',205,220,57,#cddc39);
@include square-color('yellow',255,235,59,#ffeb3b);
@include square-color('amber',255,193,7,#ffc107);
@include square-color('orange',255,152,0,#ff9800);
@include square-color('deep-orange',255,87,34,#ff5722);
@include square-color('brown',121,85,72,#795548);
@include square-color('grey',158,158,158,#9e9e9e);
@include square-color('blue-grey',96,125,139,#607d8b);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment