naive-ui/styles/Empty.scss

52 lines
1.3 KiB
SCSS
Raw Normal View History

@import "./mixins/mixins.scss";
2020-03-20 19:33:47 +08:00
@mixin empty-size-mixin($size) {
@include m($size + '-size') {
font-size: map-get($--n-empty-font-size, $size);
@include e(icon) {
width: map-get($--n-empty-icon-size, $size);
height: map-get($--n-empty-icon-size, $size);
font-size: map-get($--n-empty-icon-size, $size);
line-height: map-get($--n-empty-icon-size, $size);
}
}
}
2019-11-26 15:26:28 +08:00
@include themes-mixin {
@include b(empty) {
2019-11-26 15:26:28 +08:00
@include once {
2020-03-20 19:33:47 +08:00
@include empty-size-mixin('small');
@include empty-size-mixin('medium');
@include empty-size-mixin('large');
@include empty-size-mixin('huge');
2019-11-26 15:26:28 +08:00
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
2019-11-26 15:26:28 +08:00
}
@include e(icon) {
2019-11-26 15:26:28 +08:00
@include once {
transition: fill .3s $--n-ease-in-out-cubic-bezier;
2019-11-26 15:26:28 +08:00
}
2020-02-07 20:04:20 +08:00
@include b(icon) {
2020-02-20 13:22:48 +08:00
fill: $--empty-icon-color;
stroke: $--empty-icon-color;
2020-02-07 20:04:20 +08:00
}
}
@include e(description) {
2019-11-26 15:26:28 +08:00
@include once {
margin-top: 4px;
transition: color .3s $--n-ease-in-out-cubic-bezier;
2019-11-26 15:26:28 +08:00
}
color: $--empty-text-color;
}
@include e(extra) {
2019-11-26 15:26:28 +08:00
@include once {
text-align: center;
transition: color .3s $--n-ease-in-out-cubic-bezier;
2019-11-26 15:26:28 +08:00
margin-top: 16px;
}
color: $--empty-extra-text-color;
}
}
}