Fixes #3516 - replaces scss-lint with stylelint

.scss-lint.yml

@@ -1,166 +0,0 @@
-# Useful regexes to fix lint errors
-# SpaceBeforeBrace: search "([^\ ])\{" replace "$1 {"
-# SpaceAfterPropertyColon: search "([^\&]):([^\ \n]*);" replace "$1: $2;"
-
-scss_files:
-- wagtail/**/static_src/**/scss/**/*.scss
-- client/**/*.scss
-
-linters:
-    BorderZero:
-        enabled: true
-
-    Indentation:
-        severity: warning
-        width: 4
-        # because https://github.com/brigade/scss-lint/issues/409
-        allow_non_nested_indentation: true
-        character: space
-
-    ColorKeyword:
-        enabled: true
-
-    ColorVariable:
-        enabled: false
-
-    BangFormat:
-        space_before_bang: true
-        space_after_bang: false
-
-    PropertySortOrder:
-        enabled: false
-
-    Comment:
-        enabled: true
-
-    DeclarationOrder:
-        enabled: true
-
-    DuplicateProperty:
-        enabled: true
-
-    ElsePlacement:
-        enabled: true
-
-    EmptyLineBetweenBlocks:
-        enabled: true
-
-    EmptyRule:
-        enabled: true
-
-    FinalNewline:
-        present: true
-
-    HexLength:
-        style: short
-
-    HexNotation:
-        style: lowercase
-
-    HexValidation:
-        enabled: true
-
-    IdSelector:
-        enabled: true
-        exclude:
-            - '**/choose_parent_page.scss'
-
-    ImportantRule:
-        enabled: false
-        exclude:
-            - '**/_datetimepicker.scss'
-
-    ImportPath:
-        enabled: true
-
-    LeadingZero:
-        enabled: false
-
-    MergeableSelector:
-        enabled: false
-
-    NameFormat:
-        allow_leading_underscore: true
-
-    NestingDepth:
-        max_depth: 5
-
-    PseudoElement:
-        enabled: false
-
-    SelectorDepth:
-        enabled: false
-
-    # There is currently no de facto standard for selector format in Wagtail, due to:
-    # a) the conversion of django field/widget names to underscored class names
-    # b) the use of third party code such as Hallo.js which uses classes with snakeCaseClasses.
-    SelectorFormat:
-        convention: '.*'  # allow anything
-
-    PlaceholderInExtend:
-        enabled: false
-
-    PropertyCount:
-        enabled: false
-
-    QualifyingElement:
-        allow_element_with_attribute: true
-        allow_element_with_class: true
-        allow_element_with_id: false
-
-    Shorthand:
-        enabled: true
-
-    SingleLinePerProperty:
-        enabled: true
-        allow_single_line_rule_sets: true
-
-    SingleLinePerSelector:
-        enabled: true
-
-    SpaceAfterComma:
-        enabled: true
-
-    SpaceAfterPropertyColon:
-        style: at_least_one_space
-
-    SpaceAfterPropertyName:
-        enabled: true
-
-    SpaceBeforeBrace:
-        enabled: true
-        allow_single_line_padding: true
-        style: space
-
-    SpaceBetweenParens:
-        enabled: true
-
-    StringQuotes:
-        style: single_quotes
-
-    TrailingSemicolon:
-        enabled: true
-
-    TrailingZero:
-        enabled: true
-
-    UnnecessaryMantissa:
-        enabled: true
-
-    UnnecessaryParentReference:
-        enbabled: true
-
-    UrlFormat:
-        enabled: false
-
-    UrlQuotes:
-        enabled: true
-
-    VariableForProperty:
-        enabled: false
-
-    VendorPrefix:
-        enabled: false
-
-    ZeroUnit:
-        enabled: true

.stylelintrc.yaml

@@ -0,0 +1,56 @@
+ignoreFiles:
+  - node_modules
+plugins:
+  - stylelint-scss
+rules:
+  block-closing-brace-newline-after:
+    - always
+    - ignoreAtRules:
+      # Ignore @if … @else in SCSS.
+      - if
+      - else
+  block-no-empty: true
+  block-opening-brace-space-before: always
+  color-hex-case: lower
+  color-hex-length: short
+  color-named: never
+  color-no-invalid-hex: true
+  declaration-bang-space-after: never
+  declaration-bang-space-before: always
+  declaration-block-no-duplicate-properties: true
+  declaration-block-no-redundant-longhand-properties: true
+  declaration-block-single-line-max-declarations: 1
+  declaration-block-trailing-semicolon: always
+  declaration-colon-space-after: always
+  declaration-colon-space-before: never
+  declaration-property-value-blacklist:
+    - /^border/: [none]
+    - severity: error
+  function-comma-space-after: always
+  function-parentheses-space-inside: never
+  function-url-quotes: always
+  indentation:
+    - 4
+    - severity: warning
+  length-zero-no-unit: true
+  max-nesting-depth: 5
+  no-eol-whitespace: true
+  no-missing-end-of-source-newline: true
+  number-no-trailing-zeros: true
+  rule-empty-line-before:
+    - always
+    - except:
+      - after-single-line-comment
+      - first-nested
+  scss/at-import-no-partial-leading-underscore: true
+  scss/at-import-partial-extension-blacklist:
+    - scss
+  scss/at-else-empty-line-before: never
+  selector-no-qualifying-type:
+    - true
+    - ignore:
+      - attribute
+      - class
+  selector-list-comma-newline-after: always
+  selector-max-id: 0
+  string-quotes: single

CONTRIBUTORS.rst

@@ -252,6 +252,7 @@ Contributors
 * Emily Horsman
 * jcronyn
 * Ben Sturmfels
+* Anselm Bradford
 
 Translators
 ===========

Makefile

@@ -18,8 +18,8 @@ develop: clean-pyc
 lint:
 	flake8 wagtail
 	isort --check-only --diff --recursive wagtail
-	npm run lint:css
-	npm run lint:js
+	npm run lint:css --silent
+	npm run lint:js --silent
 
 test:
 	python runtests.py

circle.yml

@@ -5,7 +5,6 @@ machine:
 dependencies:
   pre:
     - pip install -e .[testing]
-    - gem install scss_lint
 
 test:
   override:

client/src/components/Explorer/Explorer.scss

@@ -1,5 +1,3 @@
-// scss-lint:disable DeclarationOrder
-
 $c-explorer-bg: #4c4e4d;
 $c-explorer-bg-dark: $color-grey-1;
 $c-explorer-bg-active: rgba(0, 0, 0, 0.425);

client/src/components/Explorer/ExplorerItem.scss

@@ -1,5 +1,3 @@
-// scss-lint:disable DeclarationOrder
-
 .c-explorer__item {
     display: flex;
     flex-flow: row nowrap;

client/src/components/Transition/Transition.scss

@@ -35,7 +35,6 @@ $c-transition-duration: 200ms;
 // =============================================================================
 // Pop transition
 // =============================================================================
-
 .c-transition-pop-enter {
     transform: translateX(-100%);
     transition: transform $c-transition-duration ease, opacity $c-transition-duration linear;

docs/contributing/css_guidelines.rst

@@ -8,7 +8,7 @@ Compiling
 
 The SCSS source files are compiled to CSS using the
 `gulp <http://gulpjs.com/>`_ build system.
-This requires `node.js <http://nodejs.org>`_ to run.
+This requires `Node.js <http://nodejs.org>`_ to run.
 To install the libraries required for compiling the SCSS,
 run the following from the Wagtail repository root:
 
@@ -35,22 +35,25 @@ automatically recompiling when any changes are observed, by running:
 Linting SCSS
 ~~~~~~~~~~~~
 
-Wagtail uses the "scss_lint" Ruby Gem for linting.
+Wagtail uses the `stylelint <https://github.com/stylelint/stylelint>`_ linter.
+You'll need Node.js and npm on your development machine.
+Ensure project dependencies are installed by running ``npm install``
 
-Install it thus:
+Run the linter from the wagtail project root:
 
 .. code-block:: console
 
-    $ gem install scss_lint
+    $ npm run lint:css
 
 
-Then run the linter from the wagtail project root:
+The linter is configured to check your code for adherance to the guidelines
+below, plus a little more.
 
-.. code-block:: console
+If you want to autofix errors, you can run that command directly with:
 
-    $ npm run lint:css
+.. code-block:: console
 
-The linter is configured to check your code for adherance to the guidelines below, plus a little more.
+    $ npm run lint:css -- --fix
 
 
 Spacing

package.json

@@ -60,6 +60,8 @@
     "react-addons-perf": "^15.4.2",
     "react-test-renderer": "^15.5.4",
     "redux-mock-store": "^1.2.2",
+    "stylelint": "^8.0.0",
+    "stylelint-scss": "^2.0.1",
     "webpack": "^2.6.1"
   },
   "dependencies": {
@@ -82,7 +84,7 @@
     "watch": "webpack --config ./client/webpack/dev.config.js & gulp watch",
     "start": "npm run watch",
     "lint:js": "eslint --max-warnings 16 ./client",
-    "lint:css": "scss-lint",
+    "lint:css": "stylelint **/*.scss",
     "lint": "npm run lint:js",
     "test": "npm run test:unit",
     "test:unit": "jest",

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

@@ -1,7 +1,9 @@
+// stylelint-disable-next-line selector-max-id
 #id_parent_page li {
     margin: 15px 0;
 }
 
+// stylelint-disable-next-line selector-max-id
 #id_parent_page li label {
     float: none;
 }

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

@@ -10,7 +10,6 @@
 }
 
 .listing {
-
     td,
     th {
         vertical-align: top;
@@ -118,7 +117,7 @@
         float: left;
         margin: 0 15px 15px 0;
         width: 50px;
-   }
+    }
 }
 
 

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

@@ -107,8 +107,8 @@
     @font-face {
         font-family: '#{$fontname}';
         src: url('#{$font-root}#{$filestub}.woff2') format('woff2'),
-           url('#{$font-root}#{$filestub}.woff') format('woff'),
-           url('#{$font-root}#{$filestub}.ttf') format('truetype');
+            url('#{$font-root}#{$filestub}.woff') format('woff'),
+            url('#{$font-root}#{$filestub}.ttf') format('truetype');
         font-weight: $weight;
         font-style: $style;
     }

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

@@ -191,6 +191,7 @@
             overflow-y: hidden;
 
             &.xdsoft_monthselect {right: -7px;}
+
             &.xdsoft_yearselect {right: 2px;}
 
             > div > .xdsoft_option:hover {
@@ -298,7 +299,9 @@
 }
 
 .xdsoft_noselect::selection { background: transparent; }
+
 .xdsoft_noselect::-moz-selection { background: transparent; }
+
 .xdsoft_datetimepicker.xdsoft_inline {
     display: inline-block;
     position: static;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_dropdowns.scss

@@ -155,7 +155,6 @@
     }
 
     // Styles for dropdowns which are also buttons e.g page editor
-
     &.dropdown-button {
         .dropdown-toggle {
             border-radius: 0 3px 3px 0;
@@ -235,7 +234,6 @@
 
 // .c-dropdown {
 // }
-
 .o-icon {
     display: inline-block;
     vertical-align: middle;
@@ -300,7 +298,6 @@
 // =============================================================================
 //  Arrows
 // =============================================================================
-
 .u-arrow:before {
     content: '';
     border: solid .35rem transparent;
@@ -320,7 +317,6 @@
 // .t-default {
 
 // }
-
 .t-default .u-btn-current {
     border-color: rgba(0, 0, 0, 0.15);
     color: #43b1b0;
@@ -358,7 +354,6 @@
 // =============================================================================
 // Dark theme
 // =============================================================================
-
 .t-dark .u-link {
     color: #fff;
 }
@@ -388,7 +383,6 @@
 // =============================================================================
 // Light theme
 // =============================================================================
-
 .t-light .u-link {
     color: #333;
 }
@@ -409,7 +403,6 @@
 // =============================================================================
 // States
 // =============================================================================
-
 .u-toggle {
     display: none;
 }

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

@@ -1,7 +1,6 @@
 // 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,
 
@@ -338,7 +337,7 @@ input[type=checkbox]:checked:before {
     // + input[type=reset],
     // + input[type=button],
     + .button {
-    // + button {
+        // + button {
         margin-left: 1em;
     }
 
@@ -488,107 +487,107 @@ input[type=checkbox]:checked:before {
     font-size: 0.95em;
 }
 
-    .button-secondary {
-        color: $color-button;
-        background-color: transparent;
-    }
+.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;
+// 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;
-        }
+    &:before {
+        line-height: 1.7em;
     }
+}
 
-    .button-neutral {
-        color: $color-grey-2;
+.button-neutral {
+    color: $color-grey-2;
 
-        &:hover {
-            color: $color-teal;
-        }
+    &: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;
-        }
+.yes {
+    background-color: $color-button-yes;
+    border: 1px solid $color-button-yes;
 
-        &:hover {
-            color: $color-white;
-            border-color: transparent;
-            background-color: $color-button-yes-hover;
-        }
+    &.button-secondary {
+        border: 1px solid $color-button-yes;
+        color: $color-button-yes;
+        background-color: transparent;
+    }
 
-        &.button-nobg:hover {
-            color: $color-button-yes;
-            background-color: transparent;
-        }
+    &:hover {
+        color: $color-white;
+        border-color: transparent;
+        background-color: $color-button-yes-hover;
     }
 
-    .no,
-    .serious {
-        background-color: $color-button-no;
-        border: 1px solid $color-button-no;
+    &.button-nobg:hover {
+        color: $color-button-yes;
+        background-color: transparent;
+    }
+}
 
-        &.button-secondary {
-            border: 1px solid $color-button-no;
-            color: $color-button-no;
-            background-color: transparent;
-        }
+.no,
+.serious {
+    background-color: $color-button-no;
+    border: 1px solid $color-button-no;
 
-        &:hover {
-            color: $color-white;
-            border-color: transparent;
-            background-color: $color-button-no-hover;
-        }
+    &.button-secondary {
+        border: 1px solid $color-button-no;
+        color: $color-button-no;
+        background-color: transparent;
+    }
 
-        &.button-nobg:hover {
-            color: $color-button-no;
-            background-color: transparent;
-        }
+    &:hover {
+        color: $color-white;
+        border-color: transparent;
+        background-color: $color-button-no-hover;
     }
 
-    .button-nobg {
-        border: 0;
+    &.button-nobg:hover {
+        color: $color-button-no;
         background-color: transparent;
     }
+}
 
-    .bicolor {
-        border: 0;
-        padding-left: 3.5em;
+.button-nobg {
+    border: 0;
+    background-color: transparent;
+}
 
-        &: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;
-        }
+.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;
+.button-small.bicolor {
+    padding-left: 3.5em;
 
-        &:before {
-            width: 2em;
-            font-size: 0.8rem;
-            line-height: 1.65em;
-        }
+    &:before {
+        width: 2em;
+        font-size: 0.8rem;
+        line-height: 1.65em;
     }
+}
 
 
 a.button {
@@ -776,7 +775,6 @@ li.focused > .help {
 
 // This is expected to go on the parent of the input/select/textarea
 // so in most cases .input
-
 .iconfield, // generic
 .date_field,
 .time_field,
@@ -889,7 +887,6 @@ li.focused > .help {
 }
 
 // field sizing and alignment
-
 .field-small {
     input,
     textarea,
@@ -944,7 +941,6 @@ li.inline:first-child {
 // 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();
@@ -994,6 +990,7 @@ li.inline:first-child {
     // ...unless the .page-chooser has the 'blank' class set
     &.blank {
         .chosen { display: none; }
+
         .unchosen { display: block; }
     }
 }

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_header.scss

@@ -29,7 +29,7 @@ header {
     .col {
         float: left;
         margin-right: 2em;
-        }
+    }
 
     .left {
         float: left;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_icons.scss

@@ -51,7 +51,6 @@
 // =============================================================================
 // Custom config for various icons
 // =============================================================================
-
 .icon-download {
     // Credit: Icon made by Freepik from Flaticon.com
 }

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_indicator.scss

@@ -23,8 +23,6 @@ $c-indicator-margin: .25rem;
 // =============================================================================
 // States
 // =============================================================================
-
-
 .is-absent .c-indicator {
     background: $color-state-absent;
 }

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_listing.scss

@@ -1,5 +1,4 @@
 // General listings, like for pages, images or snippets
-
 ul.listing {
     @include unlist();
 }
@@ -524,7 +523,6 @@ table.listing {
 
 
 // listing filters
-
 .listing-filter {
     @include clearfix();
     background-color: $color-grey-5;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss

@@ -438,7 +438,7 @@ body.explorer-open {
 
 // Media query hacks to detect IE10+ which doesn't support 3d transform of static elements and needs a fallback
 @media all and (-ms-high-contrast: none),
-       all and (-ms-high-contrast: active) {
+    all and (-ms-high-contrast: active) {
     .wrapper {
         @include transition(left 0.2s ease);
         left: 0;
@@ -465,7 +465,7 @@ body.explorer-open {
 }
 
 @media all and (min-width: $breakpoint-mobile) and (-ms-high-contrast: none),
-       all and (min-width: $breakpoint-mobile) and (-ms-high-contrast: active) {
+    all and (min-width: $breakpoint-mobile) and (-ms-high-contrast: active) {
     body.explorer-open {
         .wrapper {
             left: 0;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_messages.scss

@@ -2,7 +2,6 @@
 // for display on the next page visited. These appear as an animated banner at the top of the page.
 //
 // For inline help text, see typography.scss
-
 .messages {
     position: relative;
     z-index: 5;
@@ -21,10 +20,7 @@
 
     > ul > li {
         // @include nice-padding;
-        padding-top: 1.6em;
-        padding-right: 3em;
-        padding-bottom: 1.6em;
-        padding-left: 1.6em;
+        padding: 1.6em 3em 1.6em 1.6em;
         color: $color-white;
     }
 

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_modals.scss

@@ -79,6 +79,7 @@ $zindex-modal-background: 500;
 
     // Fade for backdrop
     &.fade { opacity: 0; }
+
     &.in { opacity: 0.5; }
 }
 

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_tooltips.scss

@@ -1,5 +1,4 @@
 // From Bootstrap v3.0.0
-
 .tooltip {
     position: absolute;
     z-index: 1030;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_typography.scss

@@ -95,7 +95,6 @@ dd {
 }
 
 // Help text formatters
-
 .help-block {
     padding: 1em;
     margin: 1em 0;
@@ -115,48 +114,48 @@ dd {
     }
 }
 
-    .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,
+.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%);
+.help-info {
+    background-color: lighten($color-blue, 30%);
 
-        &:before {
-            color: $color-blue;
-        }
+    &:before {
+        color: $color-blue;
     }
+}
 
-    .help-warning {
-        background-color: lighten($color-orange, 30%);
+.help-warning {
+    background-color: lighten($color-orange, 30%);
 
-        &:before {
-            color: $color-orange;
-            content: '!';
-        }
+    &:before {
+        color: $color-orange;
+        content: '!';
     }
+}
 
-    .help-critical {
-        background-color: lighten($color-red, 40%);
+.help-critical {
+    background-color: lighten($color-red, 40%);
 
-        &:before {
-            color: $color-red;
-            content: '!';
-        }
+    &:before {
+        color: $color-red;
+        content: '!';
     }
+}
 
 .u-para {
     margin-bottom: 1rem;

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

@@ -105,7 +105,6 @@ body {
 }
 
 .page-locked {
-
     .tab-content {
         cursor: not-allowed;
         user-select: none;
@@ -300,9 +299,8 @@ footer {
 // the z-index shouldn't be required.
 
 // .content-wrapper {
-    // z-index: 3;
+// z-index: 3;
 // }
-
 .nav-submenu {
     z-index: 6;
 }

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

@@ -49,82 +49,79 @@ form {
     }
 }
 
-    label {
-        width: auto;
-        color: $color-white;
-    }
-
-    .button {
-        font-size: 1.5em;
-        padding: 1.1em 2.4em;
-        height: 3.5em;
-    }
-
-    input[type=checkbox]:before {
-        background-color: #333;
-        color: #555;
-        border: 1px solid #555;
-    }
-
-    .fields {
-        max-width: none;
-    }
-
-        .fields li {
-            padding: 1em 0;
+label {
+    width: auto;
+    color: $color-white;
+}
 
-            &.full {
-                position: relative;
-                padding: 0;
+.button {
+    font-size: 1.5em;
+    padding: 1.1em 2.4em;
+    height: 3.5em;
+}
 
-                label {
-                    display: none;
-                }
+input[type=checkbox]:before {
+    background-color: #333;
+    color: #555;
+    border: 1px solid #555;
+}
 
-                input {
-                    border-top: 1px dashed $color-input-border;
-                }
-            }
+.fields {
+    max-width: none;
+}
 
-            &:first-child input {
-                border: 0;
-            }
-        }
+.fields li {
+    padding: 1em 0;
 
-        .fields .checkbox {
-            padding-top: 2em;
-            padding-bottom: 2em;
-        }
+    &.full {
+        position: relative;
+        padding: 0;
 
-        .field {
-            padding: 0;
+        label {
+            display: none;
         }
 
-        .iconfield .input:before {
-            display: none;
+        input {
+            border-top: 1px dashed $color-input-border;
         }
+    }
 
-    // Special full-width, one-off fields i.e a single text or textarea input
-    .full input {
-        border-radius: 0;
-        padding-left: $mobile-nice-padding;
-        padding-right: $mobile-nice-padding;
-        font-weight: 300;
+    &:first-child input {
         border: 0;
-        padding-top: 1.5em;
-        padding-bottom: 1.5em;
-        font-size: 1.6em;
-        line-height: 1.6em;
     }
+}
 
-    .help {
-        opacity: 1;
-        position: absolute;
-        font-size: 1.3em;
-        top: 50%;
-        margin-top: -0.5em;
-        right: 5%;
-    }
+.fields .checkbox {
+    padding-top: 2em;
+    padding-bottom: 2em;
+}
+
+.field {
+    padding: 0;
+}
+
+.iconfield .input:before {
+    display: none;
+}
+
+// Special full-width, one-off fields i.e a single text or textarea input
+.full input {
+    border-radius: 0;
+    font-weight: 300;
+    border: 0;
+    padding: 1.5em $mobile-nice-padding 1.5em $mobile-nice-padding;
+    font-size: 1.6em;
+    line-height: 1.6em;
+}
+
+.help {
+    opacity: 1;
+    position: absolute;
+    font-size: 1.3em;
+    top: 50%;
+    margin-top: -0.5em;
+    right: 5%;
+}
 
 .messages {
     margin: 1em 0;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/panels/rich-text.scss

@@ -108,7 +108,6 @@
     // Set some reasonable default heading styles. These can be overridden in site-specific custom CSS
     // to make them better reflect their appearance on the front-end (however, it's arguably better for editors
     // NOT to be thinking about a specific visual appearance when they choose heading levels...)
-
     h1,
     h2,
     h3,
@@ -154,11 +153,8 @@
     // Wagtail installations that define their own image formats (in a myapp.image_formats module)
     // should ideally use the insert_editor_css hook to pass in their own custom CSS to have those
     // images render within the rich text area in the same styles that would appear on the front-end.
-
-
     .richtext-image {
         margin-top: 3px; // close as possible to match line-height space above p
-
         img {
             width: 100%;
         }

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

@@ -80,7 +80,6 @@ $positions: (
 // =============================================================================
 // Wagtail userbar proper
 // =============================================================================
-
 .#{$namespace}-userbar-reset {
     all: initial;
 }
@@ -107,163 +106,163 @@ $positions: (
 }
 
 
-    .#{$namespace}-userbar-trigger {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: $size-home-button;
-        height: $size-home-button;
-        margin: 0 !important;
-        overflow: hidden;
-        background-color: $color-white;
-        border-radius: 50%;
-        color: $color-black;
-        padding: 0 !important;
-        cursor: pointer;
-        box-shadow: $box-shadow-props, 0 1px 10px 0 rgba(107, 214, 230, .7);
-        transition: all 0.2s ease-in-out;
-        font-size: 16px;
-        text-decoration: none !important;
-        position: relative;
-
-        .#{$namespace}-userbar.touch.is-active &,
-        .#{$namespace}-userbar.no-touch &:hover {
-            box-shadow: $box-shadow-props, 0 3px 15px 0 rgba(107, 214, 230, .95);
-        }
-
-        .#{$namespace}-userbar-help-text {
-            position: absolute;
-            top: 100%;
-            left: 0;
-        }
-
-        &.#{$namespace}-icon:before {
-            transition: color .2s ease;
-            font-size: 32px;
-            width: auto;
-            margin: 0;
-        }
+.#{$namespace}-userbar-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $size-home-button;
+    height: $size-home-button;
+    margin: 0 !important;
+    overflow: hidden;
+    background-color: $color-white;
+    border-radius: 50%;
+    color: $color-black;
+    padding: 0 !important;
+    cursor: pointer;
+    box-shadow: $box-shadow-props, 0 1px 10px 0 rgba(107, 214, 230, .7);
+    transition: all 0.2s ease-in-out;
+    font-size: 16px;
+    text-decoration: none !important;
+    position: relative;
+
+    .#{$namespace}-userbar.touch.is-active &,
+    .#{$namespace}-userbar.no-touch &:hover {
+        box-shadow: $box-shadow-props, 0 3px 15px 0 rgba(107, 214, 230, .95);
     }
 
-    .#{$namespace}-userbar-items {
-        display: block;
-        list-style: none;
+    .#{$namespace}-userbar-help-text {
         position: absolute;
+        top: 100%;
+        left: 0;
+    }
+
+    &.#{$namespace}-icon:before {
+        transition: color .2s ease;
+        font-size: 32px;
+        width: auto;
         margin: 0;
-        min-width: 210px;
-        visibility: hidden;
-        font-family: 'Open Sans', sans-serif;
-        font-size: 14px;
-        box-sizing: border-box;
-        padding-left: 0;
-        text-decoration: none;
-
-        .#{$namespace}-userbar.is-active & {
-            visibility: visible;
-        }
     }
+}
 
-    // Arrow
-    .#{$namespace}-userbar-items:after {
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        opacity: 0;
-        border: solid $width-arrow transparent;
-        transition-duration: .15s;
-        transition-timing-function: cubic-bezier(.55, 0, .1, 1);
-
-        .#{$namespace}-userbar.is-active & {
-            opacity: 1;
-            transform: translateY(0);
-            transition-delay: .3s;
-        }
+.#{$namespace}-userbar-items {
+    display: block;
+    list-style: none;
+    position: absolute;
+    margin: 0;
+    min-width: 210px;
+    visibility: hidden;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    box-sizing: border-box;
+    padding-left: 0;
+    text-decoration: none;
+
+    .#{$namespace}-userbar.is-active & {
+        visibility: visible;
     }
+}
 
+// Arrow
+.#{$namespace}-userbar-items:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    border: solid $width-arrow transparent;
+    transition-duration: .15s;
+    transition-timing-function: cubic-bezier(.55, 0, .1, 1);
+
+    .#{$namespace}-userbar.is-active & {
+        opacity: 1;
+        transform: translateY(0);
+        transition-delay: .3s;
+    }
+}
 
-    .#{$namespace}-userbar-nav {
-        background: transparent !important;
-        padding: 0;
-        margin: 0 !important;
-        display: block !important;
 
-        .#{$namespace}-action {
+.#{$namespace}-userbar-nav {
+    background: transparent !important;
+    padding: 0;
+    margin: 0 !important;
+    display: block !important;
 
-            background: transparent;
-        }
+    .#{$namespace}-action {
+
+        background: transparent;
     }
+}
 
 
 
-    .#{$namespace}-userbar__item {
-        margin: 0;
-        background-color: $color-grey-1;
-        opacity: 0;
-        overflow: hidden;
-        transition-duration: .125s;
-        transition-timing-function: cubic-bezier(.55, 0, .1, 1);
-        font-family: 'Open Sans', sans-serif;
-        font-size: 16px !important;
-        text-decoration: none !important;
+.#{$namespace}-userbar__item {
+    margin: 0;
+    background-color: $color-grey-1;
+    opacity: 0;
+    overflow: hidden;
+    transition-duration: .125s;
+    transition-timing-function: cubic-bezier(.55, 0, .1, 1);
+    font-family: 'Open Sans', sans-serif;
+    font-size: 16px !important;
+    text-decoration: none !important;
+
+    &:first-child {
+        border-top-left-radius: $userbar-radius;
+        border-top-right-radius: $userbar-radius;
+    }
 
-        &:first-child {
-            border-top-left-radius: $userbar-radius;
-            border-top-right-radius: $userbar-radius;
-        }
+    &:last-child {
+        border-bottom-right-radius: $userbar-radius;
+        border-bottom-left-radius: $userbar-radius;
+    }
 
-        &:last-child {
-            border-bottom-right-radius: $userbar-radius;
-            border-bottom-left-radius: $userbar-radius;
-        }
+    & + & {
+        border-top: 1px solid darken($color-grey-1, 3%);
+    }
 
-        & + & {
-            border-top: 1px solid darken($color-grey-1, 3%);
-        }
 
+    a,
+    .#{$namespace}-action {
+        color: #aaa;
+        display: block;
+        text-decoration: none !important;
+        transform: none !important;
+        transition: none !important;
+        margin: 0 !important;
+        font-size: 14px !important;
 
-        a,
-        .#{$namespace}-action {
-            color: #aaa;
-            display: block;
-            text-decoration: none !important;
-            transform: none !important;
-            transition: none !important;
-            margin: 0 !important;
-            font-size: 14px !important;
-
-            &:hover,
-            &:focus {
-                outline: none;
-                color: $color-white;
-                background-color: rgba(100, 100, 100, 0.15);
-            }
+        &:hover,
+        &:focus {
+            outline: none;
+            color: $color-white;
+            background-color: rgba(100, 100, 100, 0.15);
         }
+    }
 
-        .#{$namespace}-icon {
-            position: relative;
+    .#{$namespace}-icon {
+        position: relative;
 
-            &:before {
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                left: 14px;
-            }
+        &:before {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            left: 14px;
         }
+    }
 
-        a,
-        input {
-            font-size: 14px !important;
-            text-align: left;
-            padding: 0.8em 1.7em 0.8em 2.7em;
-        }
+    a,
+    input {
+        font-size: 14px !important;
+        text-align: left;
+        padding: 0.8em 1.7em 0.8em 2.7em;
+    }
 
-        input {
-            border: 0;
-            background: none;
-            width: 100%;
-        }
+    input {
+        border: 0;
+        background: none;
+        width: 100%;
     }
+}
 
 
 
@@ -288,12 +287,9 @@ $positions: (
         }
 
         .#{$namespace}-userbar-nav .#{$namespace}-userbar__item {
-            // Yes, we could use an @else, but there's a bug in scss-lint.
             @if $vertical == 'bottom' {
                 transform: translateY(1em);
-            }
-
-            @if $vertical == 'top' {
+            } @else {
                 transform: translateY(-1em);
             }
         }
@@ -336,7 +332,6 @@ $positions: (
 // =============================================================================
 
 // Active state for the list items comes last.
-
 .#{$namespace}-userbar.is-active .#{$namespace}-userbar__item {
     transform: translateY(0);
     opacity: 1;