peace.scss

/**
 * PEACE.js - http://humancopy.net/peace-js.html
 * Peace please, humancopy.net 2017
 * Version 1.3.1
 *
 */

/** Ultra Light */
@font-face {
  font-family: "San Francisco";
  font-weight: 100;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2");
}

.peace {
  opacity: .65;
  margin: 1.5em 0;
  font: 100 13px "San Francisco", Helvetica, Arial;
  text-align: center;
  position: relative;

  span,
  a {
    display: inline;
    cursor: pointer;
    text-decoration: none;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
       -moz-transition: -moz-transform 0.3s ease-in-out;
         -o-transition: -o-transform 0.3s ease-in-out;
            transition: opacity 0.3s ease-in-out;
  }

  span {
    opacity: 1;
    font-size: 32px;
    left: 50%;
    top: 0;
    position: absolute;
    margin-left: -16px;
    z-index: 1;
  }

  a:not([href]) {
    cursor: default;
  }

  &.symbol {
    a {
      opacity: 0;
      position: relative;
      z-index: 2;
    }

    &:hover a,
    &.show a {
      opacity: 1;
    }
    &:hover span,
    &.show span {
      opacity: 0;
    }
  }

  /* Themes */
  &.black {
    span,
    a,
    a:visited,
    a:hover {
      color: #000;
    }
  }
  &.white {
    span,
    a,
    a:visited,
    a:hover {
      color: #fff;
    }
  }
  &.red {
    span,
    a,
    a:visited,
    a:hover {
      color: #ee0000;
    }
  }
  &.green {
    span,
    a,
    a:visited,
    a:hover {
      color: #00ee00;
    }
  }
  &.blue {
    span,
    a,
    a:visited,
    a:hover {
      color: #0000ee;
    }
  }
}