halleyx-ui-framework 11.7.43 → 11.7.44

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

@@ -80,7 +80,6 @@ input[type='datetime-local']:before {
   position: relative;
   display: flex;
   width: 100%;
-  min-height: 38px;
   .input-icon {
     min-width: 36px;
     height: 36px;
@@ -88,7 +87,7 @@ input[type='datetime-local']:before {
     justify-content: center;
     align-items: center;
     i {
-      font-size: var(--hlx-icon-size-sm) !important;
+      font-size: var(--hlx-icon-size-md) !important;
       color: #565553;
     }
   }
@@ -101,56 +100,15 @@ input[type='datetime-local']:before {
 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;
+
+  .readOnly:hover {
+    border: 1px solid var(--hlx-border-color) !important;
     input {
       cursor: default;
     }
@@ -160,18 +118,18 @@ input:checked ~ .isCheckMarkError {
   }
 }
 .input-field.small.readOnly {
-  border: 1px solid var(--hlx-border-color) !important;
-  textarea {
-    cursor: default !important;
+   border: 1px solid var(--hlx-border-color) !important;
+   textarea {
+     cursor: default !important;
   }
 
-  input {
-    cursor: default !important;
-  }
-  label {
-    color: #a6a6a6 !important;
-    cursor: default !important;
-  }
+    input {
+      cursor: default !important;
+    }
+    label {
+      color: #a6a6a6 !important;
+      cursor: default !important;
+    }
 }
 .input-field.small input {
   display: flex;
@@ -195,7 +153,7 @@ input:checked ~ .isCheckMarkError {
   font-family: 'OpenSans';
   display: block;
   width: 100%;
-  min-height: 66px !important;
+  min-height: 66px;
   background: transparent;
   border-radius: 0px;
   border: none;
@@ -213,22 +171,22 @@ input:checked ~ .isCheckMarkError {
   background-color: white;
 }
 .input-field.small.disabled.readOnly {
-  input {
+  input{
     color: #a6a6a6 !important;
   }
-  textarea {
+  textarea{
     color: #a6a6a6 !important;
     cursor: not-allowed !important;
   }
-  .readonly-overlay {
+  .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;
+.disabled:hover {
+  border: 1px solid var(--hlx-border-color) !important;
   input {
     cursor: not-allowed;
   }
@@ -262,14 +220,14 @@ input:checked ~ .isCheckMarkError {
 .input-field.small input:focus + label,
 .input-field.small input:valid + label {
   font-size: 12px;
-  top: -9px !important;
-  left: 6px !important;
+  top: -9px;
+  left: 6px;
 }
 .input-field.small textarea:focus + label,
 .input-field.small textarea:valid + label {
   font-size: 12px;
-  top: -9px !important;
-  left: 6px !important;
+  top: -9px;
+  left: 6px;
 }
 
 .input-field.small input:focus + label {
@@ -281,7 +239,7 @@ input:checked ~ .isCheckMarkError {
 
 .error-message {
   width: 100%;
-  height: 24px;
+  height: 20px;
   color: #fe4141;
   font-size: 12px;
   text-align: left;
@@ -400,25 +358,6 @@ input:checked ~ .isCheckMarkError {
     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;
@@ -435,122 +374,3 @@ input:checked ~ .isCheckMarkError {
   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;
-  }
-}

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

@@ -0,0 +1,409 @@
+input[type=checkbox]:checked {
+  content: "\e964";
+}
+
+/* The container */
+.check-container {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding-left: 25px;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.check-container .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);
+}
+
+/* Hide the browser's default checkbox */
+.check-container input {
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
+}
+
+.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);
+}
+
+.check-container {
+  cursor: pointer;
+}
+
+.check-container.checkContainer-readOnly.checkContainer-disabled {
+  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 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 input:disabled:checked ~ .checkmark:after {
+  left: 5px;
+  top: 2px;
+  width: 3px;
+  height: 7px;
+  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;
+  user-select: none;
+}
+.radio-container .ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.radio-container:hover {
+  cursor: pointer;
+}
+
+.radio-container.isDisabled:hover {
+  cursor: default;
+}
+.radio-container.isDisabled:hover input {
+  cursor: default;
+}
+
+label.radio-container:hover .radio-checkmark {
+  border: 1px solid var(--hlx-color-primary);
+}
+label.radio-container:hover .radio-checkmark.bellTheme {
+  border: 1px solid var(--hlx-color-primary);
+}
+label.radio-container:hover .radio-checkmark.disabled {
+  border: 1px solid var(--hlx-border-color);
+}
+label.radio-container:hover .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 */
+/* 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: 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;
+  transition: 0.4s;
+  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;
+}
+
+input:checked + .slider {
+  background-color: var(--hlx-color-primary);
+  border: 1px solid var(--hlx-color-primary);
+}
+
+input:checked + .slider:hover {
+  border: 1px solid var(--hlx-color-primary);
+}
+input:checked + .slider:hover .slider.round:before {
+  background: var(--hlx-color-primary);
+}
+
+input:disabled + .slider {
+  background-color: var(--hlx-border-color);
+  border: 1px solid var(--hlx-border-color);
+  cursor: default;
+}
+
+input:disabled:checked + .slider:hover .slider.round:before {
+  background: var(--hlx-border-color);
+  cursor: default;
+}
+
+input:disabled + .slider:hover {
+  border: 1px solid var(--hlx-border-color);
+}
+
+input + .slider:hover {
+  border: 1px solid var(--hlx-color-primary);
+}
+input + .slider:hover .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 {
+  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;
+}/*# sourceMappingURL=inputitems.css.map */