@lyra/form-builder/lib/inputs/ImageInput/styles/ImageInput.css

Lyra form builder

@import 'part:@lyra/base/theme/variables-style';

.root {
}

.content {
  display: flex;
  flex-direction: column;

  @media (--screen-medium) {
    flex-direction: row;
  }
}

.field {
  composes: root from '../../ObjectInput/styles/Field.css';
}

.assetWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  position: relative;
  transition: background-color 0.1s linear;
  max-height: 18rem;
  overflow: hidden;
  flex-grow: 1;
  border-bottom: 1px;
  box-sizing: border-box;
  background-color: var(--body-bg);
  background-image: linear-gradient(
      45deg,
      var(--component-bg) 25%,
      transparent 25%
    ),
    linear-gradient(-45deg, var(--component-bg) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--component-bg) 75%),
    linear-gradient(-45deg, transparent 75%, var(--component-bg) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;

  @media (--screen-medium) {
    min-height: 12rem;
    max-height: 27rem;
    min-width: 12rem;
    height: auto;

    @nest .noContent & {
      flex-basis: 100%;
    }
  }
}

.progress {
  composes: flexCenter from 'part:@lyra/base/theme/layout/positioning-style';
}

.uploadState {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: color(var(--body-bg) a(90%));
  z-index: 1;
}

.fieldsWrapper {
  margin-top: 1rem;
  margin-left: 1rem;
}

.content + .functions {
  margin-top: 1rem;
}

.advancedEditFields {
  margin-bottom: var(--medium-padding);
}

.functions {
  composes: functions from 'part:@lyra/components/fieldsets/default-style';
}