theme-base.components.file._fileupload.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of primefaces-themes
There is a newer version: 15.0.0
@use 'sass:math';
@use 'sass:color';

body {
  .ui-fileupload {

    &.ui-state-drag .ui-fileupload-drag-overlay {
      display: flex;
      animation: fade-in $transitionDuration ease-in-out both;
    }

    .ui-fileupload-drag-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba($successMessageBg, 0.8);
      z-index: 1;
      display: none;
      justify-content: center;
      align-items: center;
      border-radius: $borderRadius;
      border: dashed color.scale($successMessageBg, $lightness: -35%) 2px;

      .ui-fileupload-drag-overlay-content {
        i {
          color: color.scale($successMessageBg, $lightness: -35%);
          font-size: 3em;
        }
      }
    }

    .ui-fileupload-buttonbar {
      border: $panelHeaderBorder;
      background: $panelHeaderBg;
      color: $panelHeaderTextColor;
      padding: $panelHeaderPadding;
      @include border-radius-top($borderRadius);

      .ui-button {
        margin-right: $inlineSpacing;

        &.ui-state-disabled {
          &:not(.ui-fileupload-choose) {
            display: none;
          }
        }
      }
    }

    .ui-fileupload-content {
      border: $panelContentBorder;
      background: $panelContentBg;
      color: $panelContentTextColor;
      padding: $panelContentPadding;
      border-top: 0 none;
      @include border-radius-bottom($borderRadius);

      .ui-fileupload-cancel {
        .ui-icon {
          @include icon-override ("\e90b");
        }
      }

      .ui-fileupload-files {
        .ui-fileupload-row > div {
          padding: $fileItemPadding;
        }
      }
    }
  }

  .ui-fileupload-simple {
    .ui-icon-plusthick {
      @include icon-override ("\e90d");
    }
  }

  @media screen and (max-width: 40em) {
    .ui-fileupload {
      .ui-fileupload-buttonbar {
        .ui-button {
          &.ui-fileupload-choose,
          &.ui-fileupload-upload,
          &.ui-fileupload-cancel {
            .ui-icon {
              left: 50%;
              margin-left: math.div(-1 * $iconSize, 2);
            }
          }
        }
      }
    }
  }
}