pip-webui/pip-webui-guidance/src/tips/tips.less

HTML5 UI for LOB applications

@tip-color: #fbe1b0;
@quote-color: #d9e8a9;

.pip-popover-backdrop {
  &.pip-tip .pip-popover,
  &.pip-help .pip-popover {
    background-color: @tip-color;

    &:after {
      border-color: rgba(255, 255, 255, 0);
      border-bottom-color: @tip-color;
    }
  }

  &.pip-quote .pip-popover {
    background-color: @quote-color;

    &:after {
      border-color: rgba(255, 255, 255, 0);
      border-bottom-color: @quote-color;
    }
  }

  .pip-title {
    overflow: hidden;
  }

  .pip-content {
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;

    .pip-pic {
      height: 200px;
      width: 100%;
      background-position: 50% 50%;
      background-size: cover;
      background-repeat: no-repeat;
      margin-bottom: 16px;
    }

    .pip-markdown p {
      line-height: 22px !important;
    }
  }

  .pip-content.bm64 {
    margin-bottom: 64px !important;
  }

  .pip-footer {
    min-height: 48px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  &.pip-tip {
    .pip-title {
      font: @font-title;
      line-height: 26px;
    }
  }

  &.pip-quote {
    .pip-bg {
      height: 80px;
      width: 80px;
      position: absolute;
      top: 10px;
      left: 16px;
    }

    .pip-content {
      margin-bottom: 48px;
      font: @font-subhead2;
      line-height: 24px;
      margin-top: 24px;
      padding-bottom: 0;
    }

    .pip-footer {
      padding-bottom: 0;
      margin-top: 0;
      margin-bottom: 0;
      padding-top: 0;

      .pip-author {
        height: 36px !important;
        font: @font-body1;
        line-height: 36px;
      }
    }
  }
}