Change Sass linting configuration to take advantage of stylelint capabilities

pull/2189/merge
Thibaud Colas 2017-08-26 01:04:10 +03:00
rodzic a900965fba
commit eea0664116
21 zmienionych plików z 104 dodań i 67 usunięć

Wyświetl plik

@ -2,6 +2,7 @@ ignoreFiles:
- node_modules
plugins:
- stylelint-scss
# See https://github.com/stylelint/stylelint/blob/master/docs/user-guide/rules.md
rules:
block-closing-brace-newline-after:
- always
@ -15,6 +16,7 @@ rules:
color-hex-length: short
color-named: never
color-no-invalid-hex: true
comment-no-empty: true
declaration-bang-space-after: never
declaration-bang-space-before: always
declaration-block-no-duplicate-properties: true
@ -26,17 +28,27 @@ rules:
declaration-property-value-blacklist:
- /^border/: [none]
- severity: error
declaration-no-important: true
font-family-no-duplicate-names: true
function-calc-no-unspaced-operator: true
function-comma-space-after: always
function-linear-gradient-no-nonstandard-direction: true
function-parentheses-space-inside: never
function-url-quotes: always
indentation:
- 4
- severity: warning
length-zero-no-unit: true
max-nesting-depth: 5
max-nesting-depth: 3
media-feature-name-no-unknown: true
no-empty-source: true
no-eol-whitespace: true
no-extra-semicolons: true
no-missing-end-of-source-newline: true
number-no-trailing-zeros: true
number-leading-zero: always
property-case: lower
property-no-unknown: true
rule-empty-line-before:
- always
- except:
@ -53,4 +65,14 @@ rules:
- class
selector-list-comma-newline-after: always
selector-max-id: 0
selector-pseudo-element-no-unknown: true
selector-type-no-unknown: true
scss/at-rule-no-unknown: true
scss/media-feature-value-dollar-variable: always
scss/selector-no-redundant-nesting-selector: true
string-no-newline: true
string-quotes: single
unit-no-unknown: true
unit-case: lower
value-no-vendor-prefix: true
property-no-vendor-prefix: true

Wyświetl plik

@ -1,7 +1,7 @@
.o-pill {
display: inline-block;
padding: .2em .5em;
border-radius: .25em;
padding: 0.2em 0.5em;
border-radius: 0.25em;
vertical-align: middle;
line-height: 1.5;
}

Wyświetl plik

@ -1,3 +1,4 @@
// stylelint-disable declaration-no-important
.u-hidden {
display: none !important;
}

Wyświetl plik

@ -102,14 +102,14 @@ $menu-footer-height: 50px;
}
.c-explorer__header__inner {
padding: 1em .75em;
padding: 1em 0.75em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.icon {
color: $c-explorer-secondary;
margin-right: .25rem;
margin-right: 0.25rem;
font-size: 1rem;
}

Wyświetl plik

@ -49,7 +49,7 @@
justify-content: center;
flex-shrink: 0;
width: 50px;
padding: 0 .5em;
padding: 0 0.5em;
line-height: 1;
font-size: 2em;
cursor: pointer;

Wyświetl plik

@ -1,6 +1,6 @@
.c-status {
background: $color-grey-1;
text-transform: uppercase;
letter-spacing: .03rem;
letter-spacing: 0.03rem;
font-size: 10px;
}

Wyświetl plik

@ -87,8 +87,8 @@
outline: none;
box-sizing: border-box;
-webkit-font-smoothing: auto;
// stylelint-disable-next-line property-no-vendor-prefix
-moz-appearance: none;
-moz-box-sizing: border-box;
&:hover {
background-color: #358c8b;
@ -98,7 +98,9 @@
}
li.selected a {
// stylelint-disable-next-line declaration-no-important
color: #fff !important;
// stylelint-disable-next-line declaration-no-important
border-color: #43b1b0 !important;
background-color: #43b1b0;
}
@ -137,7 +139,7 @@ p.no-results {
}
@media screen and (min-width: 50em) {
@media screen and (min-width: $breakpoint-mobile) {
.changelist-filter {
float: right;
padding: 0 1.5%;
@ -174,7 +176,7 @@ p.no-results {
}
@media screen and (min-width: 1200px) {
@media screen and (min-width: $breakpoint-desktop-large) {
.result-list.col9 {
width: 79%;
}

Wyświetl plik

@ -100,8 +100,6 @@ section {
}
ul {
-webkit-column-count: 3; // Chrome, Safari, Opera
-moz-column-count: 3; // Firefox
column-count: 3;
}

Wyświetl plik

@ -153,6 +153,7 @@
height: 2.3em;
line-height: 2.3em;
// stylelint-disable-next-line max-nesting-depth
&:first-child {
border-top-width: 0;
}
@ -289,12 +290,6 @@
}
.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;
}
@ -321,6 +316,7 @@
cursor: pointer;
> .xdsoft_scroller {
// stylelint-disable-next-line declaration-no-important
background: #ccc !important;
height: 20px;
border-radius: 3px;

Wyświetl plik

@ -60,6 +60,7 @@
&.icon {
padding-right: 5em;
// stylelint-disable-next-line max-nesting-depth
&:before,
&:after {
right: 1em;
@ -238,7 +239,7 @@
display: inline-block;
vertical-align: middle;
line-height: 1;
margin-top: -.25rem;
margin-top: -0.25rem;
}
.c-dropdown__button {
@ -254,7 +255,6 @@
cursor: pointer;
-webkit-font-smoothing: subpixel-antialiased;
user-select: none;
-webkit-user-select: none;
}
.c-dropdown__toggle {
@ -262,22 +262,22 @@
}
.c-dropdown__menu.c-dropdown__menu {
margin-top: .75rem;
padding: .75rem 1rem;
margin-top: 0.75rem;
padding: 0.75rem 1rem;
min-width: 8rem;
text-transform: none;
position: absolute;
z-index: 1;
animation: dropdownIn .1s ease-out backwards;
animation: dropdownIn 0.1s ease-out backwards;
list-style: none;
}
.c-dropdown__item {
margin-bottom: .375rem;
margin-bottom: 0.375rem;
&:hover {
.c-dropdown__indicator {
opacity: .6;
opacity: 0.6;
}
}
}
@ -300,7 +300,7 @@
// =============================================================================
.u-arrow:before {
content: '';
border: solid .35rem transparent;
border: solid 0.35rem transparent;
display: block;
position: absolute;
}

Wyświetl plik

@ -216,8 +216,6 @@ a.tag:hover {
margin: -15px 0 0 -15px;
font-family: wagtail;
animation: spin 0.5s infinite linear;
-webkit-animation: spin 0.5s infinite linear;
-moz-animation: spin 0.5s infinite linear;
content: '1';
z-index: 2;
color: $color-teal;

Wyświetl plik

@ -62,6 +62,7 @@ select,
border: 1px solid $color-input-border;
padding: 0.9em 1.2em;
background-color: $color-fieldset-hover;
// stylelint-disable-next-line property-no-vendor-prefix
-webkit-appearance: none;
color: $color-text-input;
font-size: 1.2em;
@ -136,6 +137,7 @@ input[type=checkbox] {
}
input[type=radio] {
// stylelint-disable-next-line property-no-vendor-prefix
-webkit-appearance: radio;
width: auto;
position: relative;
@ -168,6 +170,7 @@ input[type=radio]:checked:before {
}
input[type=checkbox] {
// stylelint-disable-next-line property-no-vendor-prefix
-webkit-appearance: checkbox;
width: auto;
position: relative;
@ -222,6 +225,7 @@ input[type=checkbox]:checked:before {
outline: none;
box-sizing: border-box;
-webkit-font-smoothing: auto;
// stylelint-disable-next-line property-no-vendor-prefix
-moz-appearance: none;
&:hover {
@ -362,6 +366,7 @@ input[type=checkbox]:checked:before {
outline: none;
box-sizing: border-box;
-webkit-font-smoothing: auto;
// stylelint-disable-next-line property-no-vendor-prefix
-moz-appearance: none;
}
@ -452,6 +457,7 @@ input[type=checkbox]:checked:before {
height: 1.8rem;
width: 1.8rem;
// stylelint-disable-next-line max-nesting-depth
&:before {
line-height: 1.7em;
}

Wyświetl plik

@ -6,15 +6,15 @@
// =============================================================================
// Indicator light
// =============================================================================
$c-indicator-size: .625em;
$c-indicator-margin: .25rem;
$c-indicator-size: 0.625em;
$c-indicator-margin: 0.25rem;
.c-indicator {
display: inline-block;
border-radius: 50rem;
width: $c-indicator-size;
height: $c-indicator-size;
margin-top: -.125rem;
margin-top: -0.125rem;
margin-right: $c-indicator-margin;
font-size: 1rem;
vertical-align: middle;

Wyświetl plik

@ -194,6 +194,7 @@ ul.listing {
color: inherit;
text-decoration: none;
// stylelint-disable max-nesting-depth
&:hover {
color: $color-link;
}

Wyświetl plik

@ -2,6 +2,26 @@
@import 'wagtailadmin/scss/mixins';
@import 'wagtailadmin/scss/grid';
@keyframes nod {
from {
transform: rotate(2deg);
}
to {
transform: rotate(8deg);
}
}
@keyframes tail-wag {
from {
transform: rotate(-3deg);
}
to {
transform: rotate(7deg);
}
}
.logo {
display: block;
text-align: left;
@ -50,10 +70,12 @@
transition: inherit;
&.wagtail-logo__eye--open {
// stylelint-disable-next-line declaration-no-important
display: inline !important; // doesn't work without `!important`, likely a specificity issue
}
&.wagtail-logo__eye--closed {
// stylelint-disable-next-line declaration-no-important
display: none !important;
}
}
@ -68,39 +90,22 @@
// Wagtail 'playful' animation (tail-wag, triggered by JS in base.html):
&.logo-playful {
&:hover {
@keyframes nod {
from {
transform: rotate(2deg);
}
to {
transform: rotate(8deg);
}
}
@keyframes tail-wag {
from {
transform: rotate(-3deg);
}
to {
transform: rotate(7deg);
}
}
animation: nod 1.2s forwards;
.wagtail-logo {
// stylelint-disable max-nesting-depth
&.wagtail-logo__tail {
animation: tail-wag 0.09s alternate;
animation-iteration-count: infinite;
}
&.wagtail-logo__eye--open {
// stylelint-disable-next-line declaration-no-important
display: none !important;
}
&.wagtail-logo__eye--closed {
// stylelint-disable-next-line declaration-no-important
display: inline !important;
}
}

Wyświetl plik

@ -436,6 +436,8 @@ body.explorer-open {
}
}
// stylelint-disable scss/media-feature-value-dollar-variable
// 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) {

Wyświetl plik

@ -1,7 +1,7 @@
$zindex-modal-background: 500;
.fade {
@include transition(opacity .15s linear);
@include transition(opacity 0.15s linear);
opacity: 0;
&.in {
@ -14,7 +14,6 @@ $zindex-modal-background: 500;
overflow: hidden;
.content-wrapper {
-webkit-transform: none;
transform: none;
}
}
@ -104,6 +103,7 @@ $zindex-modal-background: 500;
}
.header-title {
// stylelint-disable-next-line declaration-no-important
padding-left: 0 !important;
margin-left: -36px;
}

Wyświetl plik

@ -44,7 +44,7 @@ body {
&:after {
content: '';
position: fixed;
transition: visibility 0s linear 0s, opacity .2s ease-out;
transition: visibility 0s linear 0s, opacity 0.2s ease-out;
background: rgba(255, 255, 255, 0.5);
width: 100%;
height: 100%;
@ -174,8 +174,10 @@ footer {
}
}
@media screen and (min-width: 90em) {
width: 90em;
$width-1440px: 90em;
@media screen and (min-width: $width-1440px) {
width: $width-1440px;
}
}
@ -234,6 +236,7 @@ footer {
&.home {
a {
// stylelint-disable max-nesting-depth
padding-right: 0;
text-align: center;
width: 3em;

Wyświetl plik

@ -284,6 +284,7 @@
font-size: 0; // helps fake the effect of t.ext-replace class, which can't be used here.
width: 2em;
// stylelint-disable max-nesting-depth
&:before {
position: relative;
padding: 0;

Wyświetl plik

@ -9,7 +9,7 @@
$size-home-button: 3.5em;
$position: 2em;
$width-arrow: .6em;
$width-arrow: 0.6em;
$box-shadow-props: 0 0 1px 0 rgba(107, 214, 230, 1);
$max-items: 12;
$userbar-radius: 6px;
@ -88,6 +88,7 @@ $positions: (
.#{$namespace}-userbar {
position: fixed;
z-index: 9999;
// stylelint-disable-next-line declaration-no-important
font-size: initial !important;
line-height: initial;
margin: 0;
@ -105,7 +106,7 @@ $positions: (
}
}
// stylelint-disable declaration-no-important
.#{$namespace}-userbar-trigger {
display: flex;
align-items: center;
@ -119,7 +120,7 @@ $positions: (
color: $color-black;
padding: 0 !important;
cursor: pointer;
box-shadow: $box-shadow-props, 0 1px 10px 0 rgba(107, 214, 230, .7);
box-shadow: $box-shadow-props, 0 1px 10px 0 rgba(107, 214, 230, 0.7);
transition: all 0.2s ease-in-out;
font-size: 16px;
text-decoration: none !important;
@ -127,7 +128,7 @@ $positions: (
.#{$namespace}-userbar.touch.is-active &,
.#{$namespace}-userbar.no-touch &:hover {
box-shadow: $box-shadow-props, 0 3px 15px 0 rgba(107, 214, 230, .95);
box-shadow: $box-shadow-props, 0 3px 15px 0 rgba(107, 214, 230, 0.95);
}
.#{$namespace}-userbar-help-text {
@ -137,7 +138,7 @@ $positions: (
}
&.#{$namespace}-icon:before {
transition: color .2s ease;
transition: color 0.2s ease;
font-size: 32px;
width: auto;
margin: 0;
@ -170,13 +171,13 @@ $positions: (
height: 0;
opacity: 0;
border: solid $width-arrow transparent;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.55, 0, .1, 1);
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
.#{$namespace}-userbar.is-active & {
opacity: 1;
transform: translateY(0);
transition-delay: .3s;
transition-delay: 0.3s;
}
}
@ -200,8 +201,8 @@ $positions: (
background-color: $color-grey-1;
opacity: 0;
overflow: hidden;
transition-duration: .125s;
transition-timing-function: cubic-bezier(.55, 0, .1, 1);
transition-duration: 0.125s;
transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
font-family: 'Open Sans', sans-serif;
font-size: 16px !important;
text-decoration: none !important;
@ -319,7 +320,7 @@ $positions: (
}
&:#{unquote($prop)}(#{$i}) {
transition-delay: .05s * $i;
transition-delay: 0.05s * $i;
}
}
}

Wyświetl plik

@ -11,6 +11,7 @@
}
select + span:after {
// stylelint-disable-next-line declaration-no-important
font-size: 2.5em !important;
}
}