@ustack/uskin/css/components/tip.less

A graceful framework which provides developers another chance to build an amazing site.

// Mixins

// Variables
@tip_v_padding: 18px;
@tip_h_padding: 20px;
@tip_line_height: 18px;
@tip_border_radius: @border_radius;

@tip_default_bg_color: #fff;

@tip_info_bg_color: @color_info_100;
@tip_info_border_color: @color_info;
@tip_info_strong_color: @color_info;

@tip_success_bg_color: @color_success_100;
@tip_success_border_color: @color_success;
@tip_success_strong_color: @color_success;

@tip_warning_bg_color: @color_warning_100;
@tip_warning_border_color: @color_warning;
@tip_warning_strong_color: @color_warning;

@tip_danger_bg_color: @color_delete_100;
@tip_danger_border_color: @color_delete;
@tip_danger_strong_color: @color_delete;

@tip_hd_close_size: 14px;
@tip_hd_close_color: @color_grey_700;
@tip_hd_close_hover_color: @color_grey_800;
@tip_hd_close_active_color: @color_grey_800;

@tip_shadow: 0 0 5px 0 rgba(0,0,0,0.2);

.tip {
  padding: @tip_v_padding @tip_h_padding;
  line-height: @tip_line_height;
  border-radius: @tip_border_radius;
  position: relative;
  background-color: @tip_default_bg_color;

  strong {
    margin-right: 5px;
    font-size: 14px;
    line-height: 14px;
    i {
      margin-right: 6px;
    }
  }
  .tip-icon {
    display: inline-block;
    vertical-align: top;
  }
  .tip-content {
    display: inline-block;
  }
  .icon-close {
    position: absolute;
    display: inline-block;
    width: @tip_hd_close_size;
    height: @tip_hd_close_size;
    color: @tip_hd_close_color;
    cursor: pointer;
    right: 7px;
    top: 21px;
    &:before {
      font-size: @tip_hd_close_size;
    }
    &:hover {
      color: @tip_hd_close_hover_color;
    }
    &:active {
      color: @tip_hd_close_active_color;
    }
    &.hide {
      display: none;
    }
  }
}

.tip-shadow {
  box-shadow: @tip_shadow;
}

.tip-info {
  background-color: @tip_info_bg_color;
  border: 1px solid @tip_info_border_color;
  strong {
    color: @tip_info_strong_color;
  }
}

.tip-success {
  background-color: @tip_success_bg_color;
  border: 1px solid @tip_success_border_color;
  strong {
    color: @tip_success_strong_color;
  }
}

.tip-warning {
  background-color: @tip_warning_bg_color;
  border: 1px solid @tip_warning_border_color;
  strong {
    color: @tip_warning_strong_color;
  }
}

.tip-danger {
  background-color: @tip_danger_bg_color;
  border: 1px solid @tip_danger_border_color;
  strong {
    color: @tip_danger_strong_color;
  }
}