mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-09 02:49:18 +08:00
demo: update the css logical properties (#54475)
This commit is contained in:
@@ -500,7 +500,7 @@ const Theme: React.FC = () => {
|
||||
className={classNames(styles.transBg)}
|
||||
selectedKeys={['Themes']}
|
||||
openKeys={['Design']}
|
||||
style={{ height: '100%', borderRight: 0 }}
|
||||
style={{ height: '100%', borderInlineEnd: 0 }}
|
||||
items={sideMenuItems}
|
||||
expandIcon={false}
|
||||
/>
|
||||
|
||||
@@ -31,7 +31,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-inline-end: 1px solid rgba(0, 0, 0, 0.1);
|
||||
`,
|
||||
|
||||
colDark: css`
|
||||
|
||||
@@ -18,7 +18,7 @@ const useStyle = createStyles(({ token }) => ({
|
||||
position: relative;
|
||||
`,
|
||||
colWrap: css`
|
||||
border-right: 1px solid ${token.colorBorderSecondary};
|
||||
border-inline-end: 1px solid ${token.colorBorderSecondary};
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@@ -20,7 +20,7 @@ export default () => {
|
||||
|
||||
.spinner-icon {
|
||||
border-top-color: ${token.colorPrimary};
|
||||
border-left-color: ${token.colorPrimary};
|
||||
border-inline-start-color: ${token.colorPrimary};
|
||||
}
|
||||
}
|
||||
`}
|
||||
|
||||
@@ -66,7 +66,7 @@ export default () => {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding-bottom: 30px;
|
||||
border-right: 0;
|
||||
border-inline-end: 0;
|
||||
}
|
||||
|
||||
.ant-row-rtl {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
||||
|
||||
exports[`renders components/drawer/demo/basic-right.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
@@ -147,7 +147,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-drawer-content acss-1g5mw59"
|
||||
class="ant-drawer-content acss-10412ne"
|
||||
role="dialog"
|
||||
style="box-shadow: -10px 0 10px #666;"
|
||||
>
|
||||
@@ -239,7 +239,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-drawer-content acss-1g5mw59"
|
||||
class="ant-drawer-content acss-10412ne"
|
||||
role="dialog"
|
||||
style="box-shadow: -10px 0 10px #666;"
|
||||
>
|
||||
|
||||
@@ -17,7 +17,7 @@ const useStyle = createStyles(({ token }) => ({
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
'my-drawer-content': {
|
||||
borderLeft: '2px dotted #333',
|
||||
borderInlineStart: '2px dotted #333',
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
@@ -9702,7 +9702,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
|
||||
class="ant-input ant-input-disabled ant-input-outlined site-input-split"
|
||||
disabled=""
|
||||
placeholder="~"
|
||||
style="width: 30px; border-left: 0; border-right: 0; pointer-events: none;"
|
||||
style="width: 30px; border-inline-start: 0; border-inline-end: 0; pointer-events: none;"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
||||
|
||||
exports[`renders components/input/demo/addon.tsx correctly 1`] = `
|
||||
<div
|
||||
@@ -3381,7 +3381,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
|
||||
class="ant-input ant-input-disabled ant-input-outlined site-input-split"
|
||||
disabled=""
|
||||
placeholder="~"
|
||||
style="width:30px;border-left:0;border-right:0;pointer-events:none"
|
||||
style="width:30px;border-inline-start:0;border-inline-end:0;pointer-events:none"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
|
||||
@@ -12,20 +12,20 @@
|
||||
}
|
||||
|
||||
.site-input-group-wrapper .site-input-right {
|
||||
border-left-width: 0;
|
||||
border-inline-start-width: 0;
|
||||
}
|
||||
|
||||
.site-input-group-wrapper .site-input-right:hover,
|
||||
.site-input-group-wrapper .site-input-right:focus {
|
||||
border-left-width: 1px;
|
||||
border-inline-start-width: 1px;
|
||||
}
|
||||
|
||||
.site-input-group-wrapper .ant-input-rtl.site-input-right {
|
||||
border-right-width: 0;
|
||||
border-inline-end-width: 0;
|
||||
}
|
||||
|
||||
.site-input-group-wrapper .ant-input-rtl.site-input-right:hover,
|
||||
.site-input-group-wrapper .ant-input-rtl.site-input-right:focus {
|
||||
border-right-width: 1px;
|
||||
border-inline-end-width: 1px;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -136,8 +136,8 @@ const App: React.FC = () => (
|
||||
className="site-input-split"
|
||||
style={{
|
||||
width: 30,
|
||||
borderLeft: 0,
|
||||
borderRight: 0,
|
||||
borderInlineStart: 0,
|
||||
borderInlineEnd: 0,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
placeholder="~"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
||||
|
||||
exports[`renders components/layout/demo/basic.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
@@ -182,7 +182,7 @@ exports[`renders components/layout/demo/component-token.tsx extend context corre
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="border-right: 0;"
|
||||
style="border-inline-end: 0;"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
@@ -4605,7 +4605,7 @@ exports[`renders components/layout/demo/top-side-2.tsx extend context correctly
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="height: 100%; border-right: 0;"
|
||||
style="height: 100%; border-inline-end: 0;"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
||||
|
||||
exports[`renders components/layout/demo/basic.tsx correctly 1`] = `
|
||||
<div
|
||||
@@ -180,7 +180,7 @@ exports[`renders components/layout/demo/component-token.tsx correctly 1`] = `
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="border-right:0"
|
||||
style="border-inline-end:0"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
@@ -2552,7 +2552,7 @@ exports[`renders components/layout/demo/top-side-2.tsx correctly 1`] = `
|
||||
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
style="height:100%;border-right:0"
|
||||
style="height:100%;border-inline-end:0"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
|
||||
@@ -66,7 +66,7 @@ const App: React.FC = () => {
|
||||
mode="inline"
|
||||
defaultSelectedKeys={['1']}
|
||||
defaultOpenKeys={['sub1']}
|
||||
style={{ borderRight: 0 }}
|
||||
style={{ borderInlineEnd: 0 }}
|
||||
items={items2}
|
||||
/>
|
||||
</Sider>
|
||||
|
||||
@@ -52,7 +52,7 @@ const App: React.FC = () => {
|
||||
mode="inline"
|
||||
defaultSelectedKeys={['1']}
|
||||
defaultOpenKeys={['sub1']}
|
||||
style={{ height: '100%', borderRight: 0 }}
|
||||
style={{ height: '100%', borderInlineEnd: 0 }}
|
||||
items={items2}
|
||||
/>
|
||||
</Sider>
|
||||
|
||||
@@ -43,7 +43,7 @@ const App: React.FC = () => {
|
||||
|
||||
const modalStyles = {
|
||||
header: {
|
||||
borderLeft: `5px solid ${token.colorPrimary}`,
|
||||
borderInlineStart: `5px solid ${token.colorPrimary}`,
|
||||
borderRadius: 0,
|
||||
paddingInlineStart: 5,
|
||||
},
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
||||
|
||||
exports[`renders components/space/demo/align.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
@@ -4817,7 +4817,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
class="ant-input ant-input-disabled ant-input-outlined site-input-split ant-input-compact-item"
|
||||
disabled=""
|
||||
placeholder="~"
|
||||
style="width: 30px; border-left: 0; border-right: 0; pointer-events: none;"
|
||||
style="width: 30px; border-inline-start: 0; border-inline-end: 0; pointer-events: none;"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
||||
|
||||
exports[`renders components/space/demo/align.tsx correctly 1`] = `
|
||||
<div
|
||||
@@ -1409,7 +1409,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
class="ant-input ant-input-disabled ant-input-outlined site-input-split ant-input-compact-item"
|
||||
disabled=""
|
||||
placeholder="~"
|
||||
style="width:30px;border-left:0;border-right:0;pointer-events:none"
|
||||
style="width:30px;border-inline-start:0;border-inline-end:0;pointer-events:none"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
|
||||
@@ -101,8 +101,8 @@ const App: React.FC = () => (
|
||||
className="site-input-split"
|
||||
style={{
|
||||
width: 30,
|
||||
borderLeft: 0,
|
||||
borderRight: 0,
|
||||
borderInlineStart: 0,
|
||||
borderInlineEnd: 0,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
placeholder="~"
|
||||
|
||||
@@ -44,18 +44,13 @@ interface DragIndexState {
|
||||
const DragIndexContext = createContext<DragIndexState>({ active: -1, over: -1 });
|
||||
|
||||
const dragActiveStyle = (dragState: DragIndexState, id: string) => {
|
||||
const { active, over, direction } = dragState;
|
||||
const { active, over } = dragState;
|
||||
// drag active style
|
||||
let style: React.CSSProperties = {};
|
||||
if (active && active === id) {
|
||||
style = { backgroundColor: 'gray', opacity: 0.5 };
|
||||
}
|
||||
// dragover dashed style
|
||||
else if (over && id === over && active !== over) {
|
||||
style =
|
||||
direction === 'right'
|
||||
? { borderRight: '1px dashed gray' }
|
||||
: { borderLeft: '1px dashed gray' };
|
||||
} else if (over && id === over && active !== over) {
|
||||
style = { borderInlineStart: '1px dashed gray' };
|
||||
}
|
||||
return style;
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
||||
|
||||
exports[`renders components/watermark/demo/basic.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
@@ -54,7 +54,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
</div>
|
||||
<form
|
||||
class="ant-form ant-form-vertical"
|
||||
style="width: 280px; flex-shrink: 0; border-left: 1px solid #eee; padding-inline-start: 16px;"
|
||||
style="width: 280px; flex-shrink: 0; border-inline-start: 1px solid #eee; padding-inline-start: 16px;"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
||||
|
||||
exports[`renders components/watermark/demo/basic.tsx correctly 1`] = `
|
||||
<div
|
||||
@@ -46,7 +46,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||
</div>
|
||||
<form
|
||||
class="ant-form ant-form-vertical"
|
||||
style="width:280px;flex-shrink:0;border-left:1px solid #eee;padding-inline-start:16px"
|
||||
style="width:280px;flex-shrink:0;border-inline-start:1px solid #eee;padding-inline-start:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
|
||||
@@ -73,7 +73,12 @@ const App: React.FC = () => {
|
||||
/>
|
||||
</Watermark>
|
||||
<Form
|
||||
style={{ width: 280, flexShrink: 0, borderLeft: '1px solid #eee', paddingInlineStart: 16 }}
|
||||
style={{
|
||||
width: 280,
|
||||
flexShrink: 0,
|
||||
borderInlineStart: '1px solid #eee',
|
||||
paddingInlineStart: 16,
|
||||
}}
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={config}
|
||||
|
||||
Reference in New Issue
Block a user