Open b2k opened 3 years ago
Here is an example of how we are using scss to provide theme support in our applications. These themes aren't getting propagated to the ngx-bootstrap modal dialog since it is added outside of our app-root node.
styles.scss:
@import 'bootstrap4.scss';
@import 'themes/common.scss';
@import 'themes/blue-light.scss';
@import 'themes/dark-yellow.scss';
/* trimmed for brevity */
themes/blue-light.scss:
app-root.blue-light {
$primary: #003da6;
$secondary: #f2f2f2;
$offwhite: #f2f2f2;
$light: #ffffff;
$dark: #000000;
$midtone: #999999;
$darktone: #333333;
$tooltip-bg: #5b5b5b;
$error: #e40509;
$error-alt: #e91c1f;
$valid: #026b22cc;
$semi-dark: rgba(96, 96, 96, 0.5);
$semi-light: rgba(192, 192, 192, 0.5);
$typeAheadHeight: 200px;
.card {
background: $light;
color: $dark;
}
#form-control {
border-bottom: thick solid $primary;
color: rgba(0, 0, 0, 0.5);
background-color: $offwhite;
}
.btn-primary {
background-color: $primary;
border-color: $primary;
color: $light;
}
.btn-secondary {
background-color: $secondary;
border-color: $secondary;
color: $dark;
}
h6 {
color: $darktone;
}
h2 {
color: $primary;
}
/* trimmed for brevity */
}
When using scoped styles, to ensure that angular app appearance is consistent and independent of the host page, attaching the modal-container to body forces the developer to either write global css to style the modal or attempt moving the container.
Both of these may cause unknown side-effects for the hosting page. This is particularly relevant when the angular app is embedded into a third party site.
Here is a StackBlitz that demonstrates the issue and a temporary work-around: https://stackblitz.com/edit/ngx-bootstrap-zsdcuj
Expected behavior
ngx-bootstrap components should confine themselves to the angular application's root node.