halleyx-ui-framework 11.7.43 → 11.7.45

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

@@ -0,0 +1 @@
+{"version":3,"sources":["inputitems.scss","inputitems.css"],"names":[],"mappings":"AAAA;EACE,gBAAA;ACCF;;ADQA,kBAAA;AACA;EACE,YAAA;EACA,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,yBAAA;EACA,sBAAA;EAEA,iBAAA;ACLF;ADOE;EACE,mBAAA;EACA,gBAAA;EACA,uBAAA;ACLJ;;ADSA;EACE,+CAAA;EACA,qDAAA;ACNF;;ADSA;EACE,+CAAA;EACA,qDAAA;ACNF;;ADQA;EACE,sDAAA;EACA,oDAAA;ACLF;;ADOA;EACE,0CAAA;ACJF;;ADOE;EACE,0CAAA;ACJJ;;ADSA,wCAAA;AACA;EACE,kBAAA;EACA,UAAA;EACA,SAAA;EACA,QAAA;ACNF;;ADaA;EACE,YAAA;EACA,eAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,QAAA;EACA,iBAAA;ACVF;;ADYA,6BAAA;AACA;EACE,kBAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,iDAAA;EACA,kBAAA;EACA,yCAAA;ACTF;;ADaA;EACE,eAAA;ACVF;;ADYA;EACE,0BAAA;ACTF;;ADWA;EACE,8BAAA;ACRF;;ADWA;EACE,0CAAA;ACRF;;ADUA;EACE,0CAAA;EACA,0CAAA;EACA,eAAA;ACPF;;ADSA;EACE,0CAAA;EACA,0CAAA;EACA,eAAA;ACNF;;ADQA;EACE,yCAAA;ACLF;;ADOA;EACE,yCAAA;EACA,eAAA;ACJF;;ADMA;EACE,yCAAA;EACA,eAAA;ACHF;;ADKA;EACE,yCAAA;EACA,mBAAA;ACFF;;ADIA;EACE,yCAAA;EACA,2CAAA;EACA,mBAAA;ACDF;;ADGA;EACE,yCAAA;ACAF;;ADIA,+CAAA;AAuCA;EACE,SAAA;EACA,QAAA;EACA,UAAA;EACA,WAAA;EAEA,kBAAA;EACA,2BAAA;EACA,wBAAA;ACxCF;;AD0CA;EACE,SAAA;EACA,QAAA;EACA,UAAA;EACA,WAAA;EACA,mBAAA;EACA,kBAAA;EACA,2BAAA;EACA,wBAAA;ACvCF;;AD0CA,wDAAA;AACA;EACE,0CAAA;EACA,0CAAA;ACvCF;;AD0CA,6DAAA;AACA;EACE,WAAA;EACA,kBAAA;EACA,aAAA;ACvCF;;AD0CA,oCAAA;AACA;EACE,cAAA;ACvCF;;AD0CA,kCAAA;AACA;EACE,SAAA;EACA,QAAA;EACA,UAAA;EACA,WAAA;EACA,mBAAA;EACA,kBAAA;EACA,2BAAA;EACA,wBAAA;ACvCF;;AD4CA,kBAAA;AACA;EACE,aAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,YAAA;EACA,yBAAA;EACA,sBAAA;EAEA,iBAAA;ACzCF;AD0CE;EACE,mBAAA;EACA,gBAAA;EACA,uBAAA;ACxCJ;;AD2CA;EACE,eAAA;ACxCF;;AD0CA;EACE,eAAA;ACvCF;ADwCE;EACE,eAAA;ACtCJ;;AD0CE;EACE,0CAAA;ACvCJ;ADyCE;EACE,0CAAA;ACvCJ;ADyCE;EACE,yCAAA;ACvCJ;ADyCE;EACE,yCAAA;ACvCJ;;AD0CA,4CAAA;AACA;EACE,kBAAA;EACA,UAAA;EACA,eAAA;ACvCF;;AD0CA,iCAAA;AACA;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,iDAAA;EACA,kBAAA;EACA,yCAAA;ACvCF;;ADyCA;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,iDAAA;EACA,kBAAA;EACA,yCAAA;ACtCF;;ADwCA;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,iDAAA;EACA,kBAAA;EACA,yCAAA;ACrCF;;ADwCA,+CAAA;AAKA,4DAAA;AACA;EACE,0CAAA;ACzCF;;AD2CA;EACE,0CAAA;ACxCF;;AD2CA,oEAAA;AACA;EACE,WAAA;EACA,kBAAA;EACA,aAAA;ACxCF;;AD2CA,iDAAA;AACA;EACE,cAAA;ACxCF;;AD2CA,qCAAA;AACA;EACE,QAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,oCAAA;ACxCF;;AD0CA;EACE,QAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,uBAAA;ACvCF;;AD0CA;EACE,gBAAA;ACvCF;;AD6CA;EACE,kBAAA;EACA,qBAAA;EACA,WAAA;EACA,YAAA;AC1CF;;AD6CA;EACE,UAAA;EACA,QAAA;EACA,SAAA;AC1CF;;AD6CA;EACE,kBAAA;EACA,eAAA;EACA,MAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;EACA,yBAAA;EAEA,gBAAA;EAEA,yCAAA;AC3CF;;AD8CA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,uBAAA;EACA,gBAAA;AC3CF;;AD+CA;EACE,0CAAA;EAEA,0CAAA;AC7CF;;AD+CA;EAGE,0CAAA;AC9CF;AD+CE;EACE,oCAAA;AC7CJ;;ADgDA;EACE,yCAAA;EAEA,yCAAA;EACA,eAAA;AC9CF;;ADoDE;EACE,mCAAA;EACA,eAAA;ACjDJ;;ADqDA;EACE,yCAAA;AClDF;;ADyDA;EAGE,0CAAA;ACxDF;ADyDE;EACE,oCAAA;ACvDJ;;AD0DA;EACE,0CAAA;EACA,0CAAA;ACvDF;;AD0DA;EAGE,2BAAA;EACA,iBAAA;ACvDF;;AD0DA,oBAAA;AACA;EACE,mBAAA;ACvDF;;AD0DA;EACE,kBAAA;ACvDF;;AD0DA;EACE,uBAAA;EACA,0BAAA;EACA,6BAAA;EACA,4BAAA;EACA,mBAAA;EACA,oBAAA;EACA,uBAAA;ACvDF","file":"inputitems.css"}

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

@@ -10,11 +10,11 @@ input[type='checkbox']:checked {
 
 /* The container */
 .check-container {
-  min-height: 30px;
+  height: 30px;
   display: flex;
   align-items: center;
   position: relative;
-  padding-left: 30px;
+  padding-left: 25px;
   font-size: 14px;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -28,7 +28,7 @@ input[type='checkbox']:checked {
   }
 }
 
-.partially-checked-color {
+.partially-checked-color{
   background: var(--hlx-color-primary) !important;
   border: 1px solid var(--hlx-color-primary) !important;
 }
@@ -67,7 +67,7 @@ label.check-container:hover input:not(:disabled) {
   color: white;
   font-size: 14px;
   position: relative;
-  left: -81px;
+  left: -76px;
   z-index: 100;
   top: 1px;
   font-weight: bold;
@@ -88,7 +88,7 @@ label.check-container:hover input:not(:disabled) {
 .check-container {
   cursor: pointer;
 }
-.check-container.checkContainer-readOnly {
+.check-container.checkContainer-readOnly.checkContainer-disabled {
   cursor: default !important;
 }
 .check-container.checkContainer-disabled {
@@ -103,14 +103,12 @@ label.check-container:hover input:not(:disabled) {
   background-color: var(--hlx-color-primary);
   cursor: default;
 }
-.check-container:hover
-  input:checked
-  ~ .checkmark.check-readOnly.check-disabled {
+.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 {
+.checkmark:after{
   border: 1px solid var(--hlx-border-color);
 }
 .check-container input ~ .checkmark.check-readOnly.check-disabled {
@@ -125,10 +123,6 @@ label.check-container:hover input:not(: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);
@@ -248,7 +242,7 @@ label.check-container:hover input:not(:disabled) {
     text-overflow: ellipsis;
   }
 }
-.radio-container:hover {
+.radio-container:hover{
   cursor: pointer;
 }
 .radio-container.isDisabled:hover {
@@ -293,9 +287,6 @@ label.radio-container:hover {
   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);
@@ -335,15 +326,13 @@ label.radio-container:hover {
 
 /* 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;
+  display: block;
 }
 
 /* Style the indicator (dot/circle) */
 .radio-container .radio-checkmark:after {
-  // top: 3px;
-  // left: 3.5px;
+  top: 3px;
+  left: 3.5px;
   width: 12px;
   height: 12px;
   border-radius: 50%;
@@ -433,13 +422,13 @@ input:disabled:checked + .slider:hover {
   }
 }
 
-input:disabled + .slider:hover {
-  border: 1px solid var(--hlx-border-color);
+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);
+  // 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;
@@ -451,7 +440,7 @@ input + .slider:hover {
 }
 input:checked + #switchDisabled {
   border: 1px solid var(--hlx-color-primary);
-  background-color: var(--hlx-color-primary);
+  background-color: var(--hlx-color-primary)
 }
 
 input:checked + .slider:before {
@@ -479,76 +468,3 @@ input:checked + .slider:before {
   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.css

@@ -0,0 +1,72 @@
+.hlx-label {
+  max-width: -moz-max-content;
+  max-width: max-content;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
+  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;
+}
+.hlx-label.primary {
+  border: 1px solid var(--hlx-color-primary-dark);
+  background: var(--hlx-color-primary-light);
+  color: var(--hlx-color-primary-dark);
+}
+.hlx-label.success {
+  border: 1px solid var(--hlx-color-success-dark);
+  background: var(--hlx-color-success-light);
+  color: var(--hlx-color-success);
+}
+.hlx-label.info {
+  border: 1px solid var(--hlx-color-info-dark);
+  background: var(--hlx-color-info-light);
+  color: var(--hlx-color-info);
+}
+.hlx-label.error {
+  border: 1px solid var(--hlx-color-error-dark);
+  background: var(--hlx-color-error-light);
+  color: var(--hlx-color-error);
+}
+.hlx-label.warning {
+  border: 1px solid var(--hlx-color-warning-dark);
+  background: var(--hlx-color-warning-light);
+  color: var(--hlx-color-warning);
+}
+.hlx-label.link {
+  border: 1px solid var(--hlx-color-link);
+  background: var(--hlx-color-link-light);
+  color: var(--hlx-color-link);
+}
+.hlx-label.disabled {
+  border: 1px solid var(--hlx-color-disable-text);
+  background: var(--hlx-color-disable);
+  color: var(--hlx-color-disable-text);
+}
+.hlx-label.sm {
+  height: 18px;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.005em;
+  border-radius: 0.4em;
+  padding: 1px 3px;
+}
+.hlx-label.lg {
+  height: 38px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.5%;
+  padding: 11px 10px;
+  border-radius: 6px;
+}/*# sourceMappingURL=label.css.map */

package/dist/src/assets/styles/label.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["label.scss","label.css"],"names":[],"mappings":"AAAA;EACE,2BAAA;EAAA,sBAAA;EAGA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EAEA,2CAAA;EAMA,yCAAA;EACA,eAAA;EACA,kBAAA;EAEA,YAAA;EACA,eAAA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;EACA,oBAAA;EACA,YAAA;ACRF;AD0LE;EACE,+CAAA;EACA,0CAAA;EACA,oCAAA;ACxLJ;AD2LE;EACE,+CAAA;EACA,0CAAA;EACA,+BAAA;ACzLJ;AD4LE;EACE,4CAAA;EACA,uCAAA;EACA,4BAAA;AC1LJ;AD6LE;EACE,6CAAA;EACA,wCAAA;EACA,6BAAA;AC3LJ;AD8LE;EACE,+CAAA;EACA,0CAAA;EACA,+BAAA;AC5LJ;AD+LE;EACE,uCAAA;EACA,uCAAA;EACA,4BAAA;AC7LJ;AD+LE;EACE,+CAAA;EACA,oCAAA;EACA,oCAAA;AC7LJ;AD+ME;EAEE,YAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,uBAAA;EACA,oBAAA;EACA,gBAAA;AC9MJ;ADgNE;EACE,YAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;AC9MJ","file":"label.css"}

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

@@ -24,7 +24,183 @@
   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);
@@ -65,7 +241,22 @@
     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;

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

@@ -0,0 +1,125 @@
+#hlx-loaders-006.load-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.9215686275);
+  top: 0;
+  right: 0;
+  z-index: 1000;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  bottom: 0;
+}
+#hlx-loaders-006.load-container.spinner {
+  background: rgba(255, 255, 255, 0.9215686275);
+  top: 0;
+  right: 0;
+  z-index: 1000;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  bottom: 0;
+}
+#hlx-loaders-006.load-container.dotted-jumper {
+  height: 100%;
+}
+#hlx-loaders-006.load-container.horizontal-loop {
+  height: 100%;
+}
+#hlx-loaders-006.load-container .spin-loader {
+  border: 3px solid var(--hlx-border-color-light);
+  border-radius: 50%;
+  border-top: 3px solid var(--hlx-color-primary);
+  border-right: 3px solid var(--hlx-color-primary);
+  border-bottom: 3px solid var(--hlx-color-primary);
+  width: 60px;
+  height: 60px;
+  position: absolute; /* Safari */
+  animation: spin 1s linear infinite;
+  /* Safari */
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+#hlx-loaders-006.load-container .dotted-jump-loader {
+  width: 60px;
+  height: 35px;
+  border: 1px solid #d4d4d4;
+  border-radius: 45px;
+  display: flex;
+  gap: 5px;
+  background: var(--hlx-color-white);
+  padding: 5px;
+  position: relative;
+  flex-direction: row;
+}
+#hlx-loaders-006.load-container .dotted-jump-loader::before {
+  border: 1px solid var(--hlx-border-color-light);
+}
+#hlx-loaders-006.load-container .dotted-jump-loader .ball {
+  width: 7px;
+  height: 7px;
+  margin-top: auto;
+  border-radius: 50%;
+  background-color: var(--hlx-border-color);
+  animation: bounce 0.5s alternate infinite;
+}
+#hlx-loaders-006.load-container .dotted-jump-loader .ball:first-child {
+  margin-left: auto;
+}
+#hlx-loaders-006.load-container .dotted-jump-loader .ball:nth-child(2) {
+  animation-delay: 0.16s;
+  background-color: var(--hlx-color-primary);
+}
+#hlx-loaders-006.load-container .dotted-jump-loader .ball:nth-child(3) {
+  animation-delay: 0.32s;
+  margin-right: auto;
+}
+@keyframes bounce {
+  from {
+    tranform: scaleX(1.25);
+  }
+  to {
+    transform: translateY(-12px) scaleX(1);
+  }
+}
+#hlx-loaders-006.load-container .loading-horz-bar {
+  width: 80%;
+  height: 2px;
+  background-color: #d6cec2;
+  border-radius: 10px;
+  margin-top: 25px;
+  overflow: hidden;
+  position: relative;
+}
+#hlx-loaders-006.load-container .loading-horz-bar::after {
+  content: "";
+  width: 30%;
+  left: 0;
+  height: 2px;
+  position: absolute;
+  background-color: var(--hlx-color-primary);
+  transform: translateX(-20px);
+  animation: loop 3s ease infinite;
+}
+@keyframes loop {
+  0%, 100% {
+    transform: translateX(-28px);
+  }
+  50% {
+    transform: translateX(300%);
+  }
+}/*# sourceMappingURL=loaders.css.map */

package/dist/src/assets/styles/loaders.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["loaders.scss","loaders.css"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,eAAA;EACA,uBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,eAAA;EACA,uBAAA;EACA,6CAAA;EACA,MAAA;EACA,QAAA;EACA,aAAA;EACA,uBAAA;EACA,OAAA;EACA,kBAAA;EACA,SAAA;ACCF;ADAE;EACE,6CAAA;EACA,MAAA;EACA,QAAA;EACA,aAAA;EACA,uBAAA;EACA,OAAA;EACA,kBAAA;EACA,SAAA;ACEJ;ADAE;EACE,YAAA;ACEJ;ADAE;EACE,YAAA;ACEJ;ADCE;EACE,+CAAA;EACA,kBAAA;EACA,8CAAA;EACA,gDAAA;EACA,iDAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA,EACA,WAAA;EACA,kCAAA;EAEA,WAAA;ACAJ;ADUI;EACE;IACE,uBAAA;ECAN;EDEI;IACE,yBAAA;ECAN;AACF;ADIE;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,mBAAA;EACA,aAAA;EACA,QAAA;EACA,kCAAA;EACA,YAAA;EACA,kBAAA;EACA,mBAAA;ACFJ;ADGI;EACE,+CAAA;ACDN;ADKI;EACE,UAAA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;EACA,yCAAA;EAEA,yCAAA;ACHN;ADMI;EACE,iBAAA;ACJN;ADMI;EACE,sBAAA;EACA,0CAAA;ACJN;ADOI;EACE,sBAAA;EACA,kBAAA;ACLN;ADQI;EACE;IACE,sBAAA;ECNN;EDQI;IACE,sCAAA;ECNN;AACF;ADUE;EACE,UAAA;EACA,WAAA;EACA,yBAAA;EACA,mBAAA;EACA,gBAAA;EACA,gBAAA;EACA,kBAAA;ACRJ;ADSI;EACE,WAAA;EACA,UAAA;EACA,OAAA;EACA,WAAA;EACA,kBAAA;EACA,0CAAA;EACA,4BAAA;EAEA,gCAAA;ACPN;ADSI;EACE;IAEE,4BAAA;ECRN;EDUI;IACE,2BAAA;ECRN;AACF","file":"loaders.css"}