@pepperi-addons/ngx-lib 0.2.59-query-builder.13 → 0.2.61-beta.2

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

@@ -1,349 +1,346 @@
-// -----------------------------------------------------
-//  Button
-// -----------------------------------------------------
-
-@mixin pep-button-size($size) {
-
-    $button-horizontal-spacing: var(--pep-button-md-horizontal-spacing);
-    $button-min-width: var(--pep-button-md-min-width);
-    $button-height: var(--pep-button-md-height);
-    $button-font-size: var(--pep-button-sm-font-size);
-    $button-icon-height: 1.5rem;
-    $button-icon-with-text-height: 1.1rem;
-
-    @if $size == 'xl' {
-        $button-horizontal-spacing: var(--pep-button-xl-horizontal-spacing);
-        $button-min-width: var(--pep-button-xl-min-width);
-        $button-height: var(--pep-button-xl-height);
-        $button-font-size: var(--pep-button-xl-font-size);
-        $button-icon-height: 2rem;
-        $button-icon-with-text-height: 1.5rem;
-    }
-    @else if $size == 'lg' {
-        $button-horizontal-spacing: var(--pep-button-lg-horizontal-spacing);
-        $button-min-width: var(--pep-button-lg-min-width);
-        $button-height: var(--pep-button-lg-height);
-        $button-font-size: var(--pep-button-md-font-size);
-        $button-icon-height: 1.75rem;
-        $button-icon-with-text-height: 1.3rem;
-    }
-    @else if $size == 'sm' {
-        $button-horizontal-spacing: var(--pep-button-sm-horizontal-spacing);
-        $button-min-width: var(--pep-button-sm-min-width);
-        $button-height: var(--pep-button-sm-height);
-        $button-font-size: var(--pep-button-xs-font-size);
-        $button-icon-height: 1.25rem;
-        $button-icon-with-text-height: 1rem;
-    }
-    @else if $size == 'xs' {
-        $button-horizontal-spacing: var(--pep-button-xs-horizontal-spacing);
-        $button-min-width: var(--pep-button-xs-min-width);
-        $button-height: var(--pep-button-xs-height);
-        $button-font-size: var(--pep-button-xs-font-size);
-        $button-icon-height: 1rem;
-        $button-icon-with-text-height: 0.8rem;
-    }
-    @else if $size == '2xs' {
-        $button-horizontal-spacing: var(--pep-button-xxs-horizontal-spacing);
-        $button-min-width: var(--pep-button-xxs-min-width);
-        $button-height: var(--pep-button-xxs-height);
-        $button-font-size: var(--pep-button-xxs-font-size);
-        $button-icon-height: 1rem;
-        $button-icon-with-text-height: 0.8rem;
-    }
-
-    padding-left: $button-horizontal-spacing;
-    padding-right: $button-horizontal-spacing;
-    min-width: $button-min-width;
-    height: $button-height;
-    font-size: $button-font-size;
-    //line-height: inherit;
-    line-height: $button-height;
-
-    // For icon with text
-    .mat-icon {
-        height: $button-icon-with-text-height;
-        width: $button-icon-with-text-height;
-        // height: $button-icon-with-text-height !important;
-        // width: $button-icon-with-text-height !important;
-    }
-
-    // For icon only
-    &.icon-button {
-        padding-left: 0;
-        padding-right: 0;
-
-        .mat-icon {
-            height: $button-icon-height;
-            width: $button-icon-height;
-            // height: $button-icon-height !important;
-            // width: $button-icon-height !important;
-            @include align-center();
-        }
-    }
-}
-
-@mixin pep-button-state-none($pepperi-theme) {
-    @include pep-button-states($pepperi-theme, none);
-}
-
-@mixin pep-button-state-weak-invert($pepperi-theme) {
-    @include pep-button-states($pepperi-theme, weak-invert);
-}
-
-@mixin pep-button-state-weak($pepperi-theme, $color: null) {
-    @include pep-button-states($pepperi-theme, weak, $color);
-}
-
-@mixin pep-button-state-regular($pepperi-theme, $color: null) {
-    @include pep-button-states($pepperi-theme, regular, $color);
-}
-
-@mixin pep-button-state-strong($pepperi-theme, $color: null) {
-    @include pep-button-states($pepperi-theme, strong, $color);
-}
-
-.pepperi-button, .pep-button {
-    @include fix-inline-z-index();
-    transition: all 0.25s;
-    border-radius: $border-radius-md;
-    border: none;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    /*width: max-content;*/
-    max-width: 100%;
-    padding-top: 0;
-
-    .button-title {
-        @include ellipsis();
-        // @include calc(max-width, '100%'); // For none icon
-        max-width: calc(100%); // For none icon
-    }
-
-    .button-title-with-icon {
-        margin-inline-end: $spacing-sm;
-        @include ellipsis();
-        // @include calc(max-width, '100% - 1rem'); // For icon if exist
-        // max-width: calc(100% - 1rem); // For icon if exist
-
-        &.icon-before {
-            margin-inline-end: unset;
-            margin-inline-start: $spacing-sm;
-        }
-    }
-    // Default size
-    // @include pep-button-size('md');
-
-    &.chip {
-        border-radius: 2rem !important;
-    }
-
-    &.pepperi-button-limited-width, &.pep-button-limited-width {
-        max-width: 11.25rem;
-    }
-
-    @media (max-width: $screen-max-size-sm) {
-        &.pepperi-button-limited-width, &.pep-button-limited-width {
-            max-width: 8.25rem;
-        }
-    }
-
-    &.xl {
-        @include pep-button-size('xl');
-
-        .button-title-with-icon {
-            margin-inline-end: $spacing-md;
-            
-            &.icon-before {
-                margin-inline-end: unset;
-                margin-inline-start: $spacing-md;
-            }
-        }
-    }
-    &.lg {
-        @include pep-button-size('lg');
-    }
-    &.md {
-        @include pep-button-size('md');
-    }
-    &.sm {
-        @include pep-button-size('sm');
-    }
-    &.xs {
-        @include pep-button-size('xs');
-
-        .button-title-with-icon {
-            margin-inline-end: $spacing-xs;
-            
-            &.icon-before {
-                margin-inline-end: unset;
-                margin-inline-start: $spacing-xs;
-            }
-        }
-    }
-    // &.2xs {
-    //     @include pep-button-size('2xs');
-    // }
-
-    &:hover {
-        cursor: pointer;
-
-        &.disable,
-        &:disabled {
-            cursor: auto;
-        }
-    }
-    &.disable,
-    &:disabled {
-        cursor: auto;
-    }
-
-    // -----------------------------------------------------
-    //  Override material style
-    // -----------------------------------------------------
-    &.mat-button {
-        border-radius: $border-radius-md; // override material.
-
-        span {
-            &.mat-button-wrapper {
-                // display: block !important;
-                display: grid!important;
-                grid-auto-flow: column;
-                @include ellipsis();
-                max-width: inherit;
-            }
-        }
-
-        .mat-button-wrapper {
-            line-height: inherit;
-            height: 100%;
-            width: 100%;
-
-            @include align-center();
-
-            .mat-icon {
-                @include align-center();
-                vertical-align: unset; // Init material middle style
-                line-height: inherit;
-                height: inherit;
-            }
-        }
-
-        .mat-badge-content {
-            @include mat-badge-content();
-        }
-
-        &.right-alignment {
-            .mat-badge-content {
-                left: calc(#{$spacing-xs} * -1) !important;
-            }
-        }
-
-        &.left-alignment {
-            .mat-badge-content {
-                right: calc(#{$spacing-xs} * -1) !important;
-            }
-        }
-
-        &.mat-badge-small {
-            .mat-badge-content {
-                font-size: 70%;
-                // @include calc(max-width, '100% + .5rem');
-                max-width: calc(100% + .5rem);
-            }
-        }
-    }
-}
-
-@mixin pep-button-theme($pepperi-theme) {
-    .pepperi-button, .pep-button {
-        outline: unset;
-
-        &.weak {
-            @include pep-button-state-weak($pepperi-theme);
-
-            &.system-primary {
-                @include pep-button-state-weak($pepperi-theme, color-system-primary);
-            }
-            &.user-primary {
-                @include pep-button-state-weak($pepperi-theme, color-user-primary);
-            }
-            &.user-secondary {
-                @include pep-button-state-weak($pepperi-theme, color-user-secondary);
-            }
-            &.caution {
-                @include pep-button-state-weak($pepperi-theme, color-system-caution);
-            }
-            &.success {
-                @include pep-button-state-weak($pepperi-theme, color-system-success);
-            }
-            &.invert {
-                @include pep-button-state-weak-invert($pepperi-theme);
-            }
-        }
-
-        &.weak-invert {
-            @include pep-button-state-weak-invert($pepperi-theme);
-        }
-
-        &.regular {
-            @include pep-button-state-regular($pepperi-theme);
-
-            &.system-primary {
-                @include pep-button-state-regular($pepperi-theme, color-system-primary);
-            }
-            &.user-primary {
-                @include pep-button-state-regular($pepperi-theme, color-user-primary);
-            }
-            &.user-secondary {
-                @include pep-button-state-regular($pepperi-theme, color-user-secondary);
-            }
-            &.caution {
-                @include pep-button-state-regular($pepperi-theme, color-system-caution);
-            }
-            &.success {
-                @include pep-button-state-regular($pepperi-theme, color-system-success);
-            }
-        }
-
-        &.strong {
-            @include pep-button-state-strong($pepperi-theme);
-
-            &.system-primary {
-                @include pep-button-state-strong($pepperi-theme, color-system-primary);
-            }
-            &.user-primary {
-                @include pep-button-state-strong($pepperi-theme, color-user-primary);
-            }
-            &.user-secondary {
-                @include pep-button-state-strong($pepperi-theme, color-user-secondary);
-            }
-            &.caution {
-                @include pep-button-state-strong($pepperi-theme, color-system-caution);
-            }
-            &.success {
-                @include pep-button-state-strong($pepperi-theme, color-system-success);
-            }
-        }
-
-        &.none {
-            @include pep-button-state-none($pepperi-theme);
-        }
-
-        &.focused {
-            @include focus($pepperi-theme, true);
-        }
-
-        &.mat-button {
-            @include pep-badge($pepperi-theme);
-
-            &:hover {
-                .mat-button-focus-overlay {
-                    opacity: 0; // Override material default.
-                }
-            }
-        }
-    }
-}
-
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+
+// -----------------------------------------------------
+//  Button
+// -----------------------------------------------------
+
+@mixin pep-button-size($size) {
+
+    $button-horizontal-spacing: var(--pep-button-md-horizontal-spacing);
+    $button-min-width: var(--pep-button-md-min-width);
+    $button-height: var(--pep-button-md-height);
+    $button-font-size: var(--pep-button-sm-font-size);
+    $button-icon-height: 1.5rem;
+    $button-icon-with-text-height: 1.1rem;
+
+    @if $size == 'xl' {
+        $button-horizontal-spacing: var(--pep-button-xl-horizontal-spacing);
+        $button-min-width: var(--pep-button-xl-min-width);
+        $button-height: var(--pep-button-xl-height);
+        $button-font-size: var(--pep-button-xl-font-size);
+        $button-icon-height: 2rem;
+        $button-icon-with-text-height: 1.5rem;
+    }
+    @else if $size == 'lg' {
+        $button-horizontal-spacing: var(--pep-button-lg-horizontal-spacing);
+        $button-min-width: var(--pep-button-lg-min-width);
+        $button-height: var(--pep-button-lg-height);
+        $button-font-size: var(--pep-button-md-font-size);
+        $button-icon-height: 1.75rem;
+        $button-icon-with-text-height: 1.3rem;
+    }
+    @else if $size == 'sm' {
+        $button-horizontal-spacing: var(--pep-button-sm-horizontal-spacing);
+        $button-min-width: var(--pep-button-sm-min-width);
+        $button-height: var(--pep-button-sm-height);
+        $button-font-size: var(--pep-button-xs-font-size);
+        $button-icon-height: 1.25rem;
+        $button-icon-with-text-height: 1rem;
+    }
+    @else if $size == 'xs' {
+        $button-horizontal-spacing: var(--pep-button-xs-horizontal-spacing);
+        $button-min-width: var(--pep-button-xs-min-width);
+        $button-height: var(--pep-button-xs-height);
+        $button-font-size: var(--pep-button-xs-font-size);
+        $button-icon-height: 1rem;
+        $button-icon-with-text-height: 0.8rem;
+    }
+    @else if $size == '2xs' {
+        $button-horizontal-spacing: var(--pep-button-xxs-horizontal-spacing);
+        $button-min-width: var(--pep-button-xxs-min-width);
+        $button-height: var(--pep-button-xxs-height);
+        $button-font-size: var(--pep-button-xxs-font-size);
+        $button-icon-height: 1rem;
+        $button-icon-with-text-height: 0.8rem;
+    }
+
+    padding-left: $button-horizontal-spacing;
+    padding-right: $button-horizontal-spacing;
+    min-width: $button-min-width;
+    height: $button-height;
+    font-size: $button-font-size;
+    //line-height: inherit;
+    line-height: $button-height;
+
+    // For icon with text
+    .mat-icon {
+        height: $button-icon-with-text-height;
+        width: $button-icon-with-text-height;
+        // height: $button-icon-with-text-height !important;
+        // width: $button-icon-with-text-height !important;
+    }
+
+    // For icon only
+    &.icon-button {
+        padding-left: 0;
+        padding-right: 0;
+
+        .mat-icon {
+            height: $button-icon-height;
+            width: $button-icon-height;
+            // height: $button-icon-height !important;
+            // width: $button-icon-height !important;
+            @include mixins.align-center();
+        }
+    }
+}
+
+@mixin pep-button-state-none() {
+    @include mixins.pep-button-states(none);
+}
+
+@mixin pep-button-state-weak-invert() {
+    @include mixins.pep-button-states(weak-invert);
+}
+
+@mixin pep-button-state-weak($color: null) {
+    @include mixins.pep-button-states(weak, $color);
+}
+
+@mixin pep-button-state-regular($color: null) {
+    @include mixins.pep-button-states(regular, $color);
+}
+
+@mixin pep-button-state-strong($color: null) {
+    @include mixins.pep-button-states(strong, $color);
+}
+
+.pepperi-button, .pep-button {
+    @include mixins.fix-inline-z-index();
+    transition: all 0.25s;
+    border-radius: variables.$border-radius-md;
+    border: none;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    /*width: max-content;*/
+    max-width: 100%;
+    padding-top: 0;
+
+    .button-title {
+        @include mixins.ellipsis();
+        max-width: calc(100%); // For none icon
+    }
+
+    .button-title-with-icon {
+        margin-inline-end: variables.$spacing-sm;
+        @include mixins.ellipsis();
+
+        &.icon-before {
+            margin-inline-end: unset;
+            margin-inline-start: variables.$spacing-sm;
+        }
+    }
+    
+    &.chip {
+        border-radius: 2rem !important;
+    }
+
+    &.pepperi-button-limited-width, &.pep-button-limited-width {
+        max-width: 11.25rem;
+    }
+
+    @media (max-width: variables.$screen-max-size-sm) {
+        &.pepperi-button-limited-width, &.pep-button-limited-width {
+            max-width: 8.25rem;
+        }
+    }
+
+    &.xl {
+        @include pep-button-size('xl');
+
+        .button-title-with-icon {
+            margin-inline-end: variables.$spacing-md;
+            
+            &.icon-before {
+                margin-inline-end: unset;
+                margin-inline-start: variables.$spacing-md;
+            }
+        }
+    }
+    &.lg {
+        @include pep-button-size('lg');
+    }
+    &.md {
+        @include pep-button-size('md');
+    }
+    &.sm {
+        @include pep-button-size('sm');
+    }
+    &.xs {
+        @include pep-button-size('xs');
+
+        .button-title-with-icon {
+            margin-inline-end: variables.$spacing-xs;
+            
+            &.icon-before {
+                margin-inline-end: unset;
+                margin-inline-start: variables.$spacing-xs;
+            }
+        }
+    }
+    // &.2xs {
+    //     @include pep-button-size('2xs');
+    // }
+
+    &:hover {
+        cursor: pointer;
+
+        &.disable,
+        &:disabled {
+            cursor: auto;
+        }
+    }
+    &.disable,
+    &:disabled {
+        cursor: auto;
+    }
+
+    // -----------------------------------------------------
+    //  Override material style
+    // -----------------------------------------------------
+    &.mat-button {
+        border-radius: variables.$border-radius-md; // override material.
+
+        span {
+            &.mat-button-wrapper {
+                // display: block !important;
+                display: grid!important;
+                grid-auto-flow: column;
+                @include mixins.ellipsis();
+                max-width: inherit;
+            }
+        }
+
+        .mat-button-wrapper {
+            line-height: inherit;
+            height: 100%;
+            width: 100%;
+
+            @include mixins.align-center();
+
+            .mat-icon {
+                @include mixins.align-center();
+                vertical-align: unset; // Init material middle style
+                line-height: inherit;
+                height: inherit;
+            }
+        }
+
+        .mat-badge-content {
+            @include mixins.mat-badge-content();
+        }
+
+        &.right-alignment {
+            .mat-badge-content {
+                left: calc(#{variables.$spacing-xs} * -1) !important;
+            }
+        }
+
+        &.left-alignment {
+            .mat-badge-content {
+                right: calc(#{variables.$spacing-xs} * -1) !important;
+            }
+        }
+
+        &.mat-badge-small {
+            .mat-badge-content {
+                font-size: 70%;
+                max-width: calc(100% + .5rem);
+            }
+        }
+    }
+}
+
+@mixin pep-button-theme() {
+    .pepperi-button, .pep-button {
+        outline: unset;
+
+        &.weak {
+            @include pep-button-state-weak();
+
+            &.system-primary {
+                @include pep-button-state-weak(color-system-primary);
+            }
+            &.user-primary {
+                @include pep-button-state-weak(color-user-primary);
+            }
+            &.user-secondary {
+                @include pep-button-state-weak(color-user-secondary);
+            }
+            &.caution {
+                @include pep-button-state-weak(color-system-caution);
+            }
+            &.success {
+                @include pep-button-state-weak(color-system-success);
+            }
+            &.invert {
+                @include pep-button-state-weak-invert();
+            }
+        }
+
+        &.weak-invert {
+            @include pep-button-state-weak-invert();
+        }
+
+        &.regular {
+            @include pep-button-state-regular();
+
+            &.system-primary {
+                @include pep-button-state-regular(color-system-primary);
+            }
+            &.user-primary {
+                @include pep-button-state-regular(color-user-primary);
+            }
+            &.user-secondary {
+                @include pep-button-state-regular(color-user-secondary);
+            }
+            &.caution {
+                @include pep-button-state-regular(color-system-caution);
+            }
+            &.success {
+                @include pep-button-state-regular(color-system-success);
+            }
+        }
+
+        &.strong {
+            @include pep-button-state-strong();
+
+            &.system-primary {
+                @include pep-button-state-strong(color-system-primary);
+            }
+            &.user-primary {
+                @include pep-button-state-strong(color-user-primary);
+            }
+            &.user-secondary {
+                @include pep-button-state-strong(color-user-secondary);
+            }
+            &.caution {
+                @include pep-button-state-strong(color-system-caution);
+            }
+            &.success {
+                @include pep-button-state-strong(color-system-success);
+            }
+        }
+
+        &.none {
+            @include pep-button-state-none();
+        }
+
+        &.focused {
+            @include mixins.focus(true);
+        }
+
+        &.mat-button {
+            @include mixins.pep-badge();
+
+            &:hover {
+                .mat-button-focus-overlay {
+                    opacity: 0; // Override material default.
+                }
+            }
+        }
+    }
+}
+