@annalib/anna-core 20.4.2 → 20.5.0

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

@@ -3,156 +3,136 @@
 @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
+    "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;
+    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;
-  }
-}
+@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");
 
-$only-enabled-default-map: ("text-color": white, "bg-color": $primary-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");
 
-@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");
+    color: $intelli-filter-inactive-text-color;
+    border: 1px solid $intelli-filter-inactive-border-color;
+    background: $intelli-filter-inactive-bg-color;
 
-  button.only-enabled-button{
-    color: $color;
-    background: $bg-color;
-    cursor: default;
-    pointer-events: none;
-  }
+    &.active {
+        color: $intelli-filter-active-text-color !important;
+        background: $intelli-filter-active-bg-color !important;
+        border: 1px solid $intelli-filter-active-border-color !important;
+    }
 }
 
-$intelli-filter-icon-default-map: (
-  "icon-font-size": 14.5px,
-  "icon-margin-right": 4px,
-  "active-icon-color": white,
+$only-enabled-default-map: (
+    "text-color": white,
+    "bg-color": $primary-color,
 );
 
-@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;
-    }
+@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");
 
-    &.mdi-bell {
-      color: #f3bd18;
+    button.only-enabled-button {
+        color: $color;
+        background: $bg-color;
+        cursor: default;
+        pointer-events: none;
     }
+}
 
-    &.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;
-      }
-    }
+$intelli-filter-icon-default-map: (
+    "icon-font-size": 14.5px,
+    "icon-margin-right": 4px,
+    "active-icon-color": white,
+);
 
-    i {
-      color: $icon-active-color;
+@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;
+        }
     }
 
-    i.mdi-star {
-      color: #ffc107;
-      opacity: 0.9;
-      display: flex;
+    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;
+    @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;
-}
+    width: 1px;
+    margin-right: 8px;
+    height: 24px;
+    background: #111;
+}

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

@@ -3,7 +3,7 @@
 
 $gap-between-headers-col: 1.5625rem !default;
 
-.selected-filters-container{
+.selected-filters-container {
     border-radius: 2px;
     border: 1px solid c.$primary-color;
     padding: 0.625rem 0.5rem 0.625rem 1.5rem;
@@ -13,38 +13,39 @@ $gap-between-headers-col: 1.5625rem !default;
     height: 3.25rem;
 }
 
-.filter-view{
+.filter-view {
     display: flex;
     gap: $gap-between-headers-col;
 }
 
-.header{
+.header {
     margin-bottom: 0;
     color: c.$darkCharcoal;
     @include f.fonts(Roboto, 0.75rem, normal, normal, normal, normal, normal);
 }
 
-.selected-value{
+.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{
+@mixin filter-popup-modal-header() {
+    .modal-header {
         padding: 0.5rem 0.5rem 0.25rem 1.5rem;
-        
-        .modal-title{
+
+        .modal-title {
             color: white;
             margin-top: auto;
             margin-bottom: 0;
             @include f.fonts(Roboto, 1.125rem, normal, normal, normal, normal, normal);
         }
 
-        i{
+        i {
             color: white;
             font-size: 1.5rem;
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
                 opacity: 1 !important;
                 color: white;
             }
@@ -52,20 +53,18 @@ $gap-between-headers-col: 1.5625rem !default;
     }
 }
 
-
-@mixin filter-popup-modal-body(){
-    .modal-body{
+@mixin filter-popup-modal-body() {
+    .modal-body {
         padding: 1.5rem;
-        
-        .popup-filter{
+
+        .popup-filter {
             margin-bottom: 1rem;
         }
 
-        .btn-group{
+        .btn-group {
             display: flex;
             justify-content: space-between;
             padding-top: 0.5rem;
         }
-    
     }
-}
+}