major changes
This commit is contained in:
Rohit
299
bower_components/pretty-checkbox/README.md
vendored
Normal file
299
bower_components/pretty-checkbox/README.md
vendored
Normal file
@@ -0,0 +1,299 @@
|
||||
<h1 align="center">
|
||||
<br>
|
||||
<a href="https://lokesh-coder.github.io/pretty-checkbox/"><img src="logo.png" alt="Pretty checkbox" width="100"></a>
|
||||
<br> <br> pretty-checkbox.css <br>
|
||||
</h1>
|
||||
|
||||
<h4 align="center">A pure CSS library to beautify checkbox and radio buttons.</h4>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/lokesh-coder/pretty-checkbox/releases">
|
||||
<img src="https://img.shields.io/github/release/lokesh-coder/pretty-checkbox.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Github Release">
|
||||
</a>
|
||||
<a href="LICENSE">
|
||||
<img src="https://img.shields.io/npm/l/pretty-checkbox.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Licence">
|
||||
</a>
|
||||
<a href="#">
|
||||
<img src="https://img.shields.io/npm/dm/pretty-checkbox.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Downloads">
|
||||
</a>
|
||||
</p>
|
||||
<br>
|
||||
|
||||
<div class="highlight highlight-source-shell">
|
||||
<pre>
|
||||
<div align="center"><strong >Demo and documentation</strong></div>
|
||||
<div align="center"><a align="center" href="https://lokesh-coder.github.io/pretty-checkbox/">https://lokesh-coder.github.io/pretty-checkbox/</a></div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<img src="preview.gif" alt="Pretty checkbox preview"/>
|
||||
</div>
|
||||
|
||||
### Features
|
||||
* Basic
|
||||
- **Shapes** - *Square*, *Curve*, *Round*
|
||||
- **Variants** - *Default*, *Fill*, *Thick*
|
||||
- **Colors** - *Primary*, *Success*, *Info*, *Warning*, *Danger*
|
||||
- **Color types** - *Solid*, *Outline*
|
||||
- **Animations** - *Smooth*, *Tada*, *Jelly*, *Pulse*, *Rotate*
|
||||
* Switch - iOS style - *Outline*, *Fill*, *Slim*
|
||||
* Responsive
|
||||
* No JavaScript
|
||||
* Custom Font Icons
|
||||
* SVG Icons
|
||||
* Image support
|
||||
* Toggle between icons / SVG's / images
|
||||
* Lock
|
||||
* State - *Focus*, *Hover*, *Indeterminate*
|
||||
* Supports frameworks - *Bootstrap*, *Foundation*, *Sematic UI*, *Bulma*, ...
|
||||
* SCSS customization
|
||||
* Supports all modern browsers, including mobile devices
|
||||
* Print friendly
|
||||
* and more... ( *I am kidding, that's all!* )
|
||||
|
||||
### Installation
|
||||
- **From CLI**
|
||||
|
||||
Install the library from [`npm`](https://www.npmjs.com/package/pretty-checkbox) or [`yarn`](https://yarnpkg.com/en/package/pretty-checkbox) package manager
|
||||
|
||||
```sh
|
||||
> npm install pretty-checkbox // or
|
||||
> yarn add pretty-checkbox
|
||||
```
|
||||
Add `pretty-checkbox.min.css` in your html
|
||||
|
||||
<br>
|
||||
|
||||
- **From CDN** ( [`jsDelivr`](https://www.jsdelivr.com/package/npm/pretty-checkbox) )
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css"/>
|
||||
```
|
||||
|
||||
<br>
|
||||
|
||||
- **Manual download** ( [`Github`](https://github.com/lokesh-coder/pretty-checkbox/archive/master.zip) )
|
||||
|
||||
Download the source from Github.
|
||||
```html
|
||||
<link rel="stylesheet" href="../<PATH>/pretty-checkbox/dist/pretty-checkbox.min.css"/>
|
||||
```
|
||||
`<PATH>` is where the library is downloaded.
|
||||
|
||||
<br>
|
||||
|
||||
**SCSS**
|
||||
|
||||
You can also import `pretty-checkbox.scss` in your main scss file.
|
||||
```scss
|
||||
@import '~pretty-checkbox/src/pretty.scss';
|
||||
```
|
||||
|
||||
Please refer the document for SCSS settings.
|
||||
|
||||
|
||||
### Usage
|
||||
|
||||
|
||||
Pretty checkbox comes with many styles,
|
||||
|
||||
| Class name | Description |
|
||||
| :---------- | :----------------------- |
|
||||
| `p-default` | Basic style |
|
||||
| `p-switch` | iOS like toggle style |
|
||||
| `p-icon` | Custom font icons |
|
||||
| `p-svg` | Custom SVG files, markup |
|
||||
| `p-image` | Tiny images |
|
||||
|
||||
And three shapes `p-round` `p-curve` `p-square` (default)
|
||||
|
||||
|
||||
#### Basic checkbox
|
||||
|
||||
```html
|
||||
<div class="pretty p-default">
|
||||
<input type="checkbox" />
|
||||
<div class="state">
|
||||
<label>Check me</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Basic checkbox has three variants `p-fill` `p-thick` `p-outline` (default)
|
||||
|
||||
You can combine them.
|
||||
|
||||
```html
|
||||
<div class="pretty p-default p-curve p-fill">
|
||||
<input type="checkbox" />
|
||||
<div class="state">
|
||||
<label>Fill</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div align="center"><strong >---</strong></div>
|
||||
|
||||
#### Switch checkbox
|
||||
|
||||
Switch has three variants `p-outline` `p-fill` `p-slim`
|
||||
|
||||
```html
|
||||
<div class="pretty p-switch p-fill">
|
||||
<input type="checkbox" />
|
||||
<div class="state">
|
||||
<label>On</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div align="center"><strong >---</strong></div>
|
||||
|
||||
#### Custom Font icons
|
||||
|
||||
```html
|
||||
<div class="pretty p-icon">
|
||||
<input type="checkbox">
|
||||
<div class="state">
|
||||
<i class="icon fa fa-check"></i>
|
||||
<label>Check me</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<blockquote>
|
||||
<sub>
|
||||
<strong>Note</strong>: class `icon` should be added along with icon class names
|
||||
</sub>
|
||||
</blockquote>
|
||||
|
||||
<blockquote>
|
||||
<sub>
|
||||
<strong>Note</strong>: For icons to work, you need to add appropriate font icons library. In above example , we used font awesome icon. So, FontAwesome should be included separately.
|
||||
</sub>
|
||||
</blockquote>
|
||||
|
||||
<div align="right">
|
||||
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#fonticons">
|
||||
more details</a></sub></i>
|
||||
</div>
|
||||
|
||||
<div align="center"><strong >---</strong></div>
|
||||
|
||||
#### SVG
|
||||
|
||||
Supports SVG file in <img/> tag, markup (`<svg> ... </svg>`) and sprites
|
||||
|
||||
```html
|
||||
<div class="pretty p-svg">
|
||||
<input type="checkbox">
|
||||
<div class="state">
|
||||
<img class="svg" src="file.svg" />
|
||||
<label>Check me</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<blockquote>
|
||||
<sub>
|
||||
<strong>Note</strong>: class `svg` to be added in img tag or svg tag.
|
||||
</sub>
|
||||
</blockquote>
|
||||
|
||||
<div align="right">
|
||||
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#svg">more details</a></sub></i>
|
||||
</div>
|
||||
|
||||
<div align="center"><strong >---</strong></div>
|
||||
|
||||
#### Image
|
||||
|
||||
Supports any type of valid image format.
|
||||
|
||||
```html
|
||||
<div class="pretty p-image">
|
||||
<input type="checkbox" />
|
||||
<div class="state">
|
||||
<img class="image" src="/check.png" />
|
||||
<label>Block</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<blockquote>
|
||||
<sub>
|
||||
<strong>Note</strong>: class `image` to be added in img tag.
|
||||
</sub>
|
||||
</blockquote>
|
||||
|
||||
<div align="right">
|
||||
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#image">more details</a></sub></i>
|
||||
</div>
|
||||
|
||||
<div align="center"><strong >---</strong></div>
|
||||
|
||||
#### Colors
|
||||
|
||||
There are five solid colors `p-primary` `p-success` `p-warning` `p-info` `p-danger`
|
||||
|
||||
And five outline colors `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p-danger-o`
|
||||
|
||||
```html
|
||||
<div class="pretty p-default p-curve p-thick">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-warning">
|
||||
<label>Warning</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
<blockquote>
|
||||
<sub>
|
||||
<strong>Note</strong>: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature.
|
||||
</sub>
|
||||
</blockquote>
|
||||
|
||||
<div align="right">
|
||||
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#colors">more details</a></sub></i>
|
||||
</div>
|
||||
|
||||
### More
|
||||
|
||||
There are more features like ***Radio buttons*** , ***Toggle*** , ***States*** , ***Animations*** , ***Border less*** , ***Lock*** , ***Scale***, ***SCSS Settings***.
|
||||
|
||||
Please refer the [documentation](https://lokesh-coder.github.io/pretty-checkbox/) to know about them.
|
||||
|
||||
|
||||
### Browser support
|
||||
|
||||
Works in all modern browsers.
|
||||
|
||||
`Chrome >= 26` `Firefox >= 16` `Safari >= 6.1` `Opera >= 15` `IE >= 9`
|
||||
|
||||
### Font Icon libraries
|
||||
* [Font awesome](http://fontawesome.io/icons/)
|
||||
* [Bootstrap Glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons)
|
||||
* [Material icon ( MDI )](https://materialdesignicons.com/)
|
||||
* [Material icon ( ZMDI )](http://zavoloklom.github.io/material-design-iconic-font/icons.html)
|
||||
* [Ion icons](http://ionicons.com/)
|
||||
* [Typicons](http://www.typicons.com/)
|
||||
* [Material icon ( Google )](https://material.io/icons)
|
||||
* Others not tested, but will work ( 99% ).
|
||||
|
||||
|
||||
### SVG
|
||||
* [UIKit](https://getuikit.com/docs/icon)
|
||||
* [Feathers](https://feathericons.com/)
|
||||
* Others
|
||||
|
||||
### Inspiration
|
||||
- [Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox) - Idea
|
||||
- [Animista](http://animista.net) - Animations
|
||||
|
||||
### Contributions
|
||||
Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome!
|
||||
|
||||
### License
|
||||
This project is licensed under the MIT License
|
||||
|
||||
|
||||
<div align="center"><sub>❤</sub></div>
|
||||
Reference in New Issue
Block a user