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

A configurable component library for web built on React.

:root {
--btn-shadow: none;
--btn-shadow-hover: none;
--btn-size-s-height: 20px;
--btn-size-s-padding: 8px;
--btn-size-s-border-width: 1px;
--btn-size-s-font: 12px;
--btn-size-s-icon-size: 12px;
--btn-size-s-icon-margin: 4px;
--btn-size-s-icon-split-size: 12px;
--btn-size-s-corner: 3px;
--btn-size-m-height: 28px;
--btn-size-m-padding: 12px;
--btn-size-m-border-width: 1px;
--btn-size-m-font: 12px;
--btn-size-m-icon-size: 12px;
--btn-size-m-icon-margin: 4px;
--btn-size-m-icon-split-size: 12px;
--btn-size-m-corner: 3px;
--btn-size-l-height: 40px;
--btn-size-l-padding: 16px;
--btn-size-l-border-width: 1px;
--btn-size-l-font: 16px;
--btn-size-l-icon-size: 16px;
--btn-size-l-icon-margin: 4px;
--btn-size-l-icon-split-size: 16px;
--btn-size-l-corner: 3px;
--btn-pure-color-disabled: #CCCCCC;
--btn-pure-bg-disabled: #F7F8FA;
--btn-pure-border-color-disabled: #E6E7EB;
--btn-pure-normal-color-disabled: #CCCCCC;
--btn-pure-normal-bg-disabled: #F7F8FA;
--btn-pure-normal-border-color-disabled: #E6E7EB;
--btn-pure-normal-color: #333333;
--btn-pure-normal-color-hover: #333333;
--btn-pure-normal-color-active: #333333;
--btn-pure-normal-bg: #FFFFFF;
--btn-pure-normal-bg-hover: #F2F3F7;
--btn-pure-normal-bg-active: #F2F3F7;
--btn-pure-normal-border-color: #C4C6CF;
--btn-pure-normal-border-color-hover: #A0A2AD;
--btn-pure-normal-border-color-active: #A0A2AD;
--btn-pure-normal-border-style: solid;
--btn-pure-secondary-color-disabled: #CCCCCC;
--btn-pure-secondary-bg-disabled: #F7F8FA;
--btn-pure-secondary-border-color-disabled: #E6E7EB;
--btn-pure-secondary-color: #5584FF;
--btn-pure-secondary-color-hover: #FFFFFF;
--btn-pure-secondary-color-active: #FFFFFF;
--btn-pure-secondary-bg: #FFFFFF;
--btn-pure-secondary-bg-hover: #3E71F7;
--btn-pure-secondary-bg-active: #3E71F7;
--btn-pure-secondary-border-color: #5584FF;
--btn-pure-secondary-border-color-hover: #3E71F7;
--btn-pure-secondary-border-color-active: #3E71F7;
--btn-pure-secondary-border-style: solid;
--btn-pure-primary-color-disabled: #CCCCCC;
--btn-pure-primary-bg-disabled: #F7F8FA;
--btn-pure-primary-border-color-disabled: #E6E7EB;
--btn-pure-primary-color: #FFFFFF;
--btn-pure-primary-color-hover: #FFFFFF;
--btn-pure-primary-color-active: #FFFFFF;
--btn-pure-primary-bg: #5584FF;
--btn-pure-primary-bg-hover: #3E71F7;
--btn-pure-primary-bg-active: #3E71F7;
--btn-pure-primary-border-color: transparent;
--btn-pure-primary-border-color-hover: transparent;
--btn-pure-primary-border-color-active: transparent;
--btn-pure-primary-border-style: solid;
--btn-ghost-border-style: solid;
--btn-ghost-dark-color: #FFFFFF;
--btn-ghost-dark-border-color: #FFFFFF;
--btn-ghost-dark-color-hover: #FFFFFF;
--btn-ghost-dark-bg: transparent;
--btn-ghost-dark-bg-opacity: 0;
--btn-ghost-dark-bg-normal: rgba(0, 0, 0, 0);
--btn-ghost-dark-bg-hover-rgb: #FFFFFF;
--btn-ghost-dark-bg-hover-opacity: 0.8;
--btn-ghost-dark-bg-hover: rgba(255, 255, 255, 0.8);
--btn-ghost-dark-border-color-hover: #FFFFFF;
--btn-ghost-dark-color-disabled-rgb: #FFFFFF;
--btn-ghost-dark-color-disabled-opacity: 0.4;
--btn-ghost-dark-color-disabled: rgba(255, 255, 255, 0.4);
--btn-ghost-dark-bg-disabled: transparent;
--btn-ghost-dark-border-color-disabled-rgb: #FFFFFF;
--btn-ghost-dark-border-color-disabled-opacity: 0.4;
--btn-ghost-dark-border-color-disabled: rgba(255, 255, 255, 0.4);
--btn-ghost-light-color: #333333;
--btn-ghost-light-border-color: #333333;
--btn-ghost-light-bg: transparent;
--btn-ghost-light-bg-opacity: 0;
--btn-ghost-light-bg-normal: rgba(0, 0, 0, 0);
--btn-ghost-light-color-hover: #999999;
--btn-ghost-light-border-color-hover: #333333;
--btn-ghost-light-bg-hover-rgb: #000000;
--btn-ghost-light-bg-hover-opacity: 0.92;
--btn-ghost-light-bg-hover: rgba(0, 0, 0, 0.92);
--btn-ghost-light-color-disabled-rgb: #000000;
--btn-ghost-light-color-disabled-opacity: 0.1;
--btn-ghost-light-color-disabled: rgba(0, 0, 0, 0.1);
--btn-ghost-light-bg-disabled: transparent;
--btn-ghost-light-border-color-disabled-rgb: #000000;
--btn-ghost-light-border-color-disabled-opacity: 0.1;
--btn-ghost-light-border-color-disabled: rgba(0, 0, 0, 0.1);
--btn-warning-border-style: solid;
--btn-warning-primary-color: #FFFFFF;
--btn-warning-primary-color-hover: #FFFFFF;
--btn-warning-primary-color-active: #FFFFFF;
--btn-warning-primary-border-color: #FF3000;
--btn-warning-primary-border-color-hover: #E72B00;
--btn-warning-primary-border-color-active: #E72B00;
--btn-warning-primary-bg: #FF3000;
--btn-warning-primary-bg-hover: #E72B00;
--btn-warning-primary-bg-active: #E72B00;
--btn-warning-primary-color-disabled: #CCCCCC;
--btn-warning-primary-border-color-disabled: #DCDEE3;
--btn-warning-primary-bg-disabled: #F7F8FA;
--btn-warning-normal-color: #FF3000;
--btn-warning-normal-color-hover: #FFFFFF;
--btn-warning-normal-color-active: #FFFFFF;
--btn-warning-normal-border-color: #FF3000;
--btn-warning-normal-border-color-hover: #E72B00;
--btn-warning-normal-border-color-active: #E72B00;
--btn-warning-normal-bg: #FFFFFF;
--btn-warning-normal-bg-hover: #E72B00;
--btn-warning-normal-bg-active: #E72B00;
--btn-warning-normal-color-disabled: #CCCCCC;
--btn-warning-normal-border-color-disabled: #E6E7EB;
--btn-warning-normal-bg-disabled: #F7F8FA;
--btn-text-primary-color: #5584FF;
--btn-text-primary-color-hover: #3E71F7;
--btn-text-disabled-color: #CCCCCC;
--btn-text-loading-color: #333333;
--btn-text-secondary-color: #666666;
--btn-text-secondary-color-hover: #5584FF;
--btn-text-normal-color: #333333;
--btn-text-normal-color-hover: #5584FF;
--btn-text-size-s-height: 16px;
--btn-text-size-s-font: 12px;
--btn-text-icon-size-s: 16px;
--btn-text-icon-s-margin: 4px;
--btn-text-size-m-height: 20px;
--btn-text-size-m-font: 12px;
--btn-text-icon-size-m: 20px;
--btn-text-icon-m-margin: 4px;
--btn-text-size-l-height: 24px;
--btn-text-size-l-font: 14px;
--btn-text-icon-size-l: 24px;
--btn-text-icon-l-margin: 4px;
}