[MOV] web, calendar: move common scss into web

Prior to this commit, some of the main styles related to event elements in calendars were set in the Calendar module. This created layout issues when we installed independent modules without installing the Calendar module (eg. `planning` or `hr_payroll`). To fix that, this commit moves the necessary styles into `web`. task-3617329 Part of task-3575827 Part-of: odoo#154964
timimsms · Mar 26, 2024 · 2b967b5 · 2b967b5
1 parent 7f5f296
commit 2b967b5
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 35 deletions.
diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss
@@ -26,13 +26,11 @@
 
 .o_calendar_renderer .fc-event {
     &:not(.o_event_dot) {
-        --o-overlay-opacity: .5;
-
         &.o_attendee_status_active {
             --o-bg-opacity: 1;
         }
 
-        &.o_attendee_status_tentative, &.o_event_hatched {
+        &.o_attendee_status_tentative {
             --o-bg-opacity: .5;
         }
 
@@ -47,22 +45,6 @@
     }
 
     &.o_event_dot {
-        --o-overlay-opacity: .25;
-
-        display: flex;
-        align-items: center;
-        gap: map-get($spacers, 1 );
-        border: none;
-        background-color: rgba(var(--o-event-bg--subtle-rgb), var(--o-bg-opacity));
-
-        &:before {
-            z-index: 2;
-            display: inline-block;
-            font-family: Fontawesome;
-            color: var(--o-event-bg, #{$info});
-            content: '\f111'; // fa-circle
-        }
-
         &.o_attendee_status_needsAction, &.o_event_hatched {
             &:before {
                 content: "\f1db"; // fa-circle-thin
@@ -80,10 +62,6 @@
         &.o_attendee_status_alone {
             content: "\f06a"; // fa-exclamation-circle
         }
-
-        &:hover {
-            --o-bg-opacity: 1;
-        }
     }
 
     &.o_attendee_status_declined, &.o_event_striked {
@@ -92,15 +70,3 @@
         }
     }
 }
-
-@for $-i from 1 through length($o-colors-complete) {
-    $-color: nth($o-colors-complete, $-i);
-    $-color-subtle: mix($o-white, $-color, 85%);
-
-    .o_calendar_renderer .fc-event.o_calendar_color_#{$-i - 1} {
-        --o-event-bg: #{$-color};
-        --o-event-bg-rgb: #{to-rgb($-color)};
-        --o-event-bg--subtle: #{$-color-subtle};
-        --o-event-bg--subtle-rgb: #{to-rgb($-color-subtle)};
-    }
-}
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.scss b/addons/web/static/src/views/calendar/calendar_renderer.scss
@@ -72,6 +72,34 @@
                 }
             }
         }
+
+        &:not(.o_event_dot) {
+            --o-overlay-opacity: .5;
+
+            &.o_event_hatched {
+                --o-bg-opacity: .5;
+            }
+        }
+
+        &.o_event_dot {
+            --o-overlay-opacity: .25;
+
+            display: flex;
+            align-items: center;
+            gap: map-get($spacers, 1);
+            border: none;
+
+            &:before {
+                z-index: 2;
+                display: inline-block;
+                font-family: Fontawesome;
+                content: '\f111'; // fa-circle
+            }
+
+            &:hover {
+                --o-bg-opacity: 1;
+            }
+        }
     }
 
     .o_calendar_widget {
@@ -593,6 +621,9 @@
 
     .o_calendar_renderer .fc-view {
         .o_calendar_color_#{$i - 1} {
+            --o-event-bg: #{$color};
+            --o-event-bg--subtle-rgb: #{to-rgb($color-subtle)};
+
             &.fc-bgevent, &:not(.o_event_dot) .fc-bg {
                 background-color: $color-subtle;
             }
@@ -618,6 +649,14 @@
                 color: color-contrast($color-subtle);
                 border-color: tint-color($color, 50%);
             }
+
+            &.o_event_dot {
+                background-color: rgba(var(--o-event-bg--subtle-rgb), var(--o-bg-opacity));
+
+                &:before {
+                    color: var(--o-event-bg, #{$info});
+                }
+            }
         }
     }