refactor(CDateRangePicker): update styles

Author: mrholek

scss/_calendar.scss

@@ -170,16 +170,16 @@
   &.range-hover .calendar-cell-inner,
   &.range-hover.selected .calendar-cell-inner {
     &::before {
-      border-top: 1px solid var(--#{$variable-prefix}calendar-cell-selected-bg);
-      border-bottom: 1px solid var(--#{$variable-prefix}calendar-cell-selected-bg);
+      border-top: 1px dashed var(--#{$variable-prefix}calendar-cell-selected-bg);
+      border-bottom: 1px dashed var(--#{$variable-prefix}calendar-cell-selected-bg);
       @include border-radius(0);
     }
   }
 
   &.range-hover:first-child .calendar-cell-inner,
   &:not(.range-hover) + .range-hover .calendar-cell-inner {
     &::before {
-      border-left: 1px solid var(--#{$variable-prefix}calendar-cell-selected-bg);
+      border-left: 1px dashed var(--#{$variable-prefix}calendar-cell-selected-bg);
       @include border-start-radius($border-radius);
     }
   }
@@ -188,11 +188,17 @@
   &.range-hover.last .calendar-cell-inner,
   &.range-hover + .range-hover:hover .calendar-cell-inner {
     &::before {
-      border-right: 1px solid var(--#{$variable-prefix}calendar-cell-selected-bg);
+      border-right: 1px dashed var(--#{$variable-prefix}calendar-cell-selected-bg);
       @include border-end-radius($border-radius);
     }
   }
 
+  &.range-hover.selected:hover .calendar-cell-inner {
+    &::before {
+      border: 0;
+    }
+  }
+
   &.selected:not(.previous):not(.next) .calendar-cell-inner,
   &.selected:not(.previous):not(.next).start .calendar-cell-inner,
   &.selected:not(.previous):not(.next).end .calendar-cell-inner {

scss/_date-picker.scss

@@ -12,14 +12,26 @@
   }
 }
 
+.date-picker-body {
+  display: grid;
+  grid-template-areas:
+    "ranges calendars"
+    "ranges timepickers";
+  grid-template-rows: auto;
+  grid-template-columns: auto auto;
+
+}
+
 .date-picker-ranges {
+  grid-area: ranges;
   width: var(--#{$variable-prefix}date-picker-ranges-width);
   padding: var(--#{$variable-prefix}date-picker-ranges-padding);
   border-right: var(--#{$variable-prefix}date-picker-ranges-border);
 }
 
 .date-picker-calendars {
   display: flex;
+  grid-area: calendars;
 
   .date-picker-calendar {
     &:not(:last-child) {
@@ -54,6 +66,7 @@
 .date-picker-timepickers {
   display: flex;
   flex-wrap: wrap;
+  grid-area: timepickers;
   justify-content: space-between;
   border-top: var(--#{$variable-prefix}date-picker-timepicker-border-top);