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

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

@@ -1,94 +1,91 @@
-// -----------------------------------------------------
-//  Input
-// -----------------------------------------------------
-.pepperi-input, .pep-input {
-    border-radius: $border-radius-md;
-    min-width: 1.5rem;
-    // width: 100%;
-    width: inherit;
-    // padding: 0.5rem 0.75rem;
-    padding: 0 0.75rem;
-    height: $form-field-height; // 2.5rem;
-
-    &:hover {
-        //cursor: pointer;
-    }
-    &:focus {
-    }
-    &:active {
-        //cursor: pointer;
-    }
-    &.read-only {
-        border-radius: 0;
-    }
-    &.disable,
-    &:disabled {
-    }
-}
-
-.pepperi-card-input, .pep-card-input {
-    &:not(.multi-rows) {
-        @include ellipsis();
-    }
-
-    padding: 0.125rem 0.25rem;
-}
-
-.pepperi-report-input, .pep-report-input {
-    // padding: 0.7rem 0.75rem;
-    padding: 0 0.25rem;
-    height: $table-row-fieldset-height; // 2.5rem;
-    line-height: $table-row-fieldset-height !important; // 2.5rem !important;
-    vertical-align: middle;
-    display: block;
-    @include ellipsis();
-
-    &.readonly {
-        // padding: 0.7rem 0.5rem;
-    }
-}
-
-@mixin pep-input-theme($pepperi-theme) {
-    .pepperi-input:not(.pepperi-checkbox-container), .pep-input:not(.pep-checkbox-container) {
-        // background: get-pep-color($pepperi-theme, color-system-primary, color-tran-30);
-        border: none;
-
-        &::placeholder {
-            color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-            opacity: 1; /* Firefox */
-        }
-
-        &::-ms-input-placeholder {
-            /* Internet Explorer 10-11 */
-            color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-        }
-
-        &::-ms-input-placeholder {
-            /* Microsoft Edge */
-            color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-        }
-
-        &::error {
-            @include state-error($pepperi-theme);
-        }
-
-        @include state-weak-default($pepperi-theme);
-        &.no-default-background {
-            background: unset;
-        }
-
-        &:hover:not(.disable) {
-            @include state-weak-hover($pepperi-theme);
-        }
-        &:focus:not(.disable) {
-            @include state-weak-focus($pepperi-theme);
-        }
-        &:active {
-            @include state-weak-active($pepperi-theme);
-        }
-        &.disable,
-        &:disabled {
-            @include state-weak-disable($pepperi-theme);
-        }
-    }
-}
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+@use '../abstracts/functions';
+
+// -----------------------------------------------------
+//  Input
+// -----------------------------------------------------
+.pepperi-input, .pep-input {
+    border-radius: variables.$border-radius-md;
+    min-width: 1.5rem;
+    width: inherit;
+    padding: 0 0.75rem;
+    height: variables.$form-field-height; // 2.5rem;
+
+    &:hover {
+        //cursor: pointer;
+    }
+    &:focus {
+    }
+    &:active {
+        //cursor: pointer;
+    }
+    &.read-only {
+        border-radius: 0;
+    }
+    &.disable,
+    &:disabled {
+    }
+}
+
+.pepperi-card-input, .pep-card-input {
+    &:not(.multi-rows) {
+        @include mixins.ellipsis();
+    }
+
+    padding: 0.125rem 0.25rem;
+}
+
+.pepperi-report-input, .pep-report-input {
+    padding: 0 0.25rem;
+    height: variables.$table-row-fieldset-height; // 2.5rem;
+    line-height: variables.$table-row-fieldset-height !important; // 2.5rem !important;
+    vertical-align: middle;
+    display: block;
+    @include mixins.ellipsis();
+}
+
+@mixin pep-input-theme() {
+    .pepperi-input:not(.pepperi-checkbox-container), .pep-input:not(.pep-checkbox-container) {
+        // background: functions.get-pep-color(color-system-primary, color-tran-30);
+        border: none;
+
+        &::placeholder {
+            color: functions.get-pep-color(color-text, color-dimmed);
+            opacity: 1; /* Firefox */
+        }
+
+        &::-ms-input-placeholder {
+            /* Internet Explorer 10-11 */
+            color: functions.get-pep-color(color-text, color-dimmed);
+        }
+
+        &::-ms-input-placeholder {
+            /* Microsoft Edge */
+            color: functions.get-pep-color(color-text, color-dimmed);
+        }
+
+        &::error {
+            @include mixins.state-error();
+        }
+
+        @include mixins.state-weak-default();
+        &.no-default-background {
+            background: unset;
+        }
+
+        &:hover:not(.disable) {
+            @include mixins.state-weak-hover();
+        }
+        &:focus:not(.disable) {
+            @include mixins.state-weak-focus();
+        }
+        &:active {
+            @include mixins.state-weak-active();
+        }
+        &.disable,
+        &:disabled {
+            @include mixins.state-weak-disable();
+        }
+    }
+}

package/src/core/style/components/quantity-selector.scss

@@ -1,14 +1,17 @@
-
-.pepperi-quantity-selector-container, .pep-quantity-selector-container {
-    .mat-form-field .mat-form-field-wrapper {
-        .mat-form-field-flex {
-            padding: 0 0.25rem !important;
-        }
-    }
-
-    .pepperi-table-quantity-selector, .pep-table-quantity-selector {
-        .mat-form-field .mat-form-field-wrapper {
-            margin-top: 0 !important;
-        }
-    }
-}
+
+// .pepperi-quantity-selector-container, .pep-quantity-selector-container {
+//     .mat-form-field .mat-form-field-wrapper {
+//         .mat-form-field-flex {
+//             padding: 0 0.25rem !important;
+//         }
+//     }
+
+//     .pepperi-table-quantity-selector, .pep-table-quantity-selector {
+//         .mat-form-field .mat-form-field-wrapper {
+//             margin-top: 0 !important;
+//         }
+//     }
+// }
+
+// @mixin pep-quantity-selector-theme() {
+// }

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

@@ -1,168 +1,152 @@
-@import '../abstracts/mixins';
-
-@mixin pep-radio-button-size($size) {
-    @if $size == 'xl' {
-        $size: 2rem;
-    }
-    @else if $size == 'lg' {
-        $size: 1.5rem;
-    }
-    @else if $size == 'md' {
-        $size: 1.25rem;
-    }
-    @else if $size == 'sm' {
-        $size: 1rem;
-    }
-    @else if $size == 'xs' {
-        $size: 0.75rem;
-    }
-
-    &.mat-radio-button {
-        .mat-radio-container,
-        .mat-radio-outer-circle,
-        .mat-radio-inner-circle {
-            width: $size;
-            height: $size;
-        }
-    }
-}
-
-// -----------------------------------------------------
-//  Override material style
-// -----------------------------------------------------
-.pepperi-radio-button, .pep-radio-button {
-    @include pep-radio-button-size('lg');
-    &.xl {
-        @include pep-radio-button-size('xl');
-    }
-    &.lg {
-        @include pep-radio-button-size('lg');
-    }
-    &.md {
-        @include pep-radio-button-size('md');
-    }
-    &.sm {
-        @include pep-radio-button-size('sm');
-    }
-    &.xs {
-        @include pep-radio-button-size('xs');
-    }
-
-    &.mat-radio-button {
-        .mat-radio-label {
-            @include fix-inline-z-index();
-            margin: 0;
-        }
-
-        &.mat-radio-checked {
-            .mat-radio-inner-circle {
-                transform: scale(0.45);
-            }
-        }
-    }
-}
-
-@mixin pep-radio-button-theme($pepperi-theme) {
-    .pepperi-radio-button, .pep-radio-button {
-        // @include state-weak-default($pepperi-theme);
-        // &.no-default-background {
-        //     background: unset;
-        // }
-        
-        // &:hover:not(.disable) {
-        //     @include state-weak-hover($pepperi-theme);
-        // }
-        // &:focus:not(.disable) {
-        //     @include state-weak-focus($pepperi-theme);
-        // }
-        // // &:active {
-        // //     @include state-weak-active($pepperi-theme);
-        // // }
-        // &.disable,
-        // &:disabled {
-        //     @include state-weak-disable($pepperi-theme);
-        // }
-        
-        &.mat-radio-button {
-            .mat-radio-inner-circle,
-            .mat-radio-outer-circle {
-                @include state-regular-default($pepperi-theme, true);
-            }
-
-            &:hover {
-                .mat-radio-inner-circle,
-                .mat-radio-outer-circle {
-                    @include state-regular-hover($pepperi-theme, true);
-                }
-            }
-
-            &:active {
-                .mat-radio-inner-circle,
-                .mat-radio-outer-circle {
-                    @include state-regular-active($pepperi-theme, true);
-                }
-            }
-
-            // checked
-            &.mat-radio-checked {
-                .mat-radio-inner-circle {
-                    border: unset;
-                    background: get-pep-color($pepperi-theme, color-system-primary, color-flat-l-10);
-                }
-
-                .mat-radio-outer-circle {
-                    @include state-regular-active($pepperi-theme, true);
-                    background: get-pep-color($pepperi-theme, color-system-primary, color-flat-r-30);
-                }
-
-                &:hover {
-                    .mat-radio-outer-circle {
-                        @include state-regular-hover($pepperi-theme, true);
-                    }
-
-                    .mat-radio-inner-circle {
-                        background: get-pep-color($pepperi-theme, color-text, color-dimmed);
-                    }
-                }
-            }
-
-            // focused
-            &.cdk-focused {
-                &:hover {
-                    .mat-radio-outer-circle {
-                        @include state-regular-hover($pepperi-theme, true);
-                        // @include focus($pepperi-theme);
-                    }
-
-                    .mat-radio-inner-circle {
-                        background: get-pep-color($pepperi-theme, color-text, color-dimmed);
-                    }
-                }
-
-                &:active {
-                    .mat-radio-outer-circle {
-                        @include state-regular-active($pepperi-theme, true);
-                        // @include focus($pepperi-theme);
-                    }
-                }
-
-                .mat-radio-outer-circle {
-                    @include state-regular-focus($pepperi-theme, true);
-                }
-            }
-
-            // disabled
-            &.mat-radio-disabled {
-                pointer-events: none;
-
-                .mat-radio-inner-circle {
-                    background: get-pep-color($pepperi-theme, color-text, color-disabled);
-                }
-
-                .mat-radio-outer-circle {
-                    @include state-regular-disable($pepperi-theme, true);
-                }
-            }
-        }
-    }
-}
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+@use '../abstracts/functions';
+
+
+@mixin pep-radio-button-size($size) {
+    @if $size == 'xl' {
+        $size: 2rem;
+    }
+    @else if $size == 'lg' {
+        $size: 1.5rem;
+    }
+    @else if $size == 'md' {
+        $size: 1.25rem;
+    }
+    @else if $size == 'sm' {
+        $size: 1rem;
+    }
+    @else if $size == 'xs' {
+        $size: 0.75rem;
+    }
+
+    &.mat-radio-button {
+        .mat-radio-container,
+        .mat-radio-outer-circle,
+        .mat-radio-inner-circle {
+            width: $size;
+            height: $size;
+        }
+    }
+}
+
+// -----------------------------------------------------
+//  Override material style
+// -----------------------------------------------------
+.pepperi-radio-button, .pep-radio-button {
+    @include pep-radio-button-size('lg');
+    &.xl {
+        @include pep-radio-button-size('xl');
+    }
+    &.lg {
+        @include pep-radio-button-size('lg');
+    }
+    &.md {
+        @include pep-radio-button-size('md');
+    }
+    &.sm {
+        @include pep-radio-button-size('sm');
+    }
+    &.xs {
+        @include pep-radio-button-size('xs');
+    }
+
+    &.mat-radio-button {
+        .mat-radio-label {
+            @include mixins.fix-inline-z-index();
+            margin: 0;
+        }
+
+        &.mat-radio-checked {
+            .mat-radio-inner-circle {
+                transform: scale(0.45);
+            }
+        }
+    }
+}
+
+@mixin pep-radio-button-theme() {
+    .pepperi-radio-button, .pep-radio-button {
+        &.mat-radio-button {
+            .mat-radio-inner-circle,
+            .mat-radio-outer-circle {
+                @include mixins.state-regular-default(true);
+            }
+
+            &:hover {
+                .mat-radio-inner-circle,
+                .mat-radio-outer-circle {
+                    @include mixins.state-regular-hover(true);
+                }
+            }
+
+            &:active {
+                .mat-radio-inner-circle,
+                .mat-radio-outer-circle {
+                    @include mixins.state-regular-active(true);
+                }
+            }
+
+            // checked
+            &.mat-radio-checked {
+                .mat-radio-inner-circle {
+                    border: unset;
+                    background: functions.get-pep-color(color-system-primary, color-flat-l-10);
+                }
+
+                .mat-radio-outer-circle {
+                    @include mixins.state-regular-active(true);
+                    background: functions.get-pep-color(color-system-primary, color-flat-r-30);
+                }
+
+                &:hover {
+                    .mat-radio-outer-circle {
+                        @include mixins.state-regular-hover(true);
+                    }
+
+                    .mat-radio-inner-circle {
+                        background: functions.get-pep-color(color-text, color-dimmed);
+                    }
+                }
+            }
+
+            // focused
+            &.cdk-focused {
+                &:hover {
+                    .mat-radio-outer-circle {
+                        @include mixins.state-regular-hover(true);
+                        // @include mixins.focus();
+                    }
+
+                    .mat-radio-inner-circle {
+                        background: functions.get-pep-color(color-text, color-dimmed);
+                    }
+                }
+
+                &:active {
+                    .mat-radio-outer-circle {
+                        @include mixins.state-regular-active(true);
+                        // @include mixins.focus();
+                    }
+                }
+
+                .mat-radio-outer-circle {
+                    @include mixins.state-regular-focus(true);
+                }
+            }
+
+            // disabled
+            &.mat-radio-disabled {
+                pointer-events: none;
+
+                .mat-radio-inner-circle {
+                    background: functions.get-pep-color(color-text, color-disabled);
+                }
+
+                .mat-radio-outer-circle {
+                    @include mixins.state-regular-disable(true);
+                }
+            }
+        }
+    }
+}