test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 20:27:44 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(link): migrate css var (#2622)

Browse Source
This commit is contained in:
云游君 2021-07-23 17:06:53 +08:00 committed by GitHub
parent 60c13b6f6b
commit c4d1f547eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -687,26 +687,8 @@ $--backtop-hover-background-color: map.get(
/* Link
--------------------------*/
/// fontSize||Font|1
$--link-font-size: map.get($--font-size, 'base') !default;
/// fontWeight||Font|1
$--link-font-weight: $--font-weight-primary !default;
/// color||Color|0
$--link-default-font-color: $--color-text-regular !default;
/// color||Color|0
$--link-default-active-color: $--color-primary !default;
/// color||Color|0
$--link-disabled-font-color: $--color-text-placeholder !default;
/// color||Color|0
$--link-primary-font-color: $--color-primary !default;
/// color||Color|0
$--link-success-font-color: $--color-success !default;
/// color||Color|0
$--link-warning-font-color: $--color-warning !default;
/// color||Color|0
$--link-danger-font-color: $--color-danger !default;
/// color||Color|0
$--link-info-font-color: $--color-info !default;
// refactor with css3 var
// See packages/theme-chalk/src/link.scss
/* Calendar
--------------------------*/

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

@ -1,13 +1,32 @@
@use "sass:map";
@import 'mixins/mixins';
@import 'common/var';
$typeMap: (
primary: $--link-primary-font-color,
danger: $--link-danger-font-color,
success: $--link-success-font-color,
warning: $--link-warning-font-color,
info: $--link-info-font-color,
);
$types: primary, success, warning, danger, info;
:root {
--el-link-font-size: var(--el-font-size-base);
--el-link-font-weight: var(--el-font-weight-primary);
--el-link-default-font-color: var(--el-color-text-regular);
--el-link-default-active-color: var(--el-color-primary);
--el-link-disabled-font-color: var(--el-color-text-placeholder);
@each $type in $types {
--el-link-#{$type}-font-color: var(--el-color-#{$type});
}
}
$--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) {
display: inline-flex;
@ -20,8 +39,8 @@ $typeMap: (
outline: none;
cursor: pointer;
padding: 0;
font-size: $--link-font-size;
font-weight: $--link-font-weight;
font-size: var(--el-link-font-size);
font-weight: var(--el-link-font-weight);
@include when(underline) {
&:hover:after {
@ -31,7 +50,7 @@ $typeMap: (
right: 0;
height: 0;
bottom: 0;
border-bottom: 1px solid $--link-default-active-color;
border-bottom: 1px solid var(--el-link-default-active-color);
}
}
@ -46,33 +65,33 @@ $typeMap: (
}
&.#{$namespace}-link--default {
color: $--link-default-font-color;
color: var(--el-link-default-font-color);
&:hover {
color: $--link-default-active-color;
color: var(--el-link-default-active-color);
}
&:after {
border-color: $--link-default-active-color;
border-color: var(--el-link-default-active-color);
}
@include when(disabled) {
color: $--link-disabled-font-color;
color: var(--el-link-disabled-font-color);
}
}
@each $type, $primaryColor in $typeMap {
@each $type in $types {
&.#{$namespace}-link--#{$type} {
color: $primaryColor;
color: var(--el-link-#{$type}-font-color);
&:hover {
color: mix($primaryColor, $--color-white, 80%);
color: mix(map.get($--link-font-color, $type), $--color-white, 80%);
}
&:after {
border-color: $primaryColor;
border-color: var(--el-link-#{$type}-font-color);
}
@include when(disabled) {
color: mix($primaryColor, $--color-white, 50%);
color: mix(map.get($--link-font-color, $type), $--color-white, 50%);
}
@include when(underline) {
&:hover:after {
border-color: $primaryColor;
border-color: var(--el-link-#{$type}-font-color);
}
}
}