mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-03 04:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(service-layout): transition when theme change

Browse Source
This commit is contained in:
07akioni 2019-10-10 23:01:25 +08:00
parent f48b987cfa
commit fbde1451a3
4 changed files with 12 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
demo/documentation/components/startPage.vue
View File

@ -1,32 +0,0 @@
<template>
<div
ref="doc"
class="readme"
>
<readme />
</div>
</template>
<script>
import readme from '../../../README.md'
import { replaceEmojiWithImages } from '../../utils'
export default {
components: {
readme
},
mounted () {
replaceEmojiWithImages(this.$refs.doc)
},
methods: {
}
}
</script>
<style scoped>
.readme {
padding: 24px 0 24px 0;
max-width: 720px;
margin: auto;
}
</style>

2
demo/styles/ComponentDemo.scss
View File

@ -24,7 +24,7 @@
overflow: hidden;
border-radius: 8px;
padding-top: 16px;
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
.n-divider__content {
cursor: pointer;
}

12
demo/styles/markdown.scss
View File

@ -14,6 +14,7 @@
}
h1 {
font-size: 32px;
margin-bottom: 12px;
}
h2 {
font-size: 24px;
@ -46,6 +47,9 @@
color: $primary-6;
font-size: 14px;
}
code {
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
}
pre {
width: 100%;
box-sizing: border-box;
@ -64,6 +68,7 @@
padding: 0em .4em .1em .4em;
font-size: 14px;
font-family: 'Lato';
border: 1px solid transparent;
}
table {
font-size: 14px;
@ -74,10 +79,12 @@
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
// background-color: $--n-alpha-table-body-color;
th {
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
background-color: $--n-table-header-color;
background-clip: padding-box;
// background-clip: padding-box;
text-align: inherit;
padding: 14px 12px;
vertical-align: inherit;
@ -92,8 +99,9 @@
}
}
td {
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
background-color: $--n-table-body-color;
background-clip: padding-box;
// background-clip: padding-box;
padding: 12px;
}
}

2
demo/utils/ComponentDemo.vue
View File

@ -17,7 +17,7 @@
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
}"
n-dark-theme-background-color-hint="transparent"
n-dark-theme-background-color-hint="#1e2437"
n-light-theme-background-color-hint="white"
>
<div class="n-code-box__title">