mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-27 19:29:04 +08:00
initial commit
This commit is contained in:
陈文彬
195
src/design/ant/btn.less
Normal file
195
src/design/ant/btn.less
Normal file
@@ -0,0 +1,195 @@
|
||||
// button重置
|
||||
.ant-btn {
|
||||
&.ant-btn-success:not(.ant-btn-link),
|
||||
&.ant-btn-error:not(.ant-btn-link),
|
||||
&.ant-btn-warning:not(.ant-btn-link),
|
||||
&.ant-btn-primary:not(.ant-btn-link) {
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08) !important;
|
||||
}
|
||||
|
||||
&-primary {
|
||||
color: @white;
|
||||
background-color: @button-primary-color;
|
||||
border-width: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @white;
|
||||
background-color: @button-primary-hover-color;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[disabled]:hover {
|
||||
color: @white;
|
||||
background-color: fade(@button-primary-color, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
&-default {
|
||||
color: @button-cancel-color;
|
||||
background-color: @button-cancel-bg-color;
|
||||
border-color: @button-cancel-border-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @button-cancel-hover-color;
|
||||
background-color: @button-cancel-hover-bg-color;
|
||||
border-color: @button-cancel-hover-border-color;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[disabled]:hover {
|
||||
color: fade(@button-cancel-color, 40%);
|
||||
background: fade(@button-cancel-bg-color, 40%);
|
||||
border-color: fade(@button-cancel-border-color, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-btn-link.is-disabled {
|
||||
color: rgba(0, 0, 0, 0.25) !important;
|
||||
text-shadow: none;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// color: @white;
|
||||
|
||||
&-success.ant-btn-link:not([disabled='disabled']) {
|
||||
color: @button-success-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @button-success-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-success.ant-btn-link.ant-btn-loading,
|
||||
&-warning.ant-btn-link.ant-btn-loading,
|
||||
&-error.ant-btn-link.ant-btn-loading,
|
||||
&-background-ghost.ant-btn-link.ant-btn-loading,
|
||||
&.ant-btn-link.ant-btn-loading {
|
||||
&::before {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&-success:not(.ant-btn-link) {
|
||||
color: @white;
|
||||
background-color: @button-success-color;
|
||||
border-color: @button-success-color;
|
||||
border-width: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @white;
|
||||
background-color: @button-success-hover-color;
|
||||
border-color: @button-success-hover-color;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[disabled]:hover {
|
||||
color: @white;
|
||||
background-color: fade(@button-success-color, 40%);
|
||||
// background-color: @button-success-disabled-color;
|
||||
border-color: fade(@button-success-color, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
&-warning.ant-btn-link:not([disabled='disabled']) {
|
||||
color: @button-warn-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @button-warn-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning:not(.ant-btn-link) {
|
||||
color: @white;
|
||||
background-color: @button-warn-color;
|
||||
border-color: @button-warn-color;
|
||||
border-width: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @white;
|
||||
background-color: @button-warn-hover-color;
|
||||
border-color: @button-warn-hover-color;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[disabled]:hover {
|
||||
color: @white;
|
||||
background-color: fade(@button-warn-color, 40%);
|
||||
border-color: fade(@button-warn-color, 40%);
|
||||
|
||||
// background-color: @button-warn-disabled-color;
|
||||
// border-color: @button-warn-disabled-color ;
|
||||
}
|
||||
}
|
||||
|
||||
&-error.ant-btn-link:not([disabled='disabled']) {
|
||||
color: @button-error-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @button-error-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-error:not(.ant-btn-link) {
|
||||
color: @white;
|
||||
background-color: @button-error-color;
|
||||
border-color: @button-error-color;
|
||||
border-width: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @white;
|
||||
background-color: @button-error-hover-color;
|
||||
border-color: @button-error-hover-color;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[disabled]:hover {
|
||||
color: @white;
|
||||
background-color: fade(@button-error-color, 40%);
|
||||
border-color: fade(@button-error-color, 40%);
|
||||
|
||||
// background-color: @button-error-disabled-color;
|
||||
// border-color: @button-error-disabled-color ;
|
||||
}
|
||||
}
|
||||
|
||||
&-background-ghost.ant-btn-link,
|
||||
&.ant-btn-dashed:not([disabled='disabled']) {
|
||||
color: @text-color-call-out;
|
||||
|
||||
&:hover {
|
||||
color: @button-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-ghost {
|
||||
color: @button-ghost-color;
|
||||
background-color: @white;
|
||||
border-color: @button-ghost-color;
|
||||
border-width: 1px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @button-ghost-hover-color;
|
||||
background-color: @button-ghost-hover-bg-color;
|
||||
border-color: @button-ghost-hover-color;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[disabled]:hover {
|
||||
color: @button-ghost-color;
|
||||
background: fade(@white, 40%);
|
||||
border-color: fade(@button-ghost-color, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
133
src/design/ant/index.less
Normal file
133
src/design/ant/index.less
Normal file
@@ -0,0 +1,133 @@
|
||||
@import './pagination.less';
|
||||
@import './input.less';
|
||||
@import './btn.less';
|
||||
|
||||
// =================================
|
||||
// ==============descriptions=======
|
||||
// =================================
|
||||
.ant-descriptions-bordered .ant-descriptions-item-label {
|
||||
background-color: @background-color-light;
|
||||
}
|
||||
|
||||
.ant-descriptions .ant-descriptions-item-content {
|
||||
color: @text-color-call-out;
|
||||
}
|
||||
// =================================
|
||||
// ==============modal message======
|
||||
// =================================
|
||||
.modal-icon-warning {
|
||||
color: @warning-color !important;
|
||||
}
|
||||
|
||||
.modal-icon-success {
|
||||
color: @success-color !important;
|
||||
}
|
||||
|
||||
.modal-icon-error {
|
||||
color: @error-color !important;
|
||||
}
|
||||
|
||||
.ant-modal-mask {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
// =================================
|
||||
// ==============menu===============
|
||||
// =================================
|
||||
.ant-menu-item {
|
||||
&-selected {
|
||||
a {
|
||||
color: @primary-color;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// =================================
|
||||
// ==============dropdown===========
|
||||
// =================================
|
||||
.ant-dropdown {
|
||||
.ant-divider {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
&-menu-item {
|
||||
line-height: 30px;
|
||||
color: @text-color-call-out;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
background-color: @border-color-shallow-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
// =================================
|
||||
// ==============back-top===========
|
||||
// =================================
|
||||
.ant-back-top {
|
||||
right: 50px;
|
||||
bottom: 60px;
|
||||
}
|
||||
// =================================
|
||||
// ==============calendar===========
|
||||
// =================================
|
||||
.ant-calendar-picker {
|
||||
width: 100%;
|
||||
}
|
||||
// =================================
|
||||
// ==============tooltip============
|
||||
// =================================
|
||||
|
||||
.ant-tooltip {
|
||||
&-inner {
|
||||
padding: 6px 16px;
|
||||
line-height: 20px;
|
||||
color: @white;
|
||||
background: @text-color-base;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
// =================================
|
||||
// ==============form===============
|
||||
// =================================
|
||||
.ant-form-item.deltag .ant-form-item-required::before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
&-label label::after {
|
||||
margin: 0 6px 0 2px;
|
||||
}
|
||||
|
||||
&-control {
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-explain {
|
||||
margin-bottom: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.compact-form-row {
|
||||
.ant-form-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// =================================
|
||||
// ==============empty==============
|
||||
// =================================
|
||||
.ant-empty-image {
|
||||
max-height: 144px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.ant-empty-description {
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: @text-color-call-out;
|
||||
}
|
||||
24
src/design/ant/input.less
Normal file
24
src/design/ant/input.less
Normal file
@@ -0,0 +1,24 @@
|
||||
@import '../mixins.less';
|
||||
@import '../color.less';
|
||||
|
||||
// input
|
||||
.ant-input {
|
||||
&-number {
|
||||
min-width: 110px;
|
||||
border-color: @border-color-shallow-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
|
||||
border-color: @info-color;
|
||||
}
|
||||
|
||||
.ant-input-disabled,
|
||||
.ant-select-disabled .ant-select-selection,
|
||||
.ant-cascader-picker-label {
|
||||
color: @text-color-base !important;
|
||||
}
|
||||
|
||||
.ant-input-disabled {
|
||||
background-color: @background-color-light;
|
||||
}
|
||||
98
src/design/ant/pagination.less
Normal file
98
src/design/ant/pagination.less
Normal file
@@ -0,0 +1,98 @@
|
||||
body {
|
||||
.ant-pagination {
|
||||
&.mini {
|
||||
height: 20px;
|
||||
font-size: 13px;
|
||||
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
line-height: 17px;
|
||||
color: @border-color-shallow-dark;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.ant-pagination-prev:hover,
|
||||
.ant-pagination-next:hover,
|
||||
.ant-pagination-item:focus,
|
||||
.ant-pagination-item:hover {
|
||||
color: @primary-color;
|
||||
border: 1px solid @primary-color;
|
||||
}
|
||||
|
||||
.ant-pagination-item {
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
margin: 0 3px;
|
||||
line-height: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-item-active {
|
||||
background: @primary-color;
|
||||
|
||||
a {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-options {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.ant-select-sm .ant-select-selection--single {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.ant-pagination-options,
|
||||
.ant-pagination-total-text,
|
||||
.ant-pagination-options-quick-jumper {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.ant-select-selection__rendered {
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.ant-pagination-total-text,
|
||||
.ant-select-selection__rendered,
|
||||
.ant-select-dropdown-menu-item,
|
||||
.ant-pagination-options-quick-jumper {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-pagination-options-quick-jumper input {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
margin: 0 6px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ant-pagination-jump-prev,
|
||||
.ant-pagination-jump-next {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.ant-pagination-options-size-changer.ant-select {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.ant-select-arrow {
|
||||
color: @border-color-shallow-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
81
src/design/ant/selection.less
Normal file
81
src/design/ant/selection.less
Normal file
@@ -0,0 +1,81 @@
|
||||
.ant-radio {
|
||||
&-inner {
|
||||
border-color: @text-color-base;
|
||||
|
||||
&::after {
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-radio-disabled .ant-radio-inner {
|
||||
border-color: @text-color-help-light !important;
|
||||
}
|
||||
|
||||
.ant-checkbox {
|
||||
&-inner {
|
||||
border-color: @text-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-checkbox-disabled .ant-checkbox-inner {
|
||||
border-color: @text-color-help-light !important;
|
||||
}
|
||||
|
||||
// select
|
||||
.ant-select {
|
||||
&-selection {
|
||||
border-color: @border-color-shallow-dark;
|
||||
}
|
||||
|
||||
&-selection__placeholder,
|
||||
&-search__field__placeholder {
|
||||
color: @text-color-help-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-disabled .ant-select-arrow {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ant-select-dropdown {
|
||||
min-width: 84px !important;
|
||||
|
||||
&.ant-select-dropdown--multiple {
|
||||
.ant-select-dropdown-menu-item-selected .ant-select-selected-icon,
|
||||
.ant-select-dropdown-menu-item-selected:hover .ant-select-selected-icon {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu-item {
|
||||
height: 34px;
|
||||
min-width: 84px;
|
||||
line-height: 22px;
|
||||
color: @text-color-call-out;
|
||||
|
||||
&:hover {
|
||||
// color: @--norm-select-item-hover-color;
|
||||
background: @tree-hover-background-color;
|
||||
}
|
||||
|
||||
&-selected,
|
||||
&-selected:hover {
|
||||
color: @primary-color;
|
||||
background: @tree-hover-background-color;
|
||||
}
|
||||
|
||||
&-disabled,
|
||||
&-disabled:hover {
|
||||
color: @disabled-color;
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-disabled .ant-select-selection {
|
||||
background: @tree-hover-font-color;
|
||||
}
|
||||
141
src/design/color.less
Normal file
141
src/design/color.less
Normal file
@@ -0,0 +1,141 @@
|
||||
@white: #fff;
|
||||
@info-color: @primary-color;
|
||||
|
||||
@basic-mask-color: fade(@white, 30%);
|
||||
// :export {
|
||||
// name: "less";
|
||||
// mainColor: @mainColor;
|
||||
// fontSize: @fontSize;
|
||||
// }
|
||||
@iconify-bg-color: #5551;
|
||||
|
||||
// =================================
|
||||
// ==============边框颜色============
|
||||
// =================================
|
||||
|
||||
// 暗色-深
|
||||
@border-color-dark: #b6b7b9;
|
||||
|
||||
// 暗色-浅
|
||||
@border-color-shallow-dark: #cececd;
|
||||
|
||||
// 亮色-深
|
||||
@border-color-light: #ebeef5;
|
||||
|
||||
// 亮色-浅
|
||||
@border-color-shallow-light: #f2f6fc;
|
||||
|
||||
// =================================
|
||||
// ==============message==============
|
||||
// =================================
|
||||
// 成功背景颜色
|
||||
@success-background-color: #f1f9ec;
|
||||
// 一般背景颜色
|
||||
@info-background-color: #e8eff8;
|
||||
// 警告背景颜色
|
||||
@warning-background-color: #fdf6ed;
|
||||
// 危险背景颜色
|
||||
@danger-background-color: #fef0f0;
|
||||
// tag标签：失效
|
||||
@invalid-color: #909399;
|
||||
|
||||
// =================================
|
||||
// ==============bg color============
|
||||
// =================================
|
||||
|
||||
// dark
|
||||
@background-color-dark: #f0f2f5;
|
||||
// light
|
||||
@background-color-light: #f5f7fa;
|
||||
// layout content background
|
||||
@layout-content-bg-color: #f1f1f6;
|
||||
|
||||
// =================================
|
||||
// ==============Header=============
|
||||
// =================================
|
||||
|
||||
@header-dark-bg-color: #394664;
|
||||
@header-dark-bg-hover-color: #273352;
|
||||
@header-light-bg-hover-color: #f6f6f6;
|
||||
@header-light-desc-color: #7c8087;
|
||||
@header-light-bottom-border-color: #eee;
|
||||
// =================================
|
||||
// ==============Menu============
|
||||
// =================================
|
||||
|
||||
// let -menu
|
||||
@first-menu-item-dark-bg-color: #273352;
|
||||
|
||||
// 2级菜单黑暗背景色
|
||||
@sub-menu-item-dark-bg-color: #4f6088;
|
||||
// 3级菜单黑暗背景色
|
||||
@children-menu-item-dark-bg-color: #314268;
|
||||
|
||||
// top-menu
|
||||
@top-menu-active-bg-color: #273352;
|
||||
|
||||
// trigger
|
||||
@trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);
|
||||
@trigger-dark-bg-color: rgba(255, 255, 255, 0.1);
|
||||
@trigger-light-bg-color: @white;
|
||||
@trigger-light-hover-bg-color: rgba(255, 255, 255, 0.7);
|
||||
|
||||
// =================================
|
||||
// ==============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-base: #2c3a61;
|
||||
// 标注色
|
||||
@text-color-call-out: #606266;
|
||||
|
||||
// 辅助说明信息色-深色
|
||||
@text-color-help-dark: #909399;
|
||||
|
||||
// 辅助说明信息色-浅色
|
||||
@text-color-help-light: #c0c4cc;
|
||||
|
||||
// =================================
|
||||
// ==============breadcrumb=========
|
||||
// =================================
|
||||
@breadcrumb-item-normal-color: #6e90a7;
|
||||
// =================================
|
||||
// ==============button=============
|
||||
// =================================
|
||||
|
||||
@button-primary-color: @primary-color;
|
||||
@button-primary-hover-color: darken(@primary-color, 5%);
|
||||
|
||||
@button-ghost-color: @primary-color;
|
||||
@button-ghost-hover-color: lighten(@primary-color, 10%);
|
||||
@button-ghost-hover-bg-color: #e1ebf6;
|
||||
|
||||
@button-success-color: @success-color;
|
||||
@button-success-hover-color: darken(@success-color, 10%);
|
||||
|
||||
@button-warn-color: @warning-color;
|
||||
@button-warn-hover-color: darken(@warning-color, 10%);
|
||||
|
||||
@button-error-color: @error-color;
|
||||
@button-error-hover-color: darken(@error-color, 10%);
|
||||
|
||||
@button-cancel-color: @text-color-call-out;
|
||||
@button-cancel-bg-color: @white;
|
||||
@button-cancel-border-color: @border-color-shallow-dark;
|
||||
// 鼠标悬停
|
||||
@button-cancel-hover-color: @primary-color;
|
||||
@button-cancel-hover-bg-color: @white;
|
||||
@button-cancel-hover-border-color: @primary-color;
|
||||
157
src/design/index.less
Normal file
157
src/design/index.less
Normal file
@@ -0,0 +1,157 @@
|
||||
@import './transition/index.less';
|
||||
@import 'var/index.less';
|
||||
@import 'public.less';
|
||||
@import 'mixins.less';
|
||||
@import 'ant/index.less';
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&.color-weak {
|
||||
filter: invert(80%);
|
||||
}
|
||||
|
||||
&.gray-mode {
|
||||
filter: grayscale(100%);
|
||||
filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
|
||||
}
|
||||
}
|
||||
|
||||
// remove the clear button of a text input control in IE10+
|
||||
input::-ms-clear,
|
||||
input::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Microsoft YaHei,微软雅黑,Arial,sans-serif,Helvetica Neue,Helvetica,Pingfang SC,Hiragino Sans GB';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1.428571429; // 20/14
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
text-align: left; // Fallback for where `start` is not supported
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
text-size-adjust: 100%;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
white-space: normal;
|
||||
line-break: auto;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: top;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
i,
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
button,
|
||||
div:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @link-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
background-color: transparent; // remove the gray background on active links in IE 10.
|
||||
outline: none;
|
||||
transition: color 0.3s;
|
||||
-webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
|
||||
&:hover {
|
||||
color: @link-hover-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @link-active-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: @disabled-color;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
vertical-align: baseline !important;
|
||||
}
|
||||
|
||||
#app,
|
||||
#app > div,
|
||||
.ant-layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout {
|
||||
background: #f1f1f6;
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
3
src/design/main.postcss
Normal file
3
src/design/main.postcss
Normal file
@@ -0,0 +1,3 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
58
src/design/mixins.less
Normal file
58
src/design/mixins.less
Normal file
@@ -0,0 +1,58 @@
|
||||
.setPlaceholder(@prefix,@color:@text-color-help-dark) {
|
||||
// input
|
||||
@{prefix}::-webkit-input-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
@{prefix}::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: @color;
|
||||
}
|
||||
@{prefix}:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
color: @color;
|
||||
}
|
||||
@{prefix}:-ms-input-placeholder {
|
||||
/* Internet Explorer 10-11 */
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
// 文本截断
|
||||
.text-truncate() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 强制不换行 */
|
||||
.word-nowrap() {
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 强制换行 */
|
||||
.break-all() {
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// 禁止选中
|
||||
.unselect() {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 适用于webkit内核和移动端 */
|
||||
.ellipsis-multiple(@num: 1) {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: @num;
|
||||
}
|
||||
23
src/design/public.less
Normal file
23
src/design/public.less
Normal file
@@ -0,0 +1,23 @@
|
||||
/* 滚动槽 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
// TODO 滚动条样式-待修改
|
||||
::-webkit-scrollbar-track {
|
||||
// background: rgba(0, 0, 0, 0.06);
|
||||
// border-radius: 2px;
|
||||
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 滚动条滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: @disabled-color;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: @border-color-dark;
|
||||
}
|
||||
121
src/design/reset.less
Normal file
121
src/design/reset.less
Normal file
@@ -0,0 +1,121 @@
|
||||
@import 'var/link';
|
||||
@import './mixins/reset-text.less';
|
||||
@import 'color/index';
|
||||
.reset() {
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// overflow: hidden;
|
||||
|
||||
&.color-weak {
|
||||
filter: invert(80%);
|
||||
}
|
||||
|
||||
&.gray-mode {
|
||||
filter: grayscale(100%);
|
||||
filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
|
||||
}
|
||||
}
|
||||
|
||||
// remove the clear button of a text input control in IE10+
|
||||
input::-ms-clear,
|
||||
input::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
// 重置文本样式
|
||||
.reset-text();
|
||||
|
||||
// font-size: @--base-font-size;
|
||||
// color: @--norm-text-color;
|
||||
// background-color: @--norm-background-dark-color !important;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: top;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
i,
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
div:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @link-color;
|
||||
text-decoration: @link-decoration;
|
||||
cursor: pointer;
|
||||
background-color: transparent; // remove the gray background on active links in IE 10.
|
||||
outline: none;
|
||||
transition: color 0.3s;
|
||||
-webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
|
||||
&:hover {
|
||||
color: @link-hover-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @link-active-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
text-decoration: @link-hover-decoration;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: @disabled-color;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reset-layout() {
|
||||
.ant-layout {
|
||||
background: #f1f1f6 !important;
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
18
src/design/transition/base.less
Normal file
18
src/design/transition/base.less
Normal file
@@ -0,0 +1,18 @@
|
||||
.transition-default() {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
|
||||
}
|
||||
|
||||
&-move {
|
||||
transition: transform 0.6s;
|
||||
}
|
||||
}
|
||||
|
||||
.expand-transition {
|
||||
.transition-default();
|
||||
}
|
||||
|
||||
.expand-x-transition {
|
||||
.transition-default();
|
||||
}
|
||||
18
src/design/transition/breadcrumb.less
Normal file
18
src/design/transition/breadcrumb.less
Normal file
@@ -0,0 +1,18 @@
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.38s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter-from,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
.breadcrumb-move {
|
||||
transition: all 0.38s;
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
148
src/design/transition/fade.less
Normal file
148
src/design/transition/fade.less
Normal file
@@ -0,0 +1,148 @@
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.28s ease-in-out;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* fade-transform */
|
||||
// .fade-transform-leave-active,
|
||||
// .fade-transform-enter-active {
|
||||
// transition: all 0.5s;
|
||||
// }
|
||||
|
||||
// .fade-transform-enter {
|
||||
// opacity: 0;
|
||||
// transform: translateX(-30px);
|
||||
// }
|
||||
|
||||
// .fade-transform-leave-to {
|
||||
// opacity: 0;
|
||||
// transform: translateX(30px);
|
||||
// }
|
||||
|
||||
// side-fade
|
||||
.slide-fade-enter-active,
|
||||
.slide-fade-leave-active {
|
||||
transition: opacity 0.35s, transform 0.4s;
|
||||
}
|
||||
|
||||
.slide-enter-from,
|
||||
.slide-fade-enter {
|
||||
opacity: 0;
|
||||
transform: translateX(-30%);
|
||||
}
|
||||
|
||||
.slide-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30%);
|
||||
}
|
||||
|
||||
// zoom-out
|
||||
.zoom-out-enter-active,
|
||||
.zoom-out-leave-active {
|
||||
transition: opacity 0.35s ease-in-out, transform 0.45s ease-out;
|
||||
}
|
||||
|
||||
.zoom-out-enter-from,
|
||||
.zoom-out-enter,
|
||||
.zoom-out-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
// zoom-fade
|
||||
.zoom-fade-enter-active,
|
||||
.zoom-fade-leave-active {
|
||||
transition: transform 0.35s, opacity 0.35s ease-out;
|
||||
}
|
||||
|
||||
.zoom-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.zoom-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
// ///////////////////////////////////////////////
|
||||
// Fade Bottom
|
||||
// ///////////////////////////////////////////////
|
||||
|
||||
// Speed: 1x
|
||||
.fade-bottom-enter-active,
|
||||
.fade-bottom-leave-active {
|
||||
transition: opacity 0.3s, transform 0.35s;
|
||||
}
|
||||
|
||||
.fade-bottom-enter-from,
|
||||
.fade-bottom-enter {
|
||||
opacity: 0;
|
||||
transform: translateY(-8%);
|
||||
}
|
||||
|
||||
.fade-bottom-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(8%);
|
||||
}
|
||||
|
||||
// Speed: 2x
|
||||
.fade-bottom-2x-enter-active,
|
||||
.fade-bottom-2x-leave-active {
|
||||
transition: opacity 0.2s, transform 0.25s;
|
||||
}
|
||||
|
||||
.fade-bottom-2x-enter-from,
|
||||
.fade-bottom-2x-enter {
|
||||
opacity: 0;
|
||||
transform: translateY(-4%);
|
||||
}
|
||||
|
||||
.fade-bottom-2x-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(4%);
|
||||
}
|
||||
|
||||
// ///////////////////////////////////////////////
|
||||
// Fade Top
|
||||
// ///////////////////////////////////////////////
|
||||
|
||||
// Speed: 1x
|
||||
.fade-top-enter-active,
|
||||
.fade-top-leave-active {
|
||||
transition: opacity 0.3s, transform 0.35s;
|
||||
}
|
||||
|
||||
.fade-top-enter-from,
|
||||
.fade-top-enter {
|
||||
opacity: 0;
|
||||
transform: translateY(8%);
|
||||
}
|
||||
|
||||
.fade-top-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8%);
|
||||
}
|
||||
|
||||
// Speed: 2x
|
||||
.fade-top-2x-enter-active,
|
||||
.fade-top-2x-leave-active {
|
||||
transition: opacity 0.2s, transform 0.25s;
|
||||
}
|
||||
|
||||
.fade-top-2x-enter-from,
|
||||
.fade-top-2x-enter {
|
||||
opacity: 0;
|
||||
transform: translateY(4%);
|
||||
}
|
||||
|
||||
.fade-top-2x-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4%);
|
||||
}
|
||||
6
src/design/transition/index.less
Normal file
6
src/design/transition/index.less
Normal file
@@ -0,0 +1,6 @@
|
||||
@import './base.less';
|
||||
@import './fade.less';
|
||||
@import './scale.less';
|
||||
@import './slide.less';
|
||||
@import './scroll.less';
|
||||
@import './breadcrumb.less';
|
||||
22
src/design/transition/scale.less
Normal file
22
src/design/transition/scale.less
Normal file
@@ -0,0 +1,22 @@
|
||||
.scale-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-leave,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
.scale-rotate-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter,
|
||||
&-enter-from,
|
||||
&-leave,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
75
src/design/transition/scroll.less
Normal file
75
src/design/transition/scroll.less
Normal file
@@ -0,0 +1,75 @@
|
||||
.scroll-y-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter,
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-enter {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
|
||||
&-leave-to {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-y-reverse-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter,
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-enter {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
&-leave-to {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-x-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter,
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-enter {
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
|
||||
&-leave-to {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-x-reverse-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter,
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-enter {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
|
||||
&-leave-to {
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
}
|
||||
43
src/design/transition/slide.less
Normal file
43
src/design/transition/slide.less
Normal file
@@ -0,0 +1,43 @@
|
||||
.slide-y-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-y-reverse-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-x-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-x-reverse-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(15px);
|
||||
}
|
||||
}
|
||||
34
src/design/var/breakpoint.less
Normal file
34
src/design/var/breakpoint.less
Normal file
@@ -0,0 +1,34 @@
|
||||
// =================================
|
||||
// ==============屏幕断点============
|
||||
// =================================
|
||||
|
||||
// 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: 992px;
|
||||
@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-xxl: 1600px;
|
||||
@screen-xxl-min: @screen-xxl;
|
||||
|
||||
// provide a maximum
|
||||
@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-xxl-min - 1px);
|
||||
18
src/design/var/easing.less
Normal file
18
src/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);
|
||||
21
src/design/var/index.less
Normal file
21
src/design/var/index.less
Normal file
@@ -0,0 +1,21 @@
|
||||
@import '../color.less';
|
||||
@import 'easing';
|
||||
@import 'breakpoint';
|
||||
|
||||
// tabs
|
||||
@multiple-height: 36px;
|
||||
|
||||
// headers
|
||||
@header-height: 42px;
|
||||
|
||||
// logo width
|
||||
@logo-width: 32px;
|
||||
|
||||
//
|
||||
@sider-drag-z-index: 200;
|
||||
@page-loading-z-index: 10000;
|
||||
|
||||
// app menu
|
||||
|
||||
// left-menu
|
||||
@app-menu-item-height: 44px;
|
||||
Reference in New Issue
Block a user