_social.scss 2.03 KB
.social {

  a {
    display: inline-block;
    height: 50px;
    width: 50px;

    // svg {
    //   height: 50px;
    //   width: 50px;
    // }
  }
}

.facebook-icon {
  background: url('../assets/facebook-up.png') no-repeat;
  display: inline-block;
  height: 50px;
  width: 50px;

  &:hover {
    background-image: url('../assets/facebook-down.png');
  }
}

.twitter-icon {
  background: url('../assets/twitter-up.png') no-repeat;
  display: inline-block;
  height: 50px;
  width: 50px;

  &:hover {
    background-image: url('../assets/twitter-down.png');
  }
}

.linkedin-icon {
  background: url('../assets/linkedin-up.png') no-repeat;
  display: inline-block;
  height: 50px;
  width: 50px;

  &:hover {
    background-image: url('../assets/linkedin-down.png');
  }
}

.instagram-icon {
  background: url('../assets/instagram-up.png') no-repeat;
  display: inline-block;
  height: 50px;
  width: 50px;

  &:hover {
    background-image: url('../assets/instagram-down.png');
  }
}

.pinterest-icon {
  background: url('../assets/pinterest-up.png') no-repeat;
  display: inline-block;
  height: 50px;
  width: 50px;

  &:hover {
    background-image: url('../assets/pinterest-down.png');
  }
}

.drupalcamp {
  text-align: center;
}

.cta-drupalcamp {
  $color: #0491c6;
  color: #FFF;
  background-color: $color;
  border: 1px solid darken($color, 10%);
  margin: 15px;
  padding: 15px;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  .icon {
    background: url('../assets/link-icon.png') no-repeat;
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    width: 20px;
  }
}

.cta-facebook {
  $color: #f26825;
  color: #FFF;
  background-color: $color;
  border: 1px solid darken($color, 10%);
  margin: 15px;
  padding: 15px;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  .icon {
    background: url('../assets/facebook-thumb.png') no-repeat;
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    width: 25px;
  }
}