mgr/dashboard: add more scss linting rules

Fixes: https://tracker.ceph.com/issues/46108
Signed-off-by: Ishan Rai <ishanrai05@gmail.com>

diff --git a/src/pybind/mgr/dashboard/frontend/.stylelintrc b/src/pybind/mgr/dashboard/frontend/.stylelintrc
index 41599eb11a38b67f08990b37718e4adafdc9b729..1d2dde45254d71017c28222d50d6d97d3b4deaa0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/.stylelintrc
+++ b/src/pybind/mgr/dashboard/frontend/.stylelintrc
@@ -4,21 +4,21 @@
     "stylelint-declaration-use-variable"
   ],  
   "rules": {
-    "declaration-property-value-blacklist": null,
     "function-parentheses-space-inside": null,
     "indentation": null,
-    "property-no-vendor-prefix": null,
     "selector-no-qualifying-type": null,
     "selector-class-pattern": null,
     "selector-pseudo-element-no-unknown": null,
     "selector-max-id": null,
     "selector-max-compound-selectors": null,
-    "scss/selector-no-redundant-nesting-selector": null,
-    "scss/dollar-variable-pattern": null,
     "scss/at-extend-no-missing-placeholder": null,
     "max-nesting-depth": null,
     "scss/at-import-partial-extension-blacklist": null,
     "value-no-vendor-prefix": null,
+    "scss/dollar-variable-pattern": [
+      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+      "message": "Variable name should be written in lower kebab-case (scss/dollar-variable-pattern)"
+    ],
     "sh-waqar/declaration-use-variable": [
       [
         "/color/",

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
index 0d34b9035b37b42e113ff3ca03408677d4abe768..3685a06eca17855018c2631a2048af954ee6ffc9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
@@ -25,8 +25,7 @@
   .form-control,
   .form-control:focus {
     background-color: $color-password-toggle-bg;
-    border: none;
-    -webkit-box-shadow: none;
+    border: 0;
     box-shadow: none;
     color: $color-password-toggle-text;
     filter: none;

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
index 77e70f11a79a9d8c8a01ad6849c95ad2e82a3e6e..25b862564aaff5cd80221d0b940201bdf08ddc6e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
@@ -18,7 +18,7 @@
 }
 
 .modal-header {
-  border-bottom: none;
+  border-bottom: 0;
 }
 
 .modal-header .close {
@@ -38,7 +38,7 @@
 }
 
 .modal-footer {
-  border-top: none;
+  border-top: 0;
   display: block;
   padding: 15px 80px 35px;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
index 719bcaa29a66a43bcae43c7f416cac24fec32b5a..8f499568e122774dff7f064936a26006879ac943 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
@@ -127,7 +127,7 @@
         background-color: $color-nav-active-link-bg;
       }
 
-      & > li > a:hover {
+      > li > a:hover {
         background-color: $color-nav-active-link-bg;
       }
     }
@@ -192,7 +192,7 @@ $sidebar-width: 200px;
           color: $color-solid-white;
         }
 
-        & > .badge {
+        > .badge {
           margin-left: 5px;
         }
       }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
index 6d25985a05ed625ad173c35d4999a54bbbe3fed5..27ffa89164ab2b38018f5d9d565213607be299f8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
@@ -38,7 +38,7 @@
 .dataTables_header {
   background-color: $color-table-header-bg;
   border: 1px solid $color-table-header-border;
-  border-bottom: none;
+  border-bottom: 0;
   padding: 5px;
   position: relative;
 
@@ -126,16 +126,6 @@
   .datatable-header {
     background-clip: padding-box;
     background-color: $color-table-datatable-header;
-    background-image: -webkit-linear-gradient(
-      top,
-      $color-table-gradient-1 0,
-      $color-table-gradient-2 100%
-    );
-    background-image: -o-linear-gradient(
-      top,
-      $color-table-gradient-1 0,
-      $color-table-gradient-2 100%
-    );
     background-image: linear-gradient(
       to bottom,
       $color-table-gradient-1 0,
@@ -185,7 +175,7 @@
       }
 
       &:first-child {
-        border-left: none;
+        border-left: 0;
       }
     }
   }
@@ -227,7 +217,7 @@
         @include table-cell;
 
         &:first-child {
-          border-left: none;
+          border-left: 0;
         }
 
         .datatable-body-cell-label {

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 7d2e63602060da49077c5ef5a97dbb2d6f1c64c1..7a6c178ded24440cb41c129bec6aeef449362246 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -415,10 +415,6 @@ cd-modal {
 /* Notification icons */
 .toast-message .custom-icon {
   /* Display icons in white, regardless of their origin color. */
-  -webkit-filter: brightness(0) invert(1);
-  -moz-filter: brightness(0) invert(1);
-  -o-filter: brightness(0) invert(1);
-  -ms-filter: brightness(0) invert(1);
   filter: brightness(0) invert(1);
 }
 /* Block UI */

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss b/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss
index 53eacdb82021f4265af57c3877ed9ed87890b2d3..3e9469eea2860c307009f3d16ab5213aec66cf32 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss
@@ -8,9 +8,6 @@
 }
 
 canvas {
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }
 
@@ -23,9 +20,7 @@ canvas {
   pointer-events: none;
   position: absolute;
 
-  -webkit-transform: translate(-50%, 0);
   transform: translate(-50%, 0);
-  -webkit-transition: all 0.1s ease;
   transition: all 0.1s ease;
 
   &.transform-left {

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
index 3d949b6afe109bfe67e9ca99f165ed0484598a4a..4156153bc0a0b8adbe9c53113d4bfa426c69a9bc 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
@@ -161,7 +161,7 @@ $color-popover-date: $color-solid-gray !default;
 $color-rgw-icon: $color-blue-gray !default;
 
 @mixin table-cell {
-  border: none;
+  border: 0;
   border-bottom: 1px solid $color-light-gray;
   border-left: 1px solid $color-light-gray;
   padding: 5px;
@@ -183,17 +183,15 @@ $color-rgw-icon: $color-blue-gray !default;
   $u4: unit($max-font-size);
 
   @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
-    & {
-      font-size: $min-font-size;
-      @media screen and (min-width: $min-vw) {
-        font-size: calc(
-          #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
-            ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
-        );
-      }
-      @media screen and (min-width: $max-vw) {
-        font-size: $max-font-size;
-      }
+    font-size: $min-font-size;
+    @media screen and (min-width: $min-vw) {
+      font-size: calc(
+        #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
+          ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
+      );
+    }
+    @media screen and (min-width: $max-vw) {
+      font-size: $max-font-size;
     }
   }
 }