Open rpragesh opened 1 year ago
https://user-images.githubusercontent.com/33778579/217247490-466e9f8b-dcc2-48e1-9246-4ffade81524a.mp4
adding video to explain my issue.
I have added dropzone
<ngx-dropzone class="dropzone" #dropzonde (change)="onSelect($event)" [accept]="allExtentions" [multiple]="true" [ngClass]="{'dropped-files':browsedFiles?.length > 0}"> <ngx-dropzone-label> <img class="empty-mountain" src="assets/icons/empty states/mountain.svg" alt=""> <span class="input-label">{{ "ADD_DOCUMENT_DRAG_AND_DROP_FILES" | translate }}</span> <button igxButton="outlined" class="secondary-button" igxRipple="white">{{'DMS_ADD_DOCUMENT_BROWSE' | translate}}</button> <div class="dropping-box"> <img class="drag-drop-upload-icon" src="assets/icons/internet/cloud_download.svg" alt=""> <div class="drag-drop-upload-header-text">{{'DMS_DRAG_DROP_BLOCK_YOU_CAN_DROP_IT_NOW' | translate}}</div> <div class="drag-drop-upload-text">{{'DMS_DRAG_DROP_BLOCK_YOU_CAN_DROP_IT_NOW_SUB_TEXT' | translate}}</div> </div> </ngx-dropzone-label> </ngx-dropzone>
.dropzone { display: flex; align-items: center; height: 250px; background: var(--white); cursor: pointer; color: var(--g-600-comet); border: 2px dashed var(--g-500-granite); border-radius: 5px; font-size: var(--font-size-16); justify-content: center; ngx-dropzone-label { margin: 0px !important; display: flex; flex-direction: column; align-items: center; } } .ngx-dz-hovered { background-color: rgba(0, 65, 91, 0.7); .input-label { color: var(--w-100-snow) } .empty-mountain { filter: var(--white-filter-icon); } .dropping-box { display: block !important; z-index: 0; } .drag-drop-upload-icon { width: 95px; height: 95px; filter: var(--white-filter-icon); } .drag-drop-upload-text, .drag-drop-upload-header-text { line-height: 24px; letter-spacing: 0.15px; color: var(--white); padding-top: 1px; } .drag-drop-upload-header-text { font-size: var(--font-size-16); font-family: var(--font-family-semi-bold); } .drag-drop-upload-text { font-size: var(--font-size-14); font-family: var(--font-family-regular); } .igx-button, .input-label, .empty-mountain { display: none; } }
any idea why it is flickring on hover??
https://user-images.githubusercontent.com/33778579/217247490-466e9f8b-dcc2-48e1-9246-4ffade81524a.mp4
adding video to explain my issue.
I have added dropzone
any idea why it is flickring on hover??