carriera-intern 1.1.78 → 1.1.80

package/src/styles/utility/colors.scss

@@ -1,265 +1,265 @@
-@use "../variables" as *;
-
-// Generate text color utilities with opacity variants only for -500
-@each $color-name, $shades in $color-palettes {
-  .text-#{$color-name} {
-    @each $shade, $color-value in $shades {
-      &-#{$shade} {
-        color: $color-value;
-
-        // Opacity variants only for -500
-        @if $shade == 500 {
-          &\/20 {
-            color: rgba($color-value, 0.2);
-          }
-          &\/40 {
-            color: rgba($color-value, 0.4);
-          }
-          &\/70 {
-            color: rgba($color-value, 0.7);
-          }
-        }
-      }
-    }
-  }
-}
-
-// Generate background color utilities with opacity variants only for -500
-@each $color-name, $shades in $color-palettes {
-  .bg-#{$color-name} {
-    @each $shade, $color-value in $shades {
-      &-#{$shade} {
-        background-color: $color-value;
-
-        // Opacity variants only for -500
-        @if $shade == 500 {
-          &\/20 {
-            background-color: rgba($color-value, 0.2);
-          }
-          &\/40 {
-            background-color: rgba($color-value, 0.4);
-          }
-          &\/70 {
-            background-color: rgba($color-value, 0.7);
-          }
-        }
-      }
-    }
-  }
-}
-
-// Generate border color utilities with opacity variants only for -500
-@each $color-name, $shades in $color-palettes {
-  .border-#{$color-name} {
-    @each $shade, $color-value in $shades {
-      &-#{$shade} {
-        border-color: $color-value;
-
-        // Opacity variants only for -500
-        @if $shade == 500 {
-          &\/20 {
-            border-color: rgba($color-value, 0.2);
-          }
-          &\/40 {
-            border-color: rgba($color-value, 0.4);
-          }
-          &\/70 {
-            border-color: rgba($color-value, 0.7);
-          }
-        }
-      }
-    }
-  }
-}
-
-// Generate fill utilities for SVGs with opacity variants only for -500
-@each $color-name, $shades in $color-palettes {
-  .fill-#{$color-name} {
-    @each $shade, $color-value in $shades {
-      &-#{$shade} {
-        fill: $color-value;
-
-        // Opacity variants only for -500
-        @if $shade == 500 {
-          &\/20 {
-            fill: rgba($color-value, 0.2);
-          }
-          &\/40 {
-            fill: rgba($color-value, 0.4);
-          }
-          &\/70 {
-            fill: rgba($color-value, 0.7);
-          }
-        }
-      }
-    }
-  }
-}
-
-// Generate stroke utilities for SVGs with opacity variants only for -500
-@each $color-name, $shades in $color-palettes {
-  .stroke-#{$color-name} {
-    @each $shade, $color-value in $shades {
-      &-#{$shade} {
-        stroke: $color-value;
-
-        // Opacity variants only for -500
-        @if $shade == 500 {
-          &\/20 {
-            stroke: rgba($color-value, 0.2);
-          }
-          &\/40 {
-            stroke: rgba($color-value, 0.4);
-          }
-          &\/70 {
-            stroke: rgba($color-value, 0.7);
-          }
-        }
-      }
-    }
-  }
-}
-
-// Hover states for text colors with opacity variants only for -500
-@each $color-name, $shades in $color-palettes {
-  .hover\:text-#{$color-name} {
-    @each $shade, $color-value in $shades {
-      &-#{$shade}:hover {
-        color: $color-value;
-
-        // Opacity variants only for -500
-        @if $shade == 500 {
-          &\/20 {
-            color: rgba($color-value, 0.2);
-          }
-          &\/40 {
-            color: rgba($color-value, 0.4);
-          }
-          &\/70 {
-            color: rgba($color-value, 0.7);
-          }
-        }
-      }
-    }
-  }
-}
-
-// Hover states for background colors with opacity variants only for -500
-@each $color-name, $shades in $color-palettes {
-  .hover\:bg-#{$color-name} {
-    @each $shade, $color-value in $shades {
-      &-#{$shade}:hover {
-        background-color: $color-value;
-
-        // Opacity variants only for -500
-        @if $shade == 500 {
-          &\/20 {
-            background-color: rgba($color-value, 0.2);
-          }
-          &\/40 {
-            background-color: rgba($color-value, 0.4);
-          }
-          &\/70 {
-            background-color: rgba($color-value, 0.7);
-          }
-        }
-      }
-    }
-  }
-}
-
-// Focus states for text colors with opacity variants only for -500
-@each $color-name, $shades in $color-palettes {
-  .focus\:text-#{$color-name} {
-    @each $shade, $color-value in $shades {
-      &-#{$shade}:focus-visible {
-        color: $color-value;
-
-        // Opacity variants only for -500
-        @if $shade == 500 {
-          &\/20 {
-            color: rgba($color-value, 0.2);
-          }
-          &\/40 {
-            color: rgba($color-value, 0.4);
-          }
-          &\/70 {
-            color: rgba($color-value, 0.7);
-          }
-        }
-      }
-    }
-  }
-}
-
-// Focus states for background colors with opacity variants only for -500
-@each $color-name, $shades in $color-palettes {
-  .focus\:bg-#{$color-name} {
-    @each $shade, $color-value in $shades {
-      &-#{$shade}:focus-visible {
-        background-color: $color-value;
-
-        // Opacity variants only for -500
-        @if $shade == 500 {
-          &\/20 {
-            background-color: rgba($color-value, 0.2);
-          }
-          &\/40 {
-            background-color: rgba($color-value, 0.4);
-          }
-          &\/70 {
-            background-color: rgba($color-value, 0.7);
-          }
-        }
-      }
-    }
-  }
-}
-
-// Active states for text colors with opacity variants only for -500
-@each $color-name, $shades in $color-palettes {
-  .active\:text-#{$color-name} {
-    @each $shade, $color-value in $shades {
-      &-#{$shade}:active {
-        color: $color-value;
-
-        // Opacity variants only for -500
-        @if $shade == 500 {
-          &\/20 {
-            color: rgba($color-value, 0.2);
-          }
-          &\/40 {
-            color: rgba($color-value, 0.4);
-          }
-          &\/70 {
-            color: rgba($color-value, 0.7);
-          }
-        }
-      }
-    }
-  }
-}
-
-// Active states for background colors with opacity variants only for -500
-@each $color-name, $shades in $color-palettes {
-  .active\:bg-#{$color-name} {
-    @each $shade, $color-value in $shades {
-      &-#{$shade}:active {
-        background-color: $color-value;
-
-        // Opacity variants only for -500
-        @if $shade == 500 {
-          &\/20 {
-            background-color: rgba($color-value, 0.2);
-          }
-          &\/40 {
-            background-color: rgba($color-value, 0.4);
-          }
-          &\/70 {
-            background-color: rgba($color-value, 0.7);
-          }
-        }
-      }
-    }
-  }
-}
+@use "../variables" as *;
+
+// Generate text color utilities with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .text-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade} {
+        color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Generate background color utilities with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .bg-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade} {
+        background-color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            background-color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            background-color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            background-color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Generate border color utilities with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .border-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade} {
+        border-color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            border-color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            border-color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            border-color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Generate fill utilities for SVGs with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .fill-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade} {
+        fill: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            fill: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            fill: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            fill: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Generate stroke utilities for SVGs with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .stroke-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade} {
+        stroke: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            stroke: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            stroke: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            stroke: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Hover states for text colors with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .hover\:text-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade}:hover {
+        color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Hover states for background colors with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .hover\:bg-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade}:hover {
+        background-color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            background-color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            background-color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            background-color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Focus states for text colors with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .focus\:text-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade}:focus-visible {
+        color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Focus states for background colors with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .focus\:bg-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade}:focus-visible {
+        background-color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            background-color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            background-color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            background-color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Active states for text colors with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .active\:text-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade}:active {
+        color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Active states for background colors with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .active\:bg-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade}:active {
+        background-color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            background-color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            background-color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            background-color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/utility/utilities.scss

@@ -1,17 +1,17 @@
-@use "colors";
-@use "../variables" as *;
-
-.transition {
-  transition: all 0.2s ease-in-out;
-}
-
-.disable-selection {
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-drag: none;
-  -khtml-user-drag: none;
-  -moz-user-drag: none;
-  -o-user-drag: none;
-}
+@use "colors";
+@use "../variables" as *;
+
+.transition {
+  transition: all 0.2s ease-in-out;
+}
+
+.disable-selection {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-drag: none;
+  -khtml-user-drag: none;
+  -moz-user-drag: none;
+  -o-user-drag: none;
+}

package/src/styles.scss

@@ -1,43 +1,43 @@
-/* You can add global styles to this file, and also import other style files */
-@use "styles/variables";
-@use "styles/custompickers";
-@use "styles/popover";
-@use "styles/cropper";
-@use "styles/utility/utilities";
-@use "styles/tooltip";
-
-html {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
-}
-
-body {
-  margin: 0;
-  line-height: inherit;
-  background-color: white;
-  font-family:
-    "Montserrat",
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Helvetica,
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji";
-}
-
-.cai-highlight {
-  background-color: #3b73ed33 !important;
-  color: #92b1f5 !important;
-}
-
-.cai-documents-highlight {
-  background-color: #3b73ed33 !important;
-  color: #0b49d1 !important;
-}
+/* You can add global styles to this file, and also import other style files */
+@use "styles/variables";
+@use "styles/custompickers";
+@use "styles/popover";
+@use "styles/cropper";
+@use "styles/utility/utilities";
+@use "styles/tooltip";
+
+html {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  margin: 0;
+  line-height: inherit;
+  background-color: white;
+  font-family:
+    "Montserrat",
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji";
+}
+
+.cai-highlight {
+  background-color: #3b73ed33 !important;
+  color: #92b1f5 !important;
+}
+
+.cai-documents-highlight {
+  background-color: #3b73ed33 !important;
+  color: #0b49d1 !important;
+}