From 64fb5903776ab085545a5f194b0ead57ba4e978e Mon Sep 17 00:00:00 2001
From: chh <1474479+chenhunghan@users.noreply.github.com>
Date: Tue, 14 Sep 2021 10:09:09 +0300
Subject: [PATCH] Fix sass warnings (#3783)

* Fix sass warnings

Signed-off-by: Hung-Han (Henry) Chen <chenhungh@gmail.com>

* Add a space

Signed-off-by: Hung-Han (Henry) Chen <chenhungh@gmail.com>

* Update src/renderer/components/input/input.scss

Co-authored-by: Jim Ehrismann <40840436+jim-docker@users.noreply.github.com>
Signed-off-by: Hung-Han (Henry) Chen <chenhungh@gmail.com>

* Response to comments

Signed-off-by: Hung-Han (Henry) Chen <chenhungh@gmail.com>

Co-authored-by: Jim Ehrismann <40840436+jim-docker@users.noreply.github.com>
---
 .../components/+apps-helm-charts/helm-charts.scss    |  2 +-
 src/renderer/components/+cluster/cluster-issues.scss |  1 -
 .../components/+config-maps/config-map-details.scss  |  2 +-
 .../+config-resource-quotas/add-quota-dialog.scss    |  6 +++---
 .../+config-secrets/add-secret-dialog.scss           |  2 +-
 .../components/+config-secrets/secret-details.scss   |  2 +-
 src/renderer/components/+events/events.scss          |  2 +-
 .../+namespaces/namespace-select-filter.scss         |  2 +-
 .../components/+namespaces/namespace-select.scss     |  2 +-
 .../+preferences/add-helm-repo-dialog.scss           |  2 +-
 .../+cluster-role-bindings/dialog.scss               |  2 +-
 .../+cluster-role-bindings/view.scss                 |  2 +-
 .../+user-management/+cluster-roles/view.scss        |  2 +-
 .../+user-management/+role-bindings/dialog.scss      |  2 +-
 .../+user-management/+role-bindings/view.scss        |  2 +-
 .../components/+user-management/+roles/view.scss     |  2 +-
 .../+user-management/+service-accounts/secret.scss   |  2 +-
 src/renderer/components/app.scss                     |  2 +-
 .../components/cluster-manager/bottom-bar.scss       |  4 ++--
 src/renderer/components/drawer/drawer-item.scss      |  2 +-
 src/renderer/components/icon/icon.scss               |  2 +-
 src/renderer/components/input/input.scss             |  9 ++++-----
 .../item-object-list/page-filters-list.scss          |  8 ++++----
 .../kube-object-status-icon.scss                     |  2 +-
 src/renderer/components/layout/sidebar-item.scss     |  5 ++---
 src/renderer/components/layout/sidebar.module.css    |  2 +-
 src/renderer/components/menu/menu-actions.scss       |  2 +-
 .../components/resizing-anchor/resizing-anchor.scss  | 12 ++++++------
 src/renderer/components/select/select.scss           |  8 ++++----
 src/renderer/components/stepper/stepper.scss         |  2 +-
 src/renderer/components/table/table.mixins.scss      |  6 +++---
 src/renderer/components/tabs/tabs.scss               |  2 +-
 32 files changed, 51 insertions(+), 54 deletions(-)

diff --git a/src/renderer/components/+apps-helm-charts/helm-charts.scss b/src/renderer/components/+apps-helm-charts/helm-charts.scss
index 491d6e2881..0a4c25f1a7 100644
--- a/src/renderer/components/+apps-helm-charts/helm-charts.scss
+++ b/src/renderer/components/+apps-helm-charts/helm-charts.scss
@@ -57,7 +57,7 @@
           visibility: hidden;
           border-radius: inherit;
           background-color: $helmImgBackground;
-          padding: $padding / 2;
+          padding: $padding * 0.5;
 
           &.visible {
             visibility: visible;
diff --git a/src/renderer/components/+cluster/cluster-issues.scss b/src/renderer/components/+cluster/cluster-issues.scss
index 84d19a3c8b..aadb46ee39 100644
--- a/src/renderer/components/+cluster/cluster-issues.scss
+++ b/src/renderer/components/+cluster/cluster-issues.scss
@@ -44,7 +44,6 @@
 
       .TableCell {
         padding-top: 0;
-        padding-bottom: floor($padding / 1.33);
       }
     }
 
diff --git a/src/renderer/components/+config-maps/config-map-details.scss b/src/renderer/components/+config-maps/config-map-details.scss
index 6e9d8ae281..7a69ff0b8f 100644
--- a/src/renderer/components/+config-maps/config-map-details.scss
+++ b/src/renderer/components/+config-maps/config-map-details.scss
@@ -26,7 +26,7 @@
     .name {
       color: $textColorSecondary;
       font-weight: $font-weight-bold;
-      padding-bottom: $padding / 2;
+      padding-bottom: $padding * 0.5;
     }
   }
 
diff --git a/src/renderer/components/+config-resource-quotas/add-quota-dialog.scss b/src/renderer/components/+config-resource-quotas/add-quota-dialog.scss
index 37d87ef7e5..ac91aa794e 100644
--- a/src/renderer/components/+config-resource-quotas/add-quota-dialog.scss
+++ b/src/renderer/components/+config-resource-quotas/add-quota-dialog.scss
@@ -25,7 +25,7 @@
   }
 
   .quota-entries {
-    margin: -$margin / 2;
+    margin: -$margin * 0.5;
 
     &:empty {
       display: none;
@@ -35,8 +35,8 @@
       --flex-gap: #{$padding};
       border: 1px solid $halfGray;
       border-radius: $radius;
-      margin: $margin / 2;
-      padding: $padding / 2 $padding;
+      margin: $margin * 0.5;
+      padding: $padding * 0.5 $padding;
       transition: all 150ms ease;
 
       &:hover {
diff --git a/src/renderer/components/+config-secrets/add-secret-dialog.scss b/src/renderer/components/+config-secrets/add-secret-dialog.scss
index 6150c39701..b0bd5c7869 100644
--- a/src/renderer/components/+config-secrets/add-secret-dialog.scss
+++ b/src/renderer/components/+config-secrets/add-secret-dialog.scss
@@ -35,6 +35,6 @@
     display: grid;
     grid-template-columns: min-content auto;
     align-items: center;
-    gap: $margin / 2;
+    gap: $margin * 0.5;
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+config-secrets/secret-details.scss b/src/renderer/components/+config-secrets/secret-details.scss
index 27c7483e58..ed879ce5a1 100644
--- a/src/renderer/components/+config-secrets/secret-details.scss
+++ b/src/renderer/components/+config-secrets/secret-details.scss
@@ -26,7 +26,7 @@
     .name {
       color: $textColorSecondary;
       font-weight: $font-weight-bold;
-      padding-bottom: $padding / 2;
+      padding-bottom: $padding * 0.5;
     }
   }
 
diff --git a/src/renderer/components/+events/events.scss b/src/renderer/components/+events/events.scss
index 2b22260558..28544e8cb2 100644
--- a/src/renderer/components/+events/events.scss
+++ b/src/renderer/components/+events/events.scss
@@ -43,7 +43,7 @@
   }
 
   .help-icon {
-    margin-left: $margin / 2;
+    margin-left: $margin * 0.5;
   }
 
   .show-all {
diff --git a/src/renderer/components/+namespaces/namespace-select-filter.scss b/src/renderer/components/+namespaces/namespace-select-filter.scss
index 21cc83a778..69aa0bff9a 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter.scss
+++ b/src/renderer/components/+namespaces/namespace-select-filter.scss
@@ -61,6 +61,6 @@
   }
 
   .Icon {
-    margin-right: $margin / 2;
+    margin-right: $margin * 0.5;
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+namespaces/namespace-select.scss b/src/renderer/components/+namespaces/namespace-select.scss
index e348f7025b..d526236f13 100644
--- a/src/renderer/components/+namespaces/namespace-select.scss
+++ b/src/renderer/components/+namespaces/namespace-select.scss
@@ -21,7 +21,7 @@
 
 @mixin namespaceSelectCommon {
   .Icon {
-    margin-right: $margin / 2;
+    margin-right: $margin * 0.5;
   }
 }
 
diff --git a/src/renderer/components/+preferences/add-helm-repo-dialog.scss b/src/renderer/components/+preferences/add-helm-repo-dialog.scss
index e1826f8005..c38c3bf7ce 100644
--- a/src/renderer/components/+preferences/add-helm-repo-dialog.scss
+++ b/src/renderer/components/+preferences/add-helm-repo-dialog.scss
@@ -38,6 +38,6 @@
     display: grid;
     grid-template-columns: min-content auto;
     align-items: center;
-    gap: $margin / 2;
+    gap: $margin * 0.5;
   }
 }
diff --git a/src/renderer/components/+user-management/+cluster-role-bindings/dialog.scss b/src/renderer/components/+user-management/+cluster-role-bindings/dialog.scss
index 08f93a582c..1378d724fb 100644
--- a/src/renderer/components/+user-management/+cluster-role-bindings/dialog.scss
+++ b/src/renderer/components/+user-management/+cluster-role-bindings/dialog.scss
@@ -1,6 +1,6 @@
 .AddClusterRoleBindingDialog {
   .Select + .Select {
-    margin-top: $margin /2;
+    margin-top: $margin *0.5;
   }
   .Checkbox {
     margin-top: $margin;
diff --git a/src/renderer/components/+user-management/+cluster-role-bindings/view.scss b/src/renderer/components/+user-management/+cluster-role-bindings/view.scss
index 17d4a31cb5..373c7a287c 100644
--- a/src/renderer/components/+user-management/+cluster-role-bindings/view.scss
+++ b/src/renderer/components/+user-management/+cluster-role-bindings/view.scss
@@ -1,6 +1,6 @@
 .ClusterRoleBindings {
   .help-icon {
-    margin-left: $margin / 2;
+    margin-left: $margin * 0.5;
   }
 
   .TableCell {
diff --git a/src/renderer/components/+user-management/+cluster-roles/view.scss b/src/renderer/components/+user-management/+cluster-roles/view.scss
index 2225c17a06..bc9a75780d 100644
--- a/src/renderer/components/+user-management/+cluster-roles/view.scss
+++ b/src/renderer/components/+user-management/+cluster-roles/view.scss
@@ -1,6 +1,6 @@
 .ClusterRoles {
   .help-icon {
-    margin-left: $margin / 2;
+    margin-left: $margin * 0.5;
   }
 
   .TableCell {
diff --git a/src/renderer/components/+user-management/+role-bindings/dialog.scss b/src/renderer/components/+user-management/+role-bindings/dialog.scss
index 2579137851..be98607bb1 100644
--- a/src/renderer/components/+user-management/+role-bindings/dialog.scss
+++ b/src/renderer/components/+user-management/+role-bindings/dialog.scss
@@ -21,7 +21,7 @@
 
 .AddRoleBindingDialog {
   .Select + .Select {
-    margin-top: $margin /2;
+    margin-top: $margin *0.5;
   }
   .Checkbox {
     margin-top: $margin;
diff --git a/src/renderer/components/+user-management/+role-bindings/view.scss b/src/renderer/components/+user-management/+role-bindings/view.scss
index 76d593e9f1..84562c378a 100644
--- a/src/renderer/components/+user-management/+role-bindings/view.scss
+++ b/src/renderer/components/+user-management/+role-bindings/view.scss
@@ -21,7 +21,7 @@
 
 .RoleBindings {
   .help-icon {
-    margin-left: $margin / 2;
+    margin-left: $margin * 0.5;
   }
 
   .TableCell {
diff --git a/src/renderer/components/+user-management/+roles/view.scss b/src/renderer/components/+user-management/+roles/view.scss
index 66438b7974..d976bfeb9a 100644
--- a/src/renderer/components/+user-management/+roles/view.scss
+++ b/src/renderer/components/+user-management/+roles/view.scss
@@ -21,7 +21,7 @@
 
 .Roles {
   .help-icon {
-    margin-left: $margin / 2;
+    margin-left: $margin * 0.5;
   }
 
   .TableCell {
diff --git a/src/renderer/components/+user-management/+service-accounts/secret.scss b/src/renderer/components/+user-management/+service-accounts/secret.scss
index df4e07a143..21cd9a106d 100644
--- a/src/renderer/components/+user-management/+service-accounts/secret.scss
+++ b/src/renderer/components/+user-management/+service-accounts/secret.scss
@@ -55,7 +55,7 @@
 
   .asterisks {
     font-size: large;
-    margin-right: $margin / 2;
+    margin-right: $margin * 0.5;
     line-height: 90%;
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss
index e1d002c8f7..8490f986c8 100755
--- a/src/renderer/components/app.scss
+++ b/src/renderer/components/app.scss
@@ -154,7 +154,7 @@ h4 {
 
 h5 {
   @extend h4;
-  padding: $padding / 2 0;
+  padding: $padding * 0.5 0;
   font-size: 16px;
 }
 
diff --git a/src/renderer/components/cluster-manager/bottom-bar.scss b/src/renderer/components/cluster-manager/bottom-bar.scss
index c09e75889f..aca8272489 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.scss
+++ b/src/renderer/components/cluster-manager/bottom-bar.scss
@@ -20,7 +20,7 @@
  */
 
 .BottomBar {
-  $spacing: $padding / 2;
+  $spacing: $padding * 0.5;
   --flex-gap: #{$spacing};
 
   background-color: var(--blue);
@@ -31,7 +31,7 @@
     font-size: var(--font-size-small);
     color: white;
     .item {
-      padding: $padding / 4 $padding / 2;
+      padding: $padding * 0.25 $padding * 0.5;
       &:hover {
         background-color: #ffffff33;
         cursor: pointer;
diff --git a/src/renderer/components/drawer/drawer-item.scss b/src/renderer/components/drawer/drawer-item.scss
index 37ea87947b..16f35270a1 100644
--- a/src/renderer/components/drawer/drawer-item.scss
+++ b/src/renderer/components/drawer/drawer-item.scss
@@ -58,7 +58,7 @@
   }
 
   &.labelsOnly {
-    $spacing: $margin / 2;
+    $spacing: $margin * 0.5;
 
     > .value {
       margin: -$spacing;
diff --git a/src/renderer/components/icon/icon.scss b/src/renderer/components/icon/icon.scss
index 02501b3716..1efddb2a7b 100644
--- a/src/renderer/components/icon/icon.scss
+++ b/src/renderer/components/icon/icon.scss
@@ -123,7 +123,7 @@
     color: $textColorAccent;
     border-radius: 50%;
     box-sizing: content-box;
-    padding: $padding / 2;
+    padding: $padding * 0.5;
   }
 
   &.active {
diff --git a/src/renderer/components/input/input.scss b/src/renderer/components/input/input.scss
index 33369694a3..a14f6ee2e1 100644
--- a/src/renderer/components/input/input.scss
+++ b/src/renderer/components/input/input.scss
@@ -45,10 +45,9 @@
   }
 
   label {
-    --flex-gap: #{$padding / 1.5};
-
+    --flex-gap: $padding * 0.6667;
     position: relative;
-    padding: $padding / 4 * 3 0;
+    padding: $padding * 0.75 0;
     border-bottom: 1px solid $halfGray;
     line-height: 1;
 
@@ -102,7 +101,7 @@
     .maxLengthIndicator {
       text-align: right;
       font-size: 80%;
-      padding: $padding / 3;
+      padding: $padding * 0.33333;
     }
   }
 
@@ -119,7 +118,7 @@
         border-radius: $radius;
         border: 1px solid $halfGray;
         color: inherit;
-        padding: $padding / 4 * 3 $padding / 4 * 3;
+        padding: $padding * 0.25 * 3 $padding * 0.25 * 3;
 
         &:focus-within {
           border-color: $colorInfo;
diff --git a/src/renderer/components/item-object-list/page-filters-list.scss b/src/renderer/components/item-object-list/page-filters-list.scss
index 8876f53a9c..f3400e0da3 100644
--- a/src/renderer/components/item-object-list/page-filters-list.scss
+++ b/src/renderer/components/item-object-list/page-filters-list.scss
@@ -41,12 +41,12 @@
 
   > .header {
     --flex-gap: #{$padding};
-    margin-bottom: $padding / 2;
+    margin-bottom: $padding * 0.5;
     text-transform: uppercase;
   }
 
   > .labels {
-    $gap: $padding / 3;
+    $gap: $padding * 0.33333;
     margin-left: -$gap;
     margin-right: -$gap;
 
@@ -54,9 +54,9 @@
       --flex-gap: .25em;
       display: inline-flex;
       margin: $gap;
-      padding: $padding /3;
+      padding: $padding * 0.33333;
       vertical-align: middle;
       overflow: visible;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/kube-object-status-icon/kube-object-status-icon.scss b/src/renderer/components/kube-object-status-icon/kube-object-status-icon.scss
index 9d93472e4d..3c39b6d06f 100644
--- a/src/renderer/components/kube-object-status-icon/kube-object-status-icon.scss
+++ b/src/renderer/components/kube-object-status-icon/kube-object-status-icon.scss
@@ -43,7 +43,7 @@
     }
 
     .msg {
-      margin: $margin / 2
+      margin: $margin * 0.5
     }
 
     .age {
diff --git a/src/renderer/components/layout/sidebar-item.scss b/src/renderer/components/layout/sidebar-item.scss
index 0a58a58ed1..2ce77718ed 100644
--- a/src/renderer/components/layout/sidebar-item.scss
+++ b/src/renderer/components/layout/sidebar-item.scss
@@ -20,7 +20,6 @@
  */
 
 .SidebarItem {
-  $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
 
   display: flex;
   flex-direction: column;
@@ -30,7 +29,7 @@
 
   > .nav-item {
     text-decoration: none;
-    padding: $itemSpacing;
+    padding: $unit * 0.3846 $unit * 0.625; // ≈ floor($unit / 2.6) floor($unit / 1.6)
     width: 100%;
     height: 100%;
     color: inherit;
@@ -81,4 +80,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/layout/sidebar.module.css b/src/renderer/components/layout/sidebar.module.css
index ad8f13cfa1..cf1257627f 100644
--- a/src/renderer/components/layout/sidebar.module.css
+++ b/src/renderer/components/layout/sidebar.module.css
@@ -53,4 +53,4 @@
   /* Simulate text-overflow:ellipsis styles but for multiple text lines */
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/menu/menu-actions.scss b/src/renderer/components/menu/menu-actions.scss
index 21dbe4acb7..2b2a36a030 100644
--- a/src/renderer/components/menu/menu-actions.scss
+++ b/src/renderer/components/menu/menu-actions.scss
@@ -21,7 +21,7 @@
 
 .MenuActions {
   &.toolbar {
-    --flex-gap: #{$padding / 2};
+    --flex-gap: #{$padding * 0.5};
 
     position: static;
     padding: 0;
diff --git a/src/renderer/components/resizing-anchor/resizing-anchor.scss b/src/renderer/components/resizing-anchor/resizing-anchor.scss
index 13cebe4b8e..149560f187 100644
--- a/src/renderer/components/resizing-anchor/resizing-anchor.scss
+++ b/src/renderer/components/resizing-anchor/resizing-anchor.scss
@@ -67,15 +67,15 @@ body.resizing {
     .resizing & {
       $expandedHeight: 200px;
       height: $expandedHeight;
-      margin-top: -$expandedHeight / 2;
+      margin-top: -$expandedHeight * 0.5;
 
       &::after {
-        margin-top: $expandedHeight / 2;
+        margin-top: $expandedHeight * 0.5;
       }
     }
 
     &.trailing {
-      bottom: -$dimension / 2;
+      bottom: -$dimension * 0.5;
     }
   }
 
@@ -92,16 +92,16 @@ body.resizing {
       width: $expandedWidth;
 
       &.trailing {
-        right: -$expandedWidth / 2;
+        right: -$expandedWidth * 0.5;
       }
     }
 
     &.leading {
-      left: -$dimension / 2;
+      left: -$dimension * 0.5;
     }
 
     &.trailing {
-      right: -$dimension / 2;
+      right: -$dimension * 0.5;
     }
   }
 }
diff --git a/src/renderer/components/select/select.scss b/src/renderer/components/select/select.scss
index 84f348f4c0..2eb97cf79b 100644
--- a/src/renderer/components/select/select.scss
+++ b/src/renderer/components/select/select.scss
@@ -68,7 +68,7 @@ html {
     }
 
     &__indicator {
-      padding: $padding /2;
+      padding: $padding *0.5;
       opacity: .55;
 
       &:hover {
@@ -84,7 +84,7 @@ html {
     &__dropdown {
       &-indicator {
         color: inherit !important;
-        padding: $padding / 2;
+        padding: $padding * 0.5;
       }
     }
 
@@ -101,7 +101,7 @@ html {
       }
 
       &-notice {
-        padding: $padding / 3;
+        padding: $padding * 0.3333;
       }
     }
 
@@ -200,7 +200,7 @@ html {
         color: $primary;
 
         .Select__value-container {
-          padding: 0 $padding / 2;
+          padding: 0 $padding * 0.5;
         }
 
         .Select__dropdown-indicator {
diff --git a/src/renderer/components/stepper/stepper.scss b/src/renderer/components/stepper/stepper.scss
index a1229ac7e4..ad26910172 100644
--- a/src/renderer/components/stepper/stepper.scss
+++ b/src/renderer/components/stepper/stepper.scss
@@ -68,7 +68,7 @@
     position: absolute;
     width: 100%;
     height: 1px;
-    top: $pointSize / 2;
+    top: $pointSize * 0.5;
     background: var(--stepper-color-point);
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/table/table.mixins.scss b/src/renderer/components/table/table.mixins.scss
index 12e009631d..7dc1b4d9f3 100644
--- a/src/renderer/components/table/table.mixins.scss
+++ b/src/renderer/components/table/table.mixins.scss
@@ -25,7 +25,7 @@
   flex: 0 0 55px !important;
 
   > * {
-    margin: floor($margin / 1.3) auto;
+    margin: 6px auto;
   }
 }
 
@@ -47,6 +47,6 @@
 }
 
 @mixin table-cell-labels-offsets {
-  padding-top: $padding / 2;
+  padding-top: $padding * 0.5;
   padding-bottom: 0;
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/tabs/tabs.scss b/src/renderer/components/tabs/tabs.scss
index 7b5b6d8e44..9ffc935415 100644
--- a/src/renderer/components/tabs/tabs.scss
+++ b/src/renderer/components/tabs/tabs.scss
@@ -71,7 +71,7 @@
       right: 0;
       bottom: 0;
       width: 0;
-      height: $unit /2;
+      height: $unit * 0.5;
       transition: width 150ms;
       background: currentColor;
       color: $halfGray