refactor: css ::v-deep to :deep()

app/src/components/ConfigPanel.vue

@@ -105,7 +105,7 @@ export default {
   margin-bottom: 1em;
   border-bottom: solid $border-width $gray-500;
 }
-::v-deep .panel-section:not(:last-child) {
+:deep(.panel-section:not(:last-child)) {
   margin-bottom: 3rem;
 }
 </style>

app/src/components/globals/ExplainWhat.vue

@@ -57,7 +57,7 @@ export default {
     background-color: $white;
     border-width: 2px;
 
-    ::v-deep .popover-body {
+    :deep(.popover-body) {
       color: $dark;
     }
   }

app/src/components/globals/FormField.vue

@@ -145,7 +145,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .invalid-feedback code {
+:deep(.invalid-feedback code) {
   background-color: $gray-200;
 }
 </style>

app/src/components/globals/TopBar.vue

@@ -67,7 +67,7 @@ export default {
     #top-bar-right {
       margin-bottom: 0.75rem;
 
-      ::v-deep > * {
+      :deep(> *) {
         margin-bottom: 0.25rem;
       }
     }
@@ -88,7 +88,7 @@ export default {
       margin-left: auto;
     }
 
-    ::v-deep .btn {
+    :deep(.btn) {
       margin-left: 0.5rem;
       &.dropdown-toggle-split {
         margin-left: 0;

app/src/components/globals/YCard.vue

@@ -83,7 +83,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.card-header {
+:deep(.card-header) {
   display: flex;
 
   .custom-header {
@@ -97,7 +97,7 @@ export default {
   }
 }
 
-.card-footer {
+:deep(.card-footer) {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -106,7 +106,7 @@ export default {
     margin-left: 0.5rem;
   }
 }
-.collapse:not(.show) + .card-footer {
+:deep(.collapse:not(.show) + .card-footer) {
   display: none;
 }
 </style>

app/src/components/globals/formItems/FileItem.vue

@@ -80,7 +80,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .custom-file-label {
+:deep(.custom-file-label) {
   color: $input-placeholder-color;
 
   .btn-danger + .b-form-file & {

app/src/components/globals/formItems/TagsSelectizeItem.vue

@@ -176,7 +176,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .dropdown-menu {
+:deep(.dropdown-menu) {
   max-height: 300px;
   overflow-y: auto;
   padding-top: 0;

app/src/views/_partials/ViewLockOverlay.vue

@@ -74,23 +74,21 @@ export default {
     margin: 0 15%;
   }
 
-  ::v-deep {
-    .card-body {
-      padding: 1.5rem;
-      padding-bottom: 0;
-      max-height: 60vh;
-      overflow-y: auto;
+  :deep(.card-body) {
+    padding: 1.5rem;
+    padding-bottom: 0;
+    max-height: 60vh;
+    overflow-y: auto;
 
-      & > :last-child {
-        margin-bottom: 1.5rem;
-      }
+    & > :last-child {
+      margin-bottom: 1.5rem;
     }
+  }
 
-    .card-footer {
-      padding: 0.5rem 0.75rem;
-      display: flex;
-      justify-content: flex-end;
-    }
+  :deep(.card-footer) {
+    padding: 0.5rem 0.75rem;
+    display: flex;
+    justify-content: flex-end;
   }
 
   .card-header {

app/src/views/app/AppCatalog.vue

@@ -514,7 +514,7 @@ export default {
 
     flex-basis: 90%;
 
-    .card-body {
+    :deep(.card-body) {
       display: flex;
       flex-direction: column;
       justify-content: center;

app/src/views/tool/ToolFirewall.vue

@@ -291,7 +291,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .on-off-switch {
+:deep(.on-off-switch) {
   .custom-control-input {
     &:checked ~ .custom-control-label::before {
       border-color: $success;
@@ -322,7 +322,7 @@ export default {
   }
 }
 
-::v-deep form {
+:deep(form) {
   margin-bottom: -1rem;
 
   & > * {