falcon-ui/app/css/styles/popover.less

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@popover-bg-color: #fff;
@popover-text-color: #000;
@popover-header-color: #777;
@popover-border-color: #d2d2d2;

@popover-triangle-size: 11px;
@popover-triangle-color: @popover-bg-color;
@popover-triangle-border-color: @popover-border-color;

.ns-popover-list-theme {
  box-sizing: border-box;
  border: solid 1px @popover-border-color;
  border-radius: 3px;
  z-index: 100;
  background-color: #fff;
  -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
  box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);

  ul, .list {
    padding: 0;
    margin: 0.625rem 0;
    display: block;
  }

  li, .list-item {
    list-style-type: none;

    a {
      padding: 0.1875rem 0.625rem;
      display: block;

      &:hover {
        background-color: #f5f5f5;
      }
    }
  }
}

// @mixins
//
// We use this to create equilateral triangles
// @triangle-size - Used to set border-size. No default, set a px or em size.
// @triangle-color - Used to set border-color which makes up triangle. No default
// @triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
.triangle(@triangle-direction,
  @triangle-size:@popover-triangle-size,
  @triangle-color:@popover-triangle-color,
  @triangle-border-color:@popover-triangle-border-color) {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: solid @triangle-size;
  border-color: transparent;
  position: absolute;

  &:after {
    content: " ";
    display: block;
    width:0;
    height:0;
    border: solid 10px;
    border-color: transparent;
    position: absolute;
  }

  & when (@triangle-direction = "top") {
    border-top-color: @triangle-border-color;
    left:50%;
    bottom: -@triangle-size;
    margin-left: -@triangle-size;

    &:after {
      border-top-color: @triangle-color;
      border-bottom-width: 0;
      bottom: 1px;
      margin-left: -10px;
    }
  }

  & when (@triangle-direction = "bottom") {
    border-bottom-color: @triangle-border-color;
    left:50%;
    top: -@triangle-size;
    margin-left: -@triangle-size;

    &:after {
      border-bottom-color: @triangle-color;
      border-top-width: 0;
      top: 1px;
      margin-left: -10px;
    }
  }

  & when (@triangle-direction = "left") {
    border-left-color: @triangle-border-color;
    top:50%;
    right: -@triangle-size;
    margin-top: -@triangle-size;

    &:after {
      border-left-color: @triangle-color;
      border-right-width: 0;
      right: 1px;
      bottom: -10px;
    }
  }

  & when (@triangle-direction = "right") {
    border-right-color: @triangle-border-color;
    top:50%;
    left: -@triangle-size;
    margin-top: -@triangle-size;

    &:after {
      border-right-color: @triangle-color;
      border-left-width: 0;
      left: 1px;
      bottom: -10px;
    }
  }
}

.ns-popover-tooltip-theme {
  box-sizing: border-box;
  z-index: 100;
  background-color: transparent;
  color: @popover-text-color;
  .ns-popover-tooltip {
    box-sizing: border-box;
    border: solid 1px @popover-border-color;
    border-radius: 3px;
    z-index: 100;
    background-color: #fff;
    padding: 0.5625rem 0.875rem;
    -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
    box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
    margin: 10px;

    h5 {
      font-weight: bold;
      font-size: 16px;
      color: @popover-header-color;
    }

    ul {
      padding: 0;
      margin: 0.625rem 0;
      display: block;
    }

    li {
      list-style-type: none;

      a {
        padding: 0.1875rem 0.625rem;
        display: block;

        &:hover {
          background-color: #f5f5f5;
        }
      }
    }
  }

  &.ns-popover-bottom-placement {
    .triangle {
      .triangle("bottom");
    }
  }

  &.ns-popover-top-placement {
    .triangle {
      .triangle("top");
    }
  }

  &.ns-popover-right-placement {
    .triangle {
      .triangle("right");
    }
  }

  &.ns-popover-left-placement {
    .triangle {
      .triangle("left");
    }
  }

  &.ns-popover-left-align {
    .ns-popover-tooltip {
      margin-left: 0;
    }
  }

  &.ns-popover-right-align {
    .ns-popover-tooltip {
      margin-right: 0;
    }
  }

  &.ns-popover-top-align {
    .ns-popover-tooltip {
      margin-top: 0;
    }
  }

  &.ns-popover-bottom-align {
    .ns-popover-tooltip {
      margin-bottom: 0;
    }
  }
}