harness-drone/server/static/styles/modules/alert.less

95 lines
No EOL
1.8 KiB
Text

.alert {
line-height:23px;
padding:20px;
border:none;
&:before {
font-family: 'FontAwesome';
font-size:22px;
min-width:32px;
margin-left:10px;
margin-right:15px;
display:inline-block;
}
a:visited,
a:active,
a {
color: inherit;
}
}
.alert-info {
background:#f4f8fa;
color: #5bc0de;
border-left: 5px solid #5bc0de;
&:before {
content: "\f05a";
}
}
.alert[data-status="Success"] {
background: #D9F3EA;
border-left: 5px solid #40C598;
color: #339E7A;
&:before {
content: "\f00c";
}
}
.alert[data-status="Error"],
.alert[data-status="Failure"] {
background: #fdf7f7;
border-left: 5px solid #ed5564;
color: #ed5564;
&:before {
content: "\f00d";
}
}
.alert[data-status="Pending"],
.alert[data-status="Started"] {
position:relative;
margin-bottom:10px;
padding-bottom:30px;
background: #fef9e5;
border-left: none;
color: #CBB45B;
&:before {
x-display:none;
content: "\f126";
}
&:after {
-webkit-animation: progress 1s linear infinite;
-moz-animation: progress 1s linear infinite;
animation: progress 1s linear infinite;
position:absolute;
content:' ';
height:10px;
bottom:-1px;
left:0px;
right:0px;
background: #fee172;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.55) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.55) 75%, transparent 75%, transparent);
background-repeat: repeat-x;
background-size: 30px 30px;
}
}
@-webkit-keyframes progress {
to {background-position: 30px 0;}
}
@-moz-keyframes progress {
to {background-position: 30px 0;}
}
@keyframes progress {
to {background-position: 30px 0;}
}