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

package/src/core/style/base/typography.scss

@@ -115,7 +115,8 @@ body {
     font-weight: variables.$font-weight-bold !important;
 }
 .bolder {
-    font-weight: variables.$font-weight-bolder !important;
+    font-weight: variables.$font-weight-bold !important;
+    // font-weight: variables.$font-weight-bolder !important;
 }
 
 .font-family-title {

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;
         }
     }
 }
@@ -94,6 +101,10 @@
     @include mixins.pep-button-states(weak-invert);
 }
 
+@mixin pep-button-state-weak-special() {
+    @include mixins.pep-button-states(weak-special);
+}
+
 @mixin pep-button-state-weak($color: null) {
     @include mixins.pep-button-states(weak, $color);
 }
@@ -118,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();
 
@@ -150,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 {
@@ -171,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 {
@@ -200,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;
@@ -213,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;
@@ -228,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);
             }
@@ -278,12 +302,19 @@
             &.invert {
                 @include pep-button-state-weak-invert();
             }
+            &.special {
+                @include pep-button-state-weak-special();
+            }
         }
 
         &.weak-invert {
             @include pep-button-state-weak-invert();
         }
 
+        &.weak-special {
+            @include pep-button-state-weak-special();
+        }
+
         &.regular {
             @include pep-button-state-regular();
 
@@ -332,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.
                 }
             }