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
	
	 Leopoldthecoder
						Leopoldthecoder