halleyx-ui-framework 11.7.92 → 11.7.94

package/dist/src/assets/styles/inputfields.scss

@@ -1,576 +0,0 @@
-input[type='date'] {
-  position: relative;
-}
-input[type='number']:disabled {
-  cursor: not-allowed;
-}
-input[type='date']::-webkit-calendar-picker-indicator {
-  color: transparent;
-  background: none;
-  z-index: 1;
-  min-width: 35px;
-  height: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-.input-field input[type='date'] {
-  padding: 0 0 0 15px;
-}
-input[type='date']:before {
-  font-size: 18px;
-  color: transparent;
-  background: none;
-  display: block;
-  font-family: 'halleyx-icons';
-  content: '\e913';
-  /* This is the calendar icon in FontAwesome */
-  position: absolute;
-  right: 9px;
-  color: #565553;
-}
-input[type='datetime-local'] {
-  position: relative;
-}
-
-.phone-number {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}
-
-input[type='datetime-local']::-webkit-calendar-picker-indicator {
-  color: transparent;
-  background: none;
-  z-index: 1;
-  min-width: 35px;
-  height: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-.input-field input[type='datetime-local'] {
-  padding: 0 0 0 15px;
-}
-
-input[type='datetime-local']:before {
-  font-size: 18px;
-  color: transparent;
-  background: none;
-  display: block;
-  font-family: 'halleyx-icons';
-  content: '\e913';
-  /* This is the calendar icon in FontAwesome */
-  position: absolute;
-  right: 9px;
-  color: #565553;
-}
-*,
-*:focus {
-  outline: none;
-}
-.input-field.small {
-  position: relative;
-  display: flex;
-  width: 100%;
-  min-height: 38px;
-  .input-icon {
-    min-width: 36px;
-    height: 36px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    i {
-      font-size: var(--hlx-icon-size-sm) !important;
-      color: #565553;
-    }
-  }
-}
-// ::-webkit-input-placeholder {
-//   font-family: 'Open Sans';
-//   font-size: 14px;
-//   color: var(--hlx-border-color-dark);
-// }
-
-.input-field.small input::placeholder,
-.input-field.small textarea::placeholder {
-  font-family: 'Open Sans', sans-serif;
-  font-size: 14px;
-  color: var(--hlx-border-color-dark);
-}
-
-/* Safari / Chrome */
-.input-field.small input::-webkit-input-placeholder,
-.input-field.small textarea::-webkit-input-placeholder {
-  font-family: 'Open Sans', sans-serif;
-}
-
-/* Edge / IE */
-.input-field.small input:-ms-input-placeholder,
-.input-field.small textarea:-ms-input-placeholder {
-  font-family: 'Open Sans', sans-serif;
-}
-
-input[type='password'] {
-  font-family: Verdana;
-}
-.isSwitchError:checked + .slider {
-  background: var(--hlx-color-error) !important;
-  border: 1px solid var(--hlx-color-error) !important;
-}
-.isSwitchError + .slider {
-  background: var(--hlx-border-color) !important;
-  border: 1px solid var(--hlx-color-error) !important;
-}
-.isSwitchError:checked:disabled + .slider {
-  background: var(--hlx-border-color) !important;
-  border: 1px solid var(--hlx-color-error) !important;
-}
-.isCheckMarkError {
-  border: 1px solid var(--hlx-color-error) !important;
-}
-.isCheckMarkError.select-all-theme {
-  border: 1px solid var(--hlx-color-error) !important;
-  background: var(--hlx-color-error) !important;
-}
-input:checked ~ .isCheckMarkError {
-  border: 1px solid var(--hlx-color-error) !important;
-  background: var(--hlx-color-error) !important;
-}
-.isRadioError {
-  border: 1px solid var(--hlx-color-error) !important;
-  &:after {
-    background: var(--hlx-color-error) !important;
-  }
-}
-
-.input-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  // background: white;
-  position: relative;
-  .singleBorder {
-    border: none !important;
-    border-bottom: 1px solid var(--hlx-border-color) !important;
-  }
-  // .singleBorder:hover {
-  //   border: none !important;
-  //   border-bottom: 1px solid var(--hlx-color-primary) !important;
-  // }
-  .singleBorder:focus-within {
-    border: none !important;
-    border-bottom: 1px solid var(--hlx-color-primary) !important;
-  }
-  .readOnly.singleBorder:hover {
-    border-bottom: 1px solid var(--hlx-border-color) !important;
-    input {
-      cursor: default;
-    }
-    label {
-      cursor: default;
-    }
-  }
-}
-.input-field.small.readOnly {
-  border: 1px solid var(--hlx-border-color) !important;
-  textarea {
-    cursor: default !important;
-  }
-
-  input {
-    cursor: default !important;
-  }
-  label {
-    color: #a6a6a6 !important;
-    cursor: default !important;
-  }
-}
-.input-field.small input {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0px;
-  width: 100%;
-  height: 36px;
-  color: #565553;
-  background: transparent;
-  border-radius: 5px;
-  border: none;
-  transition: all 0.3s ease;
-  font-size: 14px;
-  padding: 10px 12px 10px 12px;
-  line-height: 18.15px;
-  letter-spacing: 0.5%;
-}
-.input-field.small textarea {
-  font-size: 14px;
-  // font-family: 'OpenSans';
-  display: block;
-  width: 100%;
-  min-height: 66px !important;
-  background: transparent;
-  border-radius: 0px;
-  border: none;
-  transition: all 0.3s ease;
-  margin: 10px 12px;
-  resize: vertical;
-  color: var(--hlx-text-color-primary);
-  textarea:disabled {
-    cursor: not-allowed;
-  }
-}
-.input-field.small {
-  border: solid 1px var(--hlx-border-color);
-  border-radius: 5px;
-  background-color: white;
-}
-.input-field.small.disabled.readOnly {
-  input {
-    color: #a6a6a6 !important;
-  }
-  textarea {
-    color: #a6a6a6 !important;
-    cursor: not-allowed !important;
-  }
-  .readonly-overlay {
-    cursor: not-allowed !important;
-  }
-}
-.input-field.small:hover {
-  border: 1px solid var(--hlx-color-primary);
-}
-.disabled.singleBorder:hover {
-  border-bottom: 1px solid var(--hlx-border-color) !important;
-  input {
-    cursor: not-allowed;
-  }
-}
-
-// .input-field input:focus {
-//   border-color: red !important;
-// }
-
-.input-field.small:focus-within {
-  border-color: var(--hlx-color-primary);
-}
-.input-field.small textarea:focus {
-  border-color: var(--hlx-color-primary);
-}
-
-.input-field.small label {
-  position: absolute;
-  cursor: text;
-  z-index: 2;
-  top: 8px;
-  left: 6px;
-  font-size: 14px;
-  background: #fff;
-  padding: 0 5px;
-  color: var(--hlx-border-color-dark);
-  transition: all 0.2s ease;
-  user-select: none;
-}
-
-.input-field.small input:focus + label,
-.input-field.small input:valid + label {
-  font-size: 12px;
-  top: -9px !important;
-  left: 6px !important;
-}
-.input-field.small textarea:focus + label,
-.input-field.small textarea:valid + label {
-  font-size: 12px;
-  top: -9px !important;
-  left: 6px !important;
-}
-
-.input-field.small input:focus + label {
-  color: var(--hlx-color-primary);
-}
-.input-field.small textarea:focus + label {
-  color: var(--hlx-color-primary);
-}
-
-.error-message {
-  width: 100%;
-  height: 24px;
-  color: #fe4141;
-  font-size: 12px;
-  text-align: left;
-  position: relative;
-}
-
-.condition-box {
-  position: relative;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  justify-content: space-between;
-  i {
-    margin-left: 10px;
-  }
-}
-.password-conditon-dialog-title {
-  font-family: var(--hlx-);
-  font-weight: bold;
-  font-size: 14px;
-  text-align: left;
-  margin-bottom: 8px;
-}
-.password-condition-dialog {
-  padding: 10px 12px;
-  background: white;
-  border-radius: 5px;
-  box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
-  position: absolute;
-  z-index: 5;
-  margin-top: 50px;
-  color: #565553;
-  // width: 92%;
-  // margin-top: -15px;
-  // margin-left: -5px;
-}
-
-.drop {
-  font-size: 14px;
-  width: 100%;
-  position: absolute;
-  padding: 0 10px 0 10px;
-  max-height: 400px;
-  overflow-y: scroll;
-  border: 1px solid #e8e8e8;
-  border-radius: 5px;
-  /* width: 250px; */
-  z-index: 132;
-  margin-top: 45px;
-  background: white;
-  ul {
-    li {
-      padding: 10px;
-      cursor: pointer;
-    }
-  }
-}
-
-.caret-div {
-  display: flex;
-  position: absolute;
-  max-width: 400px;
-  max-height: 400px;
-  background-color: white;
-  border: 1px solid #d8d8d8;
-  border-radius: 3px;
-  font-size: 14px;
-  color: var(--hlx-text-color-primary);
-  overflow: auto;
-  z-index: 1000;
-  li {
-    padding: 3px 7px;
-    height: 30px;
-    &:hover {
-      cursor: pointer;
-      background: var(--hlx-color-primary-light);
-    }
-    .abc,
-    .a123 {
-      font-size: 12px;
-      margin-right: 12px;
-      font-weight: 200;
-    }
-    .a123 {
-      margin-right: 12px;
-      font-size: 11px;
-      font-weight: 200;
-    }
-    .icon-calendar-regular {
-      margin-right: 12px;
-      font-size: 20px;
-    }
-    .abcarray {
-      font-size: 15px;
-      margin-left: 3px;
-      margin-right: 16px;
-    }
-  }
-  .list-item {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    /* align-content: center; */
-    flex-direction: row;
-  }
-  .list-item-icon {
-    font-size: 20px;
-    margin-right: 12px;
-  }
-}
-
-.input-field.small.customError {
-  border: 1px solid #fe4141 !important;
-  label {
-    color: #fe4141 !important;
-  }
-}
-.input-field.small.singleBorder {
-  border: 1px solid transparent !important;
-  border-bottom: 1px solid #d8d8d8 !important;
-  border-radius: 0px;
-  input {
-    padding-left: 0px !important;
-    padding-right: 0px !important;
-  }
-  &:hover {
-    border-bottom: 1px solid var(--hlx-color-primary) !important;
-  }
-}
-.input-field.small.single-border-error {
-  border: 1px solid transparent !important;
-  border-bottom: 1px solid var(--hlx-color-error) !important;
-  &:hover {
-    border-bottom: 1px solid var(--hlx-color-error) !important;
-  }
-}
-
-.readonly-overlay {
-  position: absolute;
-  background: transparent;
-  width: 100%;
-  height: 100%;
-  z-index: 99;
-}
-.label-overlay {
-  background: transparent;
-  width: 100%;
-  position: absolute;
-  height: 100%;
-  top: -10px;
-  z-index: 99;
-}
-
-.address-options-parent-container {
-  border: 1px solid var(--hlx-border-color);
-  border-radius: 5px;
-  background: white;
-  max-height: 242px;
-  overflow-y: auto;
-  .meta-primary,
-  .meta-secondary {
-    color: #777777;
-    font-size: 12px;
-  }
-  .meta-id {
-    font-size: 12px;
-    color: #2879b7;
-  }
-  .address-options-container {
-    // height: 30px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      background-color: var(--hlx-color-primary-light);
-      cursor: pointer;
-    }
-    .address-options {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .link {
-      display: flex;
-      color: #2879b7;
-      align-items: center;
-      gap: 0.5rem;
-      span {
-        font-size: 14px;
-      }
-    }
-  }
-}
-
-.hover-country:hover {
-  background-color: var(--hlx-color-primary-light);
-}
-
-.suffix-select {
-  main {
-    width: 100px;
-    .hlx-select-container {
-      // border:none;
-      height: 36px;
-      .hlx-select-input {
-        background: #a6a6a6;
-        color: rgb(107, 114, 128);
-      }
-      .hlx-select-icon {
-        background: #a6a6a6;
-        color: rgb(107, 114, 128);
-      }
-    }
-    .custom-dropdown {
-      // border:none;
-      background: rgb(249, 250, 251);
-
-      input {
-        border-radius: 0px;
-      }
-      .icon-angle-down-regular,
-      .icon-angle-up-regular {
-        height: 36px;
-      }
-      .tagimagecontainer {
-        color: rgb(107, 114, 128);
-        background: rgb(249, 250, 251);
-      }
-    }
-  }
-}
-
-.custom-slot-suffix {
-  border-top-right-radius: 5px !important;
-  border-bottom-right-radius: 5px !important;
-  main {
-    border-top-right-radius: 5px !important;
-    border-bottom-right-radius: 5px !important;
-  }
-}
-.custom-slot-prefix {
-  border-top-left-radius: 5px !important;
-  border-bottom-left-radius: 5px !important;
-  main {
-    border-top-left-radius: 5px !important;
-    border-bottom-left-radius: 5px !important;
-  }
-}
-
-.singleBorder {
-  input {
-    padding-left: 0px !important;
-    padding-right: 0px !important;
-    padding-bottom: 0px !important;
-  }
-  textarea {
-    padding-left: 0px !important;
-    padding-right: 0px !important;
-    line-height: 14.15px !important;
-    height: auto !important;
-  }
-  .symbol-padding {
-    padding-left: 4px !important;
-  }
-  .number-symbol-holder {
-    left: 0px !important;
-    top: 13px !important;
-  }
-}