element-plus/website/demo-styles/image.scss
2021-02-04 16:29:23 +08:00

79 lines
1.2 KiB
SCSS

@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%;
}
.#{$namespace}-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;
.#{$namespace}-image {
display: block;
min-height: 200px;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
}