halleyx-ui-framework 11.7.43 → 11.7.45

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

@@ -0,0 +1,492 @@
+.icon-horizontal-dots {
+  color: var(--hlx-text-color-primary) !important;
+  font-size: var(--hlx-font-content-size-sm);
+}
+
+.timeline-title-header {
+  font-family: var(--hlx-font-type-content);
+  font-size: 14px;
+  color: var(--hlx-text-color-primary);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+
+.timeline-sub-header {
+  font-family: var(--hlx-font-type-content);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 12px;
+}
+
+.dot {
+  height: 7px;
+  width: 7px;
+  background: var(--hlx-color-primary-light);
+  margin-right: 7px;
+  border-radius: 100%;
+}
+
+.content-holder {
+  display: flex;
+  flex-direction: row;
+}
+
+.circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 38px;
+  width: 38px;
+  border-radius: 100%;
+  border: 1px solid var(--hlx-border-color);
+}
+.circle i {
+  color: var(--hlx-border-color);
+  font-size: var(--hlx-font-content-size-sm);
+}
+
+.active-circle {
+  height: 38px;
+  width: 38px;
+  border-radius: 100%;
+  border: 1px solid var(--hlx-color-primary-light) !important;
+  background: var(--hlx-color-primary-light);
+  color: var(--hlx-text-color-primary) !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.active-circle i {
+  color: var(--hlx-text-color-primary) !important;
+  font-size: var(--hlx-font-content-size-sm);
+  font-weight: bold;
+}
+
+.timeline-content {
+  font-family: var(--hlx-font-type-content);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: var(--hlx-font-content-size-sm);
+}
+.timeline-content-title {
+  margin-bottom: 25px;
+  height: 45px;
+}
+
+.vertical-timeline-container {
+  font-family: var(--hlx-font-type-content);
+  display: flex;
+  flex-direction: column;
+}
+.vertical-timeline-container .first-element-container,
+.vertical-timeline-container .element-container {
+  width: 20px;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.vertical-timeline-container .first-element-container .circle,
+.vertical-timeline-container .element-container .circle {
+  margin-right: 5px;
+}
+.vertical-timeline-container .first-element-container .active-circle,
+.vertical-timeline-container .element-container .active-circle {
+  margin-right: 5px;
+  color: var(--hlx-border-color-dark);
+}
+.vertical-timeline-container .first-element-container .connector,
+.vertical-timeline-container .element-container .connector {
+  border-left: 1px dashed var(--hlx-border-color);
+  height: 50px;
+  width: 2px;
+}
+.vertical-timeline-container .first-element-container .active-connector,
+.vertical-timeline-container .element-container .active-connector {
+  border-left: 1px solid var(--hlx-color-primary);
+  height: 50px;
+  width: 2px;
+}
+.vertical-timeline-container .first-element-container .connector,
+.vertical-timeline-container .element-container .connector {
+  border-left: 1px dashed var(--hlx-border-color);
+  height: 50px;
+  width: 2px;
+  margin: 0 9px;
+}
+.vertical-timeline-container .first-element-container .active-connector,
+.vertical-timeline-container .element-container .active-connector {
+  border-left: 1px solid var(--hlx-color-primary);
+  height: 50px;
+  width: 2px;
+  margin: 0 9px;
+}
+
+.horizontal-timeline-container {
+  font-family: var(--hlx-font-type-content);
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+.horizontal-timeline-container .circle {
+  width: 38px !important;
+}
+.horizontal-timeline-container .active-circle {
+  width: 38px !important;
+  color: var(--hlx-color-primary);
+  border: 1px solid var(--hlx-color-primary) !important;
+}
+.horizontal-timeline-container .element-container {
+  display: flex;
+  flex-direction: row;
+  width: 50%;
+}
+.horizontal-timeline-container .element-container .connector {
+  width: 100%;
+  border-bottom: 1px dashed var(--hlx-border-color);
+  height: 2px;
+  margin-top: 9px;
+}
+.horizontal-timeline-container .element-container .active-connector {
+  width: 100%;
+  border-bottom: 1px solid var(--hlx-color-primary);
+  height: 2px;
+  margin-top: 9px;
+}
+
+.timeline-content-horizontal {
+  font-family: var(--hlx-font-type-content);
+  display: flex;
+  flex-direction: row;
+  margin-top: 5px;
+  font-size: var(--hlx-font-content-size-sm);
+}
+.timeline-content-horizontal-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.element-container-horizontal {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+}
+
+.btn {
+  margin: 30px 30px 0 auto;
+}
+
+.icon-info-bg {
+  background: var(--hlx-border-color);
+  font-size: var(--hlx-icon-size-sm);
+  margin-left: 10px;
+}
+
+.number-font-light {
+  color: white;
+  font-size: var(--hlx-font-content-size-xs);
+  font-weight: bold;
+}
+
+.number-font-dark {
+  color: var(--hlx-color-primary);
+  font-size: var(--hlx-font-content-size-xs);
+  font-weight: bold;
+}
+
+.t-parent {
+  display: flex;
+  width: 100%;
+  margin-left: 10%;
+}
+.t-parent .t-sub-parent {
+  display: flex;
+  width: 100%;
+}
+.t-parent .t-sub-parent .t-cont {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: 16px;
+  margin-right: 16px;
+  justify-content: center;
+  cursor: pointer;
+}
+.t-parent .t-sub-parent .t-cont .t-circle {
+  margin-bottom: 0px;
+}
+.t-parent .t-sub-parent .t-cont .t-title {
+  font-size: 14px;
+  text-align: center;
+  width: 181px;
+  margin-left: -40px;
+  margin-top: -20px;
+}
+.t-parent .t-sub-parent .t-cont .t-sub-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--hlx-border-color-dark);
+  text-align: center;
+  margin-left: -40px;
+}
+.t-parent .t-sub-parent .t-cont hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px dashed var(--hlx-border-color);
+  margin: 1em 0;
+  padding: 0;
+  width: 50px;
+}
+.t-parent .t-sub-parent .t-line {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+}
+.t-parent .t-sub-parent .t-line hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px dashed var(--hlx-border-color);
+  margin: 1em 0;
+  padding: 0;
+  width: 100%;
+}
+.t-parent .t-sub-parent-new {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+.t-parent .t-sub-parent-new .t-cont-new {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+.t-parent .t-sub-parent-new .t-cont-new .t-circle-new {
+  margin-bottom: 8px;
+}
+.t-parent .t-sub-parent-new .t-cont-new .t-title-new {
+  font-size: 14px;
+  text-align: center;
+  width: 181px;
+  margin-left: -40px;
+  margin-top: 20px;
+}
+.t-parent .t-sub-parent-new .t-cont-new .t-sub-title-new {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--hlx-border-color-dark);
+  text-align: center;
+  margin-left: -40px;
+}
+.t-parent .t-sub-parent-new .t-cont-new hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px dashed var(--hlx-border-color);
+  margin: 1em 0;
+  padding: 0;
+  width: 50px;
+}
+.t-parent .t-sub-parent-new .t-line-new {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+}
+.t-parent .t-sub-parent-new .t-line-new hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 4px solid #fff;
+  margin: 1em 0;
+  padding: 0;
+  width: 100%;
+}
+.t-parent .t-sub-parent-new .t-line-neww {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+}
+.t-parent .t-sub-parent-new .t-line-neww hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 2px solid var(--hlx-color-primary-light);
+  margin: 1em 0;
+  padding: 0;
+  width: 100%;
+}
+
+.t-parent-v {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.t-parent-v .t-sub-parent-v {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.t-parent-v .t-sub-parent-v .t-cont-v {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+}
+.t-parent-v .t-sub-parent-v .t-cont-v .t-circle-v {
+  margin-bottom: 0px;
+}
+.t-parent-v .t-sub-parent-v .t-cont-v .t-content-v {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 8px;
+  margin-top: 20px;
+}
+.t-parent-v .t-sub-parent-v .t-cont-v .t-content-v .t-title-v {
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: 0.5%;
+  text-align: center;
+  text-align: center;
+}
+.t-parent-v .t-sub-parent-v .t-cont-v .t-content-v .t-sub-title-v {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--hlx-border-color-dark);
+  line-height: 20px;
+  letter-spacing: 0.5%;
+  text-align: center;
+}
+.t-parent-v .t-sub-parent-v .t-cont-v hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px dashed var(--hlx-border-color);
+  margin: 1em 0;
+  padding: 0;
+  width: 50px;
+}
+.t-parent-v .t-sub-parent-v .t-line-v {
+  width: 38px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+}
+.t-parent-v .t-sub-parent-v .t-line-v hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px dashed var(--hlx-border-color);
+  margin: 1em 0;
+  padding: 0;
+  width: 100%;
+  transform: rotate(90deg);
+}
+.t-parent-v .icon-info-ot {
+  font-size: var(--hlx-icon-size-xs);
+  color: var(--hlx-border-color-dark);
+  margin-left: 8px;
+}
+
+.pri-bg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 38px;
+  width: 38px;
+  border-radius: 100%;
+  border: 1px solid var(--hlx-color-primary) !important;
+  background-color: var(--hlx-color-primary);
+  color: #fff;
+}
+.pri-bg i {
+  color: #fff;
+  font-size: var(--hlx-font-content-size-sm);
+}
+
+.pri-bg-new {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 38px;
+  width: 38px;
+  border-radius: 100%;
+  background-color: #fff;
+  color: #fff;
+}
+.pri-bg-new i {
+  color: #fff;
+  font-size: var(--hlx-font-content-size-sm);
+}
+
+#circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  height: 24px;
+  width: 24px;
+  border-radius: 100%;
+  border: 1px solid var(--hlx-border-color);
+}
+#circle i {
+  color: var(--hlx-border-color);
+  font-size: var(--hlx-font-content-size-sm);
+}
+
+#circle-new {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  height: 24px;
+  width: 24px;
+  border-radius: 100%;
+  background: #fff;
+}
+#circle-new i {
+  color: var(--hlx-color-primary);
+  font-size: var(--hlx-font-content-size-sm);
+}
+
+#circle-neww {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  height: 14px;
+  width: 14px;
+  border-radius: 100%;
+  background: var(--hlx-color-primary-light);
+}
+#circle-neww i {
+  color: var(--hlx-border-color);
+  font-size: var(--hlx-font-content-size-sm);
+}
+
+.inner-circle-new {
+  width: 10px;
+  height: 10px;
+  background-color: var(--hlx-color-primary);
+  border-radius: 100%;
+}
+
+@media only screen and (max-width: 600px) {
+  .t-title {
+    width: 100px !important;
+  }
+  .t-title-new {
+    width: 50px;
+  }
+}/*# sourceMappingURL=timeline.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["timeline.scss","timeline.css"],"names":[],"mappings":"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","file":"timeline.css"}

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

@@ -518,93 +518,3 @@
 
   }
 }
-
-
-.timeline-parent-container{
-  // height:100%;
-  width:100%;
-  padding-right: 5px;
-  // overflow-y: scroll;
-  .timeline-single-container{
-    // height:100%;
-    width:100%;
-    display:flex;
-    &-icon-side{
-      width:70px;
-      display: flex;
-      flex-direction: column;
-      &-icon-container{
-        height:45px;
-        width:45px;
-        // border-radius: 45px;
-        // display: flex;
-        // justify-content: center;
-        // align-items: center;
-        // background-color: #D9D9D9;
-        font-size: 30px;
-        i{
-          height: 40px;
-          width:40px;
-          border-radius: 40px;
-          background-color: #D9D9D9;
-          display: flex;
-          justify-content: center;
-          align-content: center;
-          align-items: center;
-        }
-      }
-      &-vertical-line-container{
-        min-height:60px;
-        height:calc(100% - 30px);
-        // background-color: rgb(164, 255, 255);
-        &-vertical-line{
-        display: flex;
-        justify-content: center;
-        height: 100%;
-        margin-left: 20px;
-        border: 0;
-        border-left: 1.5px dashed var(--hlx-border-color);
-        padding: 0;
-        // width: 1px;
-        }
-      }
-    }
-    &-content-side{
-      width:calc(100% - 70px);
-      display: flex;
-      flex-direction: column;
-      &-first-slot{
-        margin-bottom: 10px;
-      }
-      &-second-slot{
-        display: flex;
-        flex-direction: column;
-        &-with-accordion{
-          display: flex;
-          align-items: center;
-          .right{
-             cursor:pointer;
-             margin-right: 5px;
-          }
-        }
-        &-with-accordion-content{
-          display:none;
-          padding-left:23px;
-        }
-      }
-    }
-  }
-}
-
-
-.link-timeline{
-  color: #2879b7;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top:10px;
-  &:hover{
-    text-decoration: underline;
-    cursor: pointer;
-  }
-}