mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-13 11:34:02 +08:00
6f9ce3accb
* add avatar component * 1. add test 2. add types 3. refine doc 4. add img attr * add props in types and doc * refine how image fit its container * fix doc * refine doc * change default background color * remote style demo from doc * add theme * add demo on theme preview and change var name
63 lines
994 B
SCSS
63 lines
994 B
SCSS
.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;
|
|
}
|
|
}
|
|
}
|