winbox-ui-next/es/form/style/token.less

We Design Vue 2.0: A Vue.js 3 UI Library

@import '../../style/theme/index.less';

@form-size-small-margin-item-bottom: 18px;
@form-size-default-margin-item-bottom: 22px;
@form-size-medium-margin-item-bottom: 22px;

@form-size-small-font-label-size: @font-size-body-3;
@form-size-medium-font-label-size: @font-size-body-3;
@form-size-default-font-label-size: @font-size-body-3;
@form-font-extra-text-size: @font-size-body-1;
@form-font-error-text-size: @font-size-body-1;

@form-margin-label-right: @spacing-7;
@form-margin-extra-bottom: @spacing-2;
@form-margin-extra-top: @spacing-2;
@form-inline-margin-item-right: @spacing-9;
@form-inline-margin-item-bottom: @spacing-4;
@form-vertical-margin-label-bottom: @spacing-4;

@form-color-extra-text: var(~'@{winbox-cssvars-prefix}-color-text-3');

@form-color-text-label: var(~'@{winbox-cssvars-prefix}-color-text-2');

@form-color-bg_warning: var(~'@{winbox-cssvars-prefix}-color-warning-light-1');
@form-color-bg_warning_hover: var(
  ~'@{winbox-cssvars-prefix}-color-warning-light-2'
);
@form-color-bg_warning_focus: var(~'@{winbox-cssvars-prefix}-color-bg-2');
@form-color-border_warning: @color-transparent;
@form-color-border_warning_focus: @color-warning-6;
@form-color-border_warning_hover: @color-transparent;
@form-size-shadow_warning_focus: @shadow-distance-none;
@form-color-shadow_warning_focus: var(
  ~'@{winbox-cssvars-prefix}-color-warning-light-2'
);

@form-color-bg_success: var(~'@{winbox-cssvars-prefix}-color-fill-2');
@form-color-bg_success_hover: var(~'@{winbox-cssvars-prefix}-color-fill-3');
@form-color-bg_success_focus: var(~'@{winbox-cssvars-prefix}-color-bg-2');
@form-color-border_success: @color-transparent;
@form-color-border_success_focus: @color-success-6;
@form-color-border_success_hover: @color-transparent;
@form-size-shadow_success_focus: @shadow-distance-none;
@form-color-shadow_success_focus: var(
  ~'@{winbox-cssvars-prefix}-color-success-light-2'
);

@form-color-bg_error: var(~'@{winbox-cssvars-prefix}-color-danger-light-1');
@form-color-bg_error_hover: var(
  ~'@{winbox-cssvars-prefix}-color-danger-light-2'
);
@form-color-bg_error_focus: var(~'@{winbox-cssvars-prefix}-color-bg-2');
@form-color-border_error: @color-transparent;
@form-color-border_error_focus: @color-danger-6;
@form-color-border_error_hover: @color-transparent;
@form-size-shadow_error_focus: @shadow-distance-none;
@form-color-shadow_error_focus: var(
  ~'@{winbox-cssvars-prefix}-color-danger-light-2'
);

@form-color-bg_validating: var(~'@{winbox-cssvars-prefix}-color-fill-2');
@form-color-bg_validating_hover: var(~'@{winbox-cssvars-prefix}-color-fill-3');
@form-color-bg_validating_focus: var(~'@{winbox-cssvars-prefix}-color-bg-2');
@form-color-border_validating: @color-transparent;
@form-color-border_validating_focus: @color-primary-6;
@form-color-border_validating_hover: @color-transparent;
@form-size-shadow_validating_focus: @shadow-distance-none;
@form-color-shadow_validating_focus: var(
  ~'@{winbox-cssvars-prefix}-color-primary-light-2'
);

@form-color-tip-text_success: @color-success-6;
@form-color-tip-icon-text_success: @color-success-6;
@form-color-tip-text_error: @color-danger-6;
@form-color-tip-icon-text_error: @color-danger-6;
@form-color-tip-text_warning: @color-warning-6;
@form-color-tip-icon-text_warning: @color-warning-6;
@form-color-tip-text_validating: @color-primary-6;
@form-color-tip-icon-text_validating: @color-primary-6;