formstone/src/less/themes/light/tooltip.less

Library of modular front end components.

/**
 * @theme
 * @name Light
 * @component Tooltip
 */

.fs-tooltip {

  @import "_config.less";

  @theme_name: fs-light;

  // Config

  @fs-tooltip-background: @fs-light-primary_900;
  @fs-tooltip-border-radius: 2px;
  @fs-tooltip-padding: 10px 15px;
  @fs-tooltip-z-index: 10;

  @fs-tooltip-text-color: @fs-light-white;
  @fs-tooltip-font-size: 12px;

  @fs-tooltip-transition-duration: 0.15s;

  @fs-tooltip-caret-size: 5px;
  @fs-tooltip-caret-width: (@fs-tooltip-caret-size * 1.3);
  @fs-tooltip-caret-height: (@fs-tooltip-caret-size * 1.3);

  // Tooltip

  &.@{theme_name} {
    z-index: @fs-tooltip-z-index;

    transition: opacity @fs-tooltip-transition-duration linear;
  }

  // Content

  &.@{theme_name} &-content {
    background: @fs-tooltip-background;
    border-radius: @fs-tooltip-border-radius;
    color: @fs-tooltip-text-color;
    float: left;
    font-size: @fs-tooltip-font-size;
    margin: 0;
    padding: @fs-tooltip-padding;
    position: relative;
  }

  // Caret

  &.@{theme_name} &-caret {
    width: 0;
    height: 0;

    content: '';
    display: block;
    margin: 0;
    position: absolute;
  }

  // Right

  .@{theme_name}&-right {
    .fs-tooltip-content {

    }

    .fs-tooltip-caret {
      top: 0;
      left: -@fs-tooltip-caret-size;

      border-top: @fs-tooltip-caret-size solid transparent;
      border-bottom: @fs-tooltip-caret-size solid transparent;
      border-right: @fs-tooltip-caret-size solid @fs-tooltip-background;
    }
  }


  // Left

  .@{theme_name}&-left {
    .fs-tooltip-content {

    }

    .fs-tooltip-caret {
      top: 0;
      right: -@fs-tooltip-caret-size;

      border-top: @fs-tooltip-caret-size solid transparent;
      border-bottom: @fs-tooltip-caret-size solid transparent;
      border-left: @fs-tooltip-caret-size solid @fs-tooltip-background;
    }
  }

  .@{theme_name}&-top,
  .@{theme_name}&-bottom {
    .fs-tooltip-caret {
      display: block;
      float: none;
      margin: 0 auto;
    }
  }

  // Top

  .@{theme_name}&-top {
    .fs-tooltip-content {

    }

    .fs-tooltip-caret {
      bottom: -@fs-tooltip-caret-size;
      left: 0;

      border-left: @fs-tooltip-caret-size solid transparent;
      border-right: @fs-tooltip-caret-size solid transparent;
      border-top: @fs-tooltip-caret-size solid @fs-tooltip-background;
    }
  }

  // Bottom

  .@{theme_name}&-bottom {
    .fs-tooltip-content {

    }

    .fs-tooltip-caret {
      top: -@fs-tooltip-caret-size;
      left: 0;

      border-left: @fs-tooltip-caret-size solid transparent;
      border-right: @fs-tooltip-caret-size solid transparent;
      border-bottom: @fs-tooltip-caret-size solid @fs-tooltip-background;
    }
  }
}