refactor: style improve
This commit is contained in:
parent
1a933315e4
commit
95bab2de33
@ -505,7 +505,6 @@ export const Gantt: any = (props: any) => {
|
|||||||
scrollX={scrollX}
|
scrollX={scrollX}
|
||||||
ref={verticalGanttContainerRef}
|
ref={verticalGanttContainerRef}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{ganttEvent.changedTask && (
|
{ganttEvent.changedTask && (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
arrowIndent={arrowIndent}
|
arrowIndent={arrowIndent}
|
||||||
@ -532,15 +531,15 @@ export const Gantt: any = (props: any) => {
|
|||||||
onScroll={handleScrollY}
|
onScroll={handleScrollY}
|
||||||
rtl={rtl}
|
rtl={rtl}
|
||||||
/>
|
/>
|
||||||
|
<HorizontalScroll
|
||||||
|
svgWidth={svgWidth}
|
||||||
|
taskListWidth={taskListWidth}
|
||||||
|
scroll={scrollX}
|
||||||
|
rtl={rtl}
|
||||||
|
onScroll={handleScrollX}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<HorizontalScroll
|
|
||||||
svgWidth={svgWidth}
|
|
||||||
taskListWidth={taskListWidth}
|
|
||||||
scroll={scrollX}
|
|
||||||
rtl={rtl}
|
|
||||||
onScroll={handleScrollX}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,26 +1,33 @@
|
|||||||
|
|
||||||
import { css } from '@emotion/css';
|
import { css } from '@emotion/css';
|
||||||
|
|
||||||
export const ganttVerticalContainer=css `
|
export const ganttVerticalContainer = css`
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width:100%;
|
// width:100%;
|
||||||
border-left:2px solid #f4f2f2
|
border-left: 2px solid #f4f2f2;
|
||||||
`
|
`;
|
||||||
|
|
||||||
export const horizontalContainer=css `
|
export const horizontalContainer = css`
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
`
|
`;
|
||||||
|
|
||||||
export const wrapper =css`
|
export const wrapper = css`
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
`
|
.gantt-horizontal-scoll {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.gantt-horizontal-scoll {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
@ -25,7 +25,7 @@ export const HorizontalScroll: React.FC<{
|
|||||||
? `0px ${taskListWidth}px 0px 0px`
|
? `0px ${taskListWidth}px 0px 0px`
|
||||||
: `0px 0px 0px ${taskListWidth}px`,
|
: `0px 0px 0px ${taskListWidth}px`,
|
||||||
}}
|
}}
|
||||||
className={cx(scrollWrapper)}
|
className={`${cx(scrollWrapper)} gantt-horizontal-scoll` }
|
||||||
onScroll={onScroll}
|
onScroll={onScroll}
|
||||||
ref={scrollRef}
|
ref={scrollRef}
|
||||||
>
|
>
|
||||||
|
@ -2,8 +2,8 @@ import { css } from '@emotion/css';
|
|||||||
|
|
||||||
export const scrollWrapper = css`
|
export const scrollWrapper = css`
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
position: relative;
|
position: absolute;
|
||||||
top: -14px;
|
bottom: -4px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
/*firefox*/
|
/*firefox*/
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
@ -17,16 +17,14 @@ export const scrollWrapper = css`
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
border: 6px solid transparent;
|
border: 5px solid transparent;
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: #5c5858cc;
|
||||||
background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
}
|
}
|
||||||
&::-webkit-scrollbar-thumb:hover {
|
&::-webkit-scrollbar-thumb:hover {
|
||||||
border: 4px solid transparent;
|
border: 3px solid transparent;
|
||||||
background: rgba(0, 0, 0, 0.3);
|
background: #5c5858bd;
|
||||||
background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
|
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
Loading…
Reference in New Issue
Block a user