halleyx-ui-framework 5.4.0 → 5.4.2

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

@@ -1,423 +0,0 @@
-input[type='checkbox']:checked {
-  content: '\e964';
-}
-// .list-group-item {
-//   cursor: move;
-// }
-// .list-group-item i {
-//   cursor: pointer;
-// }
-
-/* The container */
-.check-container {
-  height: 30px;
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding-left: 25px;
-  cursor: pointer;
-  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;
-  cursor: pointer;
-  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: -76px;
-  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);
-}
-
-/* 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;
-  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: block;
-}
-
-/* Style the indicator (dot/circle) */
-.radio-container .radio-checkmark:after {
-  top: 3px;
-  left: 3px;
-  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;
-}

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

@@ -1,279 +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;
-  // overflow: hidden;
-  // text-overflow: ellipsis;
-  // width: 57px;
-
-  //v1.2
-  //primary
-  // &.primary {
-  //   background: var(--hlx-color-primary);
-  //   color: var(--hlx-text-color-secondary);
-  //   border:none !important;
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-primary-light);
-  //     color: var(--hlx-color-primary-dark);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-primary);
-  //     color: var(--hlx-color-primary-dark);
-  //   }
-  // }
-  //   //success
-  // &.success {
-  //   background: var(--hlx-color-success);
-  //   color: var(--hlx-text-color-secondary);
-  //   border:none !important;
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-success-light);
-  //     color: var(--hlx-color-success-dark);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-success);
-  //     color: var(--hlx-color-success-dark);
-  //   }
-  // }
-  //   //info
-  // &.info {
-  //   background: var(--hlx-color-info);
-  //   color: var(--hlx-text-color-secondary);
-  //   border:none !important;
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-info-light);
-  //     color: var(--hlx-color-info-dark);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-info);
-  //     color: var(--hlx-color-info-dark);
-  //   }
-  // }
-  //   //warning
-  // &.warning {
-  //   background: var(--hlx-color-warning);
-  //   color: var(--hlx-text-color-secondary);
-  //   border:none !important;
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-warning-light);
-  //     color: var(--hlx-color-warning-dark);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-warning);
-  //     color: var(--hlx-color-warning-dark);
-  //   }
-  // }
-  //   //error
-  // &.error {
-  //   background: var(--hlx-color-error);
-  //   color: var(--hlx-text-color-secondary);
-  //   border:none !important;
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-error-light);
-  //     color: var(--hlx-color-error-dark);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-error);
-  //     color: var(--hlx-color-error-dark);
-  //   }
-  // }
-  //   //link
-  // &.link {
-  //   background: var(--hlx-color-link);
-  //   color: var(--hlx-text-color-secondary);
-  //   border:none !important;
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-link-light);
-  //     color: var(--hlx-color-link-dark);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-link);
-  //     color: var(--hlx-color-link-dark);
-  //   }
-  // }
-  // &.pill,&.-pill{
-  //   border-radius: 999px;
-  // }
-
-  //v1.1
-  // success
-  // &.success {
-  //   border: 1px solid var(--hlx-color-success-dark);
-  //   background: var(--hlx-color-success);
-  //   color: var(--hlx-text-color-secondary);
-  //   &-lite {
-  //     // border: 1px solid var(--hlx-color-success);
-  //     background: var(--hlx-color-success-light);
-  //     color: var(--hlx-color-success);
-  //   }
-  //   &-lite {
-  //     border: 1px solid var(--hlx-color-success);
-  //     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);
-  //   color: var(--hlx-text-color-secondary);
-  //   &-lite {
-  //     border: 1px solid var(--hlx-color-info);
-  //     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);
-  //   color: var(--hlx-text-color-secondary);
-  //   &-lite {
-  //     border: 1px solid var(--hlx-color-error);
-  //     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);
-  //   color: var(--hlx-text-color-secondary);
-  //   &-lite {
-  //     border: 1px solid var(--hlx-color-warning);
-  //     background: var(--hlx-color-warning-light);
-  //     color: var(--hlx-color-warning);
-  //   }
-  // }
-  // // link
-  // &.link {
-  //   border: 1px solid var(--hlx-color-link-dark);
-  //   background: var(--hlx-color-link);
-  //   color: var(--hlx-text-color-secondary);
-  //   &-lite {
-  //     border: 1px solid var(--hlx-color-link);
-  //     background: var(--hlx-color-link-light);
-  //     color: var(--hlx-color-link);
-  //   }
-  // }
-  // &.disabled {
-  //   border:none !important;
-
-  //   background: var(--hlx-color-disable);
-  //   color: var(--hlx-color-disable-text);
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-disable);
-  //     color: var(--hlx-color-disable-text);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-disable-text);
-  //     color: var(--hlx-color-disable-text);
-  //   }
-  // }
-  //v1.3
-  // primary
-  &.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);
-  }
-  //disabled v1.0
-  // &.disabled {
-  //   border:none !important;
-
-  //   background: var(--hlx-color-disable);
-  //   color: var(--hlx-color-disable-text);
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-disable);
-  //     color: var(--hlx-color-disable-text);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-disable-text);
-  //     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;
-  }
-}