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

style(components): [colorPicker] enhance disabled styles (#19432)

Browse Source 
* feat: remove mask and add disabled style

* feat: set `width` and `height` on the warp container

* feat: update style

* feat: update style

---------

Co-authored-by: btea <2356281422@qq.com>
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
This commit is contained in:
DDDDD12138
2025-05-29 15:54:16 +08:00
committed by GitHub
parent 4e821c5552
commit e01a1439c0
2 changed files with 10 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/components/color-picker/src/color-picker.vue
View File

@@ -80,7 +80,6 @@
@focus="handleFocus"
@blur="handleBlur"
>
<div v-if="colorDisabled" :class="ns.be('picker', 'mask')" />
<div :class="ns.be('picker', 'trigger')" @click="handleTrigger">
<span :class="[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]">
<span

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

@@ -250,6 +250,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
position: relative;
line-height: normal;
outline: none;
height: map.get($color-picker-size, 'default');
width: map.get($color-picker-size, 'default');
&:hover:not(.is-disabled, .is-focused) {
.#{$namespace}-color-picker__trigger {
@@ -273,22 +275,18 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
@include when(disabled) {
.#{$namespace}-color-picker__trigger {
cursor: not-allowed;
background-color: getCssVar('fill-color', 'light');
}
@include e(color) {
opacity: 0.3;
}
}
@each $size in (large, small) {
@include m($size) {
height: map.get($color-picker-size, $size);
.#{$namespace}-color-picker__trigger {
height: map.get($color-picker-size, $size);
width: map.get($color-picker-size, $size);
}
.#{$namespace}-color-picker__mask {
height: map.get($color-picker-size, $size)-2px;
width: map.get($color-picker-size, $size)-2px;
}
width: map.get($color-picker-size, $size);
}
}
@@ -299,26 +297,14 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
}
}
@include e(mask) {
height: map.get($color-picker-size, 'default')-2px;
width: map.get($color-picker-size, 'default')-2px;
border-radius: 4px;
position: absolute;
top: 1px;
left: 1px;
z-index: 1;
cursor: not-allowed;
background-color: rgba(255, 255, 255, 0.7);
}
@include e(trigger) {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
height: map.get($color-picker-size, 'default');
width: map.get($color-picker-size, 'default');
height: 100%;
width: 100%;
padding: 4px;
border: 1px solid getCssVar('border-color');
border-radius: 4px;