1 files changed, 95 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/timeline/timeline-item.scss b/assets/sass/@primer/css/timeline/timeline-item.scss
new file mode 100644
index 0000000..6f6ff4d
--- /dev/null
+++ b/assets/sass/@primer/css/timeline/timeline-item.scss
@@ -0,0 +1,95 @@
+.TimelineItem {
+  position: relative;
+  display: flex;
+  padding: $spacer-3 0;
+  margin-left: $spacer-3;
+
+  // The Timeline
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: 2px;
+    content: "";
+    // stylelint-disable-next-line primer/colors
+    background-color: $gray-200;
+  }
+
+  &:target .TimelineItem-badge {
+    // stylelint-disable-next-line primer/borders
+    border-color: $blue-400;
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 0 0.2em $blue-200;
+  }
+}
+
+.TimelineItem-badge {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: $spacer-5;
+  height: $spacer-5;
+  margin-right: $spacer-2;
+  margin-left: -$spacer-3 + 1;
+  // stylelint-disable-next-line primer/colors
+  color: $gray-700;
+  align-items: center;
+  // stylelint-disable-next-line primer/colors
+  background-color: $gray-200;
+  // stylelint-disable-next-line primer/borders
+  border: 2px $border-style $border-white;
+  border-radius: 50%;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.TimelineItem-body {
+  min-width: 0;
+  max-width: 100%;
+  margin-top: $spacer-1;
+  // stylelint-disable-next-line primer/colors
+  color: $gray-700;
+  flex: auto;
+}
+
+.TimelineItem-avatar {
+  position: absolute;
+  left: -($spacer-6 + $spacer-5);
+  z-index: 1;
+}
+
+.TimelineItem-break {
+  position: relative;
+  z-index: 1;
+  height: $spacer-4;
+  margin: 0;
+  margin-bottom: -$spacer-3;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: -($spacer-6 + $spacer-3);
+  background-color: $bg-white;
+  border: 0;
+  // stylelint-disable-next-line primer/borders
+  border-top: 4px $border-style $border-color;
+}
+
+.TimelineItem--condensed {
+  padding-top: $spacer-1;
+  padding-bottom: 0;
+
+  // TimelineItem--condensed is often grouped. (commits)
+  &:last-child {
+    padding-bottom: $spacer-3;
+  }
+
+  .TimelineItem-badge {
+    height: $spacer-3;
+    margin-top: $spacer-2;
+    margin-bottom: $spacer-2;
+    // stylelint-disable-next-line primer/colors
+    color: $gray-400;
+    background-color: $bg-white;
+    border: 0;
+  }
+}