@recursyve/nice-data-filter-kit 13.0.1 → 13.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursyve/nice-data-filter-kit",
-  "version": "13.0.1",
+  "version": "13.0.2",
   "exports": {
     ".": {
       "sass": "./_index.scss",

package/src/lib/components/query-builder/filter-selection/filter-selection.theme.scss

@@ -0,0 +1,42 @@
+@mixin filter-selection-theme() {
+    nice-filter-selection {
+        .filter-selection-container {
+            min-width: 150px;
+            min-height: 150px;
+            max-width: 600px;
+            padding: 8px;
+
+            .mat-list {
+                &.double-groups {
+                    max-width: 50%;
+                }
+
+                &:not(.double-groups) {
+                    max-width: 100%;
+                }
+            }
+        }
+
+        .mat-list-item {
+            height: auto !important;
+            min-height: 32px !important;
+            padding: 16px;
+
+            strong {
+                font-weight: 700 !important;
+            }
+
+            &.filter {
+                padding: 8px 24px;
+                cursor: pointer;
+                user-select: none;
+
+                font-size: 14px !important;
+
+                @screen md {
+                    padding: 8px 48px;
+                }
+            }
+        }
+    }
+}

package/src/lib/components/query-builder/query-builder.theme.scss

@@ -1,6 +1,8 @@
+@import "./filter-selection/filter-selection.theme";
 @import "./rule/rule.theme";
 
 @mixin nice-query-builder-theme($theme) {
+    @include filter-selection-theme();
     @include rule-theme($theme);
 
     $background: map-get($theme, background);

package/src/lib/components/query-builder/rule/rule.theme.scss

@@ -6,6 +6,88 @@
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 
+    nice-rule {
+        background: transparent;
+
+        .select-filter {
+            @apply flex flex-full;
+
+            height: 36px;
+            max-width: 150px;
+        }
+
+        .config-name {
+            @apply flex flex-full flex-grow-0 truncate;
+
+            max-width: 90px;
+        }
+
+        .config-name-icon {
+            @apply flex flex-full;
+
+            max-width: 24px;
+        }
+
+        .rule-operator {
+            @apply flex flex-full;
+
+            max-width: 100%;
+
+            @screen md {
+                max-width: 150px;
+            }
+        }
+
+        .aligned-button,
+        .select-filter {
+            margin-bottom: 1.25em;
+        }
+
+        .aligned-text {
+            margin-bottom: 2em;
+        }
+
+        .filter-select {
+            margin-top: -14px;
+        }
+
+        .mat-form-field-infix {
+            border: none;
+            max-width: 150px;
+
+            @screen md {
+                max-width: none;
+            }
+        }
+
+        .rule-form-field {
+            flex: 0 0 188px;
+            max-width: 188px;
+            min-width: 188px;
+            width: 90%;
+
+            @screen md {
+                width: auto;
+            }
+        }
+
+        .rule-container {
+            padding: 0;
+            max-width: 100%;
+
+            &.is-single-input {
+                @screen md {
+                    max-width: 50%;
+                }
+            }
+
+            @screen md {
+                padding-left: 12px;
+                padding-right: 12px;
+            }
+        }
+    }
+
     .or-button {
         background: map-get($background, card) !important;
         color: map-get($foreground, text) !important;