ca-components 2.0.49 → 2.0.50

package/assets/scss/background.scss

@@ -281,6 +281,10 @@
 
         &-light-grey {
             @include hover($ta-light-grey);
+
+            &-5 {
+                @include hover($ta-light-grey-5);
+            }
         }
 
         &-bw-9 {

package/assets/scss/icons.scss

@@ -7,6 +7,12 @@
     }
 }
 
+@mixin svg-fill-first-path-child($color) {
+    svg path:first-child {
+        fill: $color !important;
+    }
+}
+
 @mixin svg-rect-fill($color) {
     fill: $color !important;
 
@@ -53,6 +59,9 @@
 .svg {
     // Colors
     &-fill {
+        &-dark-2 {
+            @include svg-fill($dark-2);
+        }
         &-black {
             @include svg-fill($black);
             &-2 {
@@ -175,6 +184,28 @@
         }
     }
 
+    // First Path Child
+    &-fill-first-path-child {
+        &-green {
+            @include svg-fill-first-path-child($ta-green);
+        }
+        &-green-6 {
+            @include svg-fill-first-path-child($ta-green-6);
+        }
+        &-yellow-1 {
+            @include svg-fill-first-path-child($ta-yellow-1);
+        }
+        &-orange-4 {
+            @include svg-fill-first-path-child($ta-orange-4);
+        }
+        &-red-10 {
+            @include svg-fill-first-path-child($ta-red-10);
+        }
+        &-light-grey-2 {
+            @include svg-fill-first-path-child($ta-light-grey-2);
+        }
+    }
+
     // Hovers
     &-hover {
         &-white {

package/assets/scss/sizing.scss

@@ -11,6 +11,7 @@ $sizes-height: (
     22,
     24,
     26,
+    28,
     30,
     34,
     37,
@@ -65,6 +66,7 @@ $sizes-width: (
     106,
     108,
     116,
+    118,
     126,
     144,
     155,

package/assets/scss/spacing.scss

@@ -1,4 +1,4 @@
-$padding-sizes: 1, 2, 4, 6, 9, 10, 12, 14, 15, 18, 30;
+$padding-sizes: 1, 2, 4, 6, 8, 9, 10, 12, 14, 15, 18, 30;
 $padding-x-sizes: 2, 4, 5, 6, 8, 10, 12;
 $margin-sizes:
     -4,
@@ -117,3 +117,21 @@ $sizes: 1, 2, 4, 10, 14, 15, 18, 22, 26, 31, 32, 36, 116, 120;
 .w-fit-content {
     width: fit-content !important;
 }
+
+.right {
+    &-100 {
+        right: 100%;
+    }
+}
+
+.left {
+    &-100 {
+        left: 100%;
+    }
+}
+
+.top {
+    &--14 {
+        top: -14px;
+    }
+}

package/assets/theme/main.scss

@@ -1,193 +1,193 @@
-@import "./variables.scss";
+@import './variables.scss';
 * {
-  font-family: $main-font, $fallback-font;
+    font-family: $main-font, $fallback-font;
 }
 
 p {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 .form-control:focus {
-  box-shadow: none !important;
-  outline: none;
+    box-shadow: none !important;
+    outline: none;
 }
 
 .payment-type {
-  &.col-12,
-  &.col-6 {
-    padding-left: 6px;
-    padding-right: 6px;
-  }
+    &.col-12,
+    &.col-6 {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
 }
 
 .btn-primary {
-  input {
-    display: none;
-  }
+    input {
+        display: none;
+    }
 }
 
 ::ng-deep .tooltip {
-  .arrow::before {
-    display: none;
-  }
+    .arrow::before {
+        display: none;
+    }
 }
 
 ::ng-deep .tooltip-inner {
-  background-color: $white;
-  color: $muted;
-  height: 17px;
-  display: flex;
-  align-items: center;
-  border-radius: 2px;
-  font-size: 10px;
-  font-weight: 600;
-  box-shadow: $box-shadow;
+    background-color: $white;
+    color: $muted;
+    height: 17px;
+    display: flex;
+    align-items: center;
+    border-radius: 2px;
+    font-size: 10px;
+    font-weight: 600;
+    box-shadow: $box-shadow;
 }
 
 .form-label-group {
-  ng-select {
-    width: 100%;
-  }
+    ng-select {
+        width: 100%;
+    }
 }
 
 .btn-primary {
-  font-size: 11px !important;
-  border-radius: 3px;
-  padding: 0.1rem 0.45rem !important;
-  background-color: $bw-9 !important;
-  transition: 0.25s;
-  font-weight: 600;
-  border: none;
+    font-size: 11px !important;
+    border-radius: 3px;
+    padding: 0.1rem 0.45rem !important;
+    background-color: $bw-9 !important;
+    transition: 0.25s;
+    font-weight: 600;
+    border: none;
 }
 
 .choice-wrapper {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 }
 
 .note-label-wrapper {
-  background-color: $white;
-  font-weight: 600;
-  color: $bw6-2;
-  margin: 0 -12px;
-  padding: 0 12px;
-  transition: 0.3s;
-  cursor: pointer;
-  height: 32px;
-  line-height: 32px;
-  user-select: none;
+    background-color: $white;
+    font-weight: 600;
+    color: $bw6-2;
+    margin: 0 -12px;
+    padding: 0 12px;
+    transition: 0.3s;
+    cursor: pointer;
+    height: 32px;
+    line-height: 32px;
+    user-select: none;
 }
 
 .dropzone-label-wrapper {
-  background-color: $white;
-  font-weight: 700;
-  color: $bw6-2;
-  margin: 0 -16px;
-  padding: 6px 18px;
-  transition: all 0.3s ease-in-out;
-  cursor: pointer;
-  height: 30px;
-  user-select: none;
+    background-color: $white;
+    font-weight: 700;
+    color: $bw6-2;
+    margin: 0 -16px;
+    padding: 6px 18px;
+    transition: all 0.3s ease-in-out;
+    cursor: pointer;
+    height: 30px;
+    user-select: none;
 }
 
 textarea.input-custom-textarea.form-textarea {
-  font-size: 12px;
-  padding: 0;
-  margin-top: 6px;
-  resize: none;
-  color: $bw4;
-  width: 100% !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-
-  &::placeholder {
-    color: $bw-9 !important;
-  }
+    font-size: 12px;
+    padding: 0;
+    margin-top: 6px;
+    resize: none;
+    color: $bw4;
+    width: 100% !important;
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+
+    &::placeholder {
+        color: $bw-9 !important;
+    }
 }
 
 .note-visible {
-  max-height: 60px;
-  transition: 0.3s;
+    max-height: 60px;
+    transition: 0.3s;
 }
 
 .note-hidden {
-  max-height: 0;
-  overflow: hidden;
-  transition: 0.3s;
+    max-height: 0;
+    overflow: hidden;
+    transition: 0.3s;
 }
 
 .dropzone-visible {
-  height: auto;
-  transition: all 0.3s ease-in-out;
-  padding-top: 12px;
-  position: relative;
-  right: 5px;
+    height: auto;
+    transition: all 0.3s ease-in-out;
+    padding-top: 12px;
+    position: relative;
+    right: 5px;
 }
 
 .dropzone-hidden {
-  height: 0;
-  overflow: hidden;
-  transition: all 0.3s ease-in-out;
+    height: 0;
+    overflow: hidden;
+    transition: all 0.3s ease-in-out;
 }
 
 .note-label-wrapper,
 .dropzone-label-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .note-wrapper.hidden-note .down-icon,
 .dropzone-wrapper.hidden-dropzone .down-icon {
-  transform: rotate(0deg);
-  transition: 0.3s all;
+    transform: rotate(0deg);
+    transition: 0.3s all;
 }
 
 .note-wrapper.visible-note .down-icon,
 .dropzone-wrapper.visible-dropzone .down-icon {
-  transform: rotate(180deg);
-  transition: 0.3s all;
+    transform: rotate(180deg);
+    transition: 0.3s all;
 }
 
 .notifications-holder {
-  margin-bottom: 28px;
-
-  p {
-    margin-right: 20px;
-    margin-bottom: 0;
-  }
-
-  .multiple-choices-wrapper {
-    .btn-group {
-      position: relative;
-      display: inline-flex;
-      vertical-align: middle;
-      margin-right: 6px;
-
-      .btn.btn-primary:not(:disabled):not(.disabled) {
-        background-color: $ceil-blue !important;
-        transition: 0.25s;
-        font-weight: 600;
-      }
-
-      .btn.btn-primary:not(:disabled):not(.disabled).active {
-        background-color: $bw-9 !important;
-      }
-
-      .btn.btn-primary:not(:disabled):not(.disabled):hover {
-        opacity: 1;
-        transition: 0.25s;
-      }
-
-      .btn:not(:disabled):not(.disabled) {
-        cursor: pointer;
-      }
+    margin-bottom: 28px;
+
+    p {
+        margin-right: 20px;
+        margin-bottom: 0;
+    }
+
+    .multiple-choices-wrapper {
+        .btn-group {
+            position: relative;
+            display: inline-flex;
+            vertical-align: middle;
+            margin-right: 6px;
+
+            .btn.btn-primary:not(:disabled):not(.disabled) {
+                background-color: $ceil-blue !important;
+                transition: 0.25s;
+                font-weight: 600;
+            }
+
+            .btn.btn-primary:not(:disabled):not(.disabled).active {
+                background-color: $bw-9 !important;
+            }
+
+            .btn.btn-primary:not(:disabled):not(.disabled):hover {
+                opacity: 1;
+                transition: 0.25s;
+            }
+
+            .btn:not(:disabled):not(.disabled) {
+                cursor: pointer;
+            }
+        }
     }
-  }
 }
 
 .choice-wrapper.twic-choice label {
-  width: 66px;
+    width: 66px;
 }