@annalib/anna-core 20.3.0 → 20.3.2

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

@@ -1,158 +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,71 +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;
+        }
+    }
+}