ca-components 1.3.3 → 1.3.5

package/assets/scss/background.scss

@@ -0,0 +1,44 @@
+@import 'theme/variables.scss';
+
+@mixin hover($color) {
+    transition: background-color $transitionDuration;
+    
+    &:hover {
+        background-color: $color !important;
+    }
+}
+
+.background {
+    &-black {
+        background-color: $ta-black;
+
+        &-2 {
+            background-color: $ta-black-2;
+        }
+    }
+    &-blue {
+        &-13 {
+            background-color: $ta-blue-13;
+        }
+        &-14 {
+            background-color: $ta-blue-14;
+        }
+    }
+    &-dark {
+        &-2 {
+            background-color: $dark-2;
+        }
+    }
+
+    &-hover {
+        &-bw2 {
+            @include hover($bw2);
+        }
+
+        &-blue {
+            &-15 {
+                @include hover($ta-blue-15);
+            }
+        }
+    }
+}

package/assets/scss/border-radius.scss

@@ -0,0 +1,17 @@
+@mixin border-radius($size) {
+    border-radius: $size;
+}
+
+$border-radius-sizes: 1, 2, 3, 10;
+
+.br {
+    @each $size in $border-radius-sizes {
+        &-#{$size} {
+            @include border-radius(#{$size}px);
+        }
+    }
+
+    &-circle {
+        @include border-radius(50%);
+    }
+}

package/assets/scss/filters.scss

@@ -0,0 +1,151 @@
+@import 'theme/variables.scss';
+
+.filter-dropdown {
+    &-popover {
+        width: 260px;
+
+        &-max-height {
+            max-height: 360px;
+        }
+    }
+
+    &-list {
+        max-height: 260px;
+        overflow-y: auto;
+
+        &-icon {
+            height: 26px;
+            transition: background-color $transitionDuration;
+
+            &-value {
+                height: 14px;
+                width: 14px;
+            }
+
+            &-remove {
+                display: none;
+            }
+
+            &:hover {
+                background-color: $ta-black;
+
+                .filter-dropdown-icon-count {
+                    display: none;
+                }
+            }
+
+            &-selected {
+                &:hover {
+                    background-color: $blue-9;
+                }
+            }
+        }
+
+        &-item {
+            &-icons {
+                transition: opacity $transitionDuration;
+                opacity: 0;
+            }
+
+            &-status-circle {
+                height: 10px;
+                width: 10px;
+            }
+
+            &-remove {
+                display: none;
+            }
+
+            &:hover {
+                background-color: $black;
+
+                .filter-dropdown-list-item-icons {
+                    opacity: 1;
+
+                    svg path {
+                        fill: var(--svg-fill-color, $ta-red-10);
+                    }
+                }
+            }
+
+            &-hover {
+                &:hover {
+                    .filter-dropdown-list-item-remove {
+                        display: flex;
+
+                        svg path {
+                            fill: $ta-red-10 !important;
+                        }
+                    }
+
+                    .filter-dropdown-list-item-count {
+                        display: none !important;
+                    }
+                }
+            }
+        }
+    }
+
+    &-icon {
+        height: 26px;
+        width: 26px;
+    }
+    
+    &-count {
+        height: 14px;
+        width: 14px;
+
+        &-remove {
+            display: none;
+        }
+
+        &-hover {
+            &:hover {
+                .filter-dropdown-count {
+                    &-value {
+                        display: none;
+                    }
+                    &-remove {
+                        display: flex;
+                    }
+                }
+            }
+        }
+    }
+
+    &-button {
+        height: 26px; 
+    }
+
+    &-footer {
+        &-button {
+            color: $bw-9;
+            transition: color $transitionDuration, background-color $transitionDuration;
+
+            &-set {
+                color: $white-2;
+                background-color: $ta-blue-14;
+
+                &:hover {
+                    background-color: $ta-blue-16;
+                    color: $blue-9;
+                }
+            }
+            &-clear {
+                color: $bw-9;
+
+                &:hover {
+                    background-color: $grey-12;
+                    color: $ta-black;
+                }
+            }
+
+            height: 18px;
+            width: 50%;
+        }
+    }
+}
+
+.filter-dropdown-list-badge {
+    min-width: 18px;
+}

package/assets/scss/icons.scss

@@ -1,14 +1,15 @@
 @import 'theme/variables.scss';
 
 @mixin svg-fill($color) {
-    svg path {
+    svg path,
+    svg circle {
         fill: $color !important;
     }
 }
 
 @mixin svg-hover($color) {
     svg path {
-        transition: $transition;
+        transition: fill 0.3s ease-in-out;
     }
 
     &:hover {
@@ -31,9 +32,18 @@
         &-black {
             @include svg-fill($black);
         }
+        &-white {
+            @include svg-fill($white);
+        }
+        &-white-2 {
+            @include svg-fill($white-2);
+        }
         &-muted {
             @include svg-fill($muted);
         }
+        &-grey {
+            @include svg-fill($bw5);
+        }
         &-bw-9 {
             @include svg-fill($bw-9);
         }
@@ -43,37 +53,85 @@
         &-light-grey-6 {
             @include svg-fill($ta-light-grey-6);
         }
+        &-blue-8 {
+            @include svg-fill($blue-8);
+        }
         &-blue-13 {
             @include svg-fill($ta-blue-13);
         }
+        &-blue-14 {
+            @include svg-fill($ta-blue-14);
+        }
+        &-blue-17 {
+            @include svg-fill($ta-blue-17);
+        }
         &-blue-19 {
             @include svg-fill($ta-blue-19);
         }
         &-blue-26 {
             @include svg-fill($ta-blue-26);
         }
+        &-green {
+            @include svg-fill($ta-green);
+        }
+        &-green-2 {
+            @include svg-fill($ta-green-2);
+        }
+        &-green-4 {
+            @include svg-fill($ta-green-4);
+        }
+        &-yellow-1 {
+            @include svg-fill($ta-yellow-1);
+        }
+        &-yellow-4 {
+            @include svg-fill($ta-yellow-4);
+        }
+        &-yellow-5 {
+            @include svg-fill($ta-yellow-5);
+        }
+        &-red-10 {
+            @include svg-fill($ta-red-10);
+        }
+        &-white-4 {
+            @include svg-fill($white-4);
+        }
         &-grey {
             @include svg-fill($bw5);
         }
         &-red-10 {
             @include svg-fill($ta-red-10);
         }
-        &-green {
-            @include svg-fill($ta-green);
+        &-red-11 {
+            @include svg-fill($ta-red-11);
         }
     }
 
     // Hovers
     &-hover {
+        &-white {
+            @include svg-hover($white);
+        }
+        &-white-2 {
+            @include svg-hover($white-2);
+        }
         &-muted {
             @include svg-hover($muted);
         }
+        &-grey-4 {
+            @include svg-hover($grey-4);
+        }
         &-black {
             @include svg-hover($ta-black);
         }
+        &-blue-10 {
+            @include svg-hover($blue-10);
+        }
         &-blue-15 {
             @include svg-hover($ta-blue-15);
         }
+        &-blue-19 {
+            @include svg-hover($ta-blue-19);
+        }
         &-bw6-2 {
             @include svg-hover($bw6-2);
         }
@@ -87,6 +145,9 @@
 
     // Sizes
     &-size {
+        &-10 {
+            @include svg-size(10px, 10px);
+        }
         &-12 {
             @include svg-size(12px, 12px);
         }
@@ -102,6 +163,9 @@
         &-22 {
             @include svg-size(22px, 22px);
         }
+        &-26 {
+            @include svg-size(26px, 26px);
+        }
         &-44-16 {
             @include svg-size(44px, 16px);
         }