Ivan/element-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
Ivan
2021-06-07 11:56:04 +08:00
commit c3c9fee2fb
1071 changed files with 195655 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
examples/demo-styles/alert.scss Normal file
View File

@@ -0,0 +1,7 @@
.demo-block.demo-alert .el-alert {
margin: 20px 0 0;
}
.demo-block.demo-alert .el-alert:first-child {
margin: 0;
}

62
examples/demo-styles/avatar.scss Normal file
View File

@@ -0,0 +1,62 @@
.demo-avatar {
&.demo-basic {
text-align: center;
.demo-basic--circle, .demo-basic--square {
display: flex;
justify-content: space-between;
align-items: center;
.block {
flex: 1;
}
.block:not(:last-child) {
border-right: 1px solid rgba(224, 230, 237, 0.5);
}
}
}
.sub-title {
margin-bottom: 10px;
font-size: 14px;
color: #8492a6;
}
.el-col:not(:last-child) {
border-right: 1px solid rgba(224,230,237,.5);
}
.demo-type {
display: flex;
>div {
flex: 1;
text-align: center;
}
>div:not(:last-child) {
border-right: 1px solid rgba(224,230,237,.5);
}
}
.demo-fit {
display: flex;
text-align: center;
justify-content: space-between;
.block {
flex: 1;
display: flex;
flex-direction: column;
flex-grow: 0;
}
.title {
margin-bottom: 10px;
font-size: 14px;
color: #8492a6;
}
}
}

19
examples/demo-styles/badge.scss Normal file
View File

@@ -0,0 +1,19 @@
.demo-badge.demo-block .el-dropdown {
vertical-align: middle;
}
.demo-badge.demo-block {
.share-button {
width: 36px;
padding: 10px;
}
.mark {
margin-top: 8px;
line-height: 1;
float: right;
}
.item {
margin-right: 40px;
}
}

44
examples/demo-styles/border.scss Normal file
View File

@@ -0,0 +1,44 @@
.demo-border .text {
width: 15%;
}
.demo-border .line {
width: 70%;
}
.demo-border .line div {
width: 100%;
height: 0;
border-top: 1px solid #eee;
}
.demo-border .line .dashed {
border-top: 2px dashed #eee;
}
.demo-shadow {
height: 100px;
width: 50%;
border: 1px solid #eee;
}
.demo-shadow-text {
line-height: 50px;
color: #666;
font-size: 14px;
}
.demo-radius .title {
color: #666;
font-size: 18px;
margin: 10px 0;
}
.demo-radius .value {
color: #333;
font-size: 16px;
margin: 10px 0;
}
.demo-radius .radius {
height: 60px;
width: 70%;
border: 1px solid #d7dae2;
border-radius: 0;
margin-top: 20px;
}
.demo-radius .radius-30 {
border-radius: 30px;
}

21
examples/demo-styles/button.scss Normal file
View File

@@ -0,0 +1,21 @@
.demo-block.demo-button {
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-button + .el-button {
margin-left: 10px;
}
.el-button-group {
.el-button + .el-button {
margin-left: 0;
}
& + .el-button-group {
margin-left: 10px;
}
}
}

5
examples/demo-styles/calendar.scss Normal file
View File

@@ -0,0 +1,5 @@
.demo-calendar.demo-block {
.is-selected {
color: #1989FA;
}
}

33
examples/demo-styles/card.scss Normal file
View File

@@ -0,0 +1,33 @@
.demo-block.demo-card {
.text {
font-size: 14px;
}
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.item {
margin-bottom: 18px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
display: block;
}
.box-card {
width: 480px;
}
}

46
examples/demo-styles/carousel.scss Normal file
View File

@@ -0,0 +1,46 @@
.demo-carousel .block {
padding: 30px;
text-align: center;
border-right: solid 1px #eff2f6;
display: inline-block;
width: 49%;
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;
&.small {
font-size: 14px;
line-height: 150px;
}
&.medium {
font-size: 14px;
line-height: 200px;
}
}
&:nth-child(2n) {
background-color: #99a9bf;
}
&:nth-child(2n + 1) {
background-color: #d3dce6;
}
}

30
examples/demo-styles/cascader.scss Normal file
View File

@@ -0,0 +1,30 @@
.demo-cascader {
.el-cascader {
width: 222px;
}
}
.demo-cascader-size {
.el-cascader {
vertical-align: top;
margin-right: 15px;
}
}
.demo-cascader .source > div {
display: flex;
}
.demo-cascader .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #eff2f6;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-cascader .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}

7
examples/demo-styles/collapse.scss Normal file
View File

@@ -0,0 +1,7 @@
.demo-collapse {
.el-collapse-item__header {
.header-icon {
margin-left: 5px;
}
}
}

20
examples/demo-styles/color-picker.scss Normal file
View File

@@ -0,0 +1,20 @@
.demo-color-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #eff2f6;
display: inline-block;
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;
}
.demo-color-picker .el-color-picker + .el-color-picker {
margin-left: 20px;
}

72
examples/demo-styles/color.scss Normal file
View File

@@ -0,0 +1,72 @@
.demo-color-box {
position: relative;
border-radius: 4px;
padding: 20px;
margin: 5px 0;
height: 114px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
& .value {
font-size: 12px;
opacity: 0.69;
line-height: 24px;
}
}
.demo-color-box-other {
height: 74px;
margin: 10px 0 !important;
border-radius: 4px 4px 4px 4px !important;
padding: 15px 20px;
}
.demo-color-box-group {
.demo-color-box {
border-radius: 0;
margin: 0;
}
.demo-color-box:first-child {
border-radius: 4px 4px 0 0;
}
.demo-color-box:last-child {
border-radius: 0 0 4px 4px;
}
}
.bg-color-sub {
width: 100%;
height: 40px;
left: 0;
bottom: 0;
position: absolute;
border-radius: 0 0 4px 4px;
}
.bg-blue-sub-item {
width: 11.1111111%;
height: 100%;
display: inline-block;
}
.bg-blue-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-success-sub-item {
width: 50%;
height: 100%;
display: inline-block;
}
.bg-success-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-success-sub-item:last-child {
border-radius: 0 0 4px 0;
}
.bg-transparent {
border: 1px solid #fcc3c3;
color: #303133;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%, auto;
}
.demo-color-box-lite {
color: #303133;
}

43
examples/demo-styles/container.scss Normal file
View File

@@ -0,0 +1,43 @@
.el-header,
.el-footer {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
#chang-jian-ye-mian-bu-ju + .demo-container {
.el-header,
.el-footer {
text-align: center;
}
.el-aside {
background-color: #d3dce6;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
line-height: 160px;
}
& > .source > .el-container {
margin-bottom: 40px;
&:nth-child(5) .el-aside,
&:nth-child(6) .el-aside {
line-height: 260px;
}
&:nth-child(7) .el-aside {
line-height: 320px;
}
}
}

36
examples/demo-styles/date-picker.scss Normal file
View File

@@ -0,0 +1,36 @@
.demo-block.demo-date-picker .source > div {
padding: 0;
display: flex;
flex-wrap: wrap;
}
.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 .container {
flex: 1;
border-right: solid 1px #eff2f6;
.block {
border-right: none;
&:last-child {
border-top: solid 1px #eff2f6;
}
}
&:last-child {
border-right: none;
}
}
.demo-date-picker .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}

21
examples/demo-styles/datetime-picker.scss Normal file
View File

@@ -0,0 +1,21 @@
.demo-block.demo-datetime-picker .source > div {
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;
}

20
examples/demo-styles/dialog.scss Normal file
View File

@@ -0,0 +1,20 @@
.demo-block.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;
}
}

9
examples/demo-styles/divider.scss Normal file
View File

@@ -0,0 +1,9 @@
.demo-divider-container-1 {
display: inline-block;
width: 33%;
}
.demo-divider-container-2 {
display: inline-block;
width: 50%;
}

21
examples/demo-styles/drawer.scss Normal file
View File

@@ -0,0 +1,21 @@
.demo-drawer {
&__content {
display: flex;
flex-direction: column;
height: 100%;
form {
flex: 1;
}
}
&__footer {
display: flex;
button {
flex: 1;
}
}
}
.el-drawer__body {
padding: 20px;
}

37
examples/demo-styles/dropdown.scss Normal file
View File

@@ -0,0 +1,37 @@
.demo-block {
.el-dropdown {
vertical-align: top;
& + .el-dropdown {
margin-left: 15px;
}
}
.el-dropdown-link {
cursor: pointer;
color: #409eff;
}
.el-icon-arrow-down {
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;
}

73
examples/demo-styles/form.scss Normal file
View File

@@ -0,0 +1,73 @@
.demo-form {
.el-select .el-input {
width: 380px;
}
.el-form {
width: 460px;
}
.line {
text-align: center;
}
.el-checkbox-group {
width: 320px;
margin: 0;
padding: 0;
list-style: none;
&:after,
&:before {
content: " ";
display: table;
}
&:after {
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.el-checkbox {
float: left;
width: 160px;
padding-right: 20px;
margin: 0;
padding: 0;
+ .el-checkbox {
margin-left: 0;
}
}
}
.demo-form-normal {
width: 460px;
}
.demo-form-inline {
width: auto;
.el-input {
width: 150px;
}
> * {
margin-right: 10px;
}
}
.demo-ruleForm {
width: 460px;
.el-select .el-input {
width: 360px;
}
}
.demo-dynamic {
.el-input {
margin-right: 10px;
width: 270px;
vertical-align: top;
}
}
.fr {
float: right;
}
}

8
examples/demo-styles/i18n.scss Normal file
View File

@@ -0,0 +1,8 @@
ul.language-list {
color: #5e6d82;
font-size: 14px;
padding-left: 20px;
li {
line-height: 1.8;
}
}

69
examples/demo-styles/icon.scss Normal file
View File

@@ -0,0 +1,69 @@
.demo-icon .source > div > i {
color: #606266;
margin: 0 20px;
font-size: 1.5em;
vertical-align: middle;
}
.demo-icon .source button {
margin: 0 20px;
}
.page-component .content > ul.icon-list {
overflow: hidden;
list-style: none;
padding: 0!important;
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;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
margin-right: -1px;
margin-bottom: -1px;
&::after {
display: inline-block;
content: "";
height: 100%;
vertical-align: middle;
}
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;
transition: color 0.15s linear;
}
i {
display: block;
font-size: 32px;
margin-bottom: 15px;
color: #606266;
transition: color 0.15s linear;
}
.icon-name {
display: inline-block;
padding: 0 3px;
height: 1em;
}
&:hover {
span,
i {
color: rgb(92, 182, 255);
}
}
}

78
examples/demo-styles/image.scss Normal file
View File

@@ -0,0 +1,78 @@
@keyframes dot {
0% { width: 0; margin-right: 1em; }
100% { width: 1em; margin-right: 0; }
}
.demo-image {
.block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #eff2f6;
display: inline-block;
width: 20%;
box-sizing: border-box;
vertical-align: top;
&:last-child {
border-right: none;
}
}
.demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
}
.demo-image__placeholder, .demo-image__error {
@extend .demo-image;
.block {
width: 49%;
}
.el-image {
width: 300px;
height: 200px;
}
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
font-size: 14px;
}
}
.demo-image__placeholder {
.dot {
animation: dot 2s infinite steps(3, start);
overflow: hidden;
}
}
.demo-image__error {
.image-slot {
font-size: 30px;
}
}
.demo-image__lazy {
height: 400px;
overflow-y: auto;
.el-image {
display: block;
min-height: 200px;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
}

47
examples/demo-styles/index.scss Normal file
View File

@@ -0,0 +1,47 @@
@import "./alert.scss";
@import "./badge.scss";
@import "./border.scss";
@import "./button.scss";
@import "./calendar.scss";
@import "./card.scss";
@import "./carousel.scss";
@import "./cascader.scss";
@import "./collapse.scss";
@import "./color-picker.scss";
@import "./color.scss";
@import "./container.scss";
@import "./date-picker.scss";
@import "./datetime-picker.scss";
@import "./dialog.scss";
@import "./dropdown.scss";
@import "./form.scss";
@import "./i18n.scss";
@import "./icon.scss";
@import "./input-number.scss";
@import "./input.scss";
@import "./layout.scss";
@import "./loading.scss";
@import "./menu.scss";
@import "./pagination.scss";
@import "./popover.scss";
@import "./progress.scss";
@import "./rate.scss";
@import "./select.scss";
@import "./slider.scss";
@import "./switch.scss";
@import "./table.scss";
@import "./tag.scss";
@import "./time-picker.scss";
@import "./timeline.scss";
@import "./tooltip.scss";
@import "./transition.scss";
@import "./transfer.scss";
@import "./tree.scss";
@import "./typography.scss";
@import "./upload.scss";
@import "./divider.scss";
@import "./image.scss";
@import "./infinite-scroll.scss";
@import "./avatar.scss";
@import "./drawer.scss";

46
examples/demo-styles/infinite-scroll.scss Normal file
View File

@@ -0,0 +1,46 @@
.infinite-list {
height: 300px;
padding: 0;
margin: 0;
list-style: none;
.infinite-list-item {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: #e8f3fe;
margin: 10px;
color: lighten(#1989fa, 20%);
& + .list-item {
margin-top: 10px
}
}
}
.infinite-list-wrapper {
height: 300px;
text-align: center;
.list{
padding: 0;
margin: 0;
list-style: none;
}
.list-item{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: #fff6f6;
color: #ff8484;
& + .list-item {
margin-top: 10px
}
}
}

5
examples/demo-styles/input-number.scss Normal file
View File

@@ -0,0 +1,5 @@
.demo-block.demo-input-number {
.el-input-number + .el-input-number {
margin-left: 10px;
}
}

65
examples/demo-styles/input.scss Normal file
View File

@@ -0,0 +1,65 @@
.demo-input {
.el-select .el-input {
width: 130px;
}
.el-input {
width: 180px;
}
.el-textarea {
width: 414px;
}
.el-input-group {
width: 100%;
}
.demo-input-size {
.el-input {
vertical-align: top;
margin: 0 10px 10px 0;
}
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.demo-autocomplete {
text-align: center;
.sub-title {
margin-bottom: 10px;
font-size: 14px;
color: #8492a6;
}
.el-col:not(:last-child) {
border-right: 1px solid rgba(224, 230, 237, 0.5);
}
.el-autocomplete {
text-align: left;
}
}
}
.el-autocomplete-suggestion.my-autocomplete {
li {
line-height: normal;
padding-top: 7px;
padding-bottom: 7px;
.name {
text-overflow: ellipsis;
overflow: hidden;
}
.addr {
font-size: 12px;
color: #b4b4b4;
}
.highlighted .addr {
color: #ddd;
}
}
}
.demo-input-suffix {
margin-bottom: 15px;
.el-input {
margin-right: 15px;
}
}

28
examples/demo-styles/layout.scss Normal file
View File

@@ -0,0 +1,28 @@
.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;
}
}

3
examples/demo-styles/loading.scss Normal file
View File

@@ -0,0 +1,3 @@
.demo-loading .el-table {
border: none;
}

27
examples/demo-styles/menu.scss Normal file
View File

@@ -0,0 +1,27 @@
.demo-block.demo-menu {
.el-menu-demo {
padding-left: 55px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 240px;
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;
}
}
}

46
examples/demo-styles/pagination.scss Normal file
View File

@@ -0,0 +1,46 @@
.demo-pagination .source.first {
padding: 0;
}
.demo-pagination .first .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #eff2f6;
display: inline-block;
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 {
width: 70%;
margin: 5px 20px 0 0;
}

11
examples/demo-styles/popover.scss Normal file
View File

@@ -0,0 +1,11 @@
.demo-block.demo-popover {
.el-popover + .el-popover {
margin-left: 10px;
}
.el-input {
width: 360px;
}
.el-button {
margin-left: 10px;
}
}

9
examples/demo-styles/progress.scss Normal file
View File

@@ -0,0 +1,9 @@
.demo-block.demo-progress {
.el-progress--line {
margin-bottom: 15px;
width: 350px;
}
.el-progress--circle {
margin-right: 15px;
}
}

18
examples/demo-styles/rate.scss Normal file
View File

@@ -0,0 +1,18 @@
.demo-rate .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #eff2f6;
display: inline-block;
width: 49%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-rate .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}

3
examples/demo-styles/select.scss Normal file
View File

@@ -0,0 +1,3 @@
.demo-select .el-select {
width: 240px;
}

24
examples/demo-styles/slider.scss Normal file
View File

@@ -0,0 +1,24 @@
.demo-block.demo-slider .source {
padding: 0;
}
.demo-block.demo-slider .block {
padding: 30px 24px;
overflow: hidden;
border-bottom: solid 1px #eff2f6;
&:last-child {
border-bottom: none;
}
}
.demo-block.demo-slider .demonstration {
font-size: 14px;
color: #8492a6;
line-height: 44px;
}
.demo-block.demo-slider .demonstration + .el-slider {
float: right;
width: 70%;
margin-right: 20px;
}

5
examples/demo-styles/switch.scss Normal file
View File

@@ -0,0 +1,5 @@
.demo-block.demo-switch {
.el-switch {
margin: 20px 20px 20px 0;
}
}

23
examples/demo-styles/table.scss Normal file
View File

@@ -0,0 +1,23 @@
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.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%;
}
}

34
examples/demo-styles/tag.scss Normal file
View File

@@ -0,0 +1,34 @@
.demo-block.demo-tag {
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
.tag-group {
display: flex;
align-items: center;
&__title {
width: 45px;
font-size: 14px;
color: #606266;
}
&+.tag-group {
margin-top: 10px;
}
}
}

5
examples/demo-styles/time-picker.scss Normal file
View File

@@ -0,0 +1,5 @@
.demo-block {
.el-date-editor + .el-date-editor {
margin-left: 10px;
}
}

6
examples/demo-styles/timeline.scss Normal file
View File

@@ -0,0 +1,6 @@
.demo-timeline .source .radio {
margin-bottom: 20px;
}
.demo-timeline .source .radio .el-radio-group {
margin-left: 20px;
}

39
examples/demo-styles/tooltip.scss Normal file
View File

@@ -0,0 +1,39 @@
.demo-tooltip {
.el-tooltip + .el-tooltip {
margin-left: 15px;
}
.box {
width: 400px;
.top {
text-align: center;
}
.left {
float: left;
width: 60px;
}
.right {
float: right;
width: 60px;
}
.bottom {
clear: both;
text-align: center;
}
.item {
margin: 4px;
}
.left .el-tooltip__popper,
.right .el-tooltip__popper {
padding: 8px 10px;
}
.el-tooltip {
margin-left: 0;
}
}
}

6
examples/demo-styles/transfer.scss Normal file
View File

@@ -0,0 +1,6 @@
.demo-transfer {
.transfer-footer {
margin-left: 15px;
padding: 6px 5px;
}
}

14
examples/demo-styles/transition.scss Normal file
View File

@@ -0,0 +1,14 @@
.demo-transition {
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
margin-right: 20px;
box-sizing: border-box;
}
}

48
examples/demo-styles/tree.scss Normal file
View File

@@ -0,0 +1,48 @@
.demo-tree {
.leaf {
width: 20px;
background: #ddd;
}
.folder {
width: 20px;
background: #888;
}
.buttons {
margin-top: 20px;
}
.filter-tree {
margin-top: 20px;
}
.custom-tree-container {
display: flex;
margin: -24px;
}
.block {
flex: 1;
padding: 8px 24px 24px;
&:first-child {
border-right: solid 1px #eff2f6;
}
> p {
text-align: center;
margin: 0;
line-height: 4;
}
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
}

30
examples/demo-styles/typography.scss Normal file
View File

@@ -0,0 +1,30 @@
.demo-typo-size {
.color-dark-light {
color: #99a9bf;
}
}
.demo-term-box img {
width: 24%;
margin: 0 4% 20px 0;
}
.lineH-left {
display: inline-block;
height: 80px;
}
.lineH-right {
display: inline-block;
list-style: none;
padding: 0 0 0 90px;
margin: 0;
vertical-align: top;
}
.lineH-right li {
font-size: 13px;
color: #666;
height: 20px;
line-height: 20px;
}
.lineH-right li span {
padding-left: 40px;
}

39
examples/demo-styles/upload.scss Normal file
View File

@@ -0,0 +1,39 @@
.upload-tip {
color: #8492a6;
font-size: 12px;
margin-top: 7px;
}
.demo-block {
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,
&:focus {
border-color: #409eff;
}
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
}
}