less-plugin-dls
Version:
Less plugin for Baidu Light DLS.
113 lines (86 loc) • 4.18 kB
text/less
@import "../global.less";
/* Metrics */
@dls-tab-height-s: @dls-height-unit * 10;
@dls-tab-height-m: @dls-height-unit * 11;
@dls-tab-height-l: @dls-height-unit * 12;
// For normal and simple
@dls-tab-padding-x-s: @dls-padding-unit * 4;
@dls-tab-padding-x-m: @dls-padding-unit * 4;
@dls-tab-padding-x-l: @dls-padding-unit * 4;
@dls-tab-spacing-x-s: @dls-padding-unit * 5;
@dls-tab-spacing-x-m: @dls-padding-unit * 6;
@dls-tab-spacing-x-l: @dls-padding-unit * 7;
@dls-tab-dropdown-spacing-x: @dls-padding-unit * 2;
@dls-tab-dropdown-spacing-y: @dls-padding-unit * 2;
@dls-tab-content-spacing: @dls-padding-unit * 1;
@dls-tab-nav-spacing-s: @dls-padding-unit * 2;
@dls-tab-nav-spacing-m: @dls-padding-unit * 3;
@dls-tab-nav-spacing-l: @dls-padding-unit * 4;
@dls-tab-add-spacing-s: @dls-padding-unit * 2;
@dls-tab-add-spacing-m: @dls-padding-unit * 3;
@dls-tab-add-spacing-l: @dls-padding-unit * 4;
/* Typography */
// Sizes
@dls-tab-font-size-s: @dls-font-size-0;
@dls-tab-font-size-m: @dls-font-size-1;
@dls-tab-font-size-l: @dls-font-size-2;
// Colors
@dls-tab-font-color: @dls-foreground-color-neutral;
@dls-tab-font-color-hover: @dls-foreground-color-neutral-hover;
@dls-tab-font-color-focus: @dls-tab-font-color-hover;
@dls-tab-font-color-active: @dls-foreground-color-neutral-active;
@dls-tab-font-color-disabled: @dls-foreground-color-neutral-disabled;
@dls-tab-font-color-current: @dls-foreground-color-primary;
@dls-tab-font-color-current-hover: @dls-foreground-color-primary-hover;
@dls-tab-font-color-current-focus: @dls-tab-font-color-current-hover;
@dls-tab-font-color-current-active: @dls-foreground-color-primary-active;
@dls-tab-background-color-focus: @dls-background-color-focus;
// Weights
@dls-tab-font-weight-current: @dls-font-weight-1;
/* Container */
@dls-tab-container-separator-color: @dls-line-color-2;
@dls-tab-container-border-width: 1px;
/* Panel */
@dls-tab-panel-padding-top: @dls-padding-unit * 4;
/* Misc */
// Overflow shadow
@dls-tab-overflow-shadow-right: @dls-shadow-1;
@dls-tab-overflow-shadow-left: @dls-shadow-1;
// Indicator
@dls-tab-indicator-color: @dls-foreground-color-primary;
@dls-tab-indicator-width: 2px;
// Icon size
@dls-tab-icon-size: @dls-icon-size-normal;
@dls-tab-icon-size-aux: @dls-icon-size-aux;
/* Variants */
// Simple
@dls-tab-separator-height-simple: 1em;
@dls-tab-separator-color: @dls-line-color-2;
// Strong
// TODO: add s/l sizes
@dls-tab-menu-height-strong-m: @dls-padding-unit * 12;
@dls-tab-padding-x-strong-m: @dls-padding-unit * 6;
@dls-tab-spacing-x-strong-m: 0;
@dls-tab-menu-padding-x-strong-m: @dls-padding-unit * 4;
@dls-tab-border-radius-strong-m: @dls-border-radius-3;
@dls-tab-container-border-radius-strong-m: @dls-border-radius-2;
@dls-tab-container-border-color-strong: @dls-line-color-0;
@dls-tab-menu-background-color-strong: @dls-color-gray-2;
@dls-tab-background-color-strong: transparent;
@dls-tab-background-color-strong-hover: @dls-color-gray-1;
@dls-tab-background-color-strong-focus: @dls-background-color-focus;
@dls-tab-background-color-strong-active: @dls-color-gray-3;
@dls-tab-background-color-strong-disabled: @dls-tab-background-color-strong;
@dls-tab-background-color-strong-current: @dls-background-color-base-1;
@dls-tab-background-color-strong-current-hover: @dls-tab-background-color-strong-current;
@dls-tab-background-color-strong-current-focus: @dls-tab-background-color-strong-current-hover;
@dls-tab-background-color-strong-current-active: @dls-tab-background-color-strong-current-hover;
@dls-tab-font-color-strong: @dls-foreground-color-neutral;
@dls-tab-font-color-strong-hover: @dls-foreground-color-neutral-hover;
@dls-tab-font-color-strong-focus: @dls-tab-font-color-strong-hover;
@dls-tab-font-color-strong-active: @dls-foreground-color-neutral-active;
@dls-tab-font-color-strong-disabled: @dls-foreground-color-neutral-disabled;
@dls-tab-font-color-strong-current: @dls-foreground-color-primary;
@dls-tab-font-color-strong-current-hover: @dls-foreground-color-primary-hover;
@dls-tab-font-color-strong-current-focus: @dls-tab-font-color-strong-current-hover;
@dls-tab-font-color-strong-current-active: @dls-foreground-color-primary-active;