Commit 4818211a authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch 'tz-stylelint' into 'master'

Added Stylelint Setup

See merge request gitlab-org/gitlab-ce!25148
parents 1e5c83f2 0b535661
{
"extends": "stylelint-config-recommended",
"plugins": [
"stylelint-scss"
],
"rules": {
"no-descending-specificity": null,
"font-family-no-missing-generic-family-keyword": null,
"at-rule-no-unknown": [ true, {
ignoreAtRules: ["include", "each", "mixin", "extend", "if", "function", "for", "else", "return"]
}],
"selector-type-no-unknown": [true, {
"ignoreTypes": ["gl-emoji"]
}],
"unit-no-unknown" : [true, {
"ignoreFunctions": ["-webkit-image-set"]
}],
"scss/at-extend-no-missing-placeholder": null,
"scss/at-function-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
"scss/at-import-no-partial-leading-underscore": true,
"scss/at-import-partial-extension-blacklist": ["scss"],
"scss/at-mixin-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
"scss/at-rule-no-unknown": true,
"scss/dollar-variable-colon-space-after": "always",
"scss/dollar-variable-colon-space-before": "never",
"scss/dollar-variable-pattern": "^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
"scss/percent-placeholder-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
"scss/selector-no-redundant-nesting-selector": true,
}
}
...@@ -63,15 +63,15 @@ ...@@ -63,15 +63,15 @@
// //
// Pass in any number of transitions // Pass in any number of transitions
@mixin transition($transitions...) { @mixin transition($transitions...) {
$unfoldedTransitions: (); $unfolded-transitions: ();
@each $transition in $transitions { @each $transition in $transitions {
$unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma); $unfolded-transitions: append($unfolded-transitions, unfold-transition($transition), comma);
} }
transition: $unfoldedTransitions; transition: $unfolded-transitions;
} }
@mixin disableAllAnimation { @mixin disable-all-animation {
/*CSS transitions*/ /*CSS transitions*/
-o-transition-property: none !important; -o-transition-property: none !important;
-moz-transition-property: none !important; -moz-transition-property: none !important;
...@@ -92,27 +92,27 @@ ...@@ -92,27 +92,27 @@
animation: none !important; animation: none !important;
} }
@function unfoldTransition ($transition) { @function unfold-transition ($transition) {
// Default values // Default values
$property: all; $property: all;
$duration: $general-hover-transition-duration; $duration: $general-hover-transition-duration;
$easing: $general-hover-transition-curve; // Browser default is ease, which is what we want $easing: $general-hover-transition-curve; // Browser default is ease, which is what we want
$delay: null; // Browser default is 0, which is what we want $delay: null; // Browser default is 0, which is what we want
$defaultProperties: ($property, $duration, $easing, $delay); $default-properties: ($property, $duration, $easing, $delay);
// Grab transition properties if they exist // Grab transition properties if they exist
$unfoldedTransition: (); $unfolded-transition: ();
@for $i from 1 through length($defaultProperties) { @for $i from 1 through length($default-properties) {
$p: null; $p: null;
@if $i <= length($transition) { @if $i <= length($transition) {
$p: nth($transition, $i); $p: nth($transition, $i);
} @else { } @else {
$p: nth($defaultProperties, $i); $p: nth($default-properties, $i);
} }
$unfoldedTransition: append($unfoldedTransition, $p); $unfolded-transition: append($unfolded-transition, $p);
} }
@return $unfoldedTransition; @return $unfolded-transition;
} }
.btn { .btn {
......
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
.cur { .cur {
.avatar { .avatar {
@include disableAllAnimation; @include disable-all-animation;
border: 1px solid $white-light; border: 1px solid $white-light;
} }
} }
......
...@@ -49,13 +49,6 @@ ...@@ -49,13 +49,6 @@
word-wrap: normal; word-wrap: normal;
} }
// Multi-line code blocks should scroll horizontally
pre {
code {
white-space: pre;
}
}
kbd { kbd {
display: inline-block; display: inline-block;
padding: 3px 5px; padding: 3px 5px;
...@@ -166,6 +159,10 @@ ...@@ -166,6 +159,10 @@
overflow-x: auto; overflow-x: auto;
border-radius: 2px; border-radius: 2px;
// Multi-line code blocks should scroll horizontally
code {
white-space: pre;
}
&.plain-readme { &.plain-readme {
background: none; background: none;
...@@ -303,11 +300,10 @@ body { ...@@ -303,11 +300,10 @@ body {
} }
.page-title-empty { .page-title-empty {
margin-top: 0; margin: 12px 0;
line-height: 1.3; line-height: 1.3;
font-size: 1.25em; font-size: 1.25em;
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
margin: 12px 0;
} }
h1, h1,
......
...@@ -251,7 +251,7 @@ $gl-padding-top: 10px; ...@@ -251,7 +251,7 @@ $gl-padding-top: 10px;
$gl-sidebar-padding: 22px; $gl-sidebar-padding: 22px;
$gl-bar-padding: 3px; $gl-bar-padding: 3px;
$input-horizontal-padding: 12px; $input-horizontal-padding: 12px;
$browserScrollbarSize: 10px; $browser-scrollbar-size: 10px;
/* /*
* Misc * Misc
......
...@@ -125,7 +125,7 @@ $dark-il: #de935f; ...@@ -125,7 +125,7 @@ $dark-il: #de935f;
.diff-line-num.new, .diff-line-num.new,
.line_content.new { .line_content.new {
@include diff_background($dark-new-bg, $dark-new-idiff, $dark-border); @include diff-background($dark-new-bg, $dark-new-idiff, $dark-border);
&::before, &::before,
a { a {
...@@ -135,7 +135,7 @@ $dark-il: #de935f; ...@@ -135,7 +135,7 @@ $dark-il: #de935f;
.diff-line-num.old, .diff-line-num.old,
.line_content.old { .line_content.old {
@include diff_background($dark-old-bg, $dark-old-idiff, $dark-border); @include diff-background($dark-old-bg, $dark-old-idiff, $dark-border);
&::before, &::before,
a { a {
......
...@@ -125,7 +125,7 @@ $monokai-gi: #a6e22e; ...@@ -125,7 +125,7 @@ $monokai-gi: #a6e22e;
.diff-line-num.new, .diff-line-num.new,
.line_content.new { .line_content.new {
@include diff_background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border); @include diff-background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border);
&::before, &::before,
a { a {
...@@ -135,7 +135,7 @@ $monokai-gi: #a6e22e; ...@@ -135,7 +135,7 @@ $monokai-gi: #a6e22e;
.diff-line-num.old, .diff-line-num.old,
.line_content.old { .line_content.old {
@include diff_background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border); @include diff-background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border);
&::before, &::before,
a { a {
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
@mixin matchLine { @mixin match-line {
color: $black-transparent; color: $black-transparent;
background-color: $white-normal; background-color: $white-normal;
} }
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
&.match .line_content, &.match .line_content,
.new-nonewline.line_content, .new-nonewline.line_content,
.old-nonewline.line_content { .old-nonewline.line_content {
@include matchLine; @include match-line;
} }
.diff-line-num { .diff-line-num {
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
} }
&.match { &.match {
@include matchLine; @include match-line;
} }
&.hll:not(.empty-cell) { &.hll:not(.empty-cell) {
......
...@@ -129,7 +129,7 @@ $solarized-dark-il: #2aa198; ...@@ -129,7 +129,7 @@ $solarized-dark-il: #2aa198;
.diff-line-num.new, .diff-line-num.new,
.line_content.new { .line_content.new {
@include diff_background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border); @include diff-background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border);
&::before, &::before,
a { a {
...@@ -139,7 +139,7 @@ $solarized-dark-il: #2aa198; ...@@ -139,7 +139,7 @@ $solarized-dark-il: #2aa198;
.diff-line-num.old, .diff-line-num.old,
.line_content.old { .line_content.old {
@include diff_background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border); @include diff-background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border);
&::before, &::before,
a { a {
......
...@@ -90,7 +90,7 @@ $solarized-light-vg: #268bd2; ...@@ -90,7 +90,7 @@ $solarized-light-vg: #268bd2;
$solarized-light-vi: #268bd2; $solarized-light-vi: #268bd2;
$solarized-light-il: #2aa198; $solarized-light-il: #2aa198;
@mixin matchLine { @mixin match-line {
color: $black-transparent; color: $black-transparent;
background: $solarized-light-matchline-bg; background: $solarized-light-matchline-bg;
} }
...@@ -125,7 +125,7 @@ $solarized-light-il: #2aa198; ...@@ -125,7 +125,7 @@ $solarized-light-il: #2aa198;
&.match .line_content, &.match .line_content,
&.old-nonewline .line_content, &.old-nonewline .line_content,
&.new-nonewline .line_content { &.new-nonewline .line_content {
@include matchLine; @include match-line;
} }
td.diff-line-num.hll:not(.empty-cell), td.diff-line-num.hll:not(.empty-cell),
...@@ -136,7 +136,7 @@ $solarized-light-il: #2aa198; ...@@ -136,7 +136,7 @@ $solarized-light-il: #2aa198;
.diff-line-num.new, .diff-line-num.new,
.line_content.new { .line_content.new {
@include diff_background($solarized-light-new-bg, @include diff-background($solarized-light-new-bg,
$solarized-light-new-idiff, $solarized-light-border); $solarized-light-new-idiff, $solarized-light-border);
&::before, &::before,
...@@ -147,7 +147,7 @@ $solarized-light-il: #2aa198; ...@@ -147,7 +147,7 @@ $solarized-light-il: #2aa198;
.diff-line-num.old, .diff-line-num.old,
.line_content.old { .line_content.old {
@include diff_background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border); @include diff-background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border);
&::before, &::before,
a { a {
...@@ -168,7 +168,7 @@ $solarized-light-il: #2aa198; ...@@ -168,7 +168,7 @@ $solarized-light-il: #2aa198;
} }
.line_content.match { .line_content.match {
@include matchLine; @include match-line;
} }
&:not(.diff-expanded) + .diff-expanded, &:not(.diff-expanded) + .diff-expanded,
......
...@@ -70,7 +70,7 @@ $white-gc-color: #999; ...@@ -70,7 +70,7 @@ $white-gc-color: #999;
$white-gc-bg: #eaf2f5; $white-gc-bg: #eaf2f5;
@mixin matchLine { @mixin match-line {
color: $black-transparent; color: $black-transparent;
background-color: $gray-light; background-color: $gray-light;
} }
...@@ -105,7 +105,7 @@ pre.code, ...@@ -105,7 +105,7 @@ pre.code,
&.match .line_content, &.match .line_content,
.new-nonewline.line_content, .new-nonewline.line_content,
.old-nonewline.line_content { .old-nonewline.line_content {
@include matchLine; @include match-line;
} }
.diff-line-num { .diff-line-num {
...@@ -185,7 +185,7 @@ pre.code, ...@@ -185,7 +185,7 @@ pre.code,
} }
&.match { &.match {
@include matchLine; @include match-line;
} }
&.hll:not(.empty-cell) { &.hll:not(.empty-cell) {
......
...@@ -34,7 +34,6 @@ ...@@ -34,7 +34,6 @@
.detail-page-header-actions { .detail-page-header-actions {
align-self: center; align-self: center;
flex-shrink: 0;
flex: 0 0 auto; flex: 0 0 auto;
@include media-breakpoint-down(xs) { @include media-breakpoint-down(xs) {
......
...@@ -602,7 +602,7 @@ ...@@ -602,7 +602,7 @@
} }
} }
@mixin diff_background($background, $idiff, $border) { @mixin diff-background($background, $idiff, $border) {
background: $background; background: $background;
&.line_content span.idiff { &.line_content span.idiff {
......
...@@ -182,9 +182,8 @@ ...@@ -182,9 +182,8 @@
.template-selector-dropdowns-wrap { .template-selector-dropdowns-wrap {
display: inline-block; display: inline-block;
margin-left: 8px;
vertical-align: top;
margin: 5px 0 0 8px; margin: 5px 0 0 8px;
vertical-align: top;
@media(max-width: map-get($grid-breakpoints, md)-1) { @media(max-width: map-get($grid-breakpoints, md)-1) {
display: block; display: block;
......
...@@ -704,8 +704,8 @@ ...@@ -704,8 +704,8 @@
.scrolling-tabs-container { .scrolling-tabs-container {
.scrolling-tabs { .scrolling-tabs {
margin-top: $gl-padding-8; margin-top: $gl-padding-8;
margin-bottom: $gl-padding-8 - $browserScrollbarSize; margin-bottom: $gl-padding-8 - $browser-scrollbar-size;
padding-bottom: $browserScrollbarSize; padding-bottom: $browser-scrollbar-size;
flex-wrap: wrap; flex-wrap: wrap;
border-bottom: 0; border-bottom: 0;
} }
...@@ -713,7 +713,7 @@ ...@@ -713,7 +713,7 @@
.fade-left, .fade-left,
.fade-right { .fade-right {
top: 0; top: 0;
height: calc(100% - #{$browserScrollbarSize}); height: calc(100% - #{$browser-scrollbar-size});
.fa { .fa {
top: 50%; top: 50%;
......
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"prettier-staged-save": "node ./scripts/frontend/prettier.js save", "prettier-staged-save": "node ./scripts/frontend/prettier.js save",
"prettier-all": "node ./scripts/frontend/prettier.js check-all", "prettier-all": "node ./scripts/frontend/prettier.js check-all",
"prettier-all-save": "node ./scripts/frontend/prettier.js save-all", "prettier-all-save": "node ./scripts/frontend/prettier.js save-all",
"stylelint": "node node_modules/stylelint/bin/stylelint.js app/assets/stylesheets/**/*.*",
"webpack": "webpack --config config/webpack.config.js", "webpack": "webpack --config config/webpack.config.js",
"webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js" "webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
}, },
...@@ -168,7 +169,11 @@ ...@@ -168,7 +169,11 @@
"karma-webpack": "^4.0.0-beta.0", "karma-webpack": "^4.0.0-beta.0",
"nodemon": "^1.18.9", "nodemon": "^1.18.9",
"pixelmatch": "^4.0.2", "pixelmatch": "^4.0.2",
"postcss": "^7.0.14",
"prettier": "1.16.1", "prettier": "1.16.1",
"stylelint": "^9.10.1",
"stylelint-config-recommended": "^2.1.0",
"stylelint-scss": "^3.5.3",
"vue-jest": "^3.0.2", "vue-jest": "^3.0.2",
"webpack-dev-server": "^3.1.14", "webpack-dev-server": "^3.1.14",
"yarn-deduplicate": "^1.1.0" "yarn-deduplicate": "^1.1.0"
......
...@@ -29,6 +29,7 @@ tasks = [ ...@@ -29,6 +29,7 @@ tasks = [
%w[bin/rake lint:all], %w[bin/rake lint:all],
%w[bundle exec license_finder], %w[bundle exec license_finder],
%w[yarn run eslint], %w[yarn run eslint],
%w[yarn run stylelint],
%w[yarn run prettier-all], %w[yarn run prettier-all],
%w[bundle exec rubocop --parallel], %w[bundle exec rubocop --parallel],
%w[scripts/lint-conflicts.sh], %w[scripts/lint-conflicts.sh],
......
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment