hy-checkbox/lib/Tooltip/tooltip.less

checkbox & radio ui components for react

@import "../../app/variables.less";

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.@{ult-prefix}-tooltip {
  position: relative;
  display: inline-block;
  > a {
    color: #2196f3;
    cursor: default;
  }
  .@{ult-prefix}-tips-content {
    position: absolute;
    bottom: 100%;
    margin-bottom: 12px;
    left: 0;
    right: 0;
    z-index: 1006;
    display: flex;
    justify-content: center;
    animation: fadeIn .3s ease;
    .@{ult-prefix}-tips {
      padding: 8px 16px;
      border-radius: 3px;
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      white-space: nowrap;
      position: relative;
      font-size: 12px;
      &::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        margin-left: -5px;
        border-style: solid;
        border-color: transparent;
        border-width: 5px 5px 0;
        border-top-color: rgba(0, 0, 0, 0.8);
      }
    }
  }
  &.@{ult-prefix}-tooltip-bottom {
    .@{ult-prefix}-tips-content {
      margin-top: 12px;
      top: 100%;
      bottom: auto;
      .@{ult-prefix}-tips {
        &::after {
          top: -5px;
          bottom: auto;
          border-width: 0 5px 5px;
          border-color: transparent;
          border-bottom-color: rgba(0, 0, 0, 0.8);
        }
      }
    }
  }
  &.@{ult-prefix}-tooltip-left {
    .@{ult-prefix}-tips-content {
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 0;
      margin-top: 0;
      margin-right: 12px;
      top: 0;
      bottom: 0;
      left: auto;
      right: 100%;
      .@{ult-prefix}-tips {
        &::after {
          bottom: auto;
          top: 50%;
          left: auto;
          right: -5px;
          margin-top: -5px;
          margin-left: 0;
          border-width: 5px 0 5px 5px;
          border-color: transparent;
          border-left-color: rgba(0, 0, 0, 0.8);
        }
      }
    }
  }
  &.@{ult-prefix}-tooltip-right {
    .@{ult-prefix}-tips-content {
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 0;
      margin-top: 0;
      margin-left: 12px;
      top: 0;
      bottom: 0;
      left: 100%;
      right: auto;
      .@{ult-prefix}-tips {
        &::after {
          bottom: auto;
          top: 50%;
          right: auto;
          left: -5px;
          margin-top: -5px;
          margin-left: 0;
          border-width: 5px 5px 5px 0;
          border-color: transparent;
          border-right-color: rgba(0, 0, 0, 0.8);
        }
      }
    }
  }
}

.@{ult-prefix}-popover {
    font-size: 12px;
    border-color: @btn-default-color; 
    box-shadow: 3px 3px 6px fade(@black, 9%);
    padding: 0;max-width: 276px;min-width:200px;
    line-height: @base-space * 3 - @base-space / 2;     
    color:  @panel-default-title-color;
    background-color: @white;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    line-break: auto;
    display: inline-block;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    position: absolute;
    bottom: 100%;
    margin-bottom: 12px;
    left: 0;
    right: 0;
    z-index: 1006;animation: fadeIn .3s ease;border-radius:3px;
    .@{ult-prefix}-popover-title {
        background-color: darken(@white, 2%);
        padding:@base-space  @base-space * 2;
        line-height: @base-space * 2;
        font-size: 12px;
        color: @panel-default-title-color;
        border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
    margin: 0;
    }
    .@{ult-prefix}-popover-content {
        padding: @base-space @base-space * 2;
    }
    &.@{ult-prefix}-popover-top > .@{ult-prefix}-arrow {
        border-top-color: @btn-default-color;
    }
    &.@{ult-prefix}-popover-right > .@{ult-prefix}-arrow {
        border-right-color:@btn-default-color;
    }
    &.@{ult-prefix}-popover-bottom > .@{ult-prefix}-arrow {
        border-bottom-color: @btn-default-color;
        &::after {
            border-bottom-color: darken(@white, 2%);
        }
    }
    &.@{ult-prefix}-popover-left > .@{ult-prefix}-arrow {
        border-left-color: @btn-default-color;
    }
}
.@{ult-prefix}-popover > .@{ult-prefix}-arrow {
  &,
  &:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }
}
.@{ult-prefix}-popover > .@{ult-prefix}-arrow {
  border-width: @popover-arrow-outer-width;
}
.@{ult-prefix}-popover > .@{ult-prefix}-arrow:after {
  border-width: @popover-arrow-width;
  content: "";
}

.@{ult-prefix}-popover {
  &.@{ult-prefix}-popover-top > .@{ult-prefix}-arrow {
    left: 40px;
    margin-left: -@popover-arrow-outer-width;
    border-bottom-width: 0;
    border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
    border-top-color: @popover-arrow-outer-color;
    bottom: -@popover-arrow-outer-width;
    &:after {
      content: " ";
      bottom: 1px;
      margin-left: -@popover-arrow-width;
      border-bottom-width: 0;
      border-top-color: @popover-arrow-color;
    }
  }
  &.@{ult-prefix}-popover-right { right: auto; left:100%; margin-left:15px;  top: 0;bottom:auto;

  .@{ult-prefix}-arrow {
    top: 20px;
    left: -@popover-arrow-outer-width;
    margin-top: -@popover-arrow-outer-width;
    border-left-width: 0;
    border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
    border-right-color: @popover-arrow-outer-color;
    &:after {
      content: " ";
      left: 1px;
      bottom: -@popover-arrow-width;
      border-left-width: 0;
      border-right-color: @popover-arrow-color;
    }
  }
  }
  &.@{ult-prefix}-popover-bottom{top: 100%; bottom:auto; margin-top: 15px;

  .@{ult-prefix}-arrow {
    left: 40px;
    margin-left: -@popover-arrow-outer-width;
    border-top-width: 0;
    border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
    border-bottom-color: @popover-arrow-outer-color;
    top: -@popover-arrow-outer-width;
    &:after {
      content: " ";
      top: 1px;
      margin-left: -@popover-arrow-width;
      border-top-width: 0;
      border-bottom-color: @popover-arrow-color;
    }
  }
}
  &.@{ult-prefix}-popover-left{ right: 100%; margin-right: 15px; left: auto; top:0; bottom: auto;

   .@{ult-prefix}-arrow {
    top: 20px;
    right: -@popover-arrow-outer-width;
    margin-top: -@popover-arrow-outer-width;
    border-right-width: 0;
    border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
    border-left-color: @popover-arrow-outer-color;
    &:after {
      content: " ";
      right: 1px;
      border-right-width: 0;
      border-left-color: @popover-arrow-color;
      bottom: -@popover-arrow-width;
    }
  }
}
}