mirror of https://github.com/ElemeFE/element
				
				
				
			i18n: remove redundant styles
							parent
							
								
									2ff91352be
								
							
						
					
					
						commit
						7af57c84c5
					
				| 
						 | 
				
			
			@ -212,7 +212,7 @@
 | 
			
		|||
      },
 | 
			
		||||
 | 
			
		||||
      blockClass() {
 | 
			
		||||
        return `demo-${ this.$router.currentRoute.path.split('/').pop() }`;
 | 
			
		||||
        return `demo-${ this.lang } demo-${ this.$router.currentRoute.path.split('/').pop() }`;
 | 
			
		||||
      },
 | 
			
		||||
 | 
			
		||||
      iconClass() {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -7,15 +7,6 @@
 | 
			
		|||
    }
 | 
			
		||||
  }
 | 
			
		||||
</script>
 | 
			
		||||
<style>
 | 
			
		||||
  .demo-box.demo-alert .el-alert {
 | 
			
		||||
    margin: 20px 0 0;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .demo-box.demo-alert .el-alert:first-child {
 | 
			
		||||
    margin: 0;
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
## Alert
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,9 +1,3 @@
 | 
			
		|||
<style>
 | 
			
		||||
  .demo-badge.demo-box .el-dropdown {
 | 
			
		||||
    vertical-align: middle;
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
## Badge
 | 
			
		||||
 | 
			
		||||
A number or status mark on buttons and icons.
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -22,47 +22,6 @@
 | 
			
		|||
    }
 | 
			
		||||
  }
 | 
			
		||||
</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;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .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
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -13,18 +13,6 @@
 | 
			
		|||
  };
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
  .demo-box.demo-checkbox {
 | 
			
		||||
    .checkbox {
 | 
			
		||||
      margin-right: 5px;
 | 
			
		||||
 | 
			
		||||
      & + .checkbox {
 | 
			
		||||
        margin-left: 10px;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
## Checkbox
 | 
			
		||||
 | 
			
		||||
A group of options for multiple choices.
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,89 +1,3 @@
 | 
			
		|||
<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
 | 
			
		||||
Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -63,30 +63,6 @@
 | 
			
		|||
  };
 | 
			
		||||
</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
 | 
			
		||||
 | 
			
		||||
Use Date Picker for date input.
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -72,30 +72,6 @@
 | 
			
		|||
  };
 | 
			
		||||
</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
 | 
			
		||||
 | 
			
		||||
Select date and time in one picker.
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -36,7 +36,7 @@
 | 
			
		|||
          resource: '',
 | 
			
		||||
          desc: ''
 | 
			
		||||
        },
 | 
			
		||||
        formLabelWidth: '80px'
 | 
			
		||||
        formLabelWidth: '120px'
 | 
			
		||||
      };
 | 
			
		||||
    },
 | 
			
		||||
    methods: {
 | 
			
		||||
| 
						 | 
				
			
			@ -47,25 +47,6 @@
 | 
			
		|||
  };
 | 
			
		||||
</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;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
## Dialog
 | 
			
		||||
 | 
			
		||||
Informs users while preserving the current page state.
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,43 +1,3 @@
 | 
			
		|||
<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>
 | 
			
		||||
  export default {
 | 
			
		||||
    methods: {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -200,7 +200,7 @@
 | 
			
		|||
</script>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
  .demo-form {
 | 
			
		||||
  .demo-form.demo-en-US {
 | 
			
		||||
    .el-select .el-input {
 | 
			
		||||
      width: 360px;
 | 
			
		||||
    }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -9,61 +9,6 @@
 | 
			
		|||
    }
 | 
			
		||||
  }
 | 
			
		||||
</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 
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -14,13 +14,7 @@
 | 
			
		|||
    }
 | 
			
		||||
  };
 | 
			
		||||
</script>
 | 
			
		||||
<style>
 | 
			
		||||
  .demo-box.demo-input-number {
 | 
			
		||||
    .el-input-number + .el-input-number {
 | 
			
		||||
      margin-left: 10px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
## InputNumber
 | 
			
		||||
 | 
			
		||||
Input numerical values with a customizable range.
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,34 +1,3 @@
 | 
			
		|||
<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
 | 
			
		||||
 | 
			
		||||
Quickly and easily create layouts with the basic 24-column.
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,9 +1,3 @@
 | 
			
		|||
<style>
 | 
			
		||||
  .demo-loading .el-table {
 | 
			
		||||
    border: none;
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
  export default {
 | 
			
		||||
    data() {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,33 +1,3 @@
 | 
			
		|||
<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>
 | 
			
		||||
  export default {
 | 
			
		||||
    methods: {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -57,14 +57,6 @@
 | 
			
		|||
  };
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
  .demo-box.demo-message {
 | 
			
		||||
    .el-button + .el-button {
 | 
			
		||||
      margin-left: 10px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
## Message
 | 
			
		||||
 | 
			
		||||
Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -53,14 +53,6 @@
 | 
			
		|||
  };
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
  .demo-box.demo-notification {
 | 
			
		||||
    .el-button + .el-button {
 | 
			
		||||
      margin-left: 10px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
## Notification 
 | 
			
		||||
 | 
			
		||||
Displays a global notification message at the upper right corner of the page.
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -128,56 +128,6 @@ Add more modules based on your scenario.
 | 
			
		|||
    }
 | 
			
		||||
  }
 | 
			
		||||
</script>
 | 
			
		||||
<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>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### Attributes
 | 
			
		||||
| Attribute      | Description          | Type      | Accepted Values       | Default  |
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -99,20 +99,6 @@
 | 
			
		|||
  };
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
  .demo-box.demo-popover {
 | 
			
		||||
    .el-popover + .el-popover {
 | 
			
		||||
      margin-left: 10px;
 | 
			
		||||
    }
 | 
			
		||||
    .el-input {
 | 
			
		||||
      width: 360px;
 | 
			
		||||
    }
 | 
			
		||||
    .el-button {
 | 
			
		||||
      margin-left: 10px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
## Popover
 | 
			
		||||
 | 
			
		||||
### Basic usage
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,11 +1,3 @@
 | 
			
		|||
<style>
 | 
			
		||||
  .demo-box {
 | 
			
		||||
    .el-date-editor + .el-date-editor {
 | 
			
		||||
      margin-left: 10px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
## TimePicker
 | 
			
		||||
 | 
			
		||||
Use Time Picker for time input.
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -200,7 +200,7 @@
 | 
			
		|||
</script>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
  .demo-form {
 | 
			
		||||
  .demo-form.demo-zh-CN {
 | 
			
		||||
    .el-select .el-input {
 | 
			
		||||
      width: 360px;
 | 
			
		||||
    }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -57,14 +57,6 @@
 | 
			
		|||
  };
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
  .demo-box.demo-message {
 | 
			
		||||
    .el-button + .el-button {
 | 
			
		||||
      margin-left: 10px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
## Message 消息提示
 | 
			
		||||
 | 
			
		||||
常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -53,14 +53,6 @@
 | 
			
		|||
  };
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
  .demo-box.demo-notification {
 | 
			
		||||
    .el-button + .el-button {
 | 
			
		||||
      margin-left: 10px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
## Notification 通知
 | 
			
		||||
 | 
			
		||||
悬浮出现在页面右上角,显示全局的通知提醒消息。
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue