Styling a bit, still uglyish

This commit is contained in:
Jiiks 2018-08-20 16:48:29 +03:00
parent cff67a3b1d
commit 1a11eb6a6b
2 changed files with 29 additions and 1 deletions

View File

@ -46,6 +46,7 @@
.bd-notificationBody {
padding: 0 10px;
flex-grow: 1;
.bd-notificationText {
color: #FFF;
@ -60,6 +61,29 @@
animation: bd-notif-slideout .5s;
}
}
.bd-notificationFooter {
height: 20px;
padding: 5px;
justify-content: flex-end;
.bd-notificationBtn {
cursor: pointer;
height: 10px;
line-height: 10px;
font-size: 14px;
font-weight: 500;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
background: rgba(255, 255, 255, .1);
margin-left: 5px;
&:hover {
background: rgba(255, 255, 255, .2);
}
}
}
}
@keyframes bd-notif-slidein {

View File

@ -17,7 +17,11 @@
<div class="bd-notificationBody bd-flex">
<div class="bd-notificationText">{{notifications[0].text}}</div>
</div>
<div class="bd-notificationFooter bd-flex"></div>
<div class="bd-notificationFooter bd-flex">
<div class="bd-notificationBtn" v-for="(btn, index) in notifications[0].buttons">
{{btn.text}}
</div>
</div>
</div>
</div>
</template>