新增前端vue
This commit is contained in:
326
web-vue/packages/core/design/ant/btn.less
Normal file
326
web-vue/packages/core/design/ant/btn.less
Normal file
@@ -0,0 +1,326 @@
|
||||
// button reset
|
||||
.ant-btn.ant-btn {
|
||||
[data-theme='light'] &-default {
|
||||
color: @button-default-color;
|
||||
background-color: @button-default-bg-color;
|
||||
border-color: @button-default-border-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @button-default-hover-color;
|
||||
background-color: @button-default-hover-bg-color;
|
||||
border-color: @button-default-hover-border-color;
|
||||
}
|
||||
|
||||
//&.active {
|
||||
// background-color: @button-default-hover-bg-color;
|
||||
// border-color: @button-default-hover-border-color;
|
||||
//}
|
||||
}
|
||||
|
||||
&-primary {
|
||||
color: @white;
|
||||
background-color: @button-primary-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @white;
|
||||
background-color: @button-primary-hover-color;
|
||||
}
|
||||
|
||||
&:not(&-background-ghost):not([disabled]) {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: @white;
|
||||
background-color: fade(@primary-color, 70%);
|
||||
}
|
||||
}
|
||||
|
||||
&-link {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus,
|
||||
&:not(:disabled):active {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='light'] &.ant-btn-link.is-disabled {
|
||||
color: rgb(0 0 0 / 25%);
|
||||
text-shadow: none;
|
||||
cursor: not-allowed !important;
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme='dark'] &.ant-btn-link.is-disabled {
|
||||
color: rgb(255 255 255 / 25%) !important;
|
||||
text-shadow: none;
|
||||
cursor: not-allowed !important;
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&-success.ant-btn-link:not([disabled='disabled']) {
|
||||
color: @button-success-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @button-success-hover-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @button-success-active-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):not(.is-disabled) {
|
||||
color: @white;
|
||||
background-color: @button-success-color;
|
||||
border-color: @button-success-color;
|
||||
//border-width: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @white;
|
||||
background-color: @button-success-hover-color;
|
||||
border-color: @button-success-hover-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:not(:disabled):active {
|
||||
background-color: @button-success-active-color;
|
||||
border-color: @button-success-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning.ant-btn-link:not([disabled='disabled']) {
|
||||
color: @button-warn-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @button-warn-hover-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:not(:disabled):active {
|
||||
color: @button-warn-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning:not(.ant-btn-link):not(.is-disabled) {
|
||||
color: @white;
|
||||
background-color: @button-warn-color;
|
||||
border-color: @button-warn-color;
|
||||
//border-width: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @white;
|
||||
background-color: @button-warn-hover-color;
|
||||
border-color: @button-warn-hover-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:not(:disabled):active {
|
||||
background-color: @button-warn-active-color;
|
||||
border-color: @button-warn-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-error.ant-btn-link:not([disabled='disabled']) {
|
||||
color: @button-error-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @button-error-hover-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:not(:disabled):active {
|
||||
color: @button-error-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-error:not(.ant-btn-link):not(.is-disabled) {
|
||||
color: @white;
|
||||
background-color: @button-error-color;
|
||||
border-color: @button-error-color;
|
||||
//border-width: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @white;
|
||||
background-color: @button-error-hover-color;
|
||||
border-color: @button-error-hover-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:not(:disabled):active {
|
||||
background-color: @button-error-active-color;
|
||||
border-color: @button-error-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-background-ghost {
|
||||
border-width: 1px;
|
||||
background-color: transparent !important;
|
||||
|
||||
&[disabled],
|
||||
&[disabled]:hover {
|
||||
color: fade(@white, 40%) !important;
|
||||
background-color: transparent !important;
|
||||
border-color: fade(@white, 40%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-dashed&-background-ghost,
|
||||
&-default&-background-ghost {
|
||||
color: @button-ghost-color;
|
||||
border-color: @button-ghost-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @button-ghost-hover-color;
|
||||
border-color: @button-ghost-hover-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:not(:disabled):active {
|
||||
color: @button-ghost-active-color;
|
||||
border-color: @button-ghost-active-color;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[disabled]:hover {
|
||||
color: fade(@white, 40%) !important;
|
||||
border-color: fade(@white, 40%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-background-ghost&-success:not(.ant-btn-link) {
|
||||
color: @button-success-color;
|
||||
background-color: transparent;
|
||||
border-color: @button-success-color;
|
||||
border-width: 1px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @button-success-hover-color !important;
|
||||
border-color: @button-success-hover-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:not(:disabled):active {
|
||||
color: @button-success-active-color;
|
||||
border-color: @button-success-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-background-ghost&-warning:not(.ant-btn-link) {
|
||||
color: @button-warn-color;
|
||||
background-color: transparent;
|
||||
border-color: @button-warn-color;
|
||||
border-width: 1px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @button-warn-hover-color !important;
|
||||
border-color: @button-warn-hover-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @button-warn-active-color;
|
||||
border-color: @button-warn-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-background-ghost&-error:not(.ant-btn-link) {
|
||||
color: @button-error-color;
|
||||
background-color: transparent;
|
||||
border-color: @button-error-color;
|
||||
border-width: 1px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @button-error-hover-color !important;
|
||||
border-color: @button-error-hover-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:not(:disabled):active {
|
||||
color: @button-error-active-color;
|
||||
border-color: @button-error-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-ghost.ant-btn-link:not([disabled='disabled']) {
|
||||
color: @button-ghost-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: @button-ghost-hover-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.purple {
|
||||
color: #fff !important;
|
||||
border-color: #605ca8 !important;
|
||||
background-color: #605ca8 !important;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus {
|
||||
color: #fff !important;
|
||||
border-color: lighten(#605ca8, 10%) !important;
|
||||
background-color: lighten(#605ca8, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
116
web-vue/packages/core/design/ant/index.less
Normal file
116
web-vue/packages/core/design/ant/index.less
Normal file
@@ -0,0 +1,116 @@
|
||||
@import './pagination.less';
|
||||
@import './input.less';
|
||||
@import './btn.less';
|
||||
// @import './table.less';
|
||||
|
||||
.ant-image-preview-root {
|
||||
img {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// span.anticon:not(.jeesite-icon) {
|
||||
// vertical-align: 0.125em !important;
|
||||
// }
|
||||
|
||||
.ant-back-top {
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.collapse-container__body {
|
||||
> .ant-descriptions {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-image-preview-operations {
|
||||
background-color: rgb(0 0 0 / 30%);
|
||||
}
|
||||
|
||||
.ant-popover {
|
||||
&-content {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal > div[aria-hidden='true'] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// =================================
|
||||
// ========= modal message =========
|
||||
// =================================
|
||||
.modal-icon-warning {
|
||||
color: @warning-color !important;
|
||||
}
|
||||
|
||||
.modal-icon-success {
|
||||
color: @success-color !important;
|
||||
}
|
||||
|
||||
.modal-icon-error {
|
||||
color: @error-color !important;
|
||||
}
|
||||
|
||||
.modal-icon-info {
|
||||
color: @primary-color !important;
|
||||
}
|
||||
|
||||
.modal-posfull-content {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// =================================
|
||||
// ======= common components =======
|
||||
// =================================
|
||||
.ant-checkbox-checked .ant-checkbox-inner::after,
|
||||
.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after {
|
||||
border-top: 0 !important;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
.ant-tree,
|
||||
.ant-select-tree {
|
||||
// &-list-holder {
|
||||
// overflow-x: hidden !important;
|
||||
// }
|
||||
&-list-scrollbar-show {
|
||||
display: block !important;
|
||||
width: 6px !important;
|
||||
}
|
||||
|
||||
&-list-scrollbar-thumb {
|
||||
background: rgb(0 0 0 / 20%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: rgb(255 255 255 / 65%);
|
||||
}
|
||||
|
||||
.ant-tree,
|
||||
.ant-select-tree {
|
||||
&-list-scrollbar-thumb {
|
||||
background: rgb(255 255 255 / 20%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// fix unocss for login.vue
|
||||
@media (max-width: @screen-md) {
|
||||
.md\:hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
34
web-vue/packages/core/design/ant/input.less
Normal file
34
web-vue/packages/core/design/ant/input.less
Normal file
@@ -0,0 +1,34 @@
|
||||
@import (reference) '../var/color.less';
|
||||
|
||||
// input
|
||||
.ant-input {
|
||||
&-number {
|
||||
min-width: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper .ant-input-suffix {
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.ant-input-clear-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper-textarea-with-clear-btn {
|
||||
padding: 0 !important;
|
||||
|
||||
textarea.ant-input {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-group {
|
||||
.ant-btn-icon-only.ant-btn-sm > * {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: initial;
|
||||
}
|
||||
}
|
||||
119
web-vue/packages/core/design/ant/pagination.less
Normal file
119
web-vue/packages/core/design/ant/pagination.less
Normal file
@@ -0,0 +1,119 @@
|
||||
html[data-theme='dark'] {
|
||||
.ant-pagination.ant-pagination {
|
||||
&-mini {
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next,
|
||||
.ant-pagination-item {
|
||||
background-color: rgb(255 255 255 / 4%) !important;
|
||||
|
||||
a {
|
||||
color: #8b949e !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-arrow {
|
||||
color: @text-color-secondary !important;
|
||||
}
|
||||
|
||||
.ant-pagination-item-active {
|
||||
// background-color: @primary-color !important;
|
||||
background: fade(#2a50ed, 85) !important;
|
||||
border: none;
|
||||
border-radius: none !important;
|
||||
|
||||
a {
|
||||
color: @white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-status-error {
|
||||
.ant-select-selector {
|
||||
border-color: #424242 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination.ant-pagination {
|
||||
&-mini {
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
font-size: 12px;
|
||||
color: @text-color-base;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.ant-pagination-prev:hover,
|
||||
.ant-pagination-next:hover,
|
||||
.ant-pagination-item:focus,
|
||||
.ant-pagination-item:hover {
|
||||
a {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next,
|
||||
.ant-pagination-item {
|
||||
margin: 0 4px !important;
|
||||
background-color: #f4f4f5 !important;
|
||||
border: none;
|
||||
border-radius: 4px !important;
|
||||
|
||||
a {
|
||||
margin-top: 1px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-item-active {
|
||||
background-color: @primary-color !important;
|
||||
border: none;
|
||||
border-radius: none !important;
|
||||
|
||||
a {
|
||||
color: @white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-options {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.ant-pagination-options-quick-jumper input {
|
||||
height: 22px;
|
||||
margin: 0 6px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ant-select-arrow {
|
||||
color: @border-color-shallow-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select.ant-select-in-form-item {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ant-select-status-error {
|
||||
.ant-select-selector {
|
||||
border-color: @border-color-base !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-focused.ant-select-status-error {
|
||||
.ant-select-selector {
|
||||
box-shadow: 0 0 0 2px fade(@border-color-base, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
76
web-vue/packages/core/design/ant/table.less
Normal file
76
web-vue/packages/core/design/ant/table.less
Normal file
@@ -0,0 +1,76 @@
|
||||
@prefix-cls: ~'jeesite-basic-table';
|
||||
|
||||
// fix table unnecessary scrollbar
|
||||
.@{prefix-cls} {
|
||||
.hide-scrollbar-y {
|
||||
.ant-spin-nested-loading {
|
||||
.ant-spin-container {
|
||||
.ant-table {
|
||||
.ant-table-content {
|
||||
.ant-table-scroll {
|
||||
.ant-table-hide-scrollbar {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.ant-table-body {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-fixed-right {
|
||||
.ant-table-body-outer {
|
||||
.ant-table-body-inner {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-fixed-left {
|
||||
.ant-table-body-outer {
|
||||
.ant-table-body-inner {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hide-scrollbar-x {
|
||||
.ant-spin-nested-loading {
|
||||
.ant-spin-container {
|
||||
.ant-table {
|
||||
.ant-table-content {
|
||||
.ant-table-scroll {
|
||||
.ant-table-hide-scrollbar {
|
||||
//overflow-x: auto !important;
|
||||
}
|
||||
|
||||
.ant-table-body {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-fixed-right {
|
||||
.ant-table-body-outer {
|
||||
.ant-table-body-inner {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-fixed-left {
|
||||
.ant-table-body-outer {
|
||||
.ant-table-body-inner {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user