Rearrange SCSS structure according to ITCSS

CHANGELOG.txt

@@ -6,6 +6,7 @@ Changelog
 
  * Removed support for Python 3.4
  * Added support for `short_description` for field labels in modeladmin's `InspectView` (Wesley van Lee)
+ * Rearranged SCSS folder structure to the client folder and split them approximately according to ITCSS. (Naomi Morduch Toubman, Jonny Scholes, Janneke Janssen, Hugo van den Berg)
 
 
 2.5 (xx.xx.xxxx) - IN DEVELOPMENT

client/scss/_components.scss

@@ -1,4 +0,0 @@
-@import '../src/components/Transition/Transition';
-@import '../src/components/LoadingSpinner/LoadingSpinner';
-@import '../src/components/PublicationStatus/PublicationStatus';
-@import '../src/components/Explorer/Explorer';

client/scss/_settings.scss

@@ -0,0 +1,2 @@
+@import 'settings/variables';
+@import 'settings/variables.icons';

client/scss/_tools.scss

@@ -0,0 +1,10 @@
+/* TOOLS
+These are functions and mixins.
+No CSS should be produced by these files.
+*/
+
+@import 'tools/functions.breakpoints';
+@import 'tools/mixins.breakpoints';
+@import 'tools/mixins.fonts';
+@import 'tools/mixins.general';
+@import 'tools/mixins.grid';

client/scss/components/_breadcrumb.scss

@@ -0,0 +1,108 @@
+.breadcrumb {
+    @include unlist();
+    @include clearfix();
+    overflow: hidden;
+    padding-top: 1.4em;
+    font-size: 0.85em;
+
+    li {
+        display: block;
+        float: left;
+        padding: 0.5em 1.3em;
+        position: relative;
+        text-decoration: none;
+        color: $color-white;
+        white-space: nowrap;
+        line-height: 1.5em;
+
+        a,
+        span {
+            color: $color-white;
+            display: block;
+            max-width: 12em;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            line-height: 1.6em;
+            padding-right: 1em;
+
+            &:after {
+                right: 0;
+                // z-index: 5;
+                position: absolute;
+                font-family: wagtail;
+                content: 'n';
+                padding-left: 20px;
+                font-size: 2em;
+                color: $color-teal-darker;
+                line-height: 0.9em;
+            }
+        }
+
+        &:hover {
+            background: $color-teal-dark;
+
+            a {
+                color: $color-white;
+            }
+        }
+
+        &:hover:after {
+            border-left-color: $color-teal-dark;
+        }
+
+        &.home {
+            a {
+                // stylelint-disable max-nesting-depth
+                padding-right: 0;
+                text-align: center;
+                width: 3em;
+                font-size: 1em;
+                text-overflow: clip;
+
+                &:before {
+                    font-size: 1.15rem;
+                    line-height: 0.85em;
+                    padding-top: 0.1em;
+                }
+
+                &:after {
+                    right: -0.3em;
+                }
+            }
+        }
+    }
+
+    header &  li {
+        &:before {
+            border-left: 1em solid $color-white;
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+    }
+
+    &.single {
+        li a {
+            white-space: nowrap;
+            text-overflow: inherit;
+            max-width: 100%;
+        }
+    }
+
+    @include media-breakpoint-up(sm) {
+        padding-top: 0;
+        background: $color-teal-darker;
+        margin-left: -($desktop-nice-padding);
+        margin-right: -($desktop-nice-padding);
+
+        li {
+            a,
+            span {
+                &:after {
+                    color: $color-teal;
+                }
+            }
+        }
+    }
+}

client/scss/components/_button.scss

@@ -0,0 +1,530 @@
+// Core button style
+// Note that these styles include methods to render buttons the same x-browser, described here:
+// http: //cbjdigital.com/blog/2010/08/bulletproof_css_input_button_heights
+// input[type=submit],
+// input[type=reset],
+// input[type=button],
+.button {
+    border-radius: 3px;
+    font-family: Open Sans,Arial,sans-serif;
+    width: auto;
+    height: 2.4em;
+    padding: 0 1em;
+    font-size: 0.9em;
+    font-weight: normal;
+    vertical-align: middle;
+    display: inline-block;
+    background-color: $color-button;
+    border: 1px solid $color-button;
+    color: $color-white;
+    text-decoration: none;
+    text-transform: uppercase;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    outline: none;
+    box-sizing: border-box;
+    -webkit-font-smoothing: auto;
+    // stylelint-disable-next-line property-no-vendor-prefix
+    -moz-appearance: none;
+
+    &:hover {
+        color: $color-teal;
+    }
+
+
+    &.yes {
+        background-color: $color-button-yes;
+        border: 1px solid $color-button-yes;
+
+        &.button-secondary {
+            border: 1px solid $color-button-yes;
+            color: $color-button-yes;
+            background-color: transparent;
+        }
+
+        &:hover {
+            color: $color-white;
+            border-color: transparent;
+            background-color: $color-button-yes-hover;
+        }
+
+        &.button-nobg:hover {
+            color: $color-button-yes;
+            background-color: transparent;
+        }
+    }
+
+    &.warning {
+        background-color: $color-button-warning;
+        border: 1px solid $color-button-warning;
+
+        &.button-secondary {
+            border: 1px solid $color-button-warning;
+            color: $color-button-warning;
+            background-color: transparent;
+        }
+
+        &:hover {
+            color: $color-white;
+            border-color: transparent;
+            background-color: $color-button-warning-hover;
+        }
+
+        &.button-nobg:hover {
+            color: $color-button-warning;
+            background-color: transparent;
+        }
+    }
+
+
+    &.no,
+    &.serious {
+        background-color: $color-button-no;
+        border: 1px solid $color-button-no;
+
+        &.button-secondary {
+            border: 1px solid $color-button-no;
+            color: $color-button-no;
+            background-color: transparent;
+        }
+
+        &:hover {
+            color: $color-white;
+            border-color: transparent;
+            background-color: $color-button-no-hover;
+        }
+
+        &.button-nobg:hover {
+            color: $color-button-no;
+            background-color: transparent;
+        }
+    }
+
+    &.button-nobg {
+        border: 0;
+        background-color: transparent;
+    }
+
+    &.bicolor {
+        border: 0;
+        padding-left: 3.5em;
+
+        &:before {
+            font-size: 1rem;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 2em;
+            line-height: 1.85em;
+            height: 100%;
+            text-align: center;
+            background-color: rgba(0, 0, 0, 0.2);
+            display: block;
+            border-top-left-radius: inherit;
+            border-bottom-left-radius: inherit;
+        }
+    }
+
+    &.button-small.bicolor {
+        padding-left: 3.5em;
+
+        &:before {
+            width: 2em;
+            font-size: 0.9rem;
+            line-height: 1.65em;
+        }
+    }
+
+
+    // + input[type=submit],
+    // + input[type=reset],
+    // + input[type=button],
+    + .button {
+        // + button {
+        margin-left: 1em;
+    }
+
+    // A completely unstyled button
+    &.unbutton {
+        border-radius: 0;
+        width: auto;
+        height: auto;
+        padding: 0;
+        font-size: inherit;
+        font-weight: normal;
+        vertical-align: middle;
+        display: inline;
+        background-color: transparent;
+        border: 0;
+        color: inherit;
+        text-decoration: none;
+        text-transform: uppercase;
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+        outline: none;
+        box-sizing: border-box;
+        -webkit-font-smoothing: auto;
+        // stylelint-disable-next-line property-no-vendor-prefix
+        -moz-appearance: none;
+    }
+
+    &:hover {
+        background-color: $color-button-hover;
+        color: $color-white;
+        border-color: transparent;
+
+        &.hover-no {
+            background-color: $color-button-no;
+        }
+    }
+
+    &.button-longrunning {
+        span {
+            @include transition(all 0.3s ease);
+            transform: scale(0.9);
+            display: inline-block;
+            height: 0.9em;
+            position: relative;
+            opacity: 0;
+            width: 0;
+            visibility: hidden;
+            text-align: center;
+            padding-right: 0;
+        }
+
+        em {
+            font-style: normal;
+        }
+
+        &.button-longrunning-active span {
+            transform: scale(1);
+            visibility: visible;
+            width: 1em;
+            opacity: 0.8;
+            padding-right: 0.5em;
+        }
+
+        .icon-spinner:after {
+            text-align: center;
+            position: absolute;
+            left: 0;
+            margin: 0;
+            line-height: 1em;
+            display: inline-block;
+            font-size: 1em;
+        }
+    }
+
+    &:disabled,
+    &[disabled],
+    &.disabled {
+        background-color: $color-grey-3;
+        border-color: $color-grey-3;
+        color: lighten($color-grey-2, 15%);
+        cursor: default;
+    }
+
+    &.button-secondary:disabled,
+    &.button-secondary[disabled],
+    &.button-secondary.disabled {
+        background-color: $color-white;
+        border-color: $color-grey-3;
+        color: $color-grey-3;
+    }
+
+    &.button-nostroke {
+        border: 0;
+    }
+
+    @include media-breakpoint-up(sm) {
+        font-size: 0.95em;
+        padding: 0 1.4em;
+        height: 3em;
+
+        &.icon.text-replace {
+            width: 2.2rem;
+            height: 2.2rem;
+
+            &:before {
+                line-height: 2.1em;
+            }
+        }
+
+        &.button-small {
+            &.icon.text-replace {
+                height: 1.8rem;
+                width: 1.8rem;
+
+                // stylelint-disable-next-line max-nesting-depth
+                &:before {
+                    line-height: 1.7em;
+                }
+            }
+        }
+
+        &.bicolor {
+            padding-left: 3.7em;
+
+            &:before {
+                width: 2em;
+                line-height: 2.2em;
+                font-size: 1.1rem;
+            }
+        }
+
+        &.button-small.bicolor {
+            // line-height: 2.2em;
+            padding-left: 3em;
+
+            &:before {
+                width: 1.8em;
+                line-height: 1.65em;
+            }
+        }
+    }
+}
+
+
+.button-small {
+    padding: 0 0.8em;
+    height: 2em;
+    font-size: 0.95em;
+}
+
+.button-secondary {
+    color: $color-button;
+    background-color: transparent;
+}
+
+// Buttons which are only an icon
+.button.icon.text-replace {
+    font-size: 0; // unavoidable duplication of setting in icons.scss
+    width: 1.8rem;
+    height: 1.8rem;
+
+    &:before {
+        line-height: 1.7em;
+    }
+}
+
+.button-neutral {
+    color: $color-grey-2;
+
+    &:hover {
+        color: $color-teal;
+    }
+}
+
+.yes {
+    background-color: $color-button-yes;
+    border: 1px solid $color-button-yes;
+
+    &.button-secondary {
+        border: 1px solid $color-button-yes;
+        color: $color-button-yes;
+        background-color: transparent;
+    }
+
+    &:hover {
+        color: $color-white;
+        border-color: transparent;
+        background-color: $color-button-yes-hover;
+    }
+
+    &.button-nobg:hover {
+        color: $color-button-yes;
+        background-color: transparent;
+    }
+}
+
+.no,
+.serious {
+    background-color: $color-button-no;
+    border: 1px solid $color-button-no;
+
+    &.button-secondary {
+        border: 1px solid $color-button-no;
+        color: $color-button-no;
+        background-color: transparent;
+    }
+
+    &:hover {
+        color: $color-white;
+        border-color: transparent;
+        background-color: $color-button-no-hover;
+    }
+
+    &.button-nobg:hover {
+        color: $color-button-no;
+        background-color: transparent;
+    }
+}
+
+.button-nobg {
+    border: 0;
+    background-color: transparent;
+}
+
+.bicolor {
+    border: 0;
+    padding-left: 3.5em;
+
+    &:before {
+        font-size: 1rem;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 2em;
+        line-height: 1.85em;
+        height: 100%;
+        text-align: center;
+        background-color: rgba(0, 0, 0, 0.2);
+        display: block;
+    }
+}
+
+.button-small.bicolor {
+    padding-left: 3.5em;
+
+    &:before {
+        width: 2em;
+        font-size: 0.8rem;
+        line-height: 1.65em;
+    }
+}
+
+
+a.button {
+    line-height: 2.4em;
+    height: auto;
+
+    &.button-small {
+        line-height: 1.85em;
+    }
+
+    @include media-breakpoint-up(sm) {
+        line-height: 2.9em;
+    }
+}
+
+// Special styles to counteract Firefox's completely unwarranted assumptions about button styles
+input[type=submit],
+input[type=reset],
+input[type=button],
+button {
+    padding: 0 1em;
+
+    @include media-breakpoint-up(sm) {
+        &.button-small {
+            height: 2em;
+        }
+    }
+}
+
+.button-group {
+    @include clearfix;
+
+    input[type=submit],
+    input[type=reset],
+    input[type=button],
+    .button,
+    button {
+        border-radius: 0;
+        float: left;
+        margin-right: 1px;
+        margin-left: 0;
+
+        &:only-child {
+            border-radius: 3px;
+        }
+
+        &:first-child {
+            border-radius: 3px 0 0 3px;
+        }
+
+        &:last-child {
+            border-radius: 0 3px 3px 0;
+            margin-right: 0;
+        }
+    }
+
+    &.button-group-square {
+        &,
+        input[type=submit],
+        input[type=reset],
+        input[type=button],
+        .button,
+        button {
+            border-radius: 0;
+        }
+    }
+}
+
+
+.multiple {
+    padding: 0;
+    max-width: 1024px - 50px;
+    overflow: hidden;
+
+    > li {
+        @include row();
+        border-radius: 2px;
+        position: relative;
+        overflow: hidden;
+        background-color: $color-white;
+        padding: 1em 10em 1em 1.5em; // 10em padding leaves room for controls
+        margin-bottom: 1em;
+        border: 1px solid lighten($color-grey-4, 3%); // really trying to avoid creating more greys, but this one is better than grey 4 or 5
+    }
+
+    &.moving {
+        position: relative;
+    }
+
+    li.moving {
+        position: absolute;
+        width: 100%;
+    }
+
+    fieldset {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    // Object controls
+    .controls {
+        position: absolute;
+        z-index: 1;
+        right: 1em;
+        top: 1em;
+        color: $color-white;
+
+        li {
+            float: left;
+            margin-right: 1px;
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+
+        .disabled {
+            display: none;
+            visibility: hidden;
+        }
+    }
+
+}
+
+// wrapper around add button for mutliple objects
+.add {
+    font-weight: 700;
+    cursor: pointer;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 1em;
+    padding-bottom: 2em;
+    clear: both;
+}

client/scss/components/_chooser.scss

@@ -0,0 +1,143 @@
+/*
+TODO this chooser style has been made more generic based on two identical
+methods for choosing pages and images that were previously included in their
+own less files in each app directory (and since deleted). It would be best if
+an admin 'theme' provided all the design for a UI in a single place, but
+should that be a series of overrides to the css provided from an app? If so,
+perhaps those two previous less files should be re-instated and then
+overriden here? hmm.
+*/
+
+.chooser {
+    // We show the 'chosen' state...
+    @include clearfix();
+
+    input[type=text] {
+        float: left;
+        width: 50%;
+        margin-right: 1em;
+    }
+
+    .chosen {
+        display: block;
+    }
+
+    .unchosen,
+    .chosen {
+        position: relative;
+
+        &:before {
+            vertical-align: middle;
+            font-family: wagtail;
+            content: '';
+            // position: relative
+            display: inline-block;
+            // float: left;
+            color: $color-grey-3;
+            line-height: 1em;
+            font-size: 2.5em;
+            margin-right: 0.3em;
+        }
+    }
+
+    .unchosen {
+        display: none;
+    }
+
+    .actions {
+        @include clearfix;
+        overflow: hidden;
+
+        li {
+            float: left;
+            margin: 0.3em;
+        }
+    }
+
+    // ...unless the .page-chooser has the 'blank' class set
+    &.blank {
+        .chosen { display: none; }
+
+        .unchosen { display: block; }
+    }
+}
+
+// standard way of doing a chooser where the chosen object's title is overlaid
+.page-chooser,
+.snippet-chooser,
+.document-chooser {
+    .chosen {
+        .title {
+            color: $color-grey-1;
+            // display: block;
+            padding-left: 1em;
+            display: inline-block;
+        }
+
+        .actions {
+            clear: both;
+            padding-top: 0.6em;
+        }
+    }
+}
+
+.page-chooser {
+    .unchosen,
+    .chosen {
+        &:before {
+            content: 'b';
+        }
+    }
+}
+
+.snippet-chooser {
+    .unchosen,
+    .chosen {
+        &:before {
+            content: 'D';
+        }
+    }
+}
+
+.document-chooser {
+    .unchosen,
+    .chosen {
+        &:before {
+            content: 'r';
+        }
+    }
+}
+
+.image-chooser {
+    .unchosen,
+    .chosen {
+        &:before {
+            content: 'o';
+        }
+    }
+
+    .chosen {
+        padding-left: $thumbnail-width;
+
+        &:before {
+            content: '';
+        }
+
+        .preview-image {
+            float: left;
+            margin-left: -($thumbnail-width);
+            margin-right: 1em;
+            max-width: $thumbnail-width;
+
+            // Resize standard Wagtail thumbnail size (165x165) to 130 for space-saving purposes.
+            // We could request a 130x130 rendition, but that's just unnecessary and burdens installations
+            // where images are store off-site with higher rendering times.
+            img {
+                max-width: $thumbnail-width;
+                max-height: $thumbnail-width;
+                height: auto;
+                width: auto;
+            }
+        }
+    }
+}

wagtail/admin/static_src/wagtailadmin/scss/components/_dropdowns.scss → client/scss/components/_dropdown.legacy.scss

@@ -227,189 +227,3 @@
 .dropdown ul {
     @include transition(opacity 0.2s linear);
 }
-
-
-// =============================================================================
-// Listing view smaller dropdowns
-// =============================================================================
-
-// .c-dropdown {
-// }
-.o-icon {
-    display: inline-block;
-    vertical-align: middle;
-    line-height: 1;
-    margin-top: -0.25rem;
-}
-
-.c-dropdown__button {
-    display: inline-block;
-    box-sizing: border-box;
-    padding-left: 0.5rem;
-    padding-right: 0.25rem;
-    // Make this the same as the other buttons
-    line-height: 1.85;
-    border: solid 1px transparent;
-    border-radius: 2px;
-    font-size: 0.95em;
-    cursor: pointer;
-    -webkit-font-smoothing: subpixel-antialiased;
-    user-select: none;
-}
-
-.c-dropdown__toggle {
-    display: inline-block;
-}
-
-.c-dropdown__menu.c-dropdown__menu {
-    margin-top: 0.75rem;
-    padding: 0.75rem 1rem;
-    min-width: 8rem;
-    text-transform: none;
-    position: absolute;
-    z-index: 1;
-    animation: dropdownIn 0.1s ease-out backwards;
-    list-style: none;
-}
-
-.c-dropdown__item {
-    margin-bottom: 0.375rem;
-
-    &:hover {
-        .c-dropdown__indicator {
-            opacity: 0.6;
-        }
-    }
-}
-
-
-
-.c-dropdown__item:last-child {
-    margin-bottom: 0;
-}
-
-.c-dropdown__divider {
-    border-color: #555;
-    border-style: dotted;
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
-
-// =============================================================================
-//  Arrows
-// =============================================================================
-.u-arrow:before {
-    content: '';
-    border: solid 0.35rem transparent;
-    display: block;
-    position: absolute;
-}
-
-.u-arrow--tl:before {
-    bottom: 100%;
-    left: 1rem;
-}
-
-// =============================================================================
-//  Default dropdown theme
-// =============================================================================
-
-// .t-default {
-
-// }
-.t-default .u-btn-current {
-    border-color: rgba(0, 0, 0, 0.15);
-    color: $color-teal;
-}
-
-.t-default .u-btn-current:hover {
-    background: $color-teal;
-    color: #fff;
-    border-color: $color-teal;
-}
-
-.t-default .u-btn-current:active {
-    background: #333;
-    color: #fff;
-    border-color: #333;
-}
-
-.t-inverted .u-btn-current {
-    border-color: rgba(0, 0, 0, 0.35);
-    color: #fff;
-}
-
-.t-inverted .u-btn-current:hover {
-    background-color: $color-teal-darker;
-    border-color: rgba(0, 0, 0, 0.35);
-}
-
-.t-inverted .u-btn-current:active {
-    border-color: rgba(0, 0, 0, 0.35);
-    background: #333;
-    color: #fff;
-}
-
-
-// =============================================================================
-// Dark theme
-// =============================================================================
-.t-dark .u-link {
-    color: #fff;
-}
-
-.t-dark .u-link:hover {
-    color: #aaa;
-}
-
-.t-dark .u-background {
-    background: #333;
-}
-
-.t-dark .u-arrow:before {
-    border-bottom-color: #333;
-}
-
-@keyframes dropdownIn {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-// =============================================================================
-// Light theme
-// =============================================================================
-.t-light .u-link {
-    color: #333;
-}
-
-.t-light .u-link:hover {
-    color: #aaa;
-}
-
-.t-light .u-background {
-    background: #fff;
-    border-color: #ccc;
-}
-
-.t-light .u-arrow:before {
-    border-bottom-color: #fff;
-}
-
-// =============================================================================
-// States
-// =============================================================================
-.u-toggle {
-    display: none;
-}
-
-.is-open .u-toggle {
-    display: block;
-}
-
-
-

client/scss/components/_dropdown.scss

@@ -0,0 +1,66 @@
+// =============================================================================
+// Listing view smaller dropdowns
+// =============================================================================
+
+// .c-dropdown {
+// }
+.c-dropdown__button {
+    display: inline-block;
+    box-sizing: border-box;
+    padding-left: 0.5rem;
+    padding-right: 0.25rem;
+    // Make this the same as the other buttons
+    line-height: 1.85;
+    border: solid 1px transparent;
+    border-radius: 2px;
+    font-size: 0.95em;
+    cursor: pointer;
+    -webkit-font-smoothing: subpixel-antialiased;
+    user-select: none;
+}
+
+.c-dropdown__toggle {
+    display: inline-block;
+}
+
+.c-dropdown__menu.c-dropdown__menu {
+    margin-top: 0.75rem;
+    padding: 0.75rem 1rem;
+    min-width: 8rem;
+    text-transform: none;
+    position: absolute;
+    z-index: 1;
+    animation: dropdownIn 0.1s ease-out backwards;
+    list-style: none;
+}
+
+.c-dropdown__item {
+    margin-bottom: 0.375rem;
+
+    &:hover {
+        .c-dropdown__indicator {
+            opacity: 0.6;
+        }
+    }
+}
+
+.c-dropdown__item:last-child {
+    margin-bottom: 0;
+}
+
+.c-dropdown__divider {
+    border-color: #555;
+    border-style: dotted;
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+@keyframes dropdownIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

client/scss/components/_footer.scss

@@ -0,0 +1,76 @@
+footer {
+    @include transition(bottom 0.5s ease 1s);
+    @include row();
+    border-radius: 3px 3px 0 0;
+    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
+    background: $color-grey-1;
+    position: fixed;
+    bottom: 0;
+    padding: 0.5em;
+    width: 90%;
+    margin: 0 5%;
+    color: $color-white;
+
+    ul {
+        @include unlist();
+    }
+
+    li {
+        float: left;
+    }
+
+    .actions {
+        width: 250px;
+        margin-right: $grid-gutter-width / 2;
+    }
+
+    .preview .dropdown {
+        width: 250px;
+    }
+
+    .meta {
+        float: right;
+        text-align: right;
+        padding: 7px $grid-gutter-width / 2;
+        font-size: 0.85em;
+
+        p {
+            margin: 0;
+            margin-right: $grid-gutter-width;
+            white-space: nowrap;
+        }
+
+        a {
+            color: inherit;
+
+            &:hover {
+                color: $color-link;
+            }
+        }
+    }
+
+    @include media-breakpoint-down(xs) {
+        .actions,
+        .preview,
+        .preview .dropdown {
+            width: 100%;
+        }
+
+        .meta {
+            p {
+                white-space: normal;
+                width: 100%;
+            }
+
+            .avatar {
+                left: auto;
+            }
+        }
+    }
+
+    @include media-breakpoint-up(sm) {
+        margin-left: $desktop-nice-padding;
+        margin-right: $desktop-nice-padding;
+        width: calc(100% - #{$menu-width} - #{2 * $desktop-nice-padding});
+    }
+}

client/scss/components/_forms.scss

@@ -0,0 +1,426 @@
+// These are the generic stylings for forms of any type.
+// If you're styling something specific to the page editing interface,
+// it probably ought to go in layouts/page-editor.scss
+
+// TODO: mixin,
+// These these styles are currently in elements
+// but the ones for the class should be here
+//
+// label,
+// .label {
+//     text-transform: none;
+//     font-weight: bold;
+//     color: $color-grey-1;
+//     font-size: 1.1em;
+//     display: block;
+//     padding: 0 0 0.8em;
+//     margin: 0;
+//     line-height: 1.3em;
+//
+//     .checkbox &,
+//     .radio & {
+//         display: inline;
+//     }
+// }
+.plain-checkbox-label {
+    // cancel heavy / floated label styles, for labels that should appear inline against checkboxes
+
+    float: none;
+    color: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+}
+
+// TODO: mixin,
+// These these styles are currently in elements
+// but the ones for the classes should be here
+//
+// input,
+// textarea,
+// select,
+// .halloeditor,
+// .tagit {
+//     appearance: none;
+//     box-sizing: border-box;
+//     border-radius: 6px;
+//     width: 100%;
+//     font-family: Open Sans,Arial,sans-serif;
+//     border: 1px solid $color-input-border;
+//     padding: 0.9em 1.2em;
+//     background-color: $color-fieldset-hover;
+//     color: $color-text-input;
+//     font-size: 1.2em;
+//     font-weight: 300;
+//     outline: none;
+//
+//     &:hover {
+//         background-color: $color-white;
+//     }
+//
+//     &:focus {
+//         background-color: $color-input-focus;
+//         border-color: $color-input-focus-border;
+//         outline: none;
+//     }
+//
+//     &:disabled,
+//     &[disabled],
+//     &:disabled:hover,
+//     &[disabled]:hover {
+//         background-color: inherit;
+//         cursor: default;
+//         color: $color-grey-4;
+//     }
+// }
+
+// Reset the arrow on `<select>`s in IE10+.
+select::-ms-expand {
+    display: none;
+}
+
+// select boxes
+.choice_field .input,
+.model_choice_field .input,
+.typed_choice_field .input {
+    position: relative;
+
+    select {
+        outline: none;
+    }
+
+    // Add select arrow back on browsers where native ui has been removed
+    select ~ span:after {
+        border-radius: 0 6px 6px 0;
+        z-index: 0;
+        position: absolute;
+        right: 0;
+        top: 1px;
+        bottom: 0;
+        width: 1.5em;
+        font-family: wagtail;
+        content: 'q';
+        border: 1px solid $color-input-border;
+        border-width: 0 0 0 1px;
+        text-align: center;
+        line-height: 1.4em;
+        font-size: 3em;
+        pointer-events: none;
+        color: $color-grey-3;
+        margin: 0 1px 1px 0;
+
+        .ie & {
+            display: none;
+        }
+    }
+}
+
+
+// Other text
+.help,
+.error-message {
+    font-size: 0.85em;
+    font-weight: normal;
+    margin: 0.5em 0 0;
+}
+
+.error-message {
+    color: $color-red;
+}
+
+.help {
+    color: $color-grey-2;
+}
+
+fieldset:hover > .help,
+.field.focused + .help,
+.field:focus + .help,
+.field:hover + .help,
+li.focused > .help {
+    opacity: 1;
+}
+
+.required .field > label:after {
+    content: '*';
+    color: $color-red;
+    font-weight: bold;
+    display: inline-block;
+    margin-left: 0.5em;
+    line-height: 1em;
+    font-size: 13px;
+}
+
+.error input,
+.error textarea,
+.error select,
+.error .tagit {
+    border-color: $color-red;
+    background-color: $color-input-error-bg;
+}
+
+// Layouts for particular kinds of of fields
+
+// permanently show checkbox/radio help as they have no focus state
+.boolean_field .help,
+.radio .help {
+    opacity: 1;
+}
+
+// This is expected to go on the parent of the input/select/textarea
+// so in most cases .input
+.iconfield, // generic
+.date_field,
+.time_field,
+.date_time_field,
+.url_field {
+    .input {
+        position: relative;
+
+        &:before,
+        &:after {
+            font-family: wagtail;
+            position: absolute;
+            top: 0.5em;
+            line-height: 100%;
+            font-size: 2em;
+            color: $color-grey-3;
+        }
+
+        &:before {
+            left: 0.3em;
+        }
+
+        &:after {
+            right: 0.5em;
+        }
+    }
+
+    input:not([type=radio]),
+    input:not([type=checkbox]),
+    input:not([type=submit]),
+    input:not([type=button]) {
+        padding-left: 2.5em;
+    }
+
+    // smaller fields required slight repositioning of icons
+    &.field-small {
+        .input {
+            &:before,
+            &:after {
+                font-size: 1.3rem; // REMs are necessary here because IE doesn't treat generated content correctly
+                top: 0.3em;
+            }
+
+            &:before {
+                left: 0.5em;
+            }
+
+            &:after {
+                right: 0.5em;
+            }
+        }
+    }
+
+    // special case for search spinners
+    &.icon-spinner:after {
+        color: $color-teal;
+        opacity: 0.8;
+        text-align: center;
+        top: 0.3em;
+    }
+}
+
+.date_field,
+.date_time_field {
+    .input:before {
+        @extend .icon-date:before;
+    }
+}
+
+.time_field {
+    .input:before {
+        @extend .icon-time:before;
+    }
+}
+
+.url_field {
+    .input:before {
+        @extend .icon-link:before;
+    }
+}
+
+
+// This is specifically for model that are a generated set of checkboxes/radios
+.model_multiple_choice_field .input li,
+.choice_field .input li {
+    label {
+        display: block;
+        width: auto;
+        float: none;
+        padding-top: 0; // Negates padding added to label for the group of fields as a whole
+    }
+}
+
+.fields > li,
+.field-col {
+    @include clearfix();
+    padding-top: 0.5em;
+    padding-bottom: 1.2em;
+}
+
+.field-row {
+    @include clearfix();
+
+    // negative margin the bottom so it doesn't add too much space
+    margin-bottom: -1.2em;
+}
+
+.input {
+    clear: both;
+}
+
+// field sizing and alignment
+.field-small {
+    input,
+    textarea,
+    select,
+    .halloeditor,
+    .tagit {
+        border-radius: 3px;
+        padding: 0.4em 1em;
+    }
+}
+
+.field {
+    &.col1,
+    &.col2,
+    &.col3,
+    &.col4,
+    &.col5,
+    &.col6,
+    &.col7,
+    &.col8,
+    &.col9,
+    &.col10,
+    &.col11,
+    &.col12 { clear: both;}
+}
+
+li.inline .field {
+    &.col1,
+    &.col2,
+    &.col3,
+    &.col4,
+    &.col5,
+    &.col6,
+    &.col7,
+    &.col8,
+    &.col9,
+    &.col10,
+    &.col11,
+    &.col12 { clear: none;}
+}
+
+// solve gutter issues of inline fields
+ul.inline li:first-child,
+li.inline:first-child {
+    margin-left: -$grid-gutter-width / 2;
+}
+
+
+// search-bars
+.search-bar {
+    .required .field > label:after {
+        display: none;
+    }
+
+    .button-filter {
+        height: 2.71em;
+        border-color: transparent;
+    }
+}
+
+// file drop zones
+.drop-zone {
+    border-radius: 5px;
+    border: 2px dashed $color-grey-4;
+    padding: $mobile-nice-padding;
+    background-color: $color-grey-5;
+    margin-bottom: 1em;
+    text-align: center;
+
+    .drop-zone-help {
+        border: 0;
+    }
+
+    &.hovered {
+        border-color: $color-teal;
+        background-color: $color-input-focus;
+    }
+}
+
+// Transitions
+.help {
+    @include transition(opacity 0.2s ease);
+}
+
+.label-uppercase {
+    .field > label {
+        text-transform: uppercase;
+    }
+}
+
+@include media-breakpoint-up(sm) {
+    .help {
+        opacity: 1;
+    }
+
+    .fields {
+        max-width: 800px;
+    }
+
+    .field {
+        @include row();
+    }
+
+    .field-content {
+        @include column(10, 0);
+    }
+
+    .field-col {
+        float: left;
+        padding-left: 0;
+
+        // anything less than 4 columns or greater than 6 is impractical
+        &.col4 {
+            label {
+                @include column(2, 0, 4);
+            }
+
+            .field-content {
+                @include column(2, $padding, 4);
+                padding-left: 0;
+            }
+        }
+
+        &.col6 {
+            label {
+                @include column(2, 0, 6);
+            }
+
+            .field-content {
+                @include column(4, $padding, 6);
+                padding-left: 0;
+            }
+        }
+    }
+
+    .label-above {
+        .field > label,
+        .field > .field-content {
+            display: block;
+            padding: 0 0 0.8em;
+            float: none;
+            width: auto;
+        }
+    }
+}

client/scss/components/_grid.legacy.scss

@@ -0,0 +1,98 @@
+.wrapper {
+    @include clearfix();
+    height: 100vh;
+    transition: transform 0.2s ease;
+}
+
+.content-wrapper {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%; // this has no effect on desktop, but on mobile it helps aesthetics of menu popout action
+    float: left;
+    position: relative;
+    background-color: $color-grey-4;
+    border-bottom: 1px solid $color-grey-3;
+}
+
+.content {
+    @include row();
+    background: $color-white;
+    border-top: 0 solid $color-grey-5; // this top border provides space for the floating logo to toggle the menu
+    min-height: 100%;
+    padding-bottom: 4em;
+    position: relative; // yuk. necessary for positions for jquery ui widgets
+}
+
+@include media-breakpoint-up(sm) {
+    .content-wrapper {
+        border-bottom-right-radius: 5px;
+    }
+
+    .content {
+        border-top: 0;
+        background-color: none;
+        padding-top: 0;
+    }
+}
+
+.row {
+    @include clearfix();
+}
+
+@include media-breakpoint-up(sm) {
+    .col1 {
+        @include column(1);
+    }
+
+    .col2 {
+        @include column(2);
+    }
+
+    .col3 {
+        @include column(3);
+    }
+
+    .col4 {
+        @include column(4);
+    }
+
+    .col5 {
+        @include column(5);
+    }
+
+    .col6 {
+        @include column(6);
+    }
+
+    .col7 {
+        @include column(7);
+    }
+
+    .col8 {
+        @include column(8);
+    }
+
+    .col9 {
+        @include column(9);
+    }
+
+    .col10 {
+        @include column(10);
+    }
+
+    .col11 {
+        @include column(11);
+    }
+
+    .col12 {
+        @include column(12);
+    }
+
+    .row {
+        @include row();
+    }
+
+    .row-flush {
+        @include row-flush();
+    }
+}

client/scss/components/_help-block.scss

@@ -0,0 +1,62 @@
+// Help text formatters
+.help-block {
+    padding: 1em;
+    margin: 1em 0;
+    clear: both;
+    color: $color-text-base;
+
+    p {
+        margin-top: 0;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    a {
+        color: $color-teal;
+    }
+}
+
+.help-info,
+.help-warning,
+.help-critical {
+    border-radius: 3px;
+    padding-left: 3.5em;
+    position: relative;
+
+    &:before {
+        font-family: wagtail;
+        position: absolute;
+        left: 1em;
+        top: 0.7em;
+        content: '?';
+        font-size: 1.4em;
+    }
+}
+
+.help-info {
+    background-color: lighten($color-blue, 30%);
+
+    &:before {
+        color: $color-blue;
+    }
+}
+
+.help-warning {
+    background-color: lighten($color-orange, 30%);
+
+    &:before {
+        color: $color-orange;
+        content: '!';
+    }
+}
+
+.help-critical {
+    background-color: lighten($color-red, 40%);
+
+    &:before {
+        color: $color-red;
+        content: '!';
+    }
+}

client/scss/components/_human-readable-date.scss

@@ -0,0 +1,21 @@
+// Displays 'timesince' formatted date with full date on hover
+.human-readable-date {
+    overflow: hidden;
+    display: block;
+    position: relative;
+
+    &:before {
+        position: absolute;
+        display: none;
+        content: attr(title);
+    }
+
+    &:hover {
+        visibility: hidden;
+
+        &:before {
+            visibility: visible;
+            display: block;
+        }
+    }
+}

wagtail/admin/static_src/wagtailadmin/scss/components/_icons.scss → client/scss/components/_icons.scss

@@ -1,4 +1,10 @@
-@import 'wagtailadmin/scss/variables-icons';
+// The wagtail font isn't available in WOFF2, so a @font-face is set here without a mixin.
+@font-face {
+    font-family: 'wagtail';
+    src: url('#{$font-root}wagtail.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
 
 .icon.teal {
     color: $color-teal;

client/scss/components/_link.legacy.scss

@@ -0,0 +1,12 @@
+// makes a link look like regular text
+.nolink {
+    color: $color-text-base;
+
+    &:hover {
+        color: $color-teal;
+    }
+}
+
+a.underlined {
+    border-bottom: 1px solid currentColor;
+}

client/scss/components/_loading-mask.scss

@@ -0,0 +1,36 @@
+// Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction
+.loading-mask {
+    &.loading {
+        position: relative;
+
+        &:before,
+        &:after {
+            position: absolute;
+            display: block;
+        }
+
+        &:before {
+            content: '';
+            top: -5px;
+            left: -5px;
+            bottom: -5px;
+            right: -5px;
+            z-index: 1;
+            background-color: rgba(255, 255, 255, 0.5);
+        }
+
+        &:after {
+            font-size: 30px;
+            width: 30px;
+            line-height: 30px;
+            left: 50%;
+            top: 50%;
+            margin: -15px 0 0 -15px;
+            font-family: wagtail;
+            animation: spin 0.5s infinite linear;
+            content: '1';
+            z-index: 2;
+            color: $color-teal;
+        }
+    }
+}

wagtail/admin/static_src/wagtailadmin/scss/components/_logo.scss → client/scss/components/_logo.scss

@@ -1,7 +1,3 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
-@import 'wagtailadmin/scss/grid';
-
 @keyframes nod {
     from {
         transform: rotate(2deg);

wagtail/admin/static_src/wagtailadmin/scss/components/_main-nav.scss → client/scss/components/_main-nav.scss

@@ -463,9 +463,64 @@ body.explorer-open {
     }
 }
 
-// stylelint-disable scss/media-feature-value-dollar-variable
+///////////////
+// Z-indexes //
+///////////////
+.nav-toggle {
+    z-index: 5;
+}
+
+.nav-wrapper {
+    z-index: 2;
+}
+
+// Avoiding a stacking context for the content-wrapper saves us a world
+// of pain when dealing with overlays that are appended to the end of
+// <body>, eg Hallo & calendars. As long as content-wrapper remains floated,
+// the z-index shouldn't be required.
 
-// Media query hacks to detect IE10+ which doesn't support 3d transform of static elements and needs a fallback
+// .content-wrapper {
+// z-index: 3;
+// }
+.nav-submenu {
+    z-index: 6;
+}
+
+footer,
+.logo {
+    z-index: 100;
+}
+
+@include media-breakpoint-up(sm) {
+    .nav-main {
+        .footer {
+            z-index: 2;
+        }
+    }
+
+    .nav-submenu {
+        z-index: 500;
+    }
+
+    // Allows overspill of messages banner onto left menu, but also explorer
+    // to spill over main content
+    .nav-wrapper {
+        z-index: auto;
+    }
+
+    // footer is z-index: 100, so ensure the navigation sits on top of it.
+    .nav-wrapper.submenu-active {
+        z-index: 200;
+    }
+}
+
+
+///////////////////////
+// Media query hacks //
+///////////////////////
+
+// to detect IE10+ which doesn't support 3d transform of static elements and needs a fallback
+// stylelint-disable scss/media-feature-value-dollar-variable
 @media all and (-ms-high-contrast: none),
     all and (-ms-high-contrast: active) {
     .wrapper {

client/scss/components/_media-placeholder.scss

@@ -0,0 +1,17 @@
+.media-placeholder {
+    width: 600px;
+    height: 400px;
+    background-color: #ccc;
+    padding: 5px;
+
+    h3,
+    p {
+        margin: 0;
+    }
+
+    img {
+        max-width: 350px;
+        max-height: 350px;
+        margin: 20px;
+    }
+}

client/scss/components/_messages.capability.scss

@@ -0,0 +1,14 @@
+.capabilitymessage {
+    display: block;
+    background-color: $color-red;
+    color: $color-white;
+    padding: 1em 2em;
+    margin: 0;
+    position: relative;
+    text-align: center;
+
+    a {
+        color: $color-white;
+        text-decoration: underline;
+    }
+}

client/scss/components/_messages.status.scss

@@ -0,0 +1,9 @@
+.status-msg {
+    &.success {
+        color: $color-green;
+    }
+
+    &.failure {
+        color: $color-red;
+    }
+}

client/scss/components/_privacy-indicator.scss

@@ -0,0 +1,20 @@
+.privacy-indicator {
+    .label-private,
+    .label-public {
+        &:before {
+            font-size: 1.5em;
+        }
+    }
+
+    &.public {
+        .label-private {
+            display: none;
+        }
+    }
+
+    &.private {
+        .label-public {
+            display: none;
+        }
+    }
+}

client/scss/components/_status-tag.scss

@@ -0,0 +1,37 @@
+.status-tag {
+    border-radius: 2px;
+    text-align: center;
+    display: inline-block;
+    text-transform: uppercase;
+    padding: 0 0.5em;
+    border: 1px solid lighten($color-grey-2, 30%);
+    color: lighten($color-grey-2, 30%);
+    -webkit-font-smoothing: auto;
+    line-height: 19px;
+    font-size: 0.8em;
+    margin: 0 0.5em 0.5em;
+    background: #fff url('#{$images-root}bg-dark-diag.svg');
+
+    &.primary {
+        color: $color-grey-2;
+        border: 1px solid $color-grey-2;
+        background: #fff;
+    }
+
+    &.disabled {
+        pointer-events: none;
+    }
+}
+
+button.status-tag:hover,
+a.status-tag:hover,
+a.status-tag.primary:hover {
+    border-color: $color-teal;
+    color: $color-teal;
+}
+
+button.status-tag:hover {
+    border-color: $color-teal-dark;
+    background-color: $color-teal-darker;
+    color: $color-white;
+}

wagtail/admin/static_src/wagtailadmin/scss/components/_tabs.scss → client/scss/components/_tabs.scss

@@ -92,6 +92,15 @@
             display: block;
         }
     }
+
+    .page-locked & {
+        cursor: not-allowed;
+        user-select: none;
+
+        > * {
+            pointer-events: none;
+        }
+    }
 }
 
 @include media-breakpoint-up(sm) {

client/scss/components/_tag.scss

@@ -0,0 +1,37 @@
+// free tagging tags from taggit
+.tag {
+    border-radius: 2px;
+    background-color: $color-teal;
+    padding-right: 0.5em;
+    padding: 0.2em 0.5em;
+    color: $color-white;
+    line-height: 2em;
+    white-space: nowrap;
+
+    &:before {
+        font-family: wagtail;
+        display: inline-block;
+        color: $color-white;
+        content: 'u';
+        padding-right: 0.5em;
+    }
+
+    .taglist & {
+        margin-right: 0.8em;
+    }
+}
+
+a.tag:hover {
+    background-color: $color-teal-darker;
+    color: $color-white;
+}
+
+.taglist {
+    font-size: 0.9em;
+    line-height: 2.4em;
+
+    h3 {
+        display: inline;
+        margin-right: 1em;
+    }
+}

client/scss/components/browser-message.scss

@@ -0,0 +1,5 @@
+@include media-breakpoint-up(sm) {
+    .browsermessage {
+        margin: 0 0 0 -150px;
+    }
+}

client/scss/elements/_elements.scss

@@ -0,0 +1,35 @@
+html {
+    background: $color-grey-4;
+    height: 100%;
+}
+
+body {
+    overflow-x: hidden;
+    position: relative;
+
+    &:after {
+        content: '';
+        position: fixed;
+        transition: visibility 0s linear 0s, opacity 0.2s ease-out;
+        background: rgba(255, 255, 255, 0.5);
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 5;
+        opacity: 0;
+        visibility: hidden;
+    }
+}
+
+hr {
+    border: 1px solid $color-grey-4;
+    border-width: 1px 0 0;
+    margin: 1.5em 0;
+}
+
+// general image style
+img {
+    max-width: 100%;
+    height: auto;
+}

client/scss/elements/_forms.scss

@@ -0,0 +1,196 @@
+// These are the generic stylings for forms of any type.
+// If you're styling something specific to the page editing interface,
+// it probably ought to go in layouts/page-editor.scss
+form {
+    ul,
+
+    li {
+        list-style-type: none;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+    }
+}
+
+fieldset {
+    border: 0;
+    padding: 0 0 2em;
+    margin: 0;
+}
+
+legend {
+    @include visuallyhidden();
+}
+
+label,
+.label {
+    text-transform: none;
+    font-weight: bold;
+    color: $color-grey-1;
+    font-size: 1.1em;
+    display: block;
+    padding: 0 0 0.8em;
+    margin: 0;
+    line-height: 1.3em;
+
+    .checkbox &,
+    .radio & {
+        display: inline;
+    }
+
+    @include media-breakpoint-up(sm) {
+        @include column(2);
+        padding-top: 1.2em;
+        padding-left: 0;
+
+        .radio_select &,
+        .model_multiple_choice_field &,
+        .boolean_field &,
+        .model_choice_field &,
+        .image_field & {
+            padding-top: 0;
+        }
+
+        // Horrid specificity war
+        .model_choice_field.select & {
+            padding-top: 1.2em;
+        }
+    }
+}
+
+input,
+textarea,
+select,
+.halloeditor,
+.tagit {
+    appearance: none;
+    box-sizing: border-box;
+    border-radius: 6px;
+    width: 100%;
+    font-family: Open Sans,Arial,sans-serif;
+    border: 1px solid $color-input-border;
+    padding: 0.9em 1.2em;
+    background-color: $color-fieldset-hover;
+    color: $color-text-input;
+    font-size: 1.2em;
+    font-weight: 300;
+    outline: none;
+
+    &:hover {
+        background-color: $color-white;
+    }
+
+    &:focus {
+        background-color: $color-input-focus;
+        border-color: $color-input-focus-border;
+        outline: none;
+    }
+
+    &:disabled,
+    &[disabled],
+    &:disabled:hover,
+    &[disabled]:hover {
+        background-color: inherit;
+        cursor: default;
+        color: $color-grey-4;
+    }
+}
+
+// Reset the arrow on `<select>`s in IE10+.
+select::-ms-expand {
+    display: none;
+}
+
+
+// radio and check boxes
+input[type=radio],
+input[type=checkbox] {
+    border-radius: 0;
+    cursor: pointer;
+    border: 0;
+}
+
+input[type=radio] {
+    height: 12px;
+    width: auto;
+    position: relative;
+    margin-right: 27px;
+}
+
+input[type=radio]:before {
+    border-radius: 100%;
+    font-family: wagtail;
+    font-style: normal;
+    text-align: center;
+    position: absolute;
+    top: -5px;
+    left: -2px;
+    cursor: pointer;
+    display: block;
+    content: 'K';
+    width: 1em;
+    height: 1em;
+    line-height: 1.1em;
+    padding: 4px;
+    background-color: $color-white;
+    color: $color-grey-4;
+    border: 1px solid $color-grey-4;
+}
+
+input[type=radio]:checked:before {
+    content: 'K';
+    color: $color-teal;
+}
+
+input[type=checkbox] {
+    height: 12px;
+    width: auto;
+    position: relative;
+    margin-right: 27px;
+}
+
+input[type=checkbox]:before {
+    font-family: wagtail;
+    font-style: normal;
+    text-align: center;
+    position: absolute;
+    top: -5px;
+    cursor: pointer;
+    display: block;
+    content: 'x';
+    line-height: 20px;
+    width: 20px;
+    height: 20px;
+    background-color: $color-white;
+    border: 1px solid $color-grey-4;
+    color: $color-white;
+}
+
+input[type=checkbox]:checked:before {
+    color: $color-teal;
+}
+
+
+// Special styles to counteract Firefox's completely unwarranted assumptions about button styles
+input[type=submit],
+input[type=reset],
+input[type=button],
+button {
+    padding: 0 1em;
+
+    @include media-breakpoint-up(sm) {
+        &.button-small {
+            height: 2em;
+        }
+    }
+}
+
+// Transitions
+fieldset,
+input,
+textarea,
+select {
+    @include transition(background-color 0.2s ease);
+}

wagtail/admin/static_src/wagtailadmin/scss/components/_typography.scss → client/scss/elements/_typography.scss

@@ -1,3 +1,18 @@
+@include webfont(Open Sans, opensans-light, 300, normal);
+@include webfont(Open Sans, opensans-regular, 400, normal);
+@include webfont(Open Sans, opensans-semibold, 600, normal);
+@include webfont(Open Sans, opensans-bold, 700, normal);
+@include webfont(Roboto Slab, robotoslab-regular, 400, normal);
+@include webfont(Roboto Slab, robotoslab-bold, 700, normal);
+
+body {
+    -webkit-font-smoothing: antialiased; // Do not remove!
+    font-family: Open Sans, Arial, sans-serif;
+    font-size: 80%;
+    line-height: 1.5em;
+    color: $color-text-base;
+}
+
 h1,
 h2,
 h3,
@@ -18,10 +33,6 @@ h1 {
         text-transform: none;
         font-weight: 300;
     }
-
-    .homepage & {
-        text-transform: none;
-    }
 }
 
 h2 {
@@ -30,10 +41,6 @@ h2 {
     font-family: Open Sans;
     font-weight: 600;
     color: $color-grey-2;
-
-    .page-explorer & {
-        text-transform: none;
-    }
 }
 
 p {
@@ -51,10 +58,6 @@ a {
     }
 }
 
-a.underlined {
-    border-bottom: 1px solid currentColor;
-}
-
 code {
     box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.2);
     background-color: $color-fieldset-hover;
@@ -89,74 +92,3 @@ dt {
 dd {
     margin-bottom: 1em;
 }
-
-.unbold {
-    font-weight: normal;
-}
-
-// Help text formatters
-.help-block {
-    padding: 1em;
-    margin: 1em 0;
-    clear: both;
-    color: $color-text-base;
-
-    p {
-        margin-top: 0;
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    a {
-        color: $color-teal;
-    }
-}
-
-.help-info,
-.help-warning,
-.help-critical {
-    border-radius: 3px;
-    padding-left: 3.5em;
-    position: relative;
-
-    &:before {
-        font-family: wagtail;
-        position: absolute;
-        left: 1em;
-        top: 0.7em;
-        content: '?';
-        font-size: 1.4em;
-    }
-}
-
-.help-info {
-    background-color: lighten($color-blue, 30%);
-
-    &:before {
-        color: $color-blue;
-    }
-}
-
-.help-warning {
-    background-color: lighten($color-orange, 30%);
-
-    &:before {
-        color: $color-orange;
-        content: '!';
-    }
-}
-
-.help-critical {
-    background-color: lighten($color-red, 40%);
-
-    &:before {
-        color: $color-red;
-        content: '!';
-    }
-}
-
-.u-para {
-    margin-bottom: 1rem;
-}

client/scss/generic/_generic.scss

@@ -0,0 +1 @@
+// generic styles go in this folder.

client/scss/objects/_avatar.scss

@@ -0,0 +1,35 @@
+// user avatars
+.avatar {
+    border-radius: 100%;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    overflow: hidden;
+    width: 50px;
+    height: 50px;
+
+    img {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        right: 0;
+        border: 0;
+    }
+
+    &.small {
+        vertical-align: middle;
+        margin: 0 0.5em;
+        width: 25px;
+        height: 25px;
+    }
+
+    &.square {
+        border-radius: 0;
+
+        &:before {
+            border-radius: 0;
+        }
+    }
+}

client/scss/_objects.scss → client/scss/objects/_objects.scss

@@ -5,3 +5,12 @@
     vertical-align: middle;
     line-height: 1.5;
 }
+
+
+// For dropdowns
+.o-icon {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 1;
+    margin-top: -0.25rem;
+}

client/scss/overrides/_pages.homepage.scss

@@ -0,0 +1,3 @@
+.homepage h1 {
+    text-transform: none;
+}

client/scss/overrides/_pages.page-explorer.scss

@@ -0,0 +1,3 @@
+.page-explorer h2 {
+    text-transform: none;
+}

client/scss/overrides/_utilities.dropdowns.scss

@@ -0,0 +1,105 @@
+// =============================================================================
+//  Arrows
+// =============================================================================
+.u-arrow:before {
+    content: '';
+    border: solid 0.35rem transparent;
+    display: block;
+    position: absolute;
+}
+
+.u-arrow--tl:before {
+    bottom: 100%;
+    left: 1rem;
+}
+
+// =============================================================================
+//  Default dropdown theme
+// =============================================================================
+
+// .t-default {
+
+// }
+.t-default .u-btn-current {
+    border-color: rgba(0, 0, 0, 0.15);
+    color: $color-teal;
+}
+
+.t-default .u-btn-current:hover {
+    background: $color-teal;
+    color: #fff;
+    border-color: $color-teal;
+}
+
+.t-default .u-btn-current:active {
+    background: #333;
+    color: #fff;
+    border-color: #333;
+}
+
+.t-inverted .u-btn-current {
+    border-color: rgba(0, 0, 0, 0.35);
+    color: #fff;
+}
+
+.t-inverted .u-btn-current:hover {
+    background-color: $color-teal-darker;
+    border-color: rgba(0, 0, 0, 0.35);
+}
+
+.t-inverted .u-btn-current:active {
+    border-color: rgba(0, 0, 0, 0.35);
+    background: #333;
+    color: #fff;
+}
+
+
+// =============================================================================
+// Dark theme
+// =============================================================================
+.t-dark .u-link {
+    color: #fff;
+}
+
+.t-dark .u-link:hover {
+    color: #aaa;
+}
+
+.t-dark .u-background {
+    background: #333;
+}
+
+.t-dark .u-arrow:before {
+    border-bottom-color: #333;
+}
+
+// =============================================================================
+// Light theme
+// =============================================================================
+.t-light .u-link {
+    color: #333;
+}
+
+.t-light .u-link:hover {
+    color: #aaa;
+}
+
+.t-light .u-background {
+    background: #fff;
+    border-color: #ccc;
+}
+
+.t-light .u-arrow:before {
+    border-bottom-color: #fff;
+}
+
+// =============================================================================
+// States
+// =============================================================================
+.u-toggle {
+    display: none;
+}
+
+.is-open .u-toggle {
+    display: block;
+}

client/scss/overrides/_utilities.hidden.legacy.scss

@@ -0,0 +1,7 @@
+.visuallyvisible {
+    @include visuallyvisible;
+}
+
+.visuallyhidden {
+    @include visuallyhidden;
+}

client/scss/overrides/_utilities.legacy.scss

@@ -0,0 +1,55 @@
+.clearfix {
+    @include clearfix();
+}
+
+.nice-padding {
+    padding-left: $mobile-nice-padding;
+    padding-right: $mobile-nice-padding;
+
+    @include media-breakpoint-up(sm) {
+        padding-left: $desktop-nice-padding;
+        padding-right: $desktop-nice-padding;
+    }
+}
+
+@include media-breakpoint-up(sm) {
+    .divider-before {
+        border-left: 1px solid $color-grey-4;
+    }
+
+    .divider-after {
+        border-right: 1px solid $color-grey-4;
+    }
+
+}
+
+body.reordering {
+    overflow: visible;
+}
+
+// Show a transparency grid in background
+.show-transparency {
+    background: url('#{$images-root}transparency.svg');
+}
+
+// make a block-level element inline
+.inline {
+    display: inline;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.block {
+    display: block;
+}
+
+.unlist {
+    @include unlist();
+}
+
+// utility class to allow things to be scrollable if their contents can't wrap more nicely
+.overflow {
+    overflow: auto;
+}

client/scss/overrides/_utilities.text.legacy.scss

@@ -0,0 +1,3 @@
+.unbold {
+    font-weight: normal;
+}

wagtail/admin/static_src/wagtailadmin/scss/utilities/_text.scss → client/scss/overrides/_utilities.text.scss

@@ -5,3 +5,7 @@
 .u-text-weight-normal {
     font-weight: normal;
 }
+
+.u-para {
+    margin-bottom: 1rem;
+}

client/scss/overrides/_vendor.tagit.scss

@@ -0,0 +1,43 @@
+// taggit tagging
+.tagit {
+    padding: 0.6em 1.2em;
+
+    .tagit-choice {
+        border: 0;
+    }
+}
+
+// Additional specificity (.admin_tag_widget ) required to override tagit stylesheets,
+// which get added after the core CSS, and otherweise trump our styles.
+.admin_tag_widget ul.tagit input[type='text'] {
+    padding: 0.2em 0.5em;
+}
+
+// Additional specificity (.admin_tag_widget ) required to override tagit stylesheets,
+// which get added after the core CSS, and otherweise trump our styles.
+.admin_tag_widget ul.tagit li.tagit-choice-editable {
+    padding: 0 23px 0 0;
+}
+
+.ui-front { // provided by jqueryui but not high enough an index
+    z-index: 1000;
+}
+
+.tagit-close {
+    .ui-icon-close {
+        margin-left: 1em;
+        text-indent: 0;
+        background: none;
+    }
+
+    .ui-icon-close:before {
+        font-family: wagtail;
+        display: block;
+        color: $color-grey-3;
+        content: 'g';
+    }
+
+    .ui-icon-close:hover:before {
+        color: $color-red;
+    }
+}

client/scss/styles.scss

@@ -1,7 +1,156 @@
-// =============================================================================
-// Wagtail CMS main stylesheet
-// =============================================================================
+/* =============================================================================
+/*  Wagtail CMS main stylesheet
+/* =============================================================================
 
-@import 'objects';
-@import 'components';
-@import 'utilities';
+REFERENCE
+
+  * We organize our styles based on a combination of ITCSS and
+    the Sass 7-1 pattern.
+  * Classes should be written using BEM, which we modify to include a prefix.
+  * Every BEM block should have its own file.
+
+┌────────────┬────────────────────────┬──────────────┬────────┐
+│ Folder     │ Contents               │ ITCSS level  │ Prefix │
+├────────────┼────────────────────────┼──────────────┼────────┤
+│ settings   │ variables, maps, fonts │ 1 Settings   │        │
+│ tools      │ mixins, functions      │ 2 Tools      │        │
+│ generic    │ resets                 │ 3 Generic    │        │
+│ elements   │ elements, no classes   │ 4 Elements   │        │
+│ objects    │ classes                │ 5 Objects    │ o-     │
+│            │   layout               │              │        │
+│ components │ classes                │ 6 Components │ c-     │
+│            │   BEM blocks           │              │        │
+│ overrides  │ classes                │ 7 Trumps     │ u-     │
+│            │   overrides, utilities │              │        │
+└────────────┴────────────────────────┴──────────────┴────────┘
+
+SCSS: https://sass-lang.com/guide
+ITCSS: https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
+Sass 7-1 pattern: https://gist.github.com/rveitch/84cea9650092119527bc
+BEM: http://getbem.com/
+
+
+OTHER PREFIXES
+
+┌────────┬─────────┐
+│ Prefix │ Purpose │
+├────────┼─────────┤
+│ t-     │ theme   │
+│ is-    │ state   │
+└────────┴─────────┘
+
+==============================================================================*/
+
+
+/* SETTINGS
+These are variables, maps, and fonts.
+* No CSS should be produced by these files
+*/
+
+@import 'settings';
+
+
+/* TOOLS
+These are functions and mixins.
+* No CSS should be produced by these files.
+*/
+
+@import 'tools';
+
+
+/* GENERIC
+This is for resets and other rules that affect large collections of bare elements.
+* Changes to them should be very rare.
+*/
+
+// @import 'generic/generic';
+
+
+/* ELEMENTS
+These are base styles for bare HTML elements.
+* Changes to them should be very rare.
+*/
+
+@import 'elements/elements';
+@import 'elements/typography';
+@import 'elements/forms';
+
+
+/* OBJECTS
+These are classes related to layout, known as 'objects' in ITCSS or OOCSS.
+* This is for grids, wrappers, and other non-consmetic layout utilities.
+* These classes are prefixed with `.o-`.
+*/
+
+@import 'objects/objects';
+@import 'objects/avatar';
+
+
+/* COMPONENTS
+These are classes for components.
+* These classes (unless legacy) are prefixed with `.c-`.
+* React component styles live in the same folders as their React components,
+  which is the preferred pattern over housing them in the scss folder.
+*/
+
+@import '../src/components/Transition/Transition';
+@import '../src/components/LoadingSpinner/LoadingSpinner';
+@import '../src/components/PublicationStatus/PublicationStatus';
+@import '../src/components/Explorer/Explorer';
+
+// Legacy
+@import 'components/icons';
+@import 'components/tabs';
+@import 'components/dropdown';
+@import 'components/dropdown.legacy';
+@import 'components/help-block';
+@import 'components/modals';
+@import 'components/forms';
+@import 'components/button';
+@import 'components/chooser';
+@import 'components/tag';
+@import 'components/listing';
+@import 'components/messages';
+@import 'components/messages.capability';
+@import 'components/messages.status';
+@import 'components/header';
+@import 'components/progressbar';
+@import 'components/main-nav';
+@import 'components/indicator';
+@import 'components/tooltips';
+@import 'components/logo';
+@import 'components/grid.legacy';
+@import 'components/breadcrumb';
+@import 'components/footer';
+@import 'components/loading-mask';
+@import 'components/media-placeholder';
+@import 'components/human-readable-date';
+@import 'components/link.legacy';
+@import 'components/privacy-indicator';
+@import 'components/status-tag';
+
+
+/* OVERRIDES
+These are classes that provide overrides.
+* Higher specificity is allowed here because these are overrides and imported last.
+*/
+
+// VENDOR: overrides of vendor styles.
+@import 'overrides/vendor.datetimepicker';
+@import 'overrides/vendor.tagit';
+
+
+// UTILITIES: classes that do one simple thing.
+@import 'overrides/utilities.hidden';
+@import 'overrides/utilities.text';
+@import 'overrides/utilities.dropdowns';
+
+// Legacy utilities
+@import 'overrides/utilities.text.legacy';
+@import 'overrides/utilities.hidden.legacy';
+@import 'overrides/utilities.legacy';
+
+
+// PAGES: page-specific overrides
+@import 'overrides/pages.homepage';
+@import 'overrides/pages.page-explorer';

wagtail/admin/static_src/wagtailadmin/scss/mixins/_breakpoints.scss → client/scss/tools/_functions.breakpoints.scss

@@ -31,29 +31,3 @@
     $next: breakpoint-next($name);
     @return if($next, breakpoint-min($next) - 0.0625em, null);
 }
-
-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-// Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name) {
-    $min: breakpoint-min($name);
-    @if $min {
-        @media screen and (min-width: $min) {
-            @content;
-        }
-    } @else {
-        @content;
-    }
-}
-
-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-// Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name) {
-    $max: breakpoint-max($name);
-    @if $max {
-        @media screen and (max-width: $max) {
-            @content;
-        }
-    } @else {
-        @content;
-    }
-}

client/scss/tools/_mixins.breakpoints.scss

@@ -0,0 +1,32 @@
+// Based upon the fine work and thoughts from Bootstrap v4.
+//
+// Copyright 2011-2018 The Bootstrap Authors
+// Copyright 2011-2018 Twitter, Inc.
+// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name) {
+    $min: breakpoint-min($name);
+    @if $min {
+        @media screen and (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name) {
+    $max: breakpoint-max($name);
+    @if $max {
+        @media screen and (max-width: $max) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}

client/scss/tools/_mixins.fonts.scss

@@ -0,0 +1,26 @@
+/*
+NB: Due to Wagtail's browser support the following @font-face formats are required:
+- WOFF for modern browsers
+- WOFF2 For super-modern browsers
+
+This example is all we need now:
+
+@font-face {
+  font-family: 'MyWebFont';
+  src: url('myfont.woff2') format('woff2'),
+       url('myfont.woff') format('woff');
+}
+
+See https://css-tricks.com/snippets/css/using-font-face/ for more information.
+
+*/
+
+@mixin webfont($fontname, $filestub, $weight, $style:normal) {
+    @font-face {
+        font-family: '#{$fontname}';
+        src: url('#{$font-root}#{$filestub}.woff2') format('woff2'),
+            url('#{$font-root}#{$filestub}.woff') format('woff');
+        font-weight: $weight;
+        font-style: $style;
+    }
+}

wagtail/admin/static_src/wagtailadmin/scss/mixins/_general.scss → client/scss/tools/_mixins.general.scss

@@ -107,16 +107,6 @@
 }
 
 
-@mixin webfont($fontname, $filestub, $weight, $style:normal) {
-    @font-face {
-        font-family: '#{$fontname}';
-        src: url('#{$font-root}#{$filestub}.woff2') format('woff2'),
-            url('#{$font-root}#{$filestub}.woff') format('woff');
-        font-weight: $weight;
-        font-style: $style;
-    }
-}
-
 // Applies given rules on hover, except for touch screens.
 // Relies on feature detection to add a no-touch class on the html element.
 @mixin hover {

docs/releases/2.6.rst

@@ -15,6 +15,7 @@ Other features
 ~~~~~~~~~~~~~~
 
  * Added support for ``short_description`` for field labels in modeladmin's ``InspectView`` (Wesley van Lee)
+ * Rearranged SCSS folder structure to the client folder and split them approximately according to ITCSS. (Naomi Morduch Toubman, Jonny Scholes, Janneke Janssen, Hugo van den Berg)
 
 
 Bug fixes

gulpfile.js/tasks/watch.js

@@ -7,7 +7,7 @@ var config = require('../config');
  */
 gulp.task('watch', ['build'], function () {
     config.apps.forEach(function(app) {
-        gulp.watch(path.join('./client/src/**/*.scss'), ['styles:sass']);
+        gulp.watch(path.join('./client/**/*.scss'), ['styles:sass']);
         gulp.watch(path.join(app.sourceFiles, '*/scss/**'), ['styles:sass']);
         gulp.watch(path.join(app.sourceFiles, '*/css/**'), ['styles:css']);
         gulp.watch(path.join(app.sourceFiles, '*/js/**'), ['scripts']);

wagtail/admin/static_src/wagtailadmin/scss/_font-icons.scss

@@ -1,7 +0,0 @@
-// The wagtail font isn't available in WOFF2, so a @font-face is set here without a mixin.
-@font-face {
-    font-family: 'wagtail';
-    src: url('#{$font-root}wagtail.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}

wagtail/admin/static_src/wagtailadmin/scss/_fonts.scss

@@ -1,23 +0,0 @@
-//  NB: Due to Wagtail's browser support the following @font-face formats are required:
-//  - WOFF for modern browsers
-//  - WOFF2 For super-modern browsers
-//
-//  This example is all we need now:
-//
-//  @font-face {
-//    font-family: 'MyWebFont';
-//    src: url('myfont.woff2') format('woff2'),
-//         url('myfont.woff') format('woff');
-//  }
-//
-//  See https://css-tricks.com/snippets/css/using-font-face/ for more information.
-
-
-@include webfont(Open Sans, opensans-light, 300, normal);
-@include webfont(Open Sans, opensans-regular, 400, normal);
-@include webfont(Open Sans, opensans-semibold, 600, normal);
-@include webfont(Open Sans, opensans-bold, 700, normal);
-@include webfont(Roboto Slab, robotoslab-regular, 400, normal);
-@include webfont(Roboto Slab, robotoslab-bold, 700, normal);
-
-@import 'wagtailadmin/scss/font-icons';

wagtail/admin/static_src/wagtailadmin/scss/_helpers.scss

@@ -0,0 +1,2 @@
+@import '../../../../../client/scss/settings';
+@import '../../../../../client/scss/tools';

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

@@ -1,2 +0,0 @@
-@import 'wagtailadmin/scss/mixins/breakpoints';
-@import 'wagtailadmin/scss/mixins/general';

wagtail/admin/static_src/wagtailadmin/scss/_utilities.scss

@@ -1 +0,0 @@
-@import 'wagtailadmin/scss/utilities/text';

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

@@ -1,268 +0,0 @@
-// user avatars
-.avatar {
-    border-radius: 100%;
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-    text-align: center;
-    overflow: hidden;
-    width: 50px;
-    height: 50px;
-
-    img {
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-        right: 0;
-        border: 0;
-    }
-
-    &.small {
-        vertical-align: middle;
-        margin: 0 0.5em;
-        width: 25px;
-        height: 25px;
-    }
-
-    &.square {
-        border-radius: 0;
-
-        &:before {
-            border-radius: 0;
-        }
-    }
-}
-
-.media-placeholder {
-    width: 600px;
-    height: 400px;
-    background-color: #ccc;
-    padding: 5px;
-
-    h3,
-    p {
-        margin: 0;
-    }
-
-    img {
-        max-width: 350px;
-        max-height: 350px;
-        margin: 20px;
-    }
-}
-
-// Displays 'timesince' formatted date with full date on hover
-.human-readable-date {
-    overflow: hidden;
-    display: block;
-    position: relative;
-
-    &:before {
-        position: absolute;
-        display: none;
-        content: attr(title);
-    }
-
-    &:hover {
-        visibility: hidden;
-
-        &:before {
-            visibility: visible;
-            display: block;
-        }
-    }
-}
-
-// makes a link look like regular text
-.nolink {
-    color: $color-text-base;
-
-    &:hover {
-        color: $color-teal;
-    }
-}
-
-// Status tags
-.status-tag {
-    border-radius: 2px;
-    text-align: center;
-    display: inline-block;
-    text-transform: uppercase;
-    padding: 0 0.5em;
-    border: 1px solid lighten($color-grey-2, 30%);
-    color: lighten($color-grey-2, 30%);
-    -webkit-font-smoothing: auto;
-    line-height: 19px;
-    font-size: 0.8em;
-    margin: 0 0.5em 0.5em;
-    background: #fff url('#{$images-root}bg-dark-diag.svg');
-
-    &.primary {
-        color: $color-grey-2;
-        border: 1px solid $color-grey-2;
-        background: #fff;
-    }
-
-    &.disabled {
-        pointer-events: none;
-    }
-}
-
-button.status-tag:hover,
-a.status-tag:hover,
-a.status-tag.primary:hover {
-    border-color: $color-teal;
-    color: $color-teal;
-}
-
-button.status-tag:hover {
-    border-color: $color-teal-dark;
-    background-color: $color-teal-darker;
-    color: $color-white;
-}
-
-.privacy-indicator {
-    .label-private,
-    .label-public {
-        &:before {
-            font-size: 1.5em;
-        }
-    }
-
-    &.public {
-        .label-private {
-            display: none;
-        }
-    }
-
-    &.private {
-        .label-public {
-            display: none;
-        }
-    }
-}
-
-// free tagging tags from taggit
-.tag {
-    border-radius: 2px;
-    background-color: $color-teal;
-    padding-right: 0.5em;
-    padding: 0.2em 0.5em;
-    color: $color-white;
-    line-height: 2em;
-    white-space: nowrap;
-
-    &:before {
-        font-family: wagtail;
-        display: inline-block;
-        color: $color-white;
-        content: 'u';
-        padding-right: 0.5em;
-    }
-
-    .taglist & {
-        margin-right: 0.8em;
-    }
-}
-
-a.tag:hover {
-    background-color: $color-teal-darker;
-    color: $color-white;
-}
-
-.taglist {
-    font-size: 0.9em;
-    line-height: 2.4em;
-
-    h3 {
-        display: inline;
-        margin-right: 1em;
-    }
-}
-
-// Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction
-.loading-mask {
-    &.loading {
-        position: relative;
-
-        &:before,
-        &:after {
-            position: absolute;
-            display: block;
-        }
-
-        &:before {
-            content: '';
-            top: -5px;
-            left: -5px;
-            bottom: -5px;
-            right: -5px;
-            z-index: 1;
-            background-color: rgba(255, 255, 255, 0.5);
-        }
-
-        &:after {
-            font-size: 30px;
-            width: 30px;
-            line-height: 30px;
-            left: 50%;
-            top: 50%;
-            margin: -15px 0 0 -15px;
-            font-family: wagtail;
-            animation: spin 0.5s infinite linear;
-            content: '1';
-            z-index: 2;
-            color: $color-teal;
-        }
-    }
-}
-
-hr {
-    border: 1px solid $color-grey-4;
-    border-width: 1px 0 0;
-    margin: 1.5em 0;
-}
-
-// general image style
-img {
-    max-width: 100%;
-    height: auto;
-}
-
-// Show a transparency grid in background
-.show-transparency {
-    background: url('#{$images-root}transparency.svg');
-}
-
-// make a block-level element inline
-.inline {
-    display: inline;
-}
-
-.inline-block {
-    display: inline-block;
-}
-
-.block {
-    display: block;
-}
-
-.unlist {
-    @include unlist();
-}
-
-// utility class to allow things to be scrollable if their contents can't wrap more nicely
-.overflow {
-    overflow: auto;
-}
-
-.status-msg {
-    &.success {
-        color: $color-green;
-    }
-
-    &.failure {
-        color: $color-red;
-    }
-}

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

@@ -1,1251 +0,0 @@
-// These are the generic stylings for forms of any type.
-// If you're styling something specific to the page editing interface,
-// it probably ought to go in layouts/page-editor.scss
-form {
-    ul,
-
-    li {
-        list-style-type: none;
-    }
-
-    ul {
-        margin: 0;
-        padding: 0;
-    }
-}
-
-fieldset {
-    border: 0;
-    padding: 0 0 2em;
-    margin: 0;
-}
-
-legend {
-    @include visuallyhidden();
-}
-
-label,
-.label {
-    text-transform: none;
-    font-weight: bold;
-    color: $color-grey-1;
-    font-size: 1.1em;
-    display: block;
-    padding: 0 0 0.8em;
-    margin: 0;
-    line-height: 1.3em;
-
-    .checkbox &,
-    .radio & {
-        display: inline;
-    }
-}
-
-.plain-checkbox-label {
-    // cancel heavy / floated label styles, for labels that should appear inline against checkboxes
-
-    float: none;
-    color: inherit;
-    font-weight: inherit;
-    font-size: inherit;
-}
-
-input,
-textarea,
-select,
-.halloeditor,
-.tagit {
-    appearance: none;
-    box-sizing: border-box;
-    border-radius: 6px;
-    width: 100%;
-    font-family: Open Sans,Arial,sans-serif;
-    border: 1px solid $color-input-border;
-    padding: 0.9em 1.2em;
-    background-color: $color-fieldset-hover;
-    color: $color-text-input;
-    font-size: 1.2em;
-    font-weight: 300;
-    outline: none;
-
-    &:hover {
-        background-color: $color-white;
-    }
-
-    &:focus {
-        background-color: $color-input-focus;
-        border-color: $color-input-focus-border;
-        outline: none;
-    }
-
-    &:disabled,
-    &[disabled],
-    &:disabled:hover,
-    &[disabled]:hover {
-        background-color: inherit;
-        cursor: default;
-        color: $color-grey-4;
-    }
-}
-
-// Reset the arrow on `<select>`s in IE10+.
-select::-ms-expand {
-    display: none;
-}
-
-// select boxes
-.choice_field .input,
-.model_choice_field .input,
-.typed_choice_field .input {
-    position: relative;
-
-    select {
-        outline: none;
-    }
-
-    // Add select arrow back on browsers where native ui has been removed
-    select ~ span:after {
-        border-radius: 0 6px 6px 0;
-        z-index: 0;
-        position: absolute;
-        right: 0;
-        top: 1px;
-        bottom: 0;
-        width: 1.5em;
-        font-family: wagtail;
-        content: 'q';
-        border: 1px solid $color-input-border;
-        border-width: 0 0 0 1px;
-        text-align: center;
-        line-height: 1.4em;
-        font-size: 3em;
-        pointer-events: none;
-        color: $color-grey-3;
-        margin: 0 1px 1px 0;
-
-        .ie & {
-            display: none;
-        }
-    }
-
-
-}
-
-// radio and check boxes
-input[type=radio],
-input[type=checkbox] {
-    border-radius: 0;
-    cursor: pointer;
-    border: 0;
-}
-
-input[type=radio] {
-    height: 12px;
-    width: auto;
-    position: relative;
-    margin-right: 27px;
-}
-
-input[type=radio]:before {
-    border-radius: 100%;
-    font-family: wagtail;
-    font-style: normal;
-    text-align: center;
-    position: absolute;
-    top: -5px;
-    left: -2px;
-    cursor: pointer;
-    display: block;
-    content: 'K';
-    width: 1em;
-    height: 1em;
-    line-height: 1.1em;
-    padding: 4px;
-    background-color: $color-white;
-    color: $color-grey-4;
-    border: 1px solid $color-grey-4;
-}
-
-input[type=radio]:checked:before {
-    content: 'K';
-    color: $color-teal;
-}
-
-input[type=checkbox] {
-    height: 12px;
-    width: auto;
-    position: relative;
-    margin-right: 27px;
-}
-
-input[type=checkbox]:before {
-    font-family: wagtail;
-    font-style: normal;
-    text-align: center;
-    position: absolute;
-    top: -5px;
-    cursor: pointer;
-    display: block;
-    content: 'x';
-    line-height: 20px;
-    width: 20px;
-    height: 20px;
-    background-color: $color-white;
-    border: 1px solid $color-grey-4;
-    color: $color-white;
-}
-
-input[type=checkbox]:checked:before {
-    color: $color-teal;
-}
-
-// Core button style
-// Note that these styles include methods to render buttons the same x-browser, described here:
-// http: //cbjdigital.com/blog/2010/08/bulletproof_css_input_button_heights
-// input[type=submit],
-// input[type=reset],
-// input[type=button],
-.button {
-    border-radius: 3px;
-    font-family: Open Sans,Arial,sans-serif;
-    width: auto;
-    height: 2.4em;
-    padding: 0 1em;
-    font-size: 0.9em;
-    font-weight: normal;
-    vertical-align: middle;
-    display: inline-block;
-    background-color: $color-button;
-    border: 1px solid $color-button;
-    color: $color-white;
-    text-decoration: none;
-    text-transform: uppercase;
-    white-space: nowrap;
-    position: relative;
-    overflow: hidden;
-    outline: none;
-    box-sizing: border-box;
-    -webkit-font-smoothing: auto;
-    // stylelint-disable-next-line property-no-vendor-prefix
-    -moz-appearance: none;
-
-    &:hover {
-        color: $color-teal;
-    }
-
-
-    &.yes {
-        background-color: $color-button-yes;
-        border: 1px solid $color-button-yes;
-
-        &.button-secondary {
-            border: 1px solid $color-button-yes;
-            color: $color-button-yes;
-            background-color: transparent;
-        }
-
-        &:hover {
-            color: $color-white;
-            border-color: transparent;
-            background-color: $color-button-yes-hover;
-        }
-
-        &.button-nobg:hover {
-            color: $color-button-yes;
-            background-color: transparent;
-        }
-    }
-
-    &.warning {
-        background-color: $color-button-warning;
-        border: 1px solid $color-button-warning;
-
-        &.button-secondary {
-            border: 1px solid $color-button-warning;
-            color: $color-button-warning;
-            background-color: transparent;
-        }
-
-        &:hover {
-            color: $color-white;
-            border-color: transparent;
-            background-color: $color-button-warning-hover;
-        }
-
-        &.button-nobg:hover {
-            color: $color-button-warning;
-            background-color: transparent;
-        }
-    }
-
-
-    &.no,
-    &.serious {
-        background-color: $color-button-no;
-        border: 1px solid $color-button-no;
-
-        &.button-secondary {
-            border: 1px solid $color-button-no;
-            color: $color-button-no;
-            background-color: transparent;
-        }
-
-        &:hover {
-            color: $color-white;
-            border-color: transparent;
-            background-color: $color-button-no-hover;
-        }
-
-        &.button-nobg:hover {
-            color: $color-button-no;
-            background-color: transparent;
-        }
-    }
-
-    &.button-nobg {
-        border: 0;
-        background-color: transparent;
-    }
-
-    &.bicolor {
-        border: 0;
-        padding-left: 3.5em;
-
-        &:before {
-            font-size: 1rem;
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 2em;
-            line-height: 1.85em;
-            height: 100%;
-            text-align: center;
-            background-color: rgba(0, 0, 0, 0.2);
-            display: block;
-            border-top-left-radius: inherit;
-            border-bottom-left-radius: inherit;
-        }
-    }
-
-    &.button-small.bicolor {
-        padding-left: 3.5em;
-
-        &:before {
-            width: 2em;
-            font-size: 0.9rem;
-            line-height: 1.65em;
-        }
-    }
-
-
-    // + input[type=submit],
-    // + input[type=reset],
-    // + input[type=button],
-    + .button {
-        // + button {
-        margin-left: 1em;
-    }
-
-    // A completely unstyled button
-    &.unbutton {
-        border-radius: 0;
-        width: auto;
-        height: auto;
-        padding: 0;
-        font-size: inherit;
-        font-weight: normal;
-        vertical-align: middle;
-        display: inline;
-        background-color: transparent;
-        border: 0;
-        color: inherit;
-        text-decoration: none;
-        text-transform: uppercase;
-        white-space: nowrap;
-        position: relative;
-        overflow: hidden;
-        outline: none;
-        box-sizing: border-box;
-        -webkit-font-smoothing: auto;
-        // stylelint-disable-next-line property-no-vendor-prefix
-        -moz-appearance: none;
-    }
-
-    &:hover {
-        background-color: $color-button-hover;
-        color: $color-white;
-        border-color: transparent;
-
-        &.hover-no {
-            background-color: $color-button-no;
-        }
-    }
-
-    &.button-longrunning {
-        span {
-            @include transition(all 0.3s ease);
-            transform: scale(0.9);
-            display: inline-block;
-            height: 0.9em;
-            position: relative;
-            opacity: 0;
-            width: 0;
-            visibility: hidden;
-            text-align: center;
-            padding-right: 0;
-        }
-
-        em {
-            font-style: normal;
-        }
-
-        &.button-longrunning-active span {
-            transform: scale(1);
-            visibility: visible;
-            width: 1em;
-            opacity: 0.8;
-            padding-right: 0.5em;
-        }
-
-        .icon-spinner:after {
-            text-align: center;
-            position: absolute;
-            left: 0;
-            margin: 0;
-            line-height: 1em;
-            display: inline-block;
-            font-size: 1em;
-        }
-    }
-
-    &:disabled,
-    &[disabled],
-    &.disabled {
-        background-color: $color-grey-3;
-        border-color: $color-grey-3;
-        color: lighten($color-grey-2, 15%);
-        cursor: default;
-    }
-
-    &.button-secondary:disabled,
-    &.button-secondary[disabled],
-    &.button-secondary.disabled {
-        background-color: $color-white;
-        border-color: $color-grey-3;
-        color: $color-grey-3;
-    }
-
-    &.button-nostroke {
-        border: 0;
-    }
-
-    @include media-breakpoint-up(sm) {
-        font-size: 0.95em;
-        padding: 0 1.4em;
-        height: 3em;
-
-        &.icon.text-replace {
-            width: 2.2rem;
-            height: 2.2rem;
-
-            &:before {
-                line-height: 2.1em;
-            }
-        }
-
-        &.button-small {
-            &.icon.text-replace {
-                height: 1.8rem;
-                width: 1.8rem;
-
-                // stylelint-disable-next-line max-nesting-depth
-                &:before {
-                    line-height: 1.7em;
-                }
-            }
-        }
-
-        &.bicolor {
-            padding-left: 3.7em;
-
-            &:before {
-                width: 2em;
-                line-height: 2.2em;
-                font-size: 1.1rem;
-            }
-        }
-
-        &.button-small.bicolor {
-            // line-height: 2.2em;
-            padding-left: 3em;
-
-            &:before {
-                width: 1.8em;
-                line-height: 1.65em;
-            }
-        }
-    }
-}
-
-
-.button-small {
-    padding: 0 0.8em;
-    height: 2em;
-    font-size: 0.95em;
-}
-
-.button-secondary {
-    color: $color-button;
-    background-color: transparent;
-}
-
-// Buttons which are only an icon
-.button.icon.text-replace {
-    font-size: 0; // unavoidable duplication of setting in icons.scss
-    width: 1.8rem;
-    height: 1.8rem;
-
-    &:before {
-        line-height: 1.7em;
-    }
-}
-
-.button-neutral {
-    color: $color-grey-2;
-
-    &:hover {
-        color: $color-teal;
-    }
-}
-
-.yes {
-    background-color: $color-button-yes;
-    border: 1px solid $color-button-yes;
-
-    &.button-secondary {
-        border: 1px solid $color-button-yes;
-        color: $color-button-yes;
-        background-color: transparent;
-    }
-
-    &:hover {
-        color: $color-white;
-        border-color: transparent;
-        background-color: $color-button-yes-hover;
-    }
-
-    &.button-nobg:hover {
-        color: $color-button-yes;
-        background-color: transparent;
-    }
-}
-
-.no,
-.serious {
-    background-color: $color-button-no;
-    border: 1px solid $color-button-no;
-
-    &.button-secondary {
-        border: 1px solid $color-button-no;
-        color: $color-button-no;
-        background-color: transparent;
-    }
-
-    &:hover {
-        color: $color-white;
-        border-color: transparent;
-        background-color: $color-button-no-hover;
-    }
-
-    &.button-nobg:hover {
-        color: $color-button-no;
-        background-color: transparent;
-    }
-}
-
-.button-nobg {
-    border: 0;
-    background-color: transparent;
-}
-
-.bicolor {
-    border: 0;
-    padding-left: 3.5em;
-
-    &:before {
-        font-size: 1rem;
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 2em;
-        line-height: 1.85em;
-        height: 100%;
-        text-align: center;
-        background-color: rgba(0, 0, 0, 0.2);
-        display: block;
-    }
-}
-
-.button-small.bicolor {
-    padding-left: 3.5em;
-
-    &:before {
-        width: 2em;
-        font-size: 0.8rem;
-        line-height: 1.65em;
-    }
-}
-
-
-a.button {
-    line-height: 2.4em;
-    height: auto;
-
-    &.button-small {
-        line-height: 1.85em;
-    }
-
-    @include media-breakpoint-up(sm) {
-        line-height: 2.9em;
-    }
-}
-
-// Special styles to counteract Firefox's completely unwarranted assumptions about button styles
-input[type=submit],
-input[type=reset],
-input[type=button],
-button {
-    padding: 0 1em;
-
-    @include media-breakpoint-up(sm) {
-        &.button-small {
-            height: 2em;
-        }
-    }
-}
-
-.button-group {
-    @include clearfix;
-
-    input[type=submit],
-    input[type=reset],
-    input[type=button],
-    .button,
-    button {
-        border-radius: 0;
-        float: left;
-        margin-right: 1px;
-        margin-left: 0;
-
-        &:only-child {
-            border-radius: 3px;
-        }
-
-        &:first-child {
-            border-radius: 3px 0 0 3px;
-        }
-
-        &:last-child {
-            border-radius: 0 3px 3px 0;
-            margin-right: 0;
-        }
-    }
-
-    &.button-group-square {
-        &,
-        input[type=submit],
-        input[type=reset],
-        input[type=button],
-        .button,
-        button {
-            border-radius: 0;
-        }
-    }
-}
-
-
-.multiple {
-    padding: 0;
-    max-width: 1024px - 50px;
-    overflow: hidden;
-
-    > li {
-        @include row();
-        border-radius: 2px;
-        position: relative;
-        overflow: hidden;
-        background-color: $color-white;
-        padding: 1em 10em 1em 1.5em; // 10em padding leaves room for controls
-        margin-bottom: 1em;
-        border: 1px solid lighten($color-grey-4, 3%); // really trying to avoid creating more greys, but this one is better than grey 4 or 5
-    }
-
-    &.moving {
-        position: relative;
-    }
-
-    li.moving {
-        position: absolute;
-        width: 100%;
-    }
-
-    fieldset {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-
-    // Object controls
-    .controls {
-        position: absolute;
-        z-index: 1;
-        right: 1em;
-        top: 1em;
-        color: $color-white;
-
-        li {
-            float: left;
-            margin-right: 1px;
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-
-        .disabled {
-            display: none;
-            visibility: hidden;
-        }
-    }
-
-}
-
-// wrapper around add button for mutliple objects
-.add {
-    font-weight: 700;
-    cursor: pointer;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: 1em;
-    padding-bottom: 2em;
-    clear: both;
-}
-
-// Other text
-.help,
-.error-message {
-    font-size: 0.85em;
-    font-weight: normal;
-    margin: 0.5em 0 0;
-}
-
-.error-message {
-    color: $color-red;
-}
-
-.help {
-    color: $color-grey-2;
-}
-
-fieldset:hover > .help,
-.field.focused + .help,
-.field:focus + .help,
-.field:hover + .help,
-li.focused > .help {
-    opacity: 1;
-}
-
-.required .field > label:after {
-    content: '*';
-    color: $color-red;
-    font-weight: bold;
-    display: inline-block;
-    margin-left: 0.5em;
-    line-height: 1em;
-    font-size: 13px;
-}
-
-.error input,
-.error textarea,
-.error select,
-.error .tagit {
-    border-color: $color-red;
-    background-color: $color-input-error-bg;
-}
-
-// Layouts for particular kinds of of fields
-
-// permanently show checkbox/radio help as they have no focus state
-.boolean_field .help,
-.radio .help {
-    opacity: 1;
-}
-
-// This is expected to go on the parent of the input/select/textarea
-// so in most cases .input
-.iconfield, // generic
-.date_field,
-.time_field,
-.date_time_field,
-.url_field {
-    .input {
-        position: relative;
-
-        &:before,
-        &:after {
-            font-family: wagtail;
-            position: absolute;
-            top: 0.5em;
-            line-height: 100%;
-            font-size: 2em;
-            color: $color-grey-3;
-        }
-
-        &:before {
-            left: 0.3em;
-        }
-
-        &:after {
-            right: 0.5em;
-        }
-    }
-
-    input:not([type=radio]),
-    input:not([type=checkbox]),
-    input:not([type=submit]),
-    input:not([type=button]) {
-        padding-left: 2.5em;
-    }
-
-    // smaller fields required slight repositioning of icons
-    &.field-small {
-        .input {
-            &:before,
-            &:after {
-                font-size: 1.3rem; // REMs are necessary here because IE doesn't treat generated content correctly
-                top: 0.3em;
-            }
-
-            &:before {
-                left: 0.5em;
-            }
-
-            &:after {
-                right: 0.5em;
-            }
-        }
-    }
-
-    // special case for search spinners
-    &.icon-spinner:after {
-        color: $color-teal;
-        opacity: 0.8;
-        text-align: center;
-        top: 0.3em;
-    }
-}
-
-.date_field,
-.date_time_field {
-    .input:before {
-        @extend .icon-date:before;
-    }
-}
-
-.time_field {
-    .input:before {
-        @extend .icon-time:before;
-    }
-}
-
-.url_field {
-    .input:before {
-        @extend .icon-link:before;
-    }
-}
-
-
-// This is specifically for model that are a generated set of checkboxes/radios
-.model_multiple_choice_field .input li,
-.choice_field .input li {
-    label {
-        display: block;
-        width: auto;
-        float: none;
-        padding-top: 0; // Negates padding added to label for the group of fields as a whole
-    }
-}
-
-.fields > li,
-.field-col {
-    @include clearfix();
-    padding-top: 0.5em;
-    padding-bottom: 1.2em;
-}
-
-.field-row {
-    @include clearfix();
-
-    // negative margin the bottom so it doesn't add too much space
-    margin-bottom: -1.2em;
-}
-
-.input {
-    clear: both;
-}
-
-// field sizing and alignment
-.field-small {
-    input,
-    textarea,
-    select,
-    .halloeditor,
-    .tagit {
-        border-radius: 3px;
-        padding: 0.4em 1em;
-    }
-}
-
-.field {
-    &.col1,
-    &.col2,
-    &.col3,
-    &.col4,
-    &.col5,
-    &.col6,
-    &.col7,
-    &.col8,
-    &.col9,
-    &.col10,
-    &.col11,
-    &.col12 { clear: both;}
-}
-
-li.inline .field {
-    &.col1,
-    &.col2,
-    &.col3,
-    &.col4,
-    &.col5,
-    &.col6,
-    &.col7,
-    &.col8,
-    &.col9,
-    &.col10,
-    &.col11,
-    &.col12 { clear: none;}
-}
-
-// solve gutter issues of inline fields
-ul.inline li:first-child,
-li.inline:first-child {
-    margin-left: -$grid-gutter-width / 2;
-}
-
-
-// TODO this chooser style has been made more generic based on two identical methods
-// for choosing pages and images that were previously included in their own less files
-// in each app directory (and since deleted). It would be best if an admin 'theme' provided
-// all the design for a UI in a single place, but should that be a series of overrides to
-// the css provided from an app? If so, perhaps those two previous less files should be
-// re-instated and then overriden here? hmm.
-.chooser {
-    // We show the 'chosen' state...
-    @include clearfix();
-
-    input[type=text] {
-        float: left;
-        width: 50%;
-        margin-right: 1em;
-    }
-
-    .chosen {
-        display: block;
-    }
-
-    .unchosen,
-    .chosen {
-        position: relative;
-
-        &:before {
-            vertical-align: middle;
-            font-family: wagtail;
-            content: '';
-            // position: relative
-            display: inline-block;
-            // float: left;
-            color: $color-grey-3;
-            line-height: 1em;
-            font-size: 2.5em;
-            margin-right: 0.3em;
-        }
-    }
-
-    .unchosen {
-        display: none;
-    }
-
-    .actions {
-        @include clearfix;
-        overflow: hidden;
-
-        li {
-            float: left;
-            margin: 0.3em;
-        }
-    }
-
-    // ...unless the .page-chooser has the 'blank' class set
-    &.blank {
-        .chosen { display: none; }
-
-        .unchosen { display: block; }
-    }
-}
-
-// standard way of doing a chooser where the chosen object's title is overlayed
-.page-chooser,
-.snippet-chooser,
-.document-chooser {
-    .chosen {
-        .title {
-            color: $color-grey-1;
-            // display: block;
-            padding-left: 1em;
-            display: inline-block;
-        }
-
-        .actions {
-            clear: both;
-            padding-top: 0.6em;
-        }
-    }
-}
-
-.page-chooser {
-    .unchosen,
-    .chosen {
-        &:before {
-            content: 'b';
-        }
-    }
-}
-
-.snippet-chooser {
-    .unchosen,
-    .chosen {
-        &:before {
-            content: 'D';
-        }
-    }
-}
-
-.document-chooser {
-    .unchosen,
-    .chosen {
-        &:before {
-            content: 'r';
-        }
-    }
-}
-
-.image-chooser {
-    .unchosen,
-    .chosen {
-        &:before {
-            content: 'o';
-        }
-    }
-
-    .chosen {
-        padding-left: $thumbnail-width;
-
-        &:before {
-            content: '';
-        }
-
-        .preview-image {
-            float: left;
-            margin-left: -($thumbnail-width);
-            margin-right: 1em;
-            max-width: $thumbnail-width;
-
-            // Resize standard Wagtail thumbnail size (165x165) to 130 for space-saving purposes.
-            // We could request a 130x130 rendition, but that's just unnecessary and burdens installations
-            // where images are store off-site with higher rendering times.
-            img {
-                max-width: $thumbnail-width;
-                max-height: $thumbnail-width;
-                height: auto;
-                width: auto;
-            }
-        }
-    }
-}
-
-// taggit tagging
-.tagit {
-    padding: 0.6em 1.2em;
-
-    .tagit-choice {
-        border: 0;
-    }
-}
-
-// Additional specificity (.admin_tag_widget ) required to override tagit stylesheets,
-// which get added after the core CSS, and otherweise trump our styles.
-.admin_tag_widget ul.tagit input[type='text'] {
-    padding: 0.2em 0.5em;
-}
-
-// Additional specificity (.admin_tag_widget ) required to override tagit stylesheets,
-// which get added after the core CSS, and otherweise trump our styles.
-.admin_tag_widget ul.tagit li.tagit-choice-editable {
-    padding: 0 23px 0 0;
-}
-
-.ui-front { // provided by jqueryui but not high enough an index
-    z-index: 1000;
-}
-
-.tagit-close {
-    .ui-icon-close {
-        margin-left: 1em;
-        text-indent: 0;
-        background: none;
-    }
-
-    .ui-icon-close:before {
-        font-family: wagtail;
-        display: block;
-        color: $color-grey-3;
-        content: 'g';
-    }
-
-    .ui-icon-close:hover:before {
-        color: $color-red;
-    }
-}
-
-// search-bars
-.search-bar {
-    .required .field > label:after {
-        display: none;
-    }
-
-    .button-filter {
-        height: 2.71em;
-        border-color: transparent;
-    }
-}
-
-// file drop zones
-.drop-zone {
-    border-radius: 5px;
-    border: 2px dashed $color-grey-4;
-    padding: $mobile-nice-padding;
-    background-color: $color-grey-5;
-    margin-bottom: 1em;
-    text-align: center;
-
-    .drop-zone-help {
-        border: 0;
-    }
-
-    &.hovered {
-        border-color: $color-teal;
-        background-color: $color-input-focus;
-    }
-}
-
-// Transitions
-fieldset,
-input,
-textarea,
-select {
-    @include transition(background-color 0.2s ease);
-}
-
-.help {
-    @include transition(opacity 0.2s ease);
-}
-
-.label-uppercase {
-    .field > label {
-        text-transform: uppercase;
-    }
-}
-
-@include media-breakpoint-up(sm) {
-    label {
-        @include column(2);
-        padding-top: 1.2em;
-        padding-left: 0;
-
-        .radio_select &,
-        .model_multiple_choice_field &,
-        .boolean_field &,
-        .model_choice_field &,
-        .image_field & {
-            padding-top: 0;
-        }
-
-        // Horrid specificity war
-        .model_choice_field.select & {
-            padding-top: 1.2em;
-        }
-    }
-
-    .help {
-        opacity: 1;
-    }
-
-    .fields {
-        max-width: 800px;
-    }
-
-    .field {
-        @include row();
-    }
-
-    .field-content {
-        @include column(10, 0);
-    }
-
-    .field-col {
-        float: left;
-        padding-left: 0;
-
-        // anything less than 4 columns or greater than 6 is impractical
-        &.col4 {
-            label {
-                @include column(2, 0, 4);
-            }
-
-            .field-content {
-                @include column(2, $padding, 4);
-                padding-left: 0;
-            }
-        }
-
-        &.col6 {
-            label {
-                @include column(2, 0, 6);
-            }
-
-            .field-content {
-                @include column(4, $padding, 6);
-                padding-left: 0;
-            }
-        }
-    }
-
-    .label-above {
-        .field > label,
-        .field > .field-content {
-            display: block;
-            padding: 0 0 0.8em;
-            float: none;
-            width: auto;
-        }
-    }
-}

wagtail/admin/static_src/wagtailadmin/scss/core.scss

@@ -1,452 +1 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
-@import 'wagtailadmin/scss/grid';
-
-@import 'wagtailadmin/scss/components/icons';
-@import 'wagtailadmin/scss/components/typography';
-@import 'wagtailadmin/scss/components/tabs';
-@import 'wagtailadmin/scss/components/dropdowns';
-@import 'wagtailadmin/scss/components/modals';
-@import 'wagtailadmin/scss/components/forms';
-@import 'wagtailadmin/scss/components/listing';
-@import 'wagtailadmin/scss/components/messages';
-@import 'wagtailadmin/scss/components/formatters';
-@import 'wagtailadmin/scss/components/header';
-@import 'wagtailadmin/scss/components/progressbar';
-@import 'wagtailadmin/scss/components/datetimepicker';
-@import 'wagtailadmin/scss/components/main-nav';
-@import 'wagtailadmin/scss/components/indicator';
-@import 'wagtailadmin/scss/components/tooltips';
-@import 'wagtailadmin/scss/components/logo';
-
-@import 'wagtailadmin/scss/utilities';
-
-@import 'wagtailadmin/scss/fonts';
-
 @import '../../../../../client/scss/styles';
-
-html {
-    background: $color-grey-4;
-    height: 100%;
-}
-
-body {
-    -webkit-font-smoothing: antialiased; // Do not remove!
-    font-family: Open Sans, Arial, sans-serif;
-    font-size: 80%;
-    line-height: 1.5em;
-    color: $color-text-base;
-    overflow-x: hidden;
-    position: relative;
-
-    &.reordering {
-        overflow: visible;
-    }
-
-    &:after {
-        content: '';
-        position: fixed;
-        transition: visibility 0s linear 0s, opacity 0.2s ease-out;
-        background: rgba(255, 255, 255, 0.5);
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        z-index: 5;
-        opacity: 0;
-        visibility: hidden;
-    }
-}
-
-.visuallyvisible {
-    @include visuallyvisible;
-}
-
-.visuallyhidden {
-    @include visuallyhidden;
-}
-
-.capabilitymessage {
-    display: block;
-    background-color: $color-red;
-    color: $color-white;
-    padding: 1em 2em;
-    margin: 0;
-    position: relative;
-    text-align: center;
-
-    a {
-        color: $color-white;
-        text-decoration: underline;
-    }
-}
-
-.wrapper {
-    @include clearfix();
-    height: 100vh;
-    transition: transform 0.2s ease;
-}
-
-.content-wrapper {
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%; // this has no effect on desktop, but on mobile it helps aesthetics of menu popout action
-    float: left;
-    position: relative;
-    background-color: $color-grey-4;
-    border-bottom: 1px solid $color-grey-3;
-}
-
-.content {
-    @include row();
-    background: $color-white;
-    border-top: 0 solid $color-grey-5; // this top border provides space for the floating logo to toggle the menu
-    min-height: 100%;
-    padding-bottom: 4em;
-    position: relative; // yuk. necessary for positions for jquery ui widgets
-}
-
-.page-locked {
-    .tab-content {
-        cursor: not-allowed;
-        user-select: none;
-
-        > * {
-            pointer-events: none;
-        }
-    }
-}
-
-footer {
-    @include transition(bottom 0.5s ease 1s);
-    @include row();
-    border-radius: 3px 3px 0 0;
-    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
-    background: $color-grey-1;
-    position: fixed;
-    bottom: 0;
-    padding: 0.5em;
-    width: 90%;
-    margin: 0 5%;
-    color: $color-white;
-
-    ul {
-        @include unlist();
-    }
-
-    li {
-        float: left;
-    }
-
-    .actions {
-        width: 250px;
-        margin-right: $grid-gutter-width / 2;
-    }
-
-    .preview .dropdown {
-        width: 250px;
-    }
-
-    .meta {
-        float: right;
-        text-align: right;
-        padding: 7px $grid-gutter-width / 2;
-        font-size: 0.85em;
-
-        p {
-            margin: 0;
-            margin-right: $grid-gutter-width;
-            white-space: nowrap;
-        }
-
-        a {
-            color: inherit;
-
-            &:hover {
-                color: $color-link;
-            }
-        }
-    }
-
-    @include media-breakpoint-down(xs) {
-        .actions,
-        .preview,
-        .preview .dropdown {
-            width: 100%;
-        }
-
-        .meta {
-            p {
-                white-space: normal;
-                width: 100%;
-            }
-
-            .avatar {
-                left: auto;
-            }
-        }
-    }
-}
-
-.breadcrumb {
-    @include unlist();
-    @include clearfix();
-    overflow: hidden;
-    padding-top: 1.4em;
-    font-size: 0.85em;
-
-    li {
-        display: block;
-        float: left;
-        padding: 0.5em 1.3em;
-        position: relative;
-        text-decoration: none;
-        color: $color-white;
-        white-space: nowrap;
-        line-height: 1.5em;
-
-        a,
-        span {
-            color: $color-white;
-            display: block;
-            max-width: 12em;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            line-height: 1.6em;
-            padding-right: 1em;
-
-            &:after {
-                right: 0;
-                // z-index: 5;
-                position: absolute;
-                font-family: wagtail;
-                content: 'n';
-                padding-left: 20px;
-                font-size: 2em;
-                color: $color-teal-darker;
-                line-height: 0.9em;
-            }
-        }
-
-        &:hover {
-            background: $color-teal-dark;
-
-            a {
-                color: $color-white;
-            }
-        }
-
-        &:hover:after {
-            border-left-color: $color-teal-dark;
-        }
-
-        &.home {
-            a {
-                // stylelint-disable max-nesting-depth
-                padding-right: 0;
-                text-align: center;
-                width: 3em;
-                font-size: 1em;
-                text-overflow: clip;
-
-                &:before {
-                    font-size: 1.15rem;
-                    line-height: 0.85em;
-                    padding-top: 0.1em;
-                }
-
-                &:after {
-                    right: -0.3em;
-                }
-            }
-        }
-    }
-
-    header &  li {
-        &:before {
-            border-left: 1em solid $color-white;
-            position: absolute;
-            left: 0;
-            top: 0;
-        }
-    }
-
-    &.single {
-        li a {
-            white-space: nowrap;
-            text-overflow: inherit;
-            max-width: 100%;
-        }
-    }
-}
-
-.clearfix {
-    @include clearfix();
-}
-
-.row {
-    @include clearfix();
-}
-
-.nice-padding {
-    padding-left: $mobile-nice-padding;
-    padding-right: $mobile-nice-padding;
-}
-
-
-// Z-indexes
-.nav-toggle {
-    z-index: 5;
-}
-
-.nav-wrapper {
-    z-index: 2;
-}
-
-// Avoiding a stacking context for the content-wrapper saves us a world
-// of pain when dealing with overlays that are appended to the end of
-// <body>, eg Hallo & calendars. As long as content-wrapper remains floated,
-// the z-index shouldn't be required.
-
-// .content-wrapper {
-// z-index: 3;
-// }
-.nav-submenu {
-    z-index: 6;
-}
-
-footer,
-.logo {
-    z-index: 100;
-}
-
-@include media-breakpoint-up(sm) {
-    .col1 {
-        @include column(1);
-    }
-
-    .col2 {
-        @include column(2);
-    }
-
-    .col3 {
-        @include column(3);
-    }
-
-    .col4 {
-        @include column(4);
-    }
-
-    .col5 {
-        @include column(5);
-    }
-
-    .col6 {
-        @include column(6);
-    }
-
-    .col7 {
-        @include column(7);
-    }
-
-    .col8 {
-        @include column(8);
-    }
-
-    .col9 {
-        @include column(9);
-    }
-
-    .col10 {
-        @include column(10);
-    }
-
-    .col11 {
-        @include column(11);
-    }
-
-    .col12 {
-        @include column(12);
-    }
-
-    .divider-before {
-        border-left: 1px solid $color-grey-4;
-    }
-
-    .divider-after {
-        border-right: 1px solid $color-grey-4;
-    }
-
-    .row {
-        @include row();
-    }
-
-    .row-flush {
-        @include row-flush();
-    }
-
-    .nice-padding {
-        padding-left: $desktop-nice-padding;
-        padding-right: $desktop-nice-padding;
-    }
-
-    .browsermessage {
-        margin: 0 0 0 -150px;
-    }
-
-    .content-wrapper {
-        border-bottom-right-radius: 5px;
-    }
-
-    footer {
-        margin-left: $desktop-nice-padding;
-        margin-right: $desktop-nice-padding;
-        width: calc(100% - #{$menu-width} - #{2 * $desktop-nice-padding});
-    }
-
-    .content {
-        border-top: 0;
-        background-color: none;
-        padding-top: 0;
-    }
-
-    .breadcrumb {
-        padding-top: 0;
-        background: $color-teal-darker;
-        margin-left: -($desktop-nice-padding);
-        margin-right: -($desktop-nice-padding);
-
-        li {
-            a,
-            span {
-                &:after {
-                    color: $color-teal;
-                }
-            }
-        }
-    }
-
-
-    // Z-indexes
-    .nav-main {
-        .footer {
-            z-index: 2;
-        }
-    }
-
-    .nav-submenu {
-        z-index: 500;
-    }
-
-    // Allows overspill of messages banner onto left menu, but also explorer
-    // to spill over main content
-    .nav-wrapper {
-        z-index: auto;
-    }
-
-    // footer is z-index: 100, so ensure the navigation sits on top of it.
-    .nav-wrapper.submenu-active {
-        z-index: 200;
-    }
-}

wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss

@@ -1,6 +1,4 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
-@import 'wagtailadmin/scss/grid';
+@import 'wagtailadmin/scss/helpers';
 
 .page404__bg {
     position: fixed;

wagtail/admin/static_src/wagtailadmin/scss/layouts/compare-revisions.scss

@@ -1,4 +1,4 @@
-@import 'wagtailadmin/scss/variables';
+@import 'wagtailadmin/scss/helpers';
 
 $color-addition-dark: #a6f3a6;
 $color-addition-light: #ebffeb;

wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss

@@ -1,6 +1,4 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
-@import 'wagtailadmin/scss/grid';
+@import 'wagtailadmin/scss/helpers';
 
 h1 {
     font-weight: 300;

wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss

@@ -1,6 +1,4 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
-@import 'wagtailadmin/scss/grid';
+@import 'wagtailadmin/scss/helpers';
 
 // overrides default nice padding defined in variables.scss
 $desktop-nice-padding: 100px;

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

@@ -1,7 +1,5 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
-@import 'wagtailadmin/scss/grid';
-@import 'wagtailadmin/scss/components/streamfield';
+@import 'wagtailadmin/scss/helpers';
+@import '../../../../../../client/scss/components/streamfield';
 
 .page-editor {
     .content-wrapper {
@@ -410,13 +408,13 @@ footer .preview {
             &_small-part {
                 // IE11 requires units on the flex basis. Unitless breaks.
                 // stylelint-disable-next-line length-zero-no-unit
-                flex: 1 0 0px;
+                flex: 1 0 0%;
             }
 
             &_big-part {
                 // IE11 requires units on the flex basis. Unitless breaks.
                 // stylelint-disable-next-line length-zero-no-unit
-                flex: 5 0 0px;
+                flex: 5 0 0%;
             }
         }
 

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

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

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

@@ -1,4 +1,3 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
+@import 'wagtailadmin/scss/helpers';
 
 @import '../../../../../../client/src/components/Hallo/Hallo';

wagtail/admin/static_src/wagtailadmin/scss/userbar.scss

@@ -1,7 +1,4 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
-@import 'wagtailadmin/scss/font-icons';
-@import 'wagtailadmin/scss/variables-icons';
+@import 'wagtailadmin/scss/helpers';
 
 // =============================================================================
 // Variables

wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/breadcrumbs_page.scss

@@ -1,5 +1,4 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
+@import 'wagtailadmin/scss/helpers';
 
 .breadcrumb {
     margin: -1.2em 0 2em;

wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss

@@ -1,5 +1,4 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
+@import 'wagtailadmin/scss/helpers';
 
 .content header {
     margin-bottom: 0;

wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss

@@ -1,6 +1,4 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
-@import 'wagtailadmin/scss/grid';
+@import 'wagtailadmin/scss/helpers';
 
 section {
     border-top: 1px solid $color-grey-3;

wagtail/documents/static_src/wagtaildocs/scss/add-multiple.scss

@@ -1,6 +1,4 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
-@import 'wagtailadmin/scss/grid';
+@import 'wagtailadmin/scss/helpers';
 
 .replace-file-input {
     display: inline-block;

wagtail/images/static_src/wagtailimages/scss/add-multiple.scss

@@ -1,6 +1,4 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
-@import 'wagtailadmin/scss/grid';
+@import 'wagtailadmin/scss/helpers';
 
 .replace-file-input {
     display: inline-block;

wagtail/images/static_src/wagtailimages/scss/focal-point-chooser.scss

@@ -1,5 +1,4 @@
-@import 'wagtailadmin/scss/variables';
-@import 'wagtailadmin/scss/mixins';
+@import 'wagtailadmin/scss/helpers';
 
 .focal-point-chooser {
     position: relative;