https://github.com/giuseppeg/suitcss-components-arrow
Arrow to use with dropdowns, tooltips etc.
https://github.com/giuseppeg/suitcss-components-arrow
Last synced: 7 months ago
JSON representation
Arrow to use with dropdowns, tooltips etc.
- Host: GitHub
- URL: https://github.com/giuseppeg/suitcss-components-arrow
- Owner: giuseppeg
- License: mit
- Created: 2016-06-11T15:01:57.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-06-11T15:09:31.000Z (about 10 years ago)
- Last Synced: 2025-03-06T23:47:38.692Z (over 1 year ago)
- Language: HTML
- Homepage: http://giuseppeg.github.io/suitcss-components-arrow/test
- Size: 4.88 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SUIT Arrow
[](http://travis-ci.org/giuseppeg/suitcss-components-arrow)
A SUIT component for an arrow to use with dropdowns, tooltips etc.
Read more about [SUIT's design principles](https://github.com/suitcss/suit/).
## Installation
* [npm](https://npmjs.org/): `npm install suitcss-components-arrow`
* Download: [releases](https://github.com/giuseppeg/suitcss-components-arrow/releases/latest)
## Available classes
* `Arrow` - The core Arrow class
* `Arrow--[top|right|bottom|left]` – Position modifiers. `Arrow--bottom` is the default.
## Configurable variables
```css
--Arrow-size
--Arrow-backgroundColor
--Arrow-borderColor
--Arrow-borderRadius
--Arrow-boxShadowColor
--Arrow-boxShadowSpread
```
## Usage
```html
```
It is recommended to use a wrapper element to control the `Arrow` position.
E.g.:
```html
```
### Tweaking the Arrow Size
The arrow size can be changed by overriding the `font-size` of the `.Arrow` element.
## Testing
Install [Node](http://nodejs.org) (comes with npm).
```
npm install
```
To generate a build:
```
npm run build
```
To generate the testing build.
```
npm run build-test
```
Basic visual tests are in `test/index.html`.
To pre-process:
```
npm run preprocess
```
To pre-process the tests:
```
npm run preprocess-test
```
## Browser support
* Google Chrome 4+
* Opera 11.5+
* Firefox 3.5+
* Safari 3.1+
* Internet Explorer 9+