mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
refactor: Typography move to cssinjs (#34372)
* refactor: move to css in js * add some style * update code style * update * update * update * update * add reset styles * use token.errorColors * remove less files * add operationUnit * getEditableStyles * fix overflow * fix ediable/copy * fix ediable/copy * refactor: move to css in js * add some style * update code style * update * update * update * update * add reset styles * use token.errorColors * remove less files * add operationUnit * getEditableStyles * fix overflow * fix ediable/copy * fix ediable/copy * rtl style * rtl style * add TypographyToken * fix ts * use GenerateStyle<TypographyToken> * fix ts errors * fix ediable * remove comment * fix ediable * fix ediable * revert less files * comment less * fix review issues * fix review issues * fix review issues * fix missing style
This commit is contained in:
afc163
GitHub
parent
4f669b67af
commit
ef09eefb85
@ -53,6 +53,8 @@ const defaultDesignToken: DesignToken = {
|
||||
textColorInverse: '#fff',
|
||||
placeholderColor: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
|
||||
|
||||
disabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(),
|
||||
|
||||
headingColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||||
|
||||
iconColorHover: new TinyColor('#000').setAlpha(0.75).toRgbString(),
|
||||
|
||||
@ -101,6 +101,8 @@ export interface DesignToken extends PresetColorType {
|
||||
textColorInverse: string;
|
||||
placeholderColor: string;
|
||||
|
||||
disabledColor: string;
|
||||
|
||||
iconColorHover: string;
|
||||
|
||||
headingColor: string;
|
||||
@ -146,6 +148,12 @@ export interface DerivativeToken extends ColorPalettes, Omit<DesignToken, 'durat
|
||||
highlightColor: string;
|
||||
|
||||
linkColor: string;
|
||||
linkHoverColor: string;
|
||||
linkActiveColor: string;
|
||||
linkDecoration: CSSObject['textDecoration'];
|
||||
linkHoverDecoration: CSSObject['textDecoration'];
|
||||
linkFocusDecoration: CSSObject['textDecoration'];
|
||||
|
||||
fontSizeSM: number;
|
||||
fontSizeLG: number;
|
||||
/** @private Only Used for control inside component like Multiple Select inner selection item */
|
||||
@ -166,6 +174,16 @@ export interface DerivativeToken extends ColorPalettes, Omit<DesignToken, 'durat
|
||||
durationMid: string;
|
||||
durationFast: string;
|
||||
|
||||
heading1Size: number;
|
||||
heading2Size: number;
|
||||
heading3Size: number;
|
||||
heading4Size: number;
|
||||
heading5Size: number;
|
||||
|
||||
primaryColors: string[];
|
||||
errorColors: string[];
|
||||
warningColors: string[];
|
||||
|
||||
// TMP
|
||||
tmpPrimaryColorWeak: string;
|
||||
tmpPrimaryHoverColorWeak: string;
|
||||
@ -241,6 +259,12 @@ function derivative(designToken: DesignToken): DerivativeToken {
|
||||
itemActiveBackground: primaryColors[0],
|
||||
|
||||
linkColor: primaryColor,
|
||||
linkHoverColor: primaryColors[4],
|
||||
linkActiveColor: primaryColors[6],
|
||||
linkDecoration: 'none',
|
||||
linkHoverDecoration: 'none',
|
||||
linkFocusDecoration: 'none',
|
||||
|
||||
fontSizeSM: designToken.fontSize - 2,
|
||||
fontSizeLG: designToken.fontSize + 2,
|
||||
controlHeightXS: designToken.controlHeight / 2,
|
||||
@ -262,6 +286,16 @@ function derivative(designToken: DesignToken): DerivativeToken {
|
||||
|
||||
...colorPalettes,
|
||||
|
||||
heading1Size: Math.ceil(designToken.fontSize * 2.71),
|
||||
heading2Size: Math.ceil(designToken.fontSize * 2.14),
|
||||
heading3Size: Math.ceil(designToken.fontSize * 1.71),
|
||||
heading4Size: Math.ceil(designToken.fontSize * 1.42),
|
||||
heading5Size: Math.ceil(designToken.fontSize * 1.14),
|
||||
|
||||
primaryColors,
|
||||
errorColors,
|
||||
warningColors,
|
||||
|
||||
// TMP
|
||||
tmpPrimaryColorWeak: primaryColors[2],
|
||||
tmpPrimaryHoverColorWeak: primaryColors[0],
|
||||
|
||||
19
components/_util/theme/util/operationUnit.tsx
Normal file
19
components/_util/theme/util/operationUnit.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { DerivativeToken } from '..';
|
||||
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export const operationUnit = (token: DerivativeToken): CSSObject => ({
|
||||
color: token.linkColor,
|
||||
textDecoration: 'none',
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `color ${token.duration}`,
|
||||
|
||||
'&:focus, &:hover': {
|
||||
color: token.linkHoverColor,
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
color: token.linkActiveColor,
|
||||
},
|
||||
});
|
||||
@ -6,9 +6,10 @@ import { AutoSizeType } from 'rc-textarea/lib/ResizableTextArea';
|
||||
import TextArea from '../input/TextArea';
|
||||
import { DirectionType } from '../config-provider';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
import useStyle from './style';
|
||||
|
||||
interface EditableProps {
|
||||
prefixCls?: string;
|
||||
prefixCls: string;
|
||||
value: string;
|
||||
['aria-label']?: string;
|
||||
onSave: (value: string) => void;
|
||||
@ -112,6 +113,8 @@ const Editable: React.FC<EditableProps> = ({
|
||||
|
||||
const textClassName = component ? `${prefixCls}-${component}` : '';
|
||||
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const textAreaClassName = classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-edit-content`,
|
||||
@ -120,9 +123,10 @@ const Editable: React.FC<EditableProps> = ({
|
||||
},
|
||||
className,
|
||||
textClassName,
|
||||
hashId,
|
||||
);
|
||||
|
||||
return (
|
||||
return wrapSSR(
|
||||
<div className={textAreaClassName} style={style}>
|
||||
<TextArea
|
||||
ref={ref as any}
|
||||
@ -141,7 +145,7 @@ const Editable: React.FC<EditableProps> = ({
|
||||
{enterIcon !== null
|
||||
? cloneElement(enterIcon, { className: `${prefixCls}-edit-content-confirm` })
|
||||
: null}
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ import classNames from 'classnames';
|
||||
import { composeRef } from 'rc-util/lib/ref';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import devWarning from '../_util/devWarning';
|
||||
import useStyle from './style';
|
||||
|
||||
export interface TypographyProps {
|
||||
id?: string;
|
||||
@ -41,17 +42,22 @@ const Typography: React.ForwardRefRenderFunction<{}, InternalTypographyProps> =
|
||||
|
||||
const Component = component as any;
|
||||
const prefixCls = getPrefixCls('typography', customizePrefixCls);
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const componentClassName = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
hashId,
|
||||
);
|
||||
return (
|
||||
return wrapSSR(
|
||||
<Component className={componentClassName} aria-label={ariaLabel} ref={mergedRef} {...restProps}>
|
||||
{children}
|
||||
</Component>
|
||||
</Component>,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,311 +1,311 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@typography-prefix-cls: ~'@{ant-prefix}-typography';
|
||||
// @typography-prefix-cls: ~'@{ant-prefix}-typography';
|
||||
|
||||
// =============== Basic ===============
|
||||
.@{typography-prefix-cls} {
|
||||
color: @text-color;
|
||||
overflow-wrap: break-word;
|
||||
// // =============== Basic ===============
|
||||
// .@{typography-prefix-cls} {
|
||||
// color: @text-color;
|
||||
// overflow-wrap: break-word;
|
||||
|
||||
&&-secondary {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
// &&-secondary {
|
||||
// color: @text-color-secondary;
|
||||
// }
|
||||
|
||||
&&-success {
|
||||
color: @success-color;
|
||||
}
|
||||
// &&-success {
|
||||
// color: @success-color;
|
||||
// }
|
||||
|
||||
&&-warning {
|
||||
color: @warning-color;
|
||||
}
|
||||
// &&-warning {
|
||||
// color: @warning-color;
|
||||
// }
|
||||
|
||||
&&-danger {
|
||||
color: @error-color;
|
||||
// &&-danger {
|
||||
// color: @error-color;
|
||||
|
||||
a&:active,
|
||||
a&:focus,
|
||||
a&:hover {
|
||||
color: ~`colorPalette('@{error-color}', 5) `;
|
||||
}
|
||||
}
|
||||
// a&:active,
|
||||
// a&:focus,
|
||||
// a&:hover {
|
||||
// color: ~`colorPalette('@{error-color}', 5) `;
|
||||
// }
|
||||
// }
|
||||
|
||||
&&-disabled {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
user-select: none;
|
||||
}
|
||||
// &&-disabled {
|
||||
// color: @disabled-color;
|
||||
// cursor: not-allowed;
|
||||
// user-select: none;
|
||||
// }
|
||||
|
||||
// Tag
|
||||
div&,
|
||||
p {
|
||||
.typography-paragraph();
|
||||
}
|
||||
// // Tag
|
||||
// div&,
|
||||
// p {
|
||||
// .typography-paragraph();
|
||||
// }
|
||||
|
||||
h1&,
|
||||
div&-h1,
|
||||
div&-h1 > textarea,
|
||||
h1 {
|
||||
.typography-title-1();
|
||||
}
|
||||
// h1&,
|
||||
// div&-h1,
|
||||
// div&-h1 > textarea,
|
||||
// h1 {
|
||||
// .typography-title-1();
|
||||
// }
|
||||
|
||||
h2&,
|
||||
div&-h2,
|
||||
div&-h2 > textarea,
|
||||
h2 {
|
||||
.typography-title-2();
|
||||
}
|
||||
// h2&,
|
||||
// div&-h2,
|
||||
// div&-h2 > textarea,
|
||||
// h2 {
|
||||
// .typography-title-2();
|
||||
// }
|
||||
|
||||
h3&,
|
||||
div&-h3,
|
||||
div&-h3 > textarea,
|
||||
h3 {
|
||||
.typography-title-3();
|
||||
}
|
||||
// h3&,
|
||||
// div&-h3,
|
||||
// div&-h3 > textarea,
|
||||
// h3 {
|
||||
// .typography-title-3();
|
||||
// }
|
||||
|
||||
h4&,
|
||||
div&-h4,
|
||||
div&-h4 > textarea,
|
||||
h4 {
|
||||
.typography-title-4();
|
||||
}
|
||||
// h4&,
|
||||
// div&-h4,
|
||||
// div&-h4 > textarea,
|
||||
// h4 {
|
||||
// .typography-title-4();
|
||||
// }
|
||||
|
||||
h5&,
|
||||
div&-h5,
|
||||
div&-h5 > textarea,
|
||||
h5 {
|
||||
.typography-title-5();
|
||||
}
|
||||
// h5&,
|
||||
// div&-h5,
|
||||
// div&-h5 > textarea,
|
||||
// h5 {
|
||||
// .typography-title-5();
|
||||
// }
|
||||
|
||||
h1&,
|
||||
h2&,
|
||||
h3&,
|
||||
h4&,
|
||||
h5& {
|
||||
.@{typography-prefix-cls} + & {
|
||||
margin-top: @typography-title-margin-top;
|
||||
}
|
||||
}
|
||||
// h1&,
|
||||
// h2&,
|
||||
// h3&,
|
||||
// h4&,
|
||||
// h5& {
|
||||
// .@{typography-prefix-cls} + & {
|
||||
// margin-top: @typography-title-margin-top;
|
||||
// }
|
||||
// }
|
||||
|
||||
div,
|
||||
ul,
|
||||
li,
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
+ h1,
|
||||
+ h2,
|
||||
+ h3,
|
||||
+ h4,
|
||||
+ h5 {
|
||||
margin-top: @typography-title-margin-top;
|
||||
}
|
||||
}
|
||||
// div,
|
||||
// ul,
|
||||
// li,
|
||||
// p,
|
||||
// h1,
|
||||
// h2,
|
||||
// h3,
|
||||
// h4,
|
||||
// h5 {
|
||||
// + h1,
|
||||
// + h2,
|
||||
// + h3,
|
||||
// + h4,
|
||||
// + h5 {
|
||||
// margin-top: @typography-title-margin-top;
|
||||
// }
|
||||
// }
|
||||
|
||||
a&-ellipsis,
|
||||
span&-ellipsis {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
// a&-ellipsis,
|
||||
// span&-ellipsis {
|
||||
// display: inline-block;
|
||||
// max-width: 100%;
|
||||
// }
|
||||
|
||||
a&,
|
||||
a {
|
||||
.operation-unit();
|
||||
text-decoration: @link-decoration;
|
||||
// a&,
|
||||
// a {
|
||||
// .operation-unit();
|
||||
// text-decoration: @link-decoration;
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
text-decoration: @link-hover-decoration;
|
||||
}
|
||||
// &:active,
|
||||
// &:hover {
|
||||
// text-decoration: @link-hover-decoration;
|
||||
// }
|
||||
|
||||
&[disabled],
|
||||
&.@{typography-prefix-cls}-disabled {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
// &[disabled],
|
||||
// &.@{typography-prefix-cls}-disabled {
|
||||
// color: @disabled-color;
|
||||
// cursor: not-allowed;
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
color: @disabled-color;
|
||||
}
|
||||
// &:active,
|
||||
// &:hover {
|
||||
// color: @disabled-color;
|
||||
// }
|
||||
|
||||
&:active {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &:active {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
code {
|
||||
margin: 0 0.2em;
|
||||
padding: 0.2em 0.4em 0.1em;
|
||||
font-size: 85%;
|
||||
background: rgba(150, 150, 150, 0.1);
|
||||
border: 1px solid rgba(100, 100, 100, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
// code {
|
||||
// margin: 0 0.2em;
|
||||
// padding: 0.2em 0.4em 0.1em;
|
||||
// font-size: 85%;
|
||||
// background: rgba(150, 150, 150, 0.1);
|
||||
// border: 1px solid rgba(100, 100, 100, 0.2);
|
||||
// border-radius: 3px;
|
||||
// }
|
||||
|
||||
kbd {
|
||||
margin: 0 0.2em;
|
||||
padding: 0.15em 0.4em 0.1em;
|
||||
font-size: 90%;
|
||||
background: rgba(150, 150, 150, 0.06);
|
||||
border: 1px solid rgba(100, 100, 100, 0.2);
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
// kbd {
|
||||
// margin: 0 0.2em;
|
||||
// padding: 0.15em 0.4em 0.1em;
|
||||
// font-size: 90%;
|
||||
// background: rgba(150, 150, 150, 0.06);
|
||||
// border: 1px solid rgba(100, 100, 100, 0.2);
|
||||
// border-bottom-width: 2px;
|
||||
// border-radius: 3px;
|
||||
// }
|
||||
|
||||
mark {
|
||||
padding: 0;
|
||||
background-color: @gold-3;
|
||||
}
|
||||
// mark {
|
||||
// padding: 0;
|
||||
// background-color: @gold-3;
|
||||
// }
|
||||
|
||||
u,
|
||||
ins {
|
||||
text-decoration: underline;
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
// u,
|
||||
// ins {
|
||||
// text-decoration: underline;
|
||||
// text-decoration-skip-ink: auto;
|
||||
// }
|
||||
|
||||
s,
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
// s,
|
||||
// del {
|
||||
// text-decoration: line-through;
|
||||
// }
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
// strong {
|
||||
// font-weight: 600;
|
||||
// }
|
||||
|
||||
// Operation
|
||||
&-expand,
|
||||
&-edit,
|
||||
&-copy {
|
||||
.operation-unit();
|
||||
// // Operation
|
||||
// &-expand,
|
||||
// &-edit,
|
||||
// &-copy {
|
||||
// .operation-unit();
|
||||
|
||||
margin-left: 4px;
|
||||
}
|
||||
// margin-left: 4px;
|
||||
// }
|
||||
|
||||
&-copy-success {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @success-color;
|
||||
}
|
||||
}
|
||||
// &-copy-success {
|
||||
// &,
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// color: @success-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
// Text input area
|
||||
&-edit-content {
|
||||
position: relative;
|
||||
// // Text input area
|
||||
// &-edit-content {
|
||||
// position: relative;
|
||||
|
||||
div& {
|
||||
left: -@input-padding-horizontal - 1px;
|
||||
margin-top: -@input-padding-vertical-base - 1px;
|
||||
margin-bottom: calc(1em - @input-padding-vertical-base - 1px);
|
||||
}
|
||||
// div& {
|
||||
// left: -@input-padding-horizontal - 1px;
|
||||
// margin-top: -@input-padding-vertical-base - 1px;
|
||||
// margin-bottom: calc(1em - @input-padding-vertical-base - 1px);
|
||||
// }
|
||||
|
||||
&-confirm {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 8px;
|
||||
color: @text-color-secondary;
|
||||
// default style
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
font-style: normal;
|
||||
pointer-events: none;
|
||||
}
|
||||
// &-confirm {
|
||||
// position: absolute;
|
||||
// right: 10px;
|
||||
// bottom: 8px;
|
||||
// color: @text-color-secondary;
|
||||
// // default style
|
||||
// font-weight: normal;
|
||||
// font-size: @font-size-base;
|
||||
// font-style: normal;
|
||||
// pointer-events: none;
|
||||
// }
|
||||
|
||||
// Fix Editable Textarea flash in Firefox
|
||||
textarea {
|
||||
// https://stackoverflow.com/a/7695964/3040605
|
||||
height: 1em;
|
||||
margin: 0 !important;
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-moz-transition: none;
|
||||
}
|
||||
}
|
||||
// // Fix Editable Textarea flash in Firefox
|
||||
// textarea {
|
||||
// // https://stackoverflow.com/a/7695964/3040605
|
||||
// height: 1em;
|
||||
// margin: 0 !important;
|
||||
// /* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
// -moz-transition: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// list
|
||||
ul,
|
||||
ol {
|
||||
margin: 0 0 1em;
|
||||
padding: 0;
|
||||
// // list
|
||||
// ul,
|
||||
// ol {
|
||||
// margin: 0 0 1em;
|
||||
// padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0 0 0 20px;
|
||||
padding: 0 0 0 4px;
|
||||
}
|
||||
}
|
||||
// li {
|
||||
// margin: 0 0 0 20px;
|
||||
// padding: 0 0 0 4px;
|
||||
// }
|
||||
// }
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
// ul {
|
||||
// list-style-type: circle;
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
}
|
||||
// ul {
|
||||
// list-style-type: disc;
|
||||
// }
|
||||
// }
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
// ol {
|
||||
// list-style-type: decimal;
|
||||
// }
|
||||
|
||||
// pre & block
|
||||
pre,
|
||||
blockquote {
|
||||
margin: 1em 0;
|
||||
}
|
||||
// // pre & block
|
||||
// pre,
|
||||
// blockquote {
|
||||
// margin: 1em 0;
|
||||
// }
|
||||
|
||||
pre {
|
||||
padding: 0.4em 0.6em;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
background: rgba(150, 150, 150, 0.1);
|
||||
border: 1px solid rgba(100, 100, 100, 0.2);
|
||||
border-radius: 3px;
|
||||
// pre {
|
||||
// padding: 0.4em 0.6em;
|
||||
// white-space: pre-wrap;
|
||||
// word-wrap: break-word;
|
||||
// background: rgba(150, 150, 150, 0.1);
|
||||
// border: 1px solid rgba(100, 100, 100, 0.2);
|
||||
// border-radius: 3px;
|
||||
|
||||
// Compatible for marked
|
||||
code {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
// // Compatible for marked
|
||||
// code {
|
||||
// display: inline;
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// font-size: inherit;
|
||||
// font-family: inherit;
|
||||
// background: transparent;
|
||||
// border: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
blockquote {
|
||||
padding: 0 0 0 0.6em;
|
||||
border-left: 4px solid rgba(100, 100, 100, 0.2);
|
||||
opacity: 0.85;
|
||||
}
|
||||
// blockquote {
|
||||
// padding: 0 0 0 0.6em;
|
||||
// border-left: 4px solid rgba(100, 100, 100, 0.2);
|
||||
// opacity: 0.85;
|
||||
// }
|
||||
|
||||
// ============ Ellipsis ============
|
||||
&-single-line {
|
||||
white-space: nowrap;
|
||||
}
|
||||
// // ============ Ellipsis ============
|
||||
// &-single-line {
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
|
||||
&-ellipsis-single-line {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
// &-ellipsis-single-line {
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
|
||||
// https://blog.csdn.net/iefreer/article/details/50421025
|
||||
a&,
|
||||
span& {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
// // https://blog.csdn.net/iefreer/article/details/50421025
|
||||
// a&,
|
||||
// span& {
|
||||
// vertical-align: bottom;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-ellipsis-multiple-line {
|
||||
/* stylelint-disable-next-line value-no-vendor-prefix */
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 3;
|
||||
// &-ellipsis-multiple-line {
|
||||
// /* stylelint-disable-next-line value-no-vendor-prefix */
|
||||
// display: -webkit-box;
|
||||
// overflow: hidden;
|
||||
// -webkit-line-clamp: 3;
|
||||
|
||||
/*! autoprefixer: ignore next */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
// /*! autoprefixer: ignore next */
|
||||
// -webkit-box-orient: vertical;
|
||||
// }
|
||||
// }
|
||||
|
||||
@import './rtl';
|
||||
// @import './rtl';
|
||||
|
||||
@ -1,6 +1,134 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
import { useStyleRegister, useToken } from '../../_util/theme';
|
||||
import type { UseComponentStyleResult, GenerateStyle } from '../../_util/theme';
|
||||
import { operationUnit } from '../../_util/theme/util/operationUnit';
|
||||
import {
|
||||
getTitleStyles,
|
||||
getResetStyles,
|
||||
getLinkStyles,
|
||||
getEditableStyles,
|
||||
getCopiableStyles,
|
||||
getEllipsisStyles,
|
||||
} from './mixins';
|
||||
import type { TypographyToken } from './mixins';
|
||||
|
||||
// style dependencies
|
||||
import '../../tooltip/style';
|
||||
import '../../input/style';
|
||||
const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
|
||||
const { prefixCls, titleMarginTop } = token.typography;
|
||||
return {
|
||||
[`.${prefixCls}`]: {
|
||||
color: token.textColor,
|
||||
overflowWrap: 'break-word',
|
||||
'&&-secondary': {
|
||||
color: token.textColorSecondary,
|
||||
},
|
||||
|
||||
'&&-success': {
|
||||
color: token.successColor,
|
||||
},
|
||||
|
||||
'&&-warning': {
|
||||
color: token.warningColor,
|
||||
},
|
||||
|
||||
'&&-danger': {
|
||||
color: token.errorColor,
|
||||
'a&:active, a&:focus, a&:hover': {
|
||||
// FIXME: need new token like errorColorHover
|
||||
color: token.errorColors[4],
|
||||
},
|
||||
},
|
||||
|
||||
'&&-disabled': {
|
||||
color: token.disabledColor,
|
||||
cursor: 'not-allowed',
|
||||
userSelect: 'none',
|
||||
},
|
||||
|
||||
[`
|
||||
div&,
|
||||
p
|
||||
`]: {
|
||||
marginBottom: '1em',
|
||||
},
|
||||
|
||||
...getTitleStyles(token),
|
||||
|
||||
[`
|
||||
& + h1&,
|
||||
& + h2&,
|
||||
& + h3&,
|
||||
& + h4&,
|
||||
& + h5&
|
||||
`]: {
|
||||
marginTop: titleMarginTop,
|
||||
},
|
||||
|
||||
[`
|
||||
div,
|
||||
ul,
|
||||
li,
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5`]: {
|
||||
[`
|
||||
+ h1,
|
||||
+ h2,
|
||||
+ h3,
|
||||
+ h4,
|
||||
+ h5
|
||||
`]: {
|
||||
marginTop: titleMarginTop,
|
||||
},
|
||||
},
|
||||
|
||||
...getResetStyles(),
|
||||
|
||||
...getLinkStyles(token),
|
||||
|
||||
// Operation
|
||||
[`
|
||||
.${prefixCls}-expand,
|
||||
.${prefixCls}-edit,
|
||||
.${prefixCls}-copy
|
||||
`]: {
|
||||
...operationUnit(token),
|
||||
marginInlineStart: token.marginXXS,
|
||||
},
|
||||
|
||||
...getEditableStyles(token),
|
||||
|
||||
...getCopiableStyles(token),
|
||||
|
||||
...getEllipsisStyles(),
|
||||
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default function useStyle(prefixCls: string): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
const typographyToken: TypographyToken = {
|
||||
...token,
|
||||
typography: {
|
||||
prefixCls,
|
||||
titleMarginTop: '1.2em',
|
||||
titleMarginBottom: '0.5em',
|
||||
titleFontWeight: 600,
|
||||
},
|
||||
};
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genTypographyStyle(typographyToken),
|
||||
]),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
265
components/typography/style/mixins.tsx
Normal file
265
components/typography/style/mixins.tsx
Normal file
@ -0,0 +1,265 @@
|
||||
/*
|
||||
.typography-title(@fontSize; @fontWeight; @lineHeight; @headingColor; @headingMarginBottom;) {
|
||||
margin-bottom: @headingMarginBottom;
|
||||
color: @headingColor;
|
||||
font-weight: @fontWeight;
|
||||
fontSize: @fontSize;
|
||||
line-height: @lineHeight;
|
||||
}
|
||||
*/
|
||||
import { gold } from '@ant-design/colors';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { DerivativeToken, GenerateStyle } from '../../_util/theme';
|
||||
import { operationUnit } from '../../_util/theme/util/operationUnit';
|
||||
import { initInputToken } from '../../input/style';
|
||||
|
||||
export interface TypographyToken extends DerivativeToken {
|
||||
typography: {
|
||||
prefixCls: string;
|
||||
titleMarginTop: string;
|
||||
titleMarginBottom: string;
|
||||
titleFontWeight: number;
|
||||
};
|
||||
}
|
||||
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
const getTitleStyle = ({
|
||||
fontSize,
|
||||
lineHeight,
|
||||
color,
|
||||
typographyToken,
|
||||
}: {
|
||||
fontSize: number;
|
||||
lineHeight: number;
|
||||
color: string;
|
||||
typographyToken: TypographyToken['typography'];
|
||||
}) => ({
|
||||
marginBottom: typographyToken.titleMarginBottom,
|
||||
color,
|
||||
fontWeight: typographyToken.titleFontWeight,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
});
|
||||
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
|
||||
// FIXME: magic numbers for H1/H2/.../H5 line height
|
||||
const lineHeights = [1.23, 1.35, 1.35, 1.4, 1.5];
|
||||
const styles = {} as CSSObject;
|
||||
lineHeights.forEach((lineHeight, i) => {
|
||||
styles[
|
||||
`
|
||||
h${i + 1}&,
|
||||
div&-h${i + 1},
|
||||
div&-h${i + 1} > textarea,
|
||||
h${i + 1}
|
||||
`
|
||||
] = getTitleStyle({
|
||||
fontSize: (token as any)[`heading${i + 1}Size`],
|
||||
lineHeight,
|
||||
color: token.headingColor,
|
||||
typographyToken: token.typography,
|
||||
});
|
||||
});
|
||||
return styles;
|
||||
};
|
||||
|
||||
export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = token => ({
|
||||
'a&, a': {
|
||||
...operationUnit(token),
|
||||
textDecoration: token.linkDecoration,
|
||||
|
||||
'&:active, &:hover': {
|
||||
textDecoration: token.linkHoverDecoration,
|
||||
},
|
||||
|
||||
[`&[disabled], &.${token.typography.prefixCls}-disabled`]: {
|
||||
color: token.disabledColor,
|
||||
cursor: 'not-allowed',
|
||||
|
||||
'&:active, &:hover': {
|
||||
color: '@disabled-color',
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const getResetStyles = (): CSSObject => ({
|
||||
code: {
|
||||
margin: '0 0.2em',
|
||||
paddingInline: '0.4em',
|
||||
paddingBlock: '0.2em 0.1em',
|
||||
fontSize: '85%',
|
||||
background: 'rgba(150, 150, 150, 0.1)',
|
||||
border: '1px solid rgba(100, 100, 100, 0.2)',
|
||||
borderRadius: 3,
|
||||
},
|
||||
|
||||
kbd: {
|
||||
margin: '0 0.2em',
|
||||
paddingInline: '0.4em',
|
||||
paddingBlock: '0.15em 0.1em',
|
||||
fontSize: '90%',
|
||||
background: 'rgba(150, 150, 150, 0.06)',
|
||||
border: '1px solid rgba(100, 100, 100, 0.2)',
|
||||
borderBottomWidth: 2,
|
||||
borderRadius: 3,
|
||||
},
|
||||
|
||||
mark: {
|
||||
padding: 0,
|
||||
backgroundColor: gold[2],
|
||||
},
|
||||
|
||||
'u, ins': {
|
||||
textDecoration: 'underline',
|
||||
textDecorationSkipInk: 'auto',
|
||||
},
|
||||
|
||||
's, del': {
|
||||
textDecoration: 'line-through',
|
||||
},
|
||||
|
||||
strong: {
|
||||
fontWeight: 600,
|
||||
},
|
||||
|
||||
// list
|
||||
'ul, ol': {
|
||||
marginInline: 0,
|
||||
marginBlock: '0 1em',
|
||||
padding: 0,
|
||||
|
||||
li: {
|
||||
marginInline: '20px 0',
|
||||
marginBlock: 0,
|
||||
paddingInline: '4px 0',
|
||||
paddingBlock: 0,
|
||||
},
|
||||
},
|
||||
|
||||
ul: {
|
||||
listStyleType: 'circle',
|
||||
|
||||
ul: {
|
||||
listStyleType: 'disc',
|
||||
},
|
||||
},
|
||||
|
||||
ol: {
|
||||
listStyleType: 'decimal',
|
||||
},
|
||||
|
||||
// pre & block
|
||||
'pre, blockquote': {
|
||||
margin: '1em 0',
|
||||
},
|
||||
|
||||
pre: {
|
||||
padding: '0.4em 0.6em',
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordWrap: 'break-word',
|
||||
background: 'rgba(150, 150, 150, 0.1)',
|
||||
border: '1px solid rgba(100, 100, 100, 0.2)',
|
||||
borderRadius: 3,
|
||||
|
||||
// Compatible for marked
|
||||
code: {
|
||||
display: 'inline',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontSize: 'inherit',
|
||||
fontFamily: 'inherit',
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
},
|
||||
},
|
||||
|
||||
blockquote: {
|
||||
paddingInline: '0.6em 0',
|
||||
paddingBlock: 0,
|
||||
borderInlineStart: '4px solid rgba(100, 100, 100, 0.2)',
|
||||
opacity: 0.85,
|
||||
},
|
||||
});
|
||||
|
||||
export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
|
||||
const inputToken = initInputToken(token, '', '');
|
||||
const inputShift = inputToken.inputPaddingVertical + 1;
|
||||
return {
|
||||
'&-edit-content': {
|
||||
position: 'relative',
|
||||
|
||||
'div&': {
|
||||
insetInlineStart: -token.paddingSM,
|
||||
marginTop: -inputShift,
|
||||
marginBottom: `calc(1em - ${inputShift}px)`,
|
||||
},
|
||||
|
||||
[`.${token.typography.prefixCls}-edit-content-confirm`]: {
|
||||
position: 'absolute',
|
||||
insetInlineEnd: token.marginXS + 2,
|
||||
insetBlockEnd: token.marginXS,
|
||||
color: token.textColorSecondary,
|
||||
// default style
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSize,
|
||||
fontStyle: 'normal',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
textarea: {
|
||||
margin: '0!important',
|
||||
// Fix Editable Textarea flash in Firefox
|
||||
MozTransition: 'none',
|
||||
height: '1em',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const getCopiableStyles: GenerateStyle<TypographyToken, CSSObject> = token => ({
|
||||
'&-copy-success': {
|
||||
[`
|
||||
&,
|
||||
&:hover,
|
||||
&:focus`]: {
|
||||
color: token.successColor,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const getEllipsisStyles = (): CSSObject => ({
|
||||
[`
|
||||
a&-ellipsis,
|
||||
span&-ellipsis
|
||||
`]: {
|
||||
display: 'inline-block',
|
||||
maxWidth: '100%',
|
||||
},
|
||||
|
||||
'&-single-line': {
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
|
||||
'&-ellipsis-single-line': {
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
|
||||
// https://blog.csdn.net/iefreer/article/details/50421025
|
||||
'a&, span&': {
|
||||
verticalAlign: 'bottom',
|
||||
},
|
||||
},
|
||||
|
||||
'&-ellipsis-multiple-line': {
|
||||
display: '-webkit-box',
|
||||
overflow: 'hidden',
|
||||
WebkitLineClamp: 3,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
},
|
||||
});
|
||||
@ -1,54 +1,54 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@typography-prefix-cls: ~'@{ant-prefix}-typography';
|
||||
// @typography-prefix-cls: ~'@{ant-prefix}-typography';
|
||||
|
||||
.@{typography-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
// .@{typography-prefix-cls} {
|
||||
// &-rtl {
|
||||
// direction: rtl;
|
||||
// }
|
||||
|
||||
// Operation
|
||||
&-expand,
|
||||
&-edit,
|
||||
&-copy {
|
||||
.@{typography-prefix-cls}-rtl & {
|
||||
margin-right: 4px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
// // Operation
|
||||
// &-expand,
|
||||
// &-edit,
|
||||
// &-copy {
|
||||
// .@{typography-prefix-cls}-rtl & {
|
||||
// margin-right: 4px;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-expand {
|
||||
.@{typography-prefix-cls}-rtl & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
// &-expand {
|
||||
// .@{typography-prefix-cls}-rtl & {
|
||||
// float: left;
|
||||
// }
|
||||
// }
|
||||
|
||||
// Text input area
|
||||
&-edit-content {
|
||||
div& {
|
||||
&.@{typography-prefix-cls}-rtl {
|
||||
right: -@input-padding-horizontal - 1px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
// // Text input area
|
||||
// &-edit-content {
|
||||
// div& {
|
||||
// &.@{typography-prefix-cls}-rtl {
|
||||
// right: -@input-padding-horizontal - 1px;
|
||||
// left: auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-confirm {
|
||||
.@{typography-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-confirm {
|
||||
// .@{typography-prefix-cls}-rtl & {
|
||||
// right: auto;
|
||||
// left: 10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// list
|
||||
ul,
|
||||
ol {
|
||||
li {
|
||||
.@{typography-prefix-cls}-rtl& {
|
||||
margin: 0 20px 0 0;
|
||||
padding: 0 4px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// // list
|
||||
// ul,
|
||||
// ol {
|
||||
// li {
|
||||
// .@{typography-prefix-cls}-rtl& {
|
||||
// margin: 0 20px 0 0;
|
||||
// padding: 0 4px 0 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user