fine-true/lib/style/var.less

A small and beautiful Vue3 version of the UI Library

// Colors
@black: #000;
@white: #fff;
@red: #f00;
@dull-red: #ee0a24;
@blue: #1989fa;
@orange: #e6a23c;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;
@black-blue: #314659;
@gray: #c8c9cc;
@gray-light: #e5e5e5;
@gray-darker: #7d7e80;
@gray-dark: #969799;

//ZIndex

@zindex-base: 1;
@zindex-popup-mask: 10;
@zindex-popup: 11;
@zindex-gloab: 99;
@zindex-message: 100;

// Component Colors
@text-color: #323233;
@text-lignt-color: #454545;
@icon-color: #a2a2a2;
@border-color: #ebedf0;
@active-color: #f2f3f5;
@background-color: #f8f8f8;
@background-color-light: #fafafa;
@disabled-color: #ddd;

// font size
@font-size-mini: 10px;
@font-size-small: 12px;
@font-size-base: 14px;
@font-size-default: 16px;

// Animation

// Padding
@padding-base: 4px;
@fine-button-padding-mini: @padding-base * 2;
@padding-small: @padding-base * 3;
@padding-default: @padding-base * 4;
@padding-large: @padding-base * 6;
@padding-max: @padding-base * 8;

// Margin
@margin-base: 4px;
@margin-mini: @margin-base * 2;
@margin-small: @margin-base * 3;
@margin-default: @margin-base * 4;
@margin-large: @margin-base * 6;
@margin-max: @margin-base * 8;

// Size
@base-text-size: 14px;
@base-margin: 8px;

:root {
  --fine-blue: #4c95fb;
  --fine-red: #ff5869;
  --fine-orange: #fda043;
  --fine-gray: #878b97;
  --fine-green: #3cb371;
  --fine-white: #fff;
  --fine-black: #000;
  --fine-pink: #fc97af;
  --fine-light-grey: #999b9c;
}

:root {
  --fine-text-large-size: 16px;
  --fine-text-default-size: 14px;
  --fine-text-small-size: 13px;
  --fine-text-color: #323233;
  --fine-text-lignt-color: #454545;
  --fine-text-lighter-color: #606266;
  --fine-text-placeholder-color: #c0c4cc;
  --fine-icon-color: #a2a2a2;
  --fine-border-color: #d9d9d9;
  --fine-active-color: #f2f3f5;
  --fine-animation-duration-base: 0.25s;
  --fine-animation-duration-fast: 0.2s;
}

:root {
  --fine-button-padding-size-block-y: 6px;
  --fine-button-padding-size-block-x: 11px;
  --fine-button-size-block-height: 42px;
  --fine-button-size-block-line-height: 28px;
  --fine-button-size-block-font-size: var(--fine-text-large-size);
  --fine-button-size-block-width: 100%;

  --fine-button-padding-size-large-y: 6px;
  --fine-button-padding-size-large-x: 11px;
  --fine-button-size-large-height: 40px;
  --fine-button-size-large-line-height: 26px;
  --fine-button-size-large-font-size: var(--fine-text-large-size);
  --fine-button-size-large-min-width: 40px;

  --fine-button-padding-size-default-y: 4px;
  --fine-button-padding-size-default-x: 8px;
  --fine-button-size-default-height: 32px;
  --fine-button-size-default-line-height: 22px;
  --fine-button-size-default-font-size: var(--fine-text-default-size);
  --fine-button-size-default-min-width: 32px;

  --fine-button-padding-size-small-y: 2px;
  --fine-button-padding-size-small-x: 5px;
  --fine-button-size-small-height: 24px;
  --fine-button-size-small-line-height: 18px;
  --fine-button-size-small-font-size: var(--fine-text-small-size);
  --fine-button-size-small-min-width: 24px;

  --fine-button-type-default-color: var(--fine-text-lignt-color);
  --fine-button-type-default-background-color: var(--fine-white);
  --fine-button-type-default-border-color: var(--fine-border-color);
  --fine-button-type-primary-color: var(--fine-blue);
  --fine-button-type-primary-background-color: var(--fine-blue);
  --fine-button-type-primary-border-color: var(--fine-blue);
  --fine-button-type-success-color: var(--fine-green);
  --fine-button-type-success-background-color: var(--fine-green);
  --fine-button-type-success-border-color: var(--fine-green);
  --fine-button-type-info-color: var(--fine-gray);
  --fine-button-type-info-background-color: var(--fine-gray);
  --fine-button-type-info-border-color: var(--fine-gray);
  --fine-button-type-danger-color: var(--fine-red);
  --fine-button-type-danger-background-color: var(--fine-red);
  --fine-button-type-danger-border-color: var(--fine-red);
  --fine-button-type-warning-color: var(--fine-orange);
  --fine-button-type-warning-background-color: var(--fine-orange);
  --fine-button-type-warning-border-color: var(--fine-orange);
  --fine-button-border-width: 1px;
  --fine-button-border-radius: 2px;
  --fine-button-round-border-radius: 10em;
  --fine-button-plain-background-color: var(--fine-white);
  --fine-button-disabled-opacity: 0.7;
}

//loading
:root {
  --fine-loading-icon-color: @blue;
  --fine-loading-icon-size: @font-size-base;
  --fine-loading-mask-zindex: @zindex-gloab;
}

//Modal

:root {
  --fine-modal-content-zindex: @zindex-popup;
  --fine-modal-position-top: 20vh;
  --fine-modal-head-padding: 10px 20px;
  --fine-modal-title-size: 18px;
  --fine-modal-title-color: var(--fine-text-color);
  --fine-modal-head-icon-size: 18px;
  --fine-modal-head-icon-color: var(--fine-icon-color);
  --fine-modal-head-icon-hover-color: var(--fine-black);
  --fine-modal-head-icon-spacing: 5px;
  --fine-modal-body-padding: 10px 20px;
  --fine-modal-body-size: 14px;
  --fine-modal-body-color: var(--fine-text-lignt-color);
  --fine-modal-footer-padding: 10px 20px;
}

//Drawer
:root {
  --fine-drawer-zindex: @zindex-popup;
  --fine-drawer-head-padding: 15px;
  --fine-drawer-head-line-height: 1.2;
  --fine-drawer-title-size: 18px;
  --fine-drawer-title-color: var(--fine-text-color);
  --fine-drawer-head-icon-size: 18px;
  --fine-drawer-head-icon-color: var(--fine-icon-color);
  --fine-drawer-head-icon-hover-color: var(--fine-black);
  --fine-drawer-body-padding: 15px;
  --fine-drawer-body-size: 14px;
  --fine-drawer-body-line-height: 1.4;
  --fine-drawer-body-color: var(--fine-text-lignt-color);
}

//Message

:root {
  --fine-message-zindex: @zindex-message;
  --fine-message-color: @text-lignt-color;
  --fine-message-default: var(--fine-blue);
  --fine-message-info: var(--fine-gray);
  --fine-message-success: var(--fine-green);
  --fine-message-warning: var(--fine-orange);
  --fine-message-error: var(--fine-red);
}

// Switch

:root {
  --fine-switch-border-color: var(--fine-border-color);
  --fine-switch-backgrond-color: var(--fine-light-grey);
  --fine-switch-transition-duration: var(--fine-animation-duration-base);
  --fine-switch-node-background-color: var(--fine-white);
  --fine-switch-on-background-color: var(--fine-blue);
  --fine-switch-node-zindex: 1;
  --fine-switch-disabled-opacity: 0.4;
  --fine-switch-default-width: 60px;
  --fine-switch-default-height: 32px;
  --fine-switch-default-radius: 30px;
  --fine-switch-node-default-width: 30px;
  --fine-switch-node-default-height: 30px;
  --fine-switch-default-text-size: 14px;
  --fine-switch-large-width: 80px;
  --fine-switch-large-height: 42px;
  --fine-switch-large-radius: 40px;
  --fine-switch-node-large-width: 40px;
  --fine-switch-node-large-height: 40px;
  --fine-switch-large-text-size: 16px;
  --fine-switch-small-width: 48px;
  --fine-switch-small-height: 26px;
  --fine-switch-small-radius: 24px;
  --fine-switch-node-small-width: 24px;
  --fine-switch-node-small-height: 24px;
  --fine-switch-small-text-size: 12px;
}

//tag
:root {
  --fine-tag-default-color: var(--fine-light-grey);
  --fine-tag-default-border-color: var(--fine-border-color);
  --fine-tag-default-background-color: var(--fine-white);
  --fine-tag-blue-color: var(--fine-blue);
  --fine-tag-blue-border-color: var(--fine-blue);
  --fine-tag-blue-background-color: rgba(76, 149, 251, 0.1);
  --fine-tag-red-color: var(--fine-red);
  --fine-tag-red-border-color: var(--fine-red);
  --fine-tag-red-background-color: rgba(255, 88, 105, 0.1);
  --fine-tag-orange-color: var(--fine-orange);
  --fine-tag-orange-border-color: var(--fine-orange);
  --fine-tag-orange-background-color: rgba(253, 160, 67, 0.1);
  --fine-tag-gray-color: var(--fine-gray);
  --fine-tag-gray-border-color: var(--fine-gray);
  --fine-tag-gray-background-color: rgba(135, 139, 151, 0.1);
  --fine-tag-green-color: var(--fine-green);
  --fine-tag-green-border-color: var(--fine-green);
  --fine-tag-green-background-color: rgba(60, 179, 113, 0.1);
  --fine-tag-pink-color: var(--fine-pink);
  --fine-tag-pink-border-color: var(--fine-pink);
  --fine-tag-pink-background-color: rgba(252, 151, 175, 0.1);
}

//Input

:root {
  --fine-input-border: 1px solid var(--fine-border-color);
  --fine-input-on-focus-border-color: var(--fine-blue);
  --fine-input-placeholder-color: var(--fine-text-placeholder-color);
  --fine-input-transition-duration: var(--fine-animation-duration-base);

  --fine-input-large-height: 40px;
  --fine-input-large-width: 100%;
  --fine-input-large-padding: 4px 15px;
  --fine-input-large-size: var(--fine-text-large-size);

  --fine-input-default-height: 32px;
  --fine-input-default-width: 100%;
  --fine-input-default-padding: 2px 10px;
  --fine-input-default-size: var(--fine-text-default-size);

  --fine-input-small-height: 24px;
  --fine-input-small-width: 100%;
  --fine-input-small-padding: 2px 5px;
  --fine-input-small-size: var(--fine-text-small-size);
}

//Textarea

:root {
  --fine-textarea-clear-icon-color: var(--fine-white);
  --fine-textarea-clear-icon-size: 14px;
  --fine-textarea-clear-icon-width: 14px;
  --fine-textarea-clear-icon-height: 14px;
  --fine-textarea-clear-background: var(--fine-icon-color);
  --fine-textarea-border: 1px solid var(--fine-border-color);
  --fine-textarea-on-focus-border-color: var(--fine-blue);
  --fine-textarea-padding: 12px 12px 16px;
  --fine-textarea-border-radius: 3px;
  --fine-textarea-placeholder-color: var(--fine-text-placeholder-color);
  --fine-textarea-color: var(--fine-text-light-color);
  --fine-textarea-line-transition-duration: var(--fine-animation-duration-base);
  --fine-textarea-show-word-limit-size: 12px;
  --fine-textarea-show-word-limit-line-height: 16px;
  --fine-textarea-show-word-limit-color: var(--fine-light-grey);
}

// select

:root {
  --fine-select-background-color: var(--fine-white);
  --fine-select-border: 1px solid var(--fine-border-color);
  --fine-select-on-focus-border-color: var(--fine-blue);
  --fine-select-on-focus-box-shadow: 0 0 0.5px 2px rgba(76, 149, 251, 0.3);
  --fine-select-border-radius: 3px;
  --fine-select-transition-duration: var(--fine-animation-duration-base);
  --fine-select-selection-color: var(--fine-text-color);
  --fine-select-tag-background-color: var(--fine-active-color);
  --fine-select-placeholder-color: var(--fine-text-placeholder-color);
  --fine-select-icon-color: var(--fine-icon-color);
  --fine-select-input-color: var(--fine-text-color);

  --fine-select-size-large-padding-x: 10px;
  --fine-select-size-large-padding-y: 0px;
  --fine-select-size-large-font-size: var(--fine-text-large-size);
  --fine-select-size-large-inner-height: 38px;

  --fine-select-size-default-padding-x: 10px;
  --fine-select-size-default-padding-y: 0px;
  --fine-select-size-default-font-size: var(--fine-text-default-size);
  --fine-select-size-default-inner-height: 30px;

  --fine-select-size-small-padding-x: 6px;
  --fine-select-size-small-padding-y: 0px;
  --fine-select-size-small-font-size: var(--fine-text-small-size);
  --fine-select-size-small-inner-height: 22px;
}

//collapse

//collapse-item

:root {
  --fine-collapse-head-padding: 12px 15px;
  --fine-collapse-head-background-color: #fafafa;
  --fine-collapse-title-size: 14px;
  --fine-collapse-title-color: var(--fine-text-lighter-color);
  --fine-collapse-icon-size: 14px;
  --fine-collapse-icon-color: var(--fine-icon-color);
  --fine-collapse-body-padding: 16px;
}