halleyx-ui-framework 11.7.80 → 11.7.81-beta.1

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

@@ -1,554 +0,0 @@
-input[type='checkbox']:checked {
-  content: '\e964';
-}
-// .list-group-item {
-//   cursor: move;
-// }
-// .list-group-item i {
-//   cursor: pointer;
-// }
-
-/* The container */
-.check-container {
-  min-height: 30px;
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding-left: 30px;
-  font-size: 14px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  .ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-.partially-checked-color {
-  background: var(--hlx-color-primary) !important;
-  border: 1px solid var(--hlx-color-primary) !important;
-}
-
-.select-all-theme {
-  background: var(--hlx-color-primary) !important;
-  border: 1px solid var(--hlx-color-primary) !important;
-}
-.select-all-grey {
-  background: var(--hlx-border-color-lighter) !important;
-  border: 1px solid var(--hlx-border-color) !important;
-}
-.select-all-theme-hover:hover {
-  border: 1px solid var(--hlx-color-primary);
-}
-label.check-container:hover input:not(:disabled) {
-  .checkmark {
-    border: 1px solid var(--hlx-color-primary);
-  }
-  // color:var(--hlx-color-primary);
-}
-
-/* Hide the browser's default checkbox */
-.check-container input {
-  position: absolute;
-  opacity: 0;
-  height: 0;
-  width: 0;
-}
-// .check-container input:disabled {
-//     cursor: default !important;
-
-//   // color:var(--hlx-color-primary);
-// }
-.partially-checked {
-  color: white;
-  font-size: 14px;
-  position: relative;
-  left: -81px;
-  z-index: 100;
-  top: 1px;
-  font-weight: bold;
-}
-/* Create a custom checkbox */
-.checkmark {
-  position: absolute;
-  left: 5px;
-  bottom: 6px;
-  height: 16px;
-  width: 16px;
-  background-color: var(--hlx-border-color-lighter);
-  border-radius: 3px;
-  border: 1px solid var(--hlx-border-color);
-}
-
-/////////////////////////////////////////////////////////////////////////////////////////////////
-.check-container {
-  cursor: pointer;
-}
-.check-container.checkContainer-readOnly {
-  cursor: default !important;
-}
-.check-container.checkContainer-disabled {
-  cursor: not-allowed !important;
-}
-
-.check-container:hover input ~ .checkmark {
-  border: 1px solid var(--hlx-color-primary);
-}
-.check-container input:checked ~ .checkmark.check-readOnly.check-disabled {
-  border: 1px solid var(--hlx-color-primary);
-  background-color: var(--hlx-color-primary);
-  cursor: default;
-}
-.check-container:hover
-  input:checked
-  ~ .checkmark.check-readOnly.check-disabled {
-  border: 1px solid var(--hlx-color-primary);
-  background-color: var(--hlx-color-primary);
-  cursor: default;
-}
-.checkmark:after {
-  border: 1px solid var(--hlx-border-color);
-}
-.check-container input ~ .checkmark.check-readOnly.check-disabled {
-  border: 1px solid var(--hlx-border-color);
-  cursor: default;
-}
-.check-container:hover input ~ .checkmark.check-readOnly.check-disabled {
-  border: 1px solid var(--hlx-border-color);
-  cursor: default;
-}
-.check-container:hover input ~ .checkmark.check-disabled {
-  border: 1px solid var(--hlx-border-color);
-  cursor: not-allowed;
-}
-.check-container:hover input ~ .checkmark.check-readOnly {
-  border: 1px solid var(--hlx-border-color);
-  cursor: default;
-}
-.check-container input:checked ~ .checkmark.check-disabled {
-  border: 1px solid var(--hlx-border-color);
-  background: var(--hlx-border-color-lighter);
-  cursor: not-allowed;
-}
-.check-container input:checked ~ .checkmark.check-disabled::after {
-  border: 1px solid var(--hlx-border-color);
-}
-
-/////////////////////////////////////////////////////////////////////////////////////////////////
-/* On mouse-over, add a grey background color */
-// .check-container:hover input ~ .checkmark {
-// background-color:#FFF1D3;
-// }
-// .check-container input:disabled:checked ~ .checkmark {
-//   cursor: not-allowed;
-//   background: var(--hlx-border-color-lighter);
-//   border: 1px solid var(--hlx-border-color);
-// }
-// .check-container input:disabled:checked ~ .checkmark.check-readOnly {
-//   cursor: default;
-//   background: var(--hlx-color-primary);
-//   border: 1px solid var(--hlx-color-primary);
-// }
-// .check-container:hover input:disabled:hover ~ .checkmark:hover {
-//   border: 1px solid var(--hlx-color-primary) !important;
-// }
-// .check-container input:disabled ~ .checkmark {
-//   cursor: not-allowed;
-//   background: var(--hlx-border-color-lighter);
-// }
-// .check-container input:disabled ~ .checkmark:hover {
-//   cursor: default;
-//   background: var(--hlx-border-color-lighter);
-//   border: 1px solid #d8d8d8;
-// }
-// .check-container:hover input:disabled:hover ~ .checkmark:hover {
-//     // border: 1px solid #d8d8d8 !important;
-// }
-// .check-container input:disabled{
-//     // border: 1px solid #d8d8d8 !important;
-//     cursor: default !important;
-// }
-// .check-container:hover input:disabled:checked{
-//   .checkmark::after{
-//     border: 1px solid red !important;
-//   }
-// }
-
-.check-container input:disabled:checked ~ .checkmark:after {
-  left: 5px;
-  top: 2px;
-  width: 3px;
-  height: 7px;
-  // border: solid var(--hlx-border-color);
-  border-radius: 1px;
-  border-width: 0 2px 2px 0px;
-  transform: rotate(45deg);
-}
-.check-container input:disabled:checked ~ .checkmark.check-readOnly:after {
-  left: 5px;
-  top: 2px;
-  width: 3px;
-  height: 7px;
-  border: solid white;
-  border-radius: 1px;
-  border-width: 0 2px 2px 0px;
-  transform: rotate(45deg);
-}
-
-/* When the checkbox is checked, add a blue background */
-.check-container input:checked ~ .checkmark {
-  background-color: var(--hlx-color-primary);
-  border: 1px solid var(--hlx-color-primary);
-}
-
-/* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after {
-  content: '';
-  position: absolute;
-  display: none;
-}
-
-/* Show the checkmark when checked */
-.check-container input:checked ~ .checkmark:after {
-  display: block;
-}
-
-/* Style the checkmark/indicator */
-.check-container .checkmark:after {
-  left: 5px;
-  top: 2px;
-  width: 3px;
-  height: 7px;
-  border: solid white;
-  border-radius: 1px;
-  border-width: 0 2px 2px 0px;
-  transform: rotate(45deg);
-}
-
-/////////////////////////////////////////////////////
-
-/* The container */
-.radio-container {
-  display: flex;
-  position: relative;
-  padding-left: 30px;
-  font-size: 14px;
-  height: 30px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  .ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-.radio-container:hover {
-  cursor: pointer;
-}
-.radio-container.isDisabled:hover {
-  cursor: default;
-  input {
-    cursor: default;
-  }
-}
-label.radio-container:hover {
-  .radio-checkmark {
-    border: 1px solid var(--hlx-color-primary);
-  }
-  .radio-checkmark.bellTheme {
-    border: 1px solid var(--hlx-color-primary);
-  }
-  .radio-checkmark.disabled {
-    border: 1px solid var(--hlx-border-color);
-  }
-  .radio-checkmark.bellTheme.disabled {
-    border: 1px solid var(--hlx-border-color);
-  }
-}
-/* Hide the browser's default radio button */
-.radio-container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-}
-
-/* Create a custom radio button */
-.radio-checkmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 20px;
-  width: 20px;
-  background-color: var(--hlx-border-color-lighter);
-  border-radius: 50%;
-  border: 1px solid var(--hlx-border-color);
-}
-.radio-checkmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  height: 20px;
-  width: 20px;
-  background-color: var(--hlx-border-color-lighter);
-  border-radius: 50%;
-  border: 1px solid var(--hlx-border-color);
-}
-.radio-checkmark.bellTheme {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 24px;
-  width: 24px;
-  background-color: var(--hlx-border-color-lighter);
-  border-radius: 50%;
-  border: 1px solid var(--hlx-border-color);
-}
-
-/* On mouse-over, add a grey background color */
-// .radio-container:hover input ~ .radio-checkmark {
-// background-color: #FFF1D3;
-// }
-
-/* When the radio button is checked, add a blue background */
-.radio-container input:checked ~ .radio-checkmark {
-  border: 1px solid var(--hlx-color-primary);
-}
-.radio-container input:checked ~ .radio-checkmark.bellTheme {
-  border: 6px solid var(--hlx-color-primary);
-}
-
-/* Create the indicator (the dot/circle - hidden when not checked) */
-.radio-checkmark:after {
-  content: '';
-  position: absolute;
-  display: none;
-}
-
-/* Show the indicator (dot/circle) when checked */
-.radio-container input:checked ~ .radio-checkmark:after {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-
-/* Style the indicator (dot/circle) */
-.radio-container .radio-checkmark:after {
-  // top: 3px;
-  // left: 3.5px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: var(--hlx-color-primary);
-}
-.radio-container .radio-checkmark.bellTheme:after {
-  top: 0px;
-  left: 0px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: transparent;
-}
-
-.radio-container.paddingTop {
-  padding-top: 2px;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-///
-
-label[class^='switch'] {
-  position: relative;
-  display: inline-block;
-  width: 45px;
-  height: 25px;
-}
-
-label[class^='switch'] input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: -8px;
-  right: 0;
-  bottom: 0;
-  background-color: #e2e2e2;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-  // box-shadow: 0px 0px 8px -1px $grey;
-  border: 1px solid var(--hlx-border-color);
-}
-
-.slider:before {
-  position: absolute;
-  content: '';
-  height: 19px;
-  width: 19px;
-  left: 3px;
-  bottom: 2px;
-  background-color: white;
-  transition: 0.4s;
-  // box-shadow: 0px 0px 8px -1px $grey;
-}
-
-input:checked + .slider {
-  background-color: var(--hlx-color-primary);
-  // box-shadow: 0px 0px 8px -1px $grey;
-  border: 1px solid var(--hlx-color-primary);
-}
-input:checked + .slider:hover {
-  // background-color: var(--hlx-color-primary);
-  // box-shadow: 0px 0px 8px -1px $grey;
-  border: 1px solid var(--hlx-color-primary);
-  .slider.round:before {
-    background: var(--hlx-color-primary);
-  }
-}
-input:disabled + .slider {
-  background-color: var(--hlx-border-color);
-  // box-shadow: 0px 0px 8px -1px $grey;
-  border: 1px solid var(--hlx-border-color);
-  cursor: default;
-}
-input:disabled:checked + .slider:hover {
-  // background-color: var(--hlx-border-color);
-  // box-shadow: 0px 0px 8px -1px $grey;
-  // border: 1px solid var(--hlx-color-primary);
-  .slider.round:before {
-    background: var(--hlx-border-color);
-    cursor: default;
-  }
-}
-
-input:disabled + .slider:hover {
-  border: 1px solid var(--hlx-border-color);
-}
-// input:focus + .slider {
-// box-shadow: 0 0 1px white;
-// box-shadow: 0px 0px 8px -1px $grey;
-// border: 1px solid var(--hlx-color-primary);
-// }
-input + .slider:hover {
-  // box-shadow: 0 0 1px white;
-  // box-shadow: 0px 0px 8px -1px $grey;
-  border: 1px solid var(--hlx-color-primary);
-  .slider.round:before {
-    background: var(--hlx-color-primary);
-  }
-}
-input:checked + #switchDisabled {
-  border: 1px solid var(--hlx-color-primary);
-  background-color: var(--hlx-color-primary);
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
-  background: white;
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 50px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
-
-.partial-check {
-  color: white !important;
-  font-size: 14px !important;
-  position: absolute !important;
-  font-weight: bold !important;
-  top: 9px !important;
-  left: 6px !important;
-  z-index: 100 !important;
-}
-
-.Cpq {
-  border-bottom: 1px solid var(--hlx-border-color);
-  // border-radius: 5px;
-  background-color: white;
-  position: relative;
-  display: flex;
-  width: 100%;
-  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;
-  }
-  textarea {
-    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;
-  }
-  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;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
-  &:hover {
-    border-bottom: 1px solid var(--hlx-color-primary);
-  }
-}
-
-.input-field.Cpq input:focus + label,
-.input-field.Cpq input:valid + label {
-  font-size: 12px;
-  top: -9px;
-  left: 6px;
-}
-
-.input-field.Cpq textarea:focus + label,
-.input-field.Cpq textarea:valid + label {
-  font-size: 12px;
-  top: -9px;
-  left: 6px;
-}

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

@@ -1,88 +0,0 @@
-.hlx-label {
-  max-width: max-content;
-  // min-height: 22px;
-  // max-width: 50px;
-  display: flex;
-  box-sizing: border-box;
-  justify-content: center;
-  align-items: center;
-  // border-radius: 3px;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
-  // padding: 5px 10px;
-  // font-size: 14px;
-  // font-weight: bold;
-  // gap: 2px;
-
-  border: 1px solid var(--hlx-border-color);
-  cursor: default;
-  border-radius: 6px;
-
-  height: 28px;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-  line-height: 16px;
-  letter-spacing: 0.5%;
-  padding: 6px;
- 
-  &.primary {
-    border: 1px solid var(--hlx-color-primary-dark);
-    background: var(--hlx-color-primary-light);
-    color: var(--hlx-color-primary-dark);
-  }
-  // success
-  &.success {
-    border: 1px solid var(--hlx-color-success-dark);
-    background: var(--hlx-color-success-light);
-    color: var(--hlx-color-success);
-  }
-  // info
-  &.info {
-    border: 1px solid var(--hlx-color-info-dark);
-    background: var(--hlx-color-info-light);
-    color: var(--hlx-color-info);
-  }
-  // error
-  &.error {
-    border: 1px solid var(--hlx-color-error-dark);
-    background: var(--hlx-color-error-light);
-    color: var(--hlx-color-error);
-  }
-  // warning
-  &.warning {
-    border: 1px solid var(--hlx-color-warning-dark);
-    background: var(--hlx-color-warning-light);
-    color: var(--hlx-color-warning);
-  }
-  // link
-  &.link {
-    border: 1px solid var(--hlx-color-link);
-    background: var(--hlx-color-link-light);
-    color: var(--hlx-color-link);
-  }
-  &.disabled {
-    border: 1px solid var(--hlx-color-disable-text);
-    background: var(--hlx-color-disable);
-    color: var(--hlx-color-disable-text);
-  }
- 
-  &.sm {
-    // width: 61px;
-    height: 18px;
-    font-size: 10px;
-    font-weight: 500;
-    line-height: 16px;
-    letter-spacing: 0.005em;
-    border-radius: .4em;
-    padding: 1px 3px;
-  }
-  &.lg {
-    height: 38px;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-    letter-spacing: 0.5%;
-    padding: 11px 10px;
-    border-radius: 6px;
-  }
-}