@fpxfd/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: #c3cbd5;
--btn-pure-bg-disabled: #f2f4f8;
--btn-pure-border-color-disabled: #eef1f6;
--btn-pure-normal-color-disabled: #c3cbd5;
--btn-pure-normal-bg-disabled: #f2f4f8;
--btn-pure-normal-border-color-disabled: #eef1f6;
--btn-pure-normal-color: #545d75;
--btn-pure-normal-color-hover: #545d75;
--btn-pure-normal-color-active: #545d75;
--btn-pure-normal-bg: #FFFFFF;
--btn-pure-normal-bg-hover: #eef1f6;
--btn-pure-normal-bg-active: #eef1f6;
--btn-pure-normal-border-color: #dee1e4;
--btn-pure-normal-border-color-hover: #c3cbd5;
--btn-pure-normal-border-color-active: #c3cbd5;
--btn-pure-normal-border-style: solid;
--btn-pure-secondary-color-disabled: #c3cbd5;
--btn-pure-secondary-bg-disabled: #f2f4f8;
--btn-pure-secondary-border-color-disabled: #eef1f6;
--btn-pure-secondary-color: #284cc0;
--btn-pure-secondary-color-hover: #FFFFFF;
--btn-pure-secondary-color-active: #FFFFFF;
--btn-pure-secondary-bg: #FFFFFF;
--btn-pure-secondary-bg-hover: #ff6400;
--btn-pure-secondary-bg-active: #ff6400;
--btn-pure-secondary-border-color: #284cc0;
--btn-pure-secondary-border-color-hover: #ff6400;
--btn-pure-secondary-border-color-active: #ff6400;
--btn-pure-secondary-border-style: solid;
--btn-pure-primary-color-disabled: #c3cbd5;
--btn-pure-primary-bg-disabled: #f2f4f8;
--btn-pure-primary-border-color-disabled: #eef1f6;
--btn-pure-primary-color: #FFFFFF;
--btn-pure-primary-color-hover: #FFFFFF;
--btn-pure-primary-color-active: #FFFFFF;
--btn-pure-primary-bg: #284cc0;
--btn-pure-primary-bg-hover: #ff6400;
--btn-pure-primary-bg-active: #ff6400;
--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: #545d75;
--btn-ghost-light-border-color: #545d75;
--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: #a9aeba;
--btn-ghost-light-border-color-hover: #545d75;
--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: #f85359;
--btn-warning-primary-border-color-hover: #f6454b;
--btn-warning-primary-border-color-active: #f6454b;
--btn-warning-primary-bg: #f85359;
--btn-warning-primary-bg-hover: #f6454b;
--btn-warning-primary-bg-active: #f6454b;
--btn-warning-primary-color-disabled: #c3cbd5;
--btn-warning-primary-border-color-disabled: #dadfe8;
--btn-warning-primary-bg-disabled: #f2f4f8;
--btn-warning-normal-color: #f85359;
--btn-warning-normal-color-hover: #FFFFFF;
--btn-warning-normal-color-active: #FFFFFF;
--btn-warning-normal-border-color: #f85359;
--btn-warning-normal-border-color-hover: #f6454b;
--btn-warning-normal-border-color-active: #f6454b;
--btn-warning-normal-bg: #FFFFFF;
--btn-warning-normal-bg-hover: #f6454b;
--btn-warning-normal-bg-active: #f6454b;
--btn-warning-normal-color-disabled: #c3cbd5;
--btn-warning-normal-border-color-disabled: #eef1f6;
--btn-warning-normal-bg-disabled: #f2f4f8;
--btn-text-primary-color: #005adc;
--btn-text-primary-color-hover: #ff6400;
--btn-text-disabled-color: #c3cbd5;
--btn-text-loading-color: #545d75;
--btn-text-secondary-color: #767d91;
--btn-text-secondary-color-hover: #284cc0;
--btn-text-normal-color: #545d75;
--btn-text-normal-color-hover: #284cc0;
--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;
}