mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-18 10:59:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(transition): use sass map refactor & rename some transition (#2879)

Browse Source
This commit is contained in:
云游君 2021-08-09 08:51:57 +08:00 committed by GitHub
parent 08c41150ab
commit 25995df924
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 61 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/theme-chalk/src/breadcrumb.scss
View File

@ -28,7 +28,7 @@
& a {
font-weight: bold;
text-decoration: none;
transition: var(--el-color-transition-base);
transition: var(--el-transition-color);
color: var(--el-text-color-primary);
&:hover {

2
packages/theme-chalk/src/check-tag.scss
View File

@ -12,7 +12,7 @@
font-size: var(--el-font-size-base);
line-height: var(--el-font-size-base);
padding: 7px 15px;
transition: var(--el-all-transition);
transition: var(--el-transition-all);
font-weight: bold;
&:hover {
background-color: rgb(220, 223, 230);

2
packages/theme-chalk/src/checkbox-button.scss
View File

@ -37,7 +37,7 @@
outline: none;
margin: 0;
position: relative;
transition: var(--el-all-transition);
transition: var(--el-transition-all);
@include utils-user-select(none);
@include button-size(

10
packages/theme-chalk/src/common/transition.scss
View File

@ -3,7 +3,7 @@
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
transition: var(--el-fade-linear-transition);
transition: var(--el-transition-fade-linear);
}
.fade-in-linear-enter-from,
@ -13,7 +13,7 @@
.#{$namespace}-fade-in-linear-enter-active,
.#{$namespace}-fade-in-linear-leave-active {
transition: var(--el-fade-linear-transition);
transition: var(--el-transition-fade-linear);
}
.#{$namespace}-fade-in-linear-enter-from,
.#{$namespace}-fade-in-linear-leave-to {
@ -43,7 +43,7 @@
.#{$namespace}-zoom-in-top-leave-active {
opacity: 1;
transform: scaleY(1);
transition: var(--el-md-fade-transition);
transition: var(--el-transition-md-fade);
transform-origin: center top;
&[data-popper-placement^='top'] {
@ -60,7 +60,7 @@
.#{$namespace}-zoom-in-bottom-leave-active {
opacity: 1;
transform: scaleY(1);
transition: var(--el-md-fade-transition);
transition: var(--el-transition-md-fade);
transform-origin: center bottom;
}
.#{$namespace}-zoom-in-bottom-enter-from,
@ -73,7 +73,7 @@
.#{$namespace}-zoom-in-left-leave-active {
opacity: 1;
transform: scale(1, 1);
transition: var(--el-md-fade-transition);
transition: var(--el-transition-md-fade);
transform-origin: top left;
}
.#{$namespace}-zoom-in-left-enter-from,

41
packages/theme-chalk/src/common/var.scss
View File

@ -1128,6 +1128,47 @@ $--result: map.merge(
$--result
);
// transition
$--transition: () !default;
$--transition: map.merge(
(
'all': all var(--el-transition-duration)
var(--el-transition-function-ease-in-out-bezier),
'fade': opacity var(--el-transition-duration)
var(--el-transition-function-fast-bezier),
'md-fade': (
transform var(--el-transition-duration)
var(--el-transition-function-fast-bezier),
opacity var(--el-transition-duration)
var(--el-transition-function-fast-bezier),
),
'fade-linear': opacity var(--el-transition-duration-fast) linear,
'border': border-color var(--el-transition-duration-fast)
var(--el-transition-function-ease-in-out-bezier),
'color': color var(--el-transition-duration-fast)
var(--el-transition-function-ease-in-out-bezier),
),
$--transition
);
$--transition-duration: () !default;
$--transition-duration: map.merge(
(
'default': 0.3s,
'fast': 0.2s,
),
$--transition-duration
);
$--transition-function: () !default;
$--transition-function: map.merge(
(
'ease-in-out-bezier': cubic-bezier(0.645, 0.045, 0.355, 1),
'fast-bezier': cubic-bezier(0.23, 1, 0.32, 1),
),
$--transition-function
);
// header
$--header: () !default;
$--header: map.merge(

6
packages/theme-chalk/src/input.scss
View File

@ -34,7 +34,7 @@
--el-input-border-radius,
map.get($--input, 'border-radius')
);
transition: var(--el-border-transition-base);
transition: var(--el-transition-border);
&::placeholder {
color: var(
@ -107,7 +107,7 @@
color: var(--el-input-icon-color);
font-size: map.get($--input-font-size, 'default');
cursor: pointer;
transition: var(--el-color-transition-base);
transition: var(--el-transition-color);
&:hover {
color: var(--el-input-clear-hover-color);
@ -149,7 +149,7 @@
line-height: map.get($--input-height, 'default');
outline: none;
padding: 0 15px;
transition: var(--el-border-transition-base);
transition: var(--el-transition-border);
width: 100%;
&::placeholder {

2
packages/theme-chalk/src/radio-button.scss
View File

@ -41,7 +41,7 @@
margin: 0;
position: relative;
cursor: pointer;
transition: var(--el-all-transition);
transition: var(--el-transition-all);
@include button-size(
map.get($--button-padding-vertical, 'default'),

2
packages/theme-chalk/src/select-v2.scss
View File

@ -215,7 +215,7 @@ $--input-inline-start: 7px !default;
transform: rotateZ(180deg);
border-radius: var(--el-border-radius-circle);
color: var(--el-select-input-color);
transition: var(--el-color-transition-base);
transition: var(--el-transition-color);
&:hover {
color: (--el-select-close-hover-color);

2
packages/theme-chalk/src/select.scss
View File

@ -81,7 +81,7 @@
transform: rotateZ(180deg);
border-radius: var(--el-border-radius-circle);
color: var(--el-select-input-color);
transition: var(--el-color-transition-base);
transition: var(--el-transition-color);
&:hover {
color: var(--el-select-close-hover-color);

2
packages/theme-chalk/src/slider.scss
View File

@ -213,7 +213,7 @@
border: var(--el-input-border, map.get($--input, 'border'));
line-height: 20px;
box-sizing: border-box;
transition: var(--el-border-transition-base);
transition: var(--el-transition-border);
}
.#{$namespace}-input-number__decrease {
width: 18px;

2
packages/theme-chalk/src/upload.scss
View File

@ -548,7 +548,7 @@
font-size: 14px;
cursor: pointer;
vertical-align: middle;
transition: var(--el-md-fade-transition);
transition: var(--el-transition-md-fade);
margin-top: 60px;
i {

20
packages/theme-chalk/src/var.scss
View File

@ -85,21 +85,9 @@
-------------------------- */
// refer to this website to get the bezier motion function detail
// https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
--el-transition-duration: 0.3s;
--el-transition-duration-fast: 0.2s;
--el-ease-in-out-bezier-function: cubic-bezier(0.645, 0.045, 0.355, 1);
--el-fast-bezier-transition: cubic-bezier(0.23, 1, 0.32, 1);
--el-transition-duration: #{map.get($--transition-duration, 'default')};
--el-transition-duration-fast: #{map.get($--transition-duration, 'fast')};
--el-all-transition: all var(--el-transition-duration)
var(--el-ease-in-out-bezier-function);
--el-fade-transition: opacity var(--el-transition-duration)
var(--el-fast-bezier-transition);
--el-md-fade-transition: transform var(--el-transition-duration)
var(--el-fast-bezier-transition),
opacity var(--el-transition-duration) var(--el-fast-bezier-transition);
--el-fade-linear-transition: opacity var(--el-transition-duration-fast) linear;
--el-border-transition-base: border-color var(--el-transition-duration-fast)
var(--el-ease-in-out-bezier-function);
--el-color-transition-base: color var(--el-transition-duration-fast)
var(--el-ease-in-out-bezier-function);
@include set-component-css-var('transition-function', $--transition-function);
@include set-component-css-var('transition', $--transition);
}