From 8860a174bb0c5860a20818ffb6fcf129e3230da5 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 17 Sep 2020 22:09:37 +0300
Subject: [PATCH] ::v-deep migration

---
 src/views/datatable/DataTableDemo.vue         |  10 +-
 src/views/datatable/DataTableDoc.vue          |  54 +++---
 src/views/datatable/DataTableEditDemo.vue     |   4 +-
 src/views/datatable/DataTableFilterDemo.vue   |  10 +-
 .../datatable/DataTableResponsiveDemo.vue     |   4 +-
 src/views/datatable/DataTableRowGroupDemo.vue |   2 +-
 src/views/datatable/DataTableStyleDemo.vue    |   6 +-
 src/views/dataview/DataViewDemo.vue           |   4 +-
 src/views/galleria/GalleriaAdvancedDemo.vue   | 176 +++++++++---------
 src/views/galleria/GalleriaIndicatorDemo.vue  |  36 ++--
 src/views/multiselect/MultiSelectDemo.vue     |   2 +-
 src/views/multiselect/MultiSelectDoc.vue      |   2 +-
 .../OrganizationChartDemo.vue                 |   2 +-
 .../OrganizationChartDoc.vue                  |   2 +-
 src/views/ripple/RippleDemo.vue               |   2 +-
 src/views/ripple/RippleDoc.vue                |   2 +-
 src/views/scrollpanel/ScrollPanelDemo.vue     |   2 +-
 src/views/scrollpanel/ScrollPanelDoc.vue      |   2 +-
 src/views/steps/StepsDemo.vue                 |   6 +-
 src/views/support/Support.vue                 |   9 +-
 src/views/tabmenu/TabMenuDemo.vue             |   2 +-
 src/views/terminal/TerminalDemo.vue           |   2 +-
 src/views/terminal/TerminalDoc.vue            |   2 +-
 src/views/theming/Theming.vue                 |   2 +-
 src/views/tree/TreeTemplatingDemo.vue         |   3 +-
 src/views/treetable/TreeTableDoc.vue          |  12 +-
 .../treetable/TreeTableResponsiveDemo.vue     |  24 +--
 27 files changed, 181 insertions(+), 203 deletions(-)

diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index 20c909f63..95762ad3a 100755
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -178,13 +178,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .p-paginator {
+::v-deep(.p-paginator) {
     .p-paginator-current {
         margin-left: auto;
     }
 }
 
-::v-deep .p-progressbar {
+::v-deep(.p-progressbar) {
     height: .5rem;
     background-color: #D8DADC;
 
@@ -198,7 +198,7 @@ export default {
     justify-content: space-between;
 }
 
-::v-deep .p-datepicker {
+::v-deep(.p-datepicker) {
     min-width: 25rem;
 
     td {
@@ -206,7 +206,7 @@ export default {
     }
 }
 
-::v-deep .p-datatable.p-datatable-customers {
+::v-deep(.p-datatable.p-datatable-customers) {
     .p-datatable-header {
         padding: 1rem;
         text-align: left;
@@ -236,7 +236,7 @@ export default {
 }
 
 @media screen and (max-width: 960px) {
-    ::v-deep .p-datatable {
+    ::v-deep(.p-datatable) {
         &.p-datatable-customers {
             .p-datatable-thead > tr > th,
             .p-datatable-tfoot > tr > td {
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 5632c6cf9..463d929a4 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -1655,7 +1655,7 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    ::v-deep .p-datatable {
+    ::v-deep(.p-datatable) {
         &.p-datatable-responsive-demo {
             .p-datatable-thead > tr > th,
             .p-datatable-tfoot > tr > td {
@@ -1739,7 +1739,7 @@ export default {
     }
 }
 
-::v-deep .orange-car {
+.orange-car {
     background-color: #344b5f !important;
     color: #ffffff !important;
 }
@@ -2583,18 +2583,18 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep .p-paginator {
+::v-deep(.p-paginator) {
     .p-paginator-current {
         margin-left: auto;
     }
 }
 
-::v-deep .p-progressbar {
+::v-deep(.p-progressbar) {
     height: .5rem;
     background-color: #D8DADC;
 
     .p-progressbar-value {
-        background-color: #00ACAD;
+        background-color: #607D8B;
     }
 }
 
@@ -2603,7 +2603,7 @@ export default {
     justify-content: space-between;
 }
 
-::v-deep .p-datepicker {
+::v-deep(.p-datepicker) {
     min-width: 25rem;
 
     td {
@@ -2611,7 +2611,7 @@ export default {
     }
 }
 
-::v-deep .p-datatable.p-datatable-customers {
+::v-deep(.p-datatable.p-datatable-customers) {
     .p-datatable-header {
         padding: 1rem;
         text-align: left;
@@ -2640,29 +2640,37 @@ export default {
     display: none;
 }
 
-@media screen and (max-width: 64em) {
-    ::v-deep .p-datatable {
+@media screen and (max-width: 960px) {
+    ::v-deep(.p-datatable) {
         &.p-datatable-customers {
             .p-datatable-thead > tr > th,
             .p-datatable-tfoot > tr > td {
                 display: none !important;
             }
 
-            .p-datatable-tbody > tr > td {
-                text-align: left;
-                display: block;
-                border: 0 none !important;
-                width: 100% !important;
-                float: left;
-                clear: left;
-                border: 0 none;
+            .p-datatable-tbody > tr {
+                border-bottom: 1px solid var(--layer-2);
 
-                .p-column-title {
-                    padding: .4rem;
-                    min-width: 30%;
-                    display: inline-block;
-                    margin: -.4rem 1rem -.4rem -.4rem;
-                    font-weight: bold;
+                > td {
+                    text-align: left;
+                    display: block;
+                    border: 0 none !important;
+                    width: 100% !important;
+                    float: left;
+                    clear: left;
+                    border: 0 none;
+
+                    .p-column-title {
+                        padding: .4rem;
+                        min-width: 30%;
+                        display: inline-block;
+                        margin: -.4rem 1rem -.4rem -.4rem;
+                        font-weight: bold;
+                    }
+
+                    .p-progressbar {
+                        margin-top: .5rem;
+                    }
                 }
             }
         }
diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue
index 0d710f002..b80f6dbfc 100755
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/src/views/datatable/DataTableEditDemo.vue
@@ -288,7 +288,7 @@ export default {
 </template>
 
 <CodeHighlight lang="css">
-.editable-cells-table td.p-cell-editing {
+::v-deep(.editable-cells-table td.p-cell-editing) {
     padding-top: 0;
     padding-bottom: 0;
 }
@@ -396,7 +396,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .editable-cells-table td.p-cell-editing {
+::v-deep(.editable-cells-table td.p-cell-editing) {
     padding-top: 0;
     padding-bottom: 0;
 }
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index b71a66e7a..18b7fa7b3 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -322,13 +322,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .p-paginator {
+::v-deep(.p-paginator) {
     .p-paginator-current {
         margin-left: auto;
     }
 }
 
-::v-deep .p-progressbar {
+::v-deep(.p-progressbar) {
     height: .5rem;
     background-color: #D8DADC;
 
@@ -342,7 +342,7 @@ export default {
     justify-content: space-between;
 }
 
-::v-deep .p-datepicker {
+::v-deep(.p-datepicker) {
     min-width: 25rem;
 
     td {
@@ -350,7 +350,7 @@ export default {
     }
 }
 
-::v-deep .p-datatable.p-datatable-customers {
+::v-deep(.p-datatable.p-datatable-customers) {
     .p-datatable-header {
         padding: 1rem;
         text-align: left;
@@ -380,7 +380,7 @@ export default {
 }
 
 @media screen and (max-width: 960px) {
-    ::v-deep .p-datatable {
+    ::v-deep(.p-datatable) {
         &.p-datatable-customers {
             .p-datatable-thead > tr > th,
             .p-datatable-tfoot > tr > td {
diff --git a/src/views/datatable/DataTableResponsiveDemo.vue b/src/views/datatable/DataTableResponsiveDemo.vue
index 6e8e6db8e..9977caa92 100755
--- a/src/views/datatable/DataTableResponsiveDemo.vue
+++ b/src/views/datatable/DataTableResponsiveDemo.vue
@@ -103,7 +103,7 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    ::v-deep .p-datatable {
+    ::v-deep(.p-datatable) {
         &.p-datatable-responsive-demo {
             .p-datatable-thead > tr > th,
             .p-datatable-tfoot > tr > td {
@@ -165,7 +165,7 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    ::v-deep .p-datatable {
+    ::v-deep(.p-datatable) {
         &.p-datatable-responsive-demo {
             .p-datatable-thead > tr > th,
             .p-datatable-tfoot > tr > td {
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index cec559957..88c20e76f 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -300,7 +300,7 @@ export default {
     font-weight: 700;
 }
 
-::v-deep .p-rowgroup-header {
+::v-deep(.p-rowgroup-header) {
     span {
         font-weight: 700;
     }
diff --git a/src/views/datatable/DataTableStyleDemo.vue b/src/views/datatable/DataTableStyleDemo.vue
index bf6f498e0..4fc5d7eb4 100755
--- a/src/views/datatable/DataTableStyleDemo.vue
+++ b/src/views/datatable/DataTableStyleDemo.vue
@@ -94,9 +94,8 @@ export default {
     color: #66BB6A;
 }
 
-::v-deep .row-accessories {
+::v-deep(.row-accessories) {
     background-color: rgba(0,0,0,.15) !important;
-
 }
 </CodeHighlight>
                 </TabPanel>
@@ -155,8 +154,7 @@ export default {
     color: #66BB6A;
 }
 
-::v-deep .row-accessories {
+::v-deep(.row-accessories) {
     background-color: rgba(0,0,0,.15) !important;
-
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dataview/DataViewDemo.vue b/src/views/dataview/DataViewDemo.vue
index f918f7098..a803675a3 100755
--- a/src/views/dataview/DataViewDemo.vue
+++ b/src/views/dataview/DataViewDemo.vue
@@ -144,7 +144,7 @@ export default {
 	vertical-align: middle;
 }
 
-::v-deep .product-list-item {
+::v-deep(.product-list-item) {
 	display: flex;
 	align-items: center;
 	padding: 1rem;
@@ -181,7 +181,7 @@ export default {
 	}
 }
 
-::v-deep .product-grid-item {
+::v-deep(.product-grid-item) {
 	margin: .5rem;
 	border: 1px solid #dee2e6;
 
diff --git a/src/views/galleria/GalleriaAdvancedDemo.vue b/src/views/galleria/GalleriaAdvancedDemo.vue
index 98eb17dbd..b9963026d 100644
--- a/src/views/galleria/GalleriaAdvancedDemo.vue
+++ b/src/views/galleria/GalleriaAdvancedDemo.vue
@@ -100,64 +100,62 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep {
-    .custom-galleria {
-        &.fullscreen {
-            display: flex;
-            flex-direction: column;
-
-            .p-galleria-content {
-                flex-grow: 1;
-                justify-content: center;
-            }
-        }
+::v-deep(.custom-galleria) {
+    &.fullscreen {
+        display: flex;
+        flex-direction: column;
 
         .p-galleria-content {
-            position: relative;
+            flex-grow: 1;
+            justify-content: center;
         }
+    }
 
-        .p-galleria-thumbnail-wrapper {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-        }
+    .p-galleria-content {
+        position: relative;
+    }
 
-        .p-galleria-thumbnail-items-container {
-            width: 100%;
-        }
+    .p-galleria-thumbnail-wrapper {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
 
-        .custom-galleria-footer {
-            display: flex;
-            align-items: center;
-            background-color: rgba(0, 0, 0, .9);
+    .p-galleria-thumbnail-items-container {
+        width: 100%;
+    }
+
+    .custom-galleria-footer {
+        display: flex;
+        align-items: center;
+        background-color: rgba(0, 0, 0, .9);
+        color: #ffffff;
+
+        > button {
+            background-color: transparent;
             color: #ffffff;
+            border: 0 none;
+            border-radius: 0;
+            margin: .2rem 0;
 
-            > button {
-                background-color: transparent;
-                color: #ffffff;
-                border: 0 none;
-                border-radius: 0;
-                margin: .2rem 0;
+            &.fullscreen-button {
+                margin-left: auto;
+            }
 
-                &.fullscreen-button {
-                    margin-left: auto;
-                }
-
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.1);
-                }
+            &:hover {
+                background-color: rgba(255, 255, 255, 0.1);
             }
         }
+    }
 
-        .title-container {
-            > span {
-                font-size: .9rem;
-                padding-left: .829rem;
+    .title-container {
+        > span {
+            font-size: .9rem;
+            padding-left: .829rem;
 
-                &.title {
-                    font-weight: bold;
-                }
+            &.title {
+                font-weight: bold;
             }
         }
     }
@@ -259,64 +257,62 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep {
-    .custom-galleria {
-        &.fullscreen {
-            display: flex;
-            flex-direction: column;
-
-            .p-galleria-content {
-                flex-grow: 1;
-                justify-content: center;
-            }
-        }
+::v-deep(.custom-galleria) {
+    &.fullscreen {
+        display: flex;
+        flex-direction: column;
 
         .p-galleria-content {
-            position: relative;
+            flex-grow: 1;
+            justify-content: center;
         }
+    }
 
-        .p-galleria-thumbnail-wrapper {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-        }
+    .p-galleria-content {
+        position: relative;
+    }
 
-        .p-galleria-thumbnail-items-container {
-            width: 100%;
-        }
+    .p-galleria-thumbnail-wrapper {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
 
-        .custom-galleria-footer {
-            display: flex;
-            align-items: center;
-            background-color: rgba(0, 0, 0, .9);
+    .p-galleria-thumbnail-items-container {
+        width: 100%;
+    }
+
+    .custom-galleria-footer {
+        display: flex;
+        align-items: center;
+        background-color: rgba(0, 0, 0, .9);
+        color: #ffffff;
+
+        > button {
+            background-color: transparent;
             color: #ffffff;
+            border: 0 none;
+            border-radius: 0;
+            margin: .2rem 0;
 
-            > button {
-                background-color: transparent;
-                color: #ffffff;
-                border: 0 none;
-                border-radius: 0;
-                margin: .2rem 0;
+            &.fullscreen-button {
+                margin-left: auto;
+            }
 
-                &.fullscreen-button {
-                    margin-left: auto;
-                }
-
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.1);
-                }
+            &:hover {
+                background-color: rgba(255, 255, 255, 0.1);
             }
         }
+    }
 
-        .title-container {
-            > span {
-                font-size: .9rem;
-                padding-left: .829rem;
+    .title-container {
+        > span {
+            font-size: .9rem;
+            padding-left: .829rem;
 
-                &.title {
-                    font-weight: bold;
-                }
+            &.title {
+                font-weight: bold;
             }
         }
     }
diff --git a/src/views/galleria/GalleriaIndicatorDemo.vue b/src/views/galleria/GalleriaIndicatorDemo.vue
index 4bacc5a95..6fa4ab7c0 100755
--- a/src/views/galleria/GalleriaIndicatorDemo.vue
+++ b/src/views/galleria/GalleriaIndicatorDemo.vue
@@ -190,17 +190,15 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep {
-    .custom-indicator-galleria {
-        .indicator-text {
-            color: #e9ecef;
-            cursor: pointer;
-        }
+::v-deep(.custom-indicator-galleria) {
+    .indicator-text {
+        color: #e9ecef;
+        cursor: pointer;
+    }
 
-        .p-highlight {
-            .indicator-text {
-                color: var(--primary-color);
-            }
+    .p-highlight {
+        .indicator-text {
+            color: var(--primary-color);
         }
     }
 }
@@ -249,17 +247,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep {
-    .custom-indicator-galleria {
-        .indicator-text {
-            color: #e9ecef;
-            cursor: pointer;
-        }
+::v-deep(.custom-indicator-galleria) {
+    .indicator-text {
+        color: #e9ecef;
+        cursor: pointer;
+    }
 
-        .p-highlight {
-            .indicator-text {
-                color: var(--primary-color);
-            }
+    .p-highlight {
+        .indicator-text {
+            color: var(--primary-color);
         }
     }
 }
diff --git a/src/views/multiselect/MultiSelectDemo.vue b/src/views/multiselect/MultiSelectDemo.vue
index ad3aae1b4..8919e7e93 100755
--- a/src/views/multiselect/MultiSelectDemo.vue
+++ b/src/views/multiselect/MultiSelectDemo.vue
@@ -78,7 +78,7 @@ export default {
     min-width: 15rem;
 }
 
-::v-deep .multiselect-custom {
+::v-deep(.multiselect-custom) {
     .p-multiselect-label:not(.p-placeholder) {
         padding-top: .25rem;
         padding-bottom: .25rem;
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 8da3437d9..ea1d15221 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -375,7 +375,7 @@ export default {
     min-width: 15rem;
 }
 
-::v-deep .multiselect-custom {
+::v-deep(.multiselect-custom) {
     .p-multiselect-label:not(.p-placeholder) {
         padding-top: .25rem;
         padding-bottom: .25rem;
diff --git a/src/views/organizationchart/OrganizationChartDemo.vue b/src/views/organizationchart/OrganizationChartDemo.vue
index e26c1b588..d00954af2 100755
--- a/src/views/organizationchart/OrganizationChartDemo.vue
+++ b/src/views/organizationchart/OrganizationChartDemo.vue
@@ -182,7 +182,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep .p-organizationchart {
+::v-deep(.p-organizationchart) {
     .p-person {
         padding: 0;
         border: 0 none;
diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue
index a279cfe2e..9fca2e77d 100755
--- a/src/views/organizationchart/OrganizationChartDoc.vue
+++ b/src/views/organizationchart/OrganizationChartDoc.vue
@@ -648,7 +648,7 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep .p-organizationchart {
+::v-deep(.p-organizationchart) {
     .p-person {
         padding: 0;
         border: 0 none;
diff --git a/src/views/ripple/RippleDemo.vue b/src/views/ripple/RippleDemo.vue
index 8aa45617e..268d461f1 100644
--- a/src/views/ripple/RippleDemo.vue
+++ b/src/views/ripple/RippleDemo.vue
@@ -31,7 +31,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .card-container {
+::v-deep(.card-container) {
     .card {
         width: 75px;
         height: 75px;
diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue
index d41b12462..868eafcb1 100644
--- a/src/views/ripple/RippleDoc.vue
+++ b/src/views/ripple/RippleDoc.vue
@@ -99,7 +99,7 @@ export default {}
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep .card-container {
+::v-deep(.card-container) {
     .card {
         width: 75px;
         height: 75px;
diff --git a/src/views/scrollpanel/ScrollPanelDemo.vue b/src/views/scrollpanel/ScrollPanelDemo.vue
index 9fc714d4b..60a7079fd 100644
--- a/src/views/scrollpanel/ScrollPanelDemo.vue
+++ b/src/views/scrollpanel/ScrollPanelDemo.vue
@@ -79,7 +79,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .p-scrollpanel {
+::v-deep(.p-scrollpanel) {
     p {
         padding: .5rem;
         line-height: 1.5;
diff --git a/src/views/scrollpanel/ScrollPanelDoc.vue b/src/views/scrollpanel/ScrollPanelDoc.vue
index 5ea9bed98..2ae48264b 100644
--- a/src/views/scrollpanel/ScrollPanelDoc.vue
+++ b/src/views/scrollpanel/ScrollPanelDoc.vue
@@ -155,7 +155,7 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep .p-scrollpanel {
+::v-deep(.p-scrollpanel) {
     p {
         padding: .5rem;
         line-height: 1.5;
diff --git a/src/views/steps/StepsDemo.vue b/src/views/steps/StepsDemo.vue
index e02ac0902..7e6cca2bb 100755
--- a/src/views/steps/StepsDemo.vue
+++ b/src/views/steps/StepsDemo.vue
@@ -68,11 +68,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep b {
-    display: block
+::v-deep(b) {
+    display: block;
 }
 
-::v-deep .p-card-body {
+::v-deep(.p-card-body) {
     padding: 2rem;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/support/Support.vue b/src/views/support/Support.vue
index 60d4a911b..6559e496f 100755
--- a/src/views/support/Support.vue
+++ b/src/views/support/Support.vue
@@ -59,7 +59,7 @@
 </template>
 
 <style lang="scss" scoped>
-::v-deep .pro-section {
+::v-deep(.pro-section) {
     display: flex;
     margin-top: .75rem;
 
@@ -79,8 +79,7 @@
     }
 }
 
- li {
-        line-height: 1.5;
-    }
-
+li {
+    line-height: 1.5;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/tabmenu/TabMenuDemo.vue b/src/views/tabmenu/TabMenuDemo.vue
index ad8370a02..952bd6490 100755
--- a/src/views/tabmenu/TabMenuDemo.vue
+++ b/src/views/tabmenu/TabMenuDemo.vue
@@ -40,7 +40,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep .tabmenudemo-content  {
+::v-deep(.tabmenudemo-content) {
     padding: 2rem 1rem;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/terminal/TerminalDemo.vue b/src/views/terminal/TerminalDemo.vue
index daf573a54..df529b0b9 100755
--- a/src/views/terminal/TerminalDemo.vue
+++ b/src/views/terminal/TerminalDemo.vue
@@ -66,7 +66,7 @@ p {
     margin-top: 0;
 }
 
-::v-deep .dark-demo-terminal {
+::v-deep(.dark-demo-terminal) {
     background-color: #212121;
     color: #ffffff;
 
diff --git a/src/views/terminal/TerminalDoc.vue b/src/views/terminal/TerminalDoc.vue
index 74abdfe21..41ad861d9 100755
--- a/src/views/terminal/TerminalDoc.vue
+++ b/src/views/terminal/TerminalDoc.vue
@@ -176,7 +176,7 @@ p {
     margin-top: 0;
 }
 
-::v-deep .dark-demo-terminall {
+::v-deep(.dark-demo-terminal) {
     background-color: #212121;
     color: #ffffff;
 
diff --git a/src/views/theming/Theming.vue b/src/views/theming/Theming.vue
index 7bbc81aaa..d884fee8e 100755
--- a/src/views/theming/Theming.vue
+++ b/src/views/theming/Theming.vue
@@ -58,7 +58,7 @@ html {
 
 <CodeHighlight>
 &lt;style lang="scss" scoped&gt;
-::v-deep .dark-panel.p-panel {
+::v-deep(.dark-panel.p-panel) {
     .p-panel-titlebar {
         background: #212121;
     }
diff --git a/src/views/tree/TreeTemplatingDemo.vue b/src/views/tree/TreeTemplatingDemo.vue
index e680c237d..ed70df592 100755
--- a/src/views/tree/TreeTemplatingDemo.vue
+++ b/src/views/tree/TreeTemplatingDemo.vue
@@ -108,10 +108,9 @@ button {
     margin-right: .5rem;
 }
 
-::v-deep .p-tree {
+::v-deep(.p-tree) {
     a {
         color: #2196f3;
     }
-
 }
 </style>
\ No newline at end of file
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index 2e32385c6..be4f7c15e 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -1239,15 +1239,9 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    ::v-deep {
-        .sm-invisible {
-            display: none;
-        }
-
-        .sm-visible {
-            display: inline;
-            margin-right: .5rem;
-        }
+    ::v-deep(.sm-visible) {
+        display: inline;
+        margin-right: .5rem;
     }
 }
 </CodeHighlight>
diff --git a/src/views/treetable/TreeTableResponsiveDemo.vue b/src/views/treetable/TreeTableResponsiveDemo.vue
index 0293c3fe1..3930400da 100755
--- a/src/views/treetable/TreeTableResponsiveDemo.vue
+++ b/src/views/treetable/TreeTableResponsiveDemo.vue
@@ -73,15 +73,9 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    ::v-deep {
-        .sm-invisible {
-            display: none;
-        }
-
-        .sm-visible {
-            display: inline;
-            margin-right: .5rem;
-        }
+    ::v-deep(.sm-visible) {
+        display: inline;
+        margin-right: .5rem;
     }
 }
 </CodeHighlight>
@@ -117,15 +111,9 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    ::v-deep {
-        .sm-invisible {
-            display: none;
-        }
-
-        .sm-visible {
-            display: inline;
-            margin-right: .5rem;
-        }
+    ::v-deep(.sm-visible) {
+        display: inline;
+        margin-right: .5rem;
     }
 }
 </style>
\ No newline at end of file