web-apps/vendor/framework7/src/less/material/notifications.less
2016-11-11 16:24:21 +03:00

75 lines
1.7 KiB
Plaintext

/* === Notifications === */
@notificationsDuration: 450ms;
.notifications {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 10900;
color: #fff;
font-size: 14px;
margin: 0;
border: none;
display: none;
box-sizing: border-box;
max-height: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
.transition(@notificationsDuration);
-webkit-perspective:1200px;
perspective:1200px;
&.list-block > ul {
.hairline-remove(top);
.hairline-remove(bottom);
max-width: 568px;
background: #323232;
margin: 0 auto;
}
.item-content {
.align-items(flex-start);
padding-left: 24px;
}
.item-title {
font-size: 14px;
font-weight: normal;
white-space: normal;
padding-top: 14px;
padding-bottom: 14px;
}
.item-inner {
padding-right: 24px;
padding-top: 0;
padding-bottom: 0;
.hairline-remove(bottom);
}
.item-after {
max-height: none;
margin-left: 16px;
}
.button.close-notification {
color: lighten(saturate(@themeColor, 10%), 10%);
}
.notification-item {
margin: 0 auto;
.transition(@notificationsDuration);
.delay(100ms);
.translate3d(0,0,0);
opacity: 1;
}
.notification-hidden {
opacity: 0;
.delay(0ms);
.translate3d(0,0,0);
}
.notification-item-removing {
.delay(0ms);
}
@media (min-width: 569px) {
&.list-block > ul {
border-radius: 2px;
width: auto;
min-width: 288px;
}
}
}