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

doc: add the missing styles for english docs

pull/4947/head
qingwei.li 2017-05-18 12:28:45 +08:00 committed by 杨奕
parent 068f5dbf10
commit ac571ce6d8
29 changed files with 822 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
examples/docs/en-US/alert.md
View File

@ -7,6 +7,15 @@
} }
} }
</script> </script>
<style>
.demo-box.demo-alert .el-alert {
margin: 20px 0 0;
}
.demo-box.demo-alert .el-alert:first-child {
margin: 0;
}
</style>
## Alert ## Alert

45
examples/docs/en-US/button.md
View File

@ -22,6 +22,51 @@
} }
} }
</script> </script>
<style>
.demo-box.demo-button {
.el-row {
margin-bottom: 10px;
}
.el-button + .el-button {
margin-left: 10px;
}
.el-button-group {
margin-bottom: 20px;
.el-button + .el-button {
margin-left: 0;
}
& + .el-button-group {
margin-left: 10px;
}
}
}
.demo-box.demo-button .intro-block {
padding: 0;
}
.demo-button .intro-block .block {
padding: 30px 24px;
overflow: hidden;
border-bottom: solid 1px #EFF2F6;
&:last-child {
border-bottom: none;
}
}
.demo-button .intro-block .demonstration {
font-size: 14px;
color: #8492a6;
line-height: 44px;
}
.demo-button .intro-block .wrapper {
float: right;
margin-right: 20px;
}
</style>
## Button ## Button

49
examples/docs/en-US/carousel.md
View File

@ -10,6 +10,55 @@
} }
} }
</script> </script>
<style>
.demo-carousel .block {
padding: 30px;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-carousel .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
.demo-carousel .el-carousel__container {
text-align: center;
}
.demo-carousel .el-carousel__item {
h3 {
color: #fff;
font-size: 18px;
line-height: 300px;
margin: 0;
}
&:nth-child(2n) {
background-color: #99a9bf;
}
&:nth-child(2n+1) {
background-color: #d3dce6;
}
}
.demo-carousel .small h3 {
font-size: 14px;
line-height: 150px;
}
.demo-carousel .medium h3 {
font-size: 14px;
line-height: 200px;
}
</style>
## Carousel ## Carousel
Loop a series of images or texts in a limited space Loop a series of images or texts in a limited space

31
examples/docs/en-US/cascader.md
View File

@ -247,6 +247,37 @@
}; };
</script> </script>
<style>
.demo-cascader {
.el-cascader {
width: 222px;
}
}
.demo-cascader-size {
.el-cascader {
vertical-align: top;
margin-right: 15px;
}
}
.demo-cascader .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-cascader .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
## Cascader ## Cascader
If the options have a clear hierarchical structure, Cascader can be used to view and select them. If the options have a clear hierarchical structure, Cascader can be used to view and select them.

10
examples/docs/en-US/collapse.md
View File

@ -14,6 +14,16 @@
} }
</script> </script>
<style>
.demo-collapse {
.el-collapse-item__header {
.header-icon {
margin-left: 5px;
}
}
}
</style>
## Collapse ## Collapse
Use Collapse to store contents. Use Collapse to store contents.

20
examples/docs/en-US/color-picker.md
View File

@ -16,6 +16,26 @@
} }
</script> </script>
<style>
.demo-color-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-color-picker .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
## ColorPicker ## ColorPicker
ColorPicker is a color selector supporting multiple color formats. ColorPicker is a color selector supporting multiple color formats.

86
examples/docs/en-US/color.md
View File

@ -1,3 +1,89 @@
<style>
.demo-color-box {
border-radius: 4px;
padding: 20px;
height: 74px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
& .value {
font-size: 12px;
opacity: 0.69;
line-height: 24px;
}
}
.demo-color-box-group {
.demo-color-box {
border-radius: 0;
}
.demo-color-box:first-child {
border-radius: 4px 4px 0 0;
}
.demo-color-box:last-child {
border-radius: 0 0 4px 4px;
}
}
.bg-blue-light {
background-color: #58b7ff;
}
.bg-blue,
.bg-info {
background-color: #20a0ff;
}
.bg-blue-dark {
background-color: #1d8ce0;
}
.bg-success {
background-color: #13CE66;
}
.bg-warning {
background-color: #f7ba2a;
}
.bg-danger {
background-color: #ff4949;
}
.bg-black {
background-color: #1f2d3d;
}
.bg-black-light {
background-color: #324057;
}
.bg-black-lighter {
background-color: #475669;
}
.bg-silver {
background-color: #8492a6;
}
.bg-silver-light {
background-color: #99a9bf;
}
.bg-silver-lighter {
background-color: #c0ccda;
}
.bg-gray {
background-color: #d3dce6;
}
.bg-gray-light {
background-color: #e5e9f2;
}
.bg-gray-lighter {
background-color: #eff2f7;
}
.bg-white-dark {
background-color: #f9fafc;
}
.color-gray {
color: #5e6d82;
}
</style>
## Color ## Color
Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build. Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.

24
examples/docs/en-US/date-picker.md
View File

@ -63,6 +63,30 @@
}; };
</script> </script>
<style>
.demo-block.demo-date-picker .source {
padding: 0;
display: flex;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
flex: 1;
&:last-child {
border-right: none;
}
}
.demo-date-picker .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
## DatePicker ## DatePicker
Use Date Picker for date input. Use Date Picker for date input.

24
examples/docs/en-US/datetime-picker.md
View File

@ -72,6 +72,30 @@
}; };
</script> </script>
<style>
.demo-block.demo-datetime-picker .source {
padding: 0;
display: flex;
}
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
flex: 1;
&:last-child {
border-right: none;
}
}
.demo-datetime-picker .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
## DateTimePicker ## DateTimePicker
Select date and time in one picker. Select date and time in one picker.

23
examples/docs/en-US/dialog.md
View File

@ -47,6 +47,29 @@
}; };
</script> </script>
<style>
.demo-box.demo-dialog {
.dialog-footer button:first-child {
margin-right: 10px;
}
.full-image {
width: 100%;
}
.el-dialog__wrapper {
margin: 0;
}
.el-select {
width: 300px;
}
.el-input {
width: 300px;
}
.el-button--text {
margin-right: 15px;
}
}
</style>
## Dialog ## Dialog
Informs users while preserving the current page state. Informs users while preserving the current page state.

40
examples/docs/en-US/dropdown.md
View File

@ -1,3 +1,43 @@
<style>
.demo-box {
.el-dropdown {
vertical-align: top;
& + .el-dropdown {
margin-left: 15px;
}
}
.el-dropdown-link {
cursor: pointer;
color: #20a0ff;
}
.el-icon-caret-bottom {
font-size: 12px;
}
}
.block-col-2 {
margin: -24px;
.el-col {
padding: 30px 0;
text-align: center;
border-right: 1px solid #eff2f6;
&:last-child {
border-right: 0;
}
}
}
.demo-dropdown .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
<script> <script>
export default { export default {
methods: { methods: {

56
examples/docs/en-US/icon.md
View File

@ -10,6 +10,62 @@
} }
</script> </script>
<style>
.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: 16.66%;
text-align: center;
height: 120px;
line-height: 120px;
color: #666;
font-size: 13px;
transition: color .15s linear;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
margin-right: -1px;
margin-bottom: -1px;
@utils-vertical-center;
& span {
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: 24px;
margin-bottom: 15px;
color: #8492a6;
}
&:hover {
color: rgb(92, 182, 255);
}
}
</style>
## Icon ## Icon
Element provides a set of common icons. Element provides a set of common icons.

8
examples/docs/en-US/input-number.md
View File

@ -18,6 +18,14 @@
}; };
</script> </script>
<style>
.demo-box.demo-input-number {
.el-input-number + .el-input-number {
margin-left: 10px;
}
}
</style>
## InputNumber ## InputNumber
Input numerical values with a customizable range. Input numerical values with a customizable range.

31
examples/docs/en-US/layout.md
View File

@ -1,3 +1,34 @@
<style>
.demo-layout {
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
}
</style>
## Layout ## Layout
Quickly and easily create layouts with the basic 24-column. Quickly and easily create layouts with the basic 24-column.

6
examples/docs/en-US/loading.md
View File

@ -1,3 +1,9 @@
<style>
.demo-loading .el-table {
border: none;
}
</style>
<script> <script>
export default { export default {
data() { data() {

30
examples/docs/en-US/menu.md
View File

@ -1,3 +1,33 @@
<style>
.demo-box.demo-menu {
.el-menu-demo {
padding-left: 55px;
}
.el-menu-vertical-demo {
width: 200px;
min-height: 400px;
}
.line {
height: 1px;
background-color: #e0e6ed;
margin: 35px -24px;
}
h5 {
font-size: 14px;
color: #8492a6;
margin-top: 10px;
}
.tac {
text-align: center;
.el-menu-vertical-demo {
display: inline-block;
text-align: left;
}
}
}
</style>
<script> <script>
export default { export default {
data() { data() {

50
examples/docs/en-US/pagination.md
View File

@ -1,3 +1,53 @@
<style>
.demo-pagination .source.first {
padding: 0;
}
.demo-pagination .first .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-pagination .first .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
.demo-pagination .source.last {
padding: 0;
}
.demo-pagination .last .block {
padding: 30px 24px;
border-bottom: solid 1px #EFF2F6;
&:last-child {
border-bottom: none;
}
}
.demo-pagination .last .demonstration {
font-size: 14px;
color: #8492a6;
line-height: 44px;
}
.demo-pagination .last .demonstration + .el-pagination {
float: right;
width: 70%;
margin: 5px 20px 0 0;
}
</style>
## Pagination ## Pagination
If you have too much data to display in one page, use pagination. If you have too much data to display in one page, use pagination.

14
examples/docs/en-US/popover.md
View File

@ -1,3 +1,17 @@
<style>
.demo-box.demo-popover {
.el-popover + .el-popover {
margin-left: 10px;
}
.el-input {
width: 360px;
}
.el-button {
margin-left: 10px;
}
}
</style>
<script> <script>
export default { export default {
data() { data() {

21
examples/docs/en-US/rate.md
View File

@ -1,3 +1,24 @@
<style>
.demo-rate .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-rate .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
<script> <script>
export default { export default {
data() { data() {

6
examples/docs/en-US/select.md
View File

@ -126,6 +126,12 @@
}; };
</script> </script>
<style>
.demo-select .el-select {
width: 240px;
}
</style>
## Select ## Select
When there are plenty of options, use a drop-down menu to display and select desired ones. When there are plenty of options, use a drop-down menu to display and select desired ones.

8
examples/docs/en-US/switch.md
View File

@ -1,3 +1,11 @@
<style>
.demo-box.demo-switch {
.el-switch {
margin: 20px 20px 20px 0;
}
}
</style>
<script> <script>
export default { export default {
data() { data() {

26
examples/docs/en-US/table.md
View File

@ -278,6 +278,32 @@
}; };
</script> </script>
<style>
.el-table .info-row {
background: #c9e5f5;
}
.el-table .positive-row {
background: #e2f0e4;
}
.demo-table .name-wrapper {
display: inline-block;
}
.demo-table .demo-table-expand {
label {
width: 90px;
color: #99a9bf;
}
.el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
}
</style>
## Table ## Table
Display multiple data with similar format. You can sort, filter, compare your data in a table. Display multiple data with similar format. You can sort, filter, compare your data in a table.

23
examples/docs/en-US/tag.md
View File

@ -39,6 +39,29 @@
} }
</script> </script>
<style>
.demo-box.demo-tag {
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 24px;
line-height: 22px;
padding: 0 *;
}
.input-new-tag {
width: 78px;
margin-left: 10px;
vertical-align: bottom;
.el-input__inner {
height: 24px;
}
}
}
</style>
## Tag ## Tag
Used for marking and selection. Used for marking and selection.

8
examples/docs/en-US/time-picker.md
View File

@ -1,3 +1,11 @@
<style>
.demo-box {
.el-date-editor + .el-date-editor {
margin-left: 10px;
}
}
</style>
## TimePicker ## TimePicker
Use Time Picker for time input. Use Time Picker for time input.

9
examples/docs/en-US/transfer.md
View File

@ -1,3 +1,12 @@
<style>
.demo-transfer {
.transfer-footer {
margin-left: 20px;
padding: 6px 5px;
}
}
</style>
<script> <script>
export default { export default {
data() { data() {

15
examples/docs/en-US/transition.md
View File

@ -154,6 +154,21 @@ import Vue from 'vue'
Vue.component(CollapseTransition.name, CollapseTransition) Vue.component(CollapseTransition.name, CollapseTransition)
``` ```
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
text-align: center;
color: #fff;
padding: 40px 20px;
margin-right: 20px;
box-sizing: border-box;
}
</style>
<script> <script>
module.exports = { module.exports = {
data: () => ({ data: () => ({

22
examples/docs/en-US/tree.md
View File

@ -1,3 +1,25 @@
<style>
.demo-tree {
.leaf {
width: 20px;
background: #ddd;
}
.folder {
width: 20px;
background: #888;
}
.buttons {
margin-top: 20px;
}
.filter-tree {
margin-top: 20px;
}
}
</style>
<script> <script>
const data = [{ const data = [{
label: 'Level one 1', label: 'Level one 1',

74
examples/docs/en-US/typography.md
View File

@ -1,3 +1,77 @@
<style>
.demo-typo-box {
height: 200px;
width: 200px;
position: relative;
border: 1px solid #eaeefb;
font-size: 40px;
color: #1f2d3d;
text-align: center;
line-height: 162px;
padding-bottom: 36px;
box-sizing: border-box;
display: inline-block;
margin-right: 17px;
border-radius: 4px;
.name {
position: absolute;
bottom: 0;
width: 100%;
height: 35px;
border-top: 1px solid #eaeefb;
font-size: 14px;
color: #8492a6;
line-height: 35px;
text-align: left;
text-indent: 10px;
font-family: 'Helvetica Neue';
}
}
.demo-typo-size {
.h1 {
font-size: 20px;
}
.h2 {
font-size: 18px;
}
.h3 {
font-size: 16px;
}
.text-regular {
font-size: 14px;
}
.text-small {
font-size: 13px;
}
.text-smaller {
font-size: 12px;
}
.color-dark-light {
color: #99a9bf;
}
}
.typo-PingFang {
font-family: 'PingFang SC';
}
.typo-Hiragino {
font-family: 'Hiragino Sans GB';
}
.typo-Microsoft {
font-family: 'Microsoft YaHei';
}
/* 英文 */
.typo-Helvetica-Neue {
font-family: 'Helvetica Neue';
}
.typo-Helvetica {
font-family: 'Helvetica';
}
.typo-Arial {
font-family: 'Arial';
}
</style>
## Typography ## Typography
We create a font convention to ensure the best presentation across different platforms. We create a font convention to ensure the best presentation across different platforms.

41
examples/docs/en-US/upload.md
View File

@ -1,3 +1,44 @@
<style>
.upload-tip {
color: #8492a6;
font-size: 12px;
margin-top: 7px;
}
.demo-box {
margin-bottom: 24px;
.upload-demo {
width: 360px;
}
.avatar-uploader {
.el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
&:hover {
border-color: #20a0ff;
}
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: @width;
line-height: @height;
text-align: center;
}
.avatar {
width: 178px;
height: @width;
display: block;
}
}
}
</style>
<script> <script>
export default { export default {
data() { data() {