@alifd/next/lib/dialog/variable.css

A configurable component library for web built on React.

:root {
--dialog-border-width: 1px;
--dialog-title-font-size: 16px;
--dialog-title-font-weight: normal;
--dialog-title-padding-top: 12px;
--dialog-title-padding-bottom: 12px;
--dialog-title-padding-left-right: 20px;
--dialog-title-border-width: 0px;
--dialog-message-content-padding-top: 20px;
--dialog-message-content-padding-bottom: 20px;
--dialog-message-content-padding-left-right: 20px;
--dialog-content-font-size: 12px;
--dialog-content-padding-top: 20px;
--dialog-content-padding-bottom: 20px;
--dialog-content-padding-left-right: 20px;
--dialog-content-margin-bottom-no-footer: 0px;
--dialog-footer-border-width: 0px;
--dialog-footer-padding-top: 12px;
--dialog-footer-padding-bottom: 12px;
--dialog-footer-padding-left-right: 20px;
--dialog-footer-button-spacing: 4px;
--dialog-close-top: 12px;
--dialog-close-right: 12px;
--dialog-close-width: 16px;
--dialog-close-size: 12px;
--dialog-part-padding-right-closeable: 28px + 4px / 2;
--dialog-bg: #FFFFFF;
--dialog-border-color: #DCDEE3;
--dialog-border-style: solid;
--dialog-corner: 3px;
--dialog-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
--dialog-title-color: #333333;
--dialog-title-bg-color: transparent;
--dialog-title-border-color: transparent;
--dialog-content-color: #666666;
--dialog-footer-bg-color: transparent;
--dialog-footer-border-color: transparent;
--dialog-close-color: #999999;
--dialog-close-color-hovered: #333333;
--dialog-close-bg-hovered: transparent;
}