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

A configurable component library for web built on React.

:root {
--tag-size-l-height: 40px;
--tag-size-m-height: 28px;
--tag-size-s-height: 20px;
--tag-size-l-spacing: 16px;
--tag-size-m-spacing: 12px;
--tag-size-s-spacing: 8px;
--tag-size-l-padding-lr: 16px;
--tag-size-m-padding-lr: 12px;
--tag-size-s-padding-lr: 8px;
--tag-corner-radius: 3px;
--tag-checkable-corner-radius: 3px;
--tag-border-width: 1px;
--tag-shadow: none;
--tag-size-l-text-size: 16px;
--tag-size-m-text-size: 14px;
--tag-size-s-text-size: 12px;
--tag-size-s-content-min-width: 28px;
--tag-size-m-content-min-width: 40px;
--tag-size-l-content-min-width: 48px;
--tag-size-l-icon-font: 12px;
--tag-size-m-icon-font: 8px;
--tag-size-s-icon-font: 8px;
--tag-size-l-tick-icon-size: 16px;
--tag-size-m-tick-icon-size: 12px;
--tag-size-s-tick-icon-size: 8px;
--tag-size-l-tick-icon-bg-size: 36px;
--tag-size-m-tick-icon-bg-size: 28px;
--tag-size-s-tick-icon-bg-size: 20px;
--tag-size-line-height: 16px;
--tag-size-m-margin: 8px;
--tag-size-s-margin: 4px;
--tag-checkable-icon-selected: "\e632";
--tag-closable-normal-icon: "\e626";
--ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
--tag-normal-text-color: #333333;
--tag-fill-text-color: #666666;
--tag-closable-normal-icon-color: #FFFFFF;
--tag-closable-normal-icon-color-hover: #FFFFFF;
--tag-closable-normal-icon-color-disabled: #FFFFFF;
--tag-closable-normal-bg: #C4C6CF;
--tag-closable-normal-bg-hover: #A0A2AD;
--tag-closable-normal-bg-disabled: #E6E7EB;
--tag-closable-bordered-text-color: #666666;
--tag-closable-bordered-border-color: #C4C6CF;
--tag-closable-bordered-bg: transparent;
--tag-closable-bordered-text-color-hover: #333333;
--tag-closable-bordered-border-color-hover: #A0A2AD;
--tag-closable-bordered-bg-hover: transparent;
--tag-closable-bordered-tail-color: #666666;
--tag-closable-bordered-tail-color-hover: #333333;
--tag-closable-bordered-tail-color-disabled: #CCCCCC;
--tag-closable-bordered-border-color-disabled: #E6E7EB;
--tag-closable-bordered-text-color-disabled: #CCCCCC;
--tag-closable-bordered-bg-disabled: transparent;
--tag-fill-tail-color: #666666;
--tag-fill-border-color: #EBECF0;
--tag-fill-border-color-hover: #E2E4E8;
--tag-fill-text-color-disabled: #CCCCCC;
--tag-fill-border-color-disabled: #F7F8FA;
--tag-fill-bg-color-disabled: #F7F8FA;
--tag-fill-tail-color-disabled: #CCCCCC;
--tag-bordered-text-color: #666666;
--tag-bordered-tail-color: #666666;
--tag-secondary-text-color: #5584FF;
--tag-normal-text-color-hover: #5584FF;
--tag-fill-text-color-hover: #333333;
--tag-fill-tail-color-hover: #333333;
--tag-bordered-text-color-hover: #333333;
--tag-bordered-tail-color-hover: #333333;
--tag-bordered-tail-color-disabled: #CCCCCC;
--tag-bordered-text-color-disabled: #CCCCCC;
--tag-bordered-border-color-disabled: #E6E7EB;
--tag-bordered-bg-disabled: #F7F8FA;
--tag-secondary-text-color-hover: #3E71F7;
--tag-bordered-border-color: #C4C6CF;
--tag-secondary-border-color: #5584FF;
--tag-checkable-normal-bg-selected: #5584FF;
--tag-checkable-secondary-bg-selected: #5584FF;
--tag-bordered-border-color-hover: #A0A2AD;
--tag-secondary-border-color-hover: #3E71F7;
--tag-checkable-normal-bg-selected-hover: #3E71F7;
--tag-checkable-secondary-bg-selected-hover: #3E71F7;
--tag-fill-bg-color: #EBECF0;
--tag-primary-background-color: #5584FF;
--tag-bordered-bg: transparent;
--tag-secondary-bg: transparent;
--tag-fill-bg-color-hover: #E2E4E8;
--tag-bordered-bg-hover: transparent;
--tag-secondary-bg-hover: transparent;
--tag-text-color-disabled: #CCCCCC;
--tag-border-color-disabled: #E6E7EB;
--tag-checkable-fill-text-color: #666666;
--tag-checkable-fill-bg-color: #EBECF0;
--tag-checkable-fill-border-color: #EBECF0;
--tag-checkable-fill-text-color-hover: #333333;
--tag-checkable-fill-bg-color-hover: #E2E4E8;
--tag-checkable-fill-border-color-hover: #E2E4E8;
--tag-checkable-fill-tail-color: #666666;
--tag-checkable-fill-tail-color-hover: #333333;
--tag-checkable-fill-tail-color-disabled: #CCCCCC;
--tag-checkable-fill-text-color-disabled: #CCCCCC;
--tag-checkable-fill-border-color-disabled: #F7F8FA;
--tag-checkable-fill-bg-color-disabled: #F7F8FA;
--tag-checkable-normal-text-color: #666666;
--tag-checkable-normal-border-color: #C4C6CF;
--tag-checkable-normal-bg: transparent;
--tag-checkable-normal-text-color-hover: #333333;
--tag-checkable-normal-border-color-hover: #C4C6CF;
--tag-checkable-normal-bg-hover: transparent;
--tag-checkable-normal-text-selected-disabled: #CCCCCC;
--tag-checkable-normal-border-selected-disabled: #E6E7EB;
--tag-checkable-normal-bg-selected-disabled: #F7F8FA;
--tag-checkable-normal-tick-bg-selected-disabled: #E6E7EB;
--tag-checkable-primary-text-color: #FFFFFF;
--tag-checkable-primary-bg-color: #5584FF;
--tag-checkable-primary-border-color: #5584FF;
--tag-checkable-primary-text-color-disabled: #CCCCCC;
--tag-checkable-primary-text-color-hover: #FFFFFF;
--tag-checkable-primary-bg-color-hover: #3E71F7;
--tag-checkable-primary-border-color-hover: #3E71F7;
--tag-checkable-primary-border-color-disabled: #F7F8FA;
--tag-checkable-primary-bg-color-disabled: #F7F8FA;
--tag-checkable-primary-tail-color: #FFFFFF;
--tag-checkable-primary-tail-color-hover: #FFFFFF;
--tag-checkable-secondary-bg-selected-disabled: #E6E7EB;
--tag-checkable-normal-icon-color-selected: #FFFFFF;
--tag-checkable-normal-icon-color-selected-hover: #FFFFFF;
--tag-checkable-normal-icon-color-selected-disabled: #FFFFFF;
--tag-checkable-secondary-icon-color-selected: #FFFFFF;
--tag-checkable-secondary-icon-color-selected-hover: #FFFFFF;
--tag-checkable-secondary-icon-color-selected-disabled: #FFFFFF;
--tag-closable-primary-fill-text-color: #666666;
--tag-closable-primary-fill-border-color: #EBECF0;
--tag-closable-primary-fill-bg-color: #EBECF0;
--tag-closable-primary-fill-text-color-hover: #333333;
--tag-closable-primary-fill-border-color-hover: #E2E4E8;
--tag-closable-primary-fill-bg-color-hover: #E2E4E8;
--tag-closable-primary-fill-text-color-disabled: #CCCCCC;
--tag-closable-primary-fill-border-color-disabled: #F7F8FA;
--tag-closable-primary-fill-bg-color-disabled: #F7F8FA;
--tag-color-preset-blue: #4494F9;
--tag-color-preset-green: #46BC15;
--tag-color-preset-orange: #FF9300;
--tag-color-preset-red: #FF3000;
--tag-color-preset-turquoise: #01C1B2;
--tag-color-preset-yellow: #FCCC12;
}