refactor(calendar): update samples styles

desig9stein · desig9stein · commit 100f92e9332b · 2024-06-04T12:01:29.000+03:00
diff --git a/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss b/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;
+}
diff --git a/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss b/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;
+}
diff --git a/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.scss b/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;
 }
diff --git a/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.scss b/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);
diff --git a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.scss b/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;
diff --git a/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.html b/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">
diff --git a/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.scss b/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%;
diff --git a/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.scss b/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;
 }
diff --git a/src/app/scheduling/calendar/calendar-sample-5/calendar-sample-5.component.scss b/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;
 }
diff --git a/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss b/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;
diff --git a/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss b/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;
diff --git a/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.scss b/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;
diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss b/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);
 }
 
diff --git a/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.scss b/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;
+	}
+}
diff --git a/src/app/scheduling/calendar/multiview/multiview.component.scss b/src/app/scheduling/calendar/multiview/multiview.component.scss
@@ -8,6 +8,8 @@
 }
 
 .igx-calendar {
+	--ig-size: 2;
+	
     border-radius: 0;
 }
 
diff --git a/src/app/scheduling/monthpicker/monthpicker-sample-1/monthpicker-sample-1.component.scss b/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;
+}
diff --git a/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.scss b/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;
+}
diff --git a/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss b/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 {

Original file line number	Diff line number	Diff line change
`@@ -3,3 +3,7 @@`
`3`	`3`	`min-width: 200px;`
`4`	`4`	`margin: 8px;`
`5`	`5`	`}`
	`6`	`+`
	`7`	`+.igx-calendar {`
	`8`	`+ --ig-size: 2;`
	`9`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,8 @@`
`3`	`3`	`$border-color: color($color: gray, $variant: 300);`
`4`	`4`
`5`	`5`	`igx-calendar {`
	`6`	`+ --ig-size: 2;`
	`7`	`+`
`6`	`8`	`border: 1px solid $border-color;`
`7`	`9`	`border-radius: 6px;`
`8`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,8 @@ $border-color: color($color: gray, $variant: 300);`
`10`	`10`	`margin: 8px;`
`11`	`11`	`}`
`12`	`12`
`13`		`-.igx-calendar{`
	`13`	`+.igx-calendar {`
	`14`	`+ --ig-size: 2;`
	`15`	`+`
`14`	`16`	`border-radius: 4px;`
`15`	`17`	`}`