@pepperi-addons/ngx-lib 0.4.2-scroll.7 → 0.5.0-ng15.1

package/src/core/style/components/button.scss

@@ -58,13 +58,15 @@
     padding-left: $button-horizontal-spacing;
     padding-right: $button-horizontal-spacing;
     min-width: $button-min-width;
-    height: $button-height;
+    // Avner MDC style changes
+    height: $button-height !important;
     font-size: $button-font-size;
     //line-height: inherit;
     line-height: $button-height;
 
     // For icon with text
-    .mat-icon {
+    .mat-icon,
+    .mat-mdc-icon {
         height: $button-icon-with-text-height;
         width: $button-icon-with-text-height;
         // height: $button-icon-with-text-height !important;
@@ -72,16 +74,21 @@
     }
 
     // For icon only
-    &.icon-button {
+    &.icon-button,
+    &.mat-icon-button,
+    &.mat-mdc-icon-button {
         padding-left: 0;
         padding-right: 0;
 
-        .mat-icon {
+        .mat-icon,
+        .mat-mdc-icon {
             height: $button-icon-height;
             width: $button-icon-height;
             // height: $button-icon-height !important;
             // width: $button-icon-height !important;
             @include mixins.align-center();
+            // Avner MDC style changes
+            margin-right: 0 !important;
         }
     }
 }
@@ -122,12 +129,14 @@
     max-width: 100%;
     padding-top: 0;
 
-    .button-title {
+    .button-title,
+    .button-title-with-icon {
         @include mixins.ellipsis();
         max-width: calc(100%); // For none icon
     }
 
-    .button-title-with-icon {
+    .button-title-with-icon,
+    .button-mdc-title-with-icon {
         margin-inline-end: variables.$spacing-sm;
         @include mixins.ellipsis();
 
@@ -154,7 +163,8 @@
     &.xl {
         @include pep-button-size('xl');
 
-        .button-title-with-icon {
+        .button-title-with-icon,
+        .button-mdc-title-with-icon {
             margin-inline-end: variables.$spacing-md;
             
             &.icon-before {
@@ -175,7 +185,8 @@
     &.xs {
         @include pep-button-size('xs');
 
-        .button-title-with-icon {
+        .button-title-with-icon,
+        .button-mdc-title-with-icon {
             margin-inline-end: variables.$spacing-xs;
             
             &.icon-before {
@@ -204,11 +215,13 @@
     // -----------------------------------------------------
     //  Override material style
     // -----------------------------------------------------
-    &.mat-button {
+    &.mat-button,
+    &.mat-mdc-button {
         border-radius: variables.$border-radius-md; // override material.
 
         span {
-            &.mat-button-wrapper {
+            &.mat-button-wrapper,
+            &.mat-mdc-button-wrapper {
                 // display: block !important;
                 display: grid!important;
                 grid-auto-flow: column;
@@ -217,14 +230,16 @@
             }
         }
 
-        .mat-button-wrapper {
+        .mat-button-wrapper,
+        .mat-mdc-button-wrapper {
             line-height: inherit;
             height: 100%;
             width: 100%;
 
             @include mixins.align-center();
 
-            .mat-icon {
+            .mat-icon,
+            .mat-mdc-icon {
                 @include mixins.align-center();
                 vertical-align: unset; // Init material middle style
                 line-height: inherit;
@@ -232,24 +247,29 @@
             }
         }
 
-        .mat-badge-content {
+        .mat-badge-content,
+        .mat-mdc-badge-content {
             @include mixins.mat-badge-content();
         }
 
         &.right-alignment {
-            .mat-badge-content {
+            .mat-badge-content,
+            .mat-mdc-badge-content {
                 left: calc(#{variables.$spacing-xs} * -1) !important;
             }
         }
 
         &.left-alignment {
-            .mat-badge-content {
+            .mat-badge-content,
+            .mat-mdc-badge-content {
                 right: calc(#{variables.$spacing-xs} * -1) !important;
             }
         }
 
-        &.mat-badge-small {
-            .mat-badge-content {
+        &.mat-badge-small,
+        &.mat-mdc-badge-small {
+            .mat-badge-content,
+            .mat-mdc-badge-content {
                 font-size: 70%;
                 max-width: calc(100% + .5rem);
             }
@@ -343,11 +363,13 @@
             @include mixins.focus(true);
         }
 
-        &.mat-button {
+        &.mat-button,
+        &.mat-mdc-button {
             @include mixins.pep-badge();
 
             &:hover {
-                .mat-button-focus-overlay {
+                .mat-button-focus-overlay,
+                .mat-mdc-button-focus-overlay {
                     opacity: 0; // Override material default.
                 }
             }

package/src/core/style/components/checkbox.scss

@@ -5,6 +5,10 @@
 // -----------------------------------------------------
 //  Checkbox
 // -----------------------------------------------------
+@mixin pep-checkbox-checked-mark() {
+    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==");
+}
+
 @mixin pep-checkbox-size($size) {
     $checkbox-width: 1.5rem;
     $checkbox-height: 1.5rem;
@@ -30,106 +34,59 @@
     height: $checkbox-height;
 }
 
-.checkbox-as-title {
-    margin-bottom: 0.5rem !important;
-    min-height: unset !important;
-
-    .pep-checkbox-container {
-        background: unset !important;
-        padding-left: unset !important;
-        padding-right: unset !important;
-
-        .mat-checkbox-inner-container {
-            margin-left: 0 !important;
-            margin-right: 0 !important;
-        }
-
-        .mat-checkbox-layout {
-            @include mixins.font-body(variables.$fs-lg, variables.$lh-lg);
-            font-weight: variables.$font-weight-bold !important;
-
-            .mat-checkbox-label span {
-                margin: 0 0.5rem;
-            }
-        }
-    }
-
-    // &.sub-title {
-    //     .pep-checkbox-container {
-    //         .mat-checkbox-layout {
-    //             @include mixins.font-body(variables.$fs-xl, variables.$lh-xl);
-    //             font-weight: variables.$font-weight-bold !important;
-    
-    //             .mat-checkbox-label span {
-    //                 margin: 0 0.5rem;
-    //             }
-    //         }
-    //     }
-    // }
-}
-
-.checkbox-no-background {
-    .pep-checkbox-container {
-        background: unset !important;
-        padding-left: unset !important;
-        padding-right: unset !important;
-
-        &.disable {
-            background: unset !important;
-        }
-
-        .mat-checkbox-inner-container {
-            margin-left: 0 !important;
-            margin-right: 0 !important;
-        }
-
-        .mat-checkbox-layout {
-            .mat-checkbox-label span {
-                margin: 0 0.5rem;
-            }
-        }
-    }
-}
-
 // -----------------------------------------------------
 //  Override material style
 // -----------------------------------------------------
-.mat-checkbox-anim-checked-unchecked .mat-checkbox-background {
+.mat-checkbox-anim-checked-unchecked .mat-checkbox-background,
+.mat-mdc-checkbox-anim-checked-unchecked .mdc-checkbox__background {
     display: none;
 }
 
 .mat-checkbox-disabled,
+.mat-mdc-checkbox-disabled,
 .mat-checkbox-indeterminate,
-.mat-checkbox-checked {
-    .mat-checkbox-layout {
-        .mat-checkbox-background {
+.mat-mdc-checkbox-indeterminate
+.mat-checkbox-checked,
+.mat-mdc-checkbox-checked {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
+        .mat-checkbox-background,
+        .mdc-checkbox__background {
             border-radius: variables.$border-radius-md;
         }
     }
 }
 
-.mat-checkbox-checked {
-    .mat-checkbox-layout {
-        .mat-checkbox-background {
-            content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==");
+.mat-checkbox-checked,
+.mat-mdc-checkbox-checked {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
+        .mat-checkbox-background,
+        .mdc-checkbox__background {
+            @include pep-checkbox-checked-mark();
             width: inherit;
             height: inherit;
 
-            .mat-checkbox-checkmark-path {
+            .mat-checkbox-checkmark-path,
+            .mat-mdc-checkbox-checkmark-path {
                 display: none;
             }
         }
     }
 }
 
-.mat-checkbox-indeterminate {
-    .mat-checkbox-layout {
-        .mat-checkbox-background {
+.mat-checkbox-indeterminate,
+.mat-mdc-checkbox-indeterminate {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
+        .mat-checkbox-background,
+        .mdc-checkbox__background {
             content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+Cgk8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iNCIgeD0iNCIgeT0iMTAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcng9IjIiLz4KICAgPCEtLSA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIgLz4gLS0+CiAgPC9zdmc+");
             width: inherit;
             height: inherit;
 
-            .mat-checkbox-checkmark-path {
+            .mat-checkbox-checkmark-path,
+            .mat-mdc-checkbox-checkmark-path {
                 display: none;
             }
         }
@@ -142,7 +99,8 @@
     display: grid;
     align-items: center;
 
-    .mat-checkbox {
+    .mat-checkbox,
+    .mat-mdc-checkbox {
         @include mixins.fix-inline-z-index();
         height: inherit;
         display: flex;
@@ -150,11 +108,13 @@
         cursor: default;
     }
 
-    .mat-checkbox-layout {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
         cursor: pointer;
     }
 
-    .mat-checkbox-inner-container {
+    .mat-checkbox-inner-container,
+    .mat-mdc-checkbox-inner-container {
         // margin: auto 0rem auto 0.5rem !important; // override default auto margin.
         // margin: auto 0.5rem auto 0.5rem !important; // override default auto margin.
         margin: auto 0 !important; // override default auto margin.
@@ -176,7 +136,8 @@
     }
 
     &.right-alignment {
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             // margin: auto 0.5rem auto 0rem !important;
             // margin: auto 0.5rem auto 0.5rem !important;
             margin-left: 0 !important;
@@ -190,19 +151,17 @@
     }
 
     &.center-alignment {
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             // margin: auto 0 auto 0 !important;
             margin-left: 0 !important;
             margin-right: 0 !important;
         }
 
-        .mat-checkbox-layout {
+        .mat-checkbox-layout,
+        .mat-mdc-checkbox-layout {
             width: 100% !important;
             justify-content: center !important;
-
-            .mat-checkbox-label {
-                // margin-left: 0.25rem;
-            }
         }
 
         // .emoji-icon {
@@ -219,6 +178,15 @@
 
 .pepperi-report-checkbox, .pep-report-checkbox {
     background: transparent !important;
+
+    .mat-checkbox-background,
+    .mdc-checkbox__background,
+    .mat-checkbox-frame,
+    .mat-mdc-checkbox-frame {
+        border: unset !important;
+        background: unset !important;
+        box-shadow: unset !important;
+    }
 }
 
 .pepperi-card-checkbox, .pep-card-checkbox {
@@ -238,14 +206,16 @@
         width: 2.5rem !important;
     }
 
-    .mat-checkbox-layout {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
         width: 100% !important;
         height: auto;
         align-items: center !important;
         vertical-align: unset; // override default auto margin.
     }
 
-    .mat-checkbox-inner-container {
+    .mat-checkbox-inner-container,
+    .mat-mdc-checkbox-inner-container {
         margin: auto 0.25rem;
     }
 
@@ -264,7 +234,8 @@
         &.no-title {
             width: variables.$card-field-height !important; // 1.5rem !important;
 
-            .mat-checkbox-inner-container {
+            .mat-checkbox-inner-container,
+            .mat-mdc-checkbox-inner-container {
                 // margin: auto 0.5rem auto 0rem !important;
                 // margin: auto 0.5rem auto 0.5rem !important;
                 margin-left: 0 !important;
@@ -285,11 +256,13 @@
             @include mixins.font-size(variables.$fs-xs);
         }
 
-        .mat-checkbox-layout {
+        .mat-checkbox-layout,
+        .mat-mdc-checkbox-layout {
             height: 1.5rem;
         }
 
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             border-radius: variables.$border-radius-md;
 
             @include pep-checkbox-size('sm');
@@ -299,14 +272,11 @@
     &.disable {
         background: transparent !important;
         padding: 0 !important;
-
-        .mat-checkbox-inner-container {
-            //margin-left: 0;
-        }
     }
 }
 
-.mat-checkbox-layout {
+.mat-checkbox-layout,
+.mat-mdc-checkbox-layout {
     @include mixins.fix-inline-z-index();
     // height: inherit;
     margin-bottom: unset; // Cancel bootstrap defaults for Label.
@@ -318,17 +288,20 @@
     display: grid !important;
     grid-auto-flow: column;
 
-    .mat-checkbox-inner-container {
+    .mat-checkbox-inner-container,
+    .mat-mdc-checkbox-inner-container {
         border-radius: variables.$border-radius-md;
 
         @include pep-checkbox-size('lg');
 
-        .mat-checkbox-ripple {
+        .mat-checkbox-ripple,
+        .mat-mdc-checkbox-ripple {
             display: none;
         }
     }
 
-    .mat-checkbox-label {
+    .mat-checkbox-label,
+    .mat-mdc-checkbox-label {
         display: block;
         @include mixins.ellipsis();
         span {
@@ -336,7 +309,8 @@
         }
     }
 
-    .mat-checkbox-frame {
+    .mat-checkbox-frame,
+    .mat-mdc-checkbox-frame {
         height: inherit;
         width: inherit;
         display: flex;
@@ -345,33 +319,40 @@
 }
 
 // disabled
-.mat-checkbox-disabled {
+.mat-checkbox-disabled,
+.mat-mdc-checkbox-disabled {
     cursor: auto;
 
-    .mat-checkbox-layout {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
         cursor: auto;
     }
 }
 
 // Sizes
-.mat-checkbox {
+.mat-checkbox,
+.mat-mdc-checkbox {
     &.lg {
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             @include pep-checkbox-size('lg');
         }
     }
     &.md {
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             @include pep-checkbox-size('md');
         }
     }
     &.sm {
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             @include pep-checkbox-size('sm');
         }
     }
     &.xs {
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             @include pep-checkbox-size('xs');
         }
     }
@@ -427,20 +408,24 @@
     // -----------------------------------------------------
     //  Override material style
     // -----------------------------------------------------
-    .mat-checkbox-layout {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
         &:hover {
-            .mat-checkbox-frame {
+            .mat-checkbox-frame,
+            .mat-mdc-checkbox-frame {
                 @include mixins.state-regular-hover(true);
             }
         }
 
         &:active {
-            .mat-checkbox-frame {
+            .mat-checkbox-frame,
+            .mat-mdc-checkbox-frame {
                 @include mixins.state-regular-active(true);
             }
         }
 
-        .mat-checkbox-frame {
+        .mat-checkbox-frame,
+        .mat-mdc-checkbox-frame {
             // border: unset;
             @include mixins.state-regular-default(true);
         }
@@ -448,61 +433,76 @@
 
     // checked
     .mat-checkbox-indeterminate,
-    .mat-checkbox-checked {
-        .mat-checkbox-layout {
+    .mat-mdc-checkbox-indeterminate,
+    .mat-checkbox-checked,
+    .mat-mdc-checkbox-checked {
+        .mat-checkbox-layout,
+        .mat-mdc-checkbox-layout {
             &:hover {
-                .mat-checkbox-background {
+                .mat-checkbox-background,
+                .mdc-checkbox__background {
                     @include mixins.state-regular-hover(true);
                     opacity: 0.7;
                 }
             }
 
             &:active {
-                .mat-checkbox-background {
+                .mat-checkbox-background,
+                .mdc-checkbox__background {
                     @include mixins.state-regular-active(true);
                 }
             }
 
-            .mat-checkbox-background {
+            .mat-checkbox-background,
+            .mdc-checkbox__background {
                 @include mixins.state-regular-default(true);
             }
         }
     }
 
-    .mat-checkbox-indeterminate {
-        .mat-checkbox-mixedmark {
+    .mat-checkbox-indeterminate,
+    .mat-mdc-checkbox-indeterminate {
+        .mat-checkbox-mixedmark,
+        .mat-mdc-checkbox-mixedmark {
             background: functions.get-pep-color(color-text, color-dimmed) !important;
         }
     }
 
     // focused
     .cdk-focused {
-        .mat-checkbox-layout {
+        .mat-checkbox-layout,
+        .mat-mdc-checkbox-layout {
             &:hover {
-                .mat-checkbox-frame {
+                .mat-checkbox-frame,
+                .mat-mdc-checkbox-frame {
                     @include mixins.state-regular-hover(true);
                     @include mixins.focus();
                 }
             }
 
             &:active {
-                .mat-checkbox-frame {
+                .mat-checkbox-frame,
+                .mat-mdc-checkbox-frame {
                     @include mixins.state-regular-active(true);
                     @include mixins.focus();
                 }
             }
 
-            .mat-checkbox-frame {
+            .mat-checkbox-frame,
+            .mat-mdc-checkbox-frame {
                 @include mixins.state-regular-focus(true);
             }
         }
     }
 
     // disabled
-    .mat-checkbox-disabled {
-        .mat-checkbox-layout {
+    .mat-checkbox-disabled,
+    .mat-mdc-checkbox-disabled {
+        .mat-checkbox-layout,
+        .mat-mdc-checkbox-layout {
             &:hover {
-                .mat-checkbox-background {
+                .mat-checkbox-background,
+                .mdc-checkbox__background {
                     @include mixins.state-regular-disable(true);
                     box-shadow: unset;
                     opacity: 0.35;
@@ -510,27 +510,31 @@
             }
 
             &:active {
-                .mat-checkbox-background {
+                .mat-checkbox-background,
+                .mdc-checkbox__background {
                     @include mixins.state-regular-disable(true);
                     box-shadow: unset;
                     opacity: 0.35;
                 }
             }
 
-            .mat-checkbox-frame {
+            .mat-checkbox-frame,
+            .mat-mdc-checkbox-frame {
                 @include mixins.state-regular-disable(true);
                 box-shadow: unset;
             }
 
-            .mat-checkbox-background {
+            .mat-checkbox-background,
+            .mdc-checkbox__background {
                 @include mixins.state-regular-disable(true);
                 box-shadow: unset;
                 opacity: 0.35;
             }
 
-            .mat-checkbox-label {
+            .mat-checkbox-label,
+            .mat-mdc-checkbox-label {
                 color: functions.get-pep-color(color-text, color-dimmed);
             }
         }
     }
-}
+}