trepur_components 1.0.60 → 2.1.0

package/dist/src/lib/components/Tubestops/style.module.css

@@ -1,950 +1,76 @@
-.classList {
-  
-    width: 100%;
-  
-    list-style-type: none;
+.wrapper {
+  display: flex;
+  padding-top: 1rem;
+  padding-bottom: 1rem
 }
 
-.circle {
-  
-    z-index: 10;
-  
-    height: 1rem;
-  
-    width: 1rem;
-  
-    border-radius: 9999px;
-  
-    background-color: var(--color-black);
-}
-
-.liClassList {
-  
-    position: relative;
-  
-    margin-bottom: 0px;
-  
-    display: flex;
-  
-    flex: 1 1 auto;
-  
-    flex-direction: row;
-  
-    line-height: 1.25;
-}
-
-.tubestop.liClassList.none-reverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    left: -50%;
-    bottom: 7px;
-}
-
-.tubestop.liClassList.reverse .status-flow-item:not(:first-child):after {
-    left: -50%;
-    bottom: 7px;
-    position: absolute;
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
-}
-
-.ulClassList {
-  
-    position: relative;
-  
-    display: flex;
-  
-    list-style-type: none;
-  
-    padding-left: 0px;
-}
-
-.ulClassList.flex-col.none-reverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-  
-    display: block;
-    
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: -100%;
-}
-
-.ulClassList.flex-col.none-reverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-  
-    display: block;
-   
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: 40%;
-}
-
-.ulClassList.flex-col.reverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: -100%;
-}
-
-.ulClassList.flex-col.reverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: 40%;
-}
-
-.ulClassList.flex-row.none-reverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    left: -50%;
-    bottom: 7px;
-}
-
-.ulClassList.flex-row-reverse.none-reverse
-    .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
-}
-
-.ulClassList.flex-row.reverse .status-flow-item:not(:first-child):after {
-    left: -50%;
-    bottom: 7px;
-    position: absolute;
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
-}
-
-.textCenter {
-  
-    text-align: center;
-}
-
-.ulHorizonatalReverse {
-  
-    flex-direction: row;
-  
-    justify-content: space-between;
-}
-
-.tubestop.flex-col.ulHorizonatalReverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: -100%;
-}
-
-.tubestop.flex-col.ulHorizonatalReverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: 40%;
-}
-
-.tubestop.ulHorizonatalReverse.none-reverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    left: -50%;
-    bottom: 7px;
-}
-
-.tubestop.ulHorizonatalReverse.reverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-}
-
-.tubestop.flex-row.ulHorizonatalReverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-}
-
-.tubestop.ulHorizonatalReverse.reverse .status-flow-item:not(:first-child):after {
-  
-    display: block;
-}
-
-.tubestop.flex-row.ulHorizonatalReverse .status-flow-item:not(:first-child):after {
-  
-    display: block;
+.item {
+  width: 100%;
+  min-width: 120px
 }
 
-.tubestop.ulHorizonatalReverse.reverse .status-flow-item:not(:first-child):after {
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    left: -50%;
-    bottom: 7px;
-  }
-
-.tubestop.flex-row.ulHorizonatalReverse .status-flow-item:not(:first-child):after {
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    left: -50%;
-    bottom: 7px;
-  }
-
-.tubestop.ulHorizonatalReverse.reverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-}
-
-.tubestop.flex-row.ulHorizonatalReverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-}
-
-.tubestop.ulHorizonatalReverse.reverse .status-flow-item:not(:first-child):after {
-  
-    display: block;
-}
-
-.tubestop.flex-row.ulHorizonatalReverse .status-flow-item:not(:first-child):after {
-  
-    display: block;
-}
-
-.tubestop.ulHorizonatalReverse.reverse .status-flow-item:not(:first-child):after {
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
-  }
-
-.tubestop.flex-row.ulHorizonatalReverse .status-flow-item:not(:first-child):after {
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
-  }
-
-.ulHorizonatalNotReverse {
-  
-    flex-direction: row;
-  
-    justify-content: space-between;
-}
-
-.tubestop.flex-col.ulHorizonatalNotReverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-  
-    display: block;
-    
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: -100%;
-}
-
-.tubestop.flex-col.ulHorizonatalNotReverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-  
-    display: block;
-   
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: 40%;
-}
-
-.tubestop.ulHorizonatalNotReverse.none-reverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-}
-
-.tubestop.flex-row.ulHorizonatalNotReverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-}
-
-.tubestop.ulHorizonatalNotReverse.none-reverse .status-flow-item:not(:first-child):after {
-  
-    display: block;
-}
-
-.tubestop.flex-row.ulHorizonatalNotReverse .status-flow-item:not(:first-child):after {
-  
-    display: block;
-}
-
-.tubestop.ulHorizonatalNotReverse.none-reverse .status-flow-item:not(:first-child):after {
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    left: -50%;
-    bottom: 7px;
-  }
-
-.tubestop.flex-row.ulHorizonatalNotReverse .status-flow-item:not(:first-child):after {
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    left: -50%;
-    bottom: 7px;
-  }
-
-.tubestop.flex-row-reverse.ulHorizonatalNotReverse
-    .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
-}
-
-.tubestop.ulHorizonatalNotReverse.reverse .status-flow-item:not(:first-child):after {
-    left: -50%;
-    bottom: 7px;
-    position: absolute;
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
-}
-
-.ulNotHorizonatalNotReverse {
-  
-    flex-direction: column;
-}
-
-.tubestop.ulNotHorizonatalNotReverse.none-reverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-}
-
-.tubestop.flex-col.ulNotHorizonatalNotReverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-}
-
-.tubestop.ulNotHorizonatalNotReverse.none-reverse .status-flow-item:not(:first-child):before {
-  
-    display: block;
-}
-
-.tubestop.flex-col.ulNotHorizonatalNotReverse .status-flow-item:not(:first-child):before {
-  
-    display: block;
-}
-
-.tubestop.ulNotHorizonatalNotReverse.none-reverse .status-flow-item:not(:first-child):before {
-    
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: -100%;
-  }
-
-.tubestop.flex-col.ulNotHorizonatalNotReverse .status-flow-item:not(:first-child):before {
-    
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: -100%;
-  }
-
-.tubestop.ulNotHorizonatalNotReverse.none-reverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-}
-
-.tubestop.flex-col.ulNotHorizonatalNotReverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-}
-
-.tubestop.ulNotHorizonatalNotReverse.none-reverse .status-flow-item:not(:last-child):after {
-  
-    display: block;
-}
-
-.tubestop.flex-col.ulNotHorizonatalNotReverse .status-flow-item:not(:last-child):after {
-  
-    display: block;
-}
-
-.tubestop.ulNotHorizonatalNotReverse.none-reverse .status-flow-item:not(:last-child):after {
-   
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: 40%;
-  }
-
-.tubestop.flex-col.ulNotHorizonatalNotReverse .status-flow-item:not(:last-child):after {
-   
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: 40%;
-  }
-
-.tubestop.ulNotHorizonatalNotReverse.reverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: -100%;
-}
-
-.tubestop.ulNotHorizonatalNotReverse.reverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: 40%;
-}
-
-.tubestop.flex-row.ulNotHorizonatalNotReverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    left: -50%;
-    bottom: 7px;
-}
-
-.tubestop.flex-row-reverse.ulNotHorizonatalNotReverse
-    .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
-}
-
-.ulNotHorizonatalReverse {
-  
-    flex-direction: column;
-}
-
-.tubestop.ulNotHorizonatalReverse.none-reverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-  
-    display: block;
-    
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: -100%;
-}
-
-.tubestop.ulNotHorizonatalReverse.none-reverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-  
-    display: block;
-   
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: 40%;
-}
-
-.tubestop.ulNotHorizonatalReverse.reverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-}
-
-.tubestop.flex-col.ulNotHorizonatalReverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-}
-
-.tubestop.ulNotHorizonatalReverse.reverse .status-flow-item:not(:first-child):before {
-  
-    display: block;
-}
-
-.tubestop.flex-col.ulNotHorizonatalReverse .status-flow-item:not(:first-child):before {
-  
-    display: block;
-}
-
-.tubestop.ulNotHorizonatalReverse.reverse .status-flow-item:not(:first-child):before {
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: -100%;
-  }
-
-.tubestop.flex-col.ulNotHorizonatalReverse .status-flow-item:not(:first-child):before {
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: -100%;
-  }
-
-.tubestop.ulNotHorizonatalReverse.reverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-}
-
-.tubestop.flex-col.ulNotHorizonatalReverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-}
-
-.tubestop.ulNotHorizonatalReverse.reverse .status-flow-item:not(:last-child):after {
-  
-    display: block;
-}
-
-.tubestop.flex-col.ulNotHorizonatalReverse .status-flow-item:not(:last-child):after {
-  
-    display: block;
-}
-
-.tubestop.ulNotHorizonatalReverse.reverse .status-flow-item:not(:last-child):after {
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: 40%;
-  }
-
-.tubestop.flex-col.ulNotHorizonatalReverse .status-flow-item:not(:last-child):after {
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: 40%;
-  }
-
-.tubestop.flex-row.ulNotHorizonatalReverse .status-flow-item:not(:first-child):after {
-    left: -50%;
-    bottom: 7px;
-    position: absolute;
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
-}
-
-.liHorizonatalReverse {
-  
-    flex-direction: column;
-  
-    align-items: center;
-}
-
-.tubestop.liHorizonatalReverse.none-reverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-  
-    display: block;
-    
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: -100%;
-}
-
-.tubestop.liHorizonatalReverse.none-reverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-  
-    display: block;
-   
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: 40%;
-}
-
-.tubestop.liHorizonatalReverse.reverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: -100%;
-}
-
-.tubestop.liHorizonatalReverse.reverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: 40%;
-}
-
-.liHorizonatalNotReverse {
-  
-    flex-direction: column-reverse;
-  
-    align-items: center;
-  
-    justify-content: space-between;
-}
-
-.liNotHorizonatalNotReverse {
-  
-    flex-direction: row;
-}
-
-.tubestop.flex-col.liNotHorizonatalNotReverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-  
-    display: block;
-    
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: -100%;
-}
-
-.tubestop.flex-col.liNotHorizonatalNotReverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-  
-    display: block;
-   
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: 40%;
-}
-
-.tubestop.liNotHorizonatalNotReverse.none-reverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-}
-
-.tubestop.flex-row.liNotHorizonatalNotReverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-}
-
-.tubestop.liNotHorizonatalNotReverse.none-reverse .status-flow-item:not(:first-child):after {
-  
-    display: block;
+.circle {
+  z-index: 10;
+  margin-left: auto;
+  margin-right: auto;
+  height: 1.5rem;
+  width: 1.5rem;
+  border-radius: 9999px
 }
 
-.tubestop.flex-row.liNotHorizonatalNotReverse .status-flow-item:not(:first-child):after {
-  
-    display: block;
+.completedCircle {
+  margin-top: -1rem;
+  background-color: var(--color-success)
 }
 
-.tubestop.liNotHorizonatalNotReverse.none-reverse .status-flow-item:not(:first-child):after {
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    left: -50%;
-    bottom: 7px;
-  }
-
-.tubestop.flex-row.liNotHorizonatalNotReverse .status-flow-item:not(:first-child):after {
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    left: -50%;
-    bottom: 7px;
-  }
-
-.tubestop.flex-row-reverse.liNotHorizonatalNotReverse
-    .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
+.inactiveCircle {
+  margin-top: -1rem;
+  background-color: var(--color-border-light)
 }
 
-.tubestop.liNotHorizonatalNotReverse.reverse .status-flow-item:not(:first-child):after {
-    left: -50%;
-    bottom: 7px;
-    position: absolute;
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
+.activeCircle {
+  margin-top: -1rem;
+  background-color: var(--color-gold)
 }
 
-.liNotHorizonatalReverse {
-  
-    flex-direction: row-reverse;
+.circleLast {
+  margin-top: 0.25rem
 }
 
-.tubestop.liNotHorizonatalReverse.none-reverse
-    .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
+.line {
+  margin-top: 1rem;
+  height: 0.25rem;
+  width: 100%;
+  background-color: var(--color-border-light);
+  margin-left: 50%
 }
 
-.horizonatalReverse {
-  
-    padding-top: 0.5rem;
+.completedLine {
+  margin-top: 1rem;
+  height: 0.25rem;
+  width: 100%;
+  background-color: var(--color-success);
+  margin-left: 50%
 }
 
-.horizonatalNotReverse {
-  
-    padding-bottom: 0.5rem;
+.text {
+  margin-top: 0.5rem;
+  text-align: center
 }
 
-.notHorizonatalNotReverse {
-  
-    padding-left: 1rem;
+.activeStop {
+  font-weight: 700;
+  color: var(--color-gold)
 }
 
-.notHorizonatalReverse {
-  
-    padding-right: 1rem;
+.inactiveStop {
+  font-weight: 500;
+  color: var(--color-border-light)
 }
 
-.margin {
-  
-    margin-top: 3rem;
-  
-    margin-bottom: 3rem;
+.completedStop {
+  font-weight: 500;
+  color: var(--color-success)
 }
 
-/* Vertical */
-.tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-  
-    display: block;
-    
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: -100%;
-}
-  
-  .tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-  
-    display: block;
-   
-    content: "";
-    width: 1px;
-    height: 100%;
-    left: 7px;
-    top: 40%;
-}
-  
-  /* reverse */
-  .tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: -100%;
-}
-  
-  .tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 1px;
-    height: 100%;
-    right: 7px;
-    top: 40%;
-}
-  
-  /* Horizontal */
-  .tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    left: -50%;
-    bottom: 7px;
-}
-  
-  .tubestop.flex-row-reverse.none-reverse
-    .status-flow-item:not(:first-child):after {
-  
-    position: absolute;
-  
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
-}
-  
-  /*reverse*/
-  .tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
-    left: -50%;
-    bottom: 7px;
-    position: absolute;
-    display: block;
-  
-    content: "";
-    width: 100%;
-    height: 1px;
-    right: -50%;
-    top: 7px;
-}
-  
 /*# sourceMappingURL=style.module.css.map */