@annalib/anna-core 20.6.3 → 20.6.4

package/src/lib/anna-common-scss/_easy-filter.scss

@@ -1,138 +1,138 @@
-@use "./fonts" as *;
-@use "./colors" as *;
-@use "sass:map";
-
-$intelli-filter-default-map: (
-    "inactive-text-color": $primary-color,
-    "inactive-border-color": $primary-color,
-    "inactive-bg-color": white,
-    "active-bg-color": $primary-color,
-    "active-text-color": white,
-    "active-border-color": $primary-color,
-);
-
-@mixin intelli-filter-default($padding: 5px 8px) {
-    button.intelli-filter {
-        @include fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.6px);
-        border-radius: 0.75rem;
-        height: 1.5rem;
-        margin-right: 8px;
-        display: inline-flex;
-        align-items: center;
-        padding: $padding;
-
-        &:disabled {
-            border: 1px solid #bdbdbd !important;
-            color: #4a4a4a !important;
-            background: #bdbdbd !important;
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-    }
-}
-
-@mixin intelli-filter-custom-styling($intelli-filter-map: $intelli-filter-default-map) {
-    $intelli-filter-inactive-text-color: map.get($intelli-filter-map, "inactive-text-color");
-    $intelli-filter-inactive-border-color: map.get($intelli-filter-map, "inactive-border-color");
-    $intelli-filter-inactive-bg-color: map.get($intelli-filter-map, "inactive-bg-color");
-
-    $intelli-filter-active-bg-color: map.get($intelli-filter-map, "active-bg-color");
-    $intelli-filter-active-text-color: map.get($intelli-filter-map, "active-text-color");
-    $intelli-filter-active-border-color: map.get($intelli-filter-map, "active-border-color");
-
-    color: $intelli-filter-inactive-text-color;
-    border: 1px solid $intelli-filter-inactive-border-color;
-    background: $intelli-filter-inactive-bg-color;
-
-    &.active {
-        color: $intelli-filter-active-text-color !important;
-        background: $intelli-filter-active-bg-color !important;
-        border: 1px solid $intelli-filter-active-border-color !important;
-    }
-}
-
-$only-enabled-default-map: (
-    "text-color": white,
-    "bg-color": $primary-color,
-);
-
-@mixin only-enabled-filter($enabled-styling: $only-enabled-default-map) {
-    $color: map.get($enabled-styling, "text-color");
-    $bg-color: map.get($enabled-styling, "bg-color");
-
-    button.only-enabled-button {
-        color: $color;
-        background: $bg-color;
-        cursor: default;
-        pointer-events: none;
-    }
-}
-
-$intelli-filter-icon-default-map: (
-    "icon-font-size": 14.5px,
-    "icon-margin-right": 4px,
-    "active-icon-color": white,
-);
-
-@mixin intelli-filter-icons-styling($icon-styling: $intelli-filter-icon-default-map) {
-    $icon-font-size: map.get($icon-styling, "icon-font-size");
-    $icon-margin-right: map.get($icon-styling, "icon-margin-right");
-    $icon-active-color: map.get($icon-styling, "active-icon-color");
-
-    button.intelli-filter i {
-        font-size: $icon-font-size;
-        margin-right: $icon-margin-right;
-        display: flex;
-        vertical-align: middle;
-
-        &.mdi-star {
-            color: $amber;
-            opacity: 0.5;
-        }
-
-        &.mdi-alert {
-            color: #f97b07;
-        }
-
-        &.mdi-bell {
-            color: #f3bd18;
-        }
-
-        &.mdi-file-remove-outline {
-            color: #f44336;
-            margin-right: 2px;
-        }
-    }
-
-    button.intelli-filter.active {
-        ::ng-deep svg {
-            g {
-                stroke: $icon-active-color !important;
-                fill: $icon-active-color !important;
-            }
-        }
-
-        i {
-            color: $icon-active-color;
-        }
-
-        i.mdi-star {
-            color: #ffc107;
-            opacity: 0.9;
-            display: flex;
-        }
-    }
-}
-
-.filter-label {
-    @include fonts(Roboto, 0.875rem, normal, normal, normal, normal, normal);
-    color: $charcoal;
-    margin-bottom: 4px;
-}
-
-.filter-divider {
-    width: 1px;
-    margin-right: 8px;
-    height: 24px;
-    background: #111;
-}
+@use "./fonts" as *;
+@use "./colors" as *;
+@use "sass:map";
+
+$intelli-filter-default-map: (
+    "inactive-text-color": $primary-color,
+    "inactive-border-color": $primary-color,
+    "inactive-bg-color": white,
+    "active-bg-color": $primary-color,
+    "active-text-color": white,
+    "active-border-color": $primary-color,
+);
+
+@mixin intelli-filter-default($padding: 5px 8px) {
+    button.intelli-filter {
+        @include fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.6px);
+        border-radius: 0.75rem;
+        height: 1.5rem;
+        margin-right: 8px;
+        display: inline-flex;
+        align-items: center;
+        padding: $padding;
+
+        &:disabled {
+            border: 1px solid #bdbdbd !important;
+            color: #4a4a4a !important;
+            background: #bdbdbd !important;
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    }
+}
+
+@mixin intelli-filter-custom-styling($intelli-filter-map: $intelli-filter-default-map) {
+    $intelli-filter-inactive-text-color: map.get($intelli-filter-map, "inactive-text-color");
+    $intelli-filter-inactive-border-color: map.get($intelli-filter-map, "inactive-border-color");
+    $intelli-filter-inactive-bg-color: map.get($intelli-filter-map, "inactive-bg-color");
+
+    $intelli-filter-active-bg-color: map.get($intelli-filter-map, "active-bg-color");
+    $intelli-filter-active-text-color: map.get($intelli-filter-map, "active-text-color");
+    $intelli-filter-active-border-color: map.get($intelli-filter-map, "active-border-color");
+
+    color: $intelli-filter-inactive-text-color;
+    border: 1px solid $intelli-filter-inactive-border-color;
+    background: $intelli-filter-inactive-bg-color;
+
+    &.active {
+        color: $intelli-filter-active-text-color !important;
+        background: $intelli-filter-active-bg-color !important;
+        border: 1px solid $intelli-filter-active-border-color !important;
+    }
+}
+
+$only-enabled-default-map: (
+    "text-color": white,
+    "bg-color": $primary-color,
+);
+
+@mixin only-enabled-filter($enabled-styling: $only-enabled-default-map) {
+    $color: map.get($enabled-styling, "text-color");
+    $bg-color: map.get($enabled-styling, "bg-color");
+
+    button.only-enabled-button {
+        color: $color;
+        background: $bg-color;
+        cursor: default;
+        pointer-events: none;
+    }
+}
+
+$intelli-filter-icon-default-map: (
+    "icon-font-size": 14.5px,
+    "icon-margin-right": 4px,
+    "active-icon-color": white,
+);
+
+@mixin intelli-filter-icons-styling($icon-styling: $intelli-filter-icon-default-map) {
+    $icon-font-size: map.get($icon-styling, "icon-font-size");
+    $icon-margin-right: map.get($icon-styling, "icon-margin-right");
+    $icon-active-color: map.get($icon-styling, "active-icon-color");
+
+    button.intelli-filter i {
+        font-size: $icon-font-size;
+        margin-right: $icon-margin-right;
+        display: flex;
+        vertical-align: middle;
+
+        &.mdi-star {
+            color: $amber;
+            opacity: 0.5;
+        }
+
+        &.mdi-alert {
+            color: #f97b07;
+        }
+
+        &.mdi-bell {
+            color: #f3bd18;
+        }
+
+        &.mdi-file-remove-outline {
+            color: #f44336;
+            margin-right: 2px;
+        }
+    }
+
+    button.intelli-filter.active {
+        ::ng-deep svg {
+            g {
+                stroke: $icon-active-color !important;
+                fill: $icon-active-color !important;
+            }
+        }
+
+        i {
+            color: $icon-active-color;
+        }
+
+        i.mdi-star {
+            color: #ffc107;
+            opacity: 0.9;
+            display: flex;
+        }
+    }
+}
+
+.filter-label {
+    @include fonts(Roboto, 0.875rem, normal, normal, normal, normal, normal);
+    color: $charcoal;
+    margin-bottom: 4px;
+}
+
+.filter-divider {
+    width: 1px;
+    margin-right: 8px;
+    height: 24px;
+    background: #111;
+}

package/src/lib/anna-common-scss/_edit-filter-popup.scss

@@ -1,70 +1,70 @@
-@use "./colors" as c;
-@use "./fonts" as f;
-
-$gap-between-headers-col: 1.5625rem !default;
-
-.selected-filters-container {
-    border-radius: 2px;
-    border: 1px solid c.$primary-color;
-    padding: 0.625rem 0.5rem 0.625rem 1.5rem;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    height: 3.25rem;
-}
-
-.filter-view {
-    display: flex;
-    gap: $gap-between-headers-col;
-}
-
-.header {
-    margin-bottom: 0;
-    color: c.$darkCharcoal;
-    @include f.fonts(Roboto, 0.75rem, normal, normal, normal, normal, normal);
-}
-
-.selected-value {
-    margin-bottom: 0;
-    color: c.$grey;
-    @include f.fonts(Roboto, 0.875rem, normal, bold, normal, 1.14, normal);
-}
-
-@mixin filter-popup-modal-header() {
-    .modal-header {
-        padding: 0.5rem 0.5rem 0.25rem 1.5rem;
-
-        .modal-title {
-            color: white;
-            margin-top: auto;
-            margin-bottom: 0;
-            @include f.fonts(Roboto, 1.125rem, normal, normal, normal, normal, normal);
-        }
-
-        i {
-            color: white;
-            font-size: 1.5rem;
-            &:hover,
-            &:focus {
-                opacity: 1 !important;
-                color: white;
-            }
-        }
-    }
-}
-
-@mixin filter-popup-modal-body() {
-    .modal-body {
-        padding: 1.5rem;
-
-        .popup-filter {
-            margin-bottom: 1rem;
-        }
-
-        .btn-group {
-            display: flex;
-            justify-content: space-between;
-            padding-top: 0.5rem;
-        }
-    }
-}
+@use "./colors" as c;
+@use "./fonts" as f;
+
+$gap-between-headers-col: 1.5625rem !default;
+
+.selected-filters-container {
+    border-radius: 2px;
+    border: 1px solid c.$primary-color;
+    padding: 0.625rem 0.5rem 0.625rem 1.5rem;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    height: 3.25rem;
+}
+
+.filter-view {
+    display: flex;
+    gap: $gap-between-headers-col;
+}
+
+.header {
+    margin-bottom: 0;
+    color: c.$darkCharcoal;
+    @include f.fonts(Roboto, 0.75rem, normal, normal, normal, normal, normal);
+}
+
+.selected-value {
+    margin-bottom: 0;
+    color: c.$grey;
+    @include f.fonts(Roboto, 0.875rem, normal, bold, normal, 1.14, normal);
+}
+
+@mixin filter-popup-modal-header() {
+    .modal-header {
+        padding: 0.5rem 0.5rem 0.25rem 1.5rem;
+
+        .modal-title {
+            color: white;
+            margin-top: auto;
+            margin-bottom: 0;
+            @include f.fonts(Roboto, 1.125rem, normal, normal, normal, normal, normal);
+        }
+
+        i {
+            color: white;
+            font-size: 1.5rem;
+            &:hover,
+            &:focus {
+                opacity: 1 !important;
+                color: white;
+            }
+        }
+    }
+}
+
+@mixin filter-popup-modal-body() {
+    .modal-body {
+        padding: 1.5rem;
+
+        .popup-filter {
+            margin-bottom: 1rem;
+        }
+
+        .btn-group {
+            display: flex;
+            justify-content: space-between;
+            padding-top: 0.5rem;
+        }
+    }
+}