style(calendar): fix style in rang selection #4282

Author: hanastasov

projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts

@@ -54,7 +54,6 @@ export class IgxDayItemComponent {
     public isFirstInRange = false;
 
     @Input()
-    @HostBinding('class.igx-calendar__date--range')
     public isWithinRange = false;
 
     @Output()
@@ -122,6 +121,10 @@ export class IgxDayItemComponent {
 
         return isDateInRanges(this.date.date, this.outOfRangeDates);
     }
+    @HostBinding('class.igx-calendar__date--range')
+    public get isWithinRangeCSS(): boolean {
+        return !this.isSingleSelection && this.isWithinRange;
+    }
 
     @HostBinding('class.igx-calendar__date--special')
     public get isSpecial(): boolean {

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -652,6 +652,18 @@
         }
     }
 
+    %cal-value--inactive%cal-value--selected%cal-value--first {
+        &::after {
+            background: transparent !important;
+        }
+    }
+
+    %cal-value--inactive%cal-value--selected%cal-value--last {
+        &::before {
+            background: transparent !important;
+        }
+    }
+
     %cal-value--first {
         position: relative;
         background: transparent;