@recursyve/nice-data-filter-kit 14.4.0 → 15.0.0

package/src/lib/components/nice-filter-view/components/advanced-filters/rule/rule.theme.scss

@@ -1,6 +1,8 @@
 @use '@angular/material' as mat;
 
 @mixin advanced-rule-theme($theme) {
+    --nice-advanced-filter-rule-border-color: #8E9297;
+
     $isDark: map-get($theme, is-dark);
     $primary: map-get($theme, primary);
     $background: map-get($theme, background);
@@ -10,9 +12,11 @@
         background: transparent;
 
         .select-filter {
-            @apply w-full min-h-12 rounded;
+            @apply w-full min-h-14 rounded;
+
+            border-color: var(--nice-advanced-filter-rule-border-color) !important;
 
-            .mat-button-wrapper {
+            .mdc-button__label {
                 @apply w-full px-2;
             }
         }
@@ -21,22 +25,18 @@
             @apply flex flex-auto max-w-50 truncate;
         }
 
-        .mat-form-field {
+        .mat-mdc-form-field {
             @apply w-full min-h-12;
 
-            .mat-form-field-wrapper {
-                @apply m-0 p-0 #{!important};
+            .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+                border-color: var(--nice-advanced-filter-rule-border-color) !important;
             }
 
-            .mat-form-field-subscript-wrapper {
+            .mat-mdc-form-field-subscript-wrapper {
                 @apply hidden;
             }
 
-            .mat-form-field-infix {
-                border-top: 0.5em solid transparent;
-            }
-
-            .mat-form-field-flex {
+            .mat-mdc-form-field-flex {
                 @apply rounded #{!important};
             }
         }
@@ -62,34 +62,34 @@
         }
 
         .add-button {
-            @apply w-12 max-w-12 h-12 max-h-12 rounded;
+            @apply w-12 max-w-12 h-12 max-h-12 min-w-12 rounded;
 
-            .mat-button-wrapper {
+            .mat-mdc-button-persistent-ripple {
                 @apply w-full h-full border border-accent rounded #{!important};
 
-                .mat-icon {
-                    @apply text-accent #{!important};
+                &::before {
+                    @apply bg-accent #{!important};
                 }
             }
 
-            .mat-ripple-element {
-                @apply bg-accent #{!important};
+            .mat-icon {
+                @apply text-accent #{!important};
             }
         }
 
         .remove-button {
-            @apply w-12 max-w-12 h-12 max-h-12 rounded;
+            @apply w-12 max-w-12 h-12 max-h-12 min-w-12 rounded;
 
-            .mat-button-wrapper {
+            .mat-mdc-button-persistent-ripple {
                 @apply w-full h-full rounded #{!important};
 
-                .mat-icon {
-                    @apply text-accent #{!important};
+                &::before {
+                    @apply bg-accent #{!important};
                 }
             }
 
-            .mat-ripple-element {
-                @apply bg-accent #{!important};
+            .mat-icon {
+                @apply text-accent #{!important};
             }
         }
     }