wagtail/client/scss/layouts/_page-editor.scss

@use 'sass:color';
@use 'sass:map';
@use 'sass:math';

.page-editor {
  .content-wrapper {
    margin-bottom: 10em;
    overflow-x: hidden;
  }
}

.side-panel-open {
  @apply w-overflow-y-hidden sm:w-overflow-y-auto;
}

// An object is the basic wrapper around any field or group of fields in the editor interface
.object {
  @include nice-padding();
  position: relative;

  &:first-child {
    border: 0;
  }

  &.focused {
    border-color: $color-input-focus-border;
  }

  fieldset,
  .field-row {
    padding-top: $object-title-height + 12px;
  }

  fieldset {
    padding-inline-start: 0;
    padding-inline-end: 0;

    .field-row {
      padding-top: 0;
    }
  }

  > .title-wrapper {
    box-sizing: border-box;
    height: $object-title-height;
    -webkit-font-smoothing: auto;
    background: $color-salmon-light;
    color: $color-text-base;
    padding: 0.9em 0 0.9em 5em;
    font-size: 0.95em;
    margin: 0;
    line-height: 1.5em;
    font-weight: normal;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 1;
    overflow: hidden;

    label {
      display: inline;
      font-weight: inherit;
      float: none;
      width: auto;
      color: inherit;
      font-size: inherit;
    }

    &:before {
      @include font-smoothing;
      text-shadow: none;
      font-family: $font-wagtail-icons;
      // UI Redesign: To be removed in page editor redesign
      content: map.get($icons, 'arrow-down');
      text-align: center;
      display: block;
      position: absolute;
      z-index: 2;
      font-size: 2em;
      top: 0;
      line-height: 1.8em;
      inset-inline-start: 0;
      width: $desktop-nice-padding;
      color: $color-white;
      padding: 0;
      margin: 0;
      background-color: $color-salmon;
    }
  }

  &.required {
    > .title-wrapper label:after {
      content: '*';
      color: theme('colors.critical.200');
      font-weight: bold;
      display: inline-block;
      margin-inline-start: 0.5em;
      line-height: 1em;
      font-size: 13px;
    }
  }

  // cursory styling for streamfield. Main styling in client/src/components/StreamField/StreamField.scss
  &.block_field {
    padding-inline-start: 20px;
    padding-inline-end: 20px;

    .object-layout_big-part {
      max-width: 100%;
    }

    fieldset {
      padding-bottom: 0;
      max-width: unset;
      // Workaround to make sure blocks do not overflow horizontally.
      min-width: 0;
    }

    .block_field > .field-content {
      width: 100%;
    }
  }

  .multiple {
    padding: 4.5em 0 0;

    fieldset {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .fields {
    max-width: 100%;
  }

  // removes top padding from multiples used within another panel
  .fields .multiple {
    padding-top: 0;
  }

  .add {
    padding-top: 1em;
  }

  &.empty {
    border-bottom: 1px solid $color-white;

    > h3 {
      margin: 0;
      border-bottom: 1px solid $color-white;
    }

    // wrapper around add button for multiple objects. Default version is wordless plus button for contracted groups of fields
    .add {
      @include transition(background-color 0.2s ease);
      position: relative;
      z-index: 2;
      top: 0;
      inset-inline-start: 0;
      width: 3.3em;
      padding: 0;
      margin: 0 0 0 -20px;
      cursor: pointer;

      .button {
        border-radius: 0;
        overflow: visible;
        background-color: $color-salmon-light;
        font-size: 0; // helps fake the effect of t.ext-replace class, which can't be used here.
        width: 2em;

        // stylelint-disable max-nesting-depth
        &:before {
          position: relative;
          padding: 0;
          line-height: 1.8em; // specific height required as parent 'a' has no height
          font-size: 1.4rem;
          width: 1.8em;
          background-color: $color-salmon;
        }
      }
    }

    .multiple {
      padding: 0;
    }
  }

  &.collapsible {
    // li.collapsed gets its height from the fieldset only, which is now hidden
    // and h2 has position: absolute which doesn't add to it either, so it would be 0 without this
    min-height: 41px;

    .title-wrapper {
      &:before {
        // UI Redesign: To be removed in page editor redesign
        content: map.get($icons, 'collapse-up');
        cursor: pointer;
      }
    }

    &.collapsed {
      .title-wrapper {
        &:before {
          // UI Redesign: To be removed in page editor redesign
          content: map.get($icons, 'collapse-down');
        }
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .object {
    fieldset {
      // Override column mixin for column items.
      display: block;
      // Override column mixin for column items.
      float: none;
      max-width: 1024px;
      padding-inline-start: 0;
      padding-inline-end: 0;

      fieldset {
        width: 100%;
      }
    }

    .object-layout {
      display: flex;
      flex-flow: row-reverse wrap;

      &_small-part {
        flex: 1 0 0;
      }

      &_big-part {
        flex: 5 0 0;
      }
    }

    .multiple {
      @include column(10);
      padding-inline-start: 0;
      padding-inline-end: 0;

      > li {
        padding: 1em 10em 1em 1.5em;
      }
    }

    &.empty .add {
      margin: 0 0 0 -50px;
    }
  }

  // Make room for comments on the right when enabled
  .tab-content--comments-enabled .object {
    padding-inline-end: 27%;

    @include media-breakpoint-up(lg) {
      padding-inline-end: 30%;
    }
  }
}

// Media for Windows High Contrast
@media (forced-colors: $media-forced-colours) {
  .object {
    border-top: 1px solid GrayText;
  }
}