UNPKG

ten-design-vue

Version:

ten-vue

127 lines (125 loc) 2.25 kB
/* 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; }