javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(var): alert/badge/link/message/message-box/notification/tag (#2892)

Browse Source
This commit is contained in:
云游君
2021-08-12 09:47:32 +08:00
committed by GitHub
parent c883e6c192
commit 9f76045da6
7 changed files with 32 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/theme-chalk/src/alert.scss
View File

@@ -7,10 +7,6 @@
@include b(alert) {
@include set-component-css-var('alert', $--alert);
@each $type in (success, info, warning, error) {
--el-alert-#{$type}-color: #{map.get($--colors, $type, 'light-9')};
}
width: 100%;
padding: var(--el-alert-padding);
margin: 0;
@@ -45,8 +41,10 @@
@each $type in (success, info, warning, error) {
@include m($type) {
--el-alert-background-color: #{map.get($--colors, $type, 'light-9')};
&.is-light {
background-color: var(--el-alert-#{$type}-color);
background-color: var(--el-alert-background-color);
color: var(--el-color-#{$type});
.#{$namespace}-alert__description {

11
packages/theme-chalk/src/common/var.scss
View File

@@ -1040,6 +1040,17 @@ $--link: map.merge(
$--link
);
$--link-font-color: () !default;
@each $type in $--types {
$--link-font-color: map.merge(
$--link-font-color,
(
$type: map.get($--colors, $type, 'base'),
)
) !global;
}
/* Calendar
--------------------------*/
// css3 var in packages/theme-chalk/src/calendar.scss

27
packages/theme-chalk/src/link.scss
View File

@@ -4,25 +4,8 @@
@import 'mixins/var';
@import 'common/var';
$types: primary, success, warning, danger, info;
$--link-font-color: () !default;
@each $type in $types {
$--link-font-color: map.merge(
$--link-font-color,
(
$type: map.get($--colors, $type, 'base'),
)
) !global;
}
@include b(link) {
@include set-component-css-var('link', $--link);
@each $type in $types {
--el-link-#{$type}-font-color: var(--el-color-#{$type});
}
}
@include b(link) {
@@ -74,21 +57,23 @@ $--link-font-color: () !default;
}
}
@each $type in $types {
@each $type in $--types {
--el-link-font-color: var(--el-color-#{$type});
&.#{$namespace}-link--#{$type} {
color: var(--el-link-#{$type}-font-color);
color: var(--el-link-font-color);
&:hover {
color: mix(map.get($--link-font-color, $type), $--color-white, 80%);
}
&:after {
border-color: var(--el-link-#{$type}-font-color);
border-color: var(--el-link-font-color);
}
@include when(disabled) {
color: mix(map.get($--link-font-color, $type), $--color-white, 50%);
}
@include when(underline) {
&:hover:after {
border-color: var(--el-link-#{$type}-font-color);
border-color: var(--el-link-font-color);
}
}
}

7
packages/theme-chalk/src/message-box.scss
View File

@@ -10,10 +10,6 @@
@include b(message-box) {
@include set-component-css-var('messagebox', $--messagebox);
@each $type in (success, info, warning, error) {
--el-messagebox-#{$type}-color: var(--el-color-#{$type});
}
}
@include b(message-box) {
@@ -117,7 +113,8 @@
@each $type in (success, info, warning, error) {
&.#{$namespace}-icon-#{$type} {
color: var(--el-messagebox-#{$type}-color);
--el-messagebox-color: var(--el-color-#{$type});
color: var(--el-messagebox-color);
}
}
}

11
packages/theme-chalk/src/message.scss
View File

@@ -6,10 +6,6 @@
@include b(message) {
@include set-component-css-var('message', $--message);
@each $type in (success, info, warning, error) {
--el-message-#{$type}-font-color: var(--el-color-#{$type});
}
}
@include b(message) {
@@ -57,8 +53,10 @@
background-color: map.get($--colors, $type, 'light-9');
border-color: map.get($--colors, $type, 'light-8');
--el-message-font-color: var(--el-color-#{$type});
.#{$namespace}-message__content {
color: var(--el-message-#{$type}-font-color);
color: var(--el-message-font-color);
}
}
}
@@ -95,7 +93,8 @@
@each $type in (success, info, warning, error) {
& .#{$namespace}-icon-#{$type} {
color: var(--el-message-#{$type}-font-color);
--el-message-font-color: var(--el-color-#{$type});
color: var(--el-message-font-color);
}
}
}

8
packages/theme-chalk/src/notification.scss
View File

@@ -4,10 +4,6 @@
@include b(notification) {
@include set-component-css-var('notification', $--notification);
@each $type in (success, info, warning, error) {
--el-notification-#{$type}-icon-color: var(--el-color-#{$type});
}
}
@include b(notification) {
@@ -81,8 +77,10 @@
}
@each $type in (success, info, warning, error) {
--el-notification-icon-color: var(--el-color-#{$type});
.#{$namespace}-icon-#{$type} {
color: var(--el-notification-#{$type}-icon-color);
color: var(--el-notification-icon-color);
}
}
}

7
packages/theme-chalk/src/result.scss
View File

@@ -6,10 +6,6 @@ $types: success, warning, danger, info, error;
@include b(result) {
@include set-component-css-var('result', $--result);
@each $type in $types {
--el-result-#{$type}-color: var(--el-color-#{$type});
}
}
@include b(result) {
@@ -56,7 +52,8 @@ $types: success, warning, danger, info, error;
@each $type in $types {
.icon-#{$type} {
fill: var(--el-result-#{$type}-color);
--el-result-color: var(--el-color-#{$type});
fill: var(--el-result-color);
}
}
}