mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 01:11:25 +08:00
d8954f945e
* chore: make eslints work in docs folder * refactor(dev): improve eslint * fix eslint issue Co-authored-by: Kevin <sxzz@sxzz.moe> Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
51 lines
754 B
Vue
51 lines
754 B
Vue
<script setup lang="ts">
|
|
import DarkIcon from '../icons/dark.vue'
|
|
import LightIcon from '../icons/light.vue'
|
|
import VPSwitch from './vp-switch.vue'
|
|
</script>
|
|
|
|
<template>
|
|
<VPSwitch>
|
|
<ElIcon :size="13">
|
|
<DarkIcon class="dark-icon" />
|
|
<LightIcon class="light-icon" />
|
|
</ElIcon>
|
|
</VPSwitch>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-icon {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dark-icon,
|
|
.light-icon {
|
|
transition: color var(--el-transition-duration),
|
|
opacity var(--el-transition-duration);
|
|
}
|
|
|
|
.light-icon {
|
|
opacity: 1;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.dark-icon {
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
@at-root .dark {
|
|
.dark-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.light-icon {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|