styles.scss

$primary: #de4f4f;
$secondary: #999;
$facebook: #3b5998;
$twitter: #0084b4;
$google: #dc4a38;
$linkedin: #1f88be;
$instagram: #49769c;
$youtube: #cc181e;
$meteor-developer: #de4f4f;
$meetup: #E0393E;
$github: #60b044;
$weibo: #FFA00A;

.accounts.ui.form {
  .ui.message {
    text-align: center;
    background: #F0F8FF;
    padding: 10px 0;
  }
  .switch-back {
    padding-top: 24px;
  }
  hr {
    border: 0;
    border-top: 1px solid #dce0e0;
    margin: 0;
  }
  .switch {
    .item {
      padding-left: 11px;
      .button {
        border-radius: 2px;
        font-size: 16px;
        right: 11px;
        padding: 2px 16px;
      }
    }
  }
  .or-sep {
    text-align: center;
    span {
      padding: 0 16px;
      background: white;
    }
    hr {
      margin: -10px 0 10px;
    }
  }
  .social-buttons {
    a, button {
      &[disabled] {
        opacity: 0.5;
      }
      &.facebook {
        color: white;
        background-color: $facebook;
        &:focus,
        &:hover {
          background-color: lighten($facebook, 5%);
        }
        &:active {
          background-color: darken($facebook, 5%);
        }
      }
      &.twitter {
        color: white;
        background-color: $twitter;
        &:focus,
        &:hover {
          background-color: lighten($twitter, 5%);
        }
        &:active {
          background-color: darken($twitter, 5%);
        }
      }
      &.google {
        border: solid 1px #C4C4C4;
        &:before {
          content: '';
          width: 20px;
          float: left;
          padding-right: .2em;
          background: url("/packages/std_accounts-ionic/google.png");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          height: 54px;
          margin-top: -1px;
        }
        &:focus,
        &:hover {
          border-color: lighten(#C4C4C4, 10%);
        }
        &:active {
          border-color: darken(#C4C4C4, 10%);
          background-color: darken(white, 5%);
        }
      }
      &.linkedin {
        color: white;
        background-color: $linkedin;
        &:focus,
        &:hover {
          background-color: lighten($linkedin, 5%);
        }
        &:active {
          background-color: darken($linkedin, 5%);
        }
      }
      &.instagram {
        color: white;
        background-color: $instagram;
        &:focus,
        &:hover {
          background-color: lighten($instagram, 5%);
        }
        &:active {
          background-color: darken($instagram, 5%);
        }
      }
      &.youtube {
        color: white;
        background-color: $youtube;
        &:focus,
        &:hover {
          background-color: lighten($youtube, 5%);
        }
        &:active {
          background-color: darken($youtube, 5%);
        }
      }
      &.meteor-developer {
        color: white;
        background-color: $meteor-developer;
        &:focus,
        &:hover {
          background-color: lighten($meetup, 5%);
        }
        &:active {
          background-color: darken($meetup, 5%);
        }
      }
      &.meetup {
        color: white;
        background-color: $meetup;
        &:focus,
        &:hover {
          background-color: lighten($meetup, 5%);
        }
        &:active {
          background-color: darken($meetup, 5%);
        }
      }
      &.github {
        color: white;
        background-color: $github;
        &:focus,
        &:hover {
          background-color: lighten($github, 5%);
        }
        &:active {
          background-color: darken($github, 5%);
        }
      }
      &.weibo {
        color: white;
        background-color: $weibo;
        &:focus,
        &:hover {
          background-color: lighten($weibo, 5%);
        }
        &:active {
          background-color: darken($weibo, 5%);
        }
      }
    }
  }
}