@skyux/icons 6.8.1 → 6.10.0

package/CHANGELOG.md

@@ -1,146 +1,165 @@
-# Changelog
-
-## [6.8.1](https://github.com/blackbaud/skyux-icons/compare/6.8.0...6.8.1) (2024-01-23)
-
-
-### Bug Fixes
-
-* add attribution for Streamline font ([#74](https://github.com/blackbaud/skyux-icons/issues/74)) ([eedb49e](https://github.com/blackbaud/skyux-icons/commit/eedb49e74d3a6d49eff41f064fd7650261b7356c))
-
-## 6.8.0 (2024-01-17)
-
-- Added icons for FE RE IA. [#72](https://github.com/blackbaud/skyux-icons/pull/72)
-
-## 6.7.0 (2023-12-07)
-
-- Added Copilot icons. [#70](https://github.com/blackbaud/skyux-icons/pull/70)
-
-## 6.6.2 (2023-12-05)
-
-- Swapped names and aliases for Online learning, Donations, and Volunteering. [#68](https://github.com/blackbaud/skyux-icons/pull/68)
-
-## 6.6.1 (2023-12-04)
-
-- Updated variant names for Online learning, Donations, and Volunteering. [#67](https://github.com/blackbaud/skyux-icons/pull/67)
-
-## 6.6.0 (2023-11-28)
-
-- Added variant icons for Online learning, Donations, and Volunteering. [#66](https://github.com/blackbaud/skyux-icons/pull/66)
-
-## 6.5.0 (2023-11-03)
-
-- Added MobilePay icons. [#63](https://github.com/blackbaud/skyux-icons/pull/63)
-
-## 6.4.0 (2023-09-26)
-
-- Added `faNames` property to manifest and deprecated `faName` [#61](https://github.com/blackbaud/skyux-icons/pull/61)
-
-## 6.3.0 (2023-09-19)
-
-- Added a `VERSION` object to the public exports API. [#59](https://github.com/blackbaud/skyux-icons/pull/59)
-
-## 6.2.4 (2023-09-14)
-
-- Restored table icon [#58](https://github.com/blackbaud/skyux-icons/pull/58)
-
-## 6.2.3 (2023-09-12)
-
-- Removed duplicates and grouped icons categorically [#57](https://github.com/blackbaud/skyux-icons/pull/57)
-
-## 6.2.2 (2023-09-11)
-
-- Resolved publishing issue in 6.2.1. [#55](https://github.com/blackbaud/skyux-icons/pull/55)
-
-## 6.2.1 (2023-09-08)
-
-- Included unknown file type icon. [#54](https://github.com/blackbaud/skyux-icons/pull/54)
-
-## 6.2.0 (2023-09-06)
-
-- Added additional file type icons and updated star icon. [#53](https://github.com/blackbaud/skyux-icons/pull/53)
-
-## 6.1.2 (2023-09-05)
-
-- Revert Font Awesome alias for star icon to current common usage and decouple file type icons until all of them are completed. [#52](https://github.com/blackbaud/skyux-icons/pull/52)
-
-## 6.1.1 (2023-08-25)
-
-- Added stack icons to manifest. [#51](https://github.com/blackbaud/skyux-icons/pull/51)
-
-## 6.0.0 (2023-04-07)
-
-- Added alternate Font Awesome icons for use in SKY UX default theme. [#47](https://github.com/blackbaud/skyux-icons/pull/47)
-- Removed `Theme` from TypeScript type names. [#48](https://github.com/blackbaud/skyux-icons/pull/48)
-
-## 5.3.1 (2023-03-13)
-
-- Set TypeScript module from `ES2022` to `CommonJs`. [#46](https://github.com/blackbaud/skyux-icons/pull/46)
-
-## 5.3.0 (2023-03-13)
-
-- Added a JavaScript module to the public exports API. [#45](https://github.com/blackbaud/skyux-icons/pull/45)
-
-## 5.2.0 (2023-02-16)
-
-- Added new line and solid icons for left nav and modern omnibar. [#41](https://github.com/blackbaud/skyux-icons/pull/41)
-
-## 5.1.1 (2022-09-07)
-
-- Replaced link glyph with correct glyph and added attach icon. [#38](https://github.com/blackbaud/skyux-icons/pull/38)
-
-## 5.1.0 (2022-04-27)
-
-- Added Blackbaud brandmark and download icons. [#34](https://github.com/blackbaud/skyux-icons/pull/34)
-- Added show/hide icons. [#35](https://github.com/blackbaud/skyux-icons/pull/35)
-- Reconciled duplicate glyphs and added new icons. [#33](https://github.com/blackbaud/skyux-icons/pull/33)
-
-## 5.0.0 (2021-09-27)
-
-- Initial 5.0.0 release. [#32](https://github.com/blackbaud/skyux-icons/pull/32)
-
-## 4.0.0-beta.5 (2021-07-27)
-
-- Added indent/outdent and undo/redo icons. [#30](https://github.com/blackbaud/skyux-icons/pull/30)
-
-## 4.0.0-beta.4 (2021-07-21)
-
-- Added new icons to support text editing. [#28](https://github.com/blackbaud/skyux-icons/pull/28)
-
-## 4.0.0-beta.3 (2021-06-15)
-
-- Added new icons to support charting, text editing, and global navigation. [#25](https://github.com/blackbaud/skyux-icons/pull/25)
-
-## 4.0.0-beta.2 (2021-03-02)
-
-- Fixed an issue that kept the list of icons from displaying in the SKY UX documentation. [#20](https://github.com/blackbaud/skyux-icons/pull/20)
-
-## 4.0.0-beta.1 (2021-03-02)
-
-- Added new icons. [#17](https://github.com/blackbaud/skyux-icons/pull/17)
-
-## 4.0.0-beta.0 (2020-06-30)
-
-- Fixed an issue where some icons displayed diagonal lines on pages in Chrome on Windows. [#14](https://github.com/blackbaud/skyux-icons/pull/14)
-
-## 3.0.0-beta.2 (2020-05-28)
-
-- Removed unused icons and cleaned up icon names. [#10](https://github.com/blackbaud/skyux-icons/pull/10)
-
-## 3.0.0-beta.1 (2020-04-01)
-
-- Added icon usage documentation to the manifest file. [#5](https://github.com/blackbaud/skyux-icons/pull/5)
-- Removed the left and right margins from icons. [#5](https://github.com/blackbaud/skyux-icons/pull/5)
-
-## 3.0.0-beta.0 (2020-03-26)
-
-- Initial beta release. [#4](https://github.com/blackbaud/skyux-icons/pull/4)
-
-## 3.0.0-alpha.1 (2020-03-25)
-
-- Moved all files to the `dist/assets` folder so they can be picked up by the NPM publish step. [#2](https://github.com/blackbaud/skyux-icons/pull/2)
-- Added a `manifest.json` file containing metadata about the glyph font to `dist/assets`. [#2](https://github.com/blackbaud/skyux-icons/pull/2)
-- Added minified versions of all CSS files to `dist/assets`. [#2](https://github.com/blackbaud/skyux-icons/pull/2)
-
-## 3.0.0-alpha.0 (2020-03-24)
-
-- Initial alpha release. [#1](https://github.com/blackbaud/skyux-icons/pull/1)
+# Changelog
+
+## [6.10.0](https://github.com/blackbaud/skyux-icons/compare/6.9.0...6.10.0) (2024-02-14)
+
+
+### Features
+
+* add up arrow ([#82](https://github.com/blackbaud/skyux-icons/issues/82)) ([e132990](https://github.com/blackbaud/skyux-icons/commit/e132990e6132f6228454d64c2998486fb96dba1f))
+
+
+### Bug Fixes
+
+* add missing icon metadata ([#82](https://github.com/blackbaud/skyux-icons/issues/82)) ([e132990](https://github.com/blackbaud/skyux-icons/commit/e132990e6132f6228454d64c2998486fb96dba1f))
+
+## [6.9.0](https://github.com/blackbaud/skyux-icons/compare/6.8.1...6.9.0) (2024-02-02)
+
+
+### Features
+
+* add map marker ([#79](https://github.com/blackbaud/skyux-icons/issues/79)) ([10dc898](https://github.com/blackbaud/skyux-icons/commit/10dc89849d726814e70e2ae4b382c1f39e5ff8ee))
+
+## [6.8.1](https://github.com/blackbaud/skyux-icons/compare/6.8.0...6.8.1) (2024-01-23)
+
+
+### Bug Fixes
+
+* add attribution for Streamline font ([#74](https://github.com/blackbaud/skyux-icons/issues/74)) ([eedb49e](https://github.com/blackbaud/skyux-icons/commit/eedb49e74d3a6d49eff41f064fd7650261b7356c))
+
+## 6.8.0 (2024-01-17)
+
+- Added icons for FE RE IA. [#72](https://github.com/blackbaud/skyux-icons/pull/72)
+
+## 6.7.0 (2023-12-07)
+
+- Added Copilot icons. [#70](https://github.com/blackbaud/skyux-icons/pull/70)
+
+## 6.6.2 (2023-12-05)
+
+- Swapped names and aliases for Online learning, Donations, and Volunteering. [#68](https://github.com/blackbaud/skyux-icons/pull/68)
+
+## 6.6.1 (2023-12-04)
+
+- Updated variant names for Online learning, Donations, and Volunteering. [#67](https://github.com/blackbaud/skyux-icons/pull/67)
+
+## 6.6.0 (2023-11-28)
+
+- Added variant icons for Online learning, Donations, and Volunteering. [#66](https://github.com/blackbaud/skyux-icons/pull/66)
+
+## 6.5.0 (2023-11-03)
+
+- Added MobilePay icons. [#63](https://github.com/blackbaud/skyux-icons/pull/63)
+
+## 6.4.0 (2023-09-26)
+
+- Added `faNames` property to manifest and deprecated `faName` [#61](https://github.com/blackbaud/skyux-icons/pull/61)
+
+## 6.3.0 (2023-09-19)
+
+- Added a `VERSION` object to the public exports API. [#59](https://github.com/blackbaud/skyux-icons/pull/59)
+
+## 6.2.4 (2023-09-14)
+
+- Restored table icon [#58](https://github.com/blackbaud/skyux-icons/pull/58)
+
+## 6.2.3 (2023-09-12)
+
+- Removed duplicates and grouped icons categorically [#57](https://github.com/blackbaud/skyux-icons/pull/57)
+
+## 6.2.2 (2023-09-11)
+
+- Resolved publishing issue in 6.2.1. [#55](https://github.com/blackbaud/skyux-icons/pull/55)
+
+## 6.2.1 (2023-09-08)
+
+- Included unknown file type icon. [#54](https://github.com/blackbaud/skyux-icons/pull/54)
+
+## 6.2.0 (2023-09-06)
+
+- Added additional file type icons and updated star icon. [#53](https://github.com/blackbaud/skyux-icons/pull/53)
+
+## 6.1.2 (2023-09-05)
+
+- Revert Font Awesome alias for star icon to current common usage and decouple file type icons until all of them are completed. [#52](https://github.com/blackbaud/skyux-icons/pull/52)
+
+## 6.1.1 (2023-08-25)
+
+- Added stack icons to manifest. [#51](https://github.com/blackbaud/skyux-icons/pull/51)
+
+## 6.0.0 (2023-04-07)
+
+- Added alternate Font Awesome icons for use in SKY UX default theme. [#47](https://github.com/blackbaud/skyux-icons/pull/47)
+- Removed `Theme` from TypeScript type names. [#48](https://github.com/blackbaud/skyux-icons/pull/48)
+
+## 5.3.1 (2023-03-13)
+
+- Set TypeScript module from `ES2022` to `CommonJs`. [#46](https://github.com/blackbaud/skyux-icons/pull/46)
+
+## 5.3.0 (2023-03-13)
+
+- Added a JavaScript module to the public exports API. [#45](https://github.com/blackbaud/skyux-icons/pull/45)
+
+## 5.2.0 (2023-02-16)
+
+- Added new line and solid icons for left nav and modern omnibar. [#41](https://github.com/blackbaud/skyux-icons/pull/41)
+
+## 5.1.1 (2022-09-07)
+
+- Replaced link glyph with correct glyph and added attach icon. [#38](https://github.com/blackbaud/skyux-icons/pull/38)
+
+## 5.1.0 (2022-04-27)
+
+- Added Blackbaud brandmark and download icons. [#34](https://github.com/blackbaud/skyux-icons/pull/34)
+- Added show/hide icons. [#35](https://github.com/blackbaud/skyux-icons/pull/35)
+- Reconciled duplicate glyphs and added new icons. [#33](https://github.com/blackbaud/skyux-icons/pull/33)
+
+## 5.0.0 (2021-09-27)
+
+- Initial 5.0.0 release. [#32](https://github.com/blackbaud/skyux-icons/pull/32)
+
+## 4.0.0-beta.5 (2021-07-27)
+
+- Added indent/outdent and undo/redo icons. [#30](https://github.com/blackbaud/skyux-icons/pull/30)
+
+## 4.0.0-beta.4 (2021-07-21)
+
+- Added new icons to support text editing. [#28](https://github.com/blackbaud/skyux-icons/pull/28)
+
+## 4.0.0-beta.3 (2021-06-15)
+
+- Added new icons to support charting, text editing, and global navigation. [#25](https://github.com/blackbaud/skyux-icons/pull/25)
+
+## 4.0.0-beta.2 (2021-03-02)
+
+- Fixed an issue that kept the list of icons from displaying in the SKY UX documentation. [#20](https://github.com/blackbaud/skyux-icons/pull/20)
+
+## 4.0.0-beta.1 (2021-03-02)
+
+- Added new icons. [#17](https://github.com/blackbaud/skyux-icons/pull/17)
+
+## 4.0.0-beta.0 (2020-06-30)
+
+- Fixed an issue where some icons displayed diagonal lines on pages in Chrome on Windows. [#14](https://github.com/blackbaud/skyux-icons/pull/14)
+
+## 3.0.0-beta.2 (2020-05-28)
+
+- Removed unused icons and cleaned up icon names. [#10](https://github.com/blackbaud/skyux-icons/pull/10)
+
+## 3.0.0-beta.1 (2020-04-01)
+
+- Added icon usage documentation to the manifest file. [#5](https://github.com/blackbaud/skyux-icons/pull/5)
+- Removed the left and right margins from icons. [#5](https://github.com/blackbaud/skyux-icons/pull/5)
+
+## 3.0.0-beta.0 (2020-03-26)
+
+- Initial beta release. [#4](https://github.com/blackbaud/skyux-icons/pull/4)
+
+## 3.0.0-alpha.1 (2020-03-25)
+
+- Moved all files to the `dist/assets` folder so they can be picked up by the NPM publish step. [#2](https://github.com/blackbaud/skyux-icons/pull/2)
+- Added a `manifest.json` file containing metadata about the glyph font to `dist/assets`. [#2](https://github.com/blackbaud/skyux-icons/pull/2)
+- Added minified versions of all CSS files to `dist/assets`. [#2](https://github.com/blackbaud/skyux-icons/pull/2)
+
+## 3.0.0-alpha.0 (2020-03-24)
+
+- Initial alpha release. [#1](https://github.com/blackbaud/skyux-icons/pull/1)

package/README.md

@@ -1,63 +1,63 @@
-# skyux-icons
-
-A glyph font and stylesheet for displaying SKY UX icons.
-
-## Installation
-
-The primary method of consuming the SKY UX icon font on the web is via the Blackbaud CDN. In the following examples, you should replace `<version>` with the specific version in this project's `package.json`. As new versions are released, previous versions will continue to be hosted on the CDN for backwards compatibility.
-
-The URLs in the examples point to minified files. If you would like to load the non-minified file for debugging, remove the `.min` portion of the file name before the extension.
-
-### Importing the stylesheet via HTML
-
-`<link rel="stylesheet" href="https://sky.blackbaudcdn.net/static/skyux-icons/<version>/assets/skyux-icons.min.css">`
-
-### Importing the stylesheet via CSS `@import`
-
-`@import url("https://sky.blackbaudcdn.net/static/skyux-icons/<version>/assets/css/skyux-icons.min.css");`
-
-If you are using the SKY UX icon font in a non-web-based project, you may install it via NPM:
-
-`npm install @skyux/icons`
-
-If you are using SKY UX icons in a [SKY UX](https://developer.blackbaud.com/skyux/) project, the icon font will already be imported for you.
-
-## Usage
-
-To display an icon on an HTML page, specify an element with the CSS class `sky-i-` followed by the name of the icon. It is typical to use an `i` element for displaying icons from an icon font.
-
-`<i class="sky-i-calendar"></i>`
-
-If you are using SKY UX, use the `sky-icon` component documented [here](https://host.nxt.blackbaud.com/skyux-indicators/docs/icon).
-
-`<sky-icon icon="calendar" iconType="skyux"></sky-icon>`
-
-## Contributing
-
-The SKY UX icon font is generated using [Fontello](http://fontello.com/). To add new icons or change existing icons, follow these steps:
-
-- Clone or fork this repo, then create a branch for your changes.
-
-- Navigate to [fontello.com](http://fontello.com/) and drag the `config.json` file in this project's `src` folder onto Fontello's homepage. This will load the font project for editing.
-
-- You will notice that the fist icon selected is blank and is named `__do_not_delete`. **DO NOT DELETE THIS ICON!** Without it, the SPA will not be able to detect that the font is loaded, causing rendering to be delayed by 3 seconds.
-
-- To add a new icon, drag the SVG file onto Fontello's homepage, then switch to the "Customize Names" tab and give the icon a name that follows the [kebab-case](https://medium.com/better-programming/string-case-styles-camel-pascal-snake-and-kebab-case-981407998841) convention (where each word is all lowercase and separated by a hyphen).
-
-- To edit an existing icon, take note of the existing icon's name on the "Customize Names" tab and the character code on the "Customize Codes" tab on Fontello's homepage. Return to the "Select Icons" tab and drag the new icon's SVG file onto the page, then delete the existing icon. Change the new icon's name and character codes to the same values as the icon you are replacing. **When changing an existing icon, it is imperitave that you use the same name and character code for its replacement; otherwise you will break the font for consumers!**
-
-- When you have finished editing the icons, click the "Download webfont" button at the top of the page.
-
-- Unzip the contents of the downloaded file and drop them in this project's `src` folder, overwriting any existing files.
-
-- Update the `metadata.json` file at the root of this project with your added or updated icons, following the existing pattern in that file. Each new icon should be listed in this file with a `usage` property which lists the scenarios where the new icon should be used. Documentation is generated from this file, so if an icon is not listed, it will not be listed in the documentation and therefore hidden from consumers. If you are deprecating an icon, you can remove it from the list which will remove it from the documentation but not affect any code that already uses this icon. This is a way to "remove" an icon while not breaking existing consumers.
-
-- Commit your changes to your branch and push them to GitHub, then create a pull request so they can be reviewed.
-
-- Your work is now done. The owners of this repo will handle reviewing, merging and releasing your changes.
-
-## Legal
-
-Icons which have an `owner` property in the `metadata.json` file are the property of the listed organization.
-
-Icons owned by `Webalys, LLC` must only be used within the context of the SKY UX user experience framework.
+# skyux-icons
+
+A glyph font and stylesheet for displaying SKY UX icons.
+
+## Installation
+
+The primary method of consuming the SKY UX icon font on the web is via the Blackbaud CDN. In the following examples, you should replace `<version>` with the specific version in this project's `package.json`. As new versions are released, previous versions will continue to be hosted on the CDN for backwards compatibility.
+
+The URLs in the examples point to minified files. If you would like to load the non-minified file for debugging, remove the `.min` portion of the file name before the extension.
+
+### Importing the stylesheet via HTML
+
+`<link rel="stylesheet" href="https://sky.blackbaudcdn.net/static/skyux-icons/<version>/assets/skyux-icons.min.css">`
+
+### Importing the stylesheet via CSS `@import`
+
+`@import url("https://sky.blackbaudcdn.net/static/skyux-icons/<version>/assets/css/skyux-icons.min.css");`
+
+If you are using the SKY UX icon font in a non-web-based project, you may install it via NPM:
+
+`npm install @skyux/icons`
+
+If you are using SKY UX icons in a [SKY UX](https://developer.blackbaud.com/skyux/) project, the icon font will already be imported for you.
+
+## Usage
+
+To display an icon on an HTML page, specify an element with the CSS class `sky-i-` followed by the name of the icon. It is typical to use an `i` element for displaying icons from an icon font.
+
+`<i class="sky-i-calendar"></i>`
+
+If you are using SKY UX, use the `sky-icon` component documented [here](https://host.nxt.blackbaud.com/skyux-indicators/docs/icon).
+
+`<sky-icon icon="calendar" iconType="skyux"></sky-icon>`
+
+## Contributing
+
+The SKY UX icon font is generated using [Fontello](http://fontello.com/). To add new icons or change existing icons, follow these steps:
+
+- Clone or fork this repo, then create a branch for your changes.
+
+- Navigate to [fontello.com](http://fontello.com/) and drag the `config.json` file in this project's `src` folder onto Fontello's homepage. This will load the font project for editing.
+
+- You will notice that the fist icon selected is blank and is named `__do_not_delete`. **DO NOT DELETE THIS ICON!** Without it, the SPA will not be able to detect that the font is loaded, causing rendering to be delayed by 3 seconds.
+
+- To add a new icon, drag the SVG file onto Fontello's homepage, then switch to the "Customize Names" tab and give the icon a name that follows the [kebab-case](https://medium.com/better-programming/string-case-styles-camel-pascal-snake-and-kebab-case-981407998841) convention (where each word is all lowercase and separated by a hyphen).
+
+- To edit an existing icon, take note of the existing icon's name on the "Customize Names" tab and the character code on the "Customize Codes" tab on Fontello's homepage. Return to the "Select Icons" tab and drag the new icon's SVG file onto the page, then delete the existing icon. Change the new icon's name and character codes to the same values as the icon you are replacing. **When changing an existing icon, it is imperitave that you use the same name and character code for its replacement; otherwise you will break the font for consumers!**
+
+- When you have finished editing the icons, click the "Download webfont" button at the top of the page.
+
+- Unzip the contents of the downloaded file and drop them in this project's `src` folder, overwriting any existing files.
+
+- Update the `metadata.json` file at the root of this project with your added or updated icons, following the existing pattern in that file. Each new icon should be listed in this file with a `usage` property which lists the scenarios where the new icon should be used. Documentation is generated from this file, so if an icon is not listed, it will not be listed in the documentation and therefore hidden from consumers. If you are deprecating an icon, you can remove it from the list which will remove it from the documentation but not affect any code that already uses this icon. This is a way to "remove" an icon while not breaking existing consumers.
+
+- Commit your changes to your branch and push them to GitHub, then create a pull request so they can be reviewed.
+
+- Your work is now done. The owners of this repo will handle reviewing, merging and releasing your changes.
+
+## Legal
+
+Icons which have an `owner` property in the `metadata.json` file are the property of the listed organization.
+
+Icons owned by `Webalys, LLC` must only be used within the context of the SKY UX user experience framework.

package/assets/css/animation.css

@@ -1,85 +1,85 @@
-/*
-   Animation example, for spinners
-*/
-.animate-spin {
-  -moz-animation: spin 2s infinite linear;
-  -o-animation: spin 2s infinite linear;
-  -webkit-animation: spin 2s infinite linear;
-  animation: spin 2s infinite linear;
-  display: inline-block;
-}
-@-moz-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@-webkit-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@-o-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@-ms-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
+/*
+   Animation example, for spinners
+*/
+.animate-spin {
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+  display: inline-block;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}