diff --git a/examples/app.vue b/examples/app.vue index 826e9479a..d8cff24f1 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -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; } diff --git a/examples/components/demo-block.vue b/examples/components/demo-block.vue index 553da8639..11347e085 100644 --- a/examples/components/demo-block.vue +++ b/examples/components/demo-block.vue @@ -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> diff --git a/examples/components/footer-nav.vue b/examples/components/footer-nav.vue index 6e8905ba6..1ef30751d 100644 --- a/examples/components/footer-nav.vue +++ b/examples/components/footer-nav.vue @@ -41,10 +41,10 @@ transition: .3s; &:hover { - color: #5e6d82; + color: #20a0ff; & i { - color: #5e6d82; + color: #20a0ff; } } } diff --git a/examples/components/footer.vue b/examples/components/footer.vue index e4df4161d..00338a77c 100644 --- a/examples/components/footer.vue +++ b/examples/components/footer.vue @@ -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"> diff --git a/examples/components/header.vue b/examples/components/header.vue index 8320d2457..11c58f3c4 100644 --- a/examples/components/header.vue +++ b/examples/components/header.vue @@ -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; diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue index df4f1e808..22a7a151b 100644 --- a/examples/components/side-nav.vue +++ b/examples/components/side-nav.vue @@ -2,6 +2,7 @@ .side-nav { width: 100%; box-sizing: border-box; + padding-right: 30px; li { list-style: none; diff --git a/examples/docs/color.md b/examples/docs/color.md index b6c9a3311..7a50c649a 100644 --- a/examples/docs/color.md +++ b/examples/docs/color.md @@ -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"> diff --git a/examples/docs/icon.md b/examples/docs/icon.md index f6f61365d..3b7ca1975 100644 --- a/examples/docs/icon.md +++ b/examples/docs/icon.md @@ -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> diff --git a/examples/docs/layout.md b/examples/docs/layout.md index 2807ce557..5942cb0f4 100644 --- a/examples/docs/layout.md +++ b/examples/docs/layout.md @@ -2,6 +2,9 @@ .demo-layout { .el-row { margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } } .el-col { height: 36px; diff --git a/examples/pages/changelog.vue b/examples/pages/changelog.vue index 555e4334b..59548c0d6 100644 --- a/examples/pages/changelog.vue +++ b/examples/pages/changelog.vue @@ -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> diff --git a/examples/pages/component.vue b/examples/pages/component.vue index 8a4fb20cd..80c8d34f8 100644 --- a/examples/pages/component.vue +++ b/examples/pages/component.vue @@ -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; + } } } } diff --git a/packages/slider/src/main.vue b/packages/slider/src/main.vue index b161f31cf..73bd7ff74 100644 --- a/packages/slider/src/main.vue +++ b/packages/slider/src/main.vue @@ -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>