ORIENT/modules/system/assets/ui/less/flashmessage.less

97 lines
2.0 KiB
Plaintext

//
// Dependencies
// --------------------------------------------------
@import "global.less";
@import "icon.close.less";
//
// Flash Messages
// --------------------------------------------------
@color-flash-success-bg: #8da85e;
@color-flash-error-bg: #cc3300;
@color-flash-warning-bg: #f0ad4e;
@color-flash-info-bg: #5fb6f5;
@color-flash-text: #ffffff;
#layout-canvas {
.flash-message{ display: none; }
}
.flash-message {
position: fixed;
width: 500px;
left: 50%;
top: 13px;
margin-left: -250px;
color: @color-flash-text;
font-size: 14px;
padding: 10px 30px 10px 15px;
z-index: 10000;
word-wrap: break-word;
text-shadow: 0 -1px 0px rgba(0,0,0,.25);
text-align: center;
.box-shadow(inset 0 -2px 0 rgba(0,0,0,.1));
.border-radius(@border-radius-base);
&.fade {
.opacity(0);
.transition(~'opacity .15s linear');
}
&.fade.in {
.opacity(1);
.animation(~'flashmessage-fade-in 1s cubic-bezier(0.2, 0.7, 0.5, 1)');
}
&.success { background: @color-flash-success-bg; }
&.error { background: @color-flash-error-bg; }
&.warning { background: @color-flash-warning-bg; }
&.info { background: @color-flash-info-bg; }
button {
float: none;
position: absolute;
right: 10px;
top: 8px;
color: white;
outline: none;
&:hover {
color: white
}
}
&.static {
position: static!important;
width: auto!important;
display: block!important;
margin-left: 0!important;
}
}
@media (max-width: @screen-sm) {
.flash-message {
left: 10px;
right: 10px;
top: 10px;
margin-left: 0;
width: auto;
}
}
@keyframes flashmessage-fade-in {
0% {
.transform(~"translateY(-30%)");
opacity: 0;
}
70% {
opacity: 1;
}
100% {
.transform(~"translateY(0)");
}
}