kopia lustrzana https://github.com/wagtail/wagtail
Fixes #3516 - replaces scss-lint with stylelint
Anselm Bradford
Thibaud Colas
rodzic
8ff650a5b4
commit
a900965fba
166
.scss-lint.yml
166
.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
|
||||
|
|
@ -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
|
||||
|
|
@ -252,6 +252,7 @@ Contributors
|
|||
* Emily Horsman
|
||||
* jcronyn
|
||||
* Ben Sturmfels
|
||||
* Anselm Bradford
|
||||
|
||||
Translators
|
||||
===========
|
||||
|
|
|
|||
4
Makefile
4
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
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ machine:
|
|||
dependencies:
|
||||
pre:
|
||||
- pip install -e .[testing]
|
||||
- gem install scss_lint
|
||||
|
||||
test:
|
||||
override:
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
// scss-lint:disable DeclarationOrder
|
||||
|
||||
.c-explorer__item {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
$ gem install scss_lint
|
||||
|
||||
|
||||
Then run the linter from the wagtail project root:
|
||||
Run the linter from the wagtail project root:
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
$ npm run lint:css
|
||||
|
||||
The linter is configured to check your code for adherance to the guidelines below, plus a little more.
|
||||
|
||||
The linter is configured to check your code for adherance to the guidelines
|
||||
below, plus a little more.
|
||||
|
||||
If you want to autofix errors, you can run that command directly with:
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
$ npm run lint:css -- --fix
|
||||
|
||||
|
||||
Spacing
|
||||
|
|
|
|||
Plik diff jest za duży
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
}
|
||||
|
||||
.listing {
|
||||
|
||||
td,
|
||||
th {
|
||||
vertical-align: top;
|
||||
|
|
@ -118,7 +117,7 @@
|
|||
float: left;
|
||||
margin: 0 15px 15px 0;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
&:before {
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
.button-neutral {
|
||||
color: $color-grey-2;
|
||||
|
||||
&:before {
|
||||
line-height: 1.7em;
|
||||
}
|
||||
&:hover {
|
||||
color: $color-teal;
|
||||
}
|
||||
}
|
||||
|
||||
.button-neutral {
|
||||
color: $color-grey-2;
|
||||
.yes {
|
||||
background-color: $color-button-yes;
|
||||
border: 1px solid $color-button-yes;
|
||||
|
||||
&:hover {
|
||||
color: $color-teal;
|
||||
}
|
||||
}
|
||||
|
||||
.yes {
|
||||
background-color: $color-button-yes;
|
||||
&.button-secondary {
|
||||
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;
|
||||
color: $color-button-yes;
|
||||
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;
|
||||
}
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
border-color: transparent;
|
||||
background-color: $color-button-yes-hover;
|
||||
}
|
||||
|
||||
.button-small.bicolor {
|
||||
padding-left: 3.5em;
|
||||
|
||||
&:before {
|
||||
width: 2em;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.65em;
|
||||
}
|
||||
&.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 {
|
||||
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ header {
|
|||
.col {
|
||||
float: left;
|
||||
margin-right: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@
|
|||
// =============================================================================
|
||||
// Custom config for various icons
|
||||
// =============================================================================
|
||||
|
||||
.icon-download {
|
||||
// Credit: Icon made by Freepik from Flaticon.com
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,8 +23,6 @@ $c-indicator-margin: .25rem;
|
|||
// =============================================================================
|
||||
// States
|
||||
// =============================================================================
|
||||
|
||||
|
||||
.is-absent .c-indicator {
|
||||
background: $color-state-absent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@ $zindex-modal-background: 500;
|
|||
|
||||
// Fade for backdrop
|
||||
&.fade { opacity: 0; }
|
||||
|
||||
&.in { opacity: 0.5; }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
// From Bootstrap v3.0.0
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: 1030;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
.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;
|
||||
}
|
||||
&: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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,82 +49,79 @@ form {
|
|||
}
|
||||
}
|
||||
|
||||
label {
|
||||
width: auto;
|
||||
color: $color-white;
|
||||
}
|
||||
label {
|
||||
width: auto;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 1.5em;
|
||||
padding: 1.1em 2.4em;
|
||||
height: 3.5em;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
input[type=checkbox]:before {
|
||||
background-color: #333;
|
||||
color: #555;
|
||||
border: 1px solid #555;
|
||||
}
|
||||
|
||||
.fields {
|
||||
max-width: none;
|
||||
}
|
||||
.fields {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.fields li {
|
||||
padding: 1em 0;
|
||||
.fields li {
|
||||
padding: 1em 0;
|
||||
|
||||
&.full {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
&.full {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input {
|
||||
border-top: 1px dashed $color-input-border;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child input {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fields .checkbox {
|
||||
padding-top: 2em;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.iconfield .input:before {
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 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;
|
||||
border: 0;
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 1.5em;
|
||||
font-size: 1.6em;
|
||||
line-height: 1.6em;
|
||||
input {
|
||||
border-top: 1px dashed $color-input-border;
|
||||
}
|
||||
}
|
||||
|
||||
.help {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
font-size: 1.3em;
|
||||
top: 50%;
|
||||
margin-top: -0.5em;
|
||||
right: 5%;
|
||||
&:first-child input {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
.#{$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-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 {
|
||||
|
||||
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;
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
& + & {
|
||||
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;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: $color-white;
|
||||
background-color: rgba(100, 100, 100, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-icon {
|
||||
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 {
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.#{$namespace}-icon:before {
|
||||
transition: color .2s ease;
|
||||
font-size: 32px;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$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;
|
||||
}
|
||||
a,
|
||||
input {
|
||||
font-size: 14px !important;
|
||||
text-align: left;
|
||||
padding: 0.8em 1.7em 0.8em 2.7em;
|
||||
}
|
||||
|
||||
// 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 {
|
||||
|
||||
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;
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
& + & {
|
||||
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;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: $color-white;
|
||||
background-color: rgba(100, 100, 100, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-icon {
|
||||
position: relative;
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue