# falcon-styles

CSS library for the Falcon web style using Stylus

## Components

| Component        | Variants                                   | CSS Classes                                                                                                                                                                                                                                                                            |
| :--------------- | :----------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Falcon Button    | Rounded Button, Square Button, Text Button | .falcon-button, .falcon-button_orange, .falcon-button_blue, .falcon-button_yellow, .falcon-button_orange_square, .falcon-button_rounded, .falcon-button**text_orange, .falcon-button**text_orange_bg_dark, .falcon-button**text_white, .falcon-button_close, .falcon-button**text_dark |
| Falcon Input     | -                                          | .falcon-input-block, .falcon-input, .falcon-input_password,                                                                                                                                                                                                                            |
| Falcon Dropdown  | -                                          | .falcon-dropdown_group, .falcon-dropdown_block, .falcon-dropdown_container, .falcon-dropdown**choice, .falcon-dropdown**choice_text                                                                                                                                                    |
| Falcon Search    | -                                          | .falcon-search-block, .falcon-search                                                                                                                                                                                                                                                   |
| Falcon Swarm     | Bordered                                   | .falcon-swarm, .falcon-swarm\_\_shadow, .falcon-swarm_bordered                                                                                                                                                                                                                         |
| Falcon Tab       | -                                          | .falcon-tab_group, .falcon-tab_group_aside, .falcon-tab, .falcon-tab_aside, .falcon-tab_inactive, .falcon-tab_active, .falcon-tab\_\_icon                                                                                                                                              |
| Falcon Stencil   | -                                          | .falcon-stencil                                                                                                                                                                                                                                                                        |
| Falcon container | -                                          | .falcon-container                                                                                                                                                                                                                                                                      |

---

## Run project

Install stylus preprocessor

```
npm install stylus -g
```

Compile stylus and apply a watcher for changes

```
stylus -w stylus/<filename>.styl -o dist/css/<filename>.css
```

Compile stylus for all files in stylus folder

```
npm run watch
```

Stylus compress

```
stylus -c stylus/<filename>.styl -o dist/css/<filename>.min.css
```

## Publish on NPM

Login with your NPM account

```
npm login
```

Update version of package

```
npm version <update_type>
```

Publish on NPM

```
npm publish
```