Notification styling
This commit is contained in:
parent
3518ac7cb2
commit
cff67a3b1d
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue