diff --git a/.sass-lint.yml b/.sass-lint.yml index ea9e6bf3d8..95cfcf2669 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -1,6 +1,9 @@ files: - include: juju-gui/**/*.scss - exclude: juju-gui/static/gui/src/app/assets/css/plugins/** + include: + - 'jujugui/static/gui/src/app/assets/css/**/*.scss' + - 'jujugui/static/gui/src/app/components/**/*.scss' + ignore: + - 'jujugui/static/gui/src/app/assets/css/plugins/*.scss' options: formatter: stylish merge-default-rules: false diff --git a/Makefile b/Makefile index cad18dffd3..6953e7e795 100644 --- a/Makefile +++ b/Makefile @@ -293,7 +293,7 @@ lint-js: $(NODE_MODULES) .PHONY: lint-css lint-css: $(NODE_MODULES) - $(NODE_MODULES)/.bin/sass-lint '$(GUISRC)/**/*.scss' -q -v + $(NODE_MODULES)/.bin/sass-lint -q -v .PHONY: test test: test-python test-js test-js-old diff --git a/jujugui/static/gui/src/app/assets/css/_loading.scss b/jujugui/static/gui/src/app/assets/css/_loading.scss index 03213e62ab..e8a5cf2fbc 100644 --- a/jujugui/static/gui/src/app/assets/css/_loading.scss +++ b/jujugui/static/gui/src/app/assets/css/_loading.scss @@ -2,8 +2,8 @@ // e.g. connecting to Juju and browser not supported screens // scss-lint:disable IdSelector -#full-screen-mask { -// scss-lint:enable IdSelector +#full-screen-mask { // sass-lint:disable-line no-ids, id-name-format + // scss-lint:enable IdSelector display: block; position: absolute; z-index: index($z-indexed-elements, full-screen-mask); @@ -49,8 +49,8 @@ } // scss-lint:disable IdSelector - #loading-spinner { - // scss-lint:enable IdSelector + #loading-spinner { // sass-lint:disable-line no-ids, id-name-format + // scss-lint:enable IdSelector height: 100px; text-align: center; } diff --git a/jujugui/static/gui/src/app/assets/css/_mobile.scss b/jujugui/static/gui/src/app/assets/css/_mobile.scss index 4052b06ba7..2357b3c300 100644 --- a/jujugui/static/gui/src/app/assets/css/_mobile.scss +++ b/jujugui/static/gui/src/app/assets/css/_mobile.scss @@ -1,8 +1,8 @@ @media only screen and (max-width: 600px) { // Hide canvas on small screens // scss-lint:disable IdSelector - #viewport { - // scss-lint:enable IdSelector + #viewport { // sass-lint:disable-line no-ids, id-name-format + // scss-lint:enable IdSelector display: none; } @@ -238,8 +238,8 @@ // Import and export // scss-lint:disable IdSelector - #import-export-container { - // scss-lint:enable IdSelector + #import-export-container { // sass-lint:disable-line no-ids, id-name-format + // scss-lint:enable IdSelector bottom: 25px; left: 10px; position: fixed; diff --git a/jujugui/static/gui/src/app/assets/css/_shortcuts.scss b/jujugui/static/gui/src/app/assets/css/_shortcuts.scss index 9157abcd58..4e50ff5e82 100644 --- a/jujugui/static/gui/src/app/assets/css/_shortcuts.scss +++ b/jujugui/static/gui/src/app/assets/css/_shortcuts.scss @@ -1,7 +1,7 @@ // The keyboard shorcut panel // scss-lint:disable IdSelector -#shortcut-help { -// scss-lint:enable IdSelector +#shortcut-help { // sass-lint:disable-line no-ids, id-name-format + // scss-lint:enable IdSelector box-shadow: (0 1px 4.85px .15px rgba(0, 0, 0, .2)); position: absolute; left: 4%; diff --git a/jujugui/static/gui/src/app/assets/css/base.scss b/jujugui/static/gui/src/app/assets/css/base.scss index 25a2f664a8..fa8d766f9a 100644 --- a/jujugui/static/gui/src/app/assets/css/base.scss +++ b/jujugui/static/gui/src/app/assets/css/base.scss @@ -35,6 +35,7 @@ $panel-space: 10px; $box-shadow: 0 1px 4.85px .15px rgba(0, 0, 0, .2); // z-indexing +// sass-lint:disable indentation $z-indexed-elements: search-results-list-block__tags, search-results-list-block__tags-links, search-results-cell, @@ -60,6 +61,7 @@ $z-indexed-elements: search-results-list-block__tags, confirmation-popup, full-screen-mask, centered-column; +// sass-lint:enable indentation // Asset path used by Vanilla to load fonts instead of asset server $asset-path: 'static/gui/build/app/assets/'; diff --git a/jujugui/static/gui/src/app/assets/css/canvas/_canvas.scss b/jujugui/static/gui/src/app/assets/css/canvas/_canvas.scss index f3cfe553b7..91622271a3 100644 --- a/jujugui/static/gui/src/app/assets/css/canvas/_canvas.scss +++ b/jujugui/static/gui/src/app/assets/css/canvas/_canvas.scss @@ -1,4 +1,5 @@ // scss-lint:disable IdSelector +// sass-lint:disable no-ids, id-name-format #content { height: 100%; left: 0; @@ -15,6 +16,7 @@ position: relative; } // scss-lint:disable IdSelector +// sass-lint:enable no-ids, id-name-format .zoom-plane { cursor: move; diff --git a/jujugui/static/gui/src/app/assets/css/canvas/_relation-menu.scss b/jujugui/static/gui/src/app/assets/css/canvas/_relation-menu.scss index 721bfe0686..0c14dee873 100644 --- a/jujugui/static/gui/src/app/assets/css/canvas/_relation-menu.scss +++ b/jujugui/static/gui/src/app/assets/css/canvas/_relation-menu.scss @@ -100,8 +100,8 @@ } // scss-lint:disable IdSelector -#relation-menu { -// scss-lint:enable IdSelector +#relation-menu { // sass-lint:disable-line no-ids, id-name-format + // scss-lint:enable IdSelector $icon-size: 16px; $height: 30px; $gutter: 10px; diff --git a/jujugui/static/gui/src/app/components/deployment-flow/signup/_signup.scss b/jujugui/static/gui/src/app/components/deployment-flow/signup/_signup.scss index 1b4552413a..ea2ce3d1c3 100644 --- a/jujugui/static/gui/src/app/components/deployment-flow/signup/_signup.scss +++ b/jujugui/static/gui/src/app/components/deployment-flow/signup/_signup.scss @@ -62,26 +62,26 @@ } @media only screen and (min-width: $breakpoint-medium) { - .inline-logos__image { - min-height: 30px; - max-width: none; - } + .inline-logos__image { + min-height: 30px; + max-width: none; + } - .inline-logos__item { - height: auto; - width: auto; + .inline-logos__item { + height: auto; + width: auto; - &:first-of-type { - .inline-logos__image { - min-height: 70px; - } + &:first-of-type { + .inline-logos__image { + min-height: 70px; } + } - &:nth-child(2n) { - .inline-logos__image { - min-height: 45px; - } + &:nth-child(2n) { + .inline-logos__image { + min-height: 45px; } } } + } } diff --git a/jujugui/static/gui/src/app/components/entity-details/header/_header.scss b/jujugui/static/gui/src/app/components/entity-details/header/_header.scss index 0eb923753c..deaaabf05e 100644 --- a/jujugui/static/gui/src/app/components/entity-details/header/_header.scss +++ b/jujugui/static/gui/src/app/components/entity-details/header/_header.scss @@ -159,6 +159,7 @@ } // scss-lint:disable IdSelector + // sass-lint:disable no-ids, id-name-format #item-twitter, #item-googleplus { display: block; @@ -185,6 +186,7 @@ } } // scss-lint:enable IdSelector + // sass-lint:enable no-ids, id-name-format } diff --git a/jujugui/static/gui/src/app/components/expanding-progress/_expanding-progress.scss b/jujugui/static/gui/src/app/components/expanding-progress/_expanding-progress.scss index f9f49b5cde..2b503987b3 100644 --- a/jujugui/static/gui/src/app/components/expanding-progress/_expanding-progress.scss +++ b/jujugui/static/gui/src/app/components/expanding-progress/_expanding-progress.scss @@ -1,7 +1,7 @@ $expanding-progress-height: 10px; // scss-lint:disable IdSelector -#drag-over-notification-container { +#drag-over-notification-container { // sass-lint:disable-line no-ids, id-name-format margin-top: -$expanding-progress-height; } // scss-lint:enable IdSelector diff --git a/jujugui/static/gui/src/app/components/generic-input/_generic-input.scss b/jujugui/static/gui/src/app/components/generic-input/_generic-input.scss index c0040ea96e..994c11c179 100644 --- a/jujugui/static/gui/src/app/components/generic-input/_generic-input.scss +++ b/jujugui/static/gui/src/app/components/generic-input/_generic-input.scss @@ -13,24 +13,24 @@ &--focus, &--placeholder-present, &--value-present { - color: $cool-grey; - font-size: 12px; - top: 6px; + color: $cool-grey; + font-size: 12px; + top: 6px; } } &__multiline-field, &__field[type=text], &__field[type=password] { - @extend %input; - width: calc(100% - 20px); - margin-bottom: 20px; - padding-top: 25px; - padding-bottom: 7px; + @extend %input; + width: calc(100% - 20px); + margin-bottom: 20px; + padding-top: 25px; + padding-bottom: 7px; - &[aria-invalid='true'] { - border-color: $error; - } + &[aria-invalid='true'] { + border-color: $error; + } } &__errors { diff --git a/jujugui/static/gui/src/app/components/header-breadcrumb/_header-breadcrumb.scss b/jujugui/static/gui/src/app/components/header-breadcrumb/_header-breadcrumb.scss index 70564f3e1d..46550483d8 100644 --- a/jujugui/static/gui/src/app/components/header-breadcrumb/_header-breadcrumb.scss +++ b/jujugui/static/gui/src/app/components/header-breadcrumb/_header-breadcrumb.scss @@ -1,5 +1,5 @@ // scss-lint:disable IdSelector -#header-breadcrumb { +#header-breadcrumb { // sass-lint:disable-line no-ids, id-name-format @extend .vertical-center; float: left; } diff --git a/jujugui/static/gui/src/app/components/import-export/_import-export.scss b/jujugui/static/gui/src/app/components/import-export/_import-export.scss index 0a2a99b8fb..4effe4b85a 100644 --- a/jujugui/static/gui/src/app/components/import-export/_import-export.scss +++ b/jujugui/static/gui/src/app/components/import-export/_import-export.scss @@ -1,5 +1,5 @@ // scss-lint:disable IdSelector -#import-export-container { +#import-export-container { // sass-lint:disable-line no-ids, id-name-format @extend .vertical-center; float: left; margin-left: 10px; diff --git a/jujugui/static/gui/src/app/components/spinner/_spinner.scss b/jujugui/static/gui/src/app/components/spinner/_spinner.scss index f83413e51a..f3533146c6 100644 --- a/jujugui/static/gui/src/app/components/spinner/_spinner.scss +++ b/jujugui/static/gui/src/app/components/spinner/_spinner.scss @@ -61,8 +61,8 @@ } } // scss-lint:disable IdSelector -#loading-spinner { -// scss-lint:enable IdSelector +#loading-spinner { // sass-lint:disable-line no-ids, id-name-format + // scss-lint:enable IdSelector .spinner-loading { margin: 25px auto; diff --git a/jujugui/static/gui/src/app/components/svg-icon/_svg-icon.scss b/jujugui/static/gui/src/app/components/svg-icon/_svg-icon.scss index fcd06f92bf..42ab29efd4 100644 --- a/jujugui/static/gui/src/app/components/svg-icon/_svg-icon.scss +++ b/jujugui/static/gui/src/app/components/svg-icon/_svg-icon.scss @@ -4,6 +4,7 @@ } // scss-lint:disable IdSelector, SelectorFormat +// sass-lint:disable no-ids, id-name-format #close_16 path { stroke: inherit; } @@ -25,7 +26,8 @@ #export_16 path, #import_16 path, #add_16 path, -#minus_16 path, { +#minus_16 path { fill: currentColor; } // scss-lint:enable IdSelector, SelectorFormat +// sass-lint:enable no-ids, id-name-format