Re-enable viewencapsulation for some

MintPlayer · Dec 29, 2024 · 2cc161b · 2cc161b
1 parent 6bb5869
commit 2cc161b
Show file tree

Hide file tree

Showing 20 changed files with 102 additions and 120 deletions.
diff --git a/libs/mintplayer-ng-bootstrap/close/src/close.component.scss b/libs/mintplayer-ng-bootstrap/close/src/close.component.scss
@@ -1,10 +1,8 @@
-bs-close {
-    // Configuration
-    @import "../../../../node_modules/bootstrap/scss/functions";
-    @import "../../../../node_modules/bootstrap/scss/variables";
-    @import "../../../../node_modules/bootstrap/scss/variables-dark";
-    @import "../../../../node_modules/bootstrap/scss/mixins";
+// Configuration
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../node_modules/bootstrap/scss/variables-dark";
+@import "../../../../node_modules/bootstrap/scss/mixins";
 
-    // Layout & components
-    @import "../../../../node_modules/bootstrap/scss/close";
-}
+// Layout & components
+@import "../../../../node_modules/bootstrap/scss/close";
diff --git a/libs/mintplayer-ng-bootstrap/close/src/close.component.ts b/libs/mintplayer-ng-bootstrap/close/src/close.component.ts
@@ -5,7 +5,6 @@ import { Component, EventEmitter, OnInit, Output, ViewEncapsulation } from '@ang
   templateUrl: './close.component.html',
   styleUrls: ['./close.component.scss'],
   standalone: true,
-  encapsulation: ViewEncapsulation.None,
 })
 export class BsCloseComponent {
   @Output() click = new EventEmitter<any>();

diff --git a/libs/mintplayer-ng-bootstrap/color-picker/components/slider/slider.component.scss b/libs/mintplayer-ng-bootstrap/color-picker/components/slider/slider.component.scss
@@ -1,26 +1,28 @@
 $size: 8px;
 $thumb: 3 * $size;
 
-.bs-slider-track {
-    height: $size;
-}
+bs-slider {
+    .bs-slider-track {
+        height: $size;
+    }
 
-.bs-slider-wrapper {
-    padding-top: $size;
-    padding-bottom: $size;
-}
+    .bs-slider-wrapper {
+        padding-top: $size;
+        padding-bottom: $size;
+    }
+
+    .thumb {
+        width: $thumb;
+        height: $thumb;
+        top: 0;
+        // margin-top: -$size;
+        // margin-bottom: -$size;
+        border-radius: 50%;
+        box-shadow: 0 0 0 0.1rem rgba(100, 107, 114, 0.25);
+    }
 
-.thumb {
-    width: $thumb;
-    height: $thumb;
-    top: 0;
-    // margin-top: -$size;
-    // margin-bottom: -$size;
-    border-radius: 50%;
-    box-shadow: 0 0 0 0.1rem rgba(100, 107, 114, 0.25);
-}
-
-.track {
-    height: $size;
-    border-radius: $size;
+    .track {
+        height: $size;
+        border-radius: $size;
+    }
 }
diff --git a/libs/mintplayer-ng-bootstrap/dock/src/dock-pane-renderer/dock-pane-renderer.component.scss b/libs/mintplayer-ng-bootstrap/dock/src/dock-pane-renderer/dock-pane-renderer.component.scss
@@ -1,9 +1,11 @@
-.dock-tabs {
-    background: #F3F3F3;
-    // border: 4px solid #5858F8;
-}
+bs-dock-pane-renderer {
+    .dock-tabs {
+        background: #F3F3F3;
+        // border: 4px solid #5858F8;
+    }
 
-:host .tab-page-content {
-    background: #FFF;
-    min-height: 100%;
+    .tab-page-content {
+        background: #FFF;
+        min-height: 100%;
+    }
 }
diff --git a/libs/mintplayer-ng-bootstrap/navbar/src/navbar/navbar.component.scss b/libs/mintplayer-ng-bootstrap/navbar/src/navbar/navbar.component.scss
@@ -28,27 +28,29 @@
     }
 }
 
-nav {
-    left: 0;
-    top: 0;
-    right: 0;
-    z-index: 10;
-    // overflow-y: auto !important;
-}
-
-@media (min-width: 768px) {
-    .mx-md-unset {
-        margin-left: 0 !important;    
-        margin-right: 0 !important;    
+bs-navbar {
+    nav {
+        left: 0;
+        top: 0;
+        right: 0;
+        z-index: 10;
+        // overflow-y: auto !important;
     }
 
-    .w-md-auto {
-        width: auto !important;
+    @media (min-width: 768px) {
+        .mx-md-unset {
+            margin-left: 0 !important;    
+            margin-right: 0 !important;    
+        }
+
+        .w-md-auto {
+            width: auto !important;
+        }
     }
-}
 
-.tw {
-    margin: -.5rem 0;
+    .tw {
+        margin: -.5rem 0;
+    }
 }
 
 bs-navbar-nav {

diff --git a/libs/mintplayer-ng-bootstrap/pagination/src/component/pagination/pagination.component.scss b/libs/mintplayer-ng-bootstrap/pagination/src/component/pagination/pagination.component.scss
@@ -1,12 +1,12 @@
-bs-pagination {
-    // Configuration
-    @import "../../../../../../node_modules/bootstrap/scss/functions";
-    @import "../../../../../../node_modules/bootstrap/scss/variables";
-    @import "../../../../../../node_modules/bootstrap/scss/variables-dark";
-    @import "../../../../../../node_modules/bootstrap/scss/mixins";
+// Configuration
+@import "../../../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../../../node_modules/bootstrap/scss/variables-dark";
+@import "../../../../../../node_modules/bootstrap/scss/mixins";
 
-    // Layout & components
-    @import "../../../../../../node_modules/bootstrap/scss/pagination";
-
+// Layout & components
+@import "../../../../../../node_modules/bootstrap/scss/pagination";
+
+:host {
     display: inline-block;
 }
diff --git a/libs/mintplayer-ng-bootstrap/pagination/src/component/pagination/pagination.component.ts b/libs/mintplayer-ng-bootstrap/pagination/src/component/pagination/pagination.component.ts
@@ -8,7 +8,6 @@ import { AsyncPipe } from '@angular/common';
 @Component({
   selector: 'bs-pagination',
   standalone: true,
-  encapsulation: ViewEncapsulation.None,
   templateUrl: './pagination.component.html',
   styleUrls: ['./pagination.component.scss'],
   imports: [AsyncPipe],

diff --git a/libs/mintplayer-ng-bootstrap/progress-bar/src/progress-bar/progress-bar.component.scss b/libs/mintplayer-ng-bootstrap/progress-bar/src/progress-bar/progress-bar.component.scss
@@ -1,10 +0,0 @@
-bs-progress-bar {
-    // Configuration
-    @import "../../../../../node_modules/bootstrap/scss/functions";
-    @import "../../../../../node_modules/bootstrap/scss/variables";
-    @import "../../../../../node_modules/bootstrap/scss/variables-dark";
-    @import "../../../../../node_modules/bootstrap/scss/mixins";
-
-    // Layout & components
-    @import "../../../../../node_modules/bootstrap/scss/progress";// Disable animation if transitions are disabled
-}

diff --git a/libs/mintplayer-ng-bootstrap/progress-bar/src/progress-bar/progress-bar.component.ts b/libs/mintplayer-ng-bootstrap/progress-bar/src/progress-bar/progress-bar.component.ts
@@ -8,7 +8,6 @@ import { BehaviorSubject, combineLatest, map, Observable } from 'rxjs';
   templateUrl: './progress-bar.component.html',
   styleUrls: ['./progress-bar.component.scss'],
   standalone: false,
-  encapsulation: ViewEncapsulation.None,
 })
 export class BsProgressBarComponent {
 

diff --git a/libs/mintplayer-ng-bootstrap/select/src/component/select.component.scss b/libs/mintplayer-ng-bootstrap/select/src/component/select.component.scss
@@ -1,13 +1,11 @@
-// :host {
-//     display: contents;
-// }
+// @import "../../../../../node_modules/bootstrap/scss/bootstrap-utilities.scss";
+@import "../../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../../node_modules/bootstrap/scss/variables-dark";
+@import "../../../../../node_modules/bootstrap/scss/mixins";
+// @import "../../../../../node_modules/bootstrap/scss/utilities";
+@import "../../../../../node_modules/bootstrap/scss/forms/form-select";
 
-bs-select {
-    // @import "../../../../../node_modules/bootstrap/scss/bootstrap-utilities.scss";
-    @import "../../../../../node_modules/bootstrap/scss/functions";
-    @import "../../../../../node_modules/bootstrap/scss/variables";
-    @import "../../../../../node_modules/bootstrap/scss/variables-dark";
-    @import "../../../../../node_modules/bootstrap/scss/mixins";
-    // @import "../../../../../node_modules/bootstrap/scss/utilities";
-    @import "../../../../../node_modules/bootstrap/scss/forms/form-select";
-}
+:host {
+    display: contents;
+}
diff --git a/libs/mintplayer-ng-bootstrap/select/src/component/select.component.ts b/libs/mintplayer-ng-bootstrap/select/src/component/select.component.ts
@@ -7,7 +7,6 @@ import { BsSelectSize } from '../types/select-size';
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.scss'],
   standalone: false,
-  encapsulation: ViewEncapsulation.None,
 })
 export class BsSelectComponent implements OnInit {
   constructor(private renderer: Renderer2) {

diff --git a/libs/mintplayer-ng-bootstrap/spinner/src/spinner.component.scss b/libs/mintplayer-ng-bootstrap/spinner/src/spinner.component.scss
@@ -1,19 +1,17 @@
-bs-spinner {
-    @import '../../../../node_modules/bootstrap/scss/functions';
-    @import '../../../../node_modules/bootstrap/scss/variables';
-    @import '../../../../node_modules/bootstrap/scss/variables-dark';
-    @import '../../../../node_modules/bootstrap/scss/mixins';
-    // @import '../../../../node_modules/bootstrap/scss/bootstrap-utilities.scss';
-    // @import '../../../../node_modules/bootstrap/scss/utilities';
-    @import '../../../../node_modules/bootstrap/scss/spinners';
-    // @import '../../../../node_modules/bootstrap/scss/utilities/api';
+@import '../../../../node_modules/bootstrap/scss/functions';
+@import '../../../../node_modules/bootstrap/scss/variables';
+@import '../../../../node_modules/bootstrap/scss/variables-dark';
+@import '../../../../node_modules/bootstrap/scss/mixins';
+// @import '../../../../node_modules/bootstrap/scss/bootstrap-utilities.scss';
+// @import '../../../../node_modules/bootstrap/scss/utilities';
+@import '../../../../node_modules/bootstrap/scss/spinners';
+// @import '../../../../node_modules/bootstrap/scss/utilities/api';
 
-    // For some reason, the above imports do not apply the animation
-    .spinner-border {
-        animation: .75s linear infinite spinner-border;
-    }
+// For some reason, the above imports do not apply the animation
+.spinner-border {
+    animation: .75s linear infinite spinner-border;
+}
 
-    .spinner-grow {
-        animation: .75s linear infinite spinner-grow;
-    }
+.spinner-grow {
+    animation: .75s linear infinite spinner-grow;
 }
diff --git a/libs/mintplayer-ng-bootstrap/spinner/src/spinner.component.ts b/libs/mintplayer-ng-bootstrap/spinner/src/spinner.component.ts
@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Color } from '@mintplayer/ng-bootstrap';
 import { BehaviorSubject, map, Observable } from 'rxjs';
 
@@ -8,7 +8,6 @@ import { BehaviorSubject, map, Observable } from 'rxjs';
   templateUrl: './spinner.component.html',
   styleUrls: ['./spinner.component.scss'],
   standalone: true,
-  encapsulation: ViewEncapsulation.None,
   imports: [AsyncPipe],
 })
 export class BsSpinnerComponent implements OnInit {

diff --git a/libs/mintplayer-ng-bootstrap/sticky-footer/src/sticky-footer/sticky-footer.component.html b/libs/mintplayer-ng-bootstrap/sticky-footer/src/sticky-footer/sticky-footer.component.html
@@ -1,3 +1,3 @@
-<footer bsObserveSize #sizeObserver="bsObserveSize" class="footer sfooter position-absolute">
+<footer bsObserveSize #sizeObserver="bsObserveSize" class="footer bs-sticky-footer position-absolute">
     <ng-content></ng-content>
 </footer>
diff --git a/libs/mintplayer-ng-bootstrap/sticky-footer/src/sticky-footer/sticky-footer.component.scss b/libs/mintplayer-ng-bootstrap/sticky-footer/src/sticky-footer/sticky-footer.component.scss
@@ -1,4 +1,4 @@
-:host .footer.sfooter {
+.footer.bs-sticky-footer {
     bottom: 0;
     left: 0;
     right: 0;

diff --git a/libs/mintplayer-ng-bootstrap/sticky-footer/src/sticky-footer/sticky-footer.component.ts b/libs/mintplayer-ng-bootstrap/sticky-footer/src/sticky-footer/sticky-footer.component.ts
@@ -8,6 +8,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
   templateUrl: './sticky-footer.component.html',
   styleUrls: ['./sticky-footer.component.scss'],
   standalone: false,
+  encapsulation: ViewEncapsulation.None,
 })
 export class BsStickyFooterComponent implements AfterViewInit {
   constructor(private parent: BsStickyFooterParentDirective, private destroy: DestroyRef) {}

diff --git a/libs/mintplayer-ng-bootstrap/toggle-button/src/component/toggle-button.component.scss b/libs/mintplayer-ng-bootstrap/toggle-button/src/component/toggle-button.component.scss
@@ -1,10 +1,8 @@
-bs-toggle-button {
-    // Configuration
-    @import "../../../../../node_modules/bootstrap/scss/functions";
-    @import "../../../../../node_modules/bootstrap/scss/variables";
-    @import "../../../../../node_modules/bootstrap/scss/variables-dark";
-    @import "../../../../../node_modules/bootstrap/scss/mixins";
+// Configuration
+@import "../../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../../node_modules/bootstrap/scss/variables-dark";
+@import "../../../../../node_modules/bootstrap/scss/mixins";
 
-    // Layout & components
-    @import "../../../../../node_modules/bootstrap/scss/forms/form-check";
-}
+// Layout & components
+@import "../../../../../node_modules/bootstrap/scss/forms/form-check";
diff --git a/libs/mintplayer-ng-bootstrap/toggle-button/src/component/toggle-button.component.ts b/libs/mintplayer-ng-bootstrap/toggle-button/src/component/toggle-button.component.ts
@@ -8,7 +8,6 @@ import { BsCheckStyle } from '../types/check-style';
   templateUrl: './toggle-button.component.html',
   styleUrls: ['./toggle-button.component.scss'],
   standalone: false,
-  encapsulation: ViewEncapsulation.None,
 })
 export class BsToggleButtonComponent implements AfterViewInit {
 

diff --git a/libs/mintplayer-ng-bootstrap/treeview/src/treeview/treeview.component.scss b/libs/mintplayer-ng-bootstrap/treeview/src/treeview/treeview.component.scss
@@ -1,4 +1,4 @@
-bs-treeview {
+:host {
     margin-bottom: -1px;
 }
 

diff --git a/libs/mintplayer-ng-bootstrap/treeview/src/treeview/treeview.component.ts b/libs/mintplayer-ng-bootstrap/treeview/src/treeview/treeview.component.ts
@@ -8,7 +8,6 @@ import { SlideUpDownAnimation } from '@mintplayer/ng-animations';
   templateUrl: './treeview.component.html',
   styleUrls: ['./treeview.component.scss'],
   standalone: false,
-  encapsulation: ViewEncapsulation.None,
   animations: [SlideUpDownAnimation],
 })
 export class BsTreeviewComponent {