refactor(styles): replace /deep/ with ::ng-deep (#1517)

akveo · May 28, 2019 · 721ad54 · 721ad54
1 parent 8a7335a
commit 721ad54
Show file tree

Hide file tree

Showing 41 changed files with 67 additions and 67 deletions.
diff --git a/docs/app/@theme/components/header/header.component.scss b/docs/app/@theme/components/header/header.component.scss
@@ -44,7 +44,7 @@
     }
   }
 
-  /deep/ nb-menu {
+  ::ng-deep nb-menu {
     flex: 1;
     .menu-items {
       display: flex;
@@ -130,13 +130,13 @@
         margin-left: 0;
       }
     }
-    /deep/ nb-menu .menu-items li:nth-child(2) {
+    ::ng-deep nb-menu .menu-items li:nth-child(2) {
       display: list-item;
     }
   }
 
   @include media-breakpoint-up(lg) {
-    /deep/ nb-menu .menu-items {
+    ::ng-deep nb-menu .menu-items {
       justify-content: flex-start;
 
       li:not(:first-child) {
@@ -169,7 +169,7 @@
         width: auto;
       }
     }
-    /deep/ nb-menu {
+    ::ng-deep nb-menu {
       flex-grow: 0;
       flex-shrink: 1;
       flex-basis: auto;
@@ -186,7 +186,7 @@
     }
 
     @include media-breakpoint-up(is) {
-      /deep/ nb-menu .menu-items li:first-child {
+      ::ng-deep nb-menu .menu-items li:first-child {
         display: list-item;
       }
     }
@@ -213,7 +213,7 @@
       .section.middle {
         justify-content: space-around;
       }
-      /deep/ nb-menu {
+      ::ng-deep nb-menu {
         min-width: 28rem;
 
         .menu-items li {
@@ -227,7 +227,7 @@
         padding-left: 1.125rem;
         width: nb-theme(sidebar-width);
       }
-      /deep/ nb-menu {
+      ::ng-deep nb-menu {
         flex: 1;
       }
     }

diff --git a/docs/app/blocks/components/pager-block/pager-block.component.scss b/docs/app/blocks/components/pager-block/pager-block.component.scss
@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: column;
 
-  /deep/ nb-card {
+  ::ng-deep nb-card {
     font-weight: 300;
     flex: 1;
 
@@ -54,7 +54,7 @@
     flex-direction: row;
     flex-wrap: wrap;
 
-    /deep/ nb-card {
+    ::ng-deep nb-card {
       margin-left: 1rem;
 
       &:first-child {

diff --git a/docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.scss b/docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.scss
@@ -38,7 +38,7 @@
     }
   }
 
-  /deep/ nb-tabset.tabs-container {
+  ::ng-deep nb-tabset.tabs-container {
     border-radius: 0.5rem 0.5rem 0 0;
 
     > ul {

diff --git a/docs/app/documentation/documentation.component.scss b/docs/app/documentation/documentation.component.scss
@@ -46,22 +46,22 @@
     border: none;
   }
 
-  /deep/ nb-layout .main-container {
+  ::ng-deep nb-layout .main-container {
     padding-top: 3rem;
 
     .scrollable {
       padding-top: 0;
     }
   }
 
-  /deep/ nb-layout .layout-container {
+  ::ng-deep nb-layout .layout-container {
     max-width: $content-width;
     width: 100%;
     margin-left: auto;
     margin-right: auto;
   }
 
-  /deep/ nb-sidebar nb-menu {
+  ::ng-deep nb-sidebar nb-menu {
     .menu-group {
       padding-left: 0;
     }
@@ -85,7 +85,7 @@
     }
   }
 
-  /deep/ nb-layout-footer ngd-footer .contact {
+  ::ng-deep nb-layout-footer ngd-footer .contact {
     display: none;
   }
 
@@ -96,7 +96,7 @@
   }
 
   @include media-breakpoint-up(macpro) {
-    /deep/ nb-layout-footer {
+    ::ng-deep nb-layout-footer {
       margin-right: $settings-width + $settings-margin;
     }
   }

diff --git a/docs/app/documentation/page/page.component.scss b/docs/app/documentation/page/page.component.scss
@@ -95,7 +95,7 @@
         font-size: 0.875rem;
       }
 
-      /deep/ {
+      ::ng-deep {
         .widget-block {
           display: block;
           margin-bottom: 2rem;
@@ -226,7 +226,7 @@
   }
 
   @include media-breakpoint-up(md) {
-    .middle-column /deep/ nb-card nb-card-body {
+    .middle-column ::ng-deep nb-card nb-card-body {
       padding: 2rem 3rem 2rem 2rem;
     }
   }

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -2,7 +2,7 @@
   display: flex;
 }
 
-/deep/ {
+::ng-deep {
   .options-bar {
     display: flex;
     align-items: center;

diff --git a/src/framework/auth/components/auth-block/auth-block.component.scss b/src/framework/auth/components/auth-block/auth-block.component.scss
@@ -9,7 +9,7 @@
   width: 100%;
   max-width: 35rem;
 
-  /deep/ {
+  ::ng-deep {
     form {
       width: 100%;
     }

diff --git a/src/framework/auth/components/auth.component.scss b/src/framework/auth/components/auth.component.scss
@@ -34,7 +34,7 @@
     }
   }
 
-  /deep/ {
+  ::ng-deep {
     nb-layout .layout .layout-container .content .columns nb-layout-column {
       padding: $auth-layout-padding;
 

diff --git a/src/framework/theme/components/card/reveal-card/reveal-card.component.scss b/src/framework/theme/components/card/reveal-card/reveal-card.component.scss
@@ -7,7 +7,7 @@
       top: 0;
       transition: none;
 
-      /deep/ nb-card-back {
+      ::ng-deep nb-card-back {
         top: 0;
       }
     }
@@ -16,7 +16,7 @@
     }
   }
 
-  /deep/ nb-card-front {
+  ::ng-deep nb-card-front {
     display: block;
     height: 100%;
   }
@@ -29,7 +29,7 @@
     overflow: hidden;
     transition: top 0s 0.5s;
 
-    /deep/ nb-card-back {
+    ::ng-deep nb-card-back {
       position: absolute;
       left: 0;
       top: 100%;

diff --git a/src/framework/theme/components/datepicker/datepicker-container.component.scss b/src/framework/theme/components/datepicker/datepicker-container.component.scss
@@ -11,7 +11,7 @@
     height: 0;
   }
 
-  /deep/ nb-overlay-container .primitive-overlay {
+  ::ng-deep nb-overlay-container .primitive-overlay {
     padding: 0.75rem 1rem;
   }
 }
diff --git a/src/framework/theme/components/layout/layout.component.scss b/src/framework/theme/components/layout/layout.component.scss
@@ -18,7 +18,7 @@
     flex-direction: column;
   }
 
-  /deep/ nb-layout-header {
+  ::ng-deep nb-layout-header {
     display: block;
 
     nav {
@@ -41,7 +41,7 @@
     -ms-flex: 1 1 auto;
     flex-direction: row;
 
-    /deep/ nb-sidebar {
+    ::ng-deep nb-sidebar {
       &.left {
         @include nb-ltr(order, 0);
         @include nb-rtl(order, 2);
@@ -83,7 +83,7 @@
         flex-direction: row;
         width: 100%;
 
-        /deep/ nb-layout-column {
+        ::ng-deep nb-layout-column {
           order: 1;
           flex: 1 0;
           min-width: 0; // fix for flexbug https://github.com/philipwalton/flexbugs#flexbug-1
@@ -97,7 +97,7 @@
         }
       }
 
-      /deep/ nb-layout-footer {
+      ::ng-deep nb-layout-footer {
         display: block;
         margin-top: auto;
 

diff --git a/src/framework/theme/components/menu/menu.component.scss b/src/framework/theme/components/menu/menu.component.scss
@@ -6,7 +6,7 @@
 
 @import '../../styles/core/mixins';
 
-:host /deep/ {
+:host ::ng-deep {
   display: block;
 
   .menu-items,

diff --git a/src/framework/theme/components/search/styles/search.component.column-curtain.scss b/src/framework/theme/components/search/styles/search.component.column-curtain.scss
@@ -6,7 +6,7 @@
 
 @import '../../../styles/core/mixins';
 
-/deep/ nb-layout.column-curtain.with-search .layout {
+::ng-deep nb-layout.column-curtain.with-search .layout {
   pointer-events: none;
 }
 

diff --git a/src/framework/theme/components/search/styles/search.component.curtain.scss b/src/framework/theme/components/search/styles/search.component.curtain.scss
@@ -92,7 +92,7 @@
   }
 }
 
-/deep/ nb-layout.curtain .scrollable-container {
+::ng-deep nb-layout.curtain .scrollable-container {
   position: relative;
   z-index: 0;
 }
diff --git a/src/framework/theme/components/search/styles/search.component.layout-rotate.scss b/src/framework/theme/components/search/styles/search.component.layout-rotate.scss
@@ -6,7 +6,7 @@
 
 @import '../../../styles/core/mixins';
 
-/deep/ nb-layout.rotate-layout {
+::ng-deep nb-layout.rotate-layout {
   position: fixed;
   overflow: hidden;
   width: 100%;

diff --git a/src/framework/theme/components/search/styles/search.component.modal-drop.scss b/src/framework/theme/components/search/styles/search.component.modal-drop.scss
@@ -6,13 +6,13 @@
 
 @import '../../../styles/core/mixins';
 
-/deep/ nb-layout.modal-drop .layout {
+::ng-deep nb-layout.modal-drop .layout {
   position: relative;
   transition: transform 0.4s, opacity 0.4s;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/deep/ nb-layout.modal-drop.with-search .layout {
+::ng-deep nb-layout.modal-drop.with-search .layout {
   opacity: 0;
   transform: scale3d(0.9, 0.9, 1);
   pointer-events: none;

diff --git a/src/framework/theme/components/search/styles/search.component.modal-half.scss b/src/framework/theme/components/search/styles/search.component.modal-half.scss
@@ -6,14 +6,14 @@
 
 @import '../../../styles/core/mixins';
 
-/deep/ nb-layout.modal-half {
+::ng-deep nb-layout.modal-half {
   .layout {
     transition: transform 0.6s, opacity 0.6s;
     transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
   }
 }
 
-/deep/ nb-layout.modal-half.with-search {
+::ng-deep nb-layout.modal-half.with-search {
   .layout {
     transform: scale3d(0.8, 0.8, 1);
     pointer-events: none;

diff --git a/src/framework/theme/components/search/styles/search.component.modal-move.scss b/src/framework/theme/components/search/styles/search.component.modal-move.scss
@@ -6,13 +6,13 @@
 
 @import '../../../styles/core/mixins';
 
-/deep/ nb-layout.modal-move {
+::ng-deep nb-layout.modal-move {
   .layout {
     transition: transform 0.5s;
   }
 }
 
-/deep/ nb-layout.modal-move.with-search {
+::ng-deep nb-layout.modal-move.with-search {
   .layout {
     transform: scale3d(0.8, 0.8, 1);
     pointer-events: none;

diff --git a/src/framework/theme/components/search/styles/search.component.scss b/src/framework/theme/components/search/styles/search.component.scss
@@ -22,7 +22,7 @@
   }
 }
 
-/deep/ nb-layout.with-search .scrollable-container {
+::ng-deep nb-layout.with-search .scrollable-container {
   position: relative;
   z-index: 0;
 }

diff --git a/src/framework/theme/components/sidebar/sidebar.component.scss b/src/framework/theme/components/sidebar/sidebar.component.scss
@@ -73,12 +73,12 @@
     @include nb-rtl(left, 0);
   }
 
-  /deep/ nb-sidebar-footer {
+  ::ng-deep nb-sidebar-footer {
     margin-top: auto;
     display: block;
   }
 
-  /deep/ nb-sidebar-header {
+  ::ng-deep nb-sidebar-header {
     display: block;
   }
 }
diff --git a/src/framework/theme/components/tabset/tabset.component.scss b/src/framework/theme/components/tabset/tabset.component.scss
@@ -14,7 +14,7 @@
     justify-content: space-around;
   }
 
-  /deep/ nb-tab {
+  ::ng-deep nb-tab {
     flex: 1;
     -ms-flex: 1 1 auto;
     overflow: auto;

diff --git a/src/framework/theme/components/tree-grid/tree-grid.component.scss b/src/framework/theme/components/tree-grid/tree-grid.component.scss
@@ -14,8 +14,8 @@
 }
 
 
-/deep/ .nb-tree-grid-cell,
-/deep/ .nb-tree-grid-header-cell,
-/deep/ .nb-tree-grid-footer-cell {
+::ng-deep .nb-tree-grid-cell,
+::ng-deep .nb-tree-grid-header-cell,
+::ng-deep .nb-tree-grid-footer-cell {
   overflow: hidden;
 }
diff --git a/src/framework/theme/components/window/windows-container.component.scss b/src/framework/theme/components/window/windows-container.component.scss
@@ -3,7 +3,7 @@
   align-items: flex-end;
   overflow-x: auto;
 
-  /deep/ nb-window:not(.full-screen) {
+  ::ng-deep nb-window:not(.full-screen) {
     margin: 0 2rem;
   }
 }
diff --git a/src/playground/with-layout/dialog/dialog-common.scss b/src/playground/with-layout/dialog/dialog-common.scss
@@ -1,4 +1,4 @@
-/deep/ {
+::ng-deep {
   nb-layout-column {
     height: 80vw;
   }

diff --git a/src/playground/with-layout/infinite-list/infinite-news-list.component.scss b/src/playground/with-layout/infinite-list/infinite-news-list.component.scss
@@ -1,4 +1,4 @@
-/deep/ body {
+::ng-deep body {
   height: 30rem;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,7 +38,7 @@ @@
         }
       }
-      /deep/ nb-tabset.tabs-container {
+      ::ng-deep nb-tabset.tabs-container {
         border-radius: 0.5rem 0.5rem 0 0;
         > ul {
@@ Expand Down @@