mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-27 03:01:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(theme-chalk): [mixins] use set-css-var-value to transpile text (#6630)

Browse Source 
* fix(theme-chalk): [mixins] use set-css-var-value to transpile text

* fix(theme-chalk): [mixins] format code
This commit is contained in:
云游君 2022-03-15 10:47:00 +08:00 committed by GitHub
parent a7cab4fb52
commit 9c4f1774f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/theme-chalk/src/mixins/_var.scss
View File

@ -4,6 +4,14 @@
@use 'function' as *;
@use '../common/var' as *;
// set css var value, because we need translate value to string
// for example:
// @include set-css-var-value(('color', 'primary'), red);
// --el-color-primary: red;
@mixin set-css-var-value($name, $value) {
#{joinVarName($name)}: #{$value};
}
@mixin set-css-color-type-light($type, $i) {
#{getCssVarName('color', $type, 'light', $i)}: #{map.get(
$colors,
@ -37,8 +45,12 @@
@mixin set-css-color-rgb($type) {
$color: map.get($colors, $type, 'base');
#{getCssVarName('color', $type, 'rgb')}: #{red($color)}, #{green($color)},
#{blue($color)};
@include set-css-var-value(
('color', $type, 'rgb'),
#{red($color),
green($color),
blue($color)}
);
}
// generate css var from existing css var

2
packages/theme-chalk/src/mixins/mixins.scss
View File

@ -1,7 +1,9 @@
@use 'function' as *;
@use '../common/var' as *;
// forward mixins
@forward 'config';
@forward 'function';
@forward '_var';
@use 'config' as *;
// Break-points

6
packages/theme-chalk/src/upload.scss
View File

@ -28,7 +28,7 @@
/* Picture Card for Wall */
@include m(picture-card) {
#{getCssVarName('upload', 'picture-card', 'size')}: 148px;
@include set-css-var-value(('upload', 'picture-card', 'size'), 148px);
background-color: #fbfdff;
border: 1px dashed #c0ccda;
@ -288,11 +288,11 @@
// upload-list
@include m(picture-card) {
@include set-css-var-value(('upload-list', 'picture-card', 'size'), 148px);
display: inline-flex;
flex-wrap: wrap;
margin: 0;
#{getCssVarName('upload-list', 'picture-card', 'size')}: 148px;
.#{bem('upload-list', 'item')} {
overflow: hidden;