@alifd/next/es/message/variable.css

A configurable component library for web built on React.

:root {
--message-size-l-padding: 16px;
--message-size-l-border-width: 2px;
--message-size-l-title-content-padding-left: 12px;
--message-size-l-title-content-padding-right: 20px;
--message-size-l-title-font: 20px;
--message-size-l-content-margin-top: 8px;
--message-size-l-content-font: 12px;
--message-size-l-close-top: 16px;
--message-size-l-close-right: 16px;
--message-size-l-icon: 24px;
--message-size-l-title-content-padding: 0 20px 0 calc(12px + 24px);
--message-size-m-padding: 12px;
--message-size-m-border-width: 1px;
--message-size-m-title-content-padding-left: 8px;
--message-size-m-title-content-padding-right: 20px;
--message-size-m-title-font: 16px;
--message-size-m-content-margin-top: 8px;
--message-size-m-content-font: 12px;
--message-size-m-close-top: 12px;
--message-size-m-close-right: 12px;
--message-size-m-icon: 16px;
--message-size-m-title-content-padding: 0 20px 0 calc(8px + 16px);
--message-close-icon-size: 12px;
--message-size-l-border-radius: 3px;
--message-size-m-border-radius: 3px;
--message-size-l-border-radius-toast: 3px;
--message-size-m-border-radius-toast: 3px;
--message-border-style: solid;
--message-border-style-toast: solid;
--message-shadow-toast: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
--message-success-color-bg-inline: #E4FDDA;
--message-success-color-bg-addon: transparent;
--message-success-color-bg-toast: #FFFFFF;
--message-success-color-border-inline: #E4FDDA;
--message-success-color-border-toast: #FFFFFF;
--message-success-color-title-inline: #333333;
--message-success-color-title-addon: #333333;
--message-success-color-title-toast: #333333;
--message-success-color-content-inline: #666666;
--message-success-color-content-addon: #666666;
--message-success-color-content-toast: #666666;
--message-success-color-icon-inline: #46BC15;
--message-success-color-icon-addon: #46BC15;
--message-success-color-icon-toast: #46BC15;
--message-error-color-bg-inline: #FFECE4;
--message-error-color-bg-addon: transparent;
--message-error-color-bg-toast: #FFFFFF;
--message-error-color-border-inline: #FFECE4;
--message-error-color-border-toast: #FFFFFF;
--message-error-color-title-inline: #333333;
--message-error-color-title-addon: #333333;
--message-error-color-title-toast: #333333;
--message-error-color-content-inline: #666666;
--message-error-color-content-addon: #666666;
--message-error-color-content-toast: #666666;
--message-error-color-icon-inline: #FF3000;
--message-error-color-icon-addon: #FF3000;
--message-error-color-icon-toast: #FF3000;
--message-warning-color-bg-inline: #FFF3E0;
--message-warning-color-bg-addon: transparent;
--message-warning-color-bg-toast: #FFFFFF;
--message-warning-color-border-inline: #FFF3E0;
--message-warning-color-border-toast: #FFFFFF;
--message-warning-color-title-inline: #333333;
--message-warning-color-title-addon: #333333;
--message-warning-color-title-toast: #333333;
--message-warning-color-content-inline: #666666;
--message-warning-color-content-addon: #666666;
--message-warning-color-content-toast: #666666;
--message-warning-color-icon-inline: #FF9300;
--message-warning-color-icon-addon: #FF9300;
--message-warning-color-icon-toast: #FF9300;
--message-notice-color-bg-inline: #E3F2FD;
--message-notice-color-bg-addon: transparent;
--message-notice-color-bg-toast: #FFFFFF;
--message-notice-color-border-inline: #E3F2FD;
--message-notice-color-border-toast: #FFFFFF;
--message-notice-color-title-inline: #333333;
--message-notice-color-title-addon: #333333;
--message-notice-color-title-toast: #333333;
--message-notice-color-content-inline: #666666;
--message-notice-color-content-addon: #666666;
--message-notice-color-content-toast: #666666;
--message-notice-color-icon-inline: #4494F9;
--message-notice-color-icon-addon: #4494F9;
--message-notice-color-icon-toast: #4494F9;
--message-help-color-bg-inline: #E3FFF8;
--message-help-color-bg-addon: transparent;
--message-help-color-bg-toast: #FFFFFF;
--message-help-color-border-inline: #E3FFF8;
--message-help-color-border-toast: #FFFFFF;
--message-help-color-title-inline: #333333;
--message-help-color-title-addon: #333333;
--message-help-color-title-toast: #333333;
--message-help-color-content-inline: #666666;
--message-help-color-content-addon: #666666;
--message-help-color-content-toast: #666666;
--message-help-color-icon-inline: #01C1B2;
--message-help-color-icon-addon: #01C1B2;
--message-help-color-icon-toast: #01C1B2;
--message-loading-color-bg-inline: #FFFFFF;
--message-loading-color-bg-addon: transparent;
--message-loading-color-bg-toast: #FFFFFF;
--message-loading-color-border-inline: #FFFFFF;
--message-loading-color-border-toast: #FFFFFF;
--message-loading-color-title-inline: #333333;
--message-loading-color-title-addon: #333333;
--message-loading-color-title-toast: #333333;
--message-loading-color-content-inline: #666666;
--message-loading-color-content-addon: #666666;
--message-loading-color-content-toast: #666666;
--message-loading-color-icon-inline: #5584FF;
--message-loading-color-icon-addon: #5584FF;
--message-loading-color-icon-toast: #5584FF;
--message-close-icon-color: #999999;
--message-hover-close-icon-color: #666666;
--message-success-icon-content: "";
--message-warning-icon-content: "";
--message-error-icon-content: "";
--message-notice-icon-content: "";
--message-help-icon-content: "";
--message-loading-icon-content: "";
}