Browse Source
fix: Preset color block style (#42361)
* fix: Preset color block style
* chore: use token
pull/42367/head
二货爱吃白萝卜
2 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with
4 additions and
4 deletions
-
components/color-picker/style/color-block.ts
-
components/color-picker/style/picker.ts
|
|
|
@ -6,9 +6,9 @@ const TRANSPARENT_DOT_COLOR = '#EEE'; |
|
|
|
/** |
|
|
|
* @private Internal usage only |
|
|
|
*/ |
|
|
|
export const getTransBg = (size: number): CSSObject => ({ |
|
|
|
export const getTransBg = (size: string): CSSObject => ({ |
|
|
|
backgroundImage: `conic-gradient(${TRANSPARENT_DOT_COLOR} 0 25%, transparent 0 50%, ${TRANSPARENT_DOT_COLOR} 0 75%, transparent 0)`, |
|
|
|
backgroundSize: `${size}px ${size}px`, |
|
|
|
backgroundSize: `${size} ${size}`, |
|
|
|
}); |
|
|
|
|
|
|
|
const genColorBlockStyle = (token: ColorPickerToken, size: number): CSSObject => { |
|
|
|
@ -21,7 +21,7 @@ const genColorBlockStyle = (token: ColorPickerToken, size: number): CSSObject => |
|
|
|
width: size, |
|
|
|
height: size, |
|
|
|
boxShadow: colorPickerInsetShadow, |
|
|
|
...getTransBg(size / 2), |
|
|
|
...getTransBg('50%'), |
|
|
|
[`${componentCls}-color-block-inner`]: { |
|
|
|
width: '100%', |
|
|
|
height: '100%', |
|
|
|
|
|
|
|
@ -58,7 +58,7 @@ const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => { |
|
|
|
borderRadius: colorPickerSliderHeight / 2, |
|
|
|
boxShadow: colorPickerInsetShadow, |
|
|
|
}, |
|
|
|
'&-alpha': getTransBg(8), |
|
|
|
'&-alpha': getTransBg(`${colorPickerSliderHeight}px`), |
|
|
|
marginBottom: marginSM, |
|
|
|
}, |
|
|
|
|
|
|
|
|
