新增前端vue
This commit is contained in:
33
web-vue/packages/core/design/var/breakpoint.less
Normal file
33
web-vue/packages/core/design/var/breakpoint.less
Normal file
@@ -0,0 +1,33 @@
|
||||
// =================================
|
||||
// ==============屏幕断点============
|
||||
// =================================
|
||||
|
||||
// Extra small screen / phone
|
||||
@screen-xs: 480px;
|
||||
@screen-xs-min: @screen-xs;
|
||||
|
||||
// Small screen / tablet
|
||||
@screen-sm: 576px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
|
||||
// Medium screen / desktop
|
||||
@screen-md: 768px;
|
||||
@screen-md-min: @screen-md;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@screen-lg: 1024px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
|
||||
// Extra large screen / full hd
|
||||
@screen-xl: 1200px;
|
||||
@screen-xl-min: @screen-xl;
|
||||
|
||||
// Extra extra large screen / large desktop
|
||||
@screen-2xl: 1600px;
|
||||
@screen-2xl-min: @screen-2xl;
|
||||
|
||||
@screen-xs-max: (@screen-sm-min - 1px);
|
||||
@screen-sm-max: (@screen-md-min - 1px);
|
||||
@screen-md-max: (@screen-lg-min - 1px);
|
||||
@screen-lg-max: (@screen-xl-min - 1px);
|
||||
@screen-xl-max: (@screen-2xl-min - 1px);
|
||||
140
web-vue/packages/core/design/var/color.less
Normal file
140
web-vue/packages/core/design/var/color.less
Normal file
@@ -0,0 +1,140 @@
|
||||
html {
|
||||
// header
|
||||
--header-bg-color: #394664;
|
||||
--header-bg-hover-color: #273352;
|
||||
--header-active-menu-bg-color: #273352;
|
||||
// sider
|
||||
--sider-dark-bg-color: #273352;
|
||||
--sider-dark-darken-bg-color: #273352;
|
||||
--sider-dark-lighten-bg-color: #273352;
|
||||
}
|
||||
|
||||
@white: #fff;
|
||||
|
||||
@content-bg: #f0f2f5;
|
||||
@content-bg-striped: #fafafa;
|
||||
|
||||
// :export {
|
||||
// name: "less";
|
||||
// mainColor: @mainColor;
|
||||
// fontSize: @fontSize;
|
||||
// }
|
||||
//@iconify-bg-color: #5551;
|
||||
|
||||
// =================================
|
||||
// ===========border-color==========
|
||||
// =================================
|
||||
|
||||
// Dark-dark
|
||||
@border-color-dark: #b6b7b9;
|
||||
|
||||
// Dark-light
|
||||
@border-color-shallow-dark: #cececd;
|
||||
|
||||
// Light-dark
|
||||
@border-color-light: #ccc;
|
||||
|
||||
// =================================
|
||||
// =============message=============
|
||||
// =================================
|
||||
|
||||
// success-bg-color
|
||||
@success-background-color: #f1f9ec;
|
||||
// info-bg-color
|
||||
@info-background-color: #e8eff8;
|
||||
// warn-bg-color
|
||||
@warning-background-color: #fdf6ed;
|
||||
// danger-bg-color
|
||||
@danger-background-color: #fef0f0;
|
||||
|
||||
// =================================
|
||||
// ==============Header=============
|
||||
// =================================
|
||||
|
||||
@header-dark-bg-color: var(--header-bg-color);
|
||||
@header-dark-bg-hover-color: var(--header-bg-hover-color);
|
||||
@header-light-bg-hover-color: #f6f6f6;
|
||||
@header-light-desc-color: #7c8087;
|
||||
@header-light-bottom-border-color: #eaeaea;
|
||||
// top-menu
|
||||
@top-menu-active-bg-color: var(--header-active-menu-bg-color);
|
||||
|
||||
// =================================
|
||||
// ==============Menu============
|
||||
// =================================
|
||||
|
||||
// let -menu
|
||||
@sider-dark-bg-color: var(--sider-dark-bg-color);
|
||||
@sider-dark-darken-bg-color: var(--sider-dark-darken-bg-color);
|
||||
@sider-dark-lighten-bg-color: var(--sider-dark-lighten-bg-color);
|
||||
|
||||
// trigger
|
||||
@trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);
|
||||
@trigger-dark-bg-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
// =================================
|
||||
// ==============tree===============
|
||||
// =================================
|
||||
// tree item hover background
|
||||
@tree-hover-background-color: #f5f7fa;
|
||||
// tree item hover font color
|
||||
@tree-hover-font-color: #f5f7fa;
|
||||
|
||||
// =================================
|
||||
// ==============link===============
|
||||
// =================================
|
||||
|
||||
@link-hover-color: @primary-color;
|
||||
@link-active-color: darken(@primary-color, 10%);
|
||||
|
||||
// =================================
|
||||
// ===========Text color============
|
||||
// =================================
|
||||
|
||||
// Main text color
|
||||
@text-color-base: @text-color;
|
||||
|
||||
// Label color
|
||||
@text-color-call-out: #606266;
|
||||
|
||||
// Auxiliary information color-dark
|
||||
@text-color-help-dark: #909399;
|
||||
|
||||
// =================================
|
||||
// ============breadcrumb===========
|
||||
// =================================
|
||||
|
||||
@breadcrumb-item-normal-color: #999;
|
||||
|
||||
// =================================
|
||||
// =============button==============
|
||||
// =================================
|
||||
|
||||
@button-default-color: @text-color-base;
|
||||
@button-default-bg-color: #fff;
|
||||
@button-default-border-color: @border-color-light;
|
||||
|
||||
@button-default-hover-color: #333333;
|
||||
@button-default-hover-bg-color: #f1f1f1;
|
||||
@button-default-hover-border-color: #bfbfbf;
|
||||
|
||||
@button-primary-color: @primary-color;
|
||||
@button-primary-hover-color: fade(@primary-color, 90%);
|
||||
@button-primary-active-color: fade(@primary-color, 90%);
|
||||
|
||||
@button-ghost-color: @white;
|
||||
@button-ghost-hover-color: lighten(@white, 10%);
|
||||
@button-ghost-hover-bg-color: #e1ebf6;
|
||||
@button-ghost-active-color: darken(@white, 10%);
|
||||
|
||||
@button-success-color: @success-color;
|
||||
@button-success-hover-color: lighten(@success-color, 10%);
|
||||
@button-success-active-color: darken(@success-color, 10%);
|
||||
|
||||
@button-warn-color: @warning-color;
|
||||
@button-warn-hover-color: lighten(@warning-color, 10%);
|
||||
@button-warn-active-color: darken(@warning-color, 10%);
|
||||
|
||||
@button-error-color: @error-color;
|
||||
@button-error-hover-color: lighten(@error-color, 10%);
|
||||
@button-error-active-color: darken(@error-color, 10%);
|
||||
18
web-vue/packages/core/design/var/easing.less
Normal file
18
web-vue/packages/core/design/var/easing.less
Normal file
@@ -0,0 +1,18 @@
|
||||
// =================================
|
||||
// ==============动画函数-===========
|
||||
// =================================
|
||||
|
||||
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
|
||||
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
|
||||
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
|
||||
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
||||
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
27
web-vue/packages/core/design/var/index.less
Normal file
27
web-vue/packages/core/design/var/index.less
Normal file
@@ -0,0 +1,27 @@
|
||||
@import (reference) 'color.less';
|
||||
@import 'easing';
|
||||
@import 'breakpoint';
|
||||
|
||||
// headers、HEADER_HEIGHT
|
||||
@header-height: 48px;
|
||||
|
||||
// logo width
|
||||
@logo-width: 32px;
|
||||
|
||||
@side-drag-z-index: 200;
|
||||
|
||||
@page-loading-z-index: 10000;
|
||||
|
||||
@lock-page-z-index: 3000;
|
||||
|
||||
@layout-header-fixed-z-index: 500;
|
||||
|
||||
@multiple-tab-fixed-z-index: 505;
|
||||
|
||||
@layout-sider-fixed-z-index: 510;
|
||||
|
||||
@layout-mix-sider-fixed-z-index: 550;
|
||||
|
||||
@preview-comp-z-index: 1000;
|
||||
|
||||
@page-footer-z-index: 99;
|
||||
Reference in New Issue
Block a user