geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: lint格式化文件

Browse Source
This commit is contained in:
t-aonan.gu
2025-10-21 18:04:02 +08:00
parent f9ca969fec
commit 7629120548
1092 changed files with 148218 additions and 157907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

484
src/design/ant/btn.less
View File

@ -1,285 +1,285 @@
// button reset
.ant-btn {
&-link:hover,
&-link:focus,
&-link:active {
border-color: transparent !important;
}
&-primary {
color: @white;
background-color: @button-primary-color;
&:hover,
&:focus {
color: @white;
background-color: @button-primary-hover-color;
}
}
&-primary:not(&-background-ghost):not([disabled]) {
color: @white;
}
&-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%) !important;
// background: fade(@button-cancel-bg-color, 40%) !important;
// border-color: fade(@button-cancel-border-color, 40%) !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;
}
// color: @white;
&-success.ant-btn-link:not([disabled='disabled']) {
color: @button-success-color;
&:hover,
&:focus {
color: @button-success-hover-color;
border-color: transparent;
&-link:hover,
&-link:focus,
&-link:active {
border-color: transparent !important;
}
&:active {
color: @button-success-active-color;
}
}
&-primary {
color: @white;
background-color: @button-primary-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, .is-disabled) {
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;
&:hover,
&:focus {
color: @white;
background-color: @button-primary-hover-color;
}
}
&: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 {
color: @button-warn-hover-color;
border-color: transparent;
&-primary:not(&-background-ghost):not([disabled]) {
color: @white;
}
&:active {
color: @button-warn-active-color;
}
}
&-default {
color: @button-cancel-color;
background-color: @button-cancel-bg-color;
border-color: @button-cancel-border-color;
&-warning:not(.ant-btn-link, .is-disabled) {
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;
&: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%) !important;
// background: fade(@button-cancel-bg-color, 40%) !important;
// border-color: fade(@button-cancel-border-color, 40%) !important;
//}
}
&:active {
background-color: @button-warn-active-color;
border-color: @button-warn-active-color;
[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;
}
//&[disabled],
//&[disabled]:hover {
// color: @white;
// background-color: fade(@button-warn-color, 40%);
// border-color: fade(@button-warn-color, 40%);
//}
}
&-error.ant-btn-link:not([disabled='disabled']) {
color: @button-error-color;
&:hover,
&:focus {
color: @button-error-hover-color;
border-color: transparent;
[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;
}
&:active {
color: @button-error-active-color;
}
}
// color: @white;
&-error:not(.ant-btn-link, .is-disabled) {
color: @white;
background-color: @button-error-color;
border-color: @button-error-color;
//border-width: 0;
&-success.ant-btn-link:not([disabled='disabled']) {
color: @button-success-color;
&:hover,
&:focus {
color: @white;
background-color: @button-error-hover-color;
border-color: @button-error-hover-color;
&:hover,
&:focus {
color: @button-success-hover-color;
border-color: transparent;
}
&:active {
color: @button-success-active-color;
}
}
&:active {
background-color: @button-error-active-color;
border-color: @button-error-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;
}
}
//&[disabled],
//&[disabled]:hover {
// color: @white;
// background-color: fade(@button-error-color, 40%);
// border-color: fade(@button-error-color, 40%);
//}
}
&-success:not(.ant-btn-link, .is-disabled) {
color: @white;
background-color: @button-success-color;
border-color: @button-success-color;
//border-width: 0;
&-background-ghost {
border-width: 1px;
background-color: transparent !important;
&:hover,
&:focus {
color: @white;
background-color: @button-success-hover-color;
border-color: @button-success-hover-color;
}
&[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 {
color: @button-ghost-hover-color;
border-color: @button-ghost-hover-color;
&:active {
background-color: @button-success-active-color;
border-color: @button-success-active-color;
}
}
&:active {
color: @button-ghost-active-color;
border-color: @button-ghost-active-color;
&-warning.ant-btn-link:not([disabled='disabled']) {
color: @button-warn-color;
&:hover,
&:focus {
color: @button-warn-hover-color;
border-color: transparent;
}
&:active {
color: @button-warn-active-color;
}
}
&[disabled],
&[disabled]:hover {
color: fade(@white, 40%) !important;
border-color: fade(@white, 40%) !important;
}
}
&-warning:not(.ant-btn-link, .is-disabled) {
color: @white;
background-color: @button-warn-color;
border-color: @button-warn-color;
//border-width: 0;
&-background-ghost&-success:not(.ant-btn-link) {
color: @button-success-color;
background-color: transparent;
border-color: @button-success-color;
border-width: 1px;
&:hover,
&:focus {
color: @white;
background-color: @button-warn-hover-color;
border-color: @button-warn-hover-color;
}
&:hover,
&:focus {
color: @button-success-hover-color !important;
border-color: @button-success-hover-color;
&:active {
background-color: @button-warn-active-color;
border-color: @button-warn-active-color;
}
//&[disabled],
//&[disabled]:hover {
// color: @white;
// background-color: fade(@button-warn-color, 40%);
// border-color: fade(@button-warn-color, 40%);
//}
}
&:active {
color: @button-success-active-color;
border-color: @button-success-active-color;
}
}
&-error.ant-btn-link:not([disabled='disabled']) {
color: @button-error-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 {
color: @button-error-hover-color;
border-color: transparent;
}
&:hover,
&:focus {
color: @button-warn-hover-color !important;
border-color: @button-warn-hover-color;
&:active {
color: @button-error-active-color;
}
}
&:active {
color: @button-warn-active-color;
border-color: @button-warn-active-color;
}
}
&-error:not(.ant-btn-link, .is-disabled) {
color: @white;
background-color: @button-error-color;
border-color: @button-error-color;
//border-width: 0;
&-background-ghost&-error:not(.ant-btn-link) {
color: @button-error-color;
background-color: transparent;
border-color: @button-error-color;
border-width: 1px;
&:hover,
&:focus {
color: @white;
background-color: @button-error-hover-color;
border-color: @button-error-hover-color;
}
&:hover,
&:focus {
color: @button-error-hover-color !important;
border-color: @button-error-hover-color;
&:active {
background-color: @button-error-active-color;
border-color: @button-error-active-color;
}
//&[disabled],
//&[disabled]:hover {
// color: @white;
// background-color: fade(@button-error-color, 40%);
// border-color: fade(@button-error-color, 40%);
//}
}
&:active {
color: @button-error-active-color;
border-color: @button-error-active-color;
}
}
&-background-ghost {
border-width: 1px;
background-color: transparent !important;
&-ghost.ant-btn-link:not([disabled='disabled']) {
color: @button-ghost-color;
&:hover,
&:focus {
color: @button-ghost-hover-color;
border-color: transparent;
&[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 {
color: @button-ghost-hover-color;
border-color: @button-ghost-hover-color;
}
&: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 {
color: @button-success-hover-color !important;
border-color: @button-success-hover-color;
}
&: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 {
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 {
color: @button-error-hover-color !important;
border-color: @button-error-hover-color;
}
&: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 {
color: @button-ghost-hover-color;
border-color: transparent;
}
}
}
}

44
src/design/ant/index.less
View File

@ -4,61 +4,61 @@
@import url('/src/design/ant/table.less');
.ant-image-preview-root {
img {
display: unset;
}
img {
display: unset;
}
}
span.anticon:not(.app-iconify) {
vertical-align: 0.125em !important;
vertical-align: 0.125em !important;
}
.ant-back-top {
right: 20px;
bottom: 20px;
right: 20px;
bottom: 20px;
}
.collapse-container__body {
> .ant-descriptions {
margin-left: 6px;
}
> .ant-descriptions {
margin-left: 6px;
}
}
.ant-image-preview-operations {
background-color: rgb(0 0 0 / 30%);
background-color: rgb(0 0 0 / 30%);
}
.ant-popover {
&-content {
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
&-content {
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
&-buttons button:first-child {
margin-left: 0;
}
&-buttons button:first-child {
margin-left: 0;
}
}
// =================================
// ==============modal message======
// =================================
.modal-icon-warning {
color: @warning-color !important;
color: @warning-color !important;
}
.modal-icon-success {
color: @success-color !important;
color: @success-color !important;
}
.modal-icon-error {
color: @error-color !important;
color: @error-color !important;
}
.modal-icon-info {
color: @primary-color !important;
color: @primary-color !important;
}
.ant-checkbox-checked .ant-checkbox-inner::after,
.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after {
border-top: 0 !important;
border-left: 0 !important;
border-top: 0 !important;
border-left: 0 !important;
}

18
src/design/ant/input.less
View File

@ -2,23 +2,23 @@
// input
.ant-input {
&-number {
min-width: 110px;
}
&-number {
min-width: 110px;
}
}
.ant-input-affix-wrapper .ant-input-suffix {
right: 9px;
right: 9px;
}
.ant-input-clear-icon {
margin-right: 5px;
margin-right: 5px;
}
.ant-input-affix-wrapper-textarea-with-clear-btn {
padding: 0 !important;
padding: 0 !important;
textarea.ant-input {
padding: 4px;
}
textarea.ant-input {
padding: 4px;
}
}

160
src/design/ant/pagination.less
View File

@ -1,99 +1,99 @@
html[data-theme='dark'] {
.ant-pagination {
.ant-pagination-prev,
.ant-pagination-next,
.ant-pagination-item {
background-color: rgb(255 255 255 / 4%) !important;
.ant-pagination {
.ant-pagination-prev,
.ant-pagination-next,
.ant-pagination-item {
background-color: rgb(255 255 255 / 4%) !important;
a {
color: #8b949e !important;
}
a {
color: #8b949e !important;
}
}
.ant-select-arrow {
color: @text-color-secondary !important;
}
.ant-pagination-item-active {
background-color: @primary-color !important;
border: none;
border-radius: none !important;
a {
color: @white !important;
}
}
}
.ant-select-arrow {
color: @text-color-secondary !important;
}
.ant-pagination-item-active {
background-color: @primary-color !important;
border: none;
border-radius: none !important;
a {
color: @white !important;
}
}
}
}
.ant-pagination {
align-items: center;
align-items: center;
.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;
border: 1px solid #d9d9d9 !important;
min-width: 28px !important;
height: 28px !important;
line-height: 26px !important;
a {
color: #606266;
.ant-pagination-prev,
.ant-pagination-next {
font-size: 12px;
color: @text-color-base;
border: 1px solid;
}
&:last-child {
margin-right: 0 !important;
.ant-pagination-prev:hover,
.ant-pagination-next:hover,
.ant-pagination-item:focus,
.ant-pagination-item:hover {
a {
color: @primary-color;
}
}
}
.ant-pagination-item-active {
background-color: @primary-color !important;
border: 1px solid @primary-color !important;
border-radius: none !important;
.ant-pagination-prev,
.ant-pagination-next,
.ant-pagination-item {
margin: 0 4px !important;
border: 1px solid #d9d9d9 !important;
min-width: 28px !important;
height: 28px !important;
line-height: 26px !important;
a {
color: @white !important;
a {
color: #606266;
}
&:last-child {
margin-right: 0 !important;
}
}
}
.ant-pagination-options {
margin-left: 12px;
}
.ant-pagination-item-active {
background-color: @primary-color !important;
border: 1px solid @primary-color !important;
border-radius: none !important;
.ant-select-selector {
border: 1px solid #d9d9d9 !important;
height: 28px !important;
}
a {
color: @white !important;
}
}
.ant-pagination-options-quick-jumper input {
height: 28px !important;
margin: 0 6px;
line-height: 28px;
text-align: center;
}
.ant-pagination-options {
margin-left: 12px;
}
.ant-select-arrow {
color: @border-color-shallow-dark;
}
.ant-select-selector {
border: 1px solid #d9d9d9 !important;
height: 28px !important;
}
&-disabled {
display: none !important;
}
.ant-pagination-options-quick-jumper input {
height: 28px !important;
margin: 0 6px;
line-height: 28px;
text-align: center;
}
.ant-select-arrow {
color: @border-color-shallow-dark;
}
&-disabled {
display: none !important;
}
}

138
src/design/ant/table.less
View File

@ -2,93 +2,93 @@
// 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;
}
.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-body {
overflow-y: auto !important;
}
}
.ant-table-fixed-right {
.ant-table-body-outer {
.ant-table-body-inner {
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;
}
}
}
}
}
}
}
.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;
}
.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-body {
overflow: auto !important;
}
}
.ant-table-fixed-right {
.ant-table-body-outer {
.ant-table-body-inner {
overflow-x: 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;
}
}
}
}
}
}
}
.ant-table-fixed-left {
.ant-table-body-outer {
.ant-table-body-inner {
overflow-x: auto !important;
.ant-table-cell-scrollbar {
display: none;
}
}
}
}
}
.ant-table-cell-scrollbar {
display: none;
}
}
}
}
}
.ant-table {
.ant-table-thead {
tr {
th {
padding: 12px 8px;
}
.ant-table-thead {
tr {
th {
padding: 12px 8px;
}
th::before {
display: none;
}
th::before {
display: none;
}
}
}
}
}

32
src/design/index.less
View File

@ -5,33 +5,33 @@
@import url('/src/design/theme.less');
input:-webkit-autofill {
box-shadow: 0 0 0 1000px white inset !important;
box-shadow: 0 0 0 1000px white inset !important;
}
:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s !important;
transition: background-color 5000s ease-in-out 0s !important;
}
html {
overflow: hidden;
text-size-adjust: 100%;
overflow: hidden;
text-size-adjust: 100%;
}
html,
body {
width: 100%;
height: 100%;
overflow: visible !important;
overflow-x: hidden !important;
width: 100%;
height: 100%;
overflow: visible !important;
overflow-x: hidden !important;
&.color-weak {
filter: invert(80%);
}
&.color-weak {
filter: invert(80%);
}
&.gray-mode {
filter: grayscale(100%);
filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}
&.gray-mode {
filter: grayscale(100%);
filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}
}
a:focus,
@ -40,5 +40,5 @@ button,
div,
svg,
span {
outline: none !important;
outline: none !important;
}

42
src/design/public.less
View File

@ -1,6 +1,6 @@
#app {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
// =================================
@ -8,8 +8,8 @@
// =================================
::-webkit-scrollbar {
width: 7px;
height: 8px;
width: 7px;
height: 8px;
}
// ::-webkit-scrollbar-track {
@ -21,31 +21,31 @@
// }
::-webkit-scrollbar-thumb {
// background: rgba(0, 0, 0, 0.6);
background-color: rgb(144 147 153 / 30%);
// background-color: rgba(144, 147, 153, 0.3);
border-radius: 4px;
// box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
// background: rgba(0, 0, 0, 0.6);
background-color: rgb(144 147 153 / 30%);
// background-color: rgba(144, 147, 153, 0.3);
border-radius: 4px;
// box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
}
::-webkit-scrollbar-thumb:hover {
background-color: @border-color-dark;
background-color: @border-color-dark;
}
// =================================
// ==============nprogress==========
// =================================
#nprogress {
pointer-events: none;
pointer-events: none;
.bar {
position: fixed;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
height: 2px;
background-color: @primary-color;
opacity: 0.75;
}
.bar {
position: fixed;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
height: 2px;
background-color: @primary-color;
opacity: 0.75;
}
}

18
src/design/transition/base.less
View File

@ -1,18 +1,18 @@
.transition-default() {
&-enter-active,
&-leave-active {
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
&-enter-active,
&-leave-active {
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
&-move {
transition: transform 0.4s;
}
&-move {
transition: transform 0.4s;
}
}
.expand-transition {
.transition-default();
.transition-default();
}
.expand-x-transition {
.transition-default();
.transition-default();
}

60
src/design/transition/fade.less
View File

@ -1,39 +1,39 @@
.fade-transition {
&-enter-active,
&-leave-active {
transition: opacity 0.2s ease-in-out;
}
&-enter-active,
&-leave-active {
transition: opacity 0.2s ease-in-out;
}
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-from,
&-leave-to {
opacity: 0;
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
opacity: 0;
}
/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
transition: all 0.3s;
transition: all 0.3s;
}
.fade-slide-enter-from {
opacity: 0;
transform: translateX(-30px);
opacity: 0;
transform: translateX(-30px);
}
.fade-slide-leave-to {
opacity: 0;
transform: translateX(30px);
opacity: 0;
transform: translateX(30px);
}
// ///////////////////////////////////////////////
@ -43,33 +43,33 @@
// Speed: 1x
.fade-bottom-enter-active,
.fade-bottom-leave-active {
transition: opacity 0.25s, transform 0.3s;
transition: opacity 0.25s, transform 0.3s;
}
.fade-bottom-enter-from {
opacity: 0;
transform: translateY(-10%);
opacity: 0;
transform: translateY(-10%);
}
.fade-bottom-leave-to {
opacity: 0;
transform: translateY(10%);
opacity: 0;
transform: translateY(10%);
}
// fade-scale
.fade-scale-leave-active,
.fade-scale-enter-active {
transition: all 0.28s;
transition: all 0.28s;
}
.fade-scale-enter-from {
opacity: 0;
transform: scale(1.2);
opacity: 0;
transform: scale(1.2);
}
.fade-scale-leave-to {
opacity: 0;
transform: scale(0.8);
opacity: 0;
transform: scale(0.8);
}
// ///////////////////////////////////////////////
@ -79,15 +79,15 @@
// Speed: 1x
.fade-top-enter-active,
.fade-top-leave-active {
transition: opacity 0.2s, transform 0.25s;
transition: opacity 0.2s, transform 0.25s;
}
.fade-top-enter-from {
opacity: 0;
transform: translateY(8%);
opacity: 0;
transform: translateY(8%);
}
.fade-top-leave-to {
opacity: 0;
transform: translateY(-8%);
opacity: 0;
transform: translateY(-8%);
}

2
src/design/transition/index.less
View File

@ -6,5 +6,5 @@
@import url('/src/design/transition/zoom.less');
.collapse-transition {
transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out;
transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out;
}

28
src/design/transition/scale.less
View File

@ -1,21 +1,21 @@
.scale-transition {
.transition-default();
.transition-default();
&-enter-from,
&-leave,
&-leave-to {
opacity: 0;
transform: scale(0);
}
&-enter-from,
&-leave,
&-leave-to {
opacity: 0;
transform: scale(0);
}
}
.scale-rotate-transition {
.transition-default();
.transition-default();
&-enter-from,
&-leave,
&-leave-to {
opacity: 0;
transform: scale(0) rotate(-45deg);
}
&-enter-from,
&-leave,
&-leave-to {
opacity: 0;
transform: scale(0) rotate(-45deg);
}
}

88
src/design/transition/scroll.less
View File

@ -1,67 +1,67 @@
.scroll-y-transition {
.transition-default();
.transition-default();
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-from {
transform: translateY(-15px);
}
&-enter-from {
transform: translateY(-15px);
}
&-leave-to {
transform: translateY(15px);
}
&-leave-to {
transform: translateY(15px);
}
}
.scroll-y-reverse-transition {
.transition-default();
.transition-default();
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-from {
transform: translateY(15px);
}
&-enter-from {
transform: translateY(15px);
}
&-leave-to {
transform: translateY(-15px);
}
&-leave-to {
transform: translateY(-15px);
}
}
.scroll-x-transition {
.transition-default();
.transition-default();
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-from {
transform: translateX(-15px);
}
&-enter-from {
transform: translateX(-15px);
}
&-leave-to {
transform: translateX(15px);
}
&-leave-to {
transform: translateX(15px);
}
}
.scroll-x-reverse-transition {
.transition-default();
.transition-default();
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-from {
transform: translateX(15px);
}
&-enter-from {
transform: translateX(15px);
}
&-leave-to {
transform: translateX(-15px);
}
&-leave-to {
transform: translateX(-15px);
}
}

48
src/design/transition/slide.less
View File

@ -1,39 +1,39 @@
.slide-y-transition {
.transition-default();
.transition-default();
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateY(-15px);
}
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateY(-15px);
}
}
.slide-y-reverse-transition {
.transition-default();
.transition-default();
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateY(15px);
}
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateY(15px);
}
}
.slide-x-transition {
.transition-default();
.transition-default();
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateX(-15px);
}
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateX(-15px);
}
}
.slide-x-reverse-transition {
.transition-default();
.transition-default();
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateX(15px);
}
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateX(15px);
}
}

16
src/design/transition/zoom.less
View File

@ -1,27 +1,27 @@
// zoom-out
.zoom-out-enter-active,
.zoom-out-leave-active {
transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
}
.zoom-out-enter-from,
.zoom-out-leave-to {
opacity: 0;
transform: scale(0);
opacity: 0;
transform: scale(0);
}
// zoom-fade
.zoom-fade-enter-active,
.zoom-fade-leave-active {
transition: transform 0.2s, opacity 0.3s ease-out;
transition: transform 0.2s, opacity 0.3s ease-out;
}
.zoom-fade-enter-from {
opacity: 0;
transform: scale(0.92);
opacity: 0;
transform: scale(0.92);
}
.zoom-fade-leave-to {
opacity: 0;
transform: scale(1.06);
opacity: 0;
transform: scale(1.06);
}

6
src/design/var/index.less
View File

@ -33,7 +33,7 @@
@page-footer-z-index: 99;
.bem(@n; @content) {
@{namespace}-@{n} {
@content();
}
@{namespace}-@{n} {
@content();
}
}