mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(result): css clean

Browse Source
This commit is contained in:
07akioni 2019-12-09 17:55:21 +08:00
parent 5f523c302d
commit 57295673f6
5 changed files with 67 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
styles/Result.scss
View File

@ -1,59 +1,59 @@
@import './mixins/mixins.scss';
@mixin result-status-mixin ($status){
@include e($status + '-status') {
@include b(result-icon) {
@include b(icon) {
fill: map-get($--result-icon-fill, $status);
}
}
}
}
@include themes-mixin {
@include b(result) {
font-size: 14px;
color: $--n-secondary-text-color;
transition: color .3s $default-cubic-bezier;
@include m(success-status) {
color: $--result-description-text-color;
@include result-status-mixin('success');
@include result-status-mixin('info');
@include result-status-mixin('warning');
@include result-status-mixin('error');
@include once {
font-size: 14px;
transition: color .3s $default-cubic-bezier;
@include b(result-icon) {
fill: $--success-6;
display: flex;
justify-content: center;
@include e(status-image) {
width: 80px;
height: 80px;
}
}
}
@include m(info-status) {
@include b(result-icon) {
fill: $--info-6;
@include b(result-content) {
margin-top: 24px;
}
}
@include m(warning-status) {
@include b(result-icon) {
fill: $--warning-6;
}
}
@include m(error-status) {
@include b(result-icon) {
fill: $--error-6;
}
}
@include b(result-icon) {
display: flex;
justify-content: center;
@include e(status-image) {
width: 80px;
height: 80px;
@include b(result-footer) {
margin-top: 24px;
text-align: center;
}
}
@include b(result-header) {
@include e(title) {
margin-top: 16px;
font-size: 32px;
font-weight: 700;
color: $--n-text-color;
transition: color .3s $default-cubic-bezier;
text-align: center;
@include once {
margin-top: 16px;
font-size: 32px;
font-weight: 700;
transition: color .3s $default-cubic-bezier;
text-align: center;
}
color: $--result-header-text-color;
}
@include e(description) {
margin-top: 4px;
text-align: center;
font-size: 14px;
@include once {
@include e(description) {
margin-top: 4px;
text-align: center;
font-size: 14px;
}
}
}
@include b(result-content) {
margin-top: 24px;
}
@include b(result-footer) {
margin-top: 24px;
text-align: center;
}
}
}

10
styles/themes/dark/components/Result.scss Normal file
View File

@ -0,0 +1,10 @@
@mixin setup-dark-result {
$--result-icon-fill: (
'error': $--error-6,
'success': $--success-6,
'warning': $--warning-6,
'info': $--info-6
) !global;
$--result-header-text-color: $--n-text-color !global;
$--result-description-text-color: $--n-secondary-text-color !global;
}

2
styles/themes/dark/index.scss
View File

@ -54,6 +54,7 @@
@import "components/Affix.scss";
@import "components/Avatar.scss";
@import "components/Collapse.scss";
@import "components/Result.scss";
@mixin setup-dark-theme() {
@include setup-dark-colors();
@ -137,4 +138,5 @@
@include setup-dark-affix;
@include setup-dark-avatar;
@include setup-dark-collapse;
@include setup-dark-result;
}

10
styles/themes/light/components/Result.scss Normal file
View File

@ -0,0 +1,10 @@
@mixin setup-light-result {
$--result-icon-fill: (
'error': $--error-6,
'success': $--success-6,
'warning': $--warning-6,
'info': $--info-6
) !global;
$--result-header-text-color: $--n-text-color !global;
$--result-description-text-color: $--n-secondary-text-color !global;
}

2
styles/themes/light/index.scss
View File

@ -54,6 +54,7 @@
@import "components/Affix.scss";
@import "components/Avatar.scss";
@import "components/Collapse.scss";
@import "components/Result.scss";
@mixin setup-light-theme() {
@include setup-light-colors();
@ -137,4 +138,5 @@
@include setup-light-affix;
@include setup-light-avatar;
@include setup-light-collapse;
@include setup-light-result;
}