Melvin Valster
57 lines
1020 B
SCSS
57 lines
1020 B
SCSS
@import "../sass/_config";
|
|
|
|
.icon {
|
|
position: relative;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-color: #222;
|
|
|
|
&:hover {
|
|
.icon__bg {
|
|
box-shadow: inset 0px 0px 6px 3px rgba($color-icon-overlay, .8);
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
.icon__bg {
|
|
box-shadow: inset 0px 0px 6px 3px rgba(lighten($color-icon-overlay, 20%), .8);
|
|
}
|
|
}
|
|
|
|
&--medium {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 5px;
|
|
|
|
.icon__bg {
|
|
width: 36px;
|
|
height: 36px;
|
|
top: 2px;
|
|
left: 2px;
|
|
}
|
|
}
|
|
|
|
&--golden {
|
|
.icon__frame {
|
|
background-image: url('../images/icons/large/gold.png');
|
|
}
|
|
}
|
|
|
|
&__bg {
|
|
position: absolute;
|
|
background-size: cover;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
&__frame {
|
|
position: absolute;
|
|
width: 44px;
|
|
height: 44px;
|
|
top: -2px;
|
|
left: -2px;
|
|
background-image: url('../images/icons/large/default.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
} |