@message-prefix-cls: ~"@{css-prefix}message"; @icon-prefix-cls: ~"@{css-prefix}icon"; .@{message-prefix-cls} { font-size: @font-size-small; position: fixed; z-index: @zindex-message; width: 100%; top: 16px; left: 0; &-notice { padding: 8px; text-align: center; &:first-child { margin-top: -8px; } &-close { position: absolute; right: 4px; top: 9px; color: #999; outline: none; i.@{icon-prefix-cls}{ .close-base(-3px); } } } &-notice-content { display: inline-block; pointer-events: all; padding: 8px 16px; //border: 1px solid @border-color-split; border-radius: @border-radius-small; box-shadow: @shadow-base; background: #fff; &-text{ display: inline-block; } } &-notice-closable{ .@{message-prefix-cls}-notice-content-text{ padding-right: 32px; } } &-success .@{icon-prefix-cls} { color: @success-color; } &-error .@{icon-prefix-cls} { color: @error-color; } &-warning .@{icon-prefix-cls} { color: @warning-color; } &-info .@{icon-prefix-cls}, &-loading .@{icon-prefix-cls} { color: @primary-color; } .@{icon-prefix-cls} { margin-right: 8px; font-size: 14px; top: 1px; position: relative; } }