purelymental-demo/assets/stylesheets/modules/_profile_card.css.scss

@import "global/vars";

.brain-level {
  float: left;
  text-align: center;
  width: 74px;

  h4 {
    font-size: 18px;
    padding:0;
    margin: 0;
  }

  #what-is-pmp {
    background: white image-url('profile-card/brain.png') top left no-repeat;
    width: 74px;
    height: 66px;
    text-indent: -9999px;
    display: block;

    &.active-filled-1 {
      background: white image-url('profile-card/brain_filled_1.png') top left no-repeat;
    }
    &.active-filled-2 {
      background: white image-url('profile-card/brain_filled_2.png') top left no-repeat;
    }
    &.active-filled-3 {
      background: white image-url('profile-card/brain_filled_3.png') top left no-repeat;
    }
  }
}

.profile-card {
  border: 1px solid #DDE3E4;
  background: white;
  margin-bottom: 20px;

  header {
    margin-bottom: 0 !important;
    padding: 10px;

    .user.media {
      .avatar {
        @extend %avatar-round;
      }
    }

    .media__img {
      margin-right: 9px;
    }

    ul {
      line-height: 1.1em;
      li.user-name {
        font-size: 14px;
      }
      li.location, li.social {
        color: #999;
        font-size: 12px;
      }
    }
  }

  .pmp-score {
    @extend .cf;



    border-bottom: 1px solid #DDE3E4;
    padding: 15px 10px;

    .pmp-score-detail {
      float: right;
      font-family: "Dosis", sans-serif;
      text-align: right;
      text-transform: uppercase;

      h4 {
        color: #5A6366;
        font-family: $body-font-family;
        font-weight: 800;
        font-size: 50px;
        line-height: inherit;
        margin: 0;
      }

      p {
        color: #CCC;
        margin: 0;
        strong { color: $pm_green; }
      }
    }
  }

  .pmp-graphs {
    padding: 15px 10px;

    .progress {
      background: #E6E6E6;
      border: none;
      color: white;
      height: 1.4em;
      padding: 0;
      position: relative;

      &.score-memory .progress-data span.graph-icn {
        background: image-url("icons/scores/icn-memory-sm.png") center center no-repeat;
      }
      &.score-spatial_recognition .progress-data span.graph-icn {
        background: image-url("icons/scores/icn-spatial-intellegence-sm.png") center center no-repeat;
      }
      &.score-problem_solving .progress-data span.graph-icn {
        background: image-url("icons/scores/icn-problem-solving-sm.png") center center no-repeat;
      }
      &.score-focus .progress-data span.graph-icn {
        background: image-url("icons/scores/icn-focus-sm.png") center center no-repeat;
      }

      &.score-memory .meter {
        background: $pm_red;
      }
      &.score-spatial_recognition .meter {
        background: $pm_green;
      }
      &.score-problem_solving .meter {
        background: $pm_blue;
      }
      &.score-focus .meter {
        background: $pm_yellow;
      }

      .progress-data {
        position: absolute;

        span.graph-icn {
          position: relative;
          top: 3px;
          left: 4px;
          width: 16px;
          height: 16px;
          display: inline-block;
        }

        span.graph-score {
          opacity: .7;
          font-size: 0.8em !important;
          border-left: 1px solid white;
          border-right: 1px solid white;
          padding: 0 5px;
          position: relative;
          left: 4px;
        }
      }

      .meter {
        &.score-memory  {
          background: $cat_memory;
        }
        &.score-spatial_recognition  {
          background: $cat_spacial-recognition;
        }
        &.score-problem_solving  {
          background: $cat_problem-solving;
        }
        &.score-focus  {
          background: $cat_focus;
        }
      }
    }

  }
}