@eclipse-scout/core/src/form/fields/datefield/DateField.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.date-field {
  #scout.value-field-with-icon(~'.icon.date');
  #scout.value-field-with-icon(~'.icon.time');

  & > .field {

    & > input,
    & > .input-field {
      position: absolute;
    }

    .icon {

      &.date-clear,
      &.time-clear {
        cursor: pointer;
        display: none;

        &::before {
          content: @icon-remove-bold;
        }
      }

      &.date {

        &::before {
          content: @icon-calendar;
        }
      }

      &.time {

        &::before {
          content: @icon-clock;
        }
      }
    }
  }

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

  &:not(.disabled):not(.compact-date) > .field {
    & > .icon.date {
      display: flex;
    }

    & > input.date {
      padding-right: @text-field-icon-outer-width;

      &.alternative {
        padding-right: @text-field-alternative-icon-outer-width;
      }
    }
  }

  &:not(.disabled):not(.compact-time) > .field {
    & > .icon.time {
      display: flex;
    }

    & > input.time {
      padding-right: @text-field-icon-outer-width;

      &.alternative {
        padding-right: @text-field-alternative-icon-outer-width;
      }
    }
  }

  &.clearable-always.date-has-text:not(.disabled):not(.compact-date),
  &.clearable-focused.date-has-text.date-focused:not(.disabled):not(.compact-date) {
    #scout.value-field-with-icon(~'.icon.date-clear');

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

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

    & > .field > .date-clear {
      display: flex;
    }

    & > .field > .icon.date {
      display: none;
    }

    & > .field > input.date {
      padding-right: @text-field-icon-outer-width;

      &.alternative {
        padding-right: @text-field-alternative-icon-outer-width;
      }
    }
  }

  &.clearable-always.time-has-text:not(.disabled):not(.compact-time),
  &.clearable-focused.time-has-text.time-focused:not(.disabled):not(.compact-time) {
    #scout.value-field-with-icon(~'.icon.time-clear');

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

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

    & > .field > .time-clear {
      display: flex;
    }

    & > .field > .icon.time {
      display: none;
    }

    & > .field > input.time {
      padding-right: @text-field-icon-outer-width;

      &.alternative {
        padding-right: @text-field-alternative-icon-outer-width;
      }
    }
  }
}

.date-field > .field {

  & > .input-field[placeholder]:empty::before {
    #scout.fake-placeholder();
  }

  & > .input-field[placeholder].disabled:empty::before {
    #scout.placeholder-disabled();
  }

  /** Prediction input field is in the back of the actual input field -> make actual input field transparent */

  & > .predict {
    color: @disabled-color;
    background-color: @control-background-color;

    &.alternative {
      background-color: @text-field-alternative-background-color;
    }

    &.has-error {
      background-color: @error-background-color;
    }

    & + input {
      background-color: transparent;
    }
  }
}

.date-field.date-clearable > .field {
  & > .icon.date-clear {
    display: flex;
  }

  & > .icon.date {
    display: none;
  }
}

.date-field.time-clearable > .field {
  & > .icon.time-clear {
    display: flex;
  }

  & > .icon.time {
    display: none;
  }
}

.touch-popup-field.time > .field {

  & > input.date,
  & > .icon.date,
  & > .icon.date-clear {
    .hidden();
  }
}

.touch-popup-field.date {
  margin-bottom: 0;

  & > .field {
    & > input.time,
    & > .icon.time,
    & > .icon.time-clear {
      .hidden();
    }
  }
}