$header-item-height: 60px; $item-height: 50px; $details-cell-width: 320px; $border-style: 1px solid $border-gray-normal; $scroll-top-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.001) 100%); $scroll-bottom-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.001) 0%, rgba(0, 0, 0, 0.15) 100%); $column-right-gradient: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.001) 100%); .epics-roadmap-filters { .epics-details-filters { .btn-roadmap-preset { padding: 7px $gl-btn-padding; } } } .group-epics-roadmap-wrapper { padding-bottom: 0; } .breadcrumbs.group-epics-roadmap { border-bottom: $border-style; .breadcrumbs-container { border-bottom: none; } } .roadmap-container { overflow: hidden; &.overflow-reset { overflow: initial; } } .roadmap-shell { overflow-x: auto; &.prevent-vertical-scroll { overflow-y: hidden; } } .roadmap-timeline-section .timeline-header-item { .item-label, .item-sublabel .sublabel-value { color: $theme-gray-600; font-weight: 400; &.label-dark { color: $theme-gray-900; } &.label-bold { font-weight: 600; } } } .roadmap-timeline-section .timeline-header-blank:after, .epics-list-section .epic-details-cell:after { content: ''; position: absolute; top: 0; right: -$grid-size; width: $grid-size; pointer-events: none; background: $column-right-gradient; } .roadmap-timeline-section { position: sticky; position: -webkit-sticky; top: 0; z-index: 3; .timeline-header-blank, .timeline-header-item { box-sizing: border-box; float: left; height: $header-item-height; border-bottom: $border-style; background-color: $white-light; } .timeline-header-blank { position: sticky; position: -webkit-sticky; top: 0; left: 0; width: $details-cell-width; z-index: 2; &:after { height: $header-item-height; } } .timeline-header-item { &:last-of-type .item-label { border-right: none; } .item-label { padding: $gl-padding-8 $gl-padding; border-right: $border-style; border-bottom: $border-style; } .item-sublabel { position: relative; display: flex; .sublabel-value { flex-grow: 1; flex-basis: 0; text-align: center; font-size: $code_font_size; line-height: 1.5; padding: 2px 0; } .today-bar { position: absolute; top: 20px; width: 2px; background-color: $red-500; pointer-events: none; } .today-bar:before { content: ''; position: absolute; top: -2px; left: -3px; height: $grid-size; width: $grid-size; background-color: inherit; border-radius: 50%; } } } } .epics-list-section { .epics-list-item { &:hover { .epic-details-cell, .epic-timeline-cell { background-color: $theme-gray-100; } } &.epics-list-item-empty { &:hover { .epic-details-cell, .epic-timeline-cell { background-color: $white-light; border-bottom: none; } } .epic-details-cell, .epic-details-cell:after, .epic-timeline-cell { height: 100%; } } .epic-details-cell, .epic-timeline-cell { box-sizing: border-box; float: left; height: $item-height; border-bottom: $border-style; } .epic-details-cell { position: sticky; position: -webkit-sticky; left: 0; width: $details-cell-width; padding: $gl-padding-8 $gl-padding; font-size: $code_font_size; background-color: $white-light; z-index: 2; &:after { height: $item-height; } .epic-title { display: table; table-layout: fixed; width: 100%; } .epic-title .epic-url { display: table-cell; color: $theme-gray-900; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .epic-group-timeframe { color: $theme-gray-700; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .epic-group:hover { cursor: pointer; } } .epic-timeline-cell { background-color: transparent; border-right: $border-style; .timeline-bar-wrapper { position: relative; } .timeline-bar { position: absolute; top: 12px; height: 24px; background-color: $blue-500; border-radius: $border-radius-default; opacity: 0.75; &:hover { opacity: 1; } &.start-date-outside:before, &.end-date-outside:after { content: ''; position: absolute; top: 0; height: 100%; } &.start-date-outside:before, &.end-date-outside:after { border-top: 12px solid transparent; border-bottom: 12px solid transparent; } &.start-date-undefined { background: linear-gradient(to right, rgba(255, 255, 255, 0.001) 0%, $blue-200 50%, $blue-500 100%); } &.end-date-undefined { background: linear-gradient(to right, $blue-500 0%, $blue-200 50%, rgba(255, 255, 255, 0.001) 100%); } &.start-date-outside { border-top-left-radius: 0; border-bottom-left-radius: 0; &:before { left: -$grid-size; border-right: $grid-size solid $blue-500; } } &.end-date-outside { border-top-right-radius: 0; border-bottom-right-radius: 0; &:after { right: -$grid-size; border-left: $grid-size solid $blue-500; } } &.start-date-outside, &.start-date-undefined.end-date-outside { left: $grid-size; } } &:last-child { border-right: none; } } } } .roadmap-timeline-section.scroll-top-shadow .timeline-header-blank:before, .epics-list-section .scroll-bottom-shadow { height: $grid-size; width: $details-cell-width; pointer-events: none; } .roadmap-timeline-section.scroll-top-shadow .timeline-header-blank:before { content: ''; position: absolute; left: 0; bottom: -$grid-size; border-top: 1px solid $white-light; background: $scroll-top-gradient; } .epics-list-section .scroll-bottom-shadow { position: fixed; bottom: 0; background: $scroll-bottom-gradient; z-index: 2; }