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

fix: tag bg color & other dark details (#7138)

Browse Source 
* fix: tag bg color & other dark details

* chore: use 0 instead of 0px
This commit is contained in:
云游君 2022-04-13 14:40:01 +08:00 committed by GitHub
parent 851bd47c37
commit 9e083ff79d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 116 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/examples/date-picker/custom-content.vue
View File

@ -54,14 +54,14 @@ const isHoliday = ({ dayjs }) => {
border-radius: 50%;
}
.cell.current .text {
background: purple;
background: #626aef;
color: #fff;
}
.cell .holiday {
position: absolute;
width: 6px;
height: 6px;
background: red;
background: var(--el-color-danger);
border-radius: 50%;
bottom: 0px;
left: 50%;

2
docs/examples/upload/avatar.vue
View File

@ -49,7 +49,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;

2
packages/components/empty/src/img-empty.vue
View File

@ -88,7 +88,7 @@
height="36"
/>
<g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)">
<mask :id="`mask-4-${id}`" fill="var(--el-empty-fill-color-0)">
<mask :id="`mask-4-${id}`" fill="white">
<use :xlink:href="`#path-3-${id}`" />
</mask>
<use

26
packages/theme-chalk/src/badge.scss
View File

@ -13,22 +13,24 @@
display: inline-block;
@include e(content) {
background-color: var(--el-badge-bg-color);
border-radius: var(--el-badge-radius);
color: var(--el-color-white);
display: inline-block;
font-size: var(--el-badge-font-size);
height: var(--el-badge-size);
line-height: var(--el-badge-size);
padding: 0 var(--el-badge-padding);
text-align: center;
background-color: getCssVar('badge', 'bg-color');
border-radius: getCssVar('badge', 'radius');
color: getCssVar('color', 'white');
display: inline-flex;
justify-content: center;
align-items: center;
font-size: getCssVar('badge', 'font-size');
height: getCssVar('badge', 'size');
padding: 0 getCssVar('badge', 'padding');
white-space: nowrap;
border: 1px solid var(--el-color-white);
border: 1px solid getCssVar('bg-color');
@include when(fixed) {
position: absolute;
top: 0;
right: calc(1px + var(--el-badge-size) / 2);
right: calc(1px + #{getCssVar('badge', 'size')} / 2);
transform: translateY(-50%) translateX(100%);
@include when(dot) {
@ -46,7 +48,7 @@
@each $type in (primary, success, warning, info, danger) {
@include m($type) {
background-color: var(--el-color-#{$type});
background-color: getCssVar('color', $type);
}
}
}

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

@ -212,13 +212,16 @@
min-width: 60px;
margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width;
padding: 0;
color: var(--el-cascader-menu-text-color);
color: getCssVar('cascader', 'menu-text-color');
border: none;
outline: none;
box-sizing: border-box;
background: transparent;
&::placeholder {
color: var(--el-text-color-placeholder);
// two input overlap
color: transparent;
}
}
}

2
packages/theme-chalk/src/check-tag.scss
View File

@ -21,7 +21,7 @@
@include when(checked) {
background-color: getCssVar('color', 'primary', 'light-8');
color: getCssVar('color', 'primary', 'light-1');
color: getCssVar('color', 'primary');
&:hover {
background-color: getCssVar('color', 'primary', 'light-7');
}

45
packages/theme-chalk/src/color-picker.scss
View File

@ -146,19 +146,44 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
}
}
@mixin alpha-bg {
background-image: linear-gradient(
45deg,
getCssVar('color-picker', 'alpha-bg-a') 25%,
getCssVar('color-picker', 'alpha-bg-b') 25%
),
linear-gradient(
135deg,
getCssVar('color-picker', 'alpha-bg-a') 25%,
getCssVar('color-picker', 'alpha-bg-b') 25%
),
linear-gradient(
45deg,
getCssVar('color-picker', 'alpha-bg-b') 75%,
getCssVar('color-picker', 'alpha-bg-a') 75%
),
linear-gradient(
135deg,
getCssVar('color-picker', 'alpha-bg-b') 75%,
getCssVar('color-picker', 'alpha-bg-a') 75%
);
background-size: 12px 12px;
background-position: 0 0, 6px 0, 6px -6px, 0 6px;
}
@include b(color-alpha-slider) {
position: relative;
box-sizing: border-box;
width: 280px;
height: 12px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
@include alpha-bg;
@include e(bar) {
position: relative;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
getCssVar('bg-color') 100%
);
height: 100%;
}
@ -288,7 +313,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
text-align: center;
@include when(alpha) {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
@include alpha-bg;
// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
}
@ -326,3 +352,16 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
}
}
}
.#{bem('color-picker')},
.#{bem('color-picker', 'panel')} {
@include set-css-var-value(('color-picker', 'alpha-bg-a'), '#ccc');
@include set-css-var-value(('color-picker', 'alpha-bg-b'), 'transparent');
}
.dark {
.#{bem('color-picker')},
.#{bem('color-picker', 'panel')} {
@include set-css-var-value(('color-picker', 'alpha-bg-a'), '#333333');
}
}

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

@ -1235,7 +1235,6 @@ $avatar-size: map.merge(
);
// Empty
// css3 var in packages/theme-chalk/src/empty.scss
$empty: () !default;
$empty: map.merge(
@ -1259,7 +1258,6 @@ $empty: map.merge(
);
// Descriptions
// css3 var in packages/theme-chalk/src/descriptions.scss
$descriptions: () !default;
$descriptions: map.merge(

4
packages/theme-chalk/src/dark/css-vars.scss
View File

@ -35,3 +35,7 @@ html.dark {
@include dark(card) {
@include set-component-css-var('card', $card);
}
@include dark(empty) {
@include set-component-css-var('empty', $empty);
}

19
packages/theme-chalk/src/dark/var.scss
View File

@ -167,3 +167,22 @@ $card: map.merge(
),
$card
);
// Empty
// css3 var in packages/theme-chalk/src/empty.scss
$empty: () !default;
$empty: map.merge(
(
'fill-color-0': getCssVar('color-black'),
'fill-color-1': #262629,
'fill-color-2': #34363b,
'fill-color-3': #1e1e20,
'fill-color-4': #171719,
'fill-color-5': #3b3c42,
'fill-color-6': #373a3e,
'fill-color-7': #191c1f,
'fill-color-8': #202225,
'fill-color-9': #171719,
),
$empty
);

2
packages/theme-chalk/src/date-picker/time-spinner.scss
View File

@ -30,7 +30,7 @@
}
.#{$namespace}-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
background: $color-white;
background: getCssVar('fill-color', 'light');
cursor: default;
}
}

4
packages/theme-chalk/src/option.scss
View File

@ -21,10 +21,6 @@
@include when(disabled) {
color: map.get($select-option, 'disabled-color');
cursor: not-allowed;
&:hover {
background-color: var(--el-color-white);
}
}
&.hover,

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

@ -2,8 +2,6 @@
@use 'mixins/var' as *;
@use 'common/var' as *;
$types: success, warning, danger, info, error;
@include b(result) {
@include set-component-css-var('result', $result);
}

44
packages/theme-chalk/src/tag.scss
View File

@ -21,19 +21,14 @@ $tag-icon-span-gap: map.merge(
);
@function returnVarList($var, $type: 'primary') {
$list: ('color', 'white');
$list: ('fill-color', 'blank');
@if $var != false {
$list: ('color', $type, $var);
}
@return $list;
}
// false mean --el-color-white
@mixin genTheme(
$backgroundColorWeight,
$borderColorWeight,
$textColorWeight,
$hoverColorWeight
) {
@mixin genTheme($backgroundColorWeight, $borderColorWeight, $hoverColorWeight) {
@include css-var-from-global(
('tag', 'bg-color'),
returnVarList($backgroundColorWeight)
@ -42,17 +37,13 @@ $tag-icon-span-gap: map.merge(
('tag', 'border-color'),
returnVarList($borderColorWeight)
);
@include css-var-from-global(
('tag', 'text-color'),
returnVarList($textColorWeight)
);
@include css-var-from-global(
('tag', 'hover-color'),
returnVarList($hoverColorWeight)
);
@each $type in $types {
&.#{$namespace}-tag--#{$type} {
&.#{bem('tag', '', $type)} {
@include css-var-from-global(
('tag', 'bg-color'),
returnVarList($backgroundColorWeight, $type)
@ -61,10 +52,6 @@ $tag-icon-span-gap: map.merge(
('tag', 'border-color'),
returnVarList($borderColorWeight, $type)
);
@include css-var-from-global(
('tag', 'text-color'),
returnVarList($textColorWeight, $type)
);
@include css-var-from-global(
('tag', 'hover-color'),
returnVarList($hoverColorWeight, $type)
@ -74,7 +61,15 @@ $tag-icon-span-gap: map.merge(
}
@include b(tag) {
@include genTheme('light-9', 'light-8', '', '');
@include genTheme('light-9', 'light-8', '');
@include css-var-from-global(('tag', 'text-color'), ('color', 'primary'));
@each $type in $types {
&.#{bem('tag', '', $type)} {
@include css-var-from-global(('tag', 'text-color'), ('color', $type));
}
}
@include when(hit) {
border-color: getCssVar('color', 'primary');
}
@ -83,7 +78,7 @@ $tag-icon-span-gap: map.merge(
}
.#{$namespace}-tag__close {
color: var(--el-tag-text-color);
color: getCssVar('tag', 'text-color');
&:hover {
color: var(--el-color-white);
background-color: var(--el-tag-hover-color);
@ -126,11 +121,20 @@ $tag-icon-span-gap: map.merge(
}
@include m(dark) {
@include genTheme('', '', false, 'light-3');
@include genTheme('', '', 'light-3');
@include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
@include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
@each $type in $types {
&.#{bem('tag', '', $type)} {
@include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
}
}
}
@include m(plain) {
@include genTheme(false, 'light-5', '', '');
@include genTheme(false, 'light-5', '');
@include css-var-from-global(('tag', 'bg-color'), ('fill-color', 'blank'));
}
&.is-closable {

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

@ -314,7 +314,7 @@
.#{bem('upload-list', 'item')} {
overflow: hidden;
background-color: getCssVar('fill-color', 'blank');
border: 1px solid #c0ccda;
border: 1px solid getCssVar('border-color');
border-radius: 6px;
box-sizing: border-box;
width: getCssVar('upload-list', 'picture-card', 'size');
@ -420,7 +420,7 @@
overflow: hidden;
z-index: 0;
background-color: getCssVar('fill-color', 'blank');
border: 1px solid #c0ccda;
border: 1px solid getCssVar('border-color');
border-radius: 6px;
box-sizing: border-box;
margin-top: 10px;