src/theme/user-controls/_input.theme.scss

/********************************************************************************
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/
@import "openk.styles";

@mixin openk-input-mixin($contrast, $background, $border, $focusBorder, $backgroundDisabled, $whitespace) {
  padding: 0.4em 0.85em;
  font-size: 0.875em;
  line-height: 1.5;
  color: $contrast;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: $whitespace;
  outline: none;
  background-color: $background;
  border: 1px solid $border;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  transition: background-color ease-in-out 100ms, border-color ease-in-out 100ms, box-shadow ease-in-out 100ms;

  &.openk-focus,
  &:focus {
    border-color: $focusBorder !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 2px $focusBorder !important;
  }

  &.openk-disabled,
  &:disabled {
    background-color: $backgroundDisabled;
    cursor: not-allowed;
  }
}

.openk-primary {

  &.openk-input,
  .openk-input {
    padding: 0.4em 0.85em 0.4em calc(0.85em - 3px);
    border-left: 4px solid get-color($openk-primary-palette);
  }
}

.openk-info {

  &.openk-input,
  .openk-input {
    padding: 0.4em 0.85em 0.4em calc(0.85em - 3px);
    border-left: 4px solid get-color($openk-info-palette);
  }
}

.openk-success {

  &.openk-input,
  .openk-input {
    padding: 0.4em 0.85em 0.4em calc(0.85em - 3px);
    border-left: 4px solid get-color($openk-success-palette);
  }
}

.openk-warning {

  &.openk-input,
  .openk-input {
    padding: 0.4em 0.85em 0.4em calc(0.85em - 3px);
    border-left: 4px solid get-color($openk-warning-palette);
  }
}

.openk-danger {

  &.openk-input,
  .openk-input {
    padding: 0.4em 0.85em 0.4em calc(0.85em - 3px);
    border-left: 4px solid get-color($openk-danger-palette);
  }
}

.openk-input {
  @include openk-input-mixin(
      get-color($openk-default-palette, A400, contrast),
      get-color($openk-default-palette, 500), get-color($openk-default-palette, 800),
      get-color($openk-info-palette, A300), get-color($openk-default-palette, 600),
      nowrap
  );
}

.openk-textarea {
  @include openk-input-mixin(
      get-color($openk-default-palette, A400, contrast),
      get-color($openk-default-palette, 500), get-color($openk-default-palette, 800),
      get-color($openk-info-palette, A300), get-color($openk-default-palette, 600),
      pre-wrap
  );
}