Notification styling

This commit is contained in:
Jiiks 2018-08-20 16:40:28 +03:00
parent 3518ac7cb2
commit cff67a3b1d
2 changed files with 18 additions and 8 deletions

View File

@ -6,7 +6,7 @@
.bd-notificationContainer {
position: relative;
background: rgb(54, 57, 63);
background: #0a0a0a;
width: 280px;
height: 130px;
top: 30px;
@ -15,27 +15,37 @@
animation: bd-notif-slidein 1s reverse;
.bd-notificationHeader {
height: 24px;
border-bottom: 1px solid #484b51;
height: 20px;
.bd-notificationDismissBtn {
cursor: pointer;
border-right: 1px solid #484b51;
opacity: 0;
&:hover {
opacity: 1;
background: rgba(0, 0, 0, .1);
.bd-materialDesignIcon {
fill: #fff;
}
}
.bd-materialDesignIcon {
fill: #fff;
fill: #aeaeae;
display: flex;
height: 24px;
height: 20px;
}
}
}
&:hover {
.bd-notificationDismissBtn {
opacity: 1;
}
}
.bd-notificationBody {
padding: 10px;
padding: 0 10px;
.bd-notificationText {
color: #FFF;

View File

@ -12,7 +12,7 @@
<div class="bd-notifications">
<div v-if="notifications.length" class="bd-notificationContainer bd-flex bd-flexCol bd-active" :class="{'bd-closing': dismissing}">
<div class="bd-notificationHeader bd-flex">
<div @click="this.dismissFirst" class="bd-notificationDismissBtn"><MiArrowLeft/></div>
<div @click="this.dismissFirst" class="bd-notificationDismissBtn"><MiArrowLeft size="20"/></div>
</div>
<div class="bd-notificationBody bd-flex">
<div class="bd-notificationText">{{notifications[0].text}}</div>