refactor(themes): replace em with rem (#12338)

* refactor(themes): replace em with rem

Author: simeonoff

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

@@ -406,24 +406,24 @@
 
     $cal-header-year-margin: 0;
     $cal-header-date-margin: 0;
-    $cal-header-padding: em(16px);
+    $cal-header-padding: rem(16px);
 
     $variant: map.get($theme, 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
     $not-bootstrap-theme: $variant != 'bootstrap';
 
     $cal-picker-padding: map.get((
-        material: em(16px),
-        fluent: em(16px),
-        bootstrap: em(8px),
-        indigo-design: em(16px),
+        material: rem(16px),
+        fluent: rem(16px),
+        bootstrap: rem(8px),
+        indigo-design: rem(16px),
     ), $variant);
 
     $cal-value-w: map.get((
-        material: em(40px),
-        fluent: em(40px),
-        bootstrap: em(32px),
-        indigo-design: em(40px),
+        material: rem(40px),
+        fluent: rem(40px),
+        bootstrap: rem(32px),
+        indigo-design: rem(40px),
     ), $variant);
 
     $border-width: map.get((
@@ -444,8 +444,8 @@
     $cal-value-br: math.div($cal-value-w, 2);
     $cal-value-fw: 600;
 
-    $cal-value-month-margin: 0 em(12px);
-    $cal-value-month-height: em(91px);
+    $cal-value-month-margin: 0 rem(12px);
+    $cal-value-month-height: rem(91px);
 
     $cal-row-padding: rem(8px);
     $cal-row-margin: rem(2px) 0;
@@ -516,7 +516,7 @@
         flex-flow: row nowrap;
 
         %cal-header-display {
-            min-width: em(168px);
+            min-width: rem(168px);
         }
     }
 
@@ -555,7 +555,7 @@
 
     %cal-picker-display {
         display: flex;
-        height: em(56px);
+        height: rem(56px);
         align-items: center;
         padding-bottom: $cal-picker-padding;
         background: var-get($theme, 'picker-background-color');

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -93,8 +93,8 @@
 
     // If updating the WIDTH of the checkbox here, please update it in the grid theme as well.
     // It is under the name of $cbx-size
-    $size: em(20px);
-    $size-bs: em(16px);
+    $size: rem(20px);
+    $size-bs: rem(16px);
     $checkbox-radius: math.div($size, 2);
 
     $variant: map.get($theme, variant);
@@ -121,7 +121,7 @@
         indigo-design: none,
     ), $variant);
 
-    $label-margin: em(8px);
+    $label-margin: rem(8px);
 
     $mark-stroke: map.get((
         material: 3,
@@ -140,7 +140,7 @@
     $mark-length: 24;
     $mark-x-factor: math.div($mark-stroke, $mark-length);
 
-    $ripple-size: em(48px);
+    $ripple-size: rem(48px);
     $ripple-radius: math.div($ripple-size, 2);
 
     $ripple-theme: ripple-theme(

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -281,7 +281,7 @@
     %igx-grid-toolbar__dd-list-items {
         cursor: pointer;
         position: relative;
-        padding: em(8px) em(16px);
+        padding: rem(8px) rem(16px);
         color: var-get($theme, 'item-text-color');
         white-space: nowrap;
 

projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss

@@ -125,7 +125,7 @@
     ), $variant);
 
     $stripe-color: var-get($theme, 'stripes-color');
-    $value-fs: em(14px, 16px);
+    $value-fs: rem(14px, 16px);
     $value-fw: 600;
     $value-margin: 0;
 

projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss

@@ -77,17 +77,17 @@
     @include css-vars($theme);
     @include scale-in-out($start-scale: .9);
 
-    $label-margin: em(8px);
+    $label-margin: rem(8px);
 
     $variant: map.get($theme, variant);
     $bootstrap-theme: $variant == 'bootstrap';
     $not-bootstrap-theme: $variant != 'bootstrap';
 
     $size: map.get((
-        material: em(20px),
-        fluent: em(20px),
-        bootstrap: em(16px),
-        indigo-design: em(20px),
+        material: rem(20px),
+        fluent: rem(20px),
+        bootstrap: rem(16px),
+        indigo-design: rem(20px),
     ), $variant);
 
     $scale: map.get((
@@ -120,7 +120,7 @@
 
     $transition: all .2s ease-in;
 
-    $ripple-size: em(48px);
+    $ripple-size: rem(48px);
     $ripple-radius: math.div($ripple-size, 2);
 
     $ripple-theme: ripple-theme(

projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss

@@ -232,10 +232,10 @@
 
     $switch-thumb-height: $switch-thumb-width;
 
-    $ripple-size: em(48px);
+    $ripple-size: rem(48px);
     $ripple-radius: math.div($ripple-size, 2);
 
-    $label-margin: em(8px);
+    $label-margin: rem(8px);
 
     $input-transition: all .2s $ease-in-out-quad;