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