You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2020/06/23 09:13:27 UTC
[incubator-echarts-doc] branch live-example updated: example：fix the style of doc and example configuration items
This is an automated email from the ASF dual-hosted git repository.
wangdd pushed a commit to branch live-example
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/live-example by this push:
new 6b7768b example：fix the style of doc and example configuration items
6b7768b is described below
commit 6b7768b9512f7f8357487434ee7077fae2282464
Author: Wdingding <wa...@gmail.com>
AuthorDate: Tue Jun 23 17:13:14 2020 +0800
example：fix the style of doc and example configuration items
---
src/components/DocContent.vue | 6 +++---
src/components/DocContentItemCard.vue | 14 +++++++-------
src/components/DocNav.vue | 4 ++--
src/components/LiveExample.vue | 25 ++++++++++++++++---------
src/i18n.js | 4 ++--
src/style/mixin.scss | 9 +++++----
6 files changed, 35 insertions(+), 27 deletions(-)
diff --git a/src/components/DocContent.vue b/src/components/DocContent.vue
index dc99780..c62d16d 100644
--- a/src/components/DocContent.vue
+++ b/src/components/DocContent.vue
@@ -280,9 +280,9 @@ export default {
h3 {
font-weight: normal;
- color: #999;
- font-size: 30px;
- margin: 20px 20px 20px 0;
+ color: rgb(150, 150, 150);
+ font-size: 28px;
+ margin: 20px 0px 20px 20px;
}
.page-description {
diff --git a/src/components/DocContentItemCard.vue b/src/components/DocContentItemCard.vue
index 7ce4377..67c0569 100644
--- a/src/components/DocContentItemCard.vue
+++ b/src/components/DocContentItemCard.vue
@@ -313,7 +313,7 @@ $hierarchy-guider-color: #C592A0;
}
.default-value {
- color: #293c55;
+ color: #434343;
font-size: 16px;
margin-left: 15px;
vertical-align: bottom;
@@ -418,17 +418,17 @@ $hierarchy-guider-color: #C592A0;
margin-right: 4px;
border-radius: 4px;
padding: 3px 5px;
- color: #fff;
- background-color: #a3a3a3;
+ color: #333;
+ background-color: #f9f2f4;
font-size: 12px;
}
-
+
.prop-type-string {
- background-color: #fd8888;
+ background-color: #f9f2f4;
}
.prop-type-number {
- background-color: #8fb9e4;
+ background-color: #f9f2f4;
}
.prop-type-object {
@@ -441,7 +441,7 @@ $hierarchy-guider-color: #C592A0;
}
.prop-type-boolean {
- background-color: #e6a23c;
+ background-color: #f9f2f4;
}
.properties-list-panel {
diff --git a/src/components/DocNav.vue b/src/components/DocNav.vue
index dfdfc7d..43fef3d 100644
--- a/src/components/DocNav.vue
+++ b/src/components/DocNav.vue
@@ -280,9 +280,9 @@ export default {
font-family: Monaco,'Source Code Pro', monospace;
font-size: 13px;
white-space: nowrap;
-
+
.default-value {
- color: #999;
+ color: #f4f4f4;
}
}
}
diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index 35d7943..ec6aec1 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -37,7 +37,8 @@
import {store, getPagePath} from '../store';
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
-import 'codemirror/theme/paraiso-dark.css';
+// import 'codemirror/theme/paraiso-dark.css';
+import 'codemirror/theme/dracula.css';
import 'codemirror/mode/javascript/javascript.js'
import beautify from 'js-beautify';
import throttle from 'lodash.throttle';
@@ -150,7 +151,8 @@ function updateOption(option, isRefreshForce) {
this.cmInstance = CodeMirror(this.$el.querySelector('.codemirror-main'), {
value: this.formattedOptionCodeStr,
mode: 'javascript',
- theme: 'paraiso-dark',
+ // theme: 'paraiso-dark',
+ theme: 'dracula',
readOnly: true
});
}
@@ -330,7 +332,7 @@ export default {
#example-panel {
position: fixed;
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 10px 0px;
text-align: left;
background: #fff;
@@ -340,9 +342,11 @@ export default {
h2 {
font-weight: normal;
- font-size: 18px;
- color: #B03A5B;
+ font-size: 20px;
+ color: #333;
padding-left: 20px;
+ font-weight: bold;
+ margin: 5px 0;
}
p.intro {
@@ -381,13 +385,16 @@ export default {
position: absolute;
left: 10px;
top: 10px;
- right: 0;
- bottom: 10px;
-
+ right: 10px;
+ bottom: 15px;
+ box-shadow: -5px -5px 15px rgba(0, 0, 0, 0.1);
.CodeMirror {
height: 100%;
overflow-y: scroll;
- border-radius: 5px;
+ border-radius: 6px;
+ .CodeMirror-scroll {
+ padding: 15px;
+ }
// font-family: Monaco, 'Source Code Pro', monospace;
::-webkit-scrollbar-thumb {
diff --git a/src/i18n.js b/src/i18n.js
index f2c773c..f209fc2 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -64,8 +64,8 @@ export default {
},
example: {
title: '配置项效果预览',
- intro: '在左侧调节控件预览配置项不同取值的效果',
- noExample: '当前组件暂无可用的示例',
+ intro: '调节控件可预览配置项不同取值的效果',
+ noExample: '当前组件暂无可用示例',
tryDesc: '试一试',
defaultColor: '默认颜色',
diff --git a/src/style/mixin.scss b/src/style/mixin.scss
index 8c308cc..ccdca92 100644
--- a/src/style/mixin.scss
+++ b/src/style/mixin.scss
@@ -21,6 +21,7 @@
p {
margin: 0;
+ font-size: 12px;
}
pre {
@@ -41,7 +42,7 @@
p {
line-height: 1.7em;
margin: 12px 0 12px 0;
- font-size: 14px;
+ font-size: 16px;
}
pre {
margin: 5px 0;
@@ -53,10 +54,10 @@
}
.codespan {
- padding: 2px 4px;
+ padding: 1px 5px;
font-size: 14px;
- color: #293C55;
- background-color: #f9f2f4;
+ //color: #293C55;
+ background-color: #f4f4f4;
border-radius: 4px;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org