summaryrefslogtreecommitdiffstats
path: root/assets/sass/@primer/css/header
diff options
context:
space:
mode:
Diffstat (limited to 'assets/sass/@primer/css/header')
-rw-r--r--assets/sass/@primer/css/header/README.md25
-rw-r--r--assets/sass/@primer/css/header/header.scss37
-rw-r--r--assets/sass/@primer/css/header/index.scss2
3 files changed, 64 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/header/README.md b/assets/sass/@primer/css/header/README.md
new file mode 100644
index 0000000..a6938ea
--- /dev/null
+++ b/assets/sass/@primer/css/header/README.md
@@ -0,0 +1,25 @@
+---
+bundle: "header"
+generated: true
+---
+
+# Primer CSS: `header` 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/header/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/header.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/header/header.scss b/assets/sass/@primer/css/header/header.scss
new file mode 100644
index 0000000..6549f9d
--- /dev/null
+++ b/assets/sass/@primer/css/header/header.scss
@@ -0,0 +1,37 @@
+.Header {
+ z-index: 32; // TODO: Figure out z-index system
+ display: flex;
+ padding: $spacer-3;
+ font-size: $h5-size;
+ line-height: $lh-default;
+ // stylelint-disable-next-line primer/colors
+ color: $white-fade-70;
+ background-color: $bg-gray-dark;
+ align-items: center;
+ flex-wrap: nowrap;
+}
+
+.Header-item {
+ display: flex;
+ margin-right: $spacer-3;
+ align-self: stretch;
+ align-items: center;
+ flex-wrap: nowrap;
+}
+
+.Header-item--full {
+ flex: auto;
+}
+
+.Header-link {
+ font-weight: $font-weight-bold;
+ color: $text-white;
+ white-space: nowrap;
+
+ &:hover,
+ &:focus {
+ // stylelint-disable-next-line primer/colors
+ color: $white-fade-70;
+ text-decoration: none;
+ }
+}
diff --git a/assets/sass/@primer/css/header/index.scss b/assets/sass/@primer/css/header/index.scss
new file mode 100644
index 0000000..2301d32
--- /dev/null
+++ b/assets/sass/@primer/css/header/index.scss
@@ -0,0 +1,2 @@
+@import "../support/index.scss";
+@import "./header.scss";