src/app/components/soc-bar/soc-bar.component.scss
@import "../property/property.component.scss";
$margin: 2px;
$padding: 5px;
.fa,
.fab,
.far,
.fas {
color: honeydew;
margin: $margin;
padding: $padding;
font-size: 30px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 25%;
box-shadow: 0px 3px 10px rgba(0, 0, 0, .25);
&:hover {
opacity: 0.7;
box-shadow: none;
}
}
.fa-address-card {
background: #20D060;
padding: 7px 8px 7px 6px;
font-size: 26px;
}
.fa-phone {
background: #2f4859;
}
.fa-envelope {
background: #e04c40;
}
.fa-linkedin {
background: #0077B5;
}
.fa-twitter {
background: #00aced;
}
.fa-facebook {
background: #3B5998;
}
.fa-instagram {
background: #cd486b;
$pastelisation: 10%;
$r: desaturate(lighten(red, $pastelisation), $pastelisation);
$y: desaturate(lighten(yellow, $pastelisation), $pastelisation);
$b: desaturate(lighten(blue, $pastelisation), $pastelisation);
$m: desaturate(lighten(magenta, $pastelisation), $pastelisation);
background: linear-gradient(165deg, $b, transparent 50%), linear-gradient(180deg, $m, transparent), linear-gradient(-90deg, $r, transparent), linear-gradient(0deg, $y, transparent);
&:hover {
background: transparent;
}
padding: 3px;
font-size: 34px;
}
.fa-user-tie {
background: #2f3f3f;
}
.fa-house-user {
background: #2f3f3f;
}
.content {
display: none;
}
@media print {
.content {
margin: $margin;
padding: $padding;
display: inline;
}
.list {
flex-direction: column;
}
}