Artifact b4874a4e3afb463fc713d36aac8b9bfee7a5fb9f:

• Executable file wiki_references/2017/software/banking/Interledger/src_from_GitHub/the_repository_clones/ilp-kit/client/src/containers/ActivityPayment/ActivityPayment.scss — part of check-in [3d7c129ddd] at 2018-03-21 18:18:26 on branch trunk — banking & unclassified_references (user: martin_vahi, size: 3280) [annotate] [blame] [check-ins using]

// TODO:UX include only one var file
@import 'variables';
@import 'pages/scss/var';
@import 'mixins';

$screen-md: 992px;

.ActivityPayment {
  border-top: 1px solid $activity-payment-separator-color;
  padding: 15px;

  @include mobile {
    border-top: none;
    border-bottom: 1px solid $activity-payment-separator-color;
  }
}
.link, .link:hover, .link:active, .link:visited {
  display: block;
  color: $color-master;
  padding: 15px 20px;
}
.link:hover {
  background: darken($box-background-color, 3%);
}
.profilePic {
  float: left;
  width: 15%;
  border-radius: 50px;

  @include mobile {
    width: 20%;
  }
}
.description {
  float: left;
  width: 85%;
  padding-left: 15px;

  @include mobile {
    width: 80%;
    padding-left: 10px;
  }
}
.counterpartyContainer {
  font-size: 18px;
  padding: 6px 0;

  .counterparty {
    border-bottom: 1px dotted lighten($text-color, 40%);
    @include singleLinkColor($text-color);

    &:hover {
      color: darken($text-color, 20%);
    }
  }
}
.counterpartyIdentifier {
  display: block;
  font-size: 10px;

  @include singleLinkColor($activity-date-text-color);
}
.message {
  font-size: 15px;
  line-height: 22px;
}
.date {
  font-size: 13px;
  line-height: 15px;
  color: $activity-date-text-color;
}
.activeStream {
  position: absolute;
  top: calc(50% - 15px); // 15px is half of the font-size
  font-size: 30px;
  color: #10cfbd;
}
.amount {
  display: block;
  font-size: 22px;
  text-align: right;
  line-height: 37px;

  @media (max-width: $screen-md) {
    font-size: 20px;
  }
  transition: all .2s ease-in;

  &.updating {
    font-size: 30px;
  }
}
.outgoing {
  color: $activity-negative;
}
.outgoing:before {
  content: "– ";
}
.incoming {
  color: $activity-positive;
}
.incoming:before {
  content: "+ ";
  padding: 0 0 10px;
}
.expand {
  a {
    display: block;
    margin: 0 0 0 -20px;
    line-height: 40px;
    font-size: 22px;
    color: $activity-expand-text-color;
    background: $activity-expand-background-color;
    text-align: center;
    border-radius: 3px;
  }
  a:hover, a:active, a:focus {
    text-decoration: none;
  }
  a.active {
    color: $text-color;
    background: $container-background-color;
  }
}

.transfersCount {
  display: block;
  text-align: right;
  color: $activity-date-text-color;
}
.transfersContainer {
  & > div {
    max-height: 300px;
    margin-top: 15px;
    overflow: auto;

    &:first-child {
      padding-left: 12%;

      @include mobile {
        padding-left: 15%;
      }
    }
  }

  a {
    color: $text-color;
    border-bottom: 1px dotted $text-color;

    &:hover {
      color: darken($text-color, 10%);
    }
  }

  .date {
    font-size: 15px;
    line-height: 25px;
  }
  .amount {
    font-size: 15px;
    line-height: 25px;
  }
  .hash {
    font-size: 15px;
    line-height: 25px;
  }

  // Animation
  .appear {
    max-height: 0;
    opacity: 0;
    transition: all .3s ease-in;
  }
  .appearActive {
    max-height: 300px;
    opacity: 1;
  }
  .enter {
    max-height: 0;
    opacity: 0;
    transition: all .3s ease-in;
  }
  .enterActive {
    opacity: 1;
    max-height: 300px;
  }
  .leave {
    max-height: 300px;
    opacity: 1;
    transition: all .3s ease-out;
  }
  .leaveActive {
    max-height: 0;
    opacity: 0;
  }
}