diff options
Diffstat (limited to 'assets/sass/@primer/css/branch-name')
-rw-r--r-- | assets/sass/@primer/css/branch-name/README.md | 25 | ||||
-rw-r--r-- | assets/sass/@primer/css/branch-name/branch-name.scss | 25 | ||||
-rw-r--r-- | assets/sass/@primer/css/branch-name/index.scss | 3 |
3 files changed, 53 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/branch-name/README.md b/assets/sass/@primer/css/branch-name/README.md new file mode 100644 index 0000000..8408e26 --- /dev/null +++ b/assets/sass/@primer/css/branch-name/README.md @@ -0,0 +1,25 @@ +--- +bundle: "branch-name" +generated: true +--- + +# Primer CSS: `branch-name` 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/branch-name/index.scss"; +``` + +## Build + +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/branch-name.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/branch-name/branch-name.scss b/assets/sass/@primer/css/branch-name/branch-name.scss new file mode 100644 index 0000000..1515b21 --- /dev/null +++ b/assets/sass/@primer/css/branch-name/branch-name.scss @@ -0,0 +1,25 @@ +// A nice way to display branch names inside the UI. Can be a link or not. +// stylelint-disable selector-max-type +.branch-name { + display: inline-block; + // stylelint-disable-next-line primer/spacing + padding: 2px 6px; + font: 12px $mono-font; + // stylelint-disable-next-line primer/colors + color: rgba($black, 0.6); + // stylelint-disable-next-line primer/colors + background-color: lighten($blue-100, 3%); + border-radius: $border-radius; + + .octicon { + // stylelint-disable-next-line primer/spacing + margin: 1px -2px 0 0; + // stylelint-disable-next-line primer/colors + color: desaturate($blue-300, 70%); + } +} + +// When a branch name is a link +// stylelint-disable selector-no-qualifying-type +a.branch-name { color: $text-blue; } +// stylelint-enable selector-no-qualifying-type diff --git a/assets/sass/@primer/css/branch-name/index.scss b/assets/sass/@primer/css/branch-name/index.scss new file mode 100644 index 0000000..3413cc5 --- /dev/null +++ b/assets/sass/@primer/css/branch-name/index.scss @@ -0,0 +1,3 @@ +// support files +@import "../support/index.scss"; +@import "./branch-name.scss"; |