github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

misc visual updates - round 2

pull/79/head
Leopoldthecoder 2016-09-18 22:01:26 +08:00
parent ce95bd6979
commit e00f5ac9ea
12 changed files with 81 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/app.vue
View File

@ -25,8 +25,12 @@
} }
.hljs { .hljs {
padding: 20px 25px; line-height: 1.8;
font-family: Menlo, Monaco, Consolas, Courier, monospace;
font-size: 12px;
padding: 18px 24px;
background-color: #f9fafc; background-color: #f9fafc;
border: solid 1px #eaeefb;
margin-bottom: 25px; margin-bottom: 25px;
border-radius: 2px; border-radius: 2px;
} }

32
examples/components/demo-block.vue
View File

@ -6,8 +6,12 @@
@mouseleave="hovering = false"> @mouseleave="hovering = false">
<slot></slot> <slot></slot>
<div class="demo-block-control" @click="isExpanded = !isExpanded"> <div class="demo-block-control" @click="isExpanded = !isExpanded">
<i :class="iconClass"></i> <transition name="arrow-slide">
<span v-show="hovering">{{ controlText }}</span> <i :class="[iconClass, { 'hovering': hovering }]"></i>
</transition>
<transition name="text-slide">
<span v-show="hovering">{{ controlText }}</span>
</transition>
</div> </div>
</div> </div>
</template> </template>
@ -58,8 +62,11 @@
color: #5e6d82; color: #5e6d82;
background-color: #e6effb; background-color: #e6effb;
margin: 0 4px; margin: 0 4px;
padding: 4px 8px; transform: translateY(-2px);
display: inline-block;
padding: 1px 5px;
font-size: 12px; font-size: 12px;
border-radius: 3px;
} }
} }
@ -72,11 +79,7 @@
} }
code.hljs { code.hljs {
font-size: 12px;
padding: 18px 24px;
margin: 0; margin: 0;
line-height: 1.8;
background-color: #f9fafc;
border: none; border: none;
max-height: none; max-height: none;
border-radius: 0; border-radius: 0;
@ -99,21 +102,36 @@
color: #d3dce6; color: #d3dce6;
cursor: pointer; cursor: pointer;
transition: .2s; transition: .2s;
position: relative;
i { i {
font-size: 12px; font-size: 12px;
line-height: 36px; line-height: 36px;
transition: .3s;
&.hovering {
transform: translateX(-40px);
}
} }
span { span {
position: absolute;
transform: translateX(-30px);
font-size: 14px; font-size: 14px;
line-height: 36px; line-height: 36px;
transition: .3s;
display: inline-block;
} }
&:hover { &:hover {
color: #20a0ff; color: #20a0ff;
background-color: #f9fafc; background-color: #f9fafc;
} }
& .text-slide-enter,
& .text-slide-leave-active {
opacity: 0;
transform: translateX(10px);
}
} }
} }
</style> </style>

4
examples/components/footer-nav.vue
View File

@ -41,10 +41,10 @@
transition: .3s; transition: .3s;
&:hover { &:hover {
color: #5e6d82; color: #20a0ff;
& i { & i {
color: #5e6d82; color: #20a0ff;
} }
} }
} }

2
examples/components/footer.vue
View File

@ -3,7 +3,7 @@
<div class="container"> <div class="container">
<div class="footer-main"> <div class="footer-main">
<p class="footer-main-title">Element 1.0 Hydrogen</p> <p class="footer-main-title">Element 1.0 Hydrogen</p>
<span class="footer-main-link">反馈建议</span> <a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">反馈建议</a>
<!--<span class="footer-main-link"><router-link to="/changelog">更新日志</router-link></span>--> <!--<span class="footer-main-link"><router-link to="/changelog">更新日志</router-link></span>-->
</div> </div>
<div class="footer-social"> <div class="footer-social">

7
examples/components/header.vue
View File

@ -64,8 +64,13 @@
color: #fff; color: #fff;
display: block; display: block;
padding: 0 20px; padding: 0 20px;
opacity: .8;
&.active,
&:hover {
opacity: 1;
}
&.active:before { &.active::before {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;

1
examples/components/side-nav.vue
View File

@ -2,6 +2,7 @@
.side-nav { .side-nav {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding-right: 30px;
li { li {
list-style: none; list-style: none;

17
examples/docs/color.md
View File

@ -10,6 +10,7 @@
& .value { & .value {
font-size: 12px; font-size: 12px;
opacity: 0.69; opacity: 0.69;
line-height: 24px;
} }
} }
.demo-color-box-group { .demo-color-box-group {
@ -118,7 +119,7 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
<div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div> <div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box bg-danger">Danger<div class="value">#ff4949</div></div> <div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
</el-col> </el-col>
</el-row> </el-row>
@ -129,23 +130,23 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <div class="demo-color-box-group">
<div class="demo-color-box bg-black">Black<div class="value">#1f2d3d</div></div> <div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
<div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div> <div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
<div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div> <div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <div class="demo-color-box-group">
<div class="demo-color-box bg-silver">Silver<div class="value">#8492a6</div></div> <div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
<div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99a9bf</div></div> <div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
<div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#c0ccda</div></div> <div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <div class="demo-color-box-group">
<div class="demo-color-box color-gray bg-gray">Gray<div class="value">#d3dce6</div></div> <div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
<div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#e5e9f2</div></div> <div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
<div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#eff2f7</div></div> <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">

20
examples/docs/icon.md
View File

@ -10,20 +10,28 @@
} }
</script> </script>
<style> <style>
.source>i { .demo-icon .source > i {
margin: 0 10px; font-size: 24px;
color: #8492a6;
margin: 0 20px;
font-size: 1.5em; font-size: 1.5em;
vertical-align: middle; vertical-align: middle;
} }
.demo-icon .source > button {
margin: 0 20px;
}
.icon-list { .icon-list {
overflow: hidden; overflow: hidden;
list-style: none; list-style: none;
padding: 0; padding: 0;
border: solid 1px #eaeefb;
border-radius: 4px;
} }
.icon-list li { .icon-list li {
float: left; float: left;
width: 20%; width: 16.66%;
text-align: center; text-align: center;
height: 120px; height: 120px;
line-height: 120px; line-height: 120px;
@ -42,15 +50,17 @@
display: inline-block; display: inline-block;
line-height: normal; line-height: normal;
vertical-align: middle; vertical-align: middle;
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
color: #99a9bf;
} }
& i { & i {
display: block; display: block;
font-size: 30px; font-size: 24px;
margin-bottom: 15px; margin-bottom: 15px;
color: #8492a6;
} }
&:hover { &:hover {
color: rgb(92, 182, 255); color: rgb(92, 182, 255);
cursor: pointer;
} }
} }
</style> </style>

3
examples/docs/layout.md
View File

@ -2,6 +2,9 @@
.demo-layout { .demo-layout {
.el-row { .el-row {
margin-bottom: 20px; margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
} }
.el-col { .el-col {
height: 36px; height: 36px;

15
examples/pages/changelog.vue
View File

@ -36,6 +36,7 @@
> li { > li {
list-style: none; list-style: none;
position: relative; position: relative;
line-height: 1.8;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 50px; margin-bottom: 50px;
@ -46,10 +47,10 @@
h3:before { h3:before {
left: -33px; left: -33px;
top: 5px; top: 10px;
width: 16px; width: 17px;
height: @width; height: @width;
background-color: #81c8fa; background-color: #20a0ff;
border: 0; border: 0;
} }
} }
@ -81,9 +82,9 @@
display: block; display: block;
position: absolute; position: absolute;
left: -31px; left: -31px;
top: 7px; top: 13px;
circle: 13px transparent; circle: 13px transparent;
border: 2px solid #2ca2fc; border: 2px solid #20a0ff;
box-sizing: border-box; box-sizing: border-box;
background-color: #fff; background-color: #fff;
} }
@ -99,7 +100,7 @@
position: absolute; position: absolute;
left: -127px; left: -127px;
font-style: normal; font-style: normal;
top: 4px; top: 6px;
font-size: 14px; font-size: 14px;
color: #99a9bf; color: #99a9bf;
} }
@ -107,7 +108,7 @@
} }
</style> </style>
<template> <template>
<div class="page-container page-changelog"> <div class="page-changelog">
<h2> <h2>
<el-button class="fr"> <el-button class="fr">
<a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a> <a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a>

5
examples/pages/component.vue
View File

@ -14,6 +14,7 @@
margin: 45px 0 15px; margin: 45px 0 15px;
} }
table { table {
border-collapse: collapse;
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
color: #5e6d82; color: #5e6d82;
@ -30,6 +31,10 @@
border-bottom: 1px solid #eaeefb; border-bottom: 1px solid #eaeefb;
padding: 10px 0; padding: 10px 0;
} }
th {
border-top: 1px solid #eaeefb;
background-color: #EFF2F7;
}
} }
} }
} }

2
packages/slider/src/main.vue
View File

@ -19,7 +19,7 @@
<div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div> <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
</div> </div>
<transition name="popper-fade"> <transition name="popper-fade">
<div class="el-slider__pop" v-show="showTip" transition="popper-fade" ref="pop">{{ value }}</div> <div class="el-slider__pop" v-show="showTip" ref="pop">{{ value }}</div>
</transition> </transition>
<div class="el-slider__stop" v-for="item in stops" :style="{ 'left': item + '%' }" v-if="showStops"></div> <div class="el-slider__stop" v-for="item in stops" :style="{ 'left': item + '%' }" v-if="showStops"></div>
</div> </div>