🐛 fix: adjust timeline classes

chrissgon · May 5, 2024 · 27813ff · 27813ff
1 parent 447260a
commit 27813ff
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chrissgon/perfectui",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "displayName": "Perfect UI",
   "description": "An exceptionally lightweight and highly customizable CSS and JavaScript library for crafting elegant user interfaces.",
   "private": false,

diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss
@@ -25,6 +25,10 @@
   border-left: 1px solid rgb(var(--borderSecondary));
 }
 
+.timeline .checkpoint:last-child::before {
+  display: none;
+}
+
 .timeline.group-row .checkpoint::before {
   width: 100%;
   height: 1px;
@@ -36,6 +40,10 @@
   padding: 0.5rem;
 }
 
+.timeline.group-row .checkpoint > *:not(.checkpoint-icon) {
+  margin-left: -1rem;
+}
+
 .checkpoint-icon {
   width: var(--checkpoint-icon-width);
   height: var(--checkpoint-icon-width);
@@ -51,12 +59,10 @@
   border-radius: var(--roundedFull);
 
   margin-left: calc(var(--checkpoint-icon-width) / 2 * -1);
-  margin-top: 0.25rem;
   z-index: 1;
 }
 
 .timeline.group-row .checkpoint-icon {
-  margin-left: 0.25rem;
   margin-top: calc(var(--checkpoint-icon-width) / 2 * -1);
 }
 
@@ -83,3 +89,26 @@
   background: rgb(var(--contentPrimary));
   color: rgb(var(--backgroundPrimary));
 }
+
+// responsive
+@media (min-width: 1024px) {
+  .timeline.group-responsive {
+    .checkpoint {
+      flex-direction: column;
+    }
+
+    .checkpoint::before {
+      width: 100%;
+      height: 1px;
+      border-top: 1px solid rgb(var(--borderSecondary));
+    }
+
+    .checkpoint > *:not(.checkpoint-icon) {
+      margin-left: -1rem;
+    }
+
+    .checkpoint-icon {
+      margin-top: calc(var(--checkpoint-icon-width) / 2 * -1);
+    }
+  }
+}