Skip to content

E
Element
Commit fa6580e7 authored by wayne's avatar wayne Committed by 杨奕
Browse files
Options

Carbon: sidenav & table & changelog

parent 21c57917
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 109 deletions
build/bin/template.js 0 → 100644
View file @ fa6580e7
const path = require('path');
const templates = path.resolve(process.cwd(), './examples/pages/template');
const chokidar = require('chokidar');
let watcher = chokidar.watch([templates]);
watcher.on('ready', function() {
watcher
.on('change', function() {
exec('npm run i18n');
});
});
function exec(cmd) {
return require('child_process').execSync(cmd).toString().trim();
}
examples/app.vue
View file @ fa6580e7
......@@ -21,7 +21,7 @@
}
a {
color: #4078c0;
color: #1989FA;
text-decoration: none;
}
......
examples/components/side-nav.vue
View file @ fa6580e7
......@@ -7,6 +7,7 @@
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
......@@ -36,7 +37,7 @@
}
@when active {
span, i {
color: #20a0ff;
color: #1989FA;
}
i {
transform: rotateZ(180deg) translateY(2px);
......@@ -44,7 +45,7 @@
}
&:hover {
span, i {
color: #20a0ff;
color: #1989FA;
}
}
}
......@@ -52,7 +53,7 @@
.nav-item {
a {
font-size: 16px;
color: #5e6d82;
color: #333;
line-height: 40px;
height: 40px;
margin: 0;
......@@ -60,36 +61,39 @@
text-decoration: none;
display: block;
position: relative;
transition: all .3s;
transition: .15s ease-out;
font-weight: bold;
&.active {
color: #20a0ff;
color: #1989FA;
}
}
.nav-item {
a {
display: block;
height: 40px;
color: #666;
line-height: 40px;
font-size: 13px;
padding-left: 24px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: normal;
&:hover {
color: #20a0ff;
&:hover,
&.active {
color: #1989FA;
}
}
}
}
.nav-group__title {
font-size: 12px;
color: #99a9bf;
padding-left: 8px;
color: #999;
line-height: 26px;
margin-top: 10px;
margin-top: 15px;
}
}
.nav-dropdown-list {
......@@ -102,28 +106,6 @@
</style>
<template>
<div class="side-nav" :style="navStyle">
<el-dropdown
v-show="isComponentPage"
trigger="click"
class="nav-dropdown"
:class="{ 'is-active': dropdownVisible }">
<span>
{{ langConfig.dropdown }}{{ version }}
<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu
slot="dropdown"
:offset="-80"
class="nav-dropdown-list"
@input="handleDropdownToggle">
<el-dropdown-item
v-for="item in Object.keys(versions)"
:key="item"
@click.native="switchVersion(item)">
{{ item }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<ul>
<li class="nav-item" v-for="item in data">
<a v-if="!item.path && !item.href" @click="expandMenu">{{item.name}}</a>
......
examples/nav.config.json
View file @ fa6580e7
{
"zh-CN": [
{
"name": "更新日志",
"path": "/changelog"
},
{
"name": "Element React",
"href": "https://eleme.github.io/element-react/"
},
{
"name": "开发指南",
"children": [
......@@ -25,14 +33,6 @@
}
]
},
{
"name": "更新日志",
"path": "/changelog"
},
{
"name": "Element React",
"href": "https://eleme.github.io/element-react/"
},
{
"name": "基础组件",
"groups": [
......
examples/pages/template/changelog.tpl
View file @ fa6580e7
......@@ -5,66 +5,65 @@
.fr {
float: right;
padding: 0;
&.el-button {
transform: translateY(-3px);
}
a {
display: block;
padding: 10px 15px;
color: #475669;
color: #333;
}
&:hover a {
color: #20a0ff;
}
}
.heading {
margin-bottom: 40px;
font-size: 24px;
margin-bottom: 60px;
color: #333;
}
.timeline {
margin: 0 0 0 105px;
padding-left: 25px;
padding: 0;
padding-bottom: 10px;
position: relative;
color: #5e6d82;
&:before {
content: '';
width: 1px;
height: 100%;
position: absolute;
left: 0;
top: 10px;
background-color: #eaeefa;
}
> li {
list-style: none;
position: relative;
padding-bottom: 15px;
list-style: none;
line-height: 1.8;
border: 1px solid #ddd;
border-radius: 4px;
&:not(:last-child) {
margin-bottom: 50px;
}
&:first-child {
margin-top: -10px;
h3:before {
left: -33px;
top: 10px;
width: 17px;
height: @width;
background-color: #20a0ff;
border: 0;
}
}
}
ul {
padding-left: 0;
padding: 30px 30px 15px;
ul {
padding-left: 20px;
padding: 0;
padding-top: 5px;
padding-left: 27px;
li {
padding-left: 0;
color: #555;
}
li::before {
content: '';
circle: 4px #fff;
border: solid 1px #5e6d82;
margin-right: 5px;
border: solid 1px #333;
margin-right: -12px;
display: inline-block;
vertical-align: middle;
}
......@@ -72,56 +71,59 @@
}
li li {
font-size: 14px;
font-size: 16px;
list-style: none;
padding-left: 0;
padding-left: 20px;
padding-bottom: 5px;
color: #333;
word-break: break-all;
&:before {
content: '';
circle: 4px #5e6d82;
margin-right: 5px;
circle: 6px #333;
transform: translateX(-20px);
display: inline-block;
vertical-align: middle;
}
}
h3 {
margin: 0 0 10px;
&:before {
content: '';
display: block;
position: absolute;
left: -31px;
top: 13px;
circle: 13px transparent;
border: 2px solid #20a0ff;
box-sizing: border-box;
background-color: #fff;
}
margin:0;
padding: 15px 30px;
border-bottom: 1px solid #ddd;
font-size: 20px;
color: #333;
font-weight: bold;
a {
opacity: 1;
font-size: 20px;
float: none;
margin-left: 0;
color: inherit;
color: #333;
}
}
h4 {
margin: 50px 0 10px;
margin: 0;
margin-bottom: -10px;
font-size: 18px;
padding-left: 54px;
padding-top: 30px;
font-weight: bold;
}
p {
margin: 0;
}
em {
position: absolute;
left: -127px;
right: 30px;
font-style: normal;
top: 6px;
font-size: 14px;
color: #99a9bf;
top: 23px;
font-size: 16px;
color: #666;
}
}
}
......@@ -141,6 +143,7 @@
</template>
<script>
import ChangeLog from '../../../CHANGELOG.<%= 2 >.md';
export default {
components: {
ChangeLog
......
examples/pages/template/component.tpl
View file @ fa6580e7
......@@ -7,13 +7,13 @@
> {
h3 {
margin: 45px 0 15px;
margin: 45px 0 20px;
}
table {
border-collapse: collapse;
width: 100%;
background-color: #fff;
color: #5e6d82;
font-size: 14px;
margin-bottom: 45px;
line-height: 1.5em;
......@@ -21,22 +21,30 @@
strong {
font-weight: normal;
}
td, th {
border-bottom: 1px solid #eaeefb;
padding: 15px;
max-width: 250px;
}
th {
text-align: left;
border-top: 1px solid #eaeefb;
background-color: #EFF2F7;
white-space: nowrap;
color: #666;
font-weight: normal;
}
td, th {
border-bottom: 1px solid #eaeefb;
padding: 10px;
max-width: 250px;
td {
color: #333;
}
th:first-child, td:first-child {
padding-left: 10px;
}
}
ul {
ul:not(.timeline) {
margin: 10px 0;
padding: 0 0 0 20px;
font-size: 14px;
......@@ -100,6 +108,7 @@
<script>
import navsData from '../../nav.config.json';
import throttle from 'throttle-debounce/throttle';
export default {
data() {
return {
......
package.json
View file @ fa6580e7
......@@ -17,7 +17,7 @@
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage && lerna clean --yes",
"deploy": "npm run deploy:build && gh-pages -d examples/element-ui --remote eleme && del examples/element-ui",
"deploy:build": "npm run build:file && cooking build -c build/cooking.demo.js -p && echo element.eleme.io>>examples/element-ui/CNAME",
"dev": "npm run bootstrap && npm run build:file && cooking watch -c build/cooking.demo.js -p",
"dev": "npm run bootstrap && npm run build:file && cooking watch -c build/cooking.demo.js -p & node build/bin/template.js",
"dev:play": "npm run build:file && cross-env PLAY_ENV=true cooking watch -c build/cooking.demo.js -p",
"dist": "npm run clean && npm run build:file && npm run lint && cooking build -c build/cooking.conf.js,build/cooking.common.js,build/cooking.component.js -p && npm run build:utils && npm run build:umd && npm run build:theme",
"dist:all": "node build/bin/build-all.js && npm run build:theme",
......@@ -64,6 +64,7 @@
"babel-preset-es2015": "^6.14.0",
"chai": "^3.5.0",
"cheerio": "^0.18.0",
"chokidar": "^1.7.0",
"cooking": "^1.2.0",
"cooking-lint": "^0.1.3",
"cooking-vue2": "^0.3.0",
......
yarn.lock
View file @ fa6580e7
......@@ -1119,6 +1119,21 @@ chokidar@^1.0.0, chokidar@^1.4.1:
optionalDependencies:
fsevents "^1.0.0"
chokidar@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
dependencies:
anymatch "^1.3.0"
async-each "^1.0.0"
glob-parent "^2.0.0"
inherits "^2.0.1"
is-binary-path "^1.0.0"
is-glob "^2.0.0"
path-is-absolute "^1.0.0"
readdirp "^2.0.0"
optionalDependencies:
fsevents "^1.0.0"
circular-json@^0.3.0:
version "0.3.1"
resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment