Yrkki/cv-generator-fe

View on GitHub
src/app/components/soc-bar/soc-bar.component.scss

Summary

Maintainability
Test Coverage
@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;
  }
}