Notification style fix

This commit is contained in:
Kristof De Langhe
2018-05-15 11:34:45 +02:00
parent c712ae789e
commit cdf707bfea
7 changed files with 34 additions and 14 deletions

View File

@@ -89,7 +89,7 @@
"angular-idle-preload": "2.0.4",
"angulartics2": "^5.2.0",
"body-parser": "1.18.2",
"bootstrap": "^4.0.0",
"bootstrap": "4.1.1",
"cerialize": "0.1.18",
"compression": "1.7.1",
"cookie-parser": "1.4.3",

View File

@@ -1,4 +1,4 @@
<div class="alert {{notification.type}} alert-dismissible p-3" role="alert"
<div class="alert {{notification.type}} alert-dismissible m-3 shadow" role="alert"
[@enterLeave]="animate">
<div class="notification-progress-loader position-absolute w-100" *ngIf="showProgressBar">

View File

@@ -1,5 +1,11 @@
@import '../../../../styles/variables.scss';
.alert {
display: inline-block;
min-width: $modal-sm;
text-align: left;
}
.close {
outline: none !important
}

View File

@@ -2,24 +2,25 @@
@import '../../../../styles/mixins';
.notifications-wrapper {
width: 300px;
z-index: 1051;
z-index: $zindex-popover;
text-align: right;
@include word-wrap;
}
.notifications-wrapper.left {
left: 20px;
left: 0;
}
.notifications-wrapper.top {
top: 20px;
top:0;
}
.notifications-wrapper.right {
right: 20px;
right: 0;
}
.notifications-wrapper.bottom {
bottom: 20px;
bottom: 0;
}
.notifications-wrapper.center {
@@ -39,7 +40,7 @@
@media screen and (max-width: map-get($grid-breakpoints, sm)) {
.notifications-wrapper {
width: auto;
left: 20px;
right: 20px;
left: 0;
right: 0;
}
}

View File

@@ -34,3 +34,4 @@ $navbar-light-color: rgba(black, .5) !default;
$navbar-dark-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-dark-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E");
$navbar-light-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-light-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E");
$enable-shadows: true !default;

View File

@@ -1,3 +1,15 @@
@import '../../node_modules/bootstrap/scss/functions.scss';
@import '../../node_modules/bootstrap/scss/mixins.scss';
@import '../../node_modules/bootstrap/scss/variables.scss';
@mixin word-wrap() {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

View File

@@ -1038,9 +1038,9 @@ boom@5.x.x:
dependencies:
hoek "4.x.x"
bootstrap@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
bootstrap@4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.1.tgz#3aec85000fa619085da8d2e4983dfd67cf2114cb"
boxen@^1.2.1:
version "1.3.0"