carriera-intern 0.0.0 → 1.1.76

package/projects/carriera-intern-components/src/app/components/input-datetime-picker/cai-input-datetime-picker.component.scss

@@ -1,862 +0,0 @@
-//@use 'scss/styles.scss';
-
-//@use 'scss/custompickers.scss';
-
-@use "../../../styles/variables" as *;
-
-$bezier: cubic-bezier(0.46, 0.03, 0.51, 0.95);
-
-// New Styles
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active {
-  transition: background-color 5000s ease-in-out 0s !important;
-}
-
-input:-webkit-autofill:focus {
-  -webkit-text-fill-color: #ffffff !important;
-}
-
-input:-moz-autofill,
-input:-moz-autofill-preview {
-  filter: none;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: #e5e7eb;
-}
-
-p,
-ul,
-ol,
-dl,
-blockquote,
-figure,
-pre {
-  margin: 0;
-}
-
-button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-
-button {
-  background: none;
-  border: none;
-  padding: 0;
-}
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  vertical-align: middle;
-  max-width: 100%;
-  height: auto;
-}
-
-/* Remove default list styles on ul, ol */
-ul,
-ol {
-  padding-left: 1.5rem;
-  list-style-position: outside;
-}
-
-/* Link styles */
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/* Tables */
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-/* Remove outline for focus on mouse users, but keep it for keyboard */
-:focus:not(:focus-visible) {
-  outline: none;
-}
-
-.datetime-input-container {
-  // Text Colors
-  --color-text: #{$color-text-base-content};
-  --color-text-negative: #{$color-text-base-negative};
-  --color-text-heading: #{$color-text-base-heading};
-  --color-text-subtle: #{$color-text-base-content-subtle};
-  --color-text-inverse: #{$color-text-base-inverse};
-
-  // Icon Colors
-  --color-icon-neutral: #{$color-icon-base-neutral};
-  --color-icon-negative: #{$color-icon-base-negative};
-  --color-icon-positive: #{$color-icon-base-positive};
-  --color-icon-inverse: #{$color-icon-base-inverse};
-  --color-icon-disable: #{$color-icon-base-disable};
-
-  // Surface Input Colors - Neutral
-  --color-surface-neutral: #{$color-surface-input-neutral};
-  --color-surface-neutral-hover: #{$color-surface-input-neutral-hover};
-  --color-surface-neutral-focus: #{$color-surface-input-neutral-focus};
-
-  // Surface Input Colors - Positive
-  --color-surface-positive: #{$color-surface-input-positive};
-  --color-surface-positive-hover: #{$color-surface-input-positive-hover};
-  --color-surface-positive-focus: #{$color-surface-input-positive-focus};
-
-  // Surface Input Colors - Negative
-  --color-surface-negative: #{$color-surface-input-negative};
-  --color-surface-negative-hover: #{$color-surface-input-negative-hover};
-  --color-surface-negative-focus: #{$color-surface-input-negative-focus};
-
-  // Surface Input Colors - Disable
-  --color-surface-disable: #{$color-surface-input-disable};
-
-  &.datetime-inverse {
-    // Text Colors
-    --color-text: #{$color-text-base-inverse};
-    --color-text-negative: #{$color-inverse-text-base-negative};
-    --color-text-heading: #{$color-text-base-inverse};
-    --color-text-inverse: #{$color-text-base-content};
-
-    // Icon Colors
-    --color-icon-neutral: #{$color-inverse-icon-base-neutral};
-    --color-icon-negative: #{$color-inverse-icon-base-negative};
-    --color-icon-positive: #{$color-inverse-icon-base-positive};
-    --color-icon-disable: #{$color-inverse-icon-base-disable};
-
-    // Surface Input Colors - Neutral
-    --color-surface-neutral: #{$color-inverse-surface-input-neutral};
-    --color-surface-neutral-hover: #{$color-inverse-surface-input-neutral-hover};
-    --color-surface-neutral-focus: #{$color-inverse-surface-input-neutral-focus};
-
-    // Surface Input Colors - Positive
-    --color-surface-positive: #{$color-inverse-surface-input-positive};
-    --color-surface-positive-hover: #{$color-inverse-surface-input-positive-hover};
-    --color-surface-positive-focus: #{$color-surface-input-positive-focus};
-
-    // Surface Input Colors - Negative
-    --color-surface-negative: #{$color-inverse-surface-input-negative};
-    --color-surface-negative-hover: #{$color-inverse-surface-input-negative-hover};
-    --color-surface-negative-focus: #{$color-surface-input-negative-focus};
-
-    // Surface Input Colors - Disable
-    --color-surface-disable: #{$color-inverse-surface-input-disable};
-
-    &:not(.datetime-has-text) {
-      .datetime-input {
-        color: var(--color-text-inverse) !important;
-      }
-      .main::selection {
-        color: var(--color-text-inverse) !important;
-      }
-      &.datetime-focus {
-        .datetime-icon {
-          color: var(--color-icon-neutral) !important;
-        }
-        .datetime-separator {
-          background-color: var(--color-icon-neutral) !important;
-        }
-      }
-    }
-    &.datetime-valid,
-    &.datetime-invalid {
-      &.datetime-focus {
-        .datetime-input {
-          color: var(--color-text);
-        }
-      }
-      &:hover {
-        .datetime-bg-icon {
-          &:hover {
-            background-color: $color-white-50 !important;
-          }
-        }
-        .datetime-dropdown-icon,
-        .datetime-icon {
-          &:hover {
-            color: $color-white-50 !important;
-          }
-        }
-      }
-    }
-  }
-
-  &.datetime-in-table {
-    --color-surface-neutral: transparent;
-    --color-surface-negative: transparent;
-    --color-surface-positive: transparent;
-
-    .datetime-dropdown-icon {
-      opacity: 0;
-    }
-
-    &.datetime-invalid:not(.datetime-focus):not(:hover) {
-      .datetime-input,
-      .datetime-label {
-        color: var(--color-text-negative);
-      }
-    }
-
-    &:hover,
-    &.datetime-focus {
-      .datetime-dropdown-icon {
-        opacity: 1;
-      }
-    }
-  }
-
-  padding: 4px 4px 4px 6px;
-  border-radius: 2px;
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  background-color: var(--color-surface-neutral);
-
-  transition: background-color 0.1s $bezier;
-
-  &:hover {
-    background-color: var(--color-surface-neutral-hover);
-
-    .datetime-bg-icon {
-      color: var(--color-surface-neutral-hover);
-    }
-  }
-
-  &.datetime-focus {
-    background-color: var(--color-surface-neutral-focus);
-
-    &.datetime-in-table:not(.datetime-billing) {
-      .datetime-label {
-        opacity: 0;
-      }
-    }
-
-    &:not(.datetime-in-table):not(.datetime-billing) {
-      .datetime-label {
-        transform: translateY(-20px);
-        font-weight: 600;
-        font-size: 11px;
-        color: var(--color-text-heading) !important;
-      }
-    }
-
-    &.datetime-billing {
-      .datetime-label {
-        color: white !important;
-      }
-    }
-
-    .datetime-bg-icon {
-      background-color: var(--color-icon-inverse);
-      color: var(--color-surface-neutral-focus);
-
-      &:hover {
-        background-color: $color-white-50;
-      }
-    }
-
-    .datetime-icon {
-      color: var(--color-icon-inverse);
-
-      &:hover {
-        color: $color-white-50;
-      }
-    }
-
-    .datetime-separator {
-      background-color: var(--color-icon-inverse);
-    }
-
-    .datetime-input {
-      color: var(--color-text-inverse);
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-
-  &.datetime-popover-open {
-    .datetime-dropdown-icon {
-      transform: rotate3d(1, 0, 0, 180deg);
-    }
-  }
-
-  &.datetime-has-text {
-    .datetime-input {
-      opacity: 1;
-      pointer-events: auto;
-    }
-
-    &.datetime-disabled {
-      .datetime-input {
-        pointer-events: none !important;
-      }
-    }
-
-    &:not(.datetime-in-table):not(.datetime-billing) {
-      .datetime-label {
-        transform: translateY(-20px);
-        font-weight: 600;
-        font-size: 11px;
-        color: var(--color-text-heading) !important;
-      }
-    }
-
-    &.datetime-in-table:not(.datetime-billing) {
-      .datetime-label {
-        opacity: 0;
-      }
-    }
-  }
-
-  &.datetime-valid:not(.datetime-disabled) {
-    background-color: var(--color-surface-positive);
-
-    &:hover {
-      background-color: var(--color-surface-positive-hover);
-      .datetime-bg-icon {
-        background-color: var(--color-icon-positive);
-        color: var(--color-surface-positive-hover);
-
-        &:hover {
-          background-color: $color-blue-700;
-        }
-      }
-
-      .datetime-cancel-button {
-        opacity: 1;
-        pointer-events: auto;
-      }
-    }
-
-    &.datetime-focus {
-      background-color: var(--color-surface-positive-focus);
-
-      .datetime-bg-icon {
-        background-color: var(--color-icon-inverse);
-        color: var(--color-surface-positive-focus);
-
-        &:hover {
-          background-color: $color-white-50;
-        }
-      }
-
-      .datetime-icon {
-        color: var(--color-icon-inverse);
-        &:hover {
-          color: $color-white-50;
-        }
-      }
-
-      .datetime-separator {
-        background-color: var(--color-icon-inverse);
-      }
-
-      .datetime-cancel-button {
-        opacity: 1;
-        pointer-events: auto;
-      }
-    }
-    .datetime-separator {
-      background-color: var(--color-icon-positive);
-    }
-
-    .datetime-dropdown-icon,
-    .datetime-icon {
-      color: var(--color-icon-positive);
-
-      &:hover {
-        color: $color-blue-700;
-      }
-    }
-  }
-
-  &.datetime-invalid:not(.datetime-disabled) {
-    .datetime-error-message {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    background-color: var(--color-surface-negative);
-
-    &:hover {
-      background-color: var(--color-surface-negative-hover);
-
-      .datetime-bg-icon {
-        background-color: var(--color-icon-negative);
-        color: var(--color-surface-negative-hover);
-
-        &:hover {
-          background-color: $color-red-700;
-        }
-      }
-
-      &.datetime-has-text {
-        .datetime-cancel-button {
-          opacity: 1;
-          pointer-events: auto;
-        }
-      }
-    }
-
-    &.datetime-focus {
-      &.datetime-has-text {
-        background-color: var(--color-surface-negative-focus);
-
-        .datetime-bg-icon {
-          background-color: var(--color-icon-inverse);
-          color: var(--color-surface-negative-focus);
-
-          &:hover {
-            background-color: $color-white-50;
-          }
-        }
-
-        .datetime-icon {
-          color: var(--color-icon-inverse);
-
-          &:hover {
-            color: $color-white-50;
-          }
-        }
-
-        .datetime-separator {
-          background-color: var(--color-icon-inverse);
-        }
-
-        .datetime-cancel-button {
-          opacity: 1;
-          pointer-events: auto;
-        }
-      }
-
-      &:not(.datetime-has-text) {
-        background-color: var(--color-surface-neutral-focus);
-
-        .datetime-bg-icon {
-          background-color: var(--color-icon-inverse);
-          color: var(--color-surface-neutral-focus);
-          &:hover {
-            background-color: $color-white-50;
-          }
-        }
-
-        .datetime-separator {
-          background-color: var(--color-icon-inverse);
-        }
-
-        .datetime-icon {
-          color: var(--color-icon-inverse);
-
-          &:hover {
-            color: $color-white-50;
-          }
-        }
-      }
-    }
-
-    .datetime-separator {
-      background-color: var(--color-icon-negative);
-    }
-
-    .datetime-dropdown-icon,
-    .datetime-icon {
-      color: var(--color-icon-negative);
-
-      &:hover {
-        color: $color-red-700;
-      }
-    }
-  }
-
-  &.datetime-disabled {
-    cursor: default;
-    &:not(.datetime-in-table) {
-      background-color: var(--color-surface-disable);
-    }
-
-    &.datetime-in-table {
-      background-color: transparent;
-    }
-
-    pointer-events: none;
-
-    .datetime-label {
-      color: var(--color-text-subtle) !important;
-    }
-
-    .datetime-icon {
-      color: var(--color-icon-disable);
-    }
-
-    &.datetime-has-text {
-      .datetime-icon {
-        color: var(--color-icon-neutral);
-      }
-    }
-
-    .datetime-separator {
-      background-color: var(--color-icon-neutral);
-    }
-
-    .datetime-input {
-      color: var(--color-text) !important;
-    }
-  }
-
-  &.datetime-required {
-    .datetime-label {
-      &::after {
-        content: " *";
-        color: var(--color-text-negative);
-      }
-    }
-  }
-
-  cursor: pointer;
-  width: 100%;
-}
-
-.datetime-icon-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  width: max-content;
-
-  &.hidden {
-    display: none;
-  }
-
-  .datetime-icon {
-    order: 1;
-  }
-
-  .datetime-separator {
-    height: 14px;
-    width: 1px;
-    border-radius: 2px;
-    background-color: var(--color-icon-neutral);
-    transition: background-color 0.2s ease-in-out;
-    opacity: 40%;
-    order: 2;
-    margin-right: 4px;
-  }
-}
-
-.datetime-icon {
-  width: 18px;
-  height: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-icon-neutral);
-  transition:
-    color 0.2s ease-in-out,
-    opacity 0.2s ease-in-out,
-    transform 0.2s ease-in-out;
-
-  &:hover {
-    color: $color-black-300;
-  }
-}
-
-.datetime-label {
-  position: absolute;
-  display: flex;
-  gap: 4px;
-  left: 27px;
-  font-size: 14px;
-  line-height: 18px;
-  font-weight: 400;
-  pointer-events: none;
-  padding: 0.25rem 6px;
-  color: var(--color-text);
-  transition:
-    transform 0.1s ease-in-out,
-    font-weight 0.1s ease-in-out,
-    color 0.1s ease-in-out,
-    font-size 0.1s ease-in-out,
-    opacity 0.1s ease-in-out;
-  transform: translateY(0);
-  user-select: none;
-}
-
-.datetime-icon-hidden {
-  .datetime-label {
-    left: 0;
-  }
-}
-
-.datetime-bg-icon {
-  background-color: var(--color-icon-neutral);
-  color: var(--color-surface-neutral);
-  border-radius: 1px;
-  height: 18px;
-  width: 18px;
-  padding: 0;
-  display: grid;
-  place-items: center;
-
-  &:focus-visible {
-    outline: none;
-  }
-
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out,
-    opacity 0.2s ease-in-out,
-    transform 0.1s ease-in-out;
-
-  transform-box: border-box;
-  transform-origin: center;
-  will-change: transform;
-
-  svg {
-    transition: transform 0.1s ease-in-out;
-  }
-
-  &:hover {
-    transform: scale(calc(22 / 18));
-    svg {
-      transform: scale(calc(18 / 22));
-    }
-  }
-
-  &:active {
-    transform: scale(1);
-  }
-}
-
-.datetime-cancel-button {
-  position: absolute;
-  right: 26px;
-  top: 4px;
-
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-  pointer-events: none;
-}
-
-.datetime-dropdown-icon {
-  position: absolute;
-  right: 4px;
-  top: 4px;
-  transform: rotate3d(1, 0, 0, 0deg);
-
-  &:hover {
-    color: $color-black-300;
-  }
-}
-
-.datetime-input {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  overflow: hidden;
-  color: var(--color-text);
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  white-space: nowrap;
-  font-family: Montserrat;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 18px;
-
-  opacity: 0;
-  pointer-events: none;
-  cursor: text;
-
-  transition:
-    opacity 0.2s ease-in-out,
-    color 0.2s ease-in-out;
-
-  .main {
-    border-radius: 1px;
-
-    &.time-am-pm {
-      margin-left: 4px;
-    }
-  }
-}
-
-.datetime-size-22 {
-  height: 22px;
-  padding-left: 0;
-
-  .datetime-icon {
-    height: 14px !important;
-    width: 14px !important;
-  }
-
-  .datetime-bg-icon {
-    height: 14px !important;
-    width: 14px !important;
-
-    padding: 2px !important;
-    right: 22px !important;
-  }
-
-  .datetime-icon-container {
-    height: 22px !important;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-left: 4px !important;
-  }
-
-  .datetime-input {
-    padding-top: 2px;
-    padding-bottom: 2px;
-  }
-
-  .datetime-label {
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-left: 0 !important;
-  }
-
-  .datetime-icon {
-    height: 14px !important;
-    width: 14px !important;
-  }
-
-  &.datetime-has-text,
-  &.datetime-focus {
-    .datetime-label {
-      transform: translateY(-18px) !important;
-    }
-  }
-}
-
-.datetime-error-message {
-  position: absolute;
-  bottom: -16px;
-  right: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  opacity: 0;
-  pointer-events: none;
-  user-select: none;
-  transition:
-    opacity 0.2s ease-in-out,
-    transform 0.2s ease-in-out;
-  color: var(--color-text-negative);
-  transform: translateY(-10px);
-  pointer-events: none;
-}
-
-.datetime-in-table {
-  .datetime-input-listener {
-    width: 100%;
-    height: 100% !important;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-  }
-}
-
-.datetime-input-listener {
-  caret-color: transparent;
-  height: 12px !important;
-}
-
-.main {
-  &::selection {
-    background-color: #ffffff4d;
-    border-radius: 1px;
-  }
-}
-
-.datetime-billing {
-  .datetime-separator {
-    order: 0;
-    margin-right: 0;
-    margin-left: 4px;
-  }
-
-  .datetime-cancel-button {
-    right: 4px;
-  }
-
-  .datetime-label {
-    left: 0;
-    font-weight: 600;
-    font-size: 11px;
-    color: var(--color-text-heading) !important;
-  }
-
-  .datetime-icon-container {
-    order: 2;
-  }
-
-  .datetime-input {
-    margin-left: auto;
-  }
-
-  .datetime-error-message {
-    bottom: 4px !important;
-    right: 32px !important;
-    transform: translateY(0) !important;
-  }
-
-  &.datetime-focus,
-  &.datetime-has-text {
-    .datetime-error-message {
-      opacity: 0 !important;
-    }
-  }
-
-  .datetime-dropdown-icon {
-    opacity: 0;
-  }
-
-  &:hover,
-  &.datetime-focus {
-    .datetime-icon {
-      opacity: 0;
-    }
-
-    .datetime-dropdown-icon {
-      opacity: 1;
-    }
-  }
-
-  &.datetime-has-text {
-    .datetime-dropdown-icon {
-      opacity: 0 !important;
-      pointer-events: none !important;
-    }
-
-    &:hover,
-    &.datetime-focus {
-      .datetime-icon-container {
-        pointer-events: none !important;
-        .datetime-icon {
-          opacity: 0 !important;
-        }
-      }
-    }
-  }
-}