[IMP] web: match DateRangePicker with datepicker revamp

Following commit odoo/odoo@ce4e6bd4b1 , the DateTimePicker design was revamped but not the DateRangePicker. This commit adapts the DateRangePicker's styling to match the DateTimePicker's design. closes odoo/odoo#79497 X-original-commit: c5c944f4240dba8f8b100d73ef1a9c8870c705a7 Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com> Signed-off-by: Pierre Paridans (app) <app@odoo.com>
2021-11-09 10:10:58 +00:00
parent 9b0d2add11
commit a3779735ee
1 changed files with 75 additions and 58 deletions
@@ -1,69 +1,86 @@
-// Restore date range picker style
+// Match DateTimePicker styling
+
 .daterangepicker {
-    .drp-calendar {
-        .calendar-table {
-            thead {
-                tr:first-child {
-                    color: #FFFFFF;
-                    background-color: $o-brand-odoo;
-                    th {
-                        &.prev, &.next {
-                            span {
-                                color: #FFFFFF;
-                                border-color: #FFFFFF;
-                            }
-                            &:hover {
-                                background-color: darken($o-brand-odoo, 10%);
-                            }
-                        }
-                    }
-                }
-                tr:last-child {
-                    color: $o-datepicker-week-color;
-                    background-color: $o-datepicker-week-bg-color;
-                }
-                th {
-                    border-radius: 0;
-                }
+    font-family: inherit;
+
+    .calendar-table {
+        td, th {
+            border-bottom-color: $table-border-color;
+
+            &, &.start-date.end-date {
+                border-radius: 0;
            }
-            tbody {
-                tr {
-                    border-bottom: 1px solid $o-datepicker-week-bg-color;
-                    td {
-                        border-width: 0px;
-                        &:not(.off) {
-                            &.in-range {
-                                background-color: gray('200');
-                            }
-                            &.available:hover {
-                                background-color: gray('200');
-                            }
-                            &.active, &.active:hover {
-                                background-color: $o-brand-primary;
-                            }
-                        }
-                        &.off:hover {
-                            background: #FFFFFF;
-                            color: #999;
-                        }
-                    }
-                }
+
+            &:not(.active) {
+                color: gray('900');
+            }
+
+            &.prev, &.next, &.off.ends {
+                @include o-hover-opacity(.5);
            }
        }
-        .calendar-time {
-            select {
-                &.hourselect, &.minuteselect, &.secondselect, &.ampmselect {
-                    display: initial;
-                    -webkit-appearance: menulist-button;
-                    -moz-appearance: menulist-button;
-                    appearance: menulist-button;
+
+        td {
+            font-size: ($font-size-base + $font-size-sm) * .5;
+
+            &.today {
+                position: relative;
+
+                &:before {
+                    content: '';
+                    display: inline-block;
+                    position: absolute;
+                    bottom: 4px;
+                    right: 4px;
+                    border: solid transparent;
+                    border-width: 0 0 7px 7px;
+                    border-bottom-color: $o-brand-primary;
+                    border-top-color: $dropdown-border-color;
                }
            }
+
+            &.in-range {
+                background-color: rgba($o-brand-odoo, 0.3);
+                color: $o-main-text-color;
+                text-shadow: none;
+            }
+
+            &.active,
+            &.active:hover {
+                background-color: $o-brand-odoo;
+                color: $white;
+                text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+            }
+        }
+
+        thead tr {
+            &:nth-child(1) th {
+                height: 30px;
+                line-height: 30px;
+
+                &.month {
+                    font-size: $font-size-lg;
+                }
+            }
+            &:nth-child(2) th {
+                background-color: gray('100');
+                font-size: $font-size-sm;
+                font-weight: $font-weight-bold;
+                color: $o-main-text-color;
+            }
        }
    }
-    .drp-buttons {
-        .drp-selected {
-            display: none;
+
+    .calendar-time select {
+        &.hourselect, &.minuteselect, &.secondselect, &.ampmselect {
+            display: initial;
+            -webkit-appearance: menulist-button;
+            -moz-appearance: menulist-button;
+            appearance: menulist-button;
        }
    }
+
+    .drp-buttons .drp-selected {
+        display: none;
+    }
 }