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/loaders/README.md | 25 +++++++++++++++++++++++++ assets/sass/@primer/css/loaders/index.scss | 2 ++ assets/sass/@primer/css/loaders/loaders.scss | 19 +++++++++++++++++++ 3 files changed, 46 insertions(+) create mode 100644 assets/sass/@primer/css/loaders/README.md create mode 100644 assets/sass/@primer/css/loaders/index.scss create mode 100644 assets/sass/@primer/css/loaders/loaders.scss (limited to 'assets/sass/@primer/css/loaders') diff --git a/assets/sass/@primer/css/loaders/README.md b/assets/sass/@primer/css/loaders/README.md new file mode 100644 index 0000000..647b854 --- /dev/null +++ b/assets/sass/@primer/css/loaders/README.md @@ -0,0 +1,25 @@ +--- +bundle: "loaders" +generated: true +--- + +# Primer CSS: `loaders` 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/loaders/index.scss"; +``` + +## Build + +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/loaders.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/loaders/index.scss b/assets/sass/@primer/css/loaders/index.scss new file mode 100644 index 0000000..c615f3a --- /dev/null +++ b/assets/sass/@primer/css/loaders/index.scss @@ -0,0 +1,2 @@ +@import "../support/index.scss"; +@import "./loaders.scss"; diff --git a/assets/sass/@primer/css/loaders/loaders.scss b/assets/sass/@primer/css/loaders/loaders.scss new file mode 100644 index 0000000..cca2f68 --- /dev/null +++ b/assets/sass/@primer/css/loaders/loaders.scss @@ -0,0 +1,19 @@ +// Loaders + +// Animated Ellipsis + +.AnimatedEllipsis { + display: inline-block; + overflow: hidden; + vertical-align: bottom; + + &::after { + display: inline-block; + content: "..."; + animation: AnimatedEllipsis-keyframes 1.2s steps(4, jump-none) infinite; + } + + @keyframes AnimatedEllipsis-keyframes { + 0% { transform: translateX(-100%); } + } +} -- cgit v1.2.3