@eclipse-scout/core/src/filechooser/FileChooser.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
 */
.file-chooser {
  position: absolute;
  top: 25%;
  left: 50%;
  width: @filechooser-max-width;
  #scout.popup-2();
  .messagebox.severity-button(@info-color);

  /* Helper class used during width calculation - required on very narrow screens (e.g. Word AddIn) */

  &.calc-helper {
    top: 0;
    left: 0;
  }

  &.animate-open {
    #scout.animation-name(short-drop);
    #scout.animation-duration(0.5s);
  }

  &.animate-modality-highlight {
    #scout.animation-shake();
  }
}

.file-chooser-content {
  border: 0 solid @border-color;
  border-radius: @border-radius-medium;
  padding: 26px;
}

.file-chooser-title {
  text-align: center;
  word-wrap: break-word;
  #scout.font-text-large(@font-weight-bold);
  color: @info-color;
}

.file-chooser-label {
  padding-top: @borderless-field-padding-y;
  padding-bottom: @borderless-field-padding-y;
  text-align: center;
}

.file-chooser-buttons {
  display: flex;
  justify-content: center;
  padding: 0 26px 26px 26px;
}

.file-chooser-files {
  @file-list-indent: 20px;
  position: relative;
  min-height: 100px;
  max-height: 200px;
  border-top: 1px solid @border-color;
  padding-top: 16px;
  margin-top: 10px;
  margin-bottom: 0;
  list-style-type: none;
  padding-left: @file-list-indent;

  & > .file {
    text-indent: -@file-list-indent;
    word-break: break-all;
    margin-bottom: 4px;

    &::before {
      #scout.font-icon();
      content: @icon-file;
      float: left;
      width: @file-list-indent;
      padding-left: 2px;
    }

    & > .remove {
      line-height: normal; /* override line-height of .menu-item */
      display: inline;
    }
  }
}

@media (max-width: @filechooser-max-width) {
  .file-chooser {
    margin: 0; /* no need to have a margin on small screens */

    & > .box-buttons {
      padding: 0 13px 26px 13px; /* use less x-padding for buttons so that more text can be shown */

      & > .box-button {
        margin-right: 4px;
        min-width: 70px; /* less min width for buttons on small screens */

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}