Correct manually :deep() statements

rancher · Sep 23, 2024 · 2c707b4 · 2c707b4
1 parent 8319730
commit 2c707b4
Show file tree

Hide file tree

Showing 21 changed files with 108 additions and 113 deletions.
diff --git a/pkg/kubectl-explain/components/ExplainPanel.vue b/pkg/kubectl-explain/components/ExplainPanel.vue
@@ -190,7 +190,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
   .main {
     overflow: auto;
@@ -302,24 +302,22 @@ export default {
     }
   }
 </style>
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
-  .markdown {
-    :deep( ) {
-      P {
-        line-height: 1.25;
-        margin-bottom: 10px;
-      }
+:deep(.markdown)  {
+  P {
+    line-height: 1.25;
+    margin-bottom: 10px;
+  }
 
-      LI:not(:last-child) {
-        margin-bottom: 10px;
-      }
+  LI:not(:last-child) {
+    margin-bottom: 10px;
+  }
 
-      code {
-        font-size: 12.5px;
-        line-height: normal;
-        padding: 0;
-      }
-    }
+  code {
+    font-size: 12.5px;
+    line-height: normal;
+    padding: 0;
   }
+}
 </style>
diff --git a/pkg/rancher-components/src/components/StringList/StringList.vue b/pkg/rancher-components/src/components/StringList/StringList.vue
@@ -639,13 +639,13 @@ export default defineComponent({
   }
 }
 
-:deep( ) {
-  .labeled-input INPUT.no-label,
-  .labeled-input INPUT:hover.no-label,
-  .labeled-input INPUT:focus.no-label {
+:deep(.labeled-input) {
+  INPUT.no-label,
+  INPUT:hover.no-label,
+  INPUT:focus.no-label {
     padding: 1px 0px 0px 0px;
   }
-  .labeled-input.compact-input {
+  &.compact-input {
     min-height: 0;
   }
 }

diff --git a/shell/components/ButtonDropdown.vue b/shell/components/ButtonDropdown.vue
@@ -226,7 +226,7 @@ export default {
   </v-select>
 </template>
 
-<style lang='scss' scoped> 
+<style lang='scss' scoped>
 // TODO #11952: Correct deep statement
 .button-dropdown.btn-sm {
   :deep( > .vs__dropdown-toggle ) {
@@ -252,7 +252,7 @@ export default {
   color: var(--link);
   padding: 0;
 
-  &.vs--open :deep( ) {
+  &:deep( .vs--open) {
     outline: none;
     box-shadow: none;
   }
@@ -273,7 +273,7 @@ export default {
     }
   }
 
-  :deep( > .vs__dropdown-toggle ) {
+   > :deep(.vs__dropdown-toggle ) {
     width: 100%;
     display: grid;
     grid-template-columns: 75% 25%;

diff --git a/shell/components/ChartReadme.vue b/shell/components/ChartReadme.vue
@@ -52,7 +52,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
   .chart-readmes {
     & > h1 {
@@ -64,13 +64,14 @@ export default {
     max-width: 100%;
     line-height: 1.6;
 
-    :deep( ) {
+    :deep(
       * + H1,
       * + H2,
       * + H3,
       * + H4,
       * + H5,
-      * + H6 {
+      * + H6
+    ) {
         margin-top: 20px;
       }
     }
@@ -89,13 +90,11 @@ export default {
       word-break: break-word;
     }
 
-    :deep(  > h1:first-of-type ) {
+    > :deep(h1:first-of-type ) {
       display: none;
     }
 
     :deep( p ) {
       margin-bottom: 0.5em;
     }
-  }
-
 </style>
diff --git a/shell/components/DashboardMetrics.vue b/shell/components/DashboardMetrics.vue
@@ -98,10 +98,10 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
 .dashboard-metrics {
-  & :deep( ) {
+  :deep(&) {
     .external-link {
       position: absolute;
       left: 200px;
@@ -115,7 +115,7 @@ export default {
 }
 
 .dashboard-metrics.external-link-pull-left {
-  & :deep( ) {
+  :deep(&) {
     .external-link {
       position: absolute;
       left: 10px;

diff --git a/shell/components/ExplorerMembers.vue b/shell/components/ExplorerMembers.vue
@@ -405,7 +405,7 @@ export default {
   </div>
 </template>
 
-<style lang='scss' scoped> 
+<style lang='scss' scoped>
 // TODO #11952: Correct deep statement
 
 .role {

diff --git a/shell/components/ExplorerProjectsNamespaces.vue b/shell/components/ExplorerProjectsNamespaces.vue
@@ -501,10 +501,10 @@ export default {
     <MoveModal @moving="clearSelection" />
   </div>
 </template>
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
 .project-namespaces {
-  & :deep( ) {
+  :deep(&) {
     .project-namespaces-table table {
       table-layout: fixed;
     }
@@ -569,7 +569,7 @@ export default {
   }
 }
 </style>
-<style lang="scss"> 
+<style lang="scss">
 // TODO #11952: Correct deep statement
   .psa-tooltip {
     // These could pop up a lot as the mouse moves around, keep them as small and unintrusive as possible

diff --git a/shell/components/Markdown.vue b/shell/components/Markdown.vue
@@ -76,17 +76,15 @@ export default {
   <Loading v-else />
 </template>
 
-<style lang="scss"> 
+<style lang="scss">
 // TODO #11952: Correct deep statement
 
-:deep( ) {
-  P {
-    font-size: initial;
-    line-height: initial;
-    font-weight: initial;
-    letter-spacing: initial;
-    font-style: normal;
-  }
+:deep(P) {
+  font-size: initial;
+  line-height: initial;
+  font-weight: initial;
+  letter-spacing: initial;
+  font-style: normal;
 }
 
 .markdown {

diff --git a/shell/components/auth/RoleDetailEdit.vue b/shell/components/auth/RoleDetailEdit.vue
@@ -797,34 +797,32 @@ export default {
   </CruResource>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
   .required {
     color: var(--error);
   }
 
-  :deep( ) {
-    .column-headers {
-      margin-right: 75px;
-      margin-bottom: 5px;
-    }
+  :deep(.column-headers)  {
+    margin-right: 75px;
+    margin-bottom: 5px;
+  }
 
-    .box {
-      align-items: initial;
+  :deep(.box)  {
+    align-items: initial;
 
-      .remove {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-end;
-      }
+    .remove {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-end;
     }
+  }
 
-    .columns {
-      .col > .unlabeled-select:not(.taggable) {
-        // override the odd padding-top from shell/assets/styles/global/_select.scss
-        padding: $unlabaled-select-padding
-      }
+  :deep(.columns)  {
+    .col > .unlabeled-select:not(.taggable) {
+      // override the odd padding-top from shell/assets/styles/global/_select.scss
+      padding: $unlabaled-select-padding
     }
   }
 </style>
diff --git a/shell/components/form/EnvVars.vue b/shell/components/form/EnvVars.vue
@@ -130,9 +130,9 @@ export default {
   </div>
 </template>
 
-<style lang='scss' scoped> 
+<style lang='scss' scoped>
 // TODO #11952: Correct deep statement
-.value-from :deep( ) {
+:deep(.value-from) {
   .v-select {
     height: 50px;
   }

diff --git a/shell/components/form/InputWithSelect.vue b/shell/components/form/InputWithSelect.vue
@@ -198,7 +198,7 @@ export default {
   </div>
 </template>
 
-<style lang='scss' scoped> 
+<style lang='scss' scoped>
 // TODO #11952: Correct deep statement
 .input-container {
   display: flex;
@@ -285,18 +285,18 @@ export default {
       border: 1px solid var(--outline) !important;
     }
 
-    &.labeled-select.focused :deep(),
-    &.unlabeled-select.focused :deep( ) {
+    &:deep(.labeled-select.focused),
+    &:deep(.unlabeled-select.focused) {
       outline: none;
     }
 
-    &.labeled-select:not(.disabled):not(.view) :deep(),
-    &.unlabeled-select:not(.disabled):not(.view) :deep( ) {
+    &:deep(.labeled-select:not(.disabled):not(.view)),
+    &:deep(.unlabeled-select:not(.disabled):not(.view)) {
       border: solid 1px var(--input-border);
     }
 
-    &.labeled-select :deep(),
-    &.unlabeled-select :deep( ) {
+    &:deep(.labeled-select ),
+    &:deep(.unlabeled-select  ) {
       box-shadow: none;
       width: 20%;
       margin-right: 1px; // push the input box right so the full focus outline of the select can be seen, z-index borks

diff --git a/shell/components/form/LabeledSelect.vue b/shell/components/form/LabeledSelect.vue
@@ -419,7 +419,7 @@ export default {
   </div>
 </template>
 
-<style lang='scss' scoped> 
+<style lang='scss' scoped>
 // TODO #11952: Correct deep statement
 
 .labeled-select {
@@ -559,7 +559,7 @@ export default {
     }
   }
 
-  .no-label :deep( ) {
+  :deep(.no-label) {
     &.v-select:not(.vs--single) {
       min-height: 33px;
     }

diff --git a/shell/components/form/NameNsDescription.vue b/shell/components/form/NameNsDescription.vue
@@ -505,7 +505,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
 button {
   all: unset;
@@ -527,7 +527,7 @@ button {
     max-height: $input-height;
   }
 
-  .namespace-select :deep( ) {
+  :deep(.namespace-select) {
     .labeled-select {
       min-width: 40%;
 

diff --git a/shell/components/form/ServicePorts.vue b/shell/components/form/ServicePorts.vue
@@ -273,7 +273,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
  $remove: 75;
   $checkbox: 75;
@@ -320,7 +320,7 @@ export default {
       height: 100%;
     }
 
-    .port-protocol :deep( ) {
+    :deep(.port-protocol) {
       .unlabeled-select {
         .v-select.inline {
           margin-top: 2px;

diff --git a/shell/components/formatter/ClusterLink.vue b/shell/components/formatter/ClusterLink.vue
@@ -84,7 +84,7 @@ export default {
   </span>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
   .cluster-link {
     display: flex;
@@ -94,15 +94,13 @@ export default {
     color: var(--error);
     margin-left: 4px;
   }
-  :deep( ) {
-    .labeled-tooltip, .status-icon {
-      position: relative;
-      display: inline;
-      left: auto;
-      right: auto;
-      top: 2px;
-      bottom: auto;
-    }
+  :deep(.labeled-tooltip, .status-icon) {
+    position: relative;
+    display: inline;
+    left: auto;
+    right: auto;
+    top: 2px;
+    bottom: auto;
   }
   .mytooltip ul {
     outline: 1px dashed red;