refactor: style improve

This commit is contained in:
katherinehhh 2023-04-12 11:22:17 +08:00 committed by chenos
parent 1a933315e4
commit 95bab2de33
4 changed files with 30 additions and 26 deletions

View File

@ -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>
); );
}; };

View File

@ -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;
}
}
`;

View File

@ -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}
> >

View File

@ -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;
} }
`; `;