MadCcc
3 years ago
committed by
GitHub
GitHub
3 changed files with 397 additions and 175 deletions
@ -1,168 +1,168 @@ |
|||
@import '../../style/themes/index'; |
|||
@import '../../style/mixins/index'; |
|||
@import '../../input/style/mixin'; |
|||
@import './status'; |
|||
|
|||
@mention-prefix-cls: ~'@{ant-prefix}-mentions'; |
|||
|
|||
.@{mention-prefix-cls} { |
|||
.reset-component(); |
|||
.input(); |
|||
|
|||
position: relative; |
|||
display: inline-block; |
|||
height: auto; |
|||
padding: 0; |
|||
overflow: hidden; |
|||
line-height: @line-height-base; |
|||
white-space: pre-wrap; |
|||
vertical-align: bottom; |
|||
|
|||
// =================== Status =================== |
|||
&-disabled { |
|||
> textarea { |
|||
.disabled(); |
|||
} |
|||
} |
|||
|
|||
&-focused { |
|||
.active(); |
|||
} |
|||
|
|||
// ================= Input Area ================= |
|||
> textarea, |
|||
&-measure { |
|||
min-height: @input-height-base - 2px; |
|||
margin: 0; |
|||
padding: @input-padding-vertical-base @input-padding-horizontal-base; |
|||
overflow: inherit; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
/* stylelint-disable declaration-block-no-redundant-longhand-properties */ |
|||
font-weight: inherit; |
|||
font-size: inherit; |
|||
font-family: inherit; |
|||
font-style: inherit; |
|||
font-variant: inherit; |
|||
font-size-adjust: inherit; |
|||
font-stretch: inherit; |
|||
line-height: inherit; |
|||
/* stylelint-enable declaration-block-no-redundant-longhand-properties */ |
|||
direction: inherit; |
|||
letter-spacing: inherit; |
|||
white-space: inherit; |
|||
text-align: inherit; |
|||
vertical-align: top; |
|||
word-wrap: break-word; |
|||
word-break: inherit; |
|||
tab-size: inherit; |
|||
} |
|||
|
|||
> textarea { |
|||
width: 100%; |
|||
border: none; |
|||
outline: none; |
|||
resize: none; |
|||
& when (@theme = dark) { |
|||
background-color: transparent; |
|||
} |
|||
.placeholder(); |
|||
} |
|||
|
|||
&-measure { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: -1; |
|||
color: transparent; |
|||
pointer-events: none; |
|||
|
|||
> span { |
|||
display: inline-block; |
|||
min-height: 1em; |
|||
} |
|||
} |
|||
|
|||
// ================== Dropdown ================== |
|||
&-dropdown { |
|||
// Ref select dropdown style |
|||
.reset-component(); |
|||
|
|||
position: absolute; |
|||
top: -9999px; |
|||
left: -9999px; |
|||
z-index: @zindex-dropdown; |
|||
box-sizing: border-box; |
|||
font-size: @font-size-base; |
|||
font-variant: initial; |
|||
background-color: @mentions-dropdown-bg; |
|||
border-radius: @border-radius-base; |
|||
outline: none; |
|||
box-shadow: @box-shadow-base; |
|||
|
|||
&-hidden { |
|||
display: none; |
|||
} |
|||
|
|||
&-menu { |
|||
max-height: 250px; |
|||
margin-bottom: 0; |
|||
padding-left: 0; // Override default ul/ol |
|||
overflow: auto; |
|||
list-style: none; |
|||
outline: none; |
|||
|
|||
&-item { |
|||
position: relative; |
|||
display: block; |
|||
min-width: 100px; |
|||
padding: 5px @control-padding-horizontal; |
|||
overflow: hidden; |
|||
color: @text-color; |
|||
font-weight: normal; |
|||
line-height: @line-height-base; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
cursor: pointer; |
|||
transition: background 0.3s ease; |
|||
|
|||
&:hover { |
|||
background-color: @item-hover-bg; |
|||
} |
|||
|
|||
&:first-child { |
|||
border-radius: @border-radius-base @border-radius-base 0 0; |
|||
} |
|||
|
|||
&:last-child { |
|||
border-radius: 0 0 @border-radius-base @border-radius-base; |
|||
} |
|||
|
|||
&-disabled { |
|||
color: @disabled-color; |
|||
cursor: not-allowed; |
|||
|
|||
&:hover { |
|||
color: @disabled-color; |
|||
background-color: @mentions-dropdown-menu-item-hover-bg; |
|||
cursor: not-allowed; |
|||
} |
|||
} |
|||
|
|||
&-selected { |
|||
color: @text-color; |
|||
font-weight: @select-item-selected-font-weight; |
|||
background-color: @background-color-light; |
|||
} |
|||
|
|||
&-active { |
|||
background-color: @item-hover-bg; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@import './rtl'; |
|||
//@import '../../style/themes/index'; |
|||
//@import '../../style/mixins/index'; |
|||
//@import '../../input/style/mixin'; |
|||
//@import './status'; |
|||
// |
|||
//@mention-prefix-cls: ~'@{ant-prefix}-mentions'; |
|||
// |
|||
//.@{mention-prefix-cls} { |
|||
// .reset-component(); |
|||
// .input(); |
|||
// |
|||
// position: relative; |
|||
// display: inline-block; |
|||
// height: auto; |
|||
// padding: 0; |
|||
// overflow: hidden; |
|||
// line-height: @line-height-base; |
|||
// white-space: pre-wrap; |
|||
// vertical-align: bottom; |
|||
// |
|||
// // =================== Status =================== |
|||
// &-disabled { |
|||
// > textarea { |
|||
// .disabled(); |
|||
// } |
|||
// } |
|||
// |
|||
// &-focused { |
|||
// .active(); |
|||
// } |
|||
// |
|||
// // ================= Input Area ================= |
|||
// > textarea, |
|||
// &-measure { |
|||
// min-height: @input-height-base - 2px; |
|||
// margin: 0; |
|||
// padding: @input-padding-vertical-base @input-padding-horizontal-base; |
|||
// overflow: inherit; |
|||
// overflow-x: hidden; |
|||
// overflow-y: auto; |
|||
// /* stylelint-disable declaration-block-no-redundant-longhand-properties */ |
|||
// font-weight: inherit; |
|||
// font-size: inherit; |
|||
// font-family: inherit; |
|||
// font-style: inherit; |
|||
// font-variant: inherit; |
|||
// font-size-adjust: inherit; |
|||
// font-stretch: inherit; |
|||
// line-height: inherit; |
|||
// /* stylelint-enable declaration-block-no-redundant-longhand-properties */ |
|||
// direction: inherit; |
|||
// letter-spacing: inherit; |
|||
// white-space: inherit; |
|||
// text-align: inherit; |
|||
// vertical-align: top; |
|||
// word-wrap: break-word; |
|||
// word-break: inherit; |
|||
// tab-size: inherit; |
|||
// } |
|||
// |
|||
// > textarea { |
|||
// width: 100%; |
|||
// border: none; |
|||
// outline: none; |
|||
// resize: none; |
|||
// & when (@theme = dark) { |
|||
// background-color: transparent; |
|||
// } |
|||
// .placeholder(); |
|||
// } |
|||
// |
|||
// &-measure { |
|||
// position: absolute; |
|||
// top: 0; |
|||
// right: 0; |
|||
// bottom: 0; |
|||
// left: 0; |
|||
// z-index: -1; |
|||
// color: transparent; |
|||
// pointer-events: none; |
|||
// |
|||
// > span { |
|||
// display: inline-block; |
|||
// min-height: 1em; |
|||
// } |
|||
// } |
|||
// |
|||
// // ================== Dropdown ================== |
|||
// &-dropdown { |
|||
// // Ref select dropdown style |
|||
// .reset-component(); |
|||
// |
|||
// position: absolute; |
|||
// top: -9999px; |
|||
// left: -9999px; |
|||
// z-index: @zindex-dropdown; |
|||
// box-sizing: border-box; |
|||
// font-size: @font-size-base; |
|||
// font-variant: initial; |
|||
// background-color: @mentions-dropdown-bg; |
|||
// border-radius: @border-radius-base; |
|||
// outline: none; |
|||
// box-shadow: @box-shadow-base; |
|||
// |
|||
// &-hidden { |
|||
// display: none; |
|||
// } |
|||
// |
|||
// &-menu { |
|||
// max-height: 250px; |
|||
// margin-bottom: 0; |
|||
// padding-left: 0; // Override default ul/ol |
|||
// overflow: auto; |
|||
// list-style: none; |
|||
// outline: none; |
|||
// |
|||
// &-item { |
|||
// position: relative; |
|||
// display: block; |
|||
// min-width: 100px; |
|||
// padding: 5px @control-padding-horizontal; |
|||
// overflow: hidden; |
|||
// color: @text-color; |
|||
// font-weight: normal; |
|||
// line-height: @line-height-base; |
|||
// white-space: nowrap; |
|||
// text-overflow: ellipsis; |
|||
// cursor: pointer; |
|||
// transition: background 0.3s ease; |
|||
// |
|||
// &:hover { |
|||
// background-color: @item-hover-bg; |
|||
// } |
|||
// |
|||
// &:first-child { |
|||
// border-radius: @border-radius-base @border-radius-base 0 0; |
|||
// } |
|||
// |
|||
// &:last-child { |
|||
// border-radius: 0 0 @border-radius-base @border-radius-base; |
|||
// } |
|||
// |
|||
// &-disabled { |
|||
// color: @disabled-color; |
|||
// cursor: not-allowed; |
|||
// |
|||
// &:hover { |
|||
// color: @disabled-color; |
|||
// background-color: @mentions-dropdown-menu-item-hover-bg; |
|||
// cursor: not-allowed; |
|||
// } |
|||
// } |
|||
// |
|||
// &-selected { |
|||
// color: @text-color; |
|||
// font-weight: @select-item-selected-font-weight; |
|||
// background-color: @background-color-light; |
|||
// } |
|||
// |
|||
// &-active { |
|||
// background-color: @item-hover-bg; |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
//} |
|||
// |
|||
//@import './rtl'; |
|||
|
|||
@ -1,7 +1,221 @@ |
|||
import './index.less'; |
|||
// deps-lint-skip-all
|
|||
import { |
|||
GenerateStyle, |
|||
resetComponent, |
|||
UseComponentStyleResult, |
|||
useStyleRegister, |
|||
useToken, |
|||
} from '../../_util/theme'; |
|||
import { |
|||
genActiveStyle, |
|||
genBasicInputStyle, |
|||
genDisabledStyle, |
|||
genPlaceholderStyle, |
|||
initInputToken, |
|||
InputToken, |
|||
} from '../../input/style'; |
|||
|
|||
// style dependencies
|
|||
import '../../empty/style'; |
|||
import '../../spin/style'; |
|||
interface MentionsToken extends InputToken { |
|||
mentionsCls: string; |
|||
} |
|||
|
|||
// deps-lint-skip: form
|
|||
const genMentionsStyle: GenerateStyle<MentionsToken> = token => { |
|||
const { |
|||
mentionsCls, |
|||
backgroundLight, |
|||
textColorDisabled, |
|||
itemHoverBackground, |
|||
controlPaddingHorizontal, |
|||
textColor, |
|||
duration, |
|||
lineHeight, |
|||
controlHeight, |
|||
inputPaddingHorizontal, |
|||
inputPaddingVertical, |
|||
fontSize, |
|||
componentBackground, |
|||
borderRadius, |
|||
boxShadow, |
|||
} = token; |
|||
|
|||
return { |
|||
[`${mentionsCls}`]: { |
|||
...resetComponent(token), |
|||
...genBasicInputStyle(token), |
|||
|
|||
position: 'relative', |
|||
display: 'inline-block', |
|||
height: 'auto', |
|||
padding: 0, |
|||
overflow: 'hidden', |
|||
lineHeight, |
|||
whiteSpace: 'pre-wrap', |
|||
verticalAlign: 'bottom', |
|||
|
|||
'&-disabled': { |
|||
'> textarea': { |
|||
...genDisabledStyle(token), |
|||
}, |
|||
}, |
|||
|
|||
'&-focused': { |
|||
...genActiveStyle(token), |
|||
}, |
|||
|
|||
// ================= Input Area =================
|
|||
[`> textarea, ${mentionsCls}-measure`]: { |
|||
minHeight: controlHeight - 2, |
|||
margin: 0, |
|||
padding: `${inputPaddingVertical}px ${inputPaddingHorizontal}px`, |
|||
overflow: 'inherit', |
|||
overflowX: 'hidden', |
|||
overflowY: 'auto', |
|||
fontWeight: 'inherit', |
|||
fontSize: 'inherit', |
|||
fontFamily: 'inherit', |
|||
fontStyle: 'inherit', |
|||
fontVariant: 'inherit', |
|||
fontSizeAdjust: 'inherit', |
|||
fontStretch: 'inherit', |
|||
lineHeight: 'inherit', |
|||
direction: 'inherit', |
|||
letterSpacing: 'inherit', |
|||
whiteSpace: 'inherit', |
|||
textAlign: 'inherit', |
|||
verticalAlign: 'top', |
|||
wordWrap: 'break-word', |
|||
wordBreak: 'inherit', |
|||
tabSize: 'inherit', |
|||
}, |
|||
|
|||
'> textarea': { |
|||
width: '100%', |
|||
border: 'none', |
|||
outline: 'none', |
|||
resize: 'none', |
|||
...genPlaceholderStyle(), |
|||
}, |
|||
|
|||
[`${mentionsCls}-measure`]: { |
|||
position: 'absolute', |
|||
top: 0, |
|||
insetInlineEnd: 0, |
|||
bottom: 0, |
|||
insetInlineStart: 0, |
|||
zIndex: -1, |
|||
color: 'transparent', |
|||
pointerEvents: 'none', |
|||
|
|||
'> span': { |
|||
display: 'inline-block', |
|||
minHeight: '1em', |
|||
}, |
|||
}, |
|||
|
|||
// ================== Dropdown ==================
|
|||
'&-dropdown': { |
|||
// Ref select dropdown style
|
|||
...resetComponent(token), |
|||
|
|||
position: 'absolute', |
|||
top: -9999, |
|||
insetInlineStart: -9999, |
|||
zIndex: 1050, // FIXME: magic
|
|||
boxSizing: 'border-box', |
|||
fontSize, |
|||
fontVariant: 'initial', |
|||
backgroundColor: componentBackground, |
|||
borderRadius, |
|||
outline: 'none', |
|||
boxShadow, |
|||
|
|||
'&-hidden': { |
|||
display: 'none', |
|||
}, |
|||
|
|||
[`${mentionsCls}-dropdown-menu`]: { |
|||
maxHeight: 250, // FIXME: magic
|
|||
marginBottom: 0, |
|||
paddingInlineStart: 0, // Override default ul/ol
|
|||
overflow: 'auto', |
|||
listStyle: 'none', |
|||
outline: 'none', |
|||
|
|||
'&-item': { |
|||
position: 'relative', |
|||
display: 'block', |
|||
minWidth: 100, // FIXME: magic
|
|||
padding: `5px ${controlPaddingHorizontal}px`, // FIXME: magic
|
|||
overflow: 'hidden', |
|||
color: textColor, |
|||
fontWeight: 'normal', |
|||
lineHeight, |
|||
whiteSpace: 'nowrap', |
|||
textOverflow: 'ellipsis', |
|||
cursor: 'pointer', |
|||
transition: `background ${duration} ease`, |
|||
|
|||
'&:hover': { |
|||
backgroundColor: itemHoverBackground, |
|||
}, |
|||
|
|||
'&:first-child': { |
|||
borderStartStartRadius: borderRadius, |
|||
borderStartEndRadius: borderRadius, |
|||
borderEndStartRadius: 0, |
|||
borderEndEndRadius: 0, |
|||
}, |
|||
|
|||
'&:last-child': { |
|||
borderStartStartRadius: 0, |
|||
borderStartEndRadius: 0, |
|||
borderEndStartRadius: borderRadius, |
|||
borderEndEndRadius: borderRadius, |
|||
}, |
|||
|
|||
'&-disabled': { |
|||
color: textColorDisabled, |
|||
cursor: 'not-allowed', |
|||
|
|||
'&:hover': { |
|||
color: textColorDisabled, |
|||
backgroundColor: itemHoverBackground, |
|||
cursor: 'not-allowed', |
|||
}, |
|||
}, |
|||
|
|||
'&-selected': { |
|||
color: textColor, |
|||
fontWeight: 600, // FIXME: Need design token?
|
|||
backgroundColor: backgroundLight, |
|||
}, |
|||
|
|||
'&-active': { |
|||
backgroundColor: itemHoverBackground, |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
}; |
|||
}; |
|||
|
|||
// ============================== Export ==============================
|
|||
export default function useStyle( |
|||
prefixCls: string, |
|||
iconPrefixCls: string, |
|||
): UseComponentStyleResult { |
|||
const [theme, token, hashId] = useToken(); |
|||
|
|||
const mentionsToken: MentionsToken = { |
|||
...initInputToken(token, prefixCls, iconPrefixCls), |
|||
mentionsCls: `.${prefixCls}`, |
|||
}; |
|||
|
|||
return [ |
|||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ |
|||
genMentionsStyle(mentionsToken), |
|||
]), |
|||
hashId, |
|||
]; |
|||
} |
|||
|
|||
Loading…
Reference in new issue