poa-dapps-voting/assets/stylesheets/index/vote.scss

.vote {
  text-align: left;

  &-i {
    @extend %item;
  }

  &-body {
    display: table;
    width: 100%;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 0;

    &-i {
      display: table-cell;
      vertical-align: top;
      width: 33.333%;
      box-sizing: border-box;
      padding: 30px 20px;

      &:not(:first-child) {
        border-left: 1px solid #eee;
      }

      &:nth-child(2n) {
        word-break: break-all;
      }
    }

    %title {
      position: relative;
      margin-bottom: 20px;
      color: #8197a2;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: bold;
    }

    &-title {
      @extend %title;

      &-secondary {
        @extend %title;
        margin-top: 30px;
      }
    }

    &-description {
      color: #444;
      line-height: 24px;
      font-size: 14px;
    }
  }

  &-header {
    overflow: hidden;
    padding: 20px;
  }

  &-now {
    @extend %btn;
    @extend %btn-vote;
    margin-right: 20px;
  }

  &-person {
    position: relative;
    padding-left: 50px;

    &-img {
      position: absolute;
      left: 0;
      top: 0;
      width: 36px;
      height: 36px;
    }

    &-name {
      margin-bottom: 8px;
      color: #333;
      font-size: 14px;
      font-weight: bold;
    }

    &-choose {
      padding-left: 20px;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAw1BMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6M9jT1MAAAAQHRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lKU1RZYmNrbHV2iYqLo6Spqqusra7Cw8TFysvM29zk5ufo6/Lz+Pn8DzgVHgAAATNJREFUeNplk+1agkAQhQfRykQTrJTEUjSCvtTQECPk/q+qPQ7LsnR+7DOzL898LiRlOP46zfN0vXQM0tXydkWlndeqs/620LTtK3Z7LBo6OpLd5fDzl6nVubSnIXv3zIY/8N4HVGrwBj8bwjaR77SgmhYn5DWF5eE7ZoribkZkoIeI78ZJMmYrQkcGjZD9mq+SokjY6qKqEfniDIiFYMR6FqZPn+J8+A9dYX5QKs5eBaFz3p4wUkLwizrkvB2UcoZXJUwYHiqIsDclnBzAvicyrFYQpBW0lK0oqVbkEHR1fzEEHl/YhCHG1yKaoYi5zubl4Mn8wsqe6uwRK4tNmHaG717VsiP4mV1uih9G4FrttuUG7GGGTLOioUwyRI51Ftv6o94rtNcfNbCz2uB32KycCv0BfU5XCrQEyKwAAAAASUVORK5CYII=);
      background-size: 14px 14px;
      background-repeat: no-repeat;
      background-position: left center;
      color: #8197a2;
      line-height: 14px;
      font-size: 12px;
    }
  }

  &-time {
    color: #8197a2;

    &-timer {
      font-size: 24px;
      font-weight: bold;
    }

    &-to {
      width: 100%;
      text-align: right;
      text-transform: uppercase;
      font-size: 12px;
    }
  }

  &-rating {
    overflow: hidden;
    padding: 30px 20px;

    &-i {
      width: 48%;
      color: #8197a2;
      text-transform: uppercase;
      font-size: 12px;

      strong {
        margin-right: 5px;
        color: #333;
        font-weight: bold;
      }

      p {
        display: inline;
      }
    }

    &-value,
    &-got {
      margin-bottom: 10px;
    }

    &-scale {
      clear: left;
      height: 10px;
      border-radius: 5px;
      background-color: #efefef;

      $this: &;

      &-active {
        height: 100%;
        border-radius: 5px;
      }

      &_yes {
        #{$this}-active {
          background-color: #08b3f2;
        }
      }

      &_no {
        #{$this}-active {
          background-color: #6d2eae;
        }
      }
    }
  }

  &-tooltip {
    transform: translate3d(0,-10px,0);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
    transition: opacity 0.3s, transform 0.3s;
    left: -275px;
    top: 0;
    width: 578px;
    padding-top: 30px;
    box-sizing: border-box;

    &:before {
      transform: rotate(-45deg);
      content: '';
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 22px;
      width: 20px;
      height: 20px;
      margin-left: -12px;
      border-radius: 2px;
      background-color: #fff;
      box-shadow: 0px 0 20px 0 fade-out(#000, 0.9);
    }

    $this: &;

    &-text {
      display: block;
      position: relative;
      z-index: 2;
      text-align: left;
      box-sizing: border-box;
      border-radius: 5px;
      padding: 25px;
      background-color: #fff;
      color: #333;
    }

    &-shadow {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 30px;
      bottom: 0;
      border-radius: 5px;
      box-shadow: 0px 20px 40px 0 fade-out(#000, 0.7);
    }

    &-title {
      display: block;
      margin-bottom: 15px;
      font-size: 16px;
    }

    &-description {
      line-height: 24px;
      font-size: 14px;
      font-weight: normal;
      text-transform: none;

      a {
        color: #08b3f2;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    &-icon {
      position: relative;
      display: block;
      width: 24px;
      height: 24px;
      margin-top: -6px;
      border-radius: 50%;
      background-color: #08b3f2;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAYCAMAAADqO6ysAAAAFVBMVEX///////////////////////////9nSIHRAAAABnRSTlMASUrk5udXTd49AAAAJUlEQVQI12NgZGFhZGBhY2MBEawMTKzMTAzYAEIdGxCQS8DtAABR5AGfy9XNLgAAAABJRU5ErkJggg==);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 2px 12px;
    }

    &-container {
      position: relative;
      z-index: 10;
      float: right;

      &:hover {
        #{$this} {
          pointer-events: auto;
          opacity: 1;
          transform: translate3d(0,0,0) rotate3d(0,0,0,0);
        }
      }
    }
  }

  .vote-rating-yes,
  .vote-rating-no {
    @extend %btn;
    @extend %btn-vote;
    margin-top: 20px;
  }

  .vote-rating-no {
    background-color: #6d2eae;

    &:hover {
      background-color: #5d2795;
    }
  }
}