carriera-intern-components 1.1.1 → 1.1.2

package/src/styles/popover.scss

@@ -0,0 +1,18 @@
+@import "variables";
+
+.tagPopover {
+  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji" !important;
+  --bs-body-bg: #2f2f2f !important;
+  border: none !important;
+
+  .popover-arrow {
+    display: none !important;
+  }
+
+  .popover-body {
+    border-radius: 3px;
+    padding: 0px !important;
+  }
+}

package/src/styles/review_variables.scss

@@ -0,0 +1,40 @@
+$color-span: #F77D3B;
+$color-negative: #DF3C3C;
+$color-like: #56B4AC;
+$color-dislike: #E66767;
+$color-trash-fill: #C20C0C;
+$color-trash-background: #F4BEBE;
+$color-tooltip: rgba(66, 66, 66, 1);
+$color-divider: #DADADA;
+
+$color-light-blue: #92B1F5;
+$color-blue: #3B73ED;
+$color-blue-transparent: #3b73ed3f;
+
+$color-icon-base: #6692F1;
+$color-icon-base-hover: #0B49D1;
+$color-icon-black: #6C6C6C;
+$color-review-icon-dark: #919191;
+$color-review-icon-dark-hover: #424242;
+
+
+$color-light: #FFFFFFB2;
+$color-light-disabled: #F7F7F7;
+$color-light-gray: #EEEEEE;
+$color-review-hover: #CCCCCC;
+$color-dark: #1D1D1D;
+
+$color-text-gray: #AAAAAA;
+
+$color-modal-dark-bg: #2F2F2F;
+
+$color-rect-positive: #E9EFFD;
+$color-icon: rgba(145, 145, 145, 0.4);
+$color-filter-hover: rgba(145, 145, 145, 0.2);
+
+
+
+
+
+
+

package/src/styles/tooltip.scss

@@ -0,0 +1,85 @@
+@use "variables" as *;
+
+.tooltip:not(.app-ca-main-tooltip):not(.app-main-tooltip) {
+  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji" !important;
+  margin-bottom: 8px !important;
+  &.input-tooltip {
+    margin-bottom: 0 !important;
+  }
+  &.tooltip-m-t-4 {
+    margin-top: 4px !important;
+  }
+  .tooltip-arrow {
+    display: none !important;
+  }
+  .tooltip-inner {
+    border-radius: 3px !important;
+    background-color: #424242 !important;
+    padding: 2px 6px !important;
+    line-height: 14px !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    color: #ffffff !important;
+
+    transition: background-color 0.1s ease-in-out;
+
+    &:empty {
+      display: none !important;
+    }
+  }
+}
+
+.tooltip.show {
+  opacity: 1 !important;
+}
+
+.tooltip-delete,
+.error-tooltip {
+  .tooltip-inner {
+    background-color: #df3c3c !important;
+  }
+}
+
+// Override the default tooltip background when custom bg classes are applied
+.tooltip:not(.app-ca-main-tooltip):not(.app-main-tooltip) {
+  &[class*="tooltip-bg-"] {
+    .tooltip-inner {
+      background-color: inherit !important;
+    }
+  }
+}
+
+@each $color-name, $shades in $color-palettes {
+  .tooltip:not(.app-ca-main-tooltip):not(.app-main-tooltip) {
+    &.tooltip-bg-#{$color-name} {
+      @each $shade, $color-value in $shades {
+        &-#{$shade} {
+          .tooltip-inner {
+            background-color: $color-value !important;
+          }
+
+          // Opacity variants only for -500
+          @if $shade == 500 {
+            &\/20 {
+              .tooltip-inner {
+                background-color: rgba($color-value, 0.2) !important;
+              }
+            }
+            &\/40 {
+              .tooltip-inner {
+                background-color: rgba($color-value, 0.4) !important;
+              }
+            }
+            &\/70 {
+              .tooltip-inner {
+                background-color: rgba($color-value, 0.7) !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/utility/colors.scss

@@ -0,0 +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);
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/utility/utilities.scss

@@ -0,0 +1,6 @@
+@use "colors";
+@use "../variables" as *;
+
+.transition {
+  transition: all 0.2s ease-in-out;
+}

package/src/styles.scss

@@ -0,0 +1,28 @@
+/* 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";
+
+/* Importing Bootstrap SCSS file. */
+@use "bootstrap/scss/bootstrap";
+
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
+
+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";
+}