Merge pull request #3485 from IgniteUI/mpopov/fix-calendar-samples

fix calendar samples

src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss

@@ -3,3 +3,7 @@
     min-width: 200px;
     margin: 8px;
 }
+
+.igx-calendar {
+	--ig-size: 2;
+}

src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss

@@ -3,3 +3,7 @@
     min-width: 200px;
     margin: 8px;
 }
+
+.igx-calendar {
+	--ig-size: 2;
+}

src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.scss

@@ -3,6 +3,8 @@
 $border-color: color($color: gray, $variant: 300);
 
 igx-calendar {
+	--ig-size: 2;
+
     border: 1px solid $border-color;
     border-radius: 6px;
 }

src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.scss

@@ -4,7 +4,9 @@
     margin: 8px;
 }
 
-.igx-calendar{
+.igx-calendar {
+	--ig-size: 2;
+
     box-shadow: 0 1px 3px 0 rgba(0,0,0,.26),
     0 1px 1px 0 rgba(0,0,0,.12),
     0 2px 1px -1px rgba(0,0,0,.08);

src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.scss

@@ -8,6 +8,10 @@
     border-radius: 6px;
 }
 
+.igx-calendar {
+	--ig-size: 2;
+}
+
 .location-wrapper {
     min-width: 200px;
     max-width: 640px;

src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.html

@@ -3,7 +3,7 @@
         <igx-calendar #calendar selection="multi" (selected)="onSelection($event)" (viewDateChanged)="viewDateChanged($event)" (activeViewChanged)="activeViewChanged($event)"></igx-calendar>
     </article>
 </div>
-<div class="calendar-section" style="width: calc(100% - 324px)">
+<div class="calendar-section">
     <div class="selected-data-area">
         <div class="logContainer">
             <div class="highlight">

src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.scss

@@ -1,4 +1,6 @@
-.igx-calendar{
+.igx-calendar {
+	--ig-size: 2;
+
     box-shadow: 0 1px 3px 0 rgba(0,0,0,.26),
     0 1px 1px 0 rgba(0,0,0,.12),
     0 2px 1px -1px rgba(0,0,0,.08);
@@ -7,11 +9,12 @@
  :host {
      display: flex;
      width: 100%;
+	 gap: 16px;
      flex-flow: row wrap;
  }
 
  button {
-     margin: 8px 0px;
+     margin: 8px 0;
  }
 
  .calendar-wrapper {
@@ -20,10 +23,10 @@
  }
 
  .calendar-section {
-     height: 383px;
+     height: 336px;
  }
 
- .selected-data-area{
+ .selected-data-area {
      overflow-y: auto;
      max-height: 500px;
      width: 100%;

src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.scss

@@ -10,6 +10,8 @@ $border-color: color($color: gray, $variant: 300);
     margin: 8px;
 }
 
-.igx-calendar{
+.igx-calendar {
+	--ig-size: 2;
+
     border-radius: 4px;
 }

src/app/scheduling/calendar/calendar-sample-5/calendar-sample-5.component.scss

@@ -10,6 +10,8 @@ $border-color: color($color: gray, $variant: 300);
     margin: 8px;
 }
 
-.igx-calendar{
+.igx-calendar {
+	--ig-size: 2;
+
     border-radius: 4px;
 }

src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss

@@ -7,6 +7,10 @@
     0 2px 1px -1px rgba(0,0,0,.08);
 }
 
+.igx-calendar {
+	--ig-size: 2;
+}
+
 .info {
     display: flex;
     justify-content: center;

src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss

@@ -1,4 +1,6 @@
 .calendar-wrapper {
+	--ig-size: 2;
+
     max-width: 700px;
     min-width: 200px;
     margin: 8px;

src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.scss

@@ -1,4 +1,6 @@
 .calendar-wrapper {
+	--ig-size: 2;
+
     max-width: 400px;
     min-width: 200px;
     margin: 8px;

src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss

@@ -7,6 +7,8 @@
 }
 
 .igx-calendar {
+	--ig-size: 2;
+
     box-shadow: elevation(4);
 }
 

src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.scss

@@ -3,3 +3,9 @@
     min-width: 200px;
     margin: 8px;
 }
+
+:host {
+	igx-years-view {
+		--ig-size: 2;
+	}
+}

src/app/scheduling/calendar/multiview/multiview.component.scss

@@ -8,6 +8,8 @@
 }
 
 .igx-calendar {
+	--ig-size: 2;
+
     border-radius: 0;
 }
 

src/app/scheduling/monthpicker/monthpicker-sample-1/monthpicker-sample-1.component.scss

@@ -2,3 +2,7 @@ igx-card {
     max-width: 400px;
     margin: 20px;
 }
+
+igx-month-picker {
+	--ig-size: 2;
+}

src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.scss

@@ -1,3 +1,7 @@
 .card-wrapper {
     max-width: 400px;
 }
+
+igx-month-picker {
+	--ig-size: 2;
+}

src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss

@@ -1,22 +1,26 @@
 @use '../../../../variables' as *;
 
 igx-month-picker {
-    max-width: 400px;
-    margin: 20px;
+	--ig-size: 2;
+
+	max-width: 400px;
 }
 
 $my-calendar-theme: calendar-theme(
-  $border-radius: 15px,
-  $content-background: #011627,
-  $picker-background: #011627,
-  $month-current-foreground: #ECAA53,
-  $month-hover-background: #ECAA53,
-  $year-current-foreground: #ECAA53,
-  $year-hover-foreground: #D37B08,
-  $navigation-color: #ECAA53,
-  $picker-hover-foreground: #D37B08,
-  $navigation-hover-color: #D37B08,
-  $picker-foreground: #ECAA53
+	$border-radius: 15px,
+	$content-background: #011627,
+	$picker-background: #011627,
+	
+	$month-current-foreground: #ecaa53,
+	$month-hover-background: #ecaa53,
+	
+	$year-current-foreground: #ecaa53,
+	$year-hover-background: #ecaa53,
+	
+	$navigation-color: #ecaa53,
+	$picker-hover-foreground: #d37b08,
+	$navigation-hover-color: #d37b08,
+	$picker-foreground: #ecaa53
 );
 
 :host ::ng-deep {