less-plugin-dls/test/specs/button/button.css

Less plugin for Baidu Light DLS.

div {
  -dls-button-font-size-xs: 12px;
  -dls-button-font-size-s: 12px;
  -dls-button-font-size-m: 14px;
  -dls-button-font-size-l: 16px;
  -dls-button-font-size-xl: 16px;
  -dls-button-height-xs: 24px;
  -dls-button-height-s: 28px;
  -dls-button-height-m: 32px;
  -dls-button-height-l: 36px;
  -dls-button-height-xl: 40px;
  -dls-button-padding-xs: 8px;
  -dls-button-padding-s: 12px;
  -dls-button-padding-m: 16px;
  -dls-button-padding-l: 20px;
  -dls-button-padding-xl: 20px;
  -dls-button-border-radius-xs: 4px;
  -dls-button-border-radius-s: 4px;
  -dls-button-border-radius-m: 4px;
  -dls-button-border-radius-l: 4px;
  -dls-button-border-radius-xl: 4px;
  -dls-button-content-spacing: 4px;
  -dls-button-font-color-normal: rgba(13, 15, 18, 0.95);
  -dls-button-font-color-normal-disabled: rgba(83, 98, 128, 0.5);
  -dls-button-border-color-normal: transparent;
  -dls-button-border-color-normal-hover: transparent;
  -dls-button-border-color-normal-active: transparent;
  -dls-button-border-color-normal-disabled: transparent;
  -dls-button-background-color-normal: #ebedf5;
  -dls-button-background-color-normal-hover: #e2e6f0;
  -dls-button-background-color-normal-focus: #e2e6f0;
  -dls-button-background-color-normal-active: #d3d9e6;
  -dls-button-background-color-normal-disabled: #f6f7fa;
  -dls-button-font-color-basic: rgba(13, 15, 18, 0.95);
  -dls-button-font-color-basic-disabled: rgba(83, 98, 128, 0.5);
  -dls-button-border-color-basic: #e2e6f0;
  -dls-button-border-color-basic-hover: #d3d9e6;
  -dls-button-border-color-basic-active: #d3d9e6;
  -dls-button-border-color-basic-disabled: #e2e6f0;
  -dls-button-background-color-basic: #fff;
  -dls-button-background-color-basic-hover: #f6f7fa;
  -dls-button-background-color-basic-focus: #f6f7fa;
  -dls-button-background-color-basic-active: #e2e6f0;
  -dls-button-background-color-basic-disabled: #f6f7fa;
  -dls-button-font-color-strong: #0054e6;
  -dls-button-font-color-strong-disabled: #95bcff;
  -dls-button-border-color-strong: #0054e6;
  -dls-button-border-color-strong-hover: #0054e6;
  -dls-button-border-color-strong-active: #0054e6;
  -dls-button-border-color-strong-disabled: #bfd7ff;
  -dls-button-background-color-strong: #fff;
  -dls-button-background-color-strong-hover: #ebf2ff;
  -dls-button-background-color-strong-focus: #ebf2ff;
  -dls-button-background-color-strong-active: #dce9ff;
  -dls-button-background-color-strong-disabled: #ebf2ff;
  -dls-button-font-color-primary: #fff;
  -dls-button-font-color-primary-disabled: #fff;
  -dls-button-border-color-primary: transparent;
  -dls-button-border-color-primary-hover: transparent;
  -dls-button-border-color-primary-active: transparent;
  -dls-button-border-color-primary-disabled: transparent;
  -dls-button-background-color-primary: #0054e6;
  -dls-button-background-color-primary-hover: #1a6eff;
  -dls-button-background-color-primary-focus: #1a6eff;
  -dls-button-background-color-primary-active: #0047c4;
  -dls-button-background-color-primary-disabled: #dce9ff;
  -dls-button-font-color-translucent: #fff;
  -dls-button-font-color-translucent-disabled: rgba(255, 255, 255, 0.6);
  -dls-button-border-color-translucent: transparent;
  -dls-button-border-color-translucent-hover: transparent;
  -dls-button-border-color-translucent-active: transparent;
  -dls-button-border-color-translucent-disabled: transparent;
  -dls-button-background-color-translucent: rgba(0, 0, 0, 0.6);
  -dls-button-background-color-translucent-hover: rgba(0, 0, 0, 0.5);
  -dls-button-background-color-translucent-focus: rgba(0, 0, 0, 0.5);
  -dls-button-background-color-translucent-active: rgba(0, 0, 0, 0.7);
  -dls-button-background-color-translucent-disabled: rgba(0, 0, 0, 0.2);
  -dls-button-font-color-text: rgba(13, 15, 18, 0.95);
  -dls-button-font-color-text-hover: rgba(45, 52, 64, 0.8);
  -dls-button-font-color-text-focus: rgba(13, 15, 18, 0.95);
  -dls-button-font-color-text-active: #000;
  -dls-button-font-color-text-disabled: rgba(83, 98, 128, 0.5);
  -dls-button-font-color-text-strong: #0054e6;
  -dls-button-font-color-text-strong-hover: #1a6eff;
  -dls-button-font-color-text-strong-focus: #0054e6;
  -dls-button-font-color-text-strong-active: #0047c4;
  -dls-button-font-color-text-strong-disabled: #95bcff;
  -dls-button-font-color-text-aux: rgba(80, 90, 107, 0.8);
  -dls-button-font-color-text-aux-hover: rgba(45, 52, 64, 0.8);
  -dls-button-font-color-text-aux-focus: rgba(80, 90, 107, 0.8);
  -dls-button-font-color-text-aux-active: rgba(13, 15, 18, 0.95);
  -dls-button-font-color-text-aux-disabled: rgba(60, 83, 133, 0.3);
  -dls-button-font-color-text-subtle: rgba(60, 83, 133, 0.3);
  -dls-button-font-color-text-subtle-hover: rgba(83, 98, 128, 0.5);
  -dls-button-font-color-text-subtle-focus: rgba(60, 83, 133, 0.3);
  -dls-button-font-color-text-subtle-active: rgba(80, 90, 107, 0.8);
  -dls-button-font-color-text-subtle-disabled: rgba(54, 82, 153, 0.15);
  -dls-button-background-color-text: transparent;
  -dls-button-background-color-text-hover: transparent;
  -dls-button-background-color-text-focus: transparent;
  -dls-button-background-color-text-active: transparent;
  -dls-button-background-color-text-disabled: transparent;
  -dls-button-padding-text: 2px;
  -dls-button-font-color-ghost: rgba(13, 15, 18, 0.95);
  -dls-button-font-color-ghost-disabled: rgba(83, 98, 128, 0.5);
  -dls-button-border-color-ghost: transparent;
  -dls-button-border-color-ghost-disabled: transparent;
  -dls-button-background-color-ghost: transparent;
  -dls-button-background-color-ghost-hover: #f6f7fa;
  -dls-button-background-color-ghost-focus: #f6f7fa;
  -dls-button-background-color-ghost-active: #e2e6f0;
  -dls-button-background-color-ghost-disabled: transparent;
  -dls-button-font-color-ghost-strong: #0054e6;
  -dls-button-font-color-ghost-strong-disabled: #95bcff;
  -dls-button-border-color-ghost-strong: transparent;
  -dls-button-border-color-ghost-strong-disabled: transparent;
  -dls-button-background-color-ghost-strong: transparent;
  -dls-button-background-color-ghost-strong-hover: #ebf2ff;
  -dls-button-background-color-ghost-strong-focus: #ebf2ff;
  -dls-button-background-color-ghost-strong-active: #dce9ff;
  -dls-button-background-color-ghost-strong-disabled: transparent;
  -dls-button-font-color-ghost-aux: rgba(80, 90, 107, 0.8);
  -dls-button-font-color-ghost-aux-disabled: rgba(60, 83, 133, 0.3);
  -dls-button-border-color-ghost-aux: transparent;
  -dls-button-border-color-ghost-aux-disabled: transparent;
  -dls-button-background-color-ghost-aux: transparent;
  -dls-button-background-color-ghost-aux-hover: #f6f7fa;
  -dls-button-background-color-ghost-aux-focus: #f6f7fa;
  -dls-button-background-color-ghost-aux-active: #e2e6f0;
  -dls-button-background-color-ghost-aux-disabled: transparent;
  -dls-button-font-color-ghost-reverse: #fff;
  -dls-button-font-color-ghost-reverse-disabled: rgba(255, 255, 255, 0.5);
  -dls-button-border-color-ghost-reverse: transparent;
  -dls-button-border-color-ghost-reverse-disabled: transparent;
  -dls-button-background-color-ghost-reverse: transparent;
  -dls-button-background-color-ghost-reverse-hover: rgba(255, 255, 255, 0.15);
  -dls-button-background-color-ghost-reverse-focus: rgba(255, 255, 255, 0.15);
  -dls-button-background-color-ghost-reverse-active: rgba(255, 255, 255, 0.25);
  -dls-button-background-color-ghost-reverse-disabled: transparent;
  -dls-button-background-color-checked: #ebf2ff;
  -dls-button-background-color-checked-hover: #dce9ff;
  -dls-button-background-color-checked-focus: #dce9ff;
  -dls-button-background-color-checked-active: #bfd7ff;
  -dls-button-background-color-checked-disabled: #ebf2ff;
  -dls-button-border-color-checked: #0054e6;
  -dls-button-border-color-checked-disabled: #bfd7ff;
  -dls-button-foreground-color-checked: #0054e6;
  -dls-button-border-color-focus: #0054e6;
  -dls-button-shadow-focus: 0 0 0 2px rgba(26, 110, 255, 0.2);
  -dls-button-group-separator-opacity: 0.15;
  -dls-button-font-color-selected: #0054e6;
  -dls-button-font-color-selected-disabled: #95bcff;
  -dls-button-border-color-selected: #0054e6;
  -dls-button-border-color-selected-disabled: #bfd7ff;
  -dls-button-background-color-selected: #ebf2ff;
  -dls-button-background-color-selected-hover: #dce9ff;
  -dls-button-background-color-selected-focus: #dce9ff;
  -dls-button-background-color-selected-active: #bfd7ff;
  -dls-button-background-color-selected-disabled: #ebf2ff;
  -dls-button-min-width-stable-s: calc(24px + 4em);
  -dls-button-min-width-stable-m: calc(32px + 4em);
}