carriera-intern 0.0.0 → 1.1.76

package/projects/carriera-intern-components/src/app/components/dispatch-dropdown/dispatch-dropdown.component.scss

@@ -1,792 +0,0 @@
-@use "variables" as *;
-$bezier: cubic-bezier(0.46, 0.03, 0.51, 0.95);
-
-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;
-}
-
-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;
-  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;
-}
-
-.dispatch-dropdown {
-  height: 34px;
-  border-radius: 3px;
-  background-color: transparent;
-  transition:
-    background-color 0.1s $bezier,
-    border-radius 0.1s $bezier;
-
-  isolation: isolate;
-  padding: 4px;
-
-  display: flex;
-  align-items: center;
-
-  &.editable {
-    cursor: pointer;
-  }
-
-  &:not(.open):not(.has-data):not(.is-locked) {
-    cursor: pointer;
-
-    .no-content {
-      opacity: 1;
-      pointer-events: auto;
-    }
-
-    &:hover {
-      .primary-button-icon {
-        color: $color-blue-100;
-      }
-
-      .default-add {
-        color: $color-white-50;
-      }
-
-      background-color: $color-blue-700;
-    }
-  }
-
-  &.is-locked:not(.has-data) {
-    .no-content {
-      opacity: 0 !important;
-      pointer-events: none !important;
-    }
-  }
-
-  &.has-no-add:not(.open),
-  &.has-no-content-template:not(.open) {
-    .primary-button {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    .buttons-container {
-      width: 0px;
-    }
-
-    .primary-button-icon {
-      color: transparent !important;
-      transform: rotate(45deg);
-    }
-
-    &:hover {
-      background-color: transparent !important;
-    }
-  }
-
-  &.has-no-content-template {
-    .no-content {
-      margin-left: 0px !important;
-    }
-  }
-
-  &.has-no-add:not(.open) {
-    .no-content {
-      opacity: 0 !important;
-      pointer-events: none !important;
-    }
-  }
-
-  &.has-data:not(.open) {
-    .dispatch-template {
-      opacity: 1;
-      pointer-events: auto;
-      user-select: auto;
-    }
-
-    .no-content {
-      opacity: 0 !important;
-      pointer-events: none !important;
-    }
-
-    .dropdown-input-container {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    &:not(.editable) {
-      .primary-button {
-        pointer-events: auto;
-
-        .primary-button-icon {
-          color: $color-black-100;
-          transform: rotate(45deg);
-        }
-
-        &:hover:not(.disabled) {
-          background-color: $color-red-100 !important;
-
-          .primary-button-icon {
-            color: $color-red-700 !important;
-          }
-        }
-      }
-    }
-  }
-
-  &.is-locked,
-  &.has-no-remove-button.has-data {
-    .buttons-container {
-      width: 0px;
-    }
-  }
-
-  &.open {
-    background-color: $color-black-500;
-
-    .no-content {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    .dispatch-dropdown-input {
-      opacity: 1;
-      pointer-events: auto;
-      user-select: auto;
-    }
-
-    .primary-button-icon {
-      transform: rotate(45deg);
-      color: $color-black-100;
-    }
-
-    .dispatch-template {
-      opacity: 0;
-      pointer-events: none;
-      user-select: none;
-    }
-
-    .primary-button {
-      pointer-events: auto;
-
-      &:hover {
-        background-color: #91919166 !important;
-
-        .primary-button-icon {
-          color: $color-white-500 !important;
-        }
-      }
-    }
-  }
-}
-
-.main-container {
-  position: relative;
-  flex: 1;
-  height: 26px;
-}
-
-.dispatch-template {
-  opacity: 0;
-  pointer-events: none;
-  user-select: none;
-  width: 100%;
-  height: 26px;
-}
-
-.dispatch-template,
-.no-content,
-.dropdown-input-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  transition: opacity 0.1s $bezier;
-}
-
-.no-content {
-  height: 26px;
-  display: flex;
-  align-items: center;
-
-  transition: opacity 0.1s $bezier;
-
-  margin-left: 10px;
-
-  user-select: none;
-}
-
-.default-add {
-  color: $color-black-300;
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-
-  transition: color 0.1s $bezier;
-}
-
-// Buttons
-
-.buttons-container {
-  position: relative;
-  z-index: 1;
-  height: 26px;
-  user-select: none;
-  width: 26px;
-
-  &.locked {
-    .primary-button {
-      pointer-events: none !important;
-      opacity: 0;
-    }
-  }
-
-  &.dragging {
-    .dragging-indicator {
-      opacity: 1 !important;
-      pointer-events: auto;
-    }
-
-    .primary-button {
-      opacity: 0 !important;
-      pointer-events: none;
-    }
-  }
-
-  .primary-button {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .dragging-indicator {
-    opacity: 0;
-    pointer-events: none;
-  }
-}
-
-.primary-button,
-.dragging-indicator {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  z-index: 1;
-
-  transition: opacity 0.1s $bezier;
-}
-
-.dragging-indicator {
-  padding: 4px;
-  width: 26px;
-  height: 26px;
-}
-
-.primary-button {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  user-select: none;
-  cursor: pointer;
-
-  padding: 4px;
-  width: 26px;
-  height: 26px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border-radius: 2px;
-
-  transition:
-    opacity 0.1s $bezier,
-    background-color 0.1s $bezier;
-
-  .primary-button-icon {
-    svg {
-      height: 18px;
-      width: 18px;
-    }
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    color: $color-blue-300;
-
-    transition:
-      color 0.1s $bezier,
-      opacity 0.1s $bezier,
-      transform 0.1s $bezier;
-  }
-
-  &.disabled {
-    cursor: default;
-
-    .primary-button-icon {
-      color: $color-white-700 !important;
-    }
-  }
-}
-
-.dropdown-input-container {
-  padding: 4px 8px 4px 6px;
-  height: 26px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.dispatch-dropdown-input {
-  height: 18px;
-  border: 0;
-  outline: none;
-  background-color: transparent;
-  color: $color-white-50;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-
-  ::placeholder {
-    color: $color-black-200;
-  }
-
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 18px;
-
-  opacity: 0;
-  pointer-events: none;
-  user-select: none;
-
-  transition: opacity 0.1s $bezier;
-}
-
-.dropdown-anchor {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  opacity: 0;
-  pointer-events: none;
-  user-select: none;
-}
-
-.dropdown-menu {
-  min-width: 0px !important;
-  width: 100%;
-  background-color: transparent;
-  border: 0;
-  padding: 0 !important;
-  z-index: 1100 !important;
-
-  height: var(--container-height);
-  max-height: var(--container-height);
-
-  transition: opacity 0.1s $bezier !important;
-
-  .dropdown-menu-content {
-    position: absolute;
-    width: 100%;
-    padding: 2px 0px 4px 4px;
-
-    background-color: $color-black-500;
-
-    max-height: var(--max-height);
-    height: var(--max-height);
-
-    overflow-y: scroll;
-    scrollbar-gutter: stable;
-
-    &::-webkit-scrollbar {
-      background-color: $color-black-500;
-      border-radius: 0 3px 3px 0;
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: $color-black-100;
-      width: 2px;
-      border: 2px solid $color-black-500;
-      border-radius: 3px;
-    }
-
-    @supports (-moz-appearance: none) {
-      padding-right: 6px;
-      scrollbar-width: 4px;
-      scrollbar-color: $color-black-100 transparent;
-      scrollbar-gutter: stable !important;
-
-      &:hover {
-        scrollbar-color: $color-black-100 transparent;
-        scrollbar-width: 4px !important;
-        scrollbar-gutter: stable !important;
-      }
-    }
-
-    @-moz-document url-prefix() {
-      overflow: -moz-scrollbars-vertical;
-      scrollbar-width: 4px;
-      scrollbar-color: $color-black-100 transparent;
-    }
-
-    & {
-      transition:
-        max-height 0.1s $bezier,
-        height 0.1s $bezier !important;
-    }
-
-    @starting-style {
-      max-height: 0;
-      overflow-y: hidden;
-    }
-
-    & {
-      animation: dropdown-menu-opening 0.1s $bezier;
-    }
-  }
-
-  @starting-style {
-    opacity: 0;
-    overflow-y: hidden;
-  }
-
-  &.closing,
-  &.hide-dropdown {
-    opacity: 0;
-
-    .dropdown-menu-content {
-      max-height: 0;
-      overflow-y: hidden;
-      animation: none;
-    }
-  }
-}
-
-@keyframes dropdown-menu-opening {
-  0% {
-    overflow-y: hidden;
-  }
-  99% {
-    overflow-y: hidden;
-  }
-  100% {
-    overflow-y: scroll;
-  }
-}
-
-.dropdown-item {
-  color: white;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 18px;
-  height: 26px;
-  padding: 4px 6px;
-  width: 100%;
-
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  user-select: none;
-
-  cursor: pointer;
-
-  background-color: $color-black-500;
-  transition:
-    background-color 0.1s $bezier,
-    color 0.1s $bezier;
-  border-radius: 2px;
-
-  &:hover {
-    background-color: $color-black-300;
-    color: white;
-  }
-
-  &:focus-visible {
-    background-color: $color-black-300;
-    border: 0;
-    outline: none;
-  }
-
-  position: relative;
-
-  margin-top: 4px;
-
-  p {
-    flex-shrink: 1;
-    max-width: max-content;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.dropdown-group-header {
-  color: white;
-  font-weight: 700;
-  font-size: 11px;
-  line-height: 18px;
-  height: 30px;
-  padding: 8px 4px 4px 4px;
-  width: 100%;
-
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  user-select: none;
-
-  cursor: pointer;
-
-  background-color: $color-black-500;
-  transition:
-    background-color 0.1s $bezier,
-    color 0.1s $bezier;
-
-  &:hover {
-    color: white !important;
-
-    .dropdown-icon {
-      opacity: 1 !important;
-      color: $color-white-70 !important;
-    }
-
-    .counter {
-      opacity: 0 !important;
-    }
-  }
-
-  &:focus-visible {
-    border: 0;
-    outline: none;
-  }
-
-  position: relative;
-
-  // If the dropdown needs to have sticky headers
-  //z-index: 20;
-  // position: sticky;
-  // top: 0;
-
-  p {
-    flex-shrink: 1;
-    max-width: max-content;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 18px;
-  }
-
-  .dropdown-icon {
-    transition:
-      color 0.1s $bezier,
-      transform 0.1s $bezier,
-      opacity 0.1s $bezier;
-
-    color: $color-white-70;
-
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    opacity: 0;
-  }
-
-  .counter {
-    display: flex;
-    padding: 1px 4px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    min-width: 16px;
-
-    color: $color-white-200;
-    text-align: center;
-    font-size: 11px;
-    font-weight: 600;
-    line-height: 14px;
-    border-radius: 60px;
-
-    background-color: $color-black-300;
-
-    user-select: none;
-
-    transition: opacity 0.1s $bezier;
-  }
-
-  &.collapsed {
-    color: $color-black-50;
-
-    .counter {
-      opacity: 0;
-    }
-
-    .dropdown-icon {
-      color: $color-black-100;
-      transform: rotateX(180deg);
-      opacity: 1 !important;
-    }
-  }
-}
-
-.dropdown-group-container {
-  position: relative;
-
-  // If the dropdown needs to have sticky headers
-
-  // &:nth-child(2) {
-  //   .dropdown-group-header {
-  //     outline: 1px solid $color-black-500;
-  //   }
-  // }
-
-  &:not(:nth-child(2)) {
-    .dropdown-group-header {
-      border-top: 1px solid $color-black-300;
-      margin-top: 3px;
-
-      // If the dropdown needs to have sticky headers
-      // top: -2px;
-    }
-  }
-}
-
-.header-right {
-  height: 18px;
-  padding-left: 4px;
-  position: relative;
-  margin-left: auto;
-}
-
-.dropdown-group {
-  overflow: hidden;
-  height: var(--group-height);
-  max-height: var(--group-height);
-
-  transition:
-    height 0.1s $bezier,
-    max-height 0.1s $bezier;
-
-  &.collapsed {
-    height: 0;
-    max-height: 0;
-  }
-}
-
-.no-results {
-  color: $color-black-100;
-  font-weight: 700;
-  font-size: 11px;
-  line-height: 14px;
-
-  pointer-events: none;
-}
-
-.dropdown-menu-separator {
-  position: fixed;
-  z-index: 30;
-  width: calc(100% - 8px);
-  height: 1px;
-  background-color: transparent;
-  border-bottom: 1px solid $color-black-300;
-  margin-top: -1px;
-}
-
-.add-new {
-  font-size: 11px;
-  line-height: 14px;
-
-  font-weight: 700;
-  color: $color-blue-200;
-  border-radius: 2px;
-
-  background-color: transparent;
-
-  transition:
-    background-color 0.1s $bezier,
-    color 0.1s $bezier;
-
-  &:hover {
-    background-color: #3b73ed66;
-    color: white;
-  }
-
-  .add-item-icon {
-    opacity: 1;
-    color: $color-blue-200;
-    margin-left: auto;
-  }
-}