real-world-css-libraries 1.0.2 → 1.0.4

package/libs/progress-tracker-v3.0.0.css

@@ -0,0 +1,352 @@
+/* https://github.com/NigelOToole/progress-tracker/blob/master/src/styles/progress-tracker.css */
+.progress-tracker {
+  --marker-size: 32px;
+  --marker-size-block: 32px;
+  --marker-size-inline: var(--marker-size-block);
+  --marker-size-half: calc(var(--marker-size-block) * 0.5);
+  --marker-spacing: 0px;
+  
+  --marker-bg: #999;
+  --marker-bg-active: #0034a3;
+  --marker-bg-complete: #0157ff;
+  --marker-bg-hover: #3f7eff;
+  
+  --marker-color: #fff;
+
+
+  --path-size-block: 4px;
+  --path-size-inline: calc(100% - (var(--marker-size-inline) + (var(--marker-spacing) * 2)));
+  --path-position-block: calc(var(--marker-size-half) - (var(--path-size-block) * 0.5));
+  --path-position-inline: calc(var(--marker-size-inline) + var(--marker-spacing));
+
+  --path-bg: #999;
+  --path-bg-active: #999;
+  --path-bg-complete: #0157ff;
+
+
+  --text-color: #0034a3;
+  --text-color-hover: #0157ff;
+
+  --animation-duration: 0.3s;
+
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: step;
+}
+
+  .progress-step {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .progress-step:last-child:not(:has(.progress-text)) {
+      flex-grow: 0;
+    }
+
+  /* Marker shape */
+
+  .progress-step::before {
+      --bg: var(--marker-bg);
+      --color: var(--marker-color);
+
+      content: "";
+      position: relative;
+      z-index: 20;
+      flex-shrink: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: var(--marker-size-inline);
+      height: var(--marker-size-block);
+      border-radius: 50%;
+      color: var(--color);
+      background-color: var(--bg);
+
+      transition: background-color, border-color;
+      transition-duration: var(--animation-duration);
+    }
+
+  /* Marker path */
+
+  .progress-step::after {
+      --bg: var(--path-bg);
+    }
+
+  .progress-step:not(:last-child)::after {
+      content: "";
+      display: block;
+      position: absolute;
+      order: -1;    
+      top: var(--path-position-block);
+      left: var(--path-position-inline);
+      width: var(--path-size-inline);
+      height: var(--path-size-block);
+      background-color: var(--bg);
+      transition: background-color, background-position;
+      transition-duration: var(--animation-duration);
+    }
+
+  .progress-text {
+      padding: 8px;
+      overflow: hidden;
+      color: var(--text-color);
+      text-overflow: ellipsis;
+    }
+
+  .progress-text > * + * {
+        margin-top: 4px;
+      }
+
+  .progress-text:where(a, button) {
+        -webkit-text-decoration: none;
+        text-decoration: none;
+        text-align: inherit;
+        line-height: inherit;
+        color: inherit;
+        background: none;
+        border: none;
+      }
+
+  .progress-text:where(a, button):hover {
+          cursor: pointer;
+          color: var(--text-color-hover);
+        }
+
+  .progress-text:where(a, button):focus {
+          cursor: pointer;
+          color: var(--text-color-hover);
+        }
+
+  .progress-title {
+        font-size: 1.5rem;
+      }
+
+  /* States */
+
+  .progress-step.is-active::before {
+          --bg: var(--marker-bg-active);
+        }
+
+  .progress-step.is-active::after {
+          --bg: var(--path-bg-active);
+        }
+
+  .progress-step.is-complete::before {
+          --bg: var(--marker-bg-complete);
+        }
+
+  .progress-step.is-complete::after {
+          --bg: var(--path-bg-complete);
+        }
+
+  .progress-step:not(.is-active):has(.progress-text:where(a, button)):hover::before {
+            --bg: var(--marker-bg-hover);
+          }
+
+  .progress-step:not(.is-active):has(.progress-text:where(a, button)):focus::before {
+            --bg: var(--marker-bg-hover);
+          }
+
+  /* Alignment */
+
+  .progress-tracker--center {
+  --path-position-inline: calc(50% + (var(--marker-size-inline) / 2) + var(--marker-spacing));
+
+  text-align: center;
+}
+
+  .progress-tracker--center:not(.progress-tracker--vertical) .progress-step::before {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+  .progress-tracker--center.progress-tracker--vertical {
+    max-width: 240px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .progress-tracker--end {
+  --path-position-inline: calc(100% + var(--marker-spacing));
+
+  text-align: right;
+}
+
+  .progress-tracker--end:not(.progress-tracker--vertical) .progress-step::before {
+      margin-left: auto;
+    }
+
+  .progress-tracker--end.progress-tracker--vertical .progress-step {
+    flex-direction: row-reverse;
+  }
+
+  .progress-tracker--end.progress-tracker--vertical .progress-step::after {
+      left: auto;
+      right: var(--path-position-block);
+    }
+
+  .progress-tracker--reverse:not(.progress-tracker--vertical) .progress-step::after {
+      top: auto;
+      bottom: var(--path-position-block);
+    }
+
+  .progress-tracker--reverse.progress-tracker--marker-square .progress-step::after {
+      top: auto;
+      bottom: 0;
+    }
+
+  .progress-tracker--reverse .progress-text {
+      order: -1;
+      flex-grow: 1;
+    }
+
+  /* Variants */
+
+  .progress-tracker--marker-counter .progress-step::before {
+      content: counter(step);
+      counter-increment: step;
+    }
+
+  .progress-tracker--marker-dataset .progress-step::before {
+      content: attr(data-text);
+      content: attr(data-text, "");
+    }
+
+  .progress-tracker--dashed, .progress-tracker--dashed-even {
+  --path-dash-size: 8px;
+  --path-dash-count: 0;
+  --path-dash-calc: var(--path-dash-size);
+  --path-direction: right;
+  --marker-spacing: 8px;
+}
+
+  .progress-tracker--dashed .progress-step:not(:last-child)::after, .progress-tracker--dashed-even .progress-step:not(:last-child)::after {
+      background: repeating-linear-gradient(to var(--path-direction), var(--bg) 0px var(--path-dash-calc), transparent var(--path-dash-calc) calc(var(--path-dash-calc)*2));
+    }
+
+  .progress-tracker--dashed.progress-tracker--vertical, .progress-tracker--dashed-even.progress-tracker--vertical {
+    --path-direction: bottom;
+  }
+
+  .progress-tracker--dashed-even {
+  --path-dash-size: 0px; 
+  --path-dash-count: 4;
+  --path-dash-percent: calc(100% / (var(--path-dash-count) + (var(--path-dash-count) - 1)));
+  --path-dash-calc: calc(100% / (var(--path-dash-count) + (var(--path-dash-count) - 1)));
+  --path-dash-calc: var(--path-dash-percent);
+  --marker-spacing: 0px;
+}
+
+  @supports (height: round(up, 100.1px, 1px)) {
+
+  .progress-tracker--dashed-even {
+    --path-dash-calc: round(up, var(--path-dash-percent), .5px);
+}
+ }
+
+  .progress-tracker--spaced {
+  --marker-spacing: 8px;
+}
+
+  .progress-tracker--marker-square {
+  --marker-size-block: 24px;
+  --marker-size-inline: 4px;
+  --path-position-block: calc(var(--marker-size-block) - var(--path-size-block));
+}
+
+  .progress-tracker--marker-square .progress-step::before {
+      border-radius: 0;
+    }
+
+  .progress-tracker--marker-square.progress-tracker--vertical {
+    --marker-size-inline: 24px;
+    --marker-size-block: 4px;
+    --path-size-inline: calc(100% - (var(--marker-spacing) * 2));
+  }
+
+  .progress-tracker--anim .progress-step.is-active:not(:last-child)::after, .progress-tracker--anim .progress-step.is-complete:not(:last-child)::after {
+        background-image: linear-gradient(to right, var(--path-bg-active) 50%, var(--path-bg-complete) 50%);
+        background-size: 200% 100%;
+        background-position: 0% 100%;  
+      }
+
+  .progress-tracker--anim .progress-step.is-complete:not(:last-child)::after {
+        background-position: -100% 100%; 
+      }
+
+  .progress-tracker--anim.progress-tracker--vertical .progress-step.is-active:not(:last-child)::after, .progress-tracker--anim.progress-tracker--vertical .progress-step.is-complete:not(:last-child)::after {
+        background-image: linear-gradient(to bottom, var(--path-bg-active) 50%, var(--path-bg-complete) 50%);
+        background-size: 100% 200%;
+        background-position: 100% 0%;  
+      }
+
+  .progress-tracker--anim.progress-tracker--vertical .progress-step.is-complete:not(:last-child)::after {
+        background-position: 100% -100%; 
+      }
+
+  .progress-tracker--inline {
+  overflow: auto;
+}
+
+  .progress-tracker--inline .progress-step {
+    align-items: center;
+    flex-direction: row;
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+
+  .progress-tracker--inline .progress-step::before {
+      flex-shrink: 0;
+      order: 2;
+    }
+
+  .progress-tracker--inline .progress-step::after {
+      position: relative;
+      top: auto;
+      left: 0;
+      order: 3;
+    }
+
+  .progress-tracker--inline .progress-text {
+      flex: 0 0 auto;
+      padding: 8px 12px;
+    }
+
+  .progress-tracker--inline .progress-text:has(*:nth-child(2)) {
+        flex-basis: min-content;
+      }
+
+  .progress-tracker--inline:not(.progress-tracker--inline-text-end) .progress-step:first-child .progress-text {
+      padding-left: 0;
+    }
+
+  .progress-tracker--inline-text-end .progress-text {
+    order: 2;
+  }
+
+  .progress-tracker--vertical {
+  flex-direction: column;
+}
+
+  .progress-tracker--vertical .progress-step {
+    flex-direction: row;
+  }
+
+  .progress-tracker--vertical .progress-step::after {
+      top: calc(var(--marker-size-block) + var(--marker-spacing));
+      left: var(--path-position-block);
+      width: var(--path-size-block);
+      height: var(--path-size-inline);
+    }
+
+  .progress-tracker--vertical .progress-text {
+      flex-grow: 1;
+      padding-top: 4px;
+      padding-bottom: 12px;
+    }