Files
test/web_gantt/static/src/scss/web_gantt.scss

760 lines
22 KiB
SCSS

// Define the necessary conditions to provide visual feedback on hover,
// focus, drag, clone and resize.
@mixin o-gantt-hover() {
&:hover, &:focus, &.ui-draggable-dragging, &.ui-resizable-resize {
// Avoid visual feedback if 'o_gantt_view' has class 'o_grabbing' or 'o_copying'.
@at-root #{selector-replace(&, ".o_gantt_view", ".o_gantt_view:not(.o_grabbing):not(.o_copying):not(.o_no_dragging)")} {
@content;
}
}
}
// Generate background and text for each color.
@mixin o-gantt-hoverable-colors($color) {
$color-subdle: mix($color, white, 60%);
color: color-contrast($color-subdle);
background-color: $color-subdle;
cursor: pointer;
@include o-gantt-hover() {
background-color: $color;
color: color-contrast($color);
}
}
// Generate stripes decorations for each color.
@mixin gantt-gradient-decorations($color) {
$color-subdle: mix($color, white, 60%);
background-image: repeating-linear-gradient(-45deg, $color-subdle 0 10px, lighten($color-subdle, 6%) 10px 20px);
@include o-gantt-hover() {
background-image: repeating-linear-gradient(-45deg, $color 0 10px, lighten($color, 6%) 10px 20px);
}
}
@mixin gantt-ribbon-decoration($color) {
content: '';
width: 20px;
height: 16px;
@include o-position-absolute(-11px, $left: -13px);
box-shadow: 1px 1px 0 white;
background: $color;
transform: rotate(45deg);
}
@mixin gant-today-cell() {
&.o_gantt_today {
border-color: mix($gantt-highlight-today-border, $gantt-border-color, 25%);
border-left-color: $gantt-highlight-today-border;
background-color: $gantt-highlight-today-bg;
+ .o_gantt_header_cell, + .o_gantt_cell {
border-left-color: $gantt-highlight-today-border;
}
&.o_gantt_unavailability {
background: mix($gantt-highlight-today-bg, $gantt-unavailability-bg);
}
}
}
.o_gantt_view {
// Allows to use color variables in js
--Gant__Day-background-color: #{$o-view-background-color};
--Gant__DayOff-background-color: #e9ecef;
--Gant__DayOffToday-background-color: #fffaeb;
box-shadow: 0 5px 20px -15px rgba(black, .3);
user-select: none;
@include media-breakpoint-down(md) {
.o_gantt_view_container {
width: max-content;
}
}
#o_gantt_containment {
@include o-position-absolute(0, 0, 1px, percentage(2 / $grid-columns));
}
// =============== Cursors while dragging ==============
// =======================================================
&.o_grabbing, &.o_grabbing .o_gantt_pill {
cursor: move!important;
}
&.o_copying, &.o_copying .o_gantt_pill {
cursor: copy!important;
}
&.o_no_dragging {
.o_gantt_cell_buttons, .ui-resizable-handle {
visibility: hidden;
}
&, .o_gantt_pill {
cursor: not-allowed!important;
}
}
&.o_grabbing, &.o_copying {
.o_gantt_cell_buttons,
.ui-draggable-dragging:before,
.ui-draggable-dragging .ui-resizable-handle {
visibility: hidden;
}
}
.o_dragged_pill {
opacity: .5;
}
.ui-draggable-dragging {
opacity: .8;
transform: rotate(-3deg);
box-shadow: 0 5px 25px -10px black;
transition: transform 0.6s, box-shadow 0.3s;
}
// =============== Header ==============
// =======================================
.o_gantt_header_container {
top: 0;
z-index: 10; // header should overlap the pills
.o_gantt_row_sidebar {
box-shadow: inset 0 -1px 0 $gantt-border-color;
line-height: 4.8rem;
}
.o_gantt_header_slots {
box-shadow: inset 1px 0 0 $gantt-border-color;
}
.o_gantt_header_scale {
border-top: 1px solid $gantt-border-color;
border-bottom: 1px solid $gantt-border-color;
}
.o_gantt_header_cell {
@include gant-today-cell();
border-left: 1px solid transparent;
color: $headings-color;
@include media-breakpoint-down(md) {
min-width: 0;
}
}
}
.o_gantt_row {
&:hover{
.o_gantt_group_hours {
display: initial;
}
}
}
// === All sidebar headers (Regular, Groups and Total) ====
// ========================================================
.o_gantt_row_sidebar {
color: $headings-color;
font-weight: bold;
.o_gantt_row_title {
line-height: $gantt-pill-height + 4px;
position: relative;
}
.o_gantt_progressbar, .o_gantt_text_hoverable {
right: 0;
height: 100%
}
@include media-breakpoint-down(sm) {
.o_gantt_progressbar, .o_gantt_text_mobile {
top: 50%;
height: 50%;
}
}
.o_gantt_group_hours {
display: none;
@include media-breakpoint-down(sm) {
display: block;
}
}
}
// All rows (Regular, Group Header and Total)
// ==========================================
.o_gantt_row, .o_gantt_total_row_container {
.o_gantt_pill {
z-index: 1; // pill should overlap the grid
height: $gantt-pill-height;
p {
// Prevent displaying pill's description when size is smaller than 50px
max-width: calc((100% - 50px) * 9999);
margin: 0 4px;
}
}
}
// ===== "Regular" & "Group Header" rows =====
// ===========================================
.o_gantt_row_container {
.o_gantt_row {
border-bottom: 1px solid $gantt-border-color;
background: #FFFFFF;
&:first-child {
> .o_gantt_slots_container, > .o_gantt_row_sidebar {
box-shadow: inset 0 4px 5px -3px rgba(black, .1);
}
}
.o_gantt_slots_container .o_gantt_cell.ui-drag-hover {
background: rgba(0, 160, 157, 0.3) !important;
.o_gantt_pill {
background: rgba(0, 160, 157, 0.3);
}
}
}
.o_gantt_row_thumbnail_wrapper {
.o_gantt_row_thumbnail {
width: auto;
max-height: $gantt-pill-height - 10px;
}
}
.o_gantt_cell {
@include gant-today-cell();
border-left: 1px solid $gantt-border-color;
}
}
// ============= "Regular" rows ==============
// ===========================================
.o_gantt_row_nogroup {
.o_gantt_cell {
min-height: $gantt-pill-height + 4px;
}
.o_gantt_pill {
@include o-gantt-hoverable-colors(nth($o-colors-complete, 1));
overflow: hidden;
user-select: none;
box-sizing: content-box;
&.ui-resizable-resizing, &.ui-draggable-dragging {
z-index: 2; // other pills show not hide these ones
}
&.decoration-info {
@include gantt-gradient-decorations(nth($o-colors-complete, 1));
}
.ui-resizable-e, .ui-resizable-w {
width: 10px;
}
&:hover {
.ui-resizable-e, .ui-resizable-w {
background-color: rgba(230,230,230, .5);
&:hover {
background-color: rgba(230,230,230, .8);
}
}
}
&.ui-resizable-resizing {
.ui-resizable-e, .ui-resizable-w {
background-color: rgba(black, .5);
}
}
// used for `color` attribute on <gantt>
@for $index from 2 through length($o-colors-complete) - 1 {
// @for $index from 3 through length($o-colors) {
&.o_gantt_color_#{$index - 1} {
$gantt-color: nth($o-colors-complete, $index);
@include o-gantt-hoverable-colors($gantt-color);
&.decoration-info {
@include gantt-gradient-decorations($gantt-color);
}
}
}
@each $color, $value in $theme-colors {
&.decoration-#{$color}:before {
@include gantt-ribbon-decoration($value);
}
}
}
.o_gantt_cell.o_gantt_unavailability {
background: linear-gradient(
$gantt-unavailability-bg,
$gantt-unavailability-bg
) no-repeat;
&.o_gantt_unavailable_first_half {
background-size: 50%;
}
&.o_gantt_unavailable_second_half {
background-position: right;
background-size: 50%;
}
}
.o_gantt_cell.o_gantt_unavailable_second_half.o_gantt_today {
background: linear-gradient(
to right,
$gantt-highlight-today-bg 50%,
$gantt-unavailability-bg 50%
);
background-size: 100%;
}
.o_gantt_cell_buttons {
@include o-position-absolute(0, 0, $left: 0);
display: none;
z-index: 4;
color: $body-color;
.o_gantt_cell_add {
cursor: cell;
}
.o_gantt_cell_plan {
cursor: zoom-in;
}
.o_gantt_cell_add, .o_gantt_cell_plan {
background: $gray-100;
width: 30px;
line-height: 16px;
box-shadow: 0 1px 2px rgba(black, .2);
cursor: pointer;
&:first-child {
border-bottom-left-radius: 4px;
}
&:last-child {
border-bottom-right-radius: 4px;
}
}
}
.o_gantt_pill_wrapper {
line-height: $gantt-pill-height;
margin: 0 2px;
&.o_gantt_pill_wrapper_continuous_left {
padding-left: 0;
}
&.o_gantt_pill_wrapper_continuous_right {
padding-right: 0;
}
.o_gantt_pill_resize_badge {
@include o-position-absolute($bottom: -18px);
box-shadow: 0 1px 2px 0 rgba(black, .28);
background-color: #FFFFFF;
}
&.o_gantt_consolidated_wrapper {
.o_gantt_consolidated_pill {
@include o-position-absolute(0, 0, 0, 0);
height: auto;
}
.o_gantt_consolidated_pill_title {
z-index: 2;
color: white;
}
}
}
// ==== "Regular" row - When it's an opened group's children
&.open .o_gantt_row_sidebar {
font-weight: normal;
}
// ==== "Regular" row - "Hover" State
.o_gantt_cell.o_gantt_hoverable.o_hovered {
.o_gantt_cell_buttons {
display: flex;
}
&.o_gantt_unavailability {
&.o_gantt_unavailable_first_half {
background: linear-gradient(
to right,
rgba($gantt-unavailability-bg, .7) 50%,
$gantt-highlight-hover-row 50%
);
background-size: 100%;
}
&.o_gantt_unavailable_second_half {
background: linear-gradient(
to right,
$gantt-highlight-hover-row 50%,
rgba($gantt-unavailability-bg, .7) 50%
);
background-size: 100%;
}
&.o_gantt_unavailable_full {
background: linear-gradient(
to right,
rgba($gantt-unavailability-bg, .7) 50%,
rgba($gantt-unavailability-bg, .7) 50%
);
background-size: 100%;
}
}
}
.o_gantt_row_sidebar .o_gantt_group_hours {
line-height: $gantt-pill-height + 4px;
}
}
// ==== "Group Header" rows (closed) =====
// =======================================
.o_gantt_row_group {
cursor: pointer;
&, &.open:hover {
.o_gantt_row_sidebar, .o_gantt_slots_container, .o_gantt_text_hoverable.o_gantt_group_none {
background-image: linear-gradient(darken($gantt-row-open-bg, 5%), $gantt-row-open-bg);
}
}
&:hover, &.open {
.o_gantt_row_sidebar, .o_gantt_slots_container, .o_gantt_text_hoverable.o_gantt_group_none {
background-image: linear-gradient($gantt-row-open-bg, darken($gantt-row-open-bg, 5%));
}
}
.o_gantt_row_sidebar, .o_gantt_row_title, .o_gantt_cell {
min-height: $gantt-pill-consolidated-height;
line-height: $gantt-pill-consolidated-height;
}
.o_gantt_row_sidebar .o_gantt_text_hoverable {
&.o_gantt_group_success {
background-image: linear-gradient(#add4bd, #b8dec3);
}
&.o_gantt_group_danger {
background-image: linear-gradient(#e3b2bd, #eebcc3);
}
}
.o_gantt_row_thumbnail_wrapper .o_gantt_row_thumbnail {
max-width: 17px;
}
.o_gantt_cell {
border-color: mix($gantt-row-open-bg, $gantt-border-color, 30%);
&.o_gantt_today {
background-color: mix($gantt-row-open-bg, $gantt-highlight-today-bg);
}
}
.o_gantt_pill {
border-color: $primary;
}
.o_gantt_pill_wrapper.o_gantt_consolidated_wrapper {
margin-top: 0;
line-height: $gantt-pill-consolidated-height;
.o_gantt_consolidated_pill {
@include o-position-absolute($gantt-pill-consolidated-height * .5 - 1px, 0, auto, 0);
background-color: $primary;
height: 2px;
&:before, &:after {
border-top: 4px solid transparent;
border-bottom: 5px solid transparent;
content: '';
}
&:before {
@include o-position-absolute($top: -3px, $left: 0);
border-left: 5px solid;
border-left-color: inherit;
}
&:after {
@include o-position-absolute($top: -3px, $right: 0);
border-right: 5px solid;
border-right-color: inherit;
}
}
}
// === "Group Header" rows (open) ======
// =======================================
&.open .o_gantt_cell {
&, &.o_gantt_today, &.o_gantt_today + .o_gantt_cell {
border-color: transparent;
background-color: transparent;
}
.o_gantt_pill_wrapper.o_gantt_consolidated_wrapper .o_gantt_consolidated_pill {
&:before, &:after {
top: 2px;
border: 2px solid transparent;
border-top-color: inherit;
}
&:before {
border-left-color: inherit;
}
&:after {
border-right-color: inherit;
}
}
}
}
// === "Group Header" & "TOTAL" rows ========
// ===========================================
.o_gantt_row_group, .o_gantt_total {
.o_gantt_consolidated_pill_title {
z-index: 2;
background-color: $o-view-background-color;
color: $body-color;
}
}
// ============= "TOTAL" row =================
// ===========================================
.o_gantt_total {
z-index: 2;
}
.o_gantt_total_row_container .o_gantt_row {
border-bottom: 1px solid $gantt-border-color;
.o_gantt_cell {
@include gant-today-cell();
border-left: 1px solid rgba($gantt-border-color, .25);
&:first-child {
border-left: 1px solid rgba($gantt-border-color, 1);
}
}
.o_gantt_cell, .o_gantt_row_title, .o_gantt_pill_wrapper {
min-height: $gantt-pill-height * 1.6;
line-height: $gantt-pill-height * 1.6;
}
.o_gantt_consolidated_pill_title {
bottom: 2px;
line-height: 1.5;
}
.o_gantt_pill {
@include o-position-absolute(auto, 0, 0, 0);
background-color: rgba($o-brand-odoo, .5);
}
.o_gantt_pill_wrapper:hover {
overflow: visible;
.o_gantt_pill {
background-color: rgba($o-brand-odoo, .8);
}
&:before {
@include o-position-absolute(auto, -1px, 0, -1px);
border: 1px solid $o-brand-odoo;
border-width: 0 1px;
background: rgba($o-brand-odoo, .1);
height: 100vh;
content: '';
pointer-events: none;
z-index: 1;
}
}
.o_gantt_cell:last-child .o_gantt_pill_wrapper:hover:before {
border-right: 0px;
right: 0;
}
}
.o_view_nocontent {
z-index: 11; // as we have z-index: 10 on header container so z-index: header + 1;
}
// Suggest the browsers to print background graphics (IE users will still
// need to go to their settings in order to print them)
-webkit-print-color-adjust: exact; /* Chrome, Safari */
color-adjust: exact; /*Firefox*/
}
.o_gantt_slots_container {
.o_gantt_cell {
.o_gantt_pill_wrapper {
// used for `color` attribute on <gantt>
@for $index from 1 through length($o-colors-complete) - 1 {
// @for $index from 3 through length($o-colors) {
.o_gantt_pill {
&.highlight {
z-index: 2;
}
&.o_gantt_color_#{$index - 1} {
$color: nth($o-colors-complete, $index);
&.highlight {
background-color: $color;
color: color-contrast($color);
}
.o_gantt_progress {
opacity: 0.2;
background-color: darken(nth($o-colors-complete, $index), 30%);
}
}
}
.o_connector_creator_wrapper {
&.o_gantt_color_#{$index - 1} {
$color: nth($o-colors-complete, $index);
.o_connector_creator_bullet {
background-color: $color;
color: color-contrast($color);
@include o-grab-cursor;
}
.o_connector_creator_top {
border-top: solid 1px $color;
}
.o_connector_creator_right {
border-left: solid 1px $color;
}
.o_connector_creator_bottom {
border-bottom: solid 1px $color;
}
.o_connector_creator_left {
border-right: solid 1px $color;
}
}
}
}
}
}
}
.o_connector_container {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.o_connector {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.o_connector_hovered {
z-index: 2;
}
.o_connector_stroke_button {
> rect {
cursor: pointer;
stroke: #091124;
stroke-width: 24px;
fill: white;
}
&.o_connector_stroke_reschedule_button {
line {
stroke: #00a09d;
}
&:hover{
> rect {
fill: #00a09d;
}
line {
stroke: white;
}
}
}
&.o_connector_stroke_remove_button {
g {
rect {
fill: #dd3c4f;
}
}
&:hover{
> rect {
fill: #dd3c4f;
}
g {
rect {
fill: white;
}
}
}
}
}
}
.o_connector_creator_wrapper {
z-index: 3;
position: absolute;
height: $o-connector-wrapper-height;
width: 100%
}
.o_connector_creator_wrapper_top {
top: -1 * $o-connector-wrapper-height;
}
.o_connector_creator_wrapper_bottom {
bottom: -1 * $o-connector-wrapper-height;
}
.o_connector_creator {
position: absolute;
height: $o-connector-creator-size;
width: $o-connector-creator-size;
}
.o_connector_creator_bullet {
height: $o-connector-creator-bullet-diameter;
width: $o-connector-creator-bullet-diameter;
position: absolute;
border-radius: $o-connector-creator-bullet-diameter / 2;
}
.o_connector_creator_top {
bottom: 0;
.o_connector_creator_bullet {
top: -0.5 * $o-connector-creator-bullet-diameter;
}
}
.o_connector_creator_right {
right: $o-connector-creator-size;
.o_connector_creator_bullet {
right: -0.5 * $o-connector-creator-bullet-diameter;
}
}
.o_connector_creator_bottom {
top: 0;
.o_connector_creator_bullet {
bottom: -0.5 * $o-connector-creator-bullet-diameter;
}
}
.o_connector_creator_left {
left: $o-connector-creator-size;
.o_connector_creator_bullet {
left: -0.5 * $o-connector-creator-bullet-diameter;
}
}
.o_gantt_view .o_gantt_row_nogroup .o_gantt_pill.o_gantt_color_ccc {
background-color: #ccc;
}