From fc980bd103f517fec1b2872a80b124920a3c4ff0 Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Fri, 25 Sep 2015 17:14:46 +0100 Subject: [PATCH] updated npm packages. ongoing linting of scss files --- .scss-lint.yml | 15 +- docs/contributing/css_guidelines.rst | 16 + gulpfile.js/tasks/styles.js | 2 +- package.json | 6 +- .../wagtailstyleguide/scss/styleguide.scss | 10 +- .../scss/components/datetimepicker.scss | 529 +++++++++--------- .../scss/components/dropdowns.scss | 2 +- .../scss/components/explorer.scss | 6 +- .../scss/components/formatters.scss | 10 +- .../wagtailadmin/scss/components/forms.scss | 38 +- .../wagtailadmin/scss/components/icons.scss | 166 +++--- .../wagtailadmin/scss/components/listing.scss | 2 +- .../scss/components/main-nav.scss | 18 +- .../scss/components/messages.scss | 8 +- .../wagtailadmin/scss/components/modals.scss | 4 +- .../scss/components/streamfield.scss | 2 +- .../wagtailadmin/scss/components/tabs.scss | 2 +- .../scss/components/typography.scss | 8 +- .../static_src/wagtailadmin/scss/core.scss | 46 +- .../static_src/wagtailadmin/scss/fonts.scss | 16 +- .../wagtailadmin/scss/layouts/home.scss | 6 +- .../wagtailadmin/scss/layouts/login.scss | 12 +- .../scss/layouts/page-editor.scss | 24 +- .../wagtailadmin/scss/layouts/preview.scss | 14 +- .../static_src/wagtailadmin/scss/mixins.scss | 2 +- .../wagtailadmin/scss/panels/rich-text.scss | 6 +- .../static_src/wagtailadmin/scss/userbar.scss | 8 +- .../wagtailadmin/scss/userbar_embed.scss | 6 +- .../wagtailadmin/scss/variables.scss | 4 +- .../wagtailimages/scss/add-multiple.scss | 23 +- .../scss/focal-point-chooser.scss | 4 +- 31 files changed, 521 insertions(+), 494 deletions(-) diff --git a/.scss-lint.yml b/.scss-lint.yml index 0079b56052..8963aeec56 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -1,8 +1,8 @@ # Useful regexes to fix lint errors -# search "([^\ ])\{" replace "$1 {" -# search "([^\&]):([^\ \n]*);" replace "$1: $2;" +# SpaceBeforeBrace: search "([^\ ])\{" replace "$1 {" +# SpaceAfterPropertyColon: search "([^\&]):([^\ \n]*);" replace "$1: $2;" -scss_files: 'wagtail/wagtailadmin/static_src/**/*.scss' +scss_files: 'wagtail/**/static_src/**/scss/**/*.scss' linters: BorderZero: @@ -24,6 +24,9 @@ linters: space_before_bang: true space_after_bang: false + PropertySortOrder: + enabled: false + Comment: enabled: true @@ -31,7 +34,7 @@ linters: enabled: true DuplicateProperty: - enabled: false + enabled: true ElsePlacement: enabled: true @@ -64,7 +67,7 @@ linters: enabled: true LeadingZero: - style: exclude_zero + enabled: false MergeableSelector: enabled: false @@ -84,6 +87,8 @@ linters: - js_class ignored_types: - element + exclude: + - '**/datetimepicker.scss' PlaceholderInExtend: enabled: true diff --git a/docs/contributing/css_guidelines.rst b/docs/contributing/css_guidelines.rst index 6c66b31aee..85b4707ad7 100644 --- a/docs/contributing/css_guidelines.rst +++ b/docs/contributing/css_guidelines.rst @@ -23,6 +23,22 @@ automatically recompiling when any changes are observed, by running: $ npm start + +Linting SCSS +~~~~~~~~~~~~ + +The guidelines are included in a ``.scss-lint.yml`` file so that you can +check that your code conforms to the style guide. + +Run the linter with ``scss-lint`` from the wagtail project root. +You'll need to have the linter installed to do this. You can get it by +running: + +.. code-block:: bash + + gem install scss-lint + + Spacing ~~~~~~~ diff --git a/gulpfile.js/tasks/styles.js b/gulpfile.js/tasks/styles.js index 6ea893d26f..b5eeef15a5 100644 --- a/gulpfile.js/tasks/styles.js +++ b/gulpfile.js/tasks/styles.js @@ -45,5 +45,5 @@ gulp.task('styles:sass', function () { ) .replace('/scss/', '/css/'); })) - .on('error', gutil.log); + // .on('error', gutil.log); }); diff --git a/package.json b/package.json index b07e66cc65..0de3fa4993 100644 --- a/package.json +++ b/package.json @@ -14,10 +14,10 @@ "browserify": "~3.46.1", "browserify-shim": "~3.4.1", "gulp": "~3.8.11", - "gulp-autoprefixer": "~1.0.1", + "gulp-autoprefixer": "~3.0.2", "gulp-rename": "^1.2.2", - "gulp-sass": "~2.0.0", - "gulp-sourcemaps": "~1.2.2", + "gulp-sass": "~2.0.4", + "gulp-sourcemaps": "~1.5.2", "gulp-util": "~2.2.14", "jscs": "^1.12.0", "require-dir": "^0.3.0" diff --git a/wagtail/contrib/wagtailstyleguide/static_src/wagtailstyleguide/scss/styleguide.scss b/wagtail/contrib/wagtailstyleguide/static_src/wagtailstyleguide/scss/styleguide.scss index 7358a232fe..5c0a7d6042 100644 --- a/wagtail/contrib/wagtailstyleguide/static_src/wagtailstyleguide/scss/styleguide.scss +++ b/wagtail/contrib/wagtailstyleguide/static_src/wagtailstyleguide/scss/styleguide.scss @@ -1,13 +1,13 @@ -@import "wagtailadmin/scss/variables.scss"; -@import "wagtailadmin/scss/mixins.scss"; -@import "wagtailadmin/scss/grid.scss"; +@import 'wagtailadmin/scss/variables.scss'; +@import 'wagtailadmin/scss/mixins.scss'; +@import 'wagtailadmin/scss/grid.scss'; section { border-top: 1px solid $color-grey-3; margin-top: 2em; padding: 0 0 2em 0; - > h2: first-child { + > h2:first-child { margin: 0; font-size: 1em; background: $color-grey-4; @@ -95,7 +95,7 @@ section { .spinner { position: relative; } - .icon-spinner: after { + .icon-spinner:after { position: absolute; } } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/datetimepicker.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/datetimepicker.scss index a1517dd7dd..5ec2a7246e 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/datetimepicker.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/datetimepicker.scss @@ -1,304 +1,307 @@ .xdsoft_datetimepicker { - box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.4); - background: #FFFFFF; - border: 1px solid darken($color-input-focus, 40%); - display: block; - padding: 8px; - padding-left: 0px; - padding-top: 2px; - position: absolute; - z-index: 5; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: none; + box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.4); + background: #FFFFFF; + border: 1px solid darken($color-input-focus, 40%); + display: block; + padding: 8px; + padding-left: 0; + padding-top: 2px; + position: absolute; + z-index: 1; + -moz-box-sizing: border-box; + box-sizing: border-box; + display: none; - * { - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 0px; - margin: 0px; - } + * { + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0; + margin: 0; + } - iframe { - position: absolute; - left: 0; - top: 0; - width: 75px; - height: 210px; - background: transparent; - border: none; - } + iframe { + position: absolute; + left: 0; + top: 0; + width: 75px; + height: 210px; + background: transparent; + border: none; + } - .xdsoft_datepicker, .xdsoft_timepicker { - display: none; + .xdsoft_datepicker, .xdsoft_timepicker { + display: none; - &.active { - display: block; - } - } - .xdsoft_datepicker { - float: left; - margin-left: 8px; - } - .xdsoft_datepicker.active + .xdsoft_timepicker { - margin-top: 8px; - margin-bottom: 3px - } - .xdsoft_mounthpicker { - position: relative; - text-align: center; - } + &.active { + display: block; + } + } - .xdsoft_next, .xdsoft_prev, .xdsoft_today_button { - background-color: transparent; - cursor: pointer; - display: block; - border: 0; - overflow: hidden; - padding: 5px 0px; - position: relative; - white-space: nowrap; - width: 2em; - color: $color-teal; - text-transform: none; - text-align: center; + .xdsoft_datepicker { + float: left; + margin-left: 8px; + } - &:before { - font-size: 1.5em; - font-family: wagtail; - width: 1em; - line-height: 1.3em; - text-align: center; - margin: 0; - } - &:hover { - color: $color-teal-darker; - } - } - .xdsoft_prev { - float: left; + .xdsoft_datepicker.active + .xdsoft_timepicker { + margin-top: 8px; + margin-bottom: 3px + } - &:before { - content: "z"; - } - } - .xdsoft_today_button { - float: left; - margin-left: 5px; + .xdsoft_mounthpicker { + position: relative; + text-align: center; + } - &:before { - content: "W"; - } - } + .xdsoft_next, .xdsoft_prev, .xdsoft_today_button { + background-color: transparent; + cursor: pointer; + display: block; + border: 0; + overflow: hidden; + padding: 5px 0; + position: relative; + white-space: nowrap; + width: 2em; + color: $color-teal; + text-transform: none; + text-align: center; - .xdsoft_next { - float: right; + &:before { + font-size: 1.5em; + font-family: wagtail; + width: 1em; + line-height: 1.3em; + text-align: center; + margin: 0; + } + &:hover { + color: $color-teal-darker; + } + } + .xdsoft_prev { + float: left; - &:before { - content: "n"; - } - } + &:before { + content: 'z'; + } + } + .xdsoft_today_button { + float: left; + margin-left: 5px; - .xdsoft_timepicker { - width: 70px; - float: left; - text-align: center; - margin-left: 8px; - margin-top: 0px; + &:before { + content: 'W'; + } + } - .xdsoft_prev, - .xdsoft_next { - float: none; - height: 1.5em; - display: block; - text-align: center; - width: 100%; - padding: 0; + .xdsoft_next { + float: right; - &:before { - width: 100%; - } - } + &:before { + content: 'n'; + } + } - .xdsoft_prev:before { - content: "e"; - } + .xdsoft_timepicker { + width: 70px; + float: left; + text-align: center; + margin-left: 8px; + margin-top: 0; - .xdsoft_next:before { - content: "q"; - } + .xdsoft_prev, + .xdsoft_next { + float: none; + height: 1.5em; + display: block; + text-align: center; + width: 100%; + padding: 0; - .xdsoft_time_box { - position: relative; - border: 1px solid #ccc; - height: 170px; - overflow: hidden; - border-bottom: 1px solid #DDDDDD; + &:before { + width: 100%; + } + } - > div > div { - background: #F5F5F5; - border-top: 1px solid #DDDDDD; - color: #666666; - font-size: 1em; - text-align: center; - border-collapse: collapse; - cursor: pointer; - border-bottom-width: 0px; - height: 2.3em; - line-height: 2.3em; + .xdsoft_prev:before { + content: 'e'; + } - &:first-child { - border-top-width: 0px; - } - } - } - } + .xdsoft_next:before { + content: 'q'; + } - .xdsoft_label { - display: inline; - position: relative; - z-index: 9999; - margin: 0; - padding: 5px 3px; - font-size: 14px; - line-height: 20px; - font-weight: bold; - background-color: #fff; - float: left; - width: 182px; - text-align: center; - cursor: pointer; + .xdsoft_time_box { + position: relative; + border: 1px solid #ccc; + height: 170px; + overflow: hidden; + border-bottom: 1px solid #DDDDDD; - &:hover { - text-decoration: underline; - } + > div > div { + background: #F5F5F5; + border-top: 1px solid #DDDDDD; + color: #666666; + font-size: 1em; + text-align: center; + border-collapse: collapse; + cursor: pointer; + border-bottom-width: 0; + height: 2.3em; + line-height: 2.3em; - > .xdsoft_select { - border: 1px solid #ccc; - position: absolute; - display: block; - right: 0px; - top: 30px; - z-index: 101; - display: none; - background: #fff; - max-height: 160px; - overflow-y: hidden; + &:first-child { + border-top-width: 0; + } + } + } + } - &.xdsoft_monthselect {right: -7px;} - &.xdsoft_yearselect {right: 2px;} + .xdsoft_label { + display: inline; + position: relative; + z-index: 9999; + margin: 0; + padding: 5px 3px; + font-size: 14px; + line-height: 20px; + font-weight: bold; + background-color: #fff; + float: left; + width: 182px; + text-align: center; + cursor: pointer; - > div > .xdsoft_option:hover { - color: #fff; - background: #ff8000; - } - > div > .xdsoft_option { - padding: 2px 15px 2px 5px; - } - > div > .xdsoft_option.xdsoft_current { - background: #33AAFF; - color: #fff; - font-weight: 700; - } - } + &:hover { + text-decoration: underline; + } - } + > .xdsoft_select { + border: 1px solid #ccc; + position: absolute; + display: block; + right: 0; + top: 30px; + z-index: 101; + display: none; + background: #fff; + max-height: 160px; + overflow-y: hidden; - .xdsoft_month { - width: 90px; - text-align: right; - } - .xdsoft_year { - width: 56px; - } - .xdsoft_calendar { - clear: both; + &.xdsoft_monthselect {right: -7px;} + &.xdsoft_yearselect {right: 2px;} - table { - border-collapse: collapse; - } - td > div { - padding-right: 5px; - } - td, th { - width: 14.285%; - border: 1px solid #DDDDDD; - color: #666666; - font-size: 12px; - text-align: right; - padding: 5px 7px; - border-collapse: collapse; - cursor: pointer; - height: 25px; - } - td { - background-color: white; - } - th { - background: #F1F1F1; - font-weight: 700; - font-size: 0.85em; - text-align: center; - cursor: default; - } - } + > div > .xdsoft_option:hover { + color: #fff; + background: #ff8000; + } + > div > .xdsoft_option { + padding: 2px 15px 2px 5px; + } + > div > .xdsoft_option.xdsoft_current { + background: #33AAFF; + color: #fff; + font-weight: 700; + } + } - .xdsoft_calendar td.xdsoft_default, - .xdsoft_calendar td.xdsoft_current, - .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { - background: $color-salmon; - color: #fff; - font-weight: 700; - } - .xdsoft_calendar td.xdsoft_other_month, - .xdsoft_calendar td.xdsoft_disabled, - .xdsoft_time_box > div > div.xdsoft_disabled { - opacity: 0.5; - background: $color-grey-3; - } + } - .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled { - opacity: 0.2; - } - .xdsoft_calendar td:hover, - .xdsoft_timepicker .xdsoft_time_box > div > div:hover { - color: #fff; - background: $color-teal; - } + .xdsoft_month { + width: 90px; + text-align: right; + } + .xdsoft_year { + width: 56px; + } + .xdsoft_calendar { + clear: both; + + table { + border-collapse: collapse; + } + td > div { + padding-right: 5px; + } + td, th { + width: 14.285%; + border: 1px solid #DDDDDD; + color: #666666; + font-size: 12px; + text-align: right; + padding: 5px 7px; + border-collapse: collapse; + cursor: pointer; + height: 25px; + } + td { + background-color: white; + } + th { + background: #F1F1F1; + font-weight: 700; + font-size: 0.85em; + text-align: center; + cursor: default; + } + } + + .xdsoft_calendar td.xdsoft_default, + .xdsoft_calendar td.xdsoft_current, + .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { + background: $color-salmon; + color: #fff; + font-weight: 700; + } + .xdsoft_calendar td.xdsoft_other_month, + .xdsoft_calendar td.xdsoft_disabled, + .xdsoft_time_box > div > div.xdsoft_disabled { + opacity: 0.5; + background: $color-grey-3; + } + + .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled { + opacity: 0.2; + } + .xdsoft_calendar td:hover, + .xdsoft_timepicker .xdsoft_time_box > div > div:hover { + color: #fff; + background: $color-teal; + } } .xdsoft_noselect { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; } -.xdsoft_noselect: :selection { background: transparent; } -.xdsoft_noselect: :-moz-selection { background: transparent; } +.xdsoft_noselect::selection { background: transparent; } +.xdsoft_noselect::-moz-selection { background: transparent; } .xdsoft_datetimepicker.xdsoft_inline { - display: inline-block; - position: static; - box-shadow: none; + display: inline-block; + position: static; + box-shadow: none; } .xdsoft_scroller_box { - position: relative; + position: relative; } .xdsoft_scrollbar { - position: absolute; - width: 7px; - width: 7px; - right: 0px; - top: 0px; - bottom: 0px; - cursor: pointer; + position: absolute; + width: 7px; + width: 7px; + right: 0; + top: 0; + bottom: 0; + cursor: pointer; - > .xdsoft_scroller { - background: #ccc !important; - height: 20px; - border-radius: 3px; - } + > .xdsoft_scroller { + background: #ccc !important; + height: 20px; + border-radius: 3px; + } } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/dropdowns.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/dropdowns.scss index b2daff9827..550eee89b1 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/dropdowns.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/dropdowns.scss @@ -148,7 +148,7 @@ } &.open { > input[type=button], > input[type=submit], > button, > .button { - @include border-radius(3px 3px 0px 0px); + @include border-radius(3px 3px 0 0); } .dropdown-toggle { @include border-radius(0 3px 0 0); diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/explorer.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/explorer.scss index 82e72b8853..9189f87daa 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/explorer.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/explorer.scss @@ -136,9 +136,9 @@ $explorer-z-index: 500; /* When a submenu is openend, we will hide all li siblings. - For that we give a class to the parent menu called "dl-subview". + For that we give a class to the parent menu called 'dl-subview'. We also hide the submenu link. - The opened submenu will get the class "dl-subviewopen". + The opened submenu will get the class 'dl-subviewopen'. All this is done for any sub-level being entered. */ .dl-menu.dl-subview li, @@ -159,7 +159,7 @@ $explorer-z-index: 500; > .dl-submenu { position: absolute; width: 100%; - top: 0px; + top: 0; left: 0; } } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/formatters.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/formatters.scss index 62ab492b31..8b396152f2 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/formatters.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/formatters.scss @@ -70,7 +70,7 @@ } } -/* Displays "timesince" formatted date with full date on hover */ +/* Displays 'timesince' formatted date with full date on hover */ .human-readable-date { overflow: hidden; display: block; @@ -113,7 +113,7 @@ -webkit-font-smoothing: auto; font-size: 0.80em; margin: 0 0.5em 0.5em 0.5em; - background: white url("# {$static-root}bg-dark-diag.svg"); + background: white url('# {$static-root}bg-dark-diag.svg'); &.primary { color: $color-grey-2; @@ -168,7 +168,7 @@ form.status-tag:hover { font-family: wagtail; display: inline-block; color: white; - content: "u"; + content: 'u'; padding-right: 0.5em; } @@ -202,7 +202,7 @@ a.tag:hover { } &:before { - content: ""; + content: ''; top: -5px;left: -5px;bottom: -5px;right: -5px; z-index: 1; background-color: rgba(255,255,255,0.5); @@ -218,7 +218,7 @@ a.tag:hover { animation: spin 0.5s infinite linear; -webkit-animation: spin 0.5s infinite linear; -moz-animation: spin 0.5s infinite linear; - content: "1"; + content: '1'; z-index: 2; color: $color-teal; } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss index f4e9cdb135..d206e16f26 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss @@ -94,12 +94,12 @@ input, textarea, select, .richtext, .tagit { @include border-radius(0 6px 6px 0); z-index: 0; position: absolute; - right: 0px; + right: 0; top: 1px; - bottom: 0px; + bottom: 0; width: 1.5em; font-family: wagtail; - content: "q"; + content: 'q'; border: 1px solid $color-input-border; border-width: 0 0 0 1px; text-align: center; @@ -108,7 +108,7 @@ input, textarea, select, .richtext, .tagit { pointer-events: none; color: $color-grey-3; background-color: $color-fieldset-hover; - margin: 0px 1px 1px 0; + margin: 0 1px 1px 0; .ie & { display: none; @@ -142,7 +142,7 @@ input[type=radio]:before { left: -2px; cursor: pointer; display: block; - content: "K"; + content: 'K'; width: 1em; height: 1em; line-height: 1.1em; @@ -152,7 +152,7 @@ input[type=radio]:before { border: 1px solid $color-grey-4; } input[type=radio]:checked:before { - content: "K"; + content: 'K'; color: $color-teal; } @@ -171,7 +171,7 @@ input[type=checkbox]:before { top: -5px; cursor: pointer; display: block; - content: "x"; + content: 'x'; line-height: 20px; width: 20px; height: 20px; @@ -353,7 +353,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button { color: lighten($color-grey-2, 15%) !important; cursor: not-allowed; } - &.button-secondary: disabled, &.button-secondary[disabled], &.button-secondary.disabled { + &.button-secondary:disabled, &.button-secondary[disabled], &.button-secondary.disabled { background-color: white !important; border-color: $color-grey-3 !important; color: $color-grey-3 !important; @@ -598,7 +598,7 @@ li.focused > .help { } .required .field > label:after { - content: "*"; + content: '*'; color: $color-red; font-weight: bold; display: inline-block; @@ -647,7 +647,7 @@ li.focused > .help { } } - input: not([type=radio]), input: not([type=checkbox]), input: not([type=submit]), input: not([type=button]) { + input:not([type=radio]), input:not([type=checkbox]), input:not([type=submit]), input:not([type=button]) { padding-left: 2.5em; } @@ -769,7 +769,7 @@ ul.inline li:first-child, li.inline:first-child { } -/* 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. */ +/* 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...*/ @@ -789,7 +789,7 @@ ul.inline li:first-child, li.inline:first-child { &:before { vertical-align: middle; font-family: wagtail; - content: ""; + content: ''; position: relative; display: block; float: left; @@ -840,14 +840,14 @@ ul.inline li:first-child, li.inline:first-child { .page-chooser { .unchosen, .chosen { &:before { - content: "b"; + content: 'b'; } } } .snippet-chooser { .unchosen, .chosen { &:before { - content: "D"; + content: 'D'; } } } @@ -855,7 +855,7 @@ ul.inline li:first-child, li.inline:first-child { .document-chooser { .unchosen, .chosen { &:before { - content: "r"; + content: 'r'; } } } @@ -863,14 +863,14 @@ ul.inline li:first-child, li.inline:first-child { .image-chooser { .unchosen, .chosen { &:before { - content: "o"; + content: 'o'; } } .chosen { padding-left: $thumbnail-width; &:before { - content: ""; + content: ''; } .preview-image{ float:left; @@ -899,7 +899,7 @@ ul.inline li:first-child, li.inline:first-child { border: 0; } } -ul.tagit input[type="text"] { +ul.tagit input[type='text'] { padding: 0.2em 0.5em !important; /* having to use important, FML*/ } ul.tagit li.tagit-choice-editable { @@ -920,7 +920,7 @@ ul.tagit li.tagit-choice-editable { font-family: wagtail; display: block; color: $color-grey-3; - content: "g"; + content: 'g'; } .ui-icon-close:hover:before { color: $color-red diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/icons.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/icons.scss index 3ced848134..7ad505b8eb 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/icons.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/icons.scss @@ -7,10 +7,10 @@ .icon:before, .icon:after, -.hallotoolbar [class^="icon-"], -.hallotoolbar [class*=" icon-"]:before, -.hallotoolbar [class^="icon-"]:before { - font-family: "wagtail"; +.hallotoolbar [class^='icon-'], +.hallotoolbar [class*=' icon-']:before, +.hallotoolbar [class^='icon-']:before { + font-family: 'wagtail'; font-style: normal; font-weight: normal; font-variant: normal; @@ -26,199 +26,199 @@ margin-right: 0.2em; } .icon:after, -.hallotoolbar [class^="icon-"]:after, -.hallotoolbar [class^="icon-"]:after { +.hallotoolbar [class^='icon-']:after, +.hallotoolbar [class^='icon-']:after { text-align: right; } -.hallotoolbar [class^="icon-"], -.hallotoolbar [class*=" icon-"]:before, -.hallotoolbar [class*=" icon-"]:before, -.hallotoolbar [class^="icon-"]:before { +.hallotoolbar [class^='icon-'], +.hallotoolbar [class*=' icon-']:before, +.hallotoolbar [class*=' icon-']:before, +.hallotoolbar [class^='icon-']:before { vertical-align: -10%; margin-right: 0; } .icon-cogs:before { - content: "a"; + content: 'a'; } .icon-doc-empty-inverse:before { - content: "b"; + content: 'b'; } .icon-doc-empty:before { - content: "c"; + content: 'c'; } .icon-edit:before { - content: "d"; + content: 'd'; } .icon-arrow-up:before, .icon-arrow-up-after:after { - content: "e"; + content: 'e'; } .icon-arrow-down:before, .icon-arrow-down-after:after { - content: "q"; + content: 'q'; } .icon-search:before { - content: "f"; + content: 'f'; } .icon-cross:before { - content: "g"; + content: 'g'; } .icon-folder-open-1:before { - content: "i"; + content: 'i'; } .icon-folder-inverse:before { - content: "j"; + content: 'j'; } .icon-mail:before { - content: "k"; + content: 'k'; } .icon-arrows-up-down:before { - content: "l"; + content: 'l'; } .icon-locked:before { - content: "m"; + content: 'm'; } .icon-arrow-right:before, .icon-arrow-right-after:after { - content: "n"; + content: 'n'; } .icon-doc-full:before, .icon-file-text-alt:before { - content: "h"; + content: 'h'; } .icon-image:before, .icon-picture:before { - content: "o"; + content: 'o'; } .icon-unlocked:before { - content: "p"; + content: 'p'; } .icon-doc-full-inverse:before { - content: "r"; + content: 'r'; } .icon-folder:before { - content: "s"; + content: 's'; } .icon-plus:before { - content: "t"; + content: 't'; } .icon-tag:before { - content: "u"; + content: 'u'; } .icon-folder-open-inverse:before { - content: "v"; + content: 'v'; } .icon-cog:before { - content: "w"; + content: 'w'; } .icon-tick:before { - content: "x"; + content: 'x'; } .icon-user:before { - content: "y"; + content: 'y'; } .icon-arrow-left:before { - content: "z"; + content: 'z'; } .icon-tick-inverse:before { - content: "A"; + content: 'A'; } .icon-plus-inverse:before { - content: "B"; + content: 'B'; } .icon-snippet:before { - content: "D"; + content: 'D'; } .icon-wagtail:before { - content: "V"; + content: 'V'; } .icon-wagtail-inverse:before { - content: "0"; + content: '0'; } .icon-bold:before { - content: "C"; + content: 'C'; } .icon-italic:before { - content: "E"; + content: 'E'; } .icon-undo:before { - content: "H"; + content: 'H'; } .icon-repeat:before { - content: "I"; + content: 'I'; } .icon-list-ol:before { - content: "G"; + content: 'G'; } .icon-list-ul:before { - content: "F"; + content: 'F'; } .icon-link:before { - content: "J"; + content: 'J'; } .icon-radio-full:before { - content: "K"; + content: 'K'; } .icon-radio-empty:before { - content: "L"; + content: 'L'; } .icon-arrow-up-big:before { - content: "M"; + content: 'M'; } .icon-arrow-down-big:before { - content: "N"; + content: 'N'; } .icon-group:before { - content: "O"; + content: 'O'; } .icon-media:before { - content: "P"; + content: 'P'; } .icon-horizontalrule { &:before { font-family: Open Sans,Arial,sans-serif !important; // FML - content: "\2014"; + content: '\2014'; } } .icon-password:before { - content: "Q"; + content: 'Q'; } .icon-download:before { - content: "S"; /* Credit: Icon made by Freepik from Flaticon.com */ + content: 'S'; /* Credit: Icon made by Freepik from Flaticon.com */ } .icon-order:before { - content: "T"; + content: 'T'; } .icon-grip:before { - content: "U"; + content: 'U'; } .icon-home:before { - content: "W"; + content: 'W'; } .icon-order-down:before { - content: "X"; + content: 'X'; } .icon-order-up:before { - content: "Y"; + content: 'Y'; } .icon-bin:before { - content: "Z"; + content: 'Z'; } .icon-spinner:after { width: 1em; animation: spin 0.5s infinite linear; -webkit-animation: spin 0.5s infinite linear; -moz-animation: spin 0.5s infinite linear; - content: "1"; + content: '1'; } .icon-pick:before { - content: "2"; + content: '2'; } .icon-redirect:before { - content: "3"; + content: '3'; } .icon-view:before, .icon-no-view:before { @@ -226,52 +226,52 @@ font-size: 1.1rem; } .icon-view:before { - content: "4"; + content: '4'; } .icon-no-view:before { - content: "^"; + content: '^'; } .icon-collapse-down:before { - content: "5"; + content: '5'; } .icon-collapse-up:before { - content: "6"; + content: '6'; } .icon-date:before { - content: "7"; + content: '7'; } .icon-time:before { - content: "8"; + content: '8'; } .icon-success:before { - content: "9"; + content: '9'; } .icon-help:before { - content: "?"; + content: '?'; } .icon-warning:before { - content: "!"; + content: '!'; } .icon-form:before { - content: "$"; + content: '$'; } .icon-site:before { - content: "@"; + content: '@'; } .icon-placeholder:before { - content: " {"; + content: ' {'; } .icon-pilcrow:before { - content: "\e600"; + content: '\e600'; } .icon-title:before { - content: "\f034"; + content: '\f034'; } .icon-code:before { - content: "\e601" + content: '\e601' } .icon-openquote:before { - content: "“" + content: '“' } .icon-larger:before { @@ -279,7 +279,7 @@ } .icon.text-replace { - font-size: 0em; + font-size: 0; line-height: 0; overflow: hidden; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/listing.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/listing.scss index 5747b8d205..f9c248c69e 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/listing.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/listing.scss @@ -491,7 +491,7 @@ table.listing { text-align: center; margin-top: -1px; border: 1px solid $color-grey-4; - border-width: 1px 1px 1px 0px; + border-width: 1px 1px 1px 0; .image { text-align: center; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/main-nav.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/main-nav.scss index 02c7cbb9c3..522b700a12 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/main-nav.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/main-nav.scss @@ -23,13 +23,13 @@ $submenu-color: darken($color-grey-1, 5%); font-size: 40px; color: white; line-height: 40px; - content: "\2261"; + content: '\2261'; } } .nav-main { top: 43px; - bottom: 0px; + bottom: 0; overflow: auto; width: 100%; @@ -59,7 +59,7 @@ $submenu-color: darken($color-grey-1, 5%); outline: none; background-color: rgba(100,100,100,0.15); color: white; - text-shadow: -1px -1px 0px rgba(0,0,0,0.3); + text-shadow: -1px -1px 0 rgba(0,0,0,0.3); } } @@ -88,7 +88,7 @@ $submenu-color: darken($color-grey-1, 5%); .menu-active { background: $selected-highlight; - text-shadow: -1px -1px 0px rgba(0,0,0,0.3); + text-shadow: -1px -1px 0 rgba(0,0,0,0.3); & > a { border-left-color: $color-salmon; @@ -183,7 +183,7 @@ $submenu-color: darken($color-grey-1, 5%); font-family: wagtail; font-weight: 200; text-transform: none; - content: "f"; + content: 'f'; display: block; height: 100%; line-height: 3.3em; @@ -308,7 +308,7 @@ body.explorer-open { } } a.submenu-trigger:after { - content: "n"; + content: 'n'; } } @@ -351,7 +351,7 @@ body.explorer-open { background: $submenu-color; > a { - text-shadow: -1px -1px 0px rgba(0,0,0,0.3); + text-shadow: -1px -1px 0 rgba(0,0,0,0.3); &:hover { background-color: transparent; @@ -410,7 +410,7 @@ body.explorer-open { all and (-ms-high-contrast: active) { .wrapper { @include transition(left 0.2s ease); - left: 0px; + left: 0; } body.nav-open { .wrapper { @@ -434,7 +434,7 @@ body.explorer-open { all and (min-width: $breakpoint-mobile) and (-ms-high-contrast: active){ body.explorer-open{ .wrapper { - left: 0px; + left: 0; } .nav-wrapper { width: $menu-width; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/messages.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/messages.scss index 66e7494736..a8ac5408b9 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/messages.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/messages.scss @@ -1,5 +1,5 @@ /* - Messages are specific to Django's "Messaging" system which adds messages into the session, + Messages are specific to Django's 'Messaging' system which adds messages into the session, 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 @@ -41,7 +41,7 @@ &:before { font-family: wagtail; - content: "!"; + content: '!'; } } .warning { @@ -49,7 +49,7 @@ &:before { font-family: wagtail; - content: "!"; + content: '!'; } } .success { @@ -57,7 +57,7 @@ &:before { font-family: wagtail; - content: "9"; + content: '9'; } } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/modals.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/modals.scss index cb775146cd..8476fe947c 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/modals.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/modals.scss @@ -40,7 +40,7 @@ $zindex-modal-background: 500; margin-left: auto; margin-right: auto; width: auto; - padding: 0px; + padding: 0; z-index: ($zindex-modal-background + 10); height: 90%; width: 85%; @@ -105,7 +105,7 @@ $zindex-modal-background: 500; @media screen and (min-width: $breakpoint-mobile) { .modal-dialog { - padding: 0px 0 2em $menu-width; + padding: 0 0 2em $menu-width; } } @media screen and (min-width: $breakpoint-desktop-larger) { diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss index 13d398d8cb..f5bb4284cf 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss @@ -239,7 +239,7 @@ should be borderless and full-width @include transform(rotate(-45deg)); position: absolute; font-family: wagtail; - content: "B"; + content: 'B'; line-height: 1em; text-align: center; } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/tabs.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/tabs.scss index be11c9ef29..db7062872c 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/tabs.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/tabs.scss @@ -63,7 +63,7 @@ font-family: wagtail; vertical-align: middle; text-transform: none; - content: "w"; + content: 'w'; margin-right: 0.5em; font-size: 1.2em; font-weight: normal; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/typography.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/typography.scss index 7710deb764..d5e88822a0 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/typography.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/typography.scss @@ -45,7 +45,7 @@ a { } code { - @include box-shadow(inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2)); + @include box-shadow(inset 0 0 4px 0 rgba(0, 0, 0, 0.2)); background-color: $color-fieldset-hover; padding: 2px 5px; } @@ -103,7 +103,7 @@ dd { position: absolute; left: 1em; top: 0.7em; - content: "?"; + content: '?'; font-size: 1.4em; } } @@ -120,7 +120,7 @@ dd { &:before { color: $color-orange; - content: "!"; + content: '!'; } } @@ -129,7 +129,7 @@ dd { &:before { color: $color-red; - content: "!"; + content: '!'; } } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss index 2c68d06fc4..30a1a6b2cd 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss @@ -1,23 +1,23 @@ -@import "wagtailadmin/scss/variables.scss"; -@import "wagtailadmin/scss/mixins.scss"; -@import "wagtailadmin/scss/grid.scss"; +@import 'wagtailadmin/scss/variables.scss'; +@import 'wagtailadmin/scss/mixins.scss'; +@import 'wagtailadmin/scss/grid.scss'; -@import "wagtailadmin/scss/components/explorer.scss"; -@import "wagtailadmin/scss/components/icons.scss"; -@import "wagtailadmin/scss/components/typography.scss"; -@import "wagtailadmin/scss/components/tabs.scss"; -@import "wagtailadmin/scss/components/dropdowns.scss"; -@import "wagtailadmin/scss/components/modals.scss"; -@import "wagtailadmin/scss/components/forms.scss"; -@import "wagtailadmin/scss/components/listing.scss"; -@import "wagtailadmin/scss/components/messages.scss"; -@import "wagtailadmin/scss/components/formatters.scss"; -@import "wagtailadmin/scss/components/header.scss"; -@import "wagtailadmin/scss/components/progressbar.scss"; -@import "wagtailadmin/scss/components/datetimepicker.scss"; -@import "wagtailadmin/scss/components/main-nav.scss"; +@import 'wagtailadmin/scss/components/explorer.scss'; +@import 'wagtailadmin/scss/components/icons.scss'; +@import 'wagtailadmin/scss/components/typography.scss'; +@import 'wagtailadmin/scss/components/tabs.scss'; +@import 'wagtailadmin/scss/components/dropdowns.scss'; +@import 'wagtailadmin/scss/components/modals.scss'; +@import 'wagtailadmin/scss/components/forms.scss'; +@import 'wagtailadmin/scss/components/listing.scss'; +@import 'wagtailadmin/scss/components/messages.scss'; +@import 'wagtailadmin/scss/components/formatters.scss'; +@import 'wagtailadmin/scss/components/header.scss'; +@import 'wagtailadmin/scss/components/progressbar.scss'; +@import 'wagtailadmin/scss/components/datetimepicker.scss'; +@import 'wagtailadmin/scss/components/main-nav.scss'; -@import "wagtailadmin/scss/fonts.scss"; +@import 'wagtailadmin/scss/fonts.scss'; html { background: $color-grey-4; @@ -105,7 +105,7 @@ footer { @include transition(all 0.2s ease); @include row(); @include border-radius(3px 3px 0 0); - @include box-shadow(0px 0px 2px rgba(255,255,255,0.5)); + @include box-shadow(0 0 2px rgba(255,255,255,0.5)); @include transition(bottom 0.5s ease 1s); background: $color-grey-1; position: fixed; @@ -142,16 +142,16 @@ footer { } } -:: -webkit-scrollbar { +::-webkit-scrollbar { height: 10px; width: 10px; background: $color-grey-1; } -:: -webkit-scrollbar-thumb { +::-webkit-scrollbar-thumb { background: $color-grey-2; -webkit-border-radius: 1ex; } -:: -webkit-scrollbar-corner { +::-webkit-scrollbar-corner { background: $color-grey-1; } @@ -193,7 +193,7 @@ footer { // z-index: 5; position: absolute; font-family: wagtail; - content: "n"; + content: 'n'; padding-left: 20px; font-size: 2em; color: $color-teal-darker; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/fonts.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/fonts.scss index 7e538bddd6..52ec40f09e 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/fonts.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/fonts.scss @@ -36,12 +36,12 @@ /* 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.eot"); - src: url("# {$font-root}wagtail.eot?#iefix") format("embedded-opentype"), - url("# {$font-root}wagtail.ttf") format("truetype"), - url("# {$font-root}wagtail.svg#wagtail") format("svg"), - url("# {$font-root}wagtail.woff") format("woff"); + font-family: 'wagtail'; + src: url('# {$font-root}wagtail.eot'); + src: url('# {$font-root}wagtail.eot?#iefix') format('embedded-opentype'), + url('# {$font-root}wagtail.ttf') format('truetype'), + url('# {$font-root}wagtail.svg#wagtail') format('svg'), + url('# {$font-root}wagtail.woff') format('woff'); font-weight: normal; font-style: normal; } @@ -49,7 +49,7 @@ /* One exception to the limited font formats used above is the Wagtail icon font for Windows, where using the SVG version improves antialiasing */ @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { - font-family: "wagtail"; - src: url("# {$font-root}wagtail.svg#wagtail") format("svg"); + font-family: 'wagtail'; + src: url('# {$font-root}wagtail.svg#wagtail') format('svg'); } } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/home.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/home.scss index 94bf177405..4c06ca0c03 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/home.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/home.scss @@ -1,6 +1,6 @@ -@import "wagtailadmin/scss/variables.scss"; -@import "wagtailadmin/scss/mixins.scss"; -@import "wagtailadmin/scss/grid.scss"; +@import 'wagtailadmin/scss/variables.scss'; +@import 'wagtailadmin/scss/mixins.scss'; +@import 'wagtailadmin/scss/grid.scss'; h1 { font-weight: 300; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss index 86ed7f44f6..f37afa5a62 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss @@ -1,6 +1,6 @@ -@import "wagtailadmin/scss/variables.scss"; -@import "wagtailadmin/scss/mixins.scss"; -@import "wagtailadmin/scss/grid.scss"; +@import 'wagtailadmin/scss/variables.scss'; +@import 'wagtailadmin/scss/mixins.scss'; +@import 'wagtailadmin/scss/grid.scss'; // overrides default nice padding defined in variables.scss $desktop-nice-padding: 100px; @@ -15,7 +15,7 @@ html { } body { - margin-left: 0px; + margin-left: 0; height: 100%; } @@ -144,7 +144,7 @@ form { &:before { content: ''; - width: 0px; + width: 0; display: inline-block; height: 100%; vertical-align: middle; @@ -157,7 +157,7 @@ form { } .full { - margin: 0px (-$desktop-nice-padding); + margin: 0 (-$desktop-nice-padding); .iconfield { .input:before { diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss index 5180b05cbd..62c69cc53e 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss @@ -1,7 +1,7 @@ -@import "wagtailadmin/scss/variables.scss"; -@import "wagtailadmin/scss/mixins.scss"; -@import "wagtailadmin/scss/grid.scss"; -@import "wagtailadmin/scss/components/streamfield.scss"; +@import 'wagtailadmin/scss/variables.scss'; +@import 'wagtailadmin/scss/mixins.scss'; +@import 'wagtailadmin/scss/grid.scss'; +@import 'wagtailadmin/scss/components/streamfield.scss'; .page-editor { .content-wrapper { @@ -60,7 +60,7 @@ &:before { display: block; float: left; - content: "?"; + content: '?'; border: 1px solid $color-grey-2; color: $color-grey-2; @include border-radius(100%); @@ -108,15 +108,15 @@ text-shadow: none; font-family: wagtail; text-transform: none; - content: "q"; + content: 'q'; text-align: center; display: block; position: absolute; z-index: 2; font-size: 2em; - top: 0px; + top: 0; line-height: 1.8em; - left: 0px; + left: 0; width: 1.7em; color: white; padding: 0; @@ -140,7 +140,7 @@ &.required { > h2 label:after { - content: "*"; + content: '*'; color: $color-red; font-weight: bold; display: inline-block; @@ -211,7 +211,7 @@ /* special panel for the publishing fields, requires a bit more pizzazz */ &.publishing { h2:before { - content: "7"; + content: '7'; font-size: 1.8rem; line-height: 1.4em; width: 1.4em; @@ -254,8 +254,8 @@ @include transition(background-color 0.2s ease); position: relative; z-index: 2; - top: 0px; - left: 0px; + top: 0; + left: 0; width: 3.3em; padding: 0; margin: 0 0 0 -20px; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/preview.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/preview.scss index 8068137b49..f43de0988b 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/preview.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/preview.scss @@ -1,11 +1,11 @@ -@import "wagtailadmin/scss/variables.scss"; -@import "wagtailadmin/scss/mixins.scss"; +@import 'wagtailadmin/scss/variables.scss'; +@import 'wagtailadmin/scss/mixins.scss'; /* This font is just a single spinner glyph */ @font-face { font-family: 'wagtail'; - src: url(data: application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggiBucAAAC8AAAAYGNtYXAAIwC5AAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zu2pTysAAAFwAAAA0GhlYWQAoBqvAAACQAAAADZoaGVhA+IB5gAAAngAAAAkaG10eAMAAAAAAAKcAAAAFGxvY2EAKAB8AAACsAAAAAxtYXhwAAgAMwAAArwAAAAgbmFtZTAOqMkAAALcAAABOXBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAABAAAAAMQHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIAAx//3//wAAAAAAIAAx//3//wAB/+P/0wADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAA/+ACAAHgABcAMAAANy4DNTQ+Ah8BByYOAhUUHgIXBxcnNz4DJzYuAic/AR4DBxYOAiNLEhwTCihGXTUgIChGNB4HDxQOKLAhISdHMx8BAQgOFQ0mBxEdEgsBASlFXjQrEiouMRo0XkUpAR8hAR8zRycUJCQeDwR0IR8BHTVFKRImIiANBSgSKi4xGjVdRigAAAEAAAABAADi0eQAXw889QALAgAAAAAAz8Bs+QAAAADPwGz5AAD/4AIAAeAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAgAAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAABAAAAAgAAAAAAAAAACgAUAB4AaAABAAAABQAxAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAHcAYQBnAHQAYQBpAGwAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAYQBnAHQAYQBpAGx3YWd0YWlsAHcAYQBnAHQAYQBpAGwAUgBlAGcAdQBsAGEAcgB3AGEAZwB0AGEAaQBsAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), - url(data: application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARsAAoAAAAABCQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAO4AAADuSyBzg09TLzIAAAHkAAAAYAAAAGAIIgbnY21hcAAAAkQAAABMAAAATAAjALlnYXNwAAACkAAAAAgAAAAIAAAAEGhlYWQAAAKYAAAANgAAADYAoBqvaGhlYQAAAtAAAAAkAAAAJAPiAeZobXR4AAAC9AAAABQAAAAUAwAAAG1heHAAAAMIAAAABgAAAAYABVAAbmFtZQAAAxAAAAE5AAABOTAOqMlwb3N0AAAETAAAACAAAAAgAAMAAAEABAQAAQEBCHdhZ3RhaWwAAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAAB0Dx0AAAB5ER0AAAAJHQAAAOUSAAYBAQgPERMWGXdhZ3RhaWx3YWd0YWlsdTB1MXUyMHUzMQAAAgGJAAMABQEBBAcKDWT8lA78lA78lA77lA7WthVbu3DMi8+L9yH3B/cH9yGLCKtra2sFIYs1NYshi1ifWq9nCGSGBfdD+wcVa6urqwX1i+Hhi/WLvne8Z68IspCRswW7W6ZKi0eL+yH7B/sH+yGLCA74lBT4lBWLDAoAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAEAAAAAxAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAgADH//f//AAAAAAAgADH//f//AAH/4//TAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAAaXw/5l8PPPUACwIAAAAAAM/AbPkAAAAAz8Bs+QAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAQAAAAIAAAAAAFAAAAUAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwB3AGEAZwB0AGEAaQBsAFYAZQByAHMAaQBvAG4AIAAxAC4AMAB3AGEAZwB0AGEAaQBsd2FndGFpbAB3AGEAZwB0AGEAaQBsAFIAZQBnAHUAbABhAHIAdwBhAGcAdABhAGkAbABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff'); + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggiBucAAAC8AAAAYGNtYXAAIwC5AAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zu2pTysAAAFwAAAA0GhlYWQAoBqvAAACQAAAADZoaGVhA+IB5gAAAngAAAAkaG10eAMAAAAAAAKcAAAAFGxvY2EAKAB8AAACsAAAAAxtYXhwAAgAMwAAArwAAAAgbmFtZTAOqMkAAALcAAABOXBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAABAAAAAMQHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIAAx//3//wAAAAAAIAAx//3//wAB/+P/0wADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAA/+ACAAHgABcAMAAANy4DNTQ+Ah8BByYOAhUUHgIXBxcnNz4DJzYuAic/AR4DBxYOAiNLEhwTCihGXTUgIChGNB4HDxQOKLAhISdHMx8BAQgOFQ0mBxEdEgsBASlFXjQrEiouMRo0XkUpAR8hAR8zRycUJCQeDwR0IR8BHTVFKRImIiANBSgSKi4xGjVdRigAAAEAAAABAADi0eQAXw889QALAgAAAAAAz8Bs+QAAAADPwGz5AAD/4AIAAeAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAgAAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAABAAAAAgAAAAAAAAAACgAUAB4AaAABAAAABQAxAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAHcAYQBnAHQAYQBpAGwAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAYQBnAHQAYQBpAGx3YWd0YWlsAHcAYQBnAHQAYQBpAGwAUgBlAGcAdQBsAGEAcgB3AGEAZwB0AGEAaQBsAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARsAAoAAAAABCQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAO4AAADuSyBzg09TLzIAAAHkAAAAYAAAAGAIIgbnY21hcAAAAkQAAABMAAAATAAjALlnYXNwAAACkAAAAAgAAAAIAAAAEGhlYWQAAAKYAAAANgAAADYAoBqvaGhlYQAAAtAAAAAkAAAAJAPiAeZobXR4AAAC9AAAABQAAAAUAwAAAG1heHAAAAMIAAAABgAAAAYABVAAbmFtZQAAAxAAAAE5AAABOTAOqMlwb3N0AAAETAAAACAAAAAgAAMAAAEABAQAAQEBCHdhZ3RhaWwAAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAAB0Dx0AAAB5ER0AAAAJHQAAAOUSAAYBAQgPERMWGXdhZ3RhaWx3YWd0YWlsdTB1MXUyMHUzMQAAAgGJAAMABQEBBAcKDWT8lA78lA78lA77lA7WthVbu3DMi8+L9yH3B/cH9yGLCKtra2sFIYs1NYshi1ifWq9nCGSGBfdD+wcVa6urqwX1i+Hhi/WLvne8Z68IspCRswW7W6ZKi0eL+yH7B/sH+yGLCA74lBT4lBWLDAoAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAEAAAAAxAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAgADH//f//AAAAAAAgADH//f//AAH/4//TAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAAaXw/5l8PPPUACwIAAAAAAM/AbPkAAAAAz8Bs+QAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAQAAAAIAAAAAAFAAAAUAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwB3AGEAZwB0AGEAaQBsAFYAZQByAHMAaQBvAG4AIAAxAC4AMAB3AGEAZwB0AGEAaQBsd2FndGFpbAB3AGEAZwB0AGEAaQBsAFIAZQBnAHUAbABhAHIAdwBhAGcAdABhAGkAbABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff'); font-weight: normal; font-style: normal; } @@ -22,7 +22,7 @@ html,body { text-align: center; height: 100%; width: 100%; - font-size: 0em; + font-size: 0; z-index: 999999; background: white; @@ -33,7 +33,7 @@ html,body { &:before { content: ''; - width: 0px; + width: 0; display: inline-block; height: 100%; vertical-align: middle; @@ -56,7 +56,7 @@ html,body { left: 0; top: 0; font-family: wagtail; - content: "1"; + content: '1'; width: 1em; animation: spin 0.8s infinite linear; -webkit-animation: spin 0.8s infinite linear; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/mixins.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/mixins.scss index efd32be2be..bff6a623b7 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/mixins.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/mixins.scss @@ -1,7 +1,7 @@ @mixin clearfix() { &:before, &:after { - content: " "; + content: ' '; display: table; } &:after { diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/panels/rich-text.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/panels/rich-text.scss index 40d6b5eefb..958827558d 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/panels/rich-text.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/panels/rich-text.scss @@ -1,5 +1,5 @@ -@import "wagtailadmin/scss/variables.scss"; -@import "wagtailadmin/scss/mixins.scss"; +@import 'wagtailadmin/scss/variables.scss'; +@import 'wagtailadmin/scss/mixins.scss'; .hallotoolbar { position: absolute; @@ -82,7 +82,7 @@ list-style-type: decimal !important; } - /* Delete controls on embedded blocks with contenteditable="false" */ + /* Delete controls on embedded blocks with contenteditable='false' */ .rich-text-deletable { position: relative; a.delete-control { diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar.scss index 7c87c905fc..2a3359dea4 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar.scss @@ -1,9 +1,9 @@ -@import "wagtailadmin/scss/variables.scss"; -@import "wagtailadmin/scss/mixins.scss"; +@import 'wagtailadmin/scss/variables.scss'; +@import 'wagtailadmin/scss/mixins.scss'; -@import "wagtailadmin/scss/components/icons.scss"; +@import 'wagtailadmin/scss/components/icons.scss'; -@import "wagtailadmin/scss/fonts.scss"; +@import 'wagtailadmin/scss/fonts.scss'; html, body { background-color: transparent; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar_embed.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar_embed.scss index e190b4e77f..24287e25a0 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar_embed.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar_embed.scss @@ -8,7 +8,7 @@ width: 150px; height: 300px; -webkit-transition: opacity 0.2s ease; - -moz-transition: opacity 0.2s ease; - -o-transition: opacity 0.2s ease; - transition: opacity 0.2s ease; + -moz-transition: opacity 0.2s ease; + -o-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; } \ No newline at end of file diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/variables.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/variables.scss index 79cb821958..25ced07445 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/variables.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/variables.scss @@ -5,8 +5,8 @@ STATIC_URL setting. However, django-compressor consistently places the compiled CSS into $ {STATIC_URL}/CACHE/css/ regardless of compilation mode, so we can reliably use relative paths to get back to STATIC_URL. */ -$static-root: "../../wagtailadmin/images/"; -$font-root: "../../wagtailadmin/fonts/"; +$static-root: '../../wagtailadmin/images/'; +$font-root: '../../wagtailadmin/fonts/'; /* grid settings */ $grid-columns: 12; diff --git a/wagtail/wagtailimages/static_src/wagtailimages/scss/add-multiple.scss b/wagtail/wagtailimages/static_src/wagtailimages/scss/add-multiple.scss index aefd0d961b..1217d9ac49 100644 --- a/wagtail/wagtailimages/static_src/wagtailimages/scss/add-multiple.scss +++ b/wagtail/wagtailimages/static_src/wagtailimages/scss/add-multiple.scss @@ -1,6 +1,6 @@ -@import "wagtailadmin/scss/variables.scss"; -@import "wagtailadmin/scss/mixins.scss"; -@import "wagtailadmin/scss/grid.scss"; +@import 'wagtailadmin/scss/variables.scss'; +@import 'wagtailadmin/scss/mixins.scss'; +@import 'wagtailadmin/scss/grid.scss'; .replace-file-input { display: inline-block; @@ -19,12 +19,12 @@ display: block; font-size: 5em; - &: hover { + &:hover { cursor: pointer; } } - &: hover { + &:hover { cursor: pointer; button { @@ -50,7 +50,7 @@ max-width: 100%; margin: auto; } - .progress, .thumb, .thumb: before, canvas, img { + .progress, .thumb, .thumb:before, canvas, img { position: absolute; max-width: 100%; } @@ -63,19 +63,22 @@ @include box-shadow(0 0 5px 2px rgba(255, 255, 255, 0.4)); } .thumb { - top: 0;right: 0;bottom: 0;left: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; z-index: 1; width: 100%; } - .thumb: before, canvas, img { + .thumb:before, canvas, img { left: 0; right: 0; top: 0; bottom: 0; margin: auto; } - .thumb: before { + .thumb:before { z-index: 2; top: 0; width: 1em; @@ -88,7 +91,7 @@ } .hasthumb { - &: before { + &:before { display: none; } } diff --git a/wagtail/wagtailimages/static_src/wagtailimages/scss/focal-point-chooser.scss b/wagtail/wagtailimages/static_src/wagtailimages/scss/focal-point-chooser.scss index 21a300c9d7..12b7515cf6 100644 --- a/wagtail/wagtailimages/static_src/wagtailimages/scss/focal-point-chooser.scss +++ b/wagtail/wagtailimages/static_src/wagtailimages/scss/focal-point-chooser.scss @@ -1,5 +1,5 @@ -@import "wagtailadmin/scss/variables.scss"; -@import "wagtailadmin/scss/mixins.scss"; +@import 'wagtailadmin/scss/variables.scss'; +@import 'wagtailadmin/scss/mixins.scss'; .focal-point-chooser { position: relative;