test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-30 11:17:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

misc visual updates - round 2

Browse Source
This commit is contained in:
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 {
padding: 20px 25px;
line-height: 1.8;
font-family: Menlo, Monaco, Consolas, Courier, monospace;
font-size: 12px;
padding: 18px 24px;
background-color: #f9fafc;
border: solid 1px #eaeefb;
margin-bottom: 25px;
border-radius: 2px;
}

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

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

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

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

2
examples/components/footer.vue
View File

@ -3,7 +3,7 @@
<div class="container">
<div class="footer-main">
<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>-->
</div>
<div class="footer-social">

7
examples/components/header.vue
View File

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

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

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

17
examples/docs/color.md
View File

@ -10,6 +10,7 @@
& .value {
font-size: 12px;
opacity: 0.69;
line-height: 24px;
}
}
.demo-color-box-group {
@ -118,7 +119,7 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
<div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
</el-col>
<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-row>
@ -129,23 +130,23 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
<el-row :gutter="12">
<el-col :span="6">
<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-lighter">Extra Light Black<div class="value">#475669</div></div>
</div>
</el-col>
<el-col :span="6">
<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-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">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-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
</div>
</el-col>
<el-col :span="6">
<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-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">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-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
</div>
</el-col>
<el-col :span="6">

20
examples/docs/icon.md
View File

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

3
examples/docs/layout.md
View File

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

15
examples/pages/changelog.vue
View File

@ -36,6 +36,7 @@
> li {
list-style: none;
position: relative;
line-height: 1.8;
&:not(:last-child) {
margin-bottom: 50px;
@ -46,10 +47,10 @@
h3:before {
left: -33px;
top: 5px;
width: 16px;
top: 10px;
width: 17px;
height: @width;
background-color: #81c8fa;
background-color: #20a0ff;
border: 0;
}
}
@ -81,9 +82,9 @@
display: block;
position: absolute;
left: -31px;
top: 7px;
top: 13px;
circle: 13px transparent;
border: 2px solid #2ca2fc;
border: 2px solid #20a0ff;
box-sizing: border-box;
background-color: #fff;
}
@ -99,7 +100,7 @@
position: absolute;
left: -127px;
font-style: normal;
top: 4px;
top: 6px;
font-size: 14px;
color: #99a9bf;
}
@ -107,7 +108,7 @@
}
</style>
<template>
<div class="page-container page-changelog">
<div class="page-changelog">
<h2>
<el-button class="fr">
<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;
}
table {
border-collapse: collapse;
width: 100%;
background-color: #fff;
color: #5e6d82;
@ -30,6 +31,10 @@
border-bottom: 1px solid #eaeefb;
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>
<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>
<div class="el-slider__stop" v-for="item in stops" :style="{ 'left': item + '%' }" v-if="showStops"></div>
</div>