eclipse-scout-core/src/tooltip/Tooltip.less

/*
 * Copyright (c) 2014-2017 BSI Business Systems Integration AG.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     BSI Business Systems Integration AG - initial API and implementation
 */
.tooltip {
  position: absolute;
  background-color: @tooltip-background-color;
  border: @tooltip-border;
  color: @tooltip-color;
  #scout.drop-shadow();
  max-width: 300px;
  white-space: normal;
}

.tooltip-content {
  background-color: inherit;
  padding: @tooltip-padding-y @tooltip-padding-x;
  position: relative;
  min-width: 60px; /* Prevents tooltips with very short text from looking "strange" */
  #scout.overflow-ellipsis();

  & .bold {
    font-weight: bold;
  }

  & .small {
    font-size: 11px;
    color: @tooltip-small-color;
  }
}

.tooltip-menus {
  background-color: inherit;
  padding: 0 @tooltip-padding-x 5px @tooltip-padding-x;
  position: relative;

  .tooltip.no-text > & {
    padding-top: 3px;
  }

  & > .menu-item {
    display: block;
    padding-top: @tooltip-menu-padding-y;
    padding-bottom: @tooltip-menu-padding-y;

    & > .text {
      text-decoration: underline;
    }

    & > .submenu-icon {
      padding-left: 5px;
    }
  }
}

.tooltip-arrow {
  position: absolute;
  width: @tooltip-arrow-size;
  height: @tooltip-arrow-size;
  background-color: inherit;
  border: inherit;
  #scout.transform(rotate(45deg));
  #scout.drop-shadow();
}

.tooltip-arrow.arrow-bottom {
  bottom: -(@tooltip-arrow-size / 2);
  margin-left: -(@tooltip-arrow-size / 2) - @tooltip-border-size;
}

.tooltip-arrow.arrow-top {
  top: -(@tooltip-arrow-size / 2);
  margin-left: -(@tooltip-arrow-size / 2) - @tooltip-border-size;
}

.tooltip.error {
  background-color: @tooltip-error-background-color;
  border-color: @tooltip-error-color;

  & > .tooltip-arrow {
    background-color: @tooltip-error-background-color;
    border-color: @tooltip-error-border-color;
  }

  & > .tooltip-content,
  & > .tooltip-menus {
    background-color: @tooltip-error-background-color;
  }
}

.tooltip.warning {
  background-color: @tooltip-warning-background-color;
  border-color: @tooltip-warning-border-color;
  color: @tooltip-warning-color;

  & > .tooltip-arrow {
    background-color: @tooltip-warning-background-color;
    border-color: @tooltip-warning-border-color;
  }

  & > .tooltip-content,
  & > .tooltip-menus {
    background-color: @tooltip-warning-background-color;
  }
}

.tooltip.info {
  background-color: @tooltip-info-background-color;
  border-color: @tooltip-info-border-color;
  color: @tooltip-info-color;

  & > .tooltip-arrow {
    background-color: @tooltip-info-background-color;
    border-color: @tooltip-info-border-color;
  }

  & > .tooltip-content,
  & > .tooltip-menus {
    background-color: @tooltip-info-background-color;
  }
}