wagtail/client/src/components/Draftail/Draftail.scss

$editor-z-index: $draftail-editor-z-index;

$draftail-editor-text: $color-text-input;
$draftail-editor-chrome: $color-white;
$draftail-editor-chrome-text: $color-grey-2;
$draftail-editor-chrome-active: $color-grey-2;
$draftail-editor-chrome-accent: transparent;

$draftail-editor-border: 0;
$draftail-editor-padding: 0.75rem;
$draftail-editor-background: transparent;
$draftail-toolbar-radius: 3px;
$draftail-toolbar-icon-size: 1em;

$draftail-editor-font-family: $font-sans;

@import '../../../../node_modules/draft-js/dist/Draft';
@import '../../../../node_modules/draftail/lib/index';

@import './Tooltip/Tooltip';
@import './CommentableEditor/CommentableEditor';
@import './EditorFallback/EditorFallback';

@import './decorators/TooltipEntity';

@import './blocks/MediaBlock';
@import './blocks/ImageBlock';
@import './blocks/EmbedBlock';

@include draftail-richtext-styles {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    // Overrides for other parts of the Wagtail admin.
    text-transform: none;
    font-family: inherit;
    clear: both;
    line-height: 1;
  }

  h1,
  h2,
  h3 {
    line-height: 1.1;
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.5em;
  }

  h4 {
    font-size: 1.2em;
  }

  h5 {
    font-size: 1.1em;
  }
}

.Draftail-Editor {
  border-radius: 0;

  &__wrapper {
    // Ensure elements within the editor are positioned according to this container.
    position: relative;
  }
}

.Draftail-ToolbarButton .icon {
  width: $draftail-toolbar-icon-size;
  height: $draftail-toolbar-icon-size;
  vertical-align: middle;
}

// When in a .full container, the editor has a specific appearance
// so the whole area appears like a focusable area, and the editor
// receives focus on click.
.full .Draftail-Editor {
  padding-top: 2em;
  padding-bottom: 2em;
  background-color: $color-fieldset-hover;
  border-inline-end: 1px solid $color-input-border;

  &--focus {
    background-color: $color-input-focus;
    border-color: $color-input-focus-border;
  }
}

.full .Draftail-Editor .public-DraftEditor-content,
.full .Draftail-Editor .public-DraftEditorPlaceholder-root {
  @include nice-padding;
}

.full .Draftail-Toolbar {
  @include nice-margin;
}

.Draftail-Toolbar {
  border: 1px solid $color-grey-3;
}

.Draftail-ToolbarButton {
  &:hover,
  &:active {
    border: 1px solid $color-grey-3;
  }
}

.title .Draftail-Editor .public-DraftEditor-content,
.title .Draftail-Editor .public-DraftEditorPlaceholder-root {
  font-size: 2em;
}

.Draftail-block--blockquote {
  border-inline-start: 0.25em solid $color-grey-3;
  color: $color-grey-2;
  margin: 1em 0;
  padding: 1em 2em;
}