openaire-theme/less/input.less

@input-mode: dark;

.input-wrapper {
  /* Basic Information */
  --input-placeholder-color: @global-meta-color;
  --input-placeholder-weight: 400;
  --input-hint-color: @global-meta-color;
  --input-color: @global-color;
  --input-border-radius: @global-border-radius;
  /* Size modifiers */
  --input-padding-vertical: 12px;
  --input-padding-horizontal: 25px;
  --input-font-size: @global-font-size;
  /* Styling */
  --input-background: transparent;
  --input-shadow: none;
  --input-border: transparent;
  --input-border-width: @global-border-width;
  --input-border-style: solid;
  /* Hover Styling */
  --input-background-hover: var(--input-background);
  --input-shadow-hover: var(--input-shadow);
  --input-border-hover: var(--input-border);
  --input-border-style-hover: var(--input-border-style);
  /* Focus Styling */
  --input-background-focus: var(--input-background);
  --input-shadow-focus: var(--input-shadow);
  --input-border-focus: var(--input-border);
  --input-color-focus: @global-link-hover-color;
  --input-border-style-focus: var(--input-border-style);
  /* Disabled */
  --input-color-disabled: @global-muted-color;
  /* Danger */
  --input-danger-color: @global-danger-background;
}

/** Input Wrapper */
[style*="visibility: hidden"] .input-wrapper {
  opacity: 0;
}

.input-wrapper {
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--input-border-radius);

  /* Override border style variable in order to cheat angular optimization (DO NOT REMOVE)*/
  & {
    border-style: var(--input-border-style);
  }

  & > .input-box {
    box-shadow: var(--input-shadow);
    background: var(--input-background);
    border-radius: var(--input-border-radius);
    position: relative;
    padding: calc(var(--input-padding-vertical) + 23px) 0 var(--input-padding-vertical) var(--input-padding-horizontal);
    cursor: text;
    color: var(--input-color);

    &.static {
      padding-top: var(--input-padding-vertical);
    }

    &.select {
      cursor: pointer;
    }

    & > .placeholder {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;
      pointer-events: none;
      color: var(--input-placeholder-color);
      font-weight: var(--input-placeholder-weight);

      & > label {
        position: absolute;
        font-size: var(--input-font-size);
        line-height: @global-line-height;
        top: calc(var(--input-padding-vertical) + @global-line-height);
        left: var(--input-padding-horizontal);
        transform: translateY(-50%);
        transition: all 0.5s ease 0s;
      }
    }

    & .input {
      outline: 0 none !important;
      box-shadow: none !important;
      border-radius: 0;
      border: 0 none;
      padding: 0 var(--input-padding-horizontal) 0 0;
      font-size: var(--input-font-size);
      font-family: inherit;
      background: transparent !important;
      color: inherit;
      width: 100%;
      min-height: @global-line-height;
      line-height: @global-line-height;
      resize: none;
      cursor: inherit;

      &textarea {
        margin-top: 5px;
      }

      &::placeholder {
        color: var(--input-placeholder-color);
        opacity: 1;
      }

      &:disabled {
        background: transparent;
        color: var(--input-color-disabled);
      }
    }

    & .uk-grid .input {
      min-height: 27px;
    }

    & .icon {
      transition: all 0.3s linear 0s;
      transform: var(--input-arrow-transform);
      margin-right: var(--input-padding-horizontal);
    }

    & > .tools {
      padding-right: var(--input-padding-horizontal);
    }

    & .chip {
      max-width: calc(100% - var(--input-padding-horizontal));
    }

    & .more {
      color: var(--input-hint-color);
      font-size: var(--input-font-size);
    }

    & .uk-grid .input,
    & .uk-grid-margin .input,
    & .uk-grid .more,
    &:not(.static) .chip,
    & .uk-grid-margin.chip {
      margin-top: 10px;
    }
  }

  &:hover {
    border-color: var(--input-border-hover);
    border-style: var(--input-border-style-hover);

    & > .input-box {
      box-shadow: var(--input-shadow-hover);
      background: var(--input-background-hover);
    }
  }

  &.focused {
    border-color: var(--input-border-focus);
    border-style: var(--input-border-style-focus);

    & > .input-box {
      box-shadow: var(--input-shadow-focus);
      background: var(--input-background-focus);
    }

    &:not(.hint) > .input-box > .placeholder > label {
      color: var(--input-color-focus);
    }
  }

  &.disabled {
    & > .input-box {
      cursor: not-allowed !important;
      user-select: none;
    }

    & > .input-box {
      & .input::placeholder, & .placeholder {
        color: var(--input-color-disabled);
      }
    }
  }

  &.danger {
    border-color: var(--input-danger-color);
    & > .input-box {
      & .input::placeholder, & .placeholder, & > .placeholder > label {
        color: var(--input-danger-color);
      }

      & .icon {
        color: var(--input-danger-color);
      }
    }
  }

  &.hint {
    & > .input-box {
      & .input::placeholder {
        color: var(--input-hint-color);
      }
    }
  }

  &.active > .input-box > .placeholder > label,
  &.focused > .input-box > .placeholder > label,
  &.hint > .input-box > .placeholder > label {
    top: calc(var(--input-padding-vertical) + 13px);
    font-size: 12px;
    line-height: 18px;
  }

  &:not(.focused) > .input-box .input.search {
    opacity: 0;
  }

  /* Modifiers */
  &.inner {
    --input-shadow: @global-inset-shadow;
    --input-background: @global-inverse-color;
  }

  &.flat {
    --input-background: @global-inverse-color;
    --input-border: @global-muted-background;
  }

  &.border-bottom {
    --input-border-radius: 0;
    --input-border: @global-muted-background;
    --input-border-style: hidden hidden solid hidden;
    --input-padding-horizontal: 0;
    --input-padding-vertical: 5px;
    --input-border-focus: @global-color;
    --input-font-size: 14px;
  }

  &.search {
    --input-font-size: 14px;
    --input-padding-horizontal: 30px;
    --input-padding-vertical: 20px;
  }

  &.advanced-search {
    --input-placeholder-weight: 700;
    --input-placeholder-color: @global-color;
    --input-border-radius: 54px;
    --input-padding-horizontal: 30px;
    --input-padding-vertical: 10px;
    --input-font-size: 14px;
    --input-background-hover: @global-muted-background;
    --input-shadow-hover: if(@input-mode = dark, @global-medium-box-shadow, @inverse-global-medium-box-shadow);
    --input-background-focus: @global-background;
    --input-shadow-focus: if(@input-mode = dark, @global-medium-box-shadow, @inverse-global-medium-box-shadow);
  }

  &.x-small {
    --input-padding-horizontal: 15px;
    --input-padding-vertical: 5px;
    --input-font-size: 14px;
  }

  &.small {
    --input-padding-horizontal: 20px;
    --input-padding-vertical: 10px;
    --input-font-size: 14px;
  }

  &.small-vertical {
    --input-padding-vertical: 10px;
  }

  &.small-font-size {
    --input-font-size: 14px;
  }

  &.normal-font-size {
    --input-font-size: 16px;
  }
}

.uk-dropdown.options {
  max-height: 198px; /* 31px each line height, 5+5 margin top+bottom, 1+1 border top+bottom */
  overflow: auto;
}