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

A configurable component library for web built on React.

:root {
--nav-hoz-height: 44px;
--nav-hoz-font-size: 12px;
--nav-hoz-item-margin-tb: 0px;
--nav-hoz-item-margin-lr: 0px;
--nav-hoz-item-padding-lr: 20px;
--nav-hoz-item-corner: 0;
--nav-hoz-item-selected-active-line: 2px;
--nav-hoz-item-hover-active-line: 0px;
--nav-ver-height: 40px;
--nav-ver-font-size: 12px;
--nav-ver-item-margin-tb: 0px;
--nav-ver-item-margin-lr: 0px;
--nav-ver-item-padding-lr: 20px;
--nav-ver-item-corner: 0;
--nav-ver-item-selected-active-line: 2px;
--nav-ver-item-hover-active-line: 0px;
--nav-ver-sub-nav-height: 40px;
--nav-ver-sub-nav-font-size: 12px;
--nav-group-height: 40px;
--nav-group-font-size: 12px;
--nav-icon-self-size: 12px;
--nav-icon-self-margin: 4px;
--nav-icon-only-font-size: 16px;
--nav-primary-bg-color: #333333;
--nav-primary-border-width: 0px;
--nav-primary-border-color: #333333;
--nav-primary-text-color: #FFFFFF;
--nav-primary-text-style: normal;
--nav-primary-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12);
--nav-primary-sub-nav-bg-color: #333333;
--nav-primary-sub-nav-text-color: #FFFFFF;
--nav-primary-sub-nav-text-style: normal;
--nav-primary-group-text-color: #999999;
--nav-primary-group-text-style: normal;
--nav-primary-item-hover-bg-color: #000000;
--nav-primary-item-hover-text-color: #FFFFFF;
--nav-primary-item-hover-text-style: normal;
--nav-primary-item-hover-active-color: #5584FF;
--nav-primary-sub-nav-hover-bg-color: #000000;
--nav-primary-sub-nav-hover-text-color: #FFFFFF;
--nav-primary-item-selected-bg-color: #000000;
--nav-primary-item-selected-text-color: #FFFFFF;
--nav-primary-item-selected-text-style: bold;
--nav-primary-item-childselected-bg-color: transparent;
--nav-primary-item-childselected-text-color: #FFFFFF;
--nav-primary-item-childselected-text-style: bold;
--nav-primary-item-selected-active-color: #5584FF;
--nav-primary-sub-nav-selected-bg-color: #000000;
--nav-primary-sub-nav-selected-text-color: #FFFFFF;
--nav-primary-sub-nav-active-color: #5584FF;
--nav-primary-item-disabled-text-color: #CCCCCC;
--nav-primary-item-opened-bg-color: transparent;
--nav-primary-item-opened-text-color: #FFFFFF;
--nav-secondary-bg-color: #5584FF;
--nav-secondary-border-width: 0px;
--nav-secondary-border-color: #5584FF;
--nav-secondary-text-color: #FFFFFF;
--nav-secondary-text-style: normal;
--nav-secondary-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12);
--nav-secondary-sub-nav-bg-color: #5584FF;
--nav-secondary-sub-nav-text-color: #FFFFFF;
--nav-secondary-sub-nav-text-style: normal;
--nav-secondary-group-text-color: #FFFFFF;
--nav-secondary-group-text-style: normal;
--nav-secondary-item-hover-bg-color: #3E71F7;
--nav-secondary-item-hover-text-color: #FFFFFF;
--nav-secondary-item-hover-text-style: normal;
--nav-secondary-item-hover-active-color: #3E71F7;
--nav-secondary-sub-nav-hover-bg-color: #3E71F7;
--nav-secondary-sub-nav-hover-text-color: #FFFFFF;
--nav-secondary-item-selected-bg-color: #3E71F7;
--nav-secondary-item-selected-text-color: #FFFFFF;
--nav-secondary-item-selected-text-style: bold;
--nav-secondary-item-childselected-bg-color: transparent;
--nav-secondary-item-childselected-text-color: #FFFFFF;
--nav-secondary-item-childselected-text-style: bold;
--nav-secondary-item-selected-active-color: #3E71F7;
--nav-secondary-sub-nav-selected-bg-color: #3E71F7;
--nav-secondary-sub-nav-selected-text-color: #FFFFFF;
--nav-secondary-sub-nav-active-color: #5584FF;
--nav-secondary-item-disabled-text-color: #DEE8FF;
--nav-secondary-item-opened-bg-color: transparent;
--nav-secondary-item-opened-text-color: #FFFFFF;
--nav-normal-bg-color: #FFFFFF;
--nav-normal-border-color: #DCDEE3;
--nav-normal-text-color: #333333;
--nav-normal-text-style: normal;
--nav-normal-border-line: 1px;
--nav-normal-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12);
--nav-normal-sub-nav-bg-color: #FFFFFF;
--nav-normal-sub-nav-text-color: #333333;
--nav-normal-sub-nav-text-style: normal;
--nav-normal-group-text-color: #999999;
--nav-normal-group-text-style: normal;
--nav-normal-item-hover-bg-color: #FFFFFF;
--nav-normal-item-hover-text-color: #5584FF;
--nav-normal-item-hover-text-style: normal;
--nav-normal-item-hover-active-color: #5584FF;
--nav-normal-sub-nav-hover-bg-color: #F2F3F7;
--nav-normal-sub-nav-hover-text-color: #5584FF;
--nav-normal-item-selected-bg-color: #F2F3F7;
--nav-normal-item-selected-text-color: #5584FF;
--nav-normal-item-selected-text-style: bold;
--nav-normal-item-childselected-bg-color: transparent;
--nav-normal-item-childselected-text-color: #5584FF;
--nav-normal-item-childselected-text-style: normal;
--nav-normal-item-selected-active-color: #5584FF;
--nav-normal-sub-nav-selected-bg-color: #F2F3F7;
--nav-normal-sub-nav-selected-text-color: #5584FF;
--nav-normal-sub-nav-active-color: #5584FF;
--nav-normal-item-disabled-text-color: #999999;
--nav-normal-item-opened-bg-color: transparent;
--nav-normal-item-opened-text-color: #5584FF;
--nav-line-bg-color: transparent;
--nav-line-border-color: #DCDEE3;
--nav-line-text-color: #333333;
--nav-line-text-style: normal;
--nav-line-border-line: 1px;
--nav-line-sub-nav-bg-color: transparent;
--nav-line-sub-nav-text-color: #333333;
--nav-line-sub-nav-text-style: normal;
--nav-line-item-hover-bg-color: transparent;
--nav-line-item-hover-text-color: #5584FF;
--nav-line-item-hover-text-style: normal;
--nav-line-item-hover-active-color: #5584FF;
--nav-line-sub-nav-hover-bg-color: transparent;
--nav-line-sub-nav-hover-text-color: #5584FF;
--nav-line-item-selected-bg-color: transparent;
--nav-line-item-selected-text-color: #5584FF;
--nav-line-item-selected-text-style: bold;
--nav-line-item-childselected-bg-color: transparent;
--nav-line-item-childselected-text-color: #5584FF;
--nav-line-item-childselected-text-style: normal;
--nav-line-item-selected-active-color: #5584FF;
--nav-line-sub-nav-selected-bg-color: transparent;
--nav-line-sub-nav-selected-text-color: #5584FF;
--nav-line-sub-nav-active-color: #5584FF;
--nav-line-item-disabled-text-color: #999999;
--nav-line-item-opened-bg-color: transparent;
--nav-line-item-opened-text-color: #5584FF;
--nav-line-group-text-color: #999999;
--nav-line-group-text-style: normal;
}