mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(switch): transition of switch background

Browse Source
This commit is contained in:
07akioni 2019-12-19 00:22:01 +08:00
parent ea7f5088a0
commit 5094ed0f33
3 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
styles/Switch.scss
View File

@ -17,7 +17,7 @@
width: 30px;
border-radius: 7px;
margin: 3px;
transition: background-color .2s $default-cubic-bezier;
transition: background-color .3s $default-cubic-bezier;
&::before, &::after {
box-sizing: border-box;
cursor: inherit;
@ -29,7 +29,8 @@
border-radius: 10px;
top: -3px;
left: -3px;
// transition: left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier;
background-size: 800% 800%;
transition: left .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, max-width .3s $default-cubic-bezier, background-position .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
}
&::before {
opacity: 1;
@ -60,10 +61,10 @@
}
&::before {
box-shadow: $--switch-switcher-box-shadow;
transition: $--switch-switcher-transition;
background-position: $--switch-background-position;
}
&::after {
transition: $--switch-switcher-transition;
background-position: $--switch-background-position;
}
background-color: map-get($map: $--switch-rail-background-color, $key: 'inactive');
&::before {

9
styles/themes/dark/components/Switch.scss
View File

@ -4,10 +4,9 @@
"active": change-color($--n-primary-color, $alpha: .25)
)!global;
$--switch-switcher-color: (
"inactive": linear-gradient(52deg,rgba(148,151,155,1) 0%,rgba(148,151,155,1) 100%),
"active": linear-gradient(52deg,rgba(120,205,104,1) 0%,rgba(20,166,165,1) 100%)
"inactive": linear-gradient(52deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(148,151,155,1) 75%,rgba(148,151,155,1) 100%),
"active": linear-gradient(52deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(120,205,104,1) 75%,rgba(20,166,165,1) 100%)
) !global;
$--switch-background-position: 100%, 0% !global;
$--switch-switcher-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4) !global;
$--switch-switcher-border: 1px solid transparent !global;
$--switch-switcher-transition: (left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier) !global;
}
$--switch-switcher-border: 1px solid transparent !global;}

6
styles/themes/light/components/Switch.scss
View File

@ -4,10 +4,10 @@
"active": $--n-primary-color
) !global;
$--switch-switcher-color: (
"inactive": linear-gradient(52deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%),
"active": linear-gradient(52deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%),
"inactive": linear-gradient(52deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(148,151,155,1) 75%,rgba(148,151,155,1) 100%),
"active": linear-gradient(52deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(120,205,104,1) 75%,rgba(20,166,165,1) 100%)
) !global;
$--switch-background-position: 0, 0 !global;
$--switch-switcher-box-shadow: (0px 1px 4px 0px rgba(0,0,0,0.3), inset 0px 0px 1px 0px rgba(0,0,0,0.05)) !global;
$--switch-switcher-border: 1px solid $--n-divider-color !global;
$--switch-switcher-transition: (left .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier) !global;
}