fix(checkbox): size and transitions (#14860)

Author: SisIvanova

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

@@ -137,7 +137,7 @@
     ), $variant);
 
     $label-margin: map.get((
-        'material': rem(12px),
+        'material': rem(2px),
         'fluent': rem(8px),
         'bootstrap': rem(8px),
         'indigo': rem(8px),
@@ -191,6 +191,10 @@
         width: $size;
         height: $size;
 
+        @if $variant == 'material' {
+            padding: rem(20px);
+        }
+
         //ripple color
         --color: #{var-get($theme, 'empty-color')};
     }
@@ -298,7 +302,6 @@
         fill: none;
         opacity: 0;
         z-index: 1;
-        transition: opacity .1s $ease-out-quad;
 
         @if $variant == 'material' {
             inset-inline-start: -.5px;

projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss

@@ -39,6 +39,7 @@
     }
 
     $theme: digest-schema($column-actions-schema);
+    $meta: map.get($theme, '_meta');
 
     @if not($title-color) and $background-color {
         $title-color: text-contrast($background-color);
@@ -48,7 +49,10 @@
         name: $name,
         elevations: $elevations,
         title-color: $title-color,
-        background-color: $background-color
+        background-color: $background-color,
+        _meta: map.merge(if($meta, $meta, ()), (
+            variant: map.get($schema, '_meta', 'theme'),
+        )),
     ));
 }
 
@@ -57,6 +61,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin column-actions($theme) {
     @include css-vars($theme);
+    $variant: map.get($theme, '_meta', 'variant');
 
     %column-actions-display {
         display: flex;
@@ -66,6 +71,27 @@
         width: 100%;
         flex: 1 1 auto;
         min-width: rem(180px);
+
+        @if $variant == 'material' {
+            %cbx-composite-wrapper {
+                padding: 0;
+            }
+
+            %cbx-label-pos--after {
+                margin-inline-start: rem(12px);
+            }
+
+            %cbx-label-pos--before {
+                margin-inline-end: rem(12px);
+            }
+
+            %cbx-label-pos--before,
+            %cbx-label-pos--after {
+                &:empty {
+                    margin: 0;
+                }
+            }
+        }
     }
 
     %column-actions-title {

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -100,7 +100,15 @@
     }
 
     %igx-combo__checkbox {
-        margin-inline-end: rem(8);
+        margin-inline-end: rem(8px);
+
+        @if $variant == 'material' {
+            margin-inline-end: rem(16px);
+
+            div {
+                padding: 0;
+            }
+        }
     }
 
     %igx-combo__drop-down {

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

@@ -1068,6 +1068,27 @@
 
         %cbx-display {
             min-width: $cbx-size;
+
+            @if $variant == 'material' {
+                %cbx-composite-wrapper {
+                    padding: 0;
+                }
+    
+                %cbx-label-pos--after {
+                    margin-inline-start: rem(12px);
+                }
+    
+                %cbx-label-pos--before {
+                    margin-inline-end: rem(12px);
+                }
+    
+                %cbx-label-pos--before,
+                %cbx-label-pos--after {
+                    &:empty {
+                        margin: 0;
+                    }
+                }
+            }
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss

@@ -82,6 +82,12 @@
             }
         }
 
+        %cbx-composite-wrapper {
+            @if $variant == 'material' {
+                padding: 0;
+            }
+        }
+
         %form-group-input--box {
             transform: none;
         }

projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss

@@ -336,6 +336,27 @@
         igx-avatar {
             --ig-size: #{if($variant == 'indigo', 2, 1)};
         }
+
+        @if $variant == 'material' {
+            %cbx-composite-wrapper {
+                padding: 0;
+            }
+
+            %cbx-label-pos--after {
+                margin-inline-start: rem(12px);
+            }
+
+            %cbx-label-pos--before {
+                margin-inline-end: rem(12px);
+            }
+
+            %cbx-label-pos--before,
+            %cbx-label-pos--after {
+                &:empty {
+                    margin: 0;
+                }
+            }
+        }
     }
 
     %igx-list--empty {

projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss

@@ -186,6 +186,12 @@
         --tree-size: var(--component-size);
         flex-direction: column;
 
+        %cbx-composite-wrapper {
+            @if $variant == 'material' {
+                padding: 0;
+            }
+        }
+
         @if $variant == 'indigo' {
             border-radius: rem(4px);
         }