less-plugin-dls/tokens/components/nav.less

Less plugin for Baidu Light DLS.

@import "../global.less";

@dls-nav-item-font-size: @dls-font-size-1;

/* Nav items */
// Metrics
@dls-nav-item-height: @dls-height-unit * 16;
@dls-nav-item-padding: 0;
@dls-nav-item-padding-more: @dls-padding-unit * 2;
@dls-nav-item-spacing: @dls-padding-unit * 8;
@dls-nav-item-content-spacing: @dls-padding-unit * 1;
@dls-nav-item-icon-size-aux: @dls-icon-size-aux;

// Colors
@dls-nav-item-font-color: @dls-foreground-color-neutral-highlightable;
@dls-nav-item-font-color-hover: @dls-foreground-color-neutral-highlightable-hover;
@dls-nav-item-font-color-focus: @dls-nav-item-font-color-hover;
@dls-nav-item-font-color-active: @dls-foreground-color-neutral-highlightable-active;
@dls-nav-item-font-color-disabled: @dls-foreground-color-neutral-highlightable-disabled;

@dls-nav-item-font-color-current: @dls-foreground-color-primary;
@dls-nav-item-font-color-current-hover: @dls-foreground-color-primary-hover;
@dls-nav-item-font-color-current-focus: @dls-nav-item-font-color-current-hover;
@dls-nav-item-font-color-current-active: @dls-foreground-color-primary-active;

// Background-colors
@dls-nav-item-background-color-focus: @dls-background-color-focus;


@dls-nav-item-icon-color-aux: currentColor;
@dls-nav-item-icon-color-aux-disabled: currentColor;
@dls-nav-item-icon-color-aux-current: currentColor;

/* Indicators */
// Metrics
@dls-nav-indicator-stroke-width: 3px;
@dls-nav-indicator-border-radius: @dls-nav-indicator-width / 2;
@dls-nav-indicator-width: @dls-height-unit * 7;
@dls-nav-indicator-width-hover: @dls-height-unit * 3;
@dls-nav-indicator-width-focus: @dls-nav-indicator-width-hover;
@dls-nav-indicator-width-active: @dls-height-unit * 9;

// Colors
@dls-nav-indicator-color: @dls-foreground-color-primary;
@dls-nav-indicator-color-hover: @dls-nav-indicator-color;
@dls-nav-indicator-color-focus: @dls-nav-indicator-color-hover;
@dls-nav-indicator-color-active: @dls-menu-indicator-color;

/* Dropdown card */
@dls-nav-card-background-color: @dls-background-color-base-1;
@dls-nav-card-border-radius: @dls-border-radius-1;
@dls-nav-card-background-color: @dls-background-color-base-1;
@dls-nav-card-padding: @dls-padding-unit * 6;
@dls-nav-card-column-spacing: @dls-padding-unit * 12;
@dls-nav-card-target-spacing: @dls-padding-unit * 1;

@dls-nav-card-title-font-color: @dls-foreground-color-neutral;
@dls-nav-card-title-font-size: @dls-font-size-1;
@dls-nav-card-title-font-weight: @dls-font-weight-2;

// Use Link for items
@dls-nav-card-item-spacing: @dls-padding-unit * 4;
@dls-nav-card-item-font-size: @dls-font-size-1;
@dls-nav-card-item-icon-size: @dls-icon-size-normal;