3 files changed, 122 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/timeline/README.md b/assets/sass/@primer/css/timeline/README.md
new file mode 100644
index 0000000..a8acbfa
--- /dev/null
+++ b/assets/sass/@primer/css/timeline/README.md
@@ -0,0 +1,25 @@
+---
+bundle: "timeline"
+generated: true
+---
+
+# Primer CSS: `timeline` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/timeline/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/timeline.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) &copy; [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
diff --git a/assets/sass/@primer/css/timeline/index.scss b/assets/sass/@primer/css/timeline/index.scss
new file mode 100644
index 0000000..1692410
--- /dev/null
+++ b/assets/sass/@primer/css/timeline/index.scss
@@ -0,0 +1,2 @@
+@import "../support/index.scss";
+@import "./timeline-item.scss";
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;
+  }
+}