From 6bdd1c4c0ea567c45fdecb1e858a99ee5da246ad Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Mon, 13 Apr 2020 19:13:39 +0800 Subject: Initial commit --- assets/sass/@primer/css/alerts/README.md | 25 ++++++++ assets/sass/@primer/css/alerts/flash.scss | 103 ++++++++++++++++++++++++++++++ assets/sass/@primer/css/alerts/index.scss | 3 + 3 files changed, 131 insertions(+) create mode 100644 assets/sass/@primer/css/alerts/README.md create mode 100644 assets/sass/@primer/css/alerts/flash.scss create mode 100644 assets/sass/@primer/css/alerts/index.scss (limited to 'assets/sass/@primer/css/alerts') diff --git a/assets/sass/@primer/css/alerts/README.md b/assets/sass/@primer/css/alerts/README.md new file mode 100644 index 0000000..6dc24b8 --- /dev/null +++ b/assets/sass/@primer/css/alerts/README.md @@ -0,0 +1,25 @@ +--- +bundle: "alerts" +generated: true +--- + +# Primer CSS: `alerts` 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/alerts/index.scss"; +``` + +## Build + +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/alerts.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/alerts/flash.scss b/assets/sass/@primer/css/alerts/flash.scss new file mode 100644 index 0000000..b8b82c8 --- /dev/null +++ b/assets/sass/@primer/css/alerts/flash.scss @@ -0,0 +1,103 @@ +// Default flash +// stylelint-disable selector-max-type +.flash { + position: relative; + padding: $spacer-3; + // stylelint-disable-next-line primer/colors + color: $blue-800; + // stylelint-disable-next-line primer/colors + background-color: $blue-100; + border: $border-width $border-style $border-black-fade; + border-radius: $border-radius; + + p:last-child { + margin-bottom: 0; + } +} + +// Contain the flash messages +.flash-messages { + margin-bottom: $spacer-4; +} + +// Close button +.flash-close { + float: right; + padding: $spacer-3; + margin: -$spacer-3; + color: inherit; + text-align: center; + cursor: pointer; + // Undo `