UNPKG

dhtmlx-gantt

Version:

An open source JavaScript Gantt chart that helps you illustrate a project schedule in a nice-looking chart.

135 lines (109 loc) 2.74 kB
.gantt_cal { &_quick_info { --dhx-gantt-quick-info-font-size: var(--dhx-gantt-font-size); position: absolute; z-index: 8; font-size: var(--dhx-gantt-quick-info-font-size); background: var(--dhx-gantt-popup-background); color: var(--dhx-gantt-popup-color); border: var(--dhx-gantt-popup-border); padding: calc(var(--dhx-gantt-base-padding)*2) calc(var(--dhx-gantt-base-padding)*3); border-radius: var(--dhx-gantt-border-radius); width: 300px; display: flex; flex-direction: column; box-shadow: var(--dhx-gantt-box-shadow-s); transition: left 0.5s ease, right 0.5s ease; } &_qi_tcontrols{ display: flex; justify-content: flex-end; height: 8px; .gantt_cal_qi_close_btn{ .dhx_gantt_button_icon--mixin(); width:unset; min-width: unset; padding: 2px; font-size: 18px; cursor: pointer; height: 20px; position: relative; z-index: 1; } } &_qi_title, &_qi_controls, &_qi_content { padding: 0 calc(var(--dhx-gantt-base-padding) * 3); } &_qi_title { display: flex; flex-direction: column; gap: 12px; padding-right: 14px; } &_qi_tcontent { font-size: var(--dhx-gantt-heading-font-size); font-weight: var(--dhx-gantt-heading-font-weight); line-height: 150%; position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; overflow: hidden; flex-grow: 0; text-overflow: ellipsis; white-space: nowrap; > span { text-overflow: ellipsis; overflow: hidden; } } &_qi_tcontent::before { display: var(--dhx-gantt-quick-info-dot-display, block); content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--dhx-gantt-task-background); } &_qi_tdate { font-size: var(--dhx-gantt-important-font-size); font-weight: var(--dhx-gantt-important-font-weight); line-height: var(--dhx-gantt-important-line-height); } &_qi_content{ padding-top: 16px; padding-bottom: 8px; } &_qi_controls { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding-top:8px; gap: 12px; color: var(--dhx-gantt-base-colors-primary); > div:first-child { margin-left: -3px; } } } .gantt_menu_icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; --dhx-gantt-base-colors-icons: var(--dhx-gantt-btn-color); } .dhx_gantt_icon.dhx_gantt_icon_edit, .dhx_menu_icon.dhx_gantt_icon_edit { --dhx-gantt-icon-size:var(--dhx-gantt-font-size); } .gantt_cal_quick_info.gantt_qi_hidden { display: none; }