ten-design-vue
Version:
ten-vue
127 lines (125 loc) • 2.25 kB
text/less
/* dependencies icon */
@import "../vars.less";
.ten-alert{
min-width: 630px;
display: block;
padding: @alert-padding;
font-size: @text-level-1-size;
line-height: @alert-line-height;
z-index: 999;
text-align: center;
color: #FFFFFF;
outline: none;
border: none;
position: relative;
border-radius: @alert-border-radius-default;
.ten-icon{
vertical-align: middle;
margin-right: 12px;
font-size: 18px;
position: relative;
bottom: 1px;
}
.ten-alert__closeable__icon,.ten-alert__closeable__content{
font-size: 14px;
float: right;
margin-top: 4px;
margin-right: 4px;
cursor: pointer;
z-index: 10;
}
.ten-alert__closeable__content{
font-size: 14px;
.ten-icon{
margin-right: 0;
}
}
.ten-alert__description{
opacity: 0.8;
font-size: @smalltext-level-1-size;
color: #FFFFFF;
line-height: 14px;
margin-top: 5px;
padding-left: 32px;
}
.ten-alert__message{
display: inline-block;
}
.ten-alert__message--noicon{
display: inline-block;
line-height: 24px;
}
.ten-alert__description--noicon{
padding-left: 0;
}
}
.ten-alert--info{
background: @info-color;
color: #102C53;
.ten-icon{
color: #344f73;
}
.closeBtn{
color: rgba(16,44,83,0.80);
}
}
.ten-alert--success{
background: @success-color;
.closeBtn{
opacity: 0.72;
}
}
.ten-alert--error{
background: @error-color;
.closeBtn{
opacity: 0.72;
}
}
.ten-alert--warn{
background: #FFF0CE;
color: @warning-color;
.ten-icon{
color: @warning-color;
}
.closeBtn{
color: @text-color;
opacity: 0.72;
}
.ten-alert__description{
opacity: 0.6;
color: #010101;
}
}
.ten-alert--disabled{
background: #D8D8D8;
color: #102C53;
.ten-icon{
color: #6b6b6b;
}
.closeBtn{
color: @text-color;
opacity: 0.72;
}
.ten-alert__description{
opacity: 0.6;
color: #010101;
}
}
.ten-alert--hasclose{
text-align: left;
}
.ten-alert--noicon{
.ten-alert__message{
display: inline-block;
line-height: 24px;
}
.ten-alert__description{
padding-left: 0;
}
}
.ten-alert--fade-leave-active {
transition: opacity 0.3s;
}
.ten-alert--fade-leave-to {
opacity: 0;
}