Initial commit

3 files changed, 216 insertions, 0 deletions

diff --git a/assets/sass/@primer/css/popover/README.md b/assets/sass/@primer/css/popover/README.md
new file mode 100644
index 0000000..3fd2e73
--- /dev/null
+++ b/assets/sass/@primer/css/popover/README.md
@@ -0,0 +1,25 @@
+---
+bundle: "popover"
+generated: true
+---
+
+# Primer CSS: `popover` 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/popover/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/popover.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
diff --git a/assets/sass/@primer/css/popover/index.scss b/assets/sass/@primer/css/popover/index.scss
new file mode 100644
index 0000000..6fd595a
--- /dev/null
+++ b/assets/sass/@primer/css/popover/index.scss
@@ -0,0 +1,3 @@
+// support files
+@import "../support/index.scss";
+@import "./popover.scss";
diff --git a/assets/sass/@primer/css/popover/popover.scss b/assets/sass/@primer/css/popover/popover.scss
new file mode 100644
index 0000000..7838b89
--- /dev/null
+++ b/assets/sass/@primer/css/popover/popover.scss
@@ -0,0 +1,188 @@
+.Popover {
+  position: absolute;
+  z-index: 100;
+}
+
+.Popover-message {
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+
+  // Carets
+  &::before,
+  &::after {
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    content: "";
+  }
+
+  &::before {
+    top: -$spacer-3;
+    // stylelint-disable-next-line primer/spacing
+    margin-left: -9px;
+    // stylelint-disable-next-line primer/borders
+    border: $spacer-2 $border-style transparent;
+    border-bottom-color: $border-black-fade;
+  }
+
+  &::after {
+    top: -14px;
+    margin-left: -$spacer-2;
+    // stylelint-disable-next-line primer/borders
+    border: 7px $border-style transparent;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-color: $bg-white;
+  }
+}
+
+// Bottom-oriented carets
+.Popover-message--bottom,
+.Popover-message--bottom-right,
+.Popover-message--bottom-left {
+  &::before,
+  &::after {
+    top: auto;
+    border-bottom-color: transparent;
+  }
+
+  &::before {
+    bottom: -$spacer-3;
+    border-top-color: $border-black-fade;
+  }
+
+  &::after {
+    bottom: -14px;
+    // stylelint-disable-next-line primer/borders
+    border-top-color: $bg-white;
+  }
+}
+
+// Top & Bottom: Right-oriented carets
+.Popover-message--top-right,
+.Popover-message--bottom-right {
+  right: -9px;
+  margin-right: 0;
+
+  &::before,
+  &::after {
+    left: auto;
+    margin-left: 0;
+  }
+
+  &::before {
+    right: 20px;
+  }
+
+  &::after {
+    right: 21px;
+  }
+}
+
+// Top & Bottom: Left-oriented carets
+.Popover-message--top-left,
+.Popover-message--bottom-left {
+  left: -9px;
+  margin-left: 0;
+
+  &::before,
+  &::after {
+    left: $spacer-4;
+    margin-left: 0;
+  }
+
+  &::after {
+    left: $spacer-4 + 1;
+  }
+}
+
+// Right- & Left-oriented carets
+.Popover-message--right,
+.Popover-message--right-top,
+.Popover-message--right-bottom,
+.Popover-message--left,
+.Popover-message--left-top,
+.Popover-message--left-bottom {
+  &::before,
+  &::after {
+    top: 50%;
+    left: auto;
+    margin-left: 0;
+    border-bottom-color: transparent;
+  }
+
+  &::before {
+    // stylelint-disable-next-line primer/spacing
+    margin-top: -($spacer-2 + 1);
+  }
+
+  &::after {
+    margin-top: -$spacer-2;
+  }
+}
+
+// Right-oriented carets
+.Popover-message--right,
+.Popover-message--right-top,
+.Popover-message--right-bottom {
+  &::before {
+    right: -$spacer-3;
+    border-left-color: $border-black-fade;
+  }
+
+  &::after {
+    right: -14px;
+    // stylelint-disable-next-line primer/borders
+    border-left-color: $bg-white;
+  }
+}
+
+// Left-oriented carets
+.Popover-message--left,
+.Popover-message--left-top,
+.Popover-message--left-bottom {
+  &::before {
+    left: -$spacer-3;
+    border-right-color: $border-black-fade;
+  }
+
+  &::after {
+    left: -14px;
+    // stylelint-disable-next-line primer/borders
+    border-right-color: $bg-white;
+  }
+}
+
+// Right & Left: Top-oriented carets
+.Popover-message--right-top,
+.Popover-message--left-top {
+  &::before,
+  &::after {
+    top: $spacer-4;
+  }
+}
+
+// Right & Left: Bottom-oriented carets
+.Popover-message--right-bottom,
+.Popover-message--left-bottom {
+  &::before,
+  &::after {
+    top: auto;
+  }
+
+  &::before {
+    bottom: $spacer-3;
+  }
+
+  &::after {
+    bottom: $spacer-3 + 1;
+  }
+}
+
+.Popover-message--large {
+
+  @include breakpoint(sm) {
+    min-width: 320px;
+  }
+}