Reproduce Hallo field styles for Draftail, and adapt padding

client/src/components/Draftail/Draftail.scss

@@ -1,5 +1,6 @@
 $editor-z-index: $draftail-editor-z-index;
 
+$draftail-editor-text: $color-text-input;
 $draftail-editor-chrome: $color-grey-1;
 $draftail-editor-chrome-text: $color-white;
 $draftail-editor-chrome-active: $color-white;
@@ -67,3 +68,34 @@ $draftail-editor-font-family: $font-serif;
 .Draftail-Toolbar {
     display: inline-block;
 }
+
+.Draftail-Editor {
+    border-radius: 0;
+}
+
+// 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-right: 1px solid $color-input-border;
+
+    &--focus {
+        background-color: $color-input-focus;
+        border-color: $color-input-focus-border;
+    }
+}
+
+.full .Draftail-Editor .public-DraftEditor-content {
+    @include nice-padding;
+}
+
+.full .Draftail-Toolbar {
+    @include nice-margin;
+}
+
+.title .Draftail-Editor .public-DraftEditor-content {
+    font-size: 2em;
+}

wagtail/admin/static_src/wagtailadmin/scss/_grid.scss

@@ -56,8 +56,18 @@ $padding: $grid-gutter-width * 0.5;
     padding-left: $mobile-nice-padding;
     padding-right: $mobile-nice-padding;
 
-    @media screen and (min-width: $breakpoint-mobile) {
+    @include medium {
         padding-left: $desktop-nice-padding;
         padding-right: $desktop-nice-padding;
     }
 }
+
+@mixin nice-margin {
+    margin-left: $mobile-nice-padding;
+    margin-right: $mobile-nice-padding;
+
+    @include medium {
+        margin-left: $desktop-nice-padding;
+        margin-right: $desktop-nice-padding;
+    }
+}

wagtail/admin/static_src/wagtailadmin/scss/_mixins.scss

@@ -2,6 +2,8 @@
 // Mixins
 // =============================================================================
 
+@import '../../../../../client/scss/tools.breakpoints';
+
 // Please note that the mixins partial shouldn't include any classes. This is so
 // it can be included in any file without accidentally producing output
 

wagtail/admin/static_src/wagtailadmin/scss/_variables.scss

@@ -52,6 +52,7 @@ $color-header-bg: $color-teal; // #ff6a58;
 $color-fieldset-hover: $color-grey-5;
 $color-input-border: $color-grey-4;
 $color-input-focus: #f4fcfc;
+$color-input-focus-border: darken($color-input-focus, 40%);
 $color-input-error-bg: #feedee;
 $color-button: $color-teal;
 $color-button-hover: $color-teal-darker;

wagtail/admin/static_src/wagtailadmin/scss/components/_datetimepicker.scss

@@ -1,7 +1,7 @@
 .xdsoft_datetimepicker {
     box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.4);
-    background: #fff;
-    border: 1px solid darken($color-input-focus, 40%);
+    background: $color-white;
+    border: 1px solid $color-input-focus-border;
     padding: 8px;
     padding-left: 0;
     padding-top: 2px;

wagtail/admin/static_src/wagtailadmin/scss/components/_forms.scss

@@ -74,9 +74,9 @@ select,
     }
 
     &:focus {
-        border-color: darken($color-input-focus, 40%);
-        outline: none;
         background-color: $color-input-focus;
+        border-color: $color-input-focus-border;
+        outline: none;
     }
 
     &:disabled,

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -10,6 +10,10 @@
 
     .breadcrumb {
         margin: -1.2em 0 2em;
+
+        @include medium {
+            margin-top: -1.8em;
+        }
     }
 
     .modal .breadcrumb {
@@ -32,7 +36,7 @@
     .header-title {
         padding-left: 3.1em;
 
-        @media screen and (max-width: $breakpoint-mobile) {
+        @include medium {
             padding-left: 0;
             margin-left: -28px;
             // Because it's nested within tab-merged which we've given padding
@@ -53,7 +57,7 @@ $object-title-height: 40px;
     }
 
     &.focused {
-        border-color: darken($color-input-focus, 40%);
+        border-color: $color-input-focus-border;
     }
 
     fieldset {
@@ -146,8 +150,7 @@ $object-title-height: 40px;
         }
     }
 
-    .halloeditor,
-    .Draftail-Editor {
+    .halloeditor {
         padding-top: 1em; // to provide space for editor buttons
         padding-bottom: 1em;
 
@@ -185,8 +188,7 @@ $object-title-height: 40px;
             padding: 0;
         }
 
-        .halloeditor,
-        .Draftail-Editor {
+        .halloeditor {
             padding-top: 3em; // to provide space for editor buttons
             padding-bottom: 3em;
 
@@ -204,8 +206,7 @@ $object-title-height: 40px;
         .error,
         .error input,
         .error textarea,
-        .error .halloeditor,
-        .error .Draftail-Editor {
+        .error .halloeditor {
             background-color: $color-input-error-bg;
         }
     }
@@ -338,8 +339,7 @@ $object-title-height: 40px;
 // Custom styles that make some fields look more important
 .full input,
 .full textarea,
-.full .halloeditor,
-.full .Draftail-Editor {
+.full .halloeditor {
     @include nice-padding;
     border-radius: 0;
     padding-top: 2em;
@@ -350,8 +350,7 @@ $object-title-height: 40px;
 
 .title input,
 .title textarea,
-.title .halloeditor,
-.title .Draftail-Editor {
+.title .halloeditor {
     font-size: 2em;
     font-family: $font-serif;
 }
@@ -402,11 +401,7 @@ footer .preview {
     }
 }
 
-@media screen and (min-width: $breakpoint-mobile) {
-    .page-editor .breadcrumb {
-        margin-top: -1.8em;
-    }
-
+@include medium {
     .object {
         fieldset {
             @include column(10);

wagtail/admin/static_src/wagtailadmin/scss/panels/draftail.scss

@@ -1,4 +1,5 @@
 @import 'wagtailadmin/scss/variables';
 @import 'wagtailadmin/scss/mixins';
+@import 'wagtailadmin/scss/grid';
 
 @import '../../../../../../client/src/components/Draftail/Draftail';