Lint project SCSS stylesheet files

This change adds linter for styles to the project and updates all styles
to conform with the default set of rules.

This should help us maintain a little bit more consistency in our
styles.

.sass-lint.yml

@@ -0,0 +1,100 @@
+# Copyright 2025 Google Inc. All Rights Reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# Configuration file for sass linter.
+# Schema can be found at: https://github.com/sasstools/sass-lint/blob/develop/docs/sass-lint.yml
+
+options:
+  formatter: stylish
+
+rules:
+  # Extends
+  extends-before-mixins: 2
+  extends-before-declarations: 2
+  placeholder-in-extend: 2
+
+  # Mixins
+  mixins-before-declarations: 2
+
+  # Line Spacing
+  one-declaration-per-line: 2
+  empty-line-between-blocks: 2
+  single-line-per-selector: 2
+
+  # Disallows
+  no-color-keywords: 2
+  no-color-literals: 2
+  no-css-comments: 2
+  no-debug: 2
+  no-duplicate-properties: 2
+  no-empty-rulesets: 2
+  no-extends: 0
+  no-ids: 2
+  no-important: 2
+  no-invalid-hex: 2
+  no-mergeable-selectors: 2
+  no-misspelled-properties: 2
+  no-qualifying-elements: 2
+  no-trailing-zero: 2
+  no-transition-all: 2
+  # Disabled because the project includes external fonts.
+  no-url-protocols: 0
+  no-vendor-prefixes: 2
+  no-warn: 2
+  property-units: 2
+
+  # Nesting
+  force-attribute-nesting: 2
+  force-element-nesting: 2
+  force-pseudo-nesting: 2
+
+  # Name Formats
+  class-name-format: 2
+  function-name-format: 2
+  id-name-format: 0
+  mixin-name-format: 2
+  placeholder-name-format: 2
+  variable-name-format: 2
+
+  # Style Guide
+  bem-depth: 0
+  border-zero: 2
+  brace-style: 2
+  clean-import-paths: 2
+  empty-args: 2
+  hex-length: 2
+  hex-notation: 2
+  indentation: 2
+  leading-zero: 2
+  nesting-depth: 2
+  property-sort-order: 2
+  quotes: 2
+  shorthand-values: 2
+  url-quotes: 2
+  variable-for-property: 2
+  zero-unit: 2
+
+  # Inner Spacing
+  space-after-comma: 2
+  space-before-colon: 2
+  space-after-colon: 2
+  space-before-brace: 2
+  space-before-bang: 2
+  space-after-bang: 2
+  space-between-parens: 2
+  space-around-operator: 2
+
+  # Final Items
+  trailing-semicolon: 2
+  final-newline: 2

build/check.js

@@ -18,6 +18,7 @@
 import gulp from 'gulp';
 import gulpClangFormat from 'gulp-clang-format';
 import gulpEslint from 'gulp-eslint';
+import gulpSassLint from 'gulp-sass-lint';
 import runSequence from 'run-sequence';
 import path from 'path';
 
@@ -50,7 +51,7 @@ gulp.task('check:create-cluster', function() {
  * Lints all projects code files.
  * // TODO(bryk): Also lint Go files here.
  */
-gulp.task('lint', ['lint-javascript', 'check-javascript-format']);
+gulp.task('lint', ['lint-javascript', 'check-javascript-format', 'lint-styles']);
 
 /**
  * Lints all projects JavaScript files using ESLint. This includes frontend source code, as well as,
@@ -66,6 +67,16 @@ gulp.task('lint-javascript', function() {
       .pipe(gulpEslint.failOnError());
 });
 
+/**
+ * Lints all SASS files in the project.
+ */
+gulp.task('lint-styles', function() {
+  return gulp.src(path.join(conf.paths.src, '**/*.scss'))
+      .pipe(gulpSassLint())
+      .pipe(gulpSassLint.format())
+      .pipe(gulpSassLint.failOnError());
+});
+
 /**
  * Checks whether project's JavaScript files are formatted according to clang-format style.
  */

package.json

@@ -43,12 +43,13 @@
     "gulp-rev": "~6.0.1",
     "gulp-rev-replace": "~0.4.2",
     "gulp-sass": "~2.1.0",
+    "gulp-sass-lint": "^1.1.0",
     "gulp-size": "~2.0.0",
     "gulp-sourcemaps": "~1.6.0",
     "gulp-uglify": "~1.5.1",
+    "gulp-untar": "~0.0.4",
     "gulp-useref": "~3.0.3",
     "gulp-util": "~3.0.6",
-    "gulp-untar": "~0.0.4",
     "gulp-watch": "~4.3.5",
     "karma": "~0.13.9",
     "karma-browserify": "~4.4.0",
@@ -58,13 +59,13 @@
     "karma-ng-html2js-preprocessor": "~0.2.0",
     "karma-sourcemap-loader": "~0.3.6",
     "lodash": "~3.10.1",
-    "uglify-save-license": "~0.4.1",
     "path-exists": "~2.1.0",
     "proxy-middleware": "~0.15.0",
     "q": "~1.4.1",
     "request": "~2.67.0",
     "run-sequence": "~1.1.5",
     "semver": "~2.0.0",
+    "uglify-save-license": "~0.4.1",
     "vinyl-source-stream": "1.1.0",
     "webpack-stream": "~3.1.0",
     "wiredep": "~3.0.0-beta",

src/app/assets/styles/_color_variables.scss

@@ -13,8 +13,13 @@
 // limitations under the License.
 
 // TODO(floreks): Find appropriate place for global color definitions.
-$primary: #326DE6;
-$delicate: #AAAAAA;
-$muted: #888888;
-$hoverPrimary: #1254DF;
-$body: #eeeeee;
+$primary: #326de6;
+$delicate: #aaa;
+$muted: #888;
+$hover-primary: #1254df;
+$body: #eee;
+$emphasis: #000;
+$content-background: #fff;
+// TODO(bryk): Reference angular_material/src/core/style/variables.scss instead of having
+// this variable here.
+$whiteframe-shadow-z1: 0 2px 5px 0 rgba(0, 0, 0, .26) !default;

src/app/frontend/chrome/chrome.scss

@@ -12,18 +12,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import "../../assets/styles/color_variables";
+@import '../../assets/styles/color_variables';
 
 .kd-toolbar-logo {
   height: 42px;
-  width: 42px;
   margin-right: 1em;
+  width: 42px;
 }
 
 .kd-toolbar {
-  // Apply a little material design shadow at the bottom of the toolbar.
-  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.14),
-      0px 0px 2px 2px rgba(0, 0, 0, 0.098), 0px 0px 5px 1px rgba(0, 0, 0, 0.084);
+  box-shadow: $whiteframe-shadow-z1;
 }
 
 body {

src/app/frontend/deploy/deploy.scss

@@ -12,10 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import '../../assets/styles/color_variables';
+
 .kd-deploy-whiteframe {
-  background: white;
+  background: $content-background;
   margin: 1em;
   // TODO(bryk): Find a better, application wide constant for the min width.
-  min-width: 600px;
   max-width: 960px;
+  min-width: 600px;
 }

src/app/frontend/deploy/deploylabel.scss

@@ -13,8 +13,8 @@
 // limitations under the License.
 
 .kd-deploy-labels-button {
-  min-width: 10px;
+  height: 10px;
   margin: 0;
+  min-width: 10px;
   padding: 0;
-  height: 10px;
 }

src/app/frontend/deploy/helpsection/helpsection.scss

@@ -15,6 +15,6 @@
 // This rule is meant to align items only in the current layout (kd-help-section).
 .kd-help-section > * {
   flex: 1;
-  padding-right: 50px;
   margin-bottom: 20px;
+  padding-right: 50px;
 }

src/app/frontend/deploy/helpsection/userhelp.scss

@@ -11,22 +11,25 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-@import "../../../assets/styles/color_variables";
 
-.kd-user-help * {
-  color: $muted;
-}
+@import '../../../assets/styles/color_variables';
 
-.kd-user-help a {
-  color: $primary;
-  opacity: 1;
-  text-decoration: none;
-}
+.kd-user-help {
+  * {
+    color: $muted;
+  }
 
-.kd-user-help b {
-  color: black;
-}
+  a {
+    color: $primary;
+    opacity: 1;
+    text-decoration: none;
+
+    &:hover {
+      color: $hover-primary;
+    }
+  }
 
-.kd-user-help a:hover {
-  color: $hoverPrimary;
+  b {
+    color: $emphasis;
+  }
 }

src/app/frontend/deploy/upload.scss

@@ -18,7 +18,7 @@
 }
 
 .kd-upload-label {
+  cursor: inherit;
   display: inline-block;
   width: 100%;
-  cursor: inherit;
 }

src/app/frontend/index.scss

@@ -14,7 +14,7 @@
 
 // Import Roboto material design font. It is recommended by the Angular Material spec.
 // TODO(bryk): Bundle the fonts with production binary to not import from external sites.
-@import url(//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic);
+@import url('//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic');
 
 // Angular Material icon font. It allows to use the icons as fonts.
-@import url(//fonts.googleapis.com/icon?family=Material+Icons);
+@import url('//fonts.googleapis.com/icon?family=Material+Icons');

src/app/frontend/replicasetdetail/replicasetdetail.html

@@ -18,7 +18,7 @@
   <div class="kd-replicasetdetail-sidebar" layout="column">
     <div class="kd-replicasetdetail-sidebar-header" flex layout-align="start center" layout="row">
       <a flex-offset="10" ui-sref="replicasets">
-        <i class="material-icons kd-replicasetdetail-sidebar-hedaer-icon">keyboard_backspace</i>
+        <i class="material-icons kd-replicasetdetail-sidebar-header-icon">keyboard_backspace</i>
       </a>
       <span flex-offset="5" flex class="md-title">
         {{ctrl.replicaSetDetail.name}}