ca-components 1.3.331 → 1.3.411

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);
         }

package/assets/scss/mixins.scss

@@ -0,0 +1,18 @@
+@mixin text-selection($color, $opacity: 0.2) {
+    &::-moz-selection {
+        background-color: rgb($color, $opacity) !important;
+        color: $color !important;
+    }
+
+    &::selection {
+        background-color: rgb($color, $opacity) !important;
+        color: $color !important;
+    }
+}
+
+@mixin prevent-text-selection() {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -moz-user-select: none;
+}

package/assets/scss/spacing.scss

@@ -0,0 +1,59 @@
+$padding-sizes: 2, 4;
+$padding-x-sizes: 4, 5;
+$margin-sizes: 4, 6, 24;
+$gap-sizes: xs;
+$height-sizes: 1;
+
+.padding {
+    @each $size in $padding-sizes {
+        &-#{$size} {
+            padding: #{$size}px;
+        }
+    }
+
+    &-y {
+        @each $size in $padding-sizes {
+            &-#{$size} {
+                padding-top: #{$size}px;
+                padding-bottom: #{$size}px;
+            }
+        }
+    }
+
+    &-x {
+        @each $size in $padding-x-sizes {
+            &-#{$size} {
+                padding-left: #{$size}px;
+                padding-right: #{$size}px;
+            }
+        }
+    }
+}
+
+.margin {
+    @each $size in $margin-sizes {
+        &-t-#{$size} {
+            margin-top: #{$size}px;
+        }
+        &-r-#{$size} {
+            margin-right: #{$size}px;
+        }
+        &-b-#{$size} {
+            margin-bottom: #{$size}px;
+        }
+    }
+}
+
+.gap {
+    @each $size in $gap-sizes {
+        &-#{$size} {
+            gap: 2px;
+        }
+    }
+}
+
+@each $size in $height-sizes {
+    .height-#{$size} {
+        height: #{$size}px;
+    }
+}

package/assets/scss/styles.scss

@@ -10,6 +10,10 @@
 @import './text-selection.scss';
 @import './text-size.scss';
 @import './icons.scss';
+@import './background.scss';
+@import './border-radius.scss';
+@import './spacing.scss';
+@import './filters.scss';
 
 /* You can add global styles to this file, and also import other style files */
 
@@ -59,6 +63,23 @@ html {
     }
 }
 
-.cursor-pointer {
+.c-pointer {
     cursor: pointer;
+}
+
+.ca-scroll-bar {
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        width: 2px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $ta-light-grey-6;
+        border-radius: 1px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $ta-black-2;
+    }
 }