eclipse-scout-core/src/style/mixins.less

/*
 * Copyright (c) 2014-2018 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
 */
#scout {

  .vendor(@property, @value) {
    -webkit-@{property}: @value;
    -moz-@{property}: @value;
    -ms-@{property}: @value;
    -o-@{property}: @value;
      @{property}: @value;
  }

  .glow(@color, @radius: 5px) {
    box-shadow: 0 0 @radius @color;
  }

  .inner-glow(@color, @radius: 4px) {
    box-shadow: inset 0 0 @radius @color;
  }

  .drop-shadow(@x: 2px, @y: 6px, @blur: 14px, @spread: -6px, @alpha: @drop-shadow-alpha) {
    box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
  }

  .drop-shadow-large(@x: 4px, @y: 10px, @blur: 18px, @spread: -6px, @alpha: @drop-shadow-large-alpha) {
    #scout.drop-shadow(@x, @y, @blur, @spread, @alpha);
  }

  .focus-border(@bordersize: 1px) {
    outline: none;
    border: @bordersize solid @focus-border-color;
    #scout.glow(@focus-glow-color);
  }

  .focus-border-inverted(@bordersize: 1px) {
    outline: none;
    border: @bordersize solid @focus-border-color-inverted;
    #scout.glow(@focus-glow-color-inverted);
  }

  .no-focus-border() {
    outline: none;
    border: 0;
    box-shadow: 0 0 0 0;
  }

  .alternative-focus-border() {
    border-bottom-color: @focus-border-color;
    border-bottom-width: 2px;
    box-shadow: none;
    padding-bottom: 0;
  }

  .transform(@args) {
    -webkit-transform: @args;
    -ms-transform: @args;
    transform: @args;
  }

  .transform-origin(@args) {
    -webkit-transform-origin: @args;
    -moz-transform-origin: @args;
    -ms-transform-origin: @args;
    transform-origin: @args;
  }

  .text-selection() {
    background: @text-selection-background-color;
    color: @text-selection-color;
  }

  .text-selection-disabled() {
    background: @text-selection-disabled-background-color;
    color: @text-selection-disabled-color;
  }

  .placeholder() {
    color: @text-field-placeholder-color;
    opacity: 1; /* necessary for firefox */
  }

  .placeholder-disabled() {
    /* Fade a little to make it distinguishable from real text. Don't use opacity here because it affects background as well (IE). */
    color: fade(@disabled-color, 70%);
  }

  .fake-placeholder() {
    /* placeholder only works for input elements -> this fake placeholder is intended for a before element*/
    #scout.placeholder();
    content: attr(placeholder);
  }

  .overlay(@left: 0, @top: 0, @diffW: 0, @diffH: 0) {
    position: absolute;
    content: '';
    left: @left;
    top: @top;
    width: calc(~'100% + ' @diffW);
    height: calc(~'100% + ' @diffH);
  }

  /* Use dashed line instead of solid to avoid visual conflict with editable fields */
  .read-only() {
    background-color: transparent;
    border-color: transparent;
    border-bottom: dashed 1px @border-color;
    color: @text-color;
  }

  .value-field-with-icon(@className: ~'.icon') {

    &.focused > @{className}::before,
    &.focused > .field > @{className}::before {
      color: @text-field-icon-focus-color;
    }

    &.has-error > @{className}::before,
    &.has-error > .field > @{className}::before,
    &.has-error > .field > @{className}::before {
      color: @text-field-icon-error-color;
    }

    &.disabled > @{className},
    &.disabled > .field > @{className},
    &.compact > @{className},
    &.compact > .field > @{className} {
      display: none;
    }

    &.alternative.has-error:focus > .field > @{className}::before,
    &.alternative.has-error.focused > .field > @{className}::before {
      color: @text-field-icon-error-color;
    }
  }

  .status {
    text-align: center;

    &::before {
      #scout.font-icon();
      font-size: @status-font-icon-size;
    }
  }

  .menu-status {
    visibility: visible;
    cursor: pointer;

    &::before {
      content: @icon-ellipsis-v;
      color: @status-menu-color;
      font-size: 18px;
    }

    &:hover::before {
      color: @status-menu-hover-color;
    }

    &:active::before {
      color: @status-menu-hover-color;
    }
  }

  .tooltip-status,
  .info-status {
    visibility: visible;
    cursor: pointer;

    &::before {
      content: @icon-info;
      color: @status-info-color;
      font-size: @status-font-icon-size;
    }

    &:hover::before {
      color: @status-info-hover-color;
    }

    &:active::before {
      color: @status-info-hover-color;
    }
  }

  .warning-status {
    visibility: visible;
    cursor: pointer;

    &::before {
      content: @icon-error;
      color: @status-warning-color;
      font-size: @status-font-icon-size;
    }

    &:hover::before {
      color: @status-warning-hover-color;
    }

    &:active::before {
      color: @status-warning-hover-color;
    }
  }

  .error-status {
    visibility: visible;
    cursor: pointer;

    &::before {
      content: @icon-error;
      color: @status-error-color;
      font-size: @status-font-icon-size;
    }

    &:hover::before {
      color: @status-error-hover-color;
    }

    &:active::before {
      color: @status-error-hover-color;
    }
  }

  .loading-indicator(@loading-animation-size: 30px, @border-width: 1px) {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -(@loading-animation-size / 2);
    margin-left: -(@loading-animation-size / 2);
    #scout.animation(fade-in 0.15s);
    #scout.loading-indicator-before(@loading-animation-size, @border-width);
  }

  .loading-indicator-before(@loading-animation-size: 30px, @border-width: 1px) {

    &::before {
      #scout.animation(pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite);
      content: '';
      display: inline-block;
      vertical-align: middle;
      border-radius: 50%;
      border: @border-width fade(@busyindicator-active-color, 80%) solid;
      width: @loading-animation-size;
      height: @loading-animation-size;
    }
  }

  .user-select(@mode) {
    -webkit-user-select: @mode;
    -moz-user-select: @mode;
    -ms-user-select: @mode;
    user-select: @mode;
  }

  .checkbox() {
    display: inline-block;
    position: relative;
    width: @check-box-size;
    height: @check-box-size;
    border: @check-box-border-width solid @check-box-border-color;
    border-radius: @check-box-border-radius;
    background-color: @control-background-color;
    text-align: center;
  }

  .checkbox-disabled() {
    background-color: @control-disabled-background-color;
  }

  .checkbox-before() {
    position: absolute;
    display: block;
    line-height: @check-box-checked-line-height;
    width: @check-box-size - 2 * @check-box-border-width;
  }

  .checkbox-before-checked() {
    #scout.font-icon();
    content: @icon-checked-bold;
    color: @check-box-checked-color;
    font-size: 11px;
  }

  .checkbox-before-undefined() {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(~'100% - 6px');
    height: calc(~'100% - 6px');
    border-radius: 1px;
    background-color: @check-box-checked-color;
  }

  .checkbox-before-undefined-disabled() {
    background-color: @check-box-disabled-color;
  }

  .checkbox-before-disabled() {
    color: @check-box-disabled-color;
  }

  .checkbox-after-children-checked() {
    #scout.checkbox-before-undefined();
  }

  .checkbox-after-children-checked-disabled() {
    background-color: @check-box-disabled-color;
  }

  .overflow-ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .overflow-ellipsis-nowrap() {
    #scout.overflow-ellipsis();
    white-space: nowrap;
  }

  .overflow-nowrap() {
    overflow: hidden;
    white-space: nowrap;
  }

  .white-space-nowrap() {
    white-space: nowrap;
  }

  .button-focus() {
    #scout.overlay(-3px, -3px, 6px, 6px);
    #scout.focus-border();
    border-radius: @button-border-radius;
  }

  .triangle-top-left(@size, @color) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @size @size 0 0;
    #scout.triangle-top-left-color(@color);
  }

  .triangle-top-left-color(@color) {
    border-color: @color transparent transparent transparent;
  }

  /* Font Mixins */

  .font-text-small(@font-weight: @font-weight-normal) {
    font-family: @font-default-family;
    font-weight: @font-weight;
    font-size: @font-size-small;
  }

  .font-text-normal(@font-weight: @font-weight-normal) {
    font-family: @font-default-family;
    font-weight: @font-weight;
    font-size: @font-size-normal;
  }

  .font-text-plus(@font-weight: @font-weight-normal) {
    font-family: @font-default-family;
    font-weight: @font-weight;
    font-size: @font-size-plus;
  }

  .font-text-large(@font-weight: @font-weight-normal) {
    font-family: @font-default-family;
    font-weight: @font-weight;
    font-size: @font-size-large;
  }

  .font-icon() {
    font-family: scoutIcons, @font-default-family;
    font-weight: @font-weight-normal;
    speak: none;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .submenu-icon() {
    #scout.font-icon();
    font-size: 16px;
  }

  /* Invisible pseudo element that enables vertical-align if container has height set */
  .vertical-align-helper(@minHeight: 0) {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    min-height: @minHeight;
  }

  .vertical-align-helper-before(@minHeight: 0) {
    &::before {
      #scout.vertical-align-helper(@minHeight);
    }
  }

  .vertical-align-helper-after(@minHeight: 0) {
    &::after {
      #scout.vertical-align-helper(@minHeight);
    }
  }

  //noinspection CssInvalidPropertyValue
  .cursor-grab {
    /* "grab" cursor with fallback for browsers that don't understand CSS3 cursors */
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
  }

  //noinspection CssInvalidPropertyValue
  .cursor-grabbing {
    /* "grabbing" cursor with fallback for browsers that don't understand CSS3 cursors */
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
  }

  /* Mixin for chooser popups as used in smart-field */

  .chooser-popup {
    position: absolute;
    border: solid 1px @control-popup-border-color;
    border-radius: @control-popup-border-radius;
    overflow: hidden;
    background-color: @control-popup-background-color;
    #scout.focus-border();

    &.bottom {
      margin-top: 5px;
    }

    &.top {
      margin-bottom: 5px;
    }

    &.touch {
      background-color: @table-header-background-color;
    }

    &.alternative {
      #scout.drop-shadow();
      border-radius: @control-alternative-border-radius;
    }
  }

  /* Mixin for scrollbar positioning */
  .scrollbar-y-padding(@padding: @scrollbar-side-padding, @padding-hover: @scrollbar-side-padding-hover) {
    & > .scrollbar-thumb.y-axis {
      padding-left: @padding;
    }

    &:hover.y-axis > .scrollbar-thumb.y-axis,
    &.y-axis > .scrollbar-thumb.y-axis.scrollbar-thumb-move {
      padding-left: @padding-hover;
    }
  }

  .scrollbar-x-padding(@padding: @scrollbar-side-padding, @padding-hover: @scrollbar-side-padding-hover) {
    & > .scrollbar-thumb.x-axis {
      padding-top: @padding;
    }

    &:hover.x-axis > .scrollbar-thumb.x-axis,
    &.x-axis > .scrollbar-thumb.x-axis.scrollbar-thumb-move {
      padding-top: @padding-hover;
    }
  }

  /*
  * Hides the scrollbars but lets the user still scroll (e.g. using mousewheel or touch). Does not work for Firefox.
  */

  .hide-scrollbars {
    &::-webkit-scrollbar {
      display: none;
    }

    -ms-overflow-style: none;
  }

  /**
   * Uses the inverted colors of the scrollbars. Use this mixin in a widget that requires inverted scrollbars (e.g. a widget with white background in dark mode).
   */

  .inverted-scrollbars {
    & > .scrollbar > .scrollbar-thumb {
      & > .scrollbar-thumb-handle {
        background-color: @scrollbar-thumb-inverted-color;
      }

      &.scrollbar-thumb-move > .scrollbar-thumb-handle,
      &:hover > .scrollbar-thumb-handle {
        background-color: @scrollbar-thumb-inverted-hover-color;
      }

      &.container-too-small-for-thumb > .scrollbar-thumb-handle {
        background-color: @scrollbar-thumb-inverted-small-color;
      }

      &.container-too-small-for-thumb.scrollbar-thumb-move > .scrollbar-thumb-handle,
      &.container-too-small-for-thumb.scrollbar-thumb:hover > .scrollbar-thumb-handle {
        background-color: @scrollbar-thumb-inverted-small-hover-color;
      }
    }
  }
}